svelte-kit-vice/src/uix/morfo/components/drag-drop.ts

import type { Morfo } from '../types';
import { v } from '../types';

export const dragDropMorfo = {
	name: 'DragDrop',
	kebab: 'drag-drop',
	scope: ['soma', 'sema'],
	texts: {
		label: '#?components.drag-drop.label|Drag and drop',
		'drag-started': '#?components.drag-drop.drag-started|Started dragging {{item}}',
		'drag-over': '#?components.drag-drop.drag-over|Over drop zone {{target}}',
		dropped: '#?components.drag-drop.dropped|Dropped {{item}} on {{target}}',
		cancelled: '#?components.drag-drop.cancelled|Drag cancelled',
		'no-targets': '#?components.drag-drop.no-targets|No drop targets available',
		draggable: '#?components.drag-drop.draggable|Draggable',
		droppable: '#?components.drag-drop.droppable|Drop zone',
		'draggable-role': '#?components.drag-drop.draggable-role|draggable',
		'droppable-role': '#?components.drag-drop.droppable-role|drop zone',
		'droppable-active': '#?components.drag-drop.droppable-active|active drop zone'
	},
	events: [
		{
			// Per book cap. 25 §4 literal: "Pick — handle.pick — ¿he
			// agarrado esto?". Start of direct manipulation. NOT a commit
			// (commit is the consequence of the drop, fired by whichever
			// morfo owns the moved/deleted entity).
			name: 'handle-pick',
			semantic: {
				family: 'handle',
				verb: 'pick',
				target: v.partRef('draggable'),
				sequence: 'post'
			}
		},
		{
			// Per book cap. 25 §4 literal: "Drop — handle.drop — ¿qué
			// ocurrió al soltar?". Just the release; what the release
			// resolves (commit.reorder + affirm, commit.delete + loss,
			// etc.) lives in the morfo that owns the target/entity.
			name: 'handle-drop',
			semantic: {
				family: 'handle',
				verb: 'drop',
				target: v.partRef('droppable'),
				sequence: 'post'
			}
		},
		{
			// User cancelled the drag (Escape during carry). The operation
			// reverts; nothing committed downstream. `commit.cancel` per
			// book cap. 23.
			name: 'commit-cancel',
			semantic: {
				family: 'commit',
				verb: 'cancel',
				target: v.partRef('draggable'),
				intent: 'neutral',
				sequence: 'post'
			}
		}
	],
	parts: [
		{
			name: 'Provider',
			kebab: 'provider',
			archetype: 'provider',
			kind: 'public',
			defaultElement: 'div',
			optional: false,
			data: [{ attr: 'data-dragging', severity: 'optional' }],
			aria: []
		},
		{
			name: 'Draggable',
			kebab: 'draggable',
			kind: 'public',
			defaultElement: 'div',
			role: 'button',
			optional: false,
			data: [
				{ attr: 'data-value' },
				{ attr: 'data-text-value', severity: 'optional' },
				{ attr: 'data-drag-handle', severity: 'optional' },
				{ attr: 'data-dragging', severity: 'optional' },
				{ attr: 'data-disabled', severity: 'optional' }
			],
			aria: [
				{
					attr: 'aria-roledescription',
					value: v.translationRef('#?components.drag-drop.draggable|Draggable')
				},
				{
					attr: 'aria-disabled',
					value: v.literal('true'),
					severity: 'optional',
					condition: { when: 'prop-truthy', prop: 'disabled' }
				},
				{
					attr: 'aria-grabbed',
					value: v.literal('true'),
					severity: 'optional',
					condition: { when: 'prop-truthy', prop: 'active' }
				}
			],
			keyboard: [
				{ key: 'Enter', action: 'activate' },
				{ key: ' ', action: 'activate' },
				{ key: 'Escape', action: 'cancel' },
				{ key: 'ArrowDown', action: 'next' },
				{ key: 'ArrowRight', action: 'next' },
				{ key: 'ArrowUp', action: 'prev' },
				{ key: 'ArrowLeft', action: 'prev' },
				{ key: 'Tab', action: 'next' },
				{ key: 'Shift+Tab', action: 'prev' }
			]
		},
		{
			name: 'Droppable',
			kebab: 'droppable',
			kind: 'public',
			defaultElement: 'div',
			role: 'region',
			optional: false,
			data: [
				{ attr: 'data-dragover', severity: 'optional' },
				{ attr: 'data-accepting', severity: 'optional' },
				{ attr: 'data-text-value', severity: 'optional' },
				{ attr: 'data-disabled', severity: 'optional' }
			],
			aria: [
				{
					attr: 'aria-roledescription',
					value: v.translationRef('#?components.drag-drop.droppable|Drop zone')
				},
				{ attr: 'aria-dropeffect', value: v.propRef('dropEffect'), severity: 'optional' },
				{
					attr: 'aria-disabled',
					value: v.literal('true'),
					severity: 'optional',
					condition: { when: 'prop-truthy', prop: 'disabled' }
				}
			]
		},
		{
			name: 'Preview',
			kebab: 'preview',
			archetype: 'preview',
			kind: 'public',
			defaultElement: 'div',
			optional: true,
			data: [{ attr: 'data-active', severity: 'optional' }],
			aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
		}
	]
} as const satisfies Morfo;