@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/utils/dom/sortable.d.ts

@@ -0,0 +1,82 @@
+/** 排列方向：决定按哪个轴拖动、方向键用上下还是左右 */
+export interface SortableOrientations {
+    /** 竖排（默认） */
+    vertical: unknown;
+    /** 横排 */
+    horizontal: unknown;
+}
+/** 分组（多容器）：项分在几个组里，组内排序，也能拖到别的组 */
+export interface SortableGroups<T> {
+    /** 各组的 key，按排列顺序（键盘 ← / → 按这个顺序换组） */
+    keys: () => readonly string[];
+    /** 项在哪一组 */
+    of: (item: T) => string;
+    /** 组的名称：读屏播报用它；默认是 key */
+    label?: (group: string) => string;
+    /** 能不能放进 to 组：返回不能的原因，null、undefined 是可以 */
+    canMove?: (item: T, to: string) => string | null | undefined;
+    /** 放到了别的组：index 是在目标组里的位置。使用方改数据（或先处理、刷新），项才换组 */
+    onMove: (item: T, to: string, index: number) => void;
+    /** 放到了不能放的组：项已回到原处，可以在这里提示原因 */
+    onReject?: (item: T, to: string, reason: string) => void;
+}
+/** useSortable 的选项 */
+export interface SortableOptions<T> {
+    /** 当前的各项（分组时是所有组的项） */
+    items: () => readonly T[];
+    /** 项的 key，同一列表里唯一 */
+    getKey: (item: T) => string;
+    /** 项的名称：读屏播报与把手的名称用它；默认是 key */
+    getLabel?: (item: T) => string;
+    /** 组内顺序变了：写回新的数组。分组时可以不给，组内就不能排序 */
+    onChange?: (items: T[]) => void;
+    /** 各项所在的容器（元素或组件实例）：布局动画、自动滚动在它里面进行；分组时是包住所有组的元素 */
+    container: () => unknown;
+    /** 排列方向，默认 vertical；分组时指组内的方向 */
+    orientation?: () => keyof SortableOrientations;
+    /** 分组（多容器）；组的元素上展开 groupProps(组) */
+    groups?: SortableGroups<T>;
+    /** 不可用 */
+    disabled?: () => boolean;
+}
+/** 拖动中的落点 */
+export interface SortableTarget {
+    /** 落在哪一组（不分组时是空字符串） */
+    group: string;
+    /** 在组里的位置，从 0 开始 */
+    index: number;
+    /** 不能放进这一组的原因；可以放时为 null */
+    reason: string | null;
+}
+/** 分组时指针拖动的影子：跟着指针走，位置是视口坐标 */
+export interface SortableGhost {
+    /** 被拖的项的 key */
+    key: string;
+    /** 左边缘 */
+    left: number;
+    /** 上边缘 */
+    top: number;
+    /** 宽度（按下时项的宽度） */
+    width: number;
+}
+/** useSortable 的返回值 */
+export interface SortableState {
+    /** 正在拖动或被键盘拿起的项的 key */
+    readonly active: string | undefined;
+    /** 拖动中的落点：分组时组件按它高亮目标组、画插入线 */
+    readonly target: SortableTarget | undefined;
+    /** 分组时指针拖动的影子；单列、键盘操作时没有 */
+    readonly ghost: SortableGhost | undefined;
+    /** 读屏播报的文字：放进 aria-live 区域 */
+    readonly announcement: string;
+    /** 操作说明元素的 id：把手经 aria-describedby 指向它 */
+    readonly instructionsId: string;
+    /** 把手的属性：展开到把手元素（button）上 */
+    handleProps(key: string): Record<string, unknown>;
+    /** 项的属性：展开到项的根元素上 */
+    itemProps(key: string): Record<string, unknown>;
+    /** 组的属性：分组时展开到每一组的元素上（指针按它判断在哪一组） */
+    groupProps(group: string): Record<string, unknown>;
+}
+/** 拖动排序的状态与事件（在 setup 里调用） */
+export declare function useSortable<T>(options: SortableOptions<T>): SortableState;

package/dist/utils/dom/sortable.js

@@ -0,0 +1,437 @@
+import { clamp } from "../data/number.js";
+import { useLang } from "../../config/context.js";
+import { useAnimate } from "../motion/animation.js";
+import { startMove } from "./move.js";
+import { inlineArrows, isRtl } from "./direction.js";
+import { useLayoutAnimation } from "../motion/layout.js";
+import { nextTick, onScopeDispose, shallowRef, useId } from "vue";
+import { set } from "animejs";
+//#region src/utils/dom/sortable.ts
+/**
+* 拖动排序：把手上按下拖动，或聚焦把手后用键盘（WCAG 2.5.7 的替代操作），改变一列项的顺序；
+* 给了 groups 时项分在几个容器里（看板的列），组内排序之外还能拖到别的组。
+* 参考 dnd-kit 的 Sortable（多容器）与 Atlassian Pragmatic drag and drop 的无障碍做法。
+* Sortable、KanbanBoard 建在它上面，表格的列、行排序也可以直接用它（把手放在表头里）。
+*
+*   const sortable = useSortable({
+*     items: () => list, getKey: (item) => item.id, getLabel: (item) => item.title,
+*     onChange: (next) => (list = next), container: () => listElement,
+*   });
+*   <li {...sortable.itemProps(key)}><button {...sortable.handleProps(key)} aria-label={…} />…</li>
+*   <VisuallyHidden id={sortable.instructionsId}>{lang.sortableInstructions}</VisuallyHidden>
+*   <VisuallyHidden aria-live="assertive">{sortable.announcement}</VisuallyHidden>
+*
+* - 指针：拖动超过 3px 才开始；越过组内别的项的中线时数据立即重排，其余项用布局动画平移让位；
+*   靠近滚动容器边缘时自动滚动；Esc 或指针取消时回到原来的位置。
+*   单列时被拖的项自己跟着指针、松开时滑回；分组时项留在原处作占位，跟着指针走的是影子（ghost，由组件画在浮层里，
+*   不被列的滚动区域裁掉），拖到别的组时只标出落点（target），松开才报告 groups.onMove，数据由使用方改。
+* - 键盘：空格 / Enter 拿起，方向键（竖排 ↑↓，横排 ←→，跟随 RTL）在组内移动一位，Home / End 移到两端；
+*   分组时 ← / → 换组（落点在目标组里同样用 ↑↓ 调整），空格 / Enter 放下，Esc 取消；每一步都由 announcement 交给读屏播报。
+* - 减少动态效果时布局动画与滑回都直接到位。
+*/
+/** 指针离容器边缘多近（px）时开始自动滚动 */
+var EDGE = 40;
+/** 自动滚动每帧最多滚多少 px */
+var MAX_SCROLL_STEP = 16;
+/** 拖动排序的状态与事件（在 setup 里调用） */
+function useSortable(options) {
+	const lang = useLang();
+	const animate = useAnimate();
+	const instructionsId = `${useId()}-sortable`;
+	const active = shallowRef();
+	const target = shallowRef();
+	const ghost = shallowRef();
+	const announcement = shallowRef("");
+	let grabbedFrom = -1;
+	let reordering = false;
+	let stopMove;
+	let scrollFrame = 0;
+	const groups = options.groups;
+	const container = () => {
+		const value = options.container();
+		return value instanceof HTMLElement ? value : null;
+	};
+	const horizontal = () => options.orientation?.() === "horizontal";
+	const layout = useLayoutAnimation(options.container, {
+		children: "[data-sortable-item]:not([data-dragging])",
+		duration: "sm"
+	});
+	onScopeDispose(() => {
+		stopMove?.();
+		cancelAnimationFrame(scrollFrame);
+	});
+	const itemOf = (key) => options.items().find((candidate) => options.getKey(candidate) === key);
+	const groupOf = (key) => {
+		const item = itemOf(key);
+		return groups && item !== void 0 ? groups.of(item) : "";
+	};
+	/** 组里各项的 key（不分组时是全部） */
+	const keysIn = (group) => options.items().filter((item) => !groups || groups.of(item) === group).map(options.getKey);
+	const indexOf = (key) => keysIn(groupOf(key)).indexOf(key);
+	const labelOf = (key) => {
+		const item = itemOf(key);
+		return item === void 0 ? key : options.getLabel?.(item) ?? key;
+	};
+	const groupLabel = (group) => groups?.label?.(group) ?? group;
+	const reasonFor = (key, group) => {
+		const item = itemOf(key);
+		if (!groups || item === void 0 || group === groups.of(item)) return null;
+		return groups.canMove?.(item, group) ?? null;
+	};
+	const query = (attribute, key) => container()?.querySelector(`[${attribute}="${CSS.escape(key)}"]`) ?? null;
+	const itemElement = (key) => query("data-sortable-item", key);
+	const handleElement = (key) => query("data-sortable-handle", key);
+	const groupElement = (group) => query("data-sortable-group", group);
+	/** 在组里把 key 移到 to 处（数据立即重排）；返回 DOM 更新完成 */
+	async function moveTo(key, to) {
+		if (!options.onChange) return;
+		const group = groupOf(key);
+		const from = indexOf(key);
+		const siblings = keysIn(group).filter((other) => other !== key);
+		const index = clamp(to, 0, siblings.length);
+		if (from < 0 || from === index) return;
+		const list = [...options.items()];
+		const [item] = list.splice(list.findIndex((candidate) => options.getKey(candidate) === key), 1);
+		const anchor = siblings[index] ?? siblings.at(-1);
+		const anchorAt = list.findIndex((candidate) => options.getKey(candidate) === anchor);
+		list.splice(siblings[index] === void 0 ? anchorAt + 1 : anchorAt, 0, item);
+		const focused = document.activeElement === handleElement(key);
+		reordering = true;
+		const onChange = options.onChange;
+		layout.change(() => onChange(list));
+		await nextTick();
+		reordering = false;
+		const handle = handleElement(key);
+		if (focused && handle && document.activeElement !== handle) handle.focus({ preventScroll: true });
+	}
+	const announce = (text) => announcement.value = text;
+	const position = (key) => indexOf(key) + 1;
+	const total = (key) => keysIn(groupOf(key)).length;
+	function grab(key) {
+		active.value = key;
+		grabbedFrom = indexOf(key);
+		target.value = {
+			group: groupOf(key),
+			index: grabbedFrom,
+			reason: null
+		};
+		announce(groups ? lang.sortableGroupGrabbed(labelOf(key), groupLabel(groupOf(key)), position(key)) : lang.sortableGrabbed(labelOf(key), position(key), total(key)));
+	}
+	function clear() {
+		active.value = void 0;
+		target.value = void 0;
+		ghost.value = void 0;
+	}
+	/** 放下：落在自己的组里就地放下；落在别的组里报告 onMove，不能放的弹回 */
+	function drop(key) {
+		const to = target.value;
+		const own = groupOf(key);
+		const item = itemOf(key);
+		clear();
+		if (!groups || !to || to.group === own || item === void 0) {
+			announce(groups ? lang.sortableGroupDropped(labelOf(key), groupLabel(own), position(key)) : lang.sortableDropped(labelOf(key), position(key), total(key)));
+			return;
+		}
+		if (to.reason) {
+			announce(lang.sortableRejected(labelOf(key), to.reason));
+			groups.onReject?.(item, to.group, to.reason);
+			return;
+		}
+		announce(lang.sortableGroupDropped(labelOf(key), groupLabel(to.group), to.index + 1));
+		groups.onMove(item, to.group, to.index);
+	}
+	function cancel(key) {
+		clear();
+		moveTo(key, grabbedFrom);
+		announce(groups ? lang.sortableGroupCancelled(labelOf(key), groupLabel(groupOf(key)), grabbedFrom + 1) : lang.sortableCancelled(labelOf(key), grabbedFrom + 1));
+	}
+	/** 落点换到 group 的第 index 位并播报；回到自己的组时项回到原位附近（组内排序是即时的） */
+	function retarget(key, group, index) {
+		const own = groupOf(key);
+		const size = keysIn(group).length + (group === own ? 0 : 1);
+		const clamped = clamp(index, 0, size - 1);
+		target.value = {
+			group,
+			index: clamped,
+			reason: reasonFor(key, group)
+		};
+		announce(lang.sortableOver(labelOf(key), groupLabel(group), clamped + 1, target.value.reason));
+	}
+	function onKeydown(event, key) {
+		if (options.disabled?.() || event.altKey || event.ctrlKey || event.metaKey) return;
+		const grabbed = active.value === key;
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			if (grabbed) drop(key);
+			else grab(key);
+			return;
+		}
+		if (!grabbed) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			cancel(key);
+			return;
+		}
+		const arrows = inlineArrows(isRtl(event.currentTarget));
+		const along = horizontal() ? {
+			[arrows.forward]: 1,
+			[arrows.backward]: -1
+		} : {
+			ArrowDown: 1,
+			ArrowUp: -1
+		};
+		const across = !groups ? {} : horizontal() ? {
+			ArrowDown: 1,
+			ArrowUp: -1
+		} : {
+			[arrows.forward]: 1,
+			[arrows.backward]: -1
+		};
+		const own = groupOf(key);
+		const current = target.value ?? {
+			group: own,
+			index: indexOf(key),
+			reason: null
+		};
+		const groupStep = across[event.key];
+		if (groupStep !== void 0) {
+			event.preventDefault();
+			const order = groups.keys();
+			const next = order[clamp(order.indexOf(current.group) + groupStep, 0, order.length - 1)];
+			if (next === current.group) return;
+			retarget(key, next, next === own ? indexOf(key) : current.index);
+			return;
+		}
+		const step = event.key === "Home" ? "first" : event.key === "End" ? "last" : along[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		if (current.group !== own) {
+			const last = keysIn(current.group).length;
+			const index = step === "first" ? 0 : step === "last" ? last : current.index + step;
+			retarget(key, current.group, index);
+			return;
+		}
+		const from = indexOf(key);
+		const count = keysIn(own).length;
+		const to = step === "first" ? 0 : step === "last" ? count - 1 : from + step;
+		if (!options.onChange || to < 0 || to >= count || to === from) return;
+		moveTo(key, to).then(() => {
+			target.value = {
+				group: own,
+				index: indexOf(key),
+				reason: null
+			};
+			announce(groups ? lang.sortableOver(labelOf(key), groupLabel(own), position(key), null) : lang.sortableMoved(labelOf(key), position(key), total(key)));
+		});
+	}
+	function onBlur(key) {
+		if (reordering || active.value !== key || stopMove) return;
+		if (target.value && target.value.group !== groupOf(key)) cancel(key);
+		else drop(key);
+	}
+	function onPointerdown(event, key) {
+		if (options.disabled?.() || active.value !== void 0) return;
+		const root = container();
+		const element = itemElement(key);
+		if (!root || !element) return;
+		const own = groupOf(key);
+		const scroller = scrollParent(groups ? groupElement(own) ?? root : root);
+		const axis = () => horizontal() ? "x" : "y";
+		const scrollOf = () => axis() === "x" ? scroller.scrollLeft : scroller.scrollTop;
+		const startOf = (rect) => axis() === "x" ? rect.left : rect.top;
+		const sizeOf = (rect) => axis() === "x" ? rect.width : rect.height;
+		const startScroll = scrollOf();
+		const centers = new Map(keysIn(own).map((itemKey) => {
+			const rect = itemElement(itemKey)?.getBoundingClientRect();
+			return [itemKey, rect ? startOf(rect) + startScroll + sizeOf(rect) / 2 : 0];
+		}));
+		const origin = element.getBoundingClientRect();
+		const originStart = startOf(origin);
+		let delta = 0;
+		let offset = 0;
+		let pointer = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		/** 不分组时被拖的项跟着指针：位移 = 指针的位移 − 它在布局里的位置变化 */
+		const follow = () => {
+			if (groups) return;
+			const current = itemElement(key);
+			if (!current) return;
+			const natural = startOf(current.getBoundingClientRect()) - offset;
+			offset = originStart + delta - natural;
+			set(current, axis() === "x" ? { x: offset } : { y: offset });
+		};
+		/** 指针下的组；不分组时总是自己的（空字符串） */
+		const groupAtPointer = () => {
+			if (!groups) return own;
+			for (const group of groups.keys()) {
+				const rect = groupElement(group)?.getBoundingClientRect();
+				if (rect && pointer.x >= rect.left && pointer.x <= rect.right && pointer.y >= rect.top && pointer.y <= rect.bottom) return group;
+			}
+		};
+		/** 在自己的组里：越过了几个别的项的中线，就排到第几位；在别的组里：落点是指针前面有几项 */
+		const reorder = () => {
+			const group = groupAtPointer();
+			if (group === void 0) {
+				target.value = void 0;
+				return;
+			}
+			if (group !== own) {
+				if (indexOf(key) !== grabbedFrom) moveTo(key, grabbedFrom);
+				const along = axis() === "x" ? pointer.x : pointer.y;
+				const index = keysIn(group).filter((other) => {
+					const rect = itemElement(other)?.getBoundingClientRect();
+					return rect && startOf(rect) + sizeOf(rect) / 2 < along;
+				}).length;
+				target.value = {
+					group,
+					index,
+					reason: reasonFor(key, group)
+				};
+				return;
+			}
+			const center = originStart + delta + scrollOf() + sizeOf(origin) / 2;
+			const index = keysIn(own).filter((other) => other !== key && centers.get(other) < center).length;
+			target.value = {
+				group: own,
+				index,
+				reason: null
+			};
+			if (index !== indexOf(key)) moveTo(key, index).then(follow);
+			else follow();
+		};
+		const autoScroll = () => {
+			cancelAnimationFrame(scrollFrame);
+			const group = groupAtPointer();
+			const scrollers = [group === void 0 ? void 0 : scrollParent(groupElement(group) ?? root), groups ? scrollParent(root.parentElement ?? root) : void 0];
+			let scrolled = false;
+			for (const candidate of new Set(scrollers)) if (candidate && edgeScroll(candidate, pointer)) scrolled = true;
+			if (!scrolled) return;
+			reorder();
+			scrollFrame = requestAnimationFrame(autoScroll);
+		};
+		const finish = (cancelled) => {
+			cancelAnimationFrame(scrollFrame);
+			stopMove = void 0;
+			const current = itemElement(key);
+			current?.removeAttribute("data-dragging");
+			if (groups) {
+				if (cancelled || !target.value) cancel(key);
+				else drop(key);
+				return;
+			}
+			const done = () => {
+				clear();
+				announce(lang.sortableDropped(labelOf(key), position(key), total(key)));
+			};
+			const settle = () => {
+				if (!current) return done();
+				animate(current, axis() === "x" ? { x: 0 } : { y: 0 }, { duration: "sm" }).then(done);
+			};
+			if (cancelled && grabbedFrom !== indexOf(key)) moveTo(key, grabbedFrom).then(() => {
+				follow();
+				settle();
+			});
+			else settle();
+		};
+		stopMove = startMove(event, {
+			threshold: 3,
+			captureTarget: root,
+			onMove: (point) => {
+				if (active.value !== key) {
+					grab(key);
+					element.setAttribute("data-dragging", "");
+				}
+				delta = axis() === "x" ? point.deltaX : point.deltaY;
+				pointer = {
+					x: point.clientX,
+					y: point.clientY
+				};
+				if (groups) ghost.value = {
+					key,
+					left: origin.left + point.deltaX,
+					top: origin.top + point.deltaY,
+					width: origin.width
+				};
+				reorder();
+				autoScroll();
+			},
+			onEnd: ({ moved, cancelled }) => {
+				if (moved && active.value === key) finish(cancelled);
+				else stopMove = void 0;
+			}
+		});
+	}
+	function onDragKeydown(event, key) {
+		if (event.key === "Escape" && stopMove && active.value === key) {
+			event.preventDefault();
+			stopMove();
+			return true;
+		}
+		return false;
+	}
+	return {
+		get active() {
+			return active.value;
+		},
+		get target() {
+			return target.value;
+		},
+		get ghost() {
+			return ghost.value;
+		},
+		get announcement() {
+			return announcement.value;
+		},
+		instructionsId,
+		handleProps: (key) => ({
+			"data-sortable-handle": key,
+			"aria-describedby": instructionsId,
+			"aria-pressed": active.value === key,
+			onPointerdown: (event) => onPointerdown(event, key),
+			onKeydown: (event) => {
+				if (!onDragKeydown(event, key)) onKeydown(event, key);
+			},
+			onBlur: () => onBlur(key)
+		}),
+		itemProps: (key) => ({
+			"data-sortable-item": key,
+			"data-state": active.value === key ? "active" : void 0
+		}),
+		groupProps: (group) => ({
+			"data-sortable-group": group,
+			"data-drop": target.value?.group === group && active.value && groupOf(active.value) !== group ? target.value.reason ? "denied" : "allowed" : void 0
+		})
+	};
+}
+/** 指针靠近 scroller 的边缘时朝那边滚一步；滚了返回 true */
+function edgeScroll(scroller, pointer) {
+	const rect = scroller === document.scrollingElement ? viewportRect() : scroller.getBoundingClientRect();
+	const speed = (along, low, high) => along < low + EDGE ? -16 * (1 - (along - low) / EDGE) : along > high - EDGE ? MAX_SCROLL_STEP * (1 - (high - along) / EDGE) : 0;
+	const canX = scroller.scrollWidth > scroller.clientWidth;
+	const canY = scroller.scrollHeight > scroller.clientHeight;
+	const left = canX ? speed(pointer.x, rect.left, rect.right) : 0;
+	const top = canY ? speed(pointer.y, rect.top, rect.bottom) : 0;
+	if (!left && !top) return false;
+	const before = [scroller.scrollLeft, scroller.scrollTop];
+	scroller.scrollBy({
+		left,
+		top
+	});
+	return scroller.scrollLeft !== before[0] || scroller.scrollTop !== before[1];
+}
+/** 最近的能滚动的祖先（含自己）；都不能滚时是页面 */
+function scrollParent(element) {
+	for (let current = element; current; current = current.parentElement) {
+		const { overflowX, overflowY } = getComputedStyle(current);
+		const scrollable = /auto|scroll|overlay/;
+		if (scrollable.test(overflowY) && current.scrollHeight > current.clientHeight || scrollable.test(overflowX) && current.scrollWidth > current.clientWidth) return current;
+	}
+	return document.scrollingElement ?? document.documentElement;
+}
+var viewportRect = () => new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+//#endregion
+export { useSortable };
+
+//# sourceMappingURL=sortable.js.map

package/dist/utils/dom/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","names":[],"sources":["../../../src/utils/dom/sortable.ts"],"sourcesContent":["/**\n * 拖动排序：把手上按下拖动，或聚焦把手后用键盘（WCAG 2.5.7 的替代操作），改变一列项的顺序；\n * 给了 groups 时项分在几个容器里（看板的列），组内排序之外还能拖到别的组。\n * 参考 dnd-kit 的 Sortable（多容器）与 Atlassian Pragmatic drag and drop 的无障碍做法。\n * Sortable、KanbanBoard 建在它上面，表格的列、行排序也可以直接用它（把手放在表头里）。\n *\n *   const sortable = useSortable({\n *     items: () => list, getKey: (item) => item.id, getLabel: (item) => item.title,\n *     onChange: (next) => (list = next), container: () => listElement,\n *   });\n *   <li {...sortable.itemProps(key)}><button {...sortable.handleProps(key)} aria-label={…} />…</li>\n *   <VisuallyHidden id={sortable.instructionsId}>{lang.sortableInstructions}</VisuallyHidden>\n *   <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n *\n * - 指针：拖动超过 3px 才开始；越过组内别的项的中线时数据立即重排，其余项用布局动画平移让位；\n *   靠近滚动容器边缘时自动滚动；Esc 或指针取消时回到原来的位置。\n *   单列时被拖的项自己跟着指针、松开时滑回；分组时项留在原处作占位，跟着指针走的是影子（ghost，由组件画在浮层里，\n *   不被列的滚动区域裁掉），拖到别的组时只标出落点（target），松开才报告 groups.onMove，数据由使用方改。\n * - 键盘：空格 / Enter 拿起，方向键（竖排 ↑↓，横排 ←→，跟随 RTL）在组内移动一位，Home / End 移到两端；\n *   分组时 ← / → 换组（落点在目标组里同样用 ↑↓ 调整），空格 / Enter 放下，Esc 取消；每一步都由 announcement 交给读屏播报。\n * - 减少动态效果时布局动画与滑回都直接到位。\n */\nimport { set } from 'animejs';\nimport { nextTick, onScopeDispose, shallowRef, useId } from 'vue';\nimport { useLang } from '../../config/context';\nimport { clamp } from '../data/number';\nimport { inlineArrows, isRtl } from './direction';\nimport { useAnimate } from '../motion/animation';\nimport { useLayoutAnimation } from '../motion/layout';\nimport { startMove } from './move';\n\n/** 排列方向：决定按哪个轴拖动、方向键用上下还是左右 */\nexport interface SortableOrientations {\n  /** 竖排（默认） */\n  vertical: unknown;\n  /** 横排 */\n  horizontal: unknown;\n}\n\n/** 分组（多容器）：项分在几个组里，组内排序，也能拖到别的组 */\nexport interface SortableGroups<T> {\n  /** 各组的 key，按排列顺序（键盘 ← / → 按这个顺序换组） */\n  keys: () => readonly string[];\n  /** 项在哪一组 */\n  of: (item: T) => string;\n  /** 组的名称：读屏播报用它；默认是 key */\n  label?: (group: string) => string;\n  /** 能不能放进 to 组：返回不能的原因，null、undefined 是可以 */\n  canMove?: (item: T, to: string) => string | null | undefined;\n  /** 放到了别的组：index 是在目标组里的位置。使用方改数据（或先处理、刷新），项才换组 */\n  onMove: (item: T, to: string, index: number) => void;\n  /** 放到了不能放的组：项已回到原处，可以在这里提示原因 */\n  onReject?: (item: T, to: string, reason: string) => void;\n}\n\n/** useSortable 的选项 */\nexport interface SortableOptions<T> {\n  /** 当前的各项（分组时是所有组的项） */\n  items: () => readonly T[];\n  /** 项的 key，同一列表里唯一 */\n  getKey: (item: T) => string;\n  /** 项的名称：读屏播报与把手的名称用它；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 组内顺序变了：写回新的数组。分组时可以不给，组内就不能排序 */\n  onChange?: (items: T[]) => void;\n  /** 各项所在的容器（元素或组件实例）：布局动画、自动滚动在它里面进行；分组时是包住所有组的元素 */\n  container: () => unknown;\n  /** 排列方向，默认 vertical；分组时指组内的方向 */\n  orientation?: () => keyof SortableOrientations;\n  /** 分组（多容器）；组的元素上展开 groupProps(组) */\n  groups?: SortableGroups<T>;\n  /** 不可用 */\n  disabled?: () => boolean;\n}\n\n/** 拖动中的落点 */\nexport interface SortableTarget {\n  /** 落在哪一组（不分组时是空字符串） */\n  group: string;\n  /** 在组里的位置，从 0 开始 */\n  index: number;\n  /** 不能放进这一组的原因；可以放时为 null */\n  reason: string | null;\n}\n\n/** 分组时指针拖动的影子：跟着指针走，位置是视口坐标 */\nexport interface SortableGhost {\n  /** 被拖的项的 key */\n  key: string;\n  /** 左边缘 */\n  left: number;\n  /** 上边缘 */\n  top: number;\n  /** 宽度（按下时项的宽度） */\n  width: number;\n}\n\n/** useSortable 的返回值 */\nexport interface SortableState {\n  /** 正在拖动或被键盘拿起的项的 key */\n  readonly active: string | undefined;\n  /** 拖动中的落点：分组时组件按它高亮目标组、画插入线 */\n  readonly target: SortableTarget | undefined;\n  /** 分组时指针拖动的影子；单列、键盘操作时没有 */\n  readonly ghost: SortableGhost | undefined;\n  /** 读屏播报的文字：放进 aria-live 区域 */\n  readonly announcement: string;\n  /** 操作说明元素的 id：把手经 aria-describedby 指向它 */\n  readonly instructionsId: string;\n  /** 把手的属性：展开到把手元素（button）上 */\n  handleProps(key: string): Record<string, unknown>;\n  /** 项的属性：展开到项的根元素上 */\n  itemProps(key: string): Record<string, unknown>;\n  /** 组的属性：分组时展开到每一组的元素上（指针按它判断在哪一组） */\n  groupProps(group: string): Record<string, unknown>;\n}\n\n/** 指针离容器边缘多近（px）时开始自动滚动 */\nconst EDGE = 40;\n/** 自动滚动每帧最多滚多少 px */\nconst MAX_SCROLL_STEP = 16;\n\n/** 拖动排序的状态与事件（在 setup 里调用） */\nexport function useSortable<T>(options: SortableOptions<T>): SortableState {\n  const lang = useLang();\n  const animate = useAnimate();\n  const instructionsId = `${useId()}-sortable`;\n  const active = shallowRef<string | undefined>();\n  const target = shallowRef<SortableTarget | undefined>();\n  const ghost = shallowRef<SortableGhost | undefined>();\n  const announcement = shallowRef('');\n  // 拿起时在组里的位置：取消时回到这里\n  let grabbedFrom = -1;\n  // 重排时 Vue 移动 DOM 会让把手失焦：这期间的 blur 不算放下\n  let reordering = false;\n  let stopMove: (() => void) | undefined;\n  let scrollFrame = 0;\n\n  const groups = options.groups;\n  const container = () => {\n    const value = options.container();\n    return value instanceof HTMLElement ? value : null;\n  };\n  const horizontal = () => options.orientation?.() === 'horizontal';\n  const layout = useLayoutAnimation(options.container, {\n    // 被指针拖着的项跟着指针走，不参与布局动画\n    children: '[data-sortable-item]:not([data-dragging])',\n    duration: 'sm',\n  });\n  onScopeDispose(() => {\n    stopMove?.();\n    cancelAnimationFrame(scrollFrame);\n  });\n\n  const itemOf = (key: string) =>\n    options.items().find((candidate) => options.getKey(candidate) === key);\n  const groupOf = (key: string) => {\n    const item = itemOf(key);\n    return groups && item !== undefined ? groups.of(item) : '';\n  };\n  /** 组里各项的 key（不分组时是全部） */\n  const keysIn = (group: string) =>\n    options\n      .items()\n      .filter((item) => !groups || groups.of(item) === group)\n      .map(options.getKey);\n  const indexOf = (key: string) => keysIn(groupOf(key)).indexOf(key);\n  const labelOf = (key: string) => {\n    const item = itemOf(key);\n    return item === undefined ? key : (options.getLabel?.(item) ?? key);\n  };\n  const groupLabel = (group: string) => groups?.label?.(group) ?? group;\n  const reasonFor = (key: string, group: string) => {\n    const item = itemOf(key);\n    if (!groups || item === undefined || group === groups.of(item)) return null;\n    return groups.canMove?.(item, group) ?? null;\n  };\n  const query = (attribute: string, key: string) =>\n    container()?.querySelector<HTMLElement>(`[${attribute}=\"${CSS.escape(key)}\"]`) ?? null;\n  const itemElement = (key: string) => query('data-sortable-item', key);\n  const handleElement = (key: string) => query('data-sortable-handle', key);\n  const groupElement = (group: string) => query('data-sortable-group', group);\n\n  /** 在组里把 key 移到 to 处（数据立即重排）；返回 DOM 更新完成 */\n  async function moveTo(key: string, to: number): Promise<void> {\n    if (!options.onChange) return;\n    const group = groupOf(key);\n    const from = indexOf(key);\n    const siblings = keysIn(group).filter((other) => other !== key);\n    const index = clamp(to, 0, siblings.length);\n    if (from < 0 || from === index) return;\n    const list = [...options.items()];\n    const [item] = list.splice(\n      list.findIndex((candidate) => options.getKey(candidate) === key),\n      1,\n    );\n    // 插到组里第 index 项的前面；放在组尾时接在组的最后一项后面\n    const anchor = siblings[index] ?? siblings.at(-1);\n    const anchorAt = list.findIndex((candidate) => options.getKey(candidate) === anchor);\n    list.splice(siblings[index] === undefined ? anchorAt + 1 : anchorAt, 0, item!);\n    const focused = document.activeElement === handleElement(key);\n    reordering = true;\n    const onChange = options.onChange;\n    void layout.change(() => onChange(list));\n    await nextTick();\n    reordering = false;\n    // Vue 移动 DOM 时焦点可能丢了：放回被移动的项的把手上\n    const handle = handleElement(key);\n    if (focused && handle && document.activeElement !== handle) {\n      handle.focus({ preventScroll: true });\n    }\n  }\n\n  const announce = (text: string) => (announcement.value = text);\n  const position = (key: string) => indexOf(key) + 1;\n  const total = (key: string) => keysIn(groupOf(key)).length;\n\n  function grab(key: string) {\n    active.value = key;\n    grabbedFrom = indexOf(key);\n    target.value = { group: groupOf(key), index: grabbedFrom, reason: null };\n    announce(\n      groups\n        ? lang.sortableGroupGrabbed(labelOf(key), groupLabel(groupOf(key)), position(key))\n        : lang.sortableGrabbed(labelOf(key), position(key), total(key)),\n    );\n  }\n\n  function clear() {\n    active.value = undefined;\n    target.value = undefined;\n    ghost.value = undefined;\n  }\n\n  /** 放下：落在自己的组里就地放下；落在别的组里报告 onMove，不能放的弹回 */\n  function drop(key: string) {\n    const to = target.value;\n    const own = groupOf(key);\n    const item = itemOf(key);\n    clear();\n    if (!groups || !to || to.group === own || item === undefined) {\n      announce(\n        groups\n          ? lang.sortableGroupDropped(labelOf(key), groupLabel(own), position(key))\n          : lang.sortableDropped(labelOf(key), position(key), total(key)),\n      );\n      return;\n    }\n    if (to.reason) {\n      announce(lang.sortableRejected(labelOf(key), to.reason));\n      groups.onReject?.(item, to.group, to.reason);\n      return;\n    }\n    announce(lang.sortableGroupDropped(labelOf(key), groupLabel(to.group), to.index + 1));\n    groups.onMove(item, to.group, to.index);\n  }\n\n  function cancel(key: string) {\n    clear();\n    void moveTo(key, grabbedFrom);\n    announce(\n      groups\n        ? lang.sortableGroupCancelled(labelOf(key), groupLabel(groupOf(key)), grabbedFrom + 1)\n        : lang.sortableCancelled(labelOf(key), grabbedFrom + 1),\n    );\n  }\n\n  // ───────── 键盘 ─────────\n\n  /** 落点换到 group 的第 index 位并播报；回到自己的组时项回到原位附近（组内排序是即时的） */\n  function retarget(key: string, group: string, index: number) {\n    const own = groupOf(key);\n    const size = keysIn(group).length + (group === own ? 0 : 1);\n    const clamped = clamp(index, 0, size - 1);\n    target.value = { group, index: clamped, reason: reasonFor(key, group) };\n    announce(lang.sortableOver(labelOf(key), groupLabel(group), clamped + 1, target.value.reason));\n  }\n\n  function onKeydown(event: KeyboardEvent, key: string) {\n    if (options.disabled?.() || event.altKey || event.ctrlKey || event.metaKey) return;\n    const grabbed = active.value === key;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      if (grabbed) drop(key);\n      else grab(key);\n      return;\n    }\n    if (!grabbed) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      cancel(key);\n      return;\n    }\n    const arrows = inlineArrows(isRtl(event.currentTarget as Element));\n    const along: Record<string, number> = horizontal()\n      ? { [arrows.forward]: 1, [arrows.backward]: -1 }\n      : { ArrowDown: 1, ArrowUp: -1 };\n    // 分组时与组内方向垂直的方向键换组\n    const across: Record<string, number> = !groups\n      ? {}\n      : horizontal()\n        ? { ArrowDown: 1, ArrowUp: -1 }\n        : { [arrows.forward]: 1, [arrows.backward]: -1 };\n    const own = groupOf(key);\n    const current = target.value ?? { group: own, index: indexOf(key), reason: null };\n\n    const groupStep = across[event.key];\n    if (groupStep !== undefined) {\n      event.preventDefault();\n      const order = groups!.keys();\n      const next = order[clamp(order.indexOf(current.group) + groupStep, 0, order.length - 1)]!;\n      if (next === current.group) return;\n      retarget(key, next, next === own ? indexOf(key) : current.index);\n      return;\n    }\n\n    const step: number | 'first' | 'last' | undefined =\n      event.key === 'Home' ? 'first' : event.key === 'End' ? 'last' : along[event.key];\n    if (step === undefined) return;\n    event.preventDefault();\n    if (current.group !== own) {\n      const last = keysIn(current.group).length;\n      const index = step === 'first' ? 0 : step === 'last' ? last : current.index + step;\n      retarget(key, current.group, index);\n      return;\n    }\n    const from = indexOf(key);\n    const count = keysIn(own).length;\n    const to = step === 'first' ? 0 : step === 'last' ? count - 1 : from + step;\n    if (!options.onChange || to < 0 || to >= count || to === from) return;\n    void moveTo(key, to).then(() => {\n      target.value = { group: own, index: indexOf(key), reason: null };\n      announce(\n        groups\n          ? lang.sortableOver(labelOf(key), groupLabel(own), position(key), null)\n          : lang.sortableMoved(labelOf(key), position(key), total(key)),\n      );\n    });\n  }\n\n  function onBlur(key: string) {\n    if (reordering || active.value !== key || stopMove) return;\n    // 焦点离开时：组内的移动已经生效，就地放下；还指着别的组时不算数，取消\n    if (target.value && target.value.group !== groupOf(key)) cancel(key);\n    else drop(key);\n  }\n\n  // ───────── 指针 ─────────\n\n  function onPointerdown(event: PointerEvent, key: string) {\n    if (options.disabled?.() || active.value !== undefined) return;\n    const root = container();\n    const element = itemElement(key);\n    if (!root || !element) return;\n    const own = groupOf(key);\n    // 不分组时在容器里滚动；分组时在自己组的元素里排序、滚动\n    const ownRoot = groups ? (groupElement(own) ?? root) : root;\n    const scroller = scrollParent(ownRoot);\n    const axis = () => (horizontal() ? 'x' : 'y');\n    const scrollOf = () => (axis() === 'x' ? scroller.scrollLeft : scroller.scrollTop);\n    const startOf = (rect: DOMRect) => (axis() === 'x' ? rect.left : rect.top);\n    const sizeOf = (rect: DOMRect) => (axis() === 'x' ? rect.width : rect.height);\n    const startScroll = scrollOf();\n    // 按下时组里各项的位置（内容坐标）：判断越过了谁的中线\n    const centers = new Map(\n      keysIn(own).map((itemKey) => {\n        const rect = itemElement(itemKey)?.getBoundingClientRect();\n        return [itemKey, rect ? startOf(rect) + startScroll + sizeOf(rect) / 2 : 0];\n      }),\n    );\n    const origin = element.getBoundingClientRect();\n    const originStart = startOf(origin);\n    let delta = 0;\n    let offset = 0;\n    let pointer = { x: event.clientX, y: event.clientY };\n\n    /** 不分组时被拖的项跟着指针：位移 = 指针的位移 − 它在布局里的位置变化 */\n    const follow = () => {\n      if (groups) return;\n      const current = itemElement(key);\n      if (!current) return;\n      const natural = startOf(current.getBoundingClientRect()) - offset;\n      offset = originStart + delta - natural;\n      void set(current, axis() === 'x' ? { x: offset } : { y: offset });\n    };\n\n    /** 指针下的组；不分组时总是自己的（空字符串） */\n    const groupAtPointer = () => {\n      if (!groups) return own;\n      for (const group of groups.keys()) {\n        const rect = groupElement(group)?.getBoundingClientRect();\n        if (\n          rect &&\n          pointer.x >= rect.left &&\n          pointer.x <= rect.right &&\n          pointer.y >= rect.top &&\n          pointer.y <= rect.bottom\n        )\n          return group;\n      }\n      return undefined;\n    };\n\n    /** 在自己的组里：越过了几个别的项的中线，就排到第几位；在别的组里：落点是指针前面有几项 */\n    const reorder = () => {\n      const group = groupAtPointer();\n      if (group === undefined) {\n        target.value = undefined;\n        return;\n      }\n      if (group !== own) {\n        // 离开自己的组：组内已经挪过的回到原位，免得放到别处后原组的顺序也变了\n        if (indexOf(key) !== grabbedFrom) void moveTo(key, grabbedFrom);\n        const along = axis() === 'x' ? pointer.x : pointer.y;\n        const index = keysIn(group).filter((other) => {\n          const rect = itemElement(other)?.getBoundingClientRect();\n          return rect && startOf(rect) + sizeOf(rect) / 2 < along;\n        }).length;\n        target.value = { group, index, reason: reasonFor(key, group) };\n        return;\n      }\n      const center = originStart + delta + scrollOf() + sizeOf(origin) / 2;\n      const index = keysIn(own).filter(\n        (other) => other !== key && centers.get(other)! < center,\n      ).length;\n      target.value = { group: own, index, reason: null };\n      if (index !== indexOf(key)) void moveTo(key, index).then(follow);\n      else follow();\n    };\n\n    const autoScroll = () => {\n      cancelAnimationFrame(scrollFrame);\n      const group = groupAtPointer();\n      const scrollers = [\n        group === undefined ? undefined : scrollParent(groupElement(group) ?? root),\n        groups ? scrollParent(root.parentElement ?? root) : undefined,\n      ];\n      let scrolled = false;\n      for (const candidate of new Set(scrollers)) {\n        if (candidate && edgeScroll(candidate, pointer)) scrolled = true;\n      }\n      if (!scrolled) return;\n      reorder();\n      scrollFrame = requestAnimationFrame(autoScroll);\n    };\n\n    const finish = (cancelled: boolean) => {\n      cancelAnimationFrame(scrollFrame);\n      stopMove = undefined;\n      const current = itemElement(key);\n      current?.removeAttribute('data-dragging');\n      if (groups) {\n        if (cancelled || !target.value) cancel(key);\n        else drop(key);\n        return;\n      }\n      const done = () => {\n        clear();\n        announce(lang.sortableDropped(labelOf(key), position(key), total(key)));\n      };\n      const settle = () => {\n        if (!current) return done();\n        // 滑回自己在布局里的位置\n        void animate(current, axis() === 'x' ? { x: 0 } : { y: 0 }, { duration: 'sm' }).then(done);\n      };\n      if (cancelled && grabbedFrom !== indexOf(key)) {\n        void moveTo(key, grabbedFrom).then(() => {\n          follow();\n          settle();\n        });\n      } else settle();\n    };\n\n    stopMove = startMove(event, {\n      threshold: 3,\n      // 项会随重排移动：捕获放在不动的容器上\n      captureTarget: root,\n      onMove: (point) => {\n        if (active.value !== key) {\n          grab(key);\n          element.setAttribute('data-dragging', '');\n        }\n        delta = axis() === 'x' ? point.deltaX : point.deltaY;\n        pointer = { x: point.clientX, y: point.clientY };\n        if (groups) {\n          ghost.value = {\n            key,\n            left: origin.left + point.deltaX,\n            top: origin.top + point.deltaY,\n            width: origin.width,\n          };\n        }\n        reorder();\n        autoScroll();\n      },\n      onEnd: ({ moved, cancelled }) => {\n        if (moved && active.value === key) finish(cancelled);\n        else stopMove = undefined;\n      },\n    });\n  }\n\n  // 拖动中按 Esc：取消，回到原位\n  function onDragKeydown(event: KeyboardEvent, key: string) {\n    if (event.key === 'Escape' && stopMove && active.value === key) {\n      event.preventDefault();\n      stopMove();\n      return true;\n    }\n    return false;\n  }\n\n  return {\n    get active() {\n      return active.value;\n    },\n    get target() {\n      return target.value;\n    },\n    get ghost() {\n      return ghost.value;\n    },\n    get announcement() {\n      return announcement.value;\n    },\n    instructionsId,\n    handleProps: (key) => ({\n      'data-sortable-handle': key,\n      'aria-describedby': instructionsId,\n      'aria-pressed': active.value === key,\n      onPointerdown: (event: PointerEvent) => onPointerdown(event, key),\n      onKeydown: (event: KeyboardEvent) => {\n        if (!onDragKeydown(event, key)) onKeydown(event, key);\n      },\n      onBlur: () => onBlur(key),\n    }),\n    itemProps: (key) => ({\n      'data-sortable-item': key,\n      'data-state': active.value === key ? 'active' : undefined,\n    }),\n    groupProps: (group) => ({\n      'data-sortable-group': group,\n      'data-drop':\n        target.value?.group === group && active.value && groupOf(active.value) !== group\n          ? target.value.reason\n            ? 'denied'\n            : 'allowed'\n          : undefined,\n    }),\n  };\n}\n\n/** 指针靠近 scroller 的边缘时朝那边滚一步；滚了返回 true */\nfunction edgeScroll(scroller: HTMLElement, pointer: { x: number; y: number }): boolean {\n  const rect =\n    scroller === document.scrollingElement ? viewportRect() : scroller.getBoundingClientRect();\n  const speed = (along: number, low: number, high: number) =>\n    along < low + EDGE\n      ? -MAX_SCROLL_STEP * (1 - (along - low) / EDGE)\n      : along > high - EDGE\n        ? MAX_SCROLL_STEP * (1 - (high - along) / EDGE)\n        : 0;\n  const canX = scroller.scrollWidth > scroller.clientWidth;\n  const canY = scroller.scrollHeight > scroller.clientHeight;\n  const left = canX ? speed(pointer.x, rect.left, rect.right) : 0;\n  const top = canY ? speed(pointer.y, rect.top, rect.bottom) : 0;\n  if (!left && !top) return false;\n  const before = [scroller.scrollLeft, scroller.scrollTop];\n  scroller.scrollBy({ left, top });\n  return scroller.scrollLeft !== before[0] || scroller.scrollTop !== before[1];\n}\n\n/** 最近的能滚动的祖先（含自己）；都不能滚时是页面 */\nfunction scrollParent(element: HTMLElement): HTMLElement {\n  for (let current: HTMLElement | null = element; current; current = current.parentElement) {\n    const { overflowX, overflowY } = getComputedStyle(current);\n    const scrollable = /auto|scroll|overlay/;\n    if (\n      (scrollable.test(overflowY) && current.scrollHeight > current.clientHeight) ||\n      (scrollable.test(overflowX) && current.scrollWidth > current.clientWidth)\n    ) {\n      return current;\n    }\n  }\n  return (document.scrollingElement as HTMLElement | null) ?? document.documentElement;\n}\n\nconst viewportRect = () => new DOMRect(0, 0, window.innerWidth, window.innerHeight);\n"],"mappings":"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"}

package/dist/utils/dom/storage.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 记在浏览器里的状态（参考 VueUse 的 useStorage）：列宽、密度、每页条数、侧栏、查询条件，刷新、再打开时还在。
+ *
+ *   let hidden = _fromRef(usePersistentState('orders.hiddenColumns', [] as string[]));
+ *   <DataTable hiddenColumns={hidden} … />
+ *
+ * - 存成 JSON；读出来的类型与 initial 不同（改过版本、被手改坏了）时用 initial；对象按字段合并在 initial 上，
+ *   新加的字段有默认值
+ * - 隐私模式、禁用存储、配额满时读写会抛错：只在这次打开有效
+ * - 别的标签页改了同一个键，这里跟着变（storage 事件）；服务端渲染时就是 initial
+ */
+import { type Ref } from 'vue';
+/** usePersistentState 的选项 */
+export interface PersistentStateOptions<T> {
+    /** 存在哪：默认 localStorage；sessionStorage 只在这个标签页里记 */
+    storage?: () => Storage;
+    /** 读出来的值能不能用；默认要求与 initial 同类型（数组对数组、对象对对象） */
+    validate?: (value: unknown) => value is T;
+}
+/** 记在浏览器里的状态（见文件开头）；返回的 Ref 改了就写回去 */
+export declare function usePersistentState<T>(key: string, initial: T, options?: PersistentStateOptions<T>): Ref<T>;