@feugene/granularity 0.16.0 → 0.19.0

package/dist/components/GrTree/chunks/{GrTree-wfdbvygw.js → GrTree-BR9a2pay.js}

@@ -1,8 +1,17 @@
 import { o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.js";
 import { useVirtualList } from "../../../composables/useVirtualList.js";
 import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onUnmounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, toValue, unref, watch, withModifiers } from "vue";
+import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
+import { n as iconTag, t as iconClass } from "../../../chunks/icon-Dag2tIMs.js";
+import { t as minus_default } from "../../../chunks/minus-oxdbHF33.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { t as useDragSort } from "../../../chunks/useDragSort-0l47h4yb.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
+import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, watch, withModifiers } from "vue";
 import '../styles.css';//#region src/components/GrTree/grTreeDataAdapter.ts
 var DEFAULT_CHILDREN_KEY = "children";
 var DEFAULT_LABEL_KEY = "label";
@@ -68,7 +77,6 @@ function createGrTreeDataAdapter(options) {
 //#region src/components/GrTree/grTreeInteractionContext.ts
 function createGrTreeInteractionContext(options, emitters) {
 	const hoveredKey = ref(void 0);
-	const focusedKey = ref(void 0);
 	const draggingNode = shallowRef(null);
 	const dropTarget = shallowRef(null);
 	const nodeEls = /* @__PURE__ */ new Map();
@@ -95,7 +103,6 @@ function createGrTreeInteractionContext(options, emitters) {
 	}
 	return {
 		hoveredKey,
-		focusedKey,
 		nodeEls,
 		registerNodeEl,
 		draggingNode,
@@ -597,25 +604,19 @@ var _hoisted_2 = [
 var _hoisted_3 = [
 	"onClick",
 	"onContextmenu",
-	"onDrop",
-	"onDragover",
 	"onMouseenter",
 	"onMouseleave"
 ];
 var _hoisted_4 = [
 	"aria-label",
-	"draggable",
-	"onDragstart"
+	"aria-disabled",
+	"onPointerdown"
 ];
 var _hoisted_5 = ["aria-label", "onClick"];
-var _hoisted_6 = {
-	key: 0,
-	"data-gr-tree-loading": "",
-	class: "gr-tree__toggle-icon animate-spin i-lucide-loader-circle"
-};
-var _hoisted_7 = ["onClick"];
-var _hoisted_8 = { class: "gr-tree__label" };
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = { class: "gr-tree__label" };
 var DEFAULT_BRANCH_LINE_COLOR = "var(--gr-tree-branch-line-default-color, var(--gr-brd))";
+/** Стрелки, которые вместе с `Shift` двигают узел, а не фокус. */
 var TREE_ROW_GAP = 2;
 var TYPEAHEAD_RESET_MS = 600;
 //#endregion
@@ -654,8 +655,8 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: true
 		},
-		expandIcon: { default: "i-lucide-chevron-right" },
-		collapseIcon: { default: "i-lucide-chevron-right" },
+		expandIcon: { default: void 0 },
+		collapseIcon: { default: void 0 },
 		toggleIconRotate: {
 			type: Boolean,
 			default: true
@@ -763,7 +764,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: false
 		},
-		dragHandleIcon: { default: "i-lucide-grip-vertical" },
+		dragHandleIcon: { default: void 0 },
 		allowDrop: {},
 		allowDrag: {}
 	},
@@ -777,6 +778,12 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		"check"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
+		const MOVE_KEYS = /* @__PURE__ */ new Set([
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		]);
 		const props = __props;
 		const emit = __emit;
 		const treeStore = createGrTreeStore({
@@ -800,12 +807,12 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		const treeProps = props;
 		const { t } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
 		const dragLabel = computed(() => treeProps.dragLabel ?? t("gr.tree.drag", "Drag"));
 		const expandLabel = computed(() => treeProps.expandLabel ?? t("gr.tree.expand", "Expand"));
 		const collapseLabel = computed(() => treeProps.collapseLabel ?? t("gr.tree.collapse", "Collapse"));
 		const currentKey = treeStore.currentKey;
 		const hoveredKey = interactionContext.hoveredKey;
-		const focusedKey = interactionContext.focusedKey;
 		const dropTarget = interactionContext.dropTarget;
 		const treeRootEl = ref(null);
 		/**
@@ -842,9 +849,25 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			walk(roots, []);
 			return rows;
 		});
+		/**
+		* Кольцо roving-фокуса: ровно один `treeitem` на всё дерево держит `tabindex=0`.
+		*
+		* Ориентация вертикальная намеренно: влево-вправо в дереве заняты раскрытием
+		* ветки и переходом к родителю, и примитив их не трогает — это доменная логика,
+		* она осталась в `onTreeKeydown`.
+		*/
+		const roving = useRovingFocus({
+			items: () => visibleRows.value.map((row) => row.node.key),
+			elementFor: (key) => interactionContext.nodeEls.get(key),
+			orientation: () => "vertical",
+			wrap: () => false,
+			onOverflow: () => true,
+			initialKey: () => currentKey.value ?? void 0,
+			beforeFocus: (key) => scrollRowIntoView(key)
+		});
 		function onRowClick(node) {
 			treeStore.setCurrentKey(node.key);
-			focusedKey.value = node.key;
+			roving.setActive(node.key);
 			interactionContext.emitNodeClick(node.data, node);
 		}
 		function onRowActivate(row) {
@@ -855,7 +878,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			interactionContext.emitNodeContextMenu(evt, node.data, node);
 		}
 		function isRovingItem(key) {
-			return focusedKey.value === key;
+			return roving.rovingKey.value === key;
 		}
 		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTree" });
 		const sizeStyle = computed(() => treeSizeVars[resolvedSize.value]);
@@ -935,13 +958,20 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			interactionContext.registerNodeEl(key, null);
 			if (heldFocus && !isUnmounting) treeRootEl.value?.focus({ preventScroll: true });
 		}
-		function focusRow(key) {
-			focusedKey.value = key;
+		/**
+		* При виртуализации узла вне окна в DOM нет: `nodeEls.get` вернул бы
+		* `undefined`, а фокус уехал бы на `body` вместе с размонтированной строкой.
+		* Поэтому сперва прокрутка, и только следующим тиком — фокус.
+		*/
+		function scrollRowIntoView(key) {
 			if (treeProps.virtual) {
 				const index = visibleRows.value.findIndex((row) => row.node.key === key);
 				if (index >= 0) virtualizer.scrollToIndex(index);
 			}
-			nextTick(() => interactionContext.nodeEls.get(key)?.focus());
+			return nextTick();
+		}
+		function focusRow(key) {
+			roving.focusKey(key);
 		}
 		/**
 		* Typeahead паттерна tree: печатные символы копятся в буфер и переводят фокус
@@ -982,7 +1012,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}
 			const rows = visibleRows.value;
 			if (rows.length === 0) return;
-			const idx = Math.max(0, rows.findIndex((r) => r.node.key === focusedKey.value));
+			const idx = Math.max(0, rows.findIndex((r) => r.node.key === roving.rovingKey.value));
 			const cur = rows[idx];
 			if (event.key === "*") {
 				event.preventDefault();
@@ -994,15 +1024,14 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				onTypeahead(event.key, rows, idx);
 				return;
 			}
+			if (event.shiftKey && MOVE_KEYS.has(event.key)) {
+				if (!treeProps.draggable) return;
+				event.preventDefault();
+				onNodeMoveKey(cur.node, event.key);
+				return;
+			}
+			if (roving.handleNavigationKeys(event)) return;
 			switch (event.key) {
-				case "ArrowDown":
-					event.preventDefault();
-					if (idx < rows.length - 1) focusRow(rows[idx + 1].node.key);
-					break;
-				case "ArrowUp":
-					event.preventDefault();
-					if (idx > 0) focusRow(rows[idx - 1].node.key);
-					break;
 				case "ArrowRight":
 					event.preventDefault();
 					if (!cur.isLeaf) {
@@ -1015,14 +1044,6 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					if (!cur.isLeaf && cur.isExpanded) toggleExpand(cur.node);
 					else if (cur.node.parent && rows.some((r) => r.node.key === cur.node.parent.key)) focusRow(cur.node.parent.key);
 					break;
-				case "Home":
-					event.preventDefault();
-					focusRow(rows[0].node.key);
-					break;
-				case "End":
-					event.preventDefault();
-					focusRow(rows[rows.length - 1].node.key);
-					break;
 				case "Enter":
 					event.preventDefault();
 					onRowClick(cur.node);
@@ -1034,17 +1055,6 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					break;
 			}
 		}
-		function normalizeFocusedKey() {
-			const rows = visibleRows.value;
-			if (rows.length === 0) {
-				focusedKey.value = void 0;
-				return;
-			}
-			if (focusedKey.value !== void 0 && rows.some((r) => r.node.key === focusedKey.value)) return;
-			focusedKey.value = currentKey.value != null && rows.some((r) => r.node.key === currentKey.value) ? currentKey.value : rows[0].node.key;
-		}
-		normalizeFocusedKey();
-		watch(visibleRows, normalizeFocusedKey, { flush: "sync" });
 		function onRowMouseEnter(node) {
 			hoveredKey.value = node.key;
 		}
@@ -1107,58 +1117,84 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		function shouldShowDragHandle(node) {
 			return canDrag(node) && hoveredKey.value === node.key;
 		}
-		function resolveDropType(evt, el) {
-			const rect = el.getBoundingClientRect();
-			const y = evt.clientY - rect.top;
-			const third = rect.height / 3;
-			if (y < third) return "prev";
-			if (y > third * 2) return "next";
+		/**
+		* Треть строки сверху — «до», треть снизу — «после», середина — «внутрь».
+		* Зоны нарезает компонент: примитив отдаёт только долю вдоль строки.
+		*/
+		function dropTypeFromFraction(fraction) {
+			if (fraction < 1 / 3) return "prev";
+			if (fraction > 2 / 3) return "next";
 			return "inner";
 		}
 		function canDrop(drag, target, type) {
 			return interactionContext.canDrop(drag, target, type);
 		}
-		function onDragStart(evt, node) {
-			if (!canDrag(node)) {
-				evt.preventDefault();
-				return;
-			}
-			interactionContext.draggingNode.value = node;
-			interactionContext.dropTarget.value = null;
-			try {
-				evt.dataTransfer?.setData("text/plain", String(node.key));
-			} catch {}
-			if (evt.dataTransfer) evt.dataTransfer.effectAllowed = "move";
+		/** Перенос состоялся: одна дорога и для указателя, и для клавиатуры. */
+		function applyMove(source, targetKey, type) {
+			const reference = treeStore.getNode(targetKey);
+			if (!reference) return false;
+			const movedNode = treeStore.moveNode(source, reference, type);
+			if (!movedNode) return false;
+			const dropNode = treeStore.getNode(reference.key) ?? reference;
+			interactionContext.emitNodeDrop(movedNode, dropNode, type);
+			return true;
 		}
-		function onDragEnd() {
-			interactionContext.resetDragState();
+		const dragSort = useDragSort({
+			items: () => visibleRows.value.map((row) => row.node.key),
+			elementFor: (key) => interactionContext.nodeEls.get(key) ?? null,
+			scroller: () => treeRootEl.value,
+			disabled: () => !treeProps.draggable,
+			canDrag: (key) => {
+				const node = treeStore.getNode(key);
+				return node ? canDrag(node) : false;
+			},
+			resolveTarget: (hit, sourceKey, previous) => {
+				const source = treeStore.getNode(sourceKey);
+				const node = treeStore.getNode(hit.key);
+				if (!source || !node) return null;
+				const type = dropTypeFromFraction(hit.fraction);
+				const allowed = treeStore.canMoveNode(source, node, type) && canDrop(source, node, type);
+				if (previous && previous.key === node.key && previous.type === type && previous.allowed === allowed) return previous;
+				return {
+					key: node.key,
+					type,
+					allowed
+				};
+			},
+			onDrop: (sourceKey, target) => {
+				const source = treeStore.getNode(sourceKey);
+				if (!source || !target.allowed) return;
+				applyMove(source, target.key, target.type);
+			},
+			onUpdate: (sourceKey, target) => {
+				interactionContext.draggingNode.value = sourceKey === null ? null : treeStore.getNode(sourceKey) ?? null;
+				interactionContext.dropTarget.value = target;
+			}
+		});
+		function onHandlePointerDown(event, node) {
+			if (!treeProps.draggable) return;
+			dragSort.startFrom(node.key)(event);
 		}
-		function onDragOver(evt, node, rowEl) {
-			const drag = interactionContext.draggingNode.value;
-			if (!treeProps.draggable || !drag) return;
-			evt.preventDefault();
-			const type = resolveDropType(evt, rowEl);
-			const allowed = treeStore.canMoveNode(drag, node, type) && canDrop(drag, node, type);
-			interactionContext.dropTarget.value = {
-				key: node.key,
-				type,
-				allowed
-			};
-			if (evt.dataTransfer) evt.dataTransfer.dropEffect = allowed ? "move" : "none";
+		/**
+		* Клавиатурный перенос — раскладка аутлайнера: `Shift` со стрелкой сразу
+		* двигает узел, без режима «взято». Режим здесь был бы лишним: `Space` в дереве
+		* уже отмечает чекбокс, а стрелки водят фокус по веткам.
+		*/
+		function moveByKeyboard(node, key) {
+			const siblings = node.parent ? node.parent.childNodes : treeStore.treeModel.value.roots;
+			const index = siblings.findIndex((sibling) => sibling.key === node.key);
+			if (key === "ArrowUp" && index > 0) return applyMove(node, siblings[index - 1].key, "prev");
+			if (key === "ArrowDown" && index >= 0 && index < siblings.length - 1) return applyMove(node, siblings[index + 1].key, "next");
+			if (key === "ArrowRight" && index > 0) return applyMove(node, siblings[index - 1].key, "inner");
+			if (key === "ArrowLeft" && node.parent) return applyMove(node, node.parent.key, "next");
+			return false;
 		}
-		function onDrop(evt, node) {
-			evt.preventDefault();
-			const drag = interactionContext.draggingNode.value;
-			const target = interactionContext.dropTarget.value;
-			if (!treeProps.draggable || !drag || !target) return;
-			if (target.key === node.key && target.allowed) {
-				const movedNode = treeStore.moveNode(drag, node, target.type);
-				if (movedNode) {
-					const dropNode = treeStore.getNode(node.key) ?? node;
-					interactionContext.emitNodeDrop(movedNode, dropNode, target.type);
-				}
-			}
-			interactionContext.resetDragState();
+		async function onNodeMoveKey(node, key) {
+			if (!treeProps.draggable || !canDrag(node)) return;
+			if (!moveByKeyboard(node, key)) return;
+			announce(t("gr.tree.moved", "Moved {label}", { label: node.label }));
+			await nextTick();
+			focusRow(node.key);
 		}
 		function filter(value) {
 			treeStore.filter(value);
@@ -1190,7 +1226,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		function focus(key) {
 			const rows = visibleRows.value;
 			if (rows.length === 0) return false;
-			focusRow(key != null && rows.some((row) => row.node.key === key) ? key : focusedKey.value ?? rows[0].node.key);
+			focusRow(key != null && rows.some((row) => row.node.key === key) ? key : roving.rovingKey.value ?? rows[0].node.key);
 			return true;
 		}
 		onUnmounted(() => clearTimeout(typeaheadTimer));
@@ -1266,8 +1302,7 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					style: normalizeStyle(rowStyle(row)),
 					onClick: ($event) => onRowActivate(row),
 					onContextmenu: ($event) => onRowContextMenu($event, row.node),
-					onDrop: ($event) => onDrop($event, row.node),
-					onDragover: ($event) => onDragOver($event, row.node, $event.currentTarget),
+					onDrop: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
 					onMouseenter: ($event) => onRowMouseEnter(row.node),
 					onMouseleave: ($event) => onRowMouseLeave(row.node)
 				}, [
@@ -1291,12 +1326,10 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 							resolveNodeClass(unref(treeProps).dragHandleClass, row)
 						]]),
 						"aria-label": dragLabel.value,
-						draggable: canDrag(row.node),
+						"aria-disabled": canDrag(row.node) ? void 0 : "true",
 						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
-						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
-						onDragstart: ($event) => onDragStart($event, row.node),
-						onDragend: onDragEnd
-					}, [createElementVNode("span", { class: normalizeClass(["gr-tree__drag-icon", unref(treeProps).dragHandleIcon]) }, null, 2)], 42, _hoisted_4)) : createCommentVNode("", true),
+						onPointerdown: ($event) => onHandlePointerDown($event, row.node)
+					}, [(openBlock(), createBlock(resolveDynamicComponent(unref(iconTag)(unref(treeProps).dragHandleIcon, unref(grip_vertical_default))), { class: normalizeClass(["gr-tree__drag-icon", unref(iconClass)(unref(treeProps).dragHandleIcon)]) }, null, 8, ["class"]))], 42, _hoisted_4)) : createCommentVNode("", true),
 					!row.isLeaf ? (openBlock(), createElementBlock("button", {
 						key: 1,
 						"data-gr-tree-toggle": "",
@@ -1305,14 +1338,18 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						class: normalizeClass(["gr-tree__toggle", resolveNodeClass(unref(treeProps).toggleClass, row)]),
 						"aria-label": row.isExpanded ? collapseLabel.value : expandLabel.value,
 						onClick: withModifiers(($event) => toggleExpand(row.node), ["stop"])
-					}, [row.isLoading ? (openBlock(), createElementBlock("span", _hoisted_6)) : (openBlock(), createElementBlock("span", {
+					}, [row.isLoading ? (openBlock(), createBlock(unref(loader_circle_default), {
+						key: 0,
+						"data-gr-tree-loading": "",
+						class: "gr-tree__toggle-icon animate-spin"
+					})) : (openBlock(), createBlock(resolveDynamicComponent(unref(iconTag)(row.isExpanded ? unref(treeProps).collapseIcon : unref(treeProps).expandIcon, unref(chevron_right_default))), {
 						key: 1,
 						class: normalizeClass(["gr-tree__toggle-icon", [
-							row.isExpanded ? unref(treeProps).collapseIcon : unref(treeProps).expandIcon,
+							unref(iconClass)(row.isExpanded ? unref(treeProps).collapseIcon : unref(treeProps).expandIcon),
 							row.isExpanded && unref(treeProps).toggleIconRotate ? "gr-tree__toggle-icon--expanded" : "",
 							resolveNodeClass(unref(treeProps).toggleIconClass, row)
 						]])
-					}, null, 2))], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", {
+					}, null, 8, ["class"]))], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", {
 						key: 2,
 						class: normalizeClass(["gr-tree__toggle-spacer", resolveNodeClass(unref(treeProps).toggleSpacerClass, row)])
 					}, null, 2)),
@@ -1322,18 +1359,18 @@ var GrTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						class: normalizeClass(["gr-tree__checkbox", [checkStateOf(row.node.key) === "checked" ? "gr-tree__checkbox--checked" : "", checkStateOf(row.node.key) === "half" ? "gr-tree__checkbox--half" : ""]]),
 						"aria-hidden": "true",
 						onClick: withModifiers(($event) => toggleChecked(row.node), ["stop"])
-					}, [checkStateOf(row.node.key) !== "unchecked" ? (openBlock(), createElementBlock("span", {
+					}, [checkStateOf(row.node.key) !== "unchecked" ? (openBlock(), createBlock(resolveDynamicComponent(checkStateOf(row.node.key) === "half" ? unref(minus_default) : unref(check_default)), {
 						key: 0,
-						class: normalizeClass(["gr-tree__checkbox-mark", checkStateOf(row.node.key) === "half" ? "i-lucide-minus" : "i-lucide-check"])
-					}, null, 2)) : createCommentVNode("", true)], 10, _hoisted_7)) : createCommentVNode("", true),
+						class: "gr-tree__checkbox-mark"
+					})) : createCommentVNode("", true)], 10, _hoisted_6)) : createCommentVNode("", true),
 					createElementVNode("div", { class: normalizeClass(["gr-tree__content", resolveNodeClass(unref(treeProps).contentClass, row)]) }, [renderSlot(_ctx.$slots, "default", {
 						node: row.node,
 						data: row.node.data
-					}, () => [createElementVNode("span", _hoisted_8, toDisplayString(row.node.label), 1)], true)], 2)
+					}, () => [createElementVNode("span", _hoisted_7, toDisplayString(row.node.label), 1)], true)], 2)
 				], 46, _hoisted_3)], 8, _hoisted_2);
 			}), 128))], 44, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0ed35387"]]);
+}), [["__scopeId", "data-v-c34c121e"]]);
 //#endregion
 export { GrTree_default as t };