@vizejs/ui 0.387.0 → 0.388.0

package/dist/sortable-BntjgYra.mjs

@@ -0,0 +1,499 @@
+import { c as compareDocumentOrder, d as readBoolean, f as readLabel, l as indicatorFor, m as validateKey, p as validateCallbacks, t as createDragAndDrop, u as measureRect } from "./drag-and-drop-BjYgWGcG.mjs";
+import { r as eventElement } from "./press-event-xlWYF9py.mjs";
+import { getCurrentScope, onScopeDispose, shallowReadonly, shallowRef, toValue } from "vue";
+//#region src/families/interaction/sortable/sortable-internal.ts
+const invalidOptionDiagnostic = "VIZE_UI_SORTABLE_OPTION";
+const orientations = new Set([
+	"grid",
+	"horizontal",
+	"vertical"
+]);
+const directions = new Set(["ltr", "rtl"]);
+/** Resolve the closed orientation union without accepting mistyped JavaScript. */
+function readOrientation(value) {
+	const resolved = toValue(value) ?? "vertical";
+	if (!orientations.has(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: orientation must resolve to grid, horizontal, or vertical`);
+	return resolved;
+}
+/** Resolve the closed direction union without accepting mistyped JavaScript. */
+function readDirection(value) {
+	const resolved = toValue(value) ?? "ltr";
+	if (!directions.has(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: direction must resolve to ltr or rtl`);
+	return resolved;
+}
+/** Resolve a positive integer column count for grid arrow-key geometry. */
+function readColumns(value) {
+	const resolved = toValue(value) ?? 1;
+	if (!Number.isInteger(resolved) || resolved < 1) throw new TypeError(`${invalidOptionDiagnostic}: columns must resolve to an integer >= 1`);
+	return resolved;
+}
+/** Drop edges one item target resolves for an orientation. */
+function edgesFor(orientation, nesting) {
+	const directional = orientation === "vertical" ? ["top", "bottom"] : ["left", "right"];
+	return nesting ? [...directional, "inside"] : directional;
+}
+/** Map a logical position back onto the physical edge for an orientation. */
+function edgeForPosition(position, orientation, direction) {
+	if (position === "inside") return "inside";
+	if (orientation === "vertical") return position === "before" ? "top" : "bottom";
+	return position === "before" ? direction === "rtl" ? "right" : "left" : direction === "rtl" ? "left" : "right";
+}
+/** Build a frozen lifecycle snapshot for sortable callbacks. */
+function createSortableEvent(type, pointerType, key, fromIndex, toIndex, overKey, position, originalEvent) {
+	return Object.freeze({
+		type,
+		pointerType,
+		key,
+		fromIndex,
+		toIndex,
+		overKey,
+		position,
+		originalEvent
+	});
+}
+/** Map a physical drop edge onto the logical position for an orientation. */
+function positionForEdge(edge, orientation, direction) {
+	if (edge === "inside") return "inside";
+	if (orientation === "vertical") return edge === "top" ? "before" : "after";
+	return edge === (direction === "rtl" ? "right" : "left") ? "before" : "after";
+}
+/**
+* Compute the insertion index for moving `fromIndex` relative to `overIndex`.
+*
+* `"inside"` moves report the receiving item's index unchanged.
+*/
+function computeToIndex(fromIndex, overIndex, position) {
+	if (position === "inside" || fromIndex === overIndex) return overIndex;
+	if (fromIndex < overIndex) return position === "before" ? overIndex - 1 : overIndex;
+	return position === "before" ? overIndex : overIndex + 1;
+}
+/** Signed index step for one arrow key, or `null` when the key is not owned. */
+function keyboardDelta(key, orientation, direction, columns) {
+	const forward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (orientation === "vertical") {
+		if (key === "ArrowUp") return -1;
+		if (key === "ArrowDown") return 1;
+		return null;
+	}
+	if (orientation === "grid") {
+		if (key === "ArrowUp") return -columns;
+		if (key === "ArrowDown") return columns;
+	}
+	if (key === backward) return -1;
+	if (key === forward) return 1;
+	return null;
+}
+/** Dispatch one lifecycle snapshot to the matching consumer callback. */
+function dispatchSortableEvent(options, event) {
+	if (event.type === "sortstart") options.onSortStart?.(event);
+	else if (event.type === "sortpreview") options.onSortPreview?.(event);
+	else if (event.type === "sortcommit") options.onSortCommit?.(event);
+	else options.onSortCancel?.(event);
+}
+/** Project a drag-and-drop context onto sortable indexes and positions. */
+function projectDragContext(keys, orientation, direction, dragContext) {
+	const currentIndex = Math.max(keys.indexOf(dragContext.sourceKey), 0);
+	const overIndex = dragContext.targetKey === null ? -1 : keys.indexOf(dragContext.targetKey);
+	const position = dragContext.edge === null ? null : positionForEdge(dragContext.edge, orientation, direction);
+	return {
+		currentIndex,
+		overIndex,
+		toIndex: overIndex >= 0 && position !== null ? computeToIndex(currentIndex, overIndex, position) : currentIndex,
+		position
+	};
+}
+/** Build the sortable announcement context for one drag announcement phase. */
+function sortableContextFor(phase, dragContext, projection, count, originIndex) {
+	const { currentIndex, toIndex, position } = projection;
+	const settled = phase === "cancel" || phase === "drop";
+	return {
+		pointerType: dragContext.pointerType,
+		key: dragContext.sourceKey,
+		label: dragContext.sourceLabel,
+		fromIndex: settled ? originIndex ?? currentIndex : currentIndex,
+		toIndex: phase === "cancel" ? originIndex ?? currentIndex : toIndex,
+		count,
+		overKey: phase === "cancel" ? null : dragContext.targetKey,
+		overLabel: phase === "cancel" ? null : dragContext.targetLabel,
+		position: phase === "cancel" ? null : position
+	};
+}
+function human(index) {
+	return index + 1;
+}
+/** Built-in English announcement builders; consumers override to localize. */
+const defaultSortableAnnouncements = Object.freeze({
+	grab: (context) => {
+		const start = `Picked up ${context.label}, position ${human(context.fromIndex)} of ${context.count}.`;
+		return context.pointerType === "keyboard" ? `${start} Use the arrow keys to move, Enter to drop, Escape to cancel.` : start;
+	},
+	move: (context) => context.position === "inside" ? `${context.label} placed inside ${context.overLabel ?? "the item"}.` : `${context.label} moved to position ${human(context.toIndex)} of ${context.count}.`,
+	drop: (context) => context.position === "inside" ? `${context.label} dropped inside ${context.overLabel ?? "the item"}.` : `${context.label} dropped, final position ${human(context.toIndex)} of ${context.count}.`,
+	cancel: (context) => `Sorting canceled. ${context.label} returned to position ${human(context.toIndex)} of ${context.count}.`
+});
+//#endregion
+//#region src/families/interaction/sortable/sortable-keyboard.ts
+function context(host, session, fromIndex, toIndex) {
+	return {
+		pointerType: session.pointerType,
+		key: session.key,
+		label: host.labelOf(session.key),
+		fromIndex,
+		toIndex,
+		count: host.orderedKeys().length,
+		overKey: session.overKey,
+		overLabel: session.overKey === null ? null : host.labelOf(session.overKey),
+		position: session.position
+	};
+}
+function setIndicator(host, referenceKey, position, toIndex) {
+	const shape = indicatorFor(referenceKey, edgeForPosition(position, readOrientation(host.options.orientation), readDirection(host.options.direction)), host.measureItem(referenceKey));
+	host.indicator.value = {
+		key: referenceKey,
+		position,
+		toIndex,
+		rect: shape.rect,
+		line: shape.line
+	};
+}
+function moveTo(host, event, requested) {
+	const session = host.getSession();
+	if (!session) return;
+	const keys = host.orderedKeys();
+	const next = Math.min(Math.max(requested, 0), keys.length - 1);
+	const changed = next !== session.toIndex || session.position !== null;
+	session.toIndex = next;
+	session.overKey = null;
+	session.position = null;
+	const currentIndex = Math.max(keys.indexOf(session.key), 0);
+	const referenceKey = keys[next];
+	if (referenceKey !== void 0) setIndicator(host, referenceKey, next >= currentIndex ? "after" : "before", next);
+	if (!changed) return;
+	host.emit(createSortableEvent("sortpreview", session.pointerType, session.key, currentIndex, next, null, null, event));
+	host.announce(host.announcements.move(context(host, session, currentIndex, next)));
+}
+function nest(host, event) {
+	const session = host.getSession();
+	if (!session || session.position === "inside") return;
+	const keys = host.orderedKeys();
+	let referenceIndex = session.toIndex - 1;
+	while (referenceIndex >= 0 && keys[referenceIndex] === session.key) referenceIndex -= 1;
+	const referenceKey = referenceIndex >= 0 ? keys[referenceIndex] : void 0;
+	if (referenceKey === void 0) return;
+	session.overKey = referenceKey;
+	session.position = "inside";
+	setIndicator(host, referenceKey, "inside", referenceIndex);
+	const currentIndex = Math.max(keys.indexOf(session.key), 0);
+	host.emit(createSortableEvent("sortpreview", session.pointerType, session.key, currentIndex, referenceIndex, referenceKey, "inside", event));
+	host.announce(host.announcements.move(context(host, session, currentIndex, referenceIndex)));
+}
+function settle(host, event, canceled) {
+	const session = host.getSession();
+	if (!session) return;
+	const keys = host.orderedKeys();
+	const currentIndex = Math.max(keys.indexOf(session.key), 0);
+	const toIndex = session.position === "inside" && session.overKey !== null ? Math.max(keys.indexOf(session.overKey), 0) : session.toIndex;
+	host.clearSession();
+	if (canceled) {
+		host.emit(createSortableEvent("sortcancel", session.pointerType, session.key, currentIndex, session.originIndex, null, null, event));
+		const restored = {
+			...session,
+			toIndex: session.originIndex,
+			overKey: null,
+			position: null
+		};
+		host.announce(host.announcements.cancel(context(host, restored, currentIndex, session.originIndex)));
+	} else {
+		host.emit(createSortableEvent("sortcommit", session.pointerType, session.key, session.originIndex, toIndex, session.overKey, session.position, event));
+		host.announce(host.announcements.drop(context(host, session, session.originIndex, toIndex)));
+	}
+}
+function grab(host, event, key) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.isComposing) return;
+	if (readBoolean(host.options.isDisabled, "isDisabled") || host.isItemDisabled(key)) return;
+	const target = eventElement(event);
+	if (!target || event.target !== target) return;
+	const index = host.orderedKeys().indexOf(key);
+	if (index < 0) return;
+	event.preventDefault();
+	event.stopPropagation();
+	const session = {
+		key,
+		pointerType: "keyboard",
+		originIndex: index,
+		toIndex: index,
+		overKey: null,
+		position: null
+	};
+	host.startSession(session);
+	host.emit(createSortableEvent("sortstart", "keyboard", key, index, index, null, null, event));
+	host.announce(host.announcements.grab(context(host, session, index, index)));
+}
+/** Handle one keydown from an item: grab, move, nest, drop, or cancel. */
+function handleSortableKeydown(host, event, key) {
+	const session = host.getSession();
+	if (session?.pointerType === "keyboard" && session.key === key) {
+		if (readBoolean(host.options.isDisabled, "isDisabled")) {
+			settle(host, event, true);
+			return;
+		}
+		const orientation = readOrientation(host.options.orientation);
+		const nesting = readBoolean(host.options.nesting, "nesting");
+		switch (event.key) {
+			case "Enter":
+			case " ":
+				settle(host, event, false);
+				break;
+			case "Escape":
+				settle(host, event, true);
+				break;
+			case "Home":
+				moveTo(host, event, 0);
+				break;
+			case "End":
+				moveTo(host, event, host.orderedKeys().length - 1);
+				break;
+			case "Tab":
+				settle(host, event, true);
+				return;
+			default: {
+				if (nesting && orientation === "vertical" && event.key === "ArrowRight") {
+					nest(host, event);
+					break;
+				}
+				if (nesting && orientation === "vertical" && event.key === "ArrowLeft") {
+					moveTo(host, event, session.toIndex);
+					break;
+				}
+				const delta = keyboardDelta(event.key, orientation, readDirection(host.options.direction), readColumns(host.options.columns));
+				if (delta === null) return;
+				moveTo(host, event, session.toIndex + delta);
+				break;
+			}
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	} else if (!session && (event.key === "Enter" || event.key === " ")) grab(host, event, key);
+}
+/** Cancel an owned keyboard sort from focus loss or programmatic teardown. */
+function cancelSortableKeyboard(host, event) {
+	if (host.getSession()?.pointerType !== "keyboard") return false;
+	settle(host, event, true);
+	return true;
+}
+//#endregion
+//#region src/families/interaction/sortable/sortable.ts
+const disposedDiagnostic = "VIZE_UI_SORTABLE_DISPOSED";
+const setupDiagnostic = "VIZE_UI_SORTABLE_SETUP";
+/** Create an SSR-safe sortable coordinator for lists, grids, and trees. */
+function createSortable(options = {}) {
+	validateCallbacks(options, [
+		"onSortStart",
+		"onSortPreview",
+		"onSortCommit",
+		"onSortCancel"
+	]);
+	if (typeof options.orientation !== "function") readOrientation(options.orientation);
+	if (typeof options.direction !== "function") readDirection(options.direction);
+	if (typeof options.columns !== "function") readColumns(options.columns);
+	const announcements = {
+		...defaultSortableAnnouncements,
+		...options.announcements
+	};
+	const items = /* @__PURE__ */ new Map();
+	const sorting = shallowRef(false);
+	const activeKey = shallowRef(null);
+	const indicator = shallowRef(null);
+	let session = null;
+	let disposed = false;
+	const orderedKeys = () => {
+		const list = [...items.entries()].map(([key, record]) => ({
+			key,
+			element: toValue(record.options.element) ?? null
+		}));
+		list.sort((left, right) => left.element && right.element ? compareDocumentOrder(left.element, right.element) : 0);
+		return list.map((entry) => entry.key);
+	};
+	const labelOf = (key) => readLabel(items.get(key)?.options.label, key);
+	const emit = (event) => dispatchSortableEvent(options, event);
+	const projection = (dragContext) => projectDragContext(orderedKeys(), readOrientation(options.orientation), readDirection(options.direction), dragContext);
+	const sortableContext = (phase, dragContext) => sortableContextFor(phase, dragContext, projection(dragContext), orderedKeys().length, session?.originIndex ?? null);
+	const dnd = createDragAndDrop({
+		isDisabled: options.isDisabled,
+		startDistance: options.startDistance,
+		announcements: {
+			grab: (context) => announcements.grab(sortableContext("grab", context)),
+			move: (context) => announcements.move(sortableContext("move", context)),
+			drop: (context) => announcements.drop(sortableContext("drop", context)),
+			cancel: (context) => announcements.cancel(sortableContext("cancel", context))
+		},
+		onDragStart(event) {
+			const index = Math.max(orderedKeys().indexOf(event.sourceKey), 0);
+			session = {
+				key: event.sourceKey,
+				pointerType: event.pointerType,
+				originIndex: index,
+				toIndex: index,
+				overKey: null,
+				position: null
+			};
+			sorting.value = true;
+			activeKey.value = event.sourceKey;
+			emit(createSortableEvent("sortstart", event.pointerType, event.sourceKey, index, index, null, null, event.originalEvent));
+		},
+		onDragMove(event) {
+			const current = session;
+			if (!current) return;
+			if (event.targetKey === null || event.edge === null) {
+				indicator.value = null;
+				current.overKey = null;
+				current.position = null;
+				return;
+			}
+			const { currentIndex, overIndex, toIndex, position } = projection(event);
+			if (overIndex < 0 || position === null) return;
+			if (position !== "inside" && toIndex === currentIndex) {
+				indicator.value = null;
+				current.overKey = null;
+				current.position = null;
+				current.toIndex = currentIndex;
+				return;
+			}
+			const changed = current.overKey !== event.targetKey || current.position !== position || current.toIndex !== toIndex;
+			current.overKey = event.targetKey;
+			current.position = position;
+			current.toIndex = toIndex;
+			const shape = dnd.indicator.value;
+			indicator.value = {
+				key: event.targetKey,
+				position,
+				toIndex,
+				rect: shape?.targetKey === event.targetKey ? shape.rect : null,
+				line: shape?.targetKey === event.targetKey ? shape.line : null
+			};
+			if (changed) emit(createSortableEvent("sortpreview", current.pointerType, current.key, currentIndex, toIndex, event.targetKey, position, event.originalEvent));
+		},
+		onDragEnd(event) {
+			const current = session;
+			if (!current) return;
+			session = null;
+			sorting.value = false;
+			activeKey.value = null;
+			indicator.value = null;
+			const keys = orderedKeys();
+			const currentIndex = Math.max(keys.indexOf(current.key), 0);
+			if (event.isCanceled || event.targetKey === null) {
+				emit(createSortableEvent("sortcancel", current.pointerType, current.key, currentIndex, current.originIndex, null, null, event.originalEvent));
+				return;
+			}
+			const { overIndex, toIndex, position } = projection(event);
+			const insideIndex = position === "inside" ? Math.max(overIndex, 0) : toIndex;
+			emit(createSortableEvent("sortcommit", current.pointerType, current.key, current.originIndex, insideIndex, event.targetKey, position, event.originalEvent));
+		}
+	});
+	const keyboardHost = {
+		options,
+		announcements,
+		indicator,
+		getSession: () => session,
+		startSession: (next) => {
+			session = next;
+			sorting.value = true;
+			activeKey.value = next.key;
+		},
+		clearSession: () => {
+			session = null;
+			sorting.value = false;
+			activeKey.value = null;
+			indicator.value = null;
+		},
+		orderedKeys,
+		labelOf,
+		measureItem: (key) => {
+			const record = items.get(key);
+			if (!record) return null;
+			return measureRect(toValue(record.options.element) ?? null, record.options.getRect);
+		},
+		isItemDisabled: (key) => readBoolean(items.get(key)?.options.isDisabled, "isDisabled"),
+		announce: (message) => {
+			if (message !== null) dnd.announce(message);
+		},
+		emit
+	};
+	return Object.freeze({
+		isSorting: shallowReadonly(sorting),
+		activeKey: shallowReadonly(activeKey),
+		indicator: shallowReadonly(indicator),
+		registerItem(itemOptions) {
+			if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+			const key = validateKey(itemOptions.key, items);
+			validateCallbacks(itemOptions, ["getRect"]);
+			const source = dnd.registerSource({
+				key,
+				element: itemOptions.element,
+				label: itemOptions.label,
+				isDisabled: itemOptions.isDisabled,
+				keyboard: false
+			});
+			const target = dnd.registerTarget({
+				key,
+				element: itemOptions.element,
+				label: itemOptions.label,
+				edges: () => edgesFor(readOrientation(options.orientation), readBoolean(options.nesting, "nesting")),
+				...itemOptions.getRect ? { getRect: itemOptions.getRect } : {}
+			});
+			const record = {
+				options: itemOptions,
+				source,
+				target
+			};
+			items.set(key, record);
+			const itemProps = Object.freeze({
+				...source.sourceProps,
+				onKeydown: (event) => {
+					if (!disposed) handleSortableKeydown(keyboardHost, event, key);
+				},
+				onFocusout: (event) => {
+					if (disposed) return;
+					if (session?.pointerType === "keyboard" && session.key === key) cancelSortableKeyboard(keyboardHost, event);
+				}
+			});
+			return Object.freeze({
+				key,
+				isDragging: source.isDragging,
+				itemProps,
+				dispose: () => {
+					if (items.get(key) !== record) return;
+					if (session?.pointerType === "keyboard" && session.key === key) cancelSortableKeyboard(keyboardHost, null);
+					source.dispose();
+					target.dispose();
+					items.delete(key);
+				}
+			});
+		},
+		cancel: () => {
+			if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+			if (cancelSortableKeyboard(keyboardHost, null)) return true;
+			return dnd.cancel();
+		},
+		dispose: () => {
+			if (disposed) return;
+			disposed = true;
+			session = null;
+			sorting.value = false;
+			activeKey.value = null;
+			indicator.value = null;
+			dnd.dispose();
+		}
+	});
+}
+/** Create a sortable coordinator disposed with the current Vue effect scope. */
+function useSortable(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createSortable(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+export { useSortable as n, defaultSortableAnnouncements as r, createSortable as t };