ropav 0.2.0 → 0.3.0

package/dist/composables/use-drop.js

@@ -0,0 +1,242 @@
+import { isIPad, isMac } from "../utils/platform.js";
+import { DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT } from "../utils/dnd-constants.js";
+import { DataTransferDragTypes, dragTypesFromSet, readFromDataTransfer } from "../utils/dnd-data-transfer.js";
+import { registerDropTarget } from "./drag-manager.js";
+import { globalAllowedDropOperations, globalDndState, setGlobalDnDState, setGlobalDropEffect } from "../utils/dnd-state.js";
+import { useVirtualDrop } from "./use-virtual-drop.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-drop.ts
+/** How long the pointer must rest on a target before it is activated (e.g. a folder opens). */
+var DROP_ACTIVATE_TIMEOUT = 800;
+/**
+* Which operations the drag permits, narrowed by any modifier key being held.
+*
+* Ported from React Aria's `getAllowedOperations`.
+*/
+var getAllowedOperations = (event) => {
+	let allowed = DROP_OPERATION_ALLOWED[event.dataTransfer?.effectAllowed ?? "uninitialized"] ?? DROP_OPERATION.all;
+	if (globalAllowedDropOperations) allowed &= globalAllowedDropOperations;
+	let allowedModifiers = DROP_OPERATION.none;
+	if (isMac()) {
+		if (event.altKey) allowedModifiers |= DROP_OPERATION.copy;
+		if (event.ctrlKey && !isIPad()) allowedModifiers |= DROP_OPERATION.link;
+		if (event.metaKey) allowedModifiers |= DROP_OPERATION.move;
+	} else {
+		if (event.altKey) allowedModifiers |= DROP_OPERATION.link;
+		if (event.shiftKey) allowedModifiers |= DROP_OPERATION.move;
+		if (event.ctrlKey) allowedModifiers |= DROP_OPERATION.copy;
+	}
+	return allowedModifiers ? allowed & allowedModifiers : allowed;
+};
+var allowedOperationsToArray = (mask) => {
+	const operations = [];
+	if (mask & DROP_OPERATION.move) operations.push("move");
+	if (mask & DROP_OPERATION.copy) operations.push("copy");
+	if (mask & DROP_OPERATION.link) operations.push("link");
+	return operations;
+};
+var resolveDropOperation = (allowed, operation) => allowed & DROP_OPERATION[operation] ? operation : "cancel";
+/**
+* Drop behaviour for an element, ported from React Aria's `useDrop`.
+*
+* Handles the native drag events for a pointer, and registers with the drag session in
+* `drag-manager.ts` so the same target is reachable by keyboard and screen reader.
+*
+* As with `useDrag`, `attrs` and `handlers` are separate because Vapor re-attaches any `on*` key
+* that arrives via `v-bind` on every render. Bind `attrs`; wire `handlers` with `@event`.
+*/
+var useDrop = (options) => {
+	const isDropTarget = shallowRef(false);
+	const isDisabled = () => Boolean(toValue(options.isDisabled));
+	const hasDropButton = () => Boolean(toValue(options.hasDropButton));
+	let x = 0;
+	let y = 0;
+	let dropEffect = "none";
+	let allowedOperations = DROP_OPERATION.all;
+	let dropActivateTimer;
+	/**
+	* Every element under the pointer that has fired `dragenter` without a matching `dragleave`.
+	*
+	* `relatedTarget` would answer "is the pointer still inside" directly, but WebKit always
+	* reports it as null, so entries are counted instead and the target is left when the set
+	* empties.
+	*
+	* @see https://bugs.webkit.org/show_bug.cgi?id=66547
+	*/
+	const dragOverElements = /* @__PURE__ */ new Set();
+	const rectOf = (event) => event.currentTarget.getBoundingClientRect();
+	const fireDropEnter = (event) => {
+		isDropTarget.value = true;
+		if (!options.onDropEnter) return;
+		const rect = rectOf(event);
+		options.onDropEnter({
+			type: "dropenter",
+			x: event.clientX - rect.x,
+			y: event.clientY - rect.y
+		});
+	};
+	const fireDropExit = (event) => {
+		isDropTarget.value = false;
+		if (!options.onDropExit) return;
+		const rect = rectOf(event);
+		options.onDropExit({
+			type: "dropexit",
+			x: event.clientX - rect.x,
+			y: event.clientY - rect.y
+		});
+	};
+	const typesOf = (event) => new DataTransferDragTypes(event.dataTransfer ?? new DataTransfer());
+	const onDragenter = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (event.target instanceof Element) dragOverElements.add(event.target);
+		if (dragOverElements.size > 1) return;
+		const allowedBits = getAllowedOperations(event);
+		const allowedArray = allowedOperationsToArray(allowedBits);
+		let operation = allowedArray[0] ?? "cancel";
+		if (options.getDropOperation) operation = resolveDropOperation(allowedBits, options.getDropOperation(typesOf(event), allowedArray));
+		if (options.getDropOperationForPoint) {
+			const rect = rectOf(event);
+			operation = resolveDropOperation(allowedBits, options.getDropOperationForPoint(typesOf(event), allowedArray, event.clientX - rect.x, event.clientY - rect.y));
+		}
+		x = event.clientX;
+		y = event.clientY;
+		allowedOperations = allowedBits;
+		dropEffect = DROP_OPERATION_TO_DROP_EFFECT[operation] ?? "none";
+		if (event.dataTransfer) event.dataTransfer.dropEffect = dropEffect;
+		if (operation !== "cancel") fireDropEnter(event);
+	};
+	const onDragover = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const allowedBits = getAllowedOperations(event);
+		if (event.clientX === x && event.clientY === y && allowedBits === allowedOperations) {
+			if (event.dataTransfer) event.dataTransfer.dropEffect = dropEffect;
+			return;
+		}
+		x = event.clientX;
+		y = event.clientY;
+		const previousDropEffect = dropEffect;
+		if (allowedBits !== allowedOperations) {
+			const allowedArray = allowedOperationsToArray(allowedBits);
+			let operation = allowedArray[0] ?? "cancel";
+			if (options.getDropOperation) operation = resolveDropOperation(allowedBits, options.getDropOperation(typesOf(event), allowedArray));
+			dropEffect = DROP_OPERATION_TO_DROP_EFFECT[operation] ?? "none";
+		}
+		if (options.getDropOperationForPoint) {
+			const rect = rectOf(event);
+			const operation = resolveDropOperation(allowedBits, options.getDropOperationForPoint(typesOf(event), allowedOperationsToArray(allowedBits), x - rect.x, y - rect.y));
+			dropEffect = DROP_OPERATION_TO_DROP_EFFECT[operation] ?? "none";
+		}
+		allowedOperations = allowedBits;
+		if (event.dataTransfer) event.dataTransfer.dropEffect = dropEffect;
+		if (dropEffect === "none" && previousDropEffect !== "none") fireDropExit(event);
+		else if (dropEffect !== "none" && previousDropEffect === "none") fireDropEnter(event);
+		if (options.onDropMove && dropEffect !== "none") {
+			const rect = rectOf(event);
+			options.onDropMove({
+				type: "dropmove",
+				x: x - rect.x,
+				y: y - rect.y
+			});
+		}
+		clearTimeout(dropActivateTimer);
+		if (options.onDropActivate && dropEffect !== "none") {
+			const onDropActivate = options.onDropActivate;
+			const rect = rectOf(event);
+			dropActivateTimer = setTimeout(() => {
+				onDropActivate({
+					type: "dropactivate",
+					x: x - rect.x,
+					y: y - rect.y
+				});
+			}, DROP_ACTIVATE_TIMEOUT);
+		}
+	};
+	const onDragleave = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const target = event.target;
+		if (target instanceof Element) dragOverElements.delete(target);
+		if (target === event.currentTarget) {
+			for (const element of dragOverElements) if (!event.currentTarget.contains(element)) dragOverElements.delete(element);
+		}
+		if (dragOverElements.size > 0) return;
+		if (dropEffect !== "none") fireDropExit(event);
+		clearTimeout(dropActivateTimer);
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setGlobalDropEffect(dropEffect);
+		if (options.onDrop && event.dataTransfer) {
+			const rect = rectOf(event);
+			options.onDrop({
+				dropOperation: DROP_EFFECT_TO_DROP_OPERATION[dropEffect] ?? "cancel",
+				items: readFromDataTransfer(event.dataTransfer),
+				type: "drop",
+				x: event.clientX - rect.x,
+				y: event.clientY - rect.y
+			});
+		}
+		const snapshot = { ...globalDndState };
+		dragOverElements.clear();
+		fireDropExit(event);
+		clearTimeout(dropActivateTimer);
+		if (snapshot.draggingCollectionRef == null) setGlobalDropEffect(void 0);
+		else setGlobalDnDState(snapshot);
+	};
+	/**
+	* Join the accessible drag session for as long as this target is enabled and mounted.
+	*
+	* Re-registers whenever the element or the disabled flag changes; the session recomputes its
+	* valid targets on both register and unregister, so a target appearing mid-drag joins it.
+	*/
+	watch([() => options.ref.value, isDisabled], ([element, disabled], _previous, onCleanup) => {
+		if (disabled || !element) return;
+		onCleanup(registerDropTarget({
+			element,
+			getDropOperation: (types, allowed) => options.getDropOperation?.(dragTypesFromSet(types), allowed) ?? allowed[0] ?? "cancel",
+			onDrop: (event) => options.onDrop?.(event),
+			onDropActivate: (event) => options.onDropActivate?.(event),
+			onDropEnter: (event) => {
+				isDropTarget.value = true;
+				options.onDropEnter?.(event);
+			},
+			onDropExit: (event) => {
+				isDropTarget.value = false;
+				options.onDropExit?.(event);
+			}
+		}));
+	}, { immediate: true });
+	const virtual = useVirtualDrop();
+	return {
+		attrs: computed(() => isDisabled() || hasDropButton() ? {} : { "aria-describedby": virtual.attrs.value["aria-describedby"] }),
+		dropButtonAttrs: computed(() => isDisabled() || !hasDropButton() ? {} : { "aria-describedby": virtual.attrs.value["aria-describedby"] }),
+		handlers: {
+			onClick: () => {
+				if (isDisabled() || hasDropButton()) return;
+				virtual.handlers.onClick();
+			},
+			onDragenter: (event) => {
+				if (isDisabled()) return;
+				onDragenter(event);
+			},
+			onDragleave: (event) => {
+				if (isDisabled()) return;
+				onDragleave(event);
+			},
+			onDragover: (event) => {
+				if (isDisabled()) return;
+				onDragover(event);
+			},
+			onDrop: (event) => {
+				if (isDisabled()) return;
+				onDrop(event);
+			}
+		},
+		isDropTarget: computed(() => !isDisabled() && isDropTarget.value)
+	};
+};
+//#endregion
+export { useDrop };

package/dist/composables/use-droppable-collection-state.d.ts

@@ -0,0 +1,50 @@
+import type { DragCollection, DragKey, DragType, DragTypes, DropOperation, DropTarget, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, ItemDropTarget } from "../utils/dnd-types";
+import type { UseSelectionManagerReturn } from "./use-selection-manager";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** Everything the validity matrix needs to judge one candidate drop. */
+export interface DropOperationEvent {
+    target: DropTarget;
+    types: DragTypes;
+    allowedOperations: DropOperation[];
+    /** Whether the drag started in this same collection. */
+    isInternal: boolean;
+    draggingKeys: Set<DragKey>;
+}
+export interface UseDroppableCollectionStateOptions<T = unknown> {
+    collection: DragCollection<T>;
+    selectionManager: UseSelectionManagerReturn;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Which drag types this collection will take. `"all"` accepts anything. */
+    acceptedDragTypes?: "all" | DragType[];
+    onInsert?: (event: DroppableCollectionInsertDropEvent) => void | Promise<void>;
+    onRootDrop?: (event: DroppableCollectionRootDropEvent) => void | Promise<void>;
+    onItemDrop?: (event: DroppableCollectionOnItemDropEvent) => void | Promise<void>;
+    /** Reordering within one parent. Between items only, never onto one. */
+    onReorder?: (event: DroppableCollectionReorderEvent) => void | Promise<void>;
+    /** Moving within the collection, including onto an item and across parents. */
+    onMove?: (event: DroppableCollectionReorderEvent) => void | Promise<void>;
+    shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
+    onDropEnter?: (event: DroppableCollectionEnterEvent) => void;
+    onDropExit?: (event: DroppableCollectionExitEvent) => void;
+    /** When given, this replaces the specific handlers above rather than adding to them. */
+    onDrop?: (event: DroppableCollectionDropEvent) => void | Promise<void>;
+    getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
+}
+export interface UseDroppableCollectionStateReturn<T = unknown> {
+    collection: DragCollection<T>;
+    selectionManager: UseSelectionManagerReturn;
+    isDisabled: ComputedRef<boolean>;
+    target: ComputedRef<DropTarget | null>;
+    setTarget: (target: DropTarget | null) => void;
+    isDropTarget: (target: DropTarget | null) => boolean;
+    getDropOperation: (event: DropOperationEvent) => DropOperation;
+}
+/**
+ * Drop state for a collection, ported from react-stately's `useDroppableCollectionState`.
+ *
+ * Holds the current drop target and decides, for any candidate, which operation — if any — the
+ * collection would perform. The decision is driven by **which handlers the caller supplied**: a
+ * collection with only `onReorder` refuses a drag from elsewhere, because there is nothing it
+ * could do with it.
+ */
+export declare const useDroppableCollectionState: <T = unknown>(options: UseDroppableCollectionStateOptions<T>) => UseDroppableCollectionStateReturn<T>;

package/dist/composables/use-droppable-collection-state.js

@@ -0,0 +1,115 @@
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-droppable-collection-state.ts
+var isEqualDropTarget = (a, b) => {
+	if (!a) return !b;
+	if (a.type === "root") return b?.type === "root";
+	return b?.type === "item" && b.key === a.key && b.dropPosition === a.dropPosition;
+};
+/**
+* Whether every dragged item shares the target's parent.
+*
+* Reordering is defined as rearranging siblings; a drag that spans two parents is a move, and
+* `onReorder` must not be offered for it.
+*/
+var isDraggingWithinParent = (collection, target, draggingKeys) => {
+	const targetParent = collection.getItem(target.key)?.parentKey ?? null;
+	for (const key of draggingKeys) if ((collection.getItem(key)?.parentKey ?? null) !== targetParent) return false;
+	return true;
+};
+/**
+* Drop state for a collection, ported from react-stately's `useDroppableCollectionState`.
+*
+* Holds the current drop target and decides, for any candidate, which operation — if any — the
+* collection would perform. The decision is driven by **which handlers the caller supplied**: a
+* collection with only `onReorder` refuses a drag from elsewhere, because there is nothing it
+* could do with it.
+*/
+var useDroppableCollectionState = (options) => {
+	const { collection, selectionManager } = options;
+	const target = shallowRef(null);
+	const isDisabled = () => Boolean(toValue(options.isDisabled));
+	/**
+	* The same gap named from the other side.
+	*
+	* "After item 2" and "before item 3" are one position, and the pointer and keyboard paths do
+	* not agree on which name to use, so both have to compare equal.
+	*/
+	const getOppositeTarget = (candidate) => {
+		const node = collection.getItem(candidate.key);
+		if (!node) return null;
+		if (candidate.dropPosition === "before") return node.prevKey != null ? {
+			dropPosition: "after",
+			key: node.prevKey,
+			type: "item"
+		} : null;
+		if (candidate.dropPosition === "after") return node.nextKey != null ? {
+			dropPosition: "before",
+			key: node.nextKey,
+			type: "item"
+		} : null;
+		return null;
+	};
+	const isDropTarget = (candidate) => {
+		const current = target.value;
+		if (!current || !candidate) return false;
+		if (isEqualDropTarget(candidate, current)) return true;
+		if (candidate.type === "item" && current.type === "item" && candidate.key !== current.key && candidate.dropPosition !== current.dropPosition && candidate.dropPosition !== "on" && current.dropPosition !== "on") return isEqualDropTarget(getOppositeTarget(candidate), current) || isEqualDropTarget(candidate, getOppositeTarget(current));
+		return false;
+	};
+	/** Which operation the collection would perform, judged by the handlers it was given. */
+	const defaultGetDropOperation = (event) => {
+		const { allowedOperations, draggingKeys, isInternal, target: candidate } = event;
+		const types = event.types;
+		const accepted = options.acceptedDragTypes ?? "all";
+		if (isDisabled() || !candidate) return "cancel";
+		if (accepted !== "all" && !accepted.some((type) => types.has(type))) return "cancel";
+		const isBetween = candidate.type === "item" && (candidate.dropPosition === "before" || candidate.dropPosition === "after");
+		const isValidInsert = Boolean(options.onInsert) && isBetween && !isInternal;
+		const isValidReorder = Boolean(options.onReorder) && isBetween && isInternal && isDraggingWithinParent(collection, candidate, draggingKeys);
+		const isItemDropAllowed = candidate.type !== "item" || candidate.dropPosition !== "on" || !options.shouldAcceptItemDrop || options.shouldAcceptItemDrop(candidate, types);
+		const isValidMove = Boolean(options.onMove) && candidate.type === "item" && isInternal && isItemDropAllowed;
+		const isValidRootDrop = Boolean(options.onRootDrop) && candidate.type === "root" && !isInternal;
+		const isValidOnItemDrop = Boolean(options.onItemDrop) && candidate.type === "item" && candidate.dropPosition === "on" && !(isInternal && candidate.key != null && draggingKeys.has(candidate.key)) && isItemDropAllowed;
+		if (!(Boolean(options.onDrop) || isValidInsert || isValidReorder || isValidMove || isValidRootDrop || isValidOnItemDrop)) return "cancel";
+		return options.getDropOperation ? options.getDropOperation(candidate, types, allowedOperations) : allowedOperations[0] ?? "cancel";
+	};
+	return {
+		collection,
+		getDropOperation(event) {
+			const { draggingKeys, isInternal, target: candidate } = event;
+			if (isInternal && candidate.type === "item" && draggingKeys.size > 0) {
+				if (draggingKeys.has(candidate.key) && candidate.dropPosition === "on") return "cancel";
+				let currentKey = candidate.key;
+				while (currentKey != null) {
+					const parentKey = collection.getItem(currentKey)?.parentKey ?? null;
+					if (parentKey != null && draggingKeys.has(parentKey)) return "cancel";
+					currentKey = parentKey;
+				}
+			}
+			return defaultGetDropOperation(event);
+		},
+		isDisabled: computed(() => isDisabled()),
+		isDropTarget,
+		selectionManager,
+		setTarget(newTarget) {
+			if (isDropTarget(newTarget)) return;
+			const current = target.value;
+			if (current) options.onDropExit?.({
+				target: current,
+				type: "dropexit",
+				x: 0,
+				y: 0
+			});
+			if (newTarget) options.onDropEnter?.({
+				target: newTarget,
+				type: "dropenter",
+				x: 0,
+				y: 0
+			});
+			target.value = newTarget ?? null;
+		},
+		target: computed(() => target.value)
+	};
+};
+//#endregion
+export { useDroppableCollectionState };

package/dist/composables/use-droppable-collection.d.ts

@@ -0,0 +1,47 @@
+import type { DragKey, DragKeyboardDelegate, DropTargetDelegate, DroppableCollectionActivateEvent } from "../utils/dnd-types";
+import type { UseDropHandlers } from "./use-drop";
+import type { UseDroppableCollectionStateOptions, UseDroppableCollectionStateReturn } from "./use-droppable-collection-state";
+import type { ComputedRef, ShallowRef } from "vue";
+/** Extra keys a collection's keyboard delegate may offer beyond the drag navigation ones. */
+export interface DroppableCollectionKeyboardDelegate extends DragKeyboardDelegate {
+    getKeyPageAbove?: (key: DragKey) => DragKey | null;
+    getKeyPageBelow?: (key: DragKey) => DragKey | null;
+    /**
+     * Put real focus on a key, which the collection needs once a drop has landed.
+     *
+     * A keyboard drag holds focus on the drop indicator, and the indicator is unmounted by the drop
+     * — so something has to say where focus goes next. The collection knows *which* key, and only
+     * its own keyboard knows how to reach that key's element, including waiting a render for a
+     * windowed row that is not in the DOM yet.
+     */
+    focusKey?: (key: DragKey) => void;
+}
+export interface UseDroppableCollectionOptions extends Omit<UseDroppableCollectionStateOptions<unknown>, "collection" | "selectionManager"> {
+    keyboardDelegate: DroppableCollectionKeyboardDelegate;
+    /** Resolves a pointer position to a drop target. */
+    dropTargetDelegate: DropTargetDelegate;
+    /**
+     * Called once a valid drag has rested on a target long enough to open it.
+     *
+     * Declared here rather than on the state options because the state layer deliberately omits
+     * it — activating is a behaviour of the collection, not a decision about what is allowed.
+     */
+    onDropActivate?: (event: DroppableCollectionActivateEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+}
+export interface UseDroppableCollectionReturn {
+    attrs: ComputedRef<{
+        id: string;
+        "aria-describedby": undefined;
+    }>;
+    handlers: UseDropHandlers;
+}
+/**
+ * Drop behaviour for a whole collection, ported from React Aria's `useDroppableCollection`.
+ *
+ * Ties the three layers together: `useDrop` for the pointer, the drag session for the keyboard,
+ * and the drop state for deciding what is allowed. Most of the length is the keyboard half —
+ * a pointer picks a target directly, whereas every arrow key has to search for the next target
+ * that would actually accept the drag.
+ */
+export declare const useDroppableCollection: (options: UseDroppableCollectionOptions, state: UseDroppableCollectionStateReturn<unknown>, element: ShallowRef<HTMLElement | null>) => UseDroppableCollectionReturn;