@feugene/granularity 0.4.0 → 0.4.2

package/dist/components/GrTree/chunks/GrTree-C2kN-O4Q.js

@@ -0,0 +1,734 @@
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BG_EqiDU.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveComponent, shallowRef, toDisplayString, toValue, unref, watch, withCtx, withModifiers } from "vue";
+import '../../../GrTree.css';//#region src/components/GrTree/grTreeDataAdapter.ts
+var DEFAULT_CHILDREN_KEY = "children";
+var DEFAULT_LABEL_KEY = "label";
+function isTreeKey(value) {
+	return typeof value === "string" || typeof value === "number";
+}
+function resolveMapValue(map, key, fallback) {
+	return map?.[key] ?? fallback;
+}
+function createGrTreeDataAdapter(options) {
+	function hasNodeKey() {
+		return options.nodeKey != null;
+	}
+	function getChildrenKey() {
+		return resolveMapValue(options.props, "children", DEFAULT_CHILDREN_KEY);
+	}
+	function getLabelKey() {
+		return resolveMapValue(options.props, "label", DEFAULT_LABEL_KEY);
+	}
+	function getLabel(data) {
+		const value = data[getLabelKey()];
+		return value == null ? "" : String(value);
+	}
+	function getChildren(data) {
+		const value = data[getChildrenKey()];
+		return Array.isArray(value) ? value : [];
+	}
+	function ensureChildren(data) {
+		const key = getChildrenKey();
+		const value = data[key];
+		if (Array.isArray(value)) return value;
+		const children = [];
+		data[key] = children;
+		return children;
+	}
+	function getExplicitNodeKey(data) {
+		if (options.nodeKey == null) return void 0;
+		const value = data[options.nodeKey];
+		return isTreeKey(value) ? value : void 0;
+	}
+	function getNodeKey(data, index, parentKey) {
+		const explicitKey = getExplicitNodeKey(data);
+		if (explicitKey != null) return explicitKey;
+		return parentKey == null ? index : `${String(parentKey)}:${index}`;
+	}
+	return {
+		hasNodeKey,
+		getChildrenKey,
+		getLabelKey,
+		getLabel,
+		getChildren,
+		ensureChildren,
+		getNodeKey,
+		getExplicitNodeKey
+	};
+}
+//#endregion
+//#region src/components/GrTree/grTreeInteractionContext.ts
+function createGrTreeInteractionContext(options, emitters) {
+	const hoveredKey = ref(void 0);
+	const draggingNode = shallowRef(null);
+	const dropTarget = shallowRef(null);
+	function canDrag(node) {
+		if (!options.draggable) return false;
+		if (options.allowDrag) return options.allowDrag(node);
+		return true;
+	}
+	function canDrop(drag, target, type) {
+		if (!options.allowDrop) return true;
+		return options.allowDrop(drag, target, type);
+	}
+	function resetDragState() {
+		draggingNode.value = null;
+		dropTarget.value = null;
+	}
+	return {
+		hoveredKey,
+		draggingNode,
+		dropTarget,
+		canDrag,
+		canDrop,
+		resetDragState,
+		...emitters
+	};
+}
+//#endregion
+//#region src/components/GrTree/grTreeStore.ts
+function createGrTreeStore(options) {
+	const filterValue = ref("");
+	const expandedKeys = shallowRef(/* @__PURE__ */ new Set());
+	const currentKey = ref(void 0);
+	const getData = () => toValue(options.data) ?? [];
+	const getFilterNodeMethod = () => toValue(options.filterNodeMethod);
+	watch(() => toValue(options.defaultExpandedKeys), (keys) => {
+		expandedKeys.value = new Set(keys ?? []);
+	}, { immediate: true });
+	const treeModel = computed(() => {
+		const byKey = /* @__PURE__ */ new Map();
+		const byData = /* @__PURE__ */ new WeakMap();
+		const build = (items, parent, level) => {
+			return items.map((item, index) => {
+				const node = {
+					key: options.adapter.getNodeKey(item, index, parent?.key),
+					label: options.adapter.getLabel(item),
+					data: item,
+					level,
+					parent,
+					childNodes: []
+				};
+				byKey.set(node.key, node);
+				byData.set(item, node);
+				node.childNodes = build(options.adapter.getChildren(item), node, level + 1);
+				return node;
+			});
+		};
+		return {
+			roots: build(getData(), void 0, 1),
+			byKey,
+			byData
+		};
+	});
+	const filterInfo = computed(() => {
+		const value = filterValue.value;
+		const isActive = value.trim().length > 0;
+		const valueLower = value.toLowerCase();
+		const subtreeHasMatch = /* @__PURE__ */ new Map();
+		const matchedKeys = /* @__PURE__ */ new Set();
+		const autoExpandKeys = /* @__PURE__ */ new Set();
+		if (!isActive) return {
+			isActive,
+			subtreeHasMatch,
+			matchedKeys,
+			autoExpandKeys
+		};
+		const match = (node) => {
+			const filterNodeMethod = getFilterNodeMethod();
+			if (filterNodeMethod) return filterNodeMethod(value, node.data, node);
+			return node.label.toLowerCase().includes(valueLower);
+		};
+		const walk = (nodes) => {
+			let any = false;
+			for (const node of nodes) {
+				const self = match(node);
+				const childAny = walk(node.childNodes);
+				const has = self || childAny;
+				subtreeHasMatch.set(node.key, has);
+				if (self) matchedKeys.add(node.key);
+				if (childAny) autoExpandKeys.add(node.key);
+				any ||= has;
+			}
+			return any;
+		};
+		walk(treeModel.value.roots);
+		return {
+			isActive,
+			subtreeHasMatch,
+			matchedKeys,
+			autoExpandKeys
+		};
+	});
+	function getNode(key) {
+		return treeModel.value.byKey.get(key);
+	}
+	function findNodeByData(data) {
+		return treeModel.value.byData.get(data);
+	}
+	function isTreeNode(target) {
+		return typeof target === "object" && target !== null && "key" in target && "data" in target && "childNodes" in target;
+	}
+	function resolveNodeTarget(target) {
+		if (target == null) return void 0;
+		if (typeof target === "string" || typeof target === "number") return getNode(target);
+		if (isTreeNode(target)) return getNode(target.key) ?? target;
+		const key = options.adapter.getExplicitNodeKey(target);
+		if (key != null) return getNode(key);
+		return findNodeByData(target);
+	}
+	function getNodeContainer(node) {
+		const items = node.parent ? options.adapter.ensureChildren(node.parent.data) : getData();
+		let index = items.findIndex((item) => item === node.data);
+		if (index >= 0) return {
+			items,
+			index
+		};
+		const key = options.adapter.getExplicitNodeKey(node.data);
+		if (key == null) return void 0;
+		index = items.findIndex((item) => options.adapter.getExplicitNodeKey(item) === key);
+		if (index < 0) return void 0;
+		return {
+			items,
+			index
+		};
+	}
+	function isDescendantNode(ancestor, node) {
+		let current = node.parent;
+		while (current) {
+			if (current.key === ancestor.key) return true;
+			current = current.parent;
+		}
+		return false;
+	}
+	function canMoveNode(node, referenceNode, dropType) {
+		const sourceNode = resolveNodeTarget(node);
+		const targetNode = resolveNodeTarget(referenceNode);
+		if (!sourceNode || !targetNode) return false;
+		if (sourceNode.key === targetNode.key) return false;
+		if (isDescendantNode(sourceNode, targetNode)) return false;
+		if (!getNodeContainer(sourceNode)) return false;
+		if (dropType === "inner") return true;
+		return Boolean(getNodeContainer(targetNode));
+	}
+	function sanitizeTreeState() {
+		const byKey = treeModel.value.byKey;
+		if (currentKey.value != null && !byKey.has(currentKey.value)) currentKey.value = void 0;
+		const nextExpandedKeys = new Set(Array.from(expandedKeys.value).filter((key) => byKey.has(key)));
+		if (nextExpandedKeys.size !== expandedKeys.value.size) expandedKeys.value = nextExpandedKeys;
+	}
+	function isExpandedKey(key) {
+		return expandedKeys.value.has(key);
+	}
+	function setExpandedKey(key, expanded) {
+		const next = new Set(expandedKeys.value);
+		if (expanded) next.add(key);
+		else next.delete(key);
+		expandedKeys.value = next;
+	}
+	function toggleExpand(node) {
+		setExpandedKey(node.key, !isExpandedKey(node.key));
+	}
+	function setCurrentKey(key) {
+		currentKey.value = key;
+	}
+	function getCurrentKey() {
+		return currentKey.value;
+	}
+	function getCurrentNode() {
+		const key = currentKey.value;
+		return key == null ? void 0 : getNode(key);
+	}
+	function setCurrentNode(node) {
+		if (node == null) {
+			currentKey.value = void 0;
+			return true;
+		}
+		const targetNode = resolveNodeTarget(node);
+		if (!targetNode) return false;
+		currentKey.value = targetNode.key;
+		return true;
+	}
+	function resolveInsertedNode(data) {
+		const key = options.adapter.getExplicitNodeKey(data);
+		if (key != null) return getNode(key);
+		return findNodeByData(data);
+	}
+	function moveNode(node, referenceNode, dropType) {
+		const sourceNode = resolveNodeTarget(node);
+		const targetNode = resolveNodeTarget(referenceNode);
+		if (!sourceNode || !targetNode) return void 0;
+		if (!canMoveNode(sourceNode, targetNode, dropType)) return void 0;
+		const sourceContainer = getNodeContainer(sourceNode);
+		if (!sourceContainer) return void 0;
+		let destinationItems;
+		let destinationIndex;
+		if (dropType === "inner") {
+			destinationItems = options.adapter.ensureChildren(targetNode.data);
+			destinationIndex = destinationItems.length;
+		} else {
+			const targetContainer = getNodeContainer(targetNode);
+			if (!targetContainer) return void 0;
+			destinationItems = targetContainer.items;
+			destinationIndex = dropType === "prev" ? targetContainer.index : targetContainer.index + 1;
+		}
+		if (destinationItems === sourceContainer.items && sourceContainer.index < destinationIndex) destinationIndex -= 1;
+		const [movedData] = sourceContainer.items.splice(sourceContainer.index, 1);
+		destinationItems.splice(destinationIndex, 0, movedData);
+		if (dropType === "inner") setExpandedKey(targetNode.key, true);
+		sanitizeTreeState();
+		return resolveInsertedNode(movedData);
+	}
+	function appendNode(data, parent) {
+		const parentNode = resolveNodeTarget(parent);
+		if (!parentNode) return void 0;
+		options.adapter.ensureChildren(parentNode.data).push(data);
+		setExpandedKey(parentNode.key, true);
+		sanitizeTreeState();
+		return resolveInsertedNode(data);
+	}
+	function removeNode(node) {
+		if (!options.adapter.hasNodeKey()) return false;
+		const targetNode = resolveNodeTarget(node);
+		if (!targetNode) return false;
+		const container = getNodeContainer(targetNode);
+		if (!container) return false;
+		container.items.splice(container.index, 1);
+		sanitizeTreeState();
+		return true;
+	}
+	function insertNodeBefore(data, referenceNode) {
+		const targetNode = resolveNodeTarget(referenceNode);
+		if (!targetNode) return void 0;
+		const container = getNodeContainer(targetNode);
+		if (!container) return void 0;
+		container.items.splice(container.index, 0, data);
+		sanitizeTreeState();
+		return resolveInsertedNode(data);
+	}
+	function insertNodeAfter(data, referenceNode) {
+		const targetNode = resolveNodeTarget(referenceNode);
+		if (!targetNode) return void 0;
+		const container = getNodeContainer(targetNode);
+		if (!container) return void 0;
+		container.items.splice(container.index + 1, 0, data);
+		sanitizeTreeState();
+		return resolveInsertedNode(data);
+	}
+	function filter(value) {
+		filterValue.value = value;
+	}
+	return {
+		filterValue,
+		expandedKeys,
+		currentKey,
+		treeModel,
+		filterInfo,
+		filter,
+		isExpandedKey,
+		setExpandedKey,
+		toggleExpand,
+		setCurrentKey,
+		getCurrentKey,
+		getCurrentNode,
+		setCurrentNode,
+		getNode,
+		canMoveNode,
+		moveNode,
+		appendNode,
+		removeNode,
+		insertNodeBefore,
+		insertNodeAfter
+	};
+}
+//#endregion
+//#region src/components/GrTree/GrTree.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ds-tree", "role"];
+var _hoisted_2 = ["aria-level", "aria-expanded"];
+var _hoisted_3 = [
+	"onClick",
+	"onDrop",
+	"onDragover",
+	"onMouseenter",
+	"onMouseleave"
+];
+var _hoisted_4 = [
+	"aria-label",
+	"draggable",
+	"onDragstart"
+];
+var _hoisted_5 = ["aria-label", "onClick"];
+var _hoisted_6 = { class: "ds-tree__label" };
+var _hoisted_7 = { class: "ds-tree__label" };
+var DEFAULT_BRANCH_LINE_COLOR = "var(--ds-tree-branch-line-default-color, #e2e8f0)";
+//#endregion
+//#region src/components/GrTree/GrTree.vue
+var GrTree_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	name: "GrTree",
+	__name: "GrTree",
+	props: {
+		data: {},
+		props: { default: () => ({
+			children: "children",
+			label: "label"
+		}) },
+		nodeKey: { default: "id" },
+		defaultExpandedKeys: { default: () => [] },
+		filterNodeMethod: {},
+		highlightCurrent: {
+			type: Boolean,
+			default: true
+		},
+		expandIcon: { default: "i-lucide-chevron-right" },
+		collapseIcon: { default: "i-lucide-chevron-right" },
+		toggleIconRotate: {
+			type: Boolean,
+			default: true
+		},
+		branchLine: {
+			type: Boolean,
+			default: false
+		},
+		branchLineColor: {
+			type: [String, Function],
+			default: void 0
+		},
+		branchLineActiveColor: {
+			type: [String, Function],
+			default: void 0
+		},
+		rowClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		dragHandleClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		toggleClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		toggleIconClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		toggleSpacerClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		contentClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		dragLabel: { default: "Drag" },
+		expandLabel: { default: "Expand" },
+		collapseLabel: { default: "Collapse" },
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		dragHandleIcon: { default: "i-lucide-grip-vertical" },
+		allowDrop: {},
+		allowDrag: {},
+		internalRows: { default: void 0 },
+		internalNested: {
+			type: Boolean,
+			default: false
+		},
+		internalStore: { default: void 0 },
+		internalInteractionContext: {}
+	},
+	emits: [
+		"nodeClick",
+		"nodeExpand",
+		"nodeCollapse",
+		"nodeDrop"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const dataAdapter = createGrTreeDataAdapter(props);
+		const treeStore = props.internalStore ?? createGrTreeStore({
+			adapter: dataAdapter,
+			data: () => props.data,
+			defaultExpandedKeys: () => props.defaultExpandedKeys,
+			filterNodeMethod: () => props.filterNodeMethod
+		});
+		const interactionContext = props.internalInteractionContext ?? createGrTreeInteractionContext(props, {
+			emitNodeClick: (data, node) => emit("nodeClick", data, node),
+			emitNodeExpand: (data, node) => emit("nodeExpand", data, node),
+			emitNodeCollapse: (data, node) => emit("nodeCollapse", data, node),
+			emitNodeDrop: (draggingNode, dropNode, dropType) => emit("nodeDrop", draggingNode, dropNode, dropType)
+		});
+		const treeProps = props;
+		const currentKey = treeStore.currentKey;
+		const hoveredKey = interactionContext.hoveredKey;
+		const dropTarget = interactionContext.dropTarget;
+		const visibleRows = computed(() => {
+			if (props.internalRows) return props.internalRows;
+			const { roots } = treeStore.treeModel.value;
+			const { isActive, subtreeHasMatch, matchedKeys, autoExpandKeys } = treeStore.filterInfo.value;
+			const walk = (nodes) => {
+				const rows = [];
+				for (const node of nodes) {
+					if (isActive && !subtreeHasMatch.get(node.key)) continue;
+					const isLeaf = node.childNodes.length === 0;
+					const isMatched = matchedKeys.has(node.key);
+					const isExpanded = treeStore.isExpandedKey(node.key) || isActive && autoExpandKeys.has(node.key);
+					rows.push({
+						node,
+						isExpanded,
+						isLeaf,
+						isMatched,
+						children: isExpanded ? walk(node.childNodes) : []
+					});
+				}
+				return rows;
+			};
+			return walk(roots);
+		});
+		function onRowClick(node) {
+			treeStore.setCurrentKey(node.key);
+			interactionContext.emitNodeClick(node.data, node);
+		}
+		function onRowMouseEnter(node) {
+			hoveredKey.value = node.key;
+		}
+		function onRowMouseLeave(node) {
+			if (hoveredKey.value === node.key) hoveredKey.value = void 0;
+		}
+		function toggleExpand(node) {
+			const expanded = !treeStore.isExpandedKey(node.key);
+			treeStore.toggleExpand(node);
+			if (expanded) interactionContext.emitNodeExpand(node.data, node);
+			else interactionContext.emitNodeCollapse(node.data, node);
+		}
+		function canDrag(node) {
+			return interactionContext.canDrag(node);
+		}
+		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";
+			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 onDragEnd() {
+			interactionContext.resetDragState();
+		}
+		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";
+		}
+		function onDrop(evt, node) {
+			const drag = interactionContext.draggingNode.value;
+			const target = interactionContext.dropTarget.value;
+			if (!treeProps.draggable || !drag || !target) return;
+			evt.preventDefault();
+			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();
+		}
+		function filter(value) {
+			treeStore.filter(value);
+		}
+		function resolveNodeClass(classValue, row) {
+			if (!classValue) return void 0;
+			return typeof classValue === "function" ? classValue(row) : classValue;
+		}
+		function resolveBranchLineColorValue(color, node) {
+			if (!color) return void 0;
+			return typeof color === "function" ? color(node) ?? void 0 : color;
+		}
+		function isBranchLineActive(node) {
+			const selectedKey = currentKey.value;
+			if (selectedKey == null) return false;
+			if (node.key === selectedKey) return true;
+			return node.childNodes.some((child) => child.key === selectedKey && !treeStore.isExpandedKey(child.key));
+		}
+		function resolveBranchLineColor(node) {
+			const defaultColor = resolveBranchLineColorValue(treeProps.branchLineColor, node) ?? DEFAULT_BRANCH_LINE_COLOR;
+			if (!isBranchLineActive(node)) return defaultColor;
+			return resolveBranchLineColorValue(treeProps.branchLineActiveColor, node) ?? defaultColor;
+		}
+		function resolveChildrenWrapStyle(row) {
+			if (!treeProps.branchLine) return {};
+			return { "--ds-tree-branch-line-color": resolveBranchLineColor(row.node) };
+		}
+		__expose({
+			appendNode: treeStore.appendNode,
+			filter,
+			getCurrentNode: treeStore.getCurrentNode,
+			setCurrentKey: treeStore.setCurrentKey,
+			getCurrentKey: treeStore.getCurrentKey,
+			getNode: treeStore.getNode,
+			insertNodeAfter: treeStore.insertNodeAfter,
+			insertNodeBefore: treeStore.insertNodeBefore,
+			removeNode: treeStore.removeNode,
+			setCurrentNode: treeStore.setCurrentNode
+		});
+		return (_ctx, _cache) => {
+			const _component_GrTree = resolveComponent("GrTree", true);
+			return openBlock(), createElementBlock("div", {
+				"data-ds-tree": props.internalNested ? void 0 : "",
+				class: normalizeClass(props.internalNested ? "ds-tree__children" : "ds-tree"),
+				role: props.internalNested ? "group" : "tree"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleRows.value, (row) => {
+				return openBlock(), createElementBlock("div", {
+					key: row.node.key,
+					"data-ds-tree-node": "",
+					role: "treeitem",
+					"aria-level": row.node.level,
+					"aria-expanded": row.isLeaf ? void 0 : row.isExpanded
+				}, [createElementVNode("div", {
+					"data-ds-tree-row": "",
+					class: normalizeClass(["ds-tree__row py-2 px-2", [
+						unref(treeProps).highlightCurrent && unref(currentKey) === row.node.key ? "ds-tree__row--current" : "",
+						row.isMatched ? "ds-tree__row--matched" : "",
+						unref(dropTarget)?.key === row.node.key && unref(dropTarget).allowed && unref(dropTarget).type === "inner" ? "ds-tree__row--drop-inner" : "",
+						unref(dropTarget)?.key === row.node.key && unref(dropTarget).allowed && unref(dropTarget).type === "prev" ? "ds-tree__row--drop-prev" : "",
+						unref(dropTarget)?.key === row.node.key && unref(dropTarget).allowed && unref(dropTarget).type === "next" ? "ds-tree__row--drop-next" : "",
+						resolveNodeClass(unref(treeProps).rowClass, row)
+					]]),
+					tabindex: "0",
+					onClick: ($event) => onRowClick(row.node),
+					onDrop: ($event) => onDrop($event, row.node),
+					onDragover: ($event) => onDragOver($event, row.node, $event.currentTarget),
+					onMouseenter: ($event) => onRowMouseEnter(row.node),
+					onMouseleave: ($event) => onRowMouseLeave(row.node)
+				}, [
+					unref(treeProps).draggable ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						"data-ds-tree-drag-handle": "",
+						class: normalizeClass(["ds-tree__drag-handle", [
+							shouldShowDragHandle(row.node) ? "ds-tree__drag-handle--visible" : "",
+							canDrag(row.node) ? "" : "ds-tree__drag-handle--disabled",
+							resolveNodeClass(unref(treeProps).dragHandleClass, row)
+						]]),
+						"aria-label": unref(treeProps).dragLabel,
+						draggable: canDrag(row.node),
+						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(["ds-tree__drag-icon", unref(treeProps).dragHandleIcon]) }, null, 2)], 42, _hoisted_4)) : createCommentVNode("", true),
+					!row.isLeaf ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						"data-ds-tree-toggle": "",
+						type: "button",
+						class: normalizeClass(["ds-tree__toggle", resolveNodeClass(unref(treeProps).toggleClass, row)]),
+						"aria-label": row.isExpanded ? unref(treeProps).collapseLabel : unref(treeProps).expandLabel,
+						onClick: withModifiers(($event) => toggleExpand(row.node), ["stop"])
+					}, [createElementVNode("span", { class: normalizeClass(["ds-tree__toggle-icon", [
+						row.isExpanded ? unref(treeProps).collapseIcon : unref(treeProps).expandIcon,
+						row.isExpanded && unref(treeProps).toggleIconRotate ? "ds-tree__toggle-icon--expanded" : "",
+						resolveNodeClass(unref(treeProps).toggleIconClass, row)
+					]]) }, null, 2)], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(["ds-tree__toggle-spacer", resolveNodeClass(unref(treeProps).toggleSpacerClass, row)])
+					}, null, 2)),
+					createElementVNode("div", { class: normalizeClass(["ds-tree__content", resolveNodeClass(unref(treeProps).contentClass, row)]) }, [renderSlot(_ctx.$slots, "default", {
+						node: row.node,
+						data: row.node.data
+					}, () => [createElementVNode("span", _hoisted_6, toDisplayString(row.node.label), 1)], true)], 2)
+				], 42, _hoisted_3), row.children.length ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["ds-tree__children-wrap ml-6", unref(treeProps).branchLine ? "ds-tree__children-wrap--with-branch" : ""]),
+					style: normalizeStyle(resolveChildrenWrapStyle(row))
+				}, [createVNode(_component_GrTree, mergeProps({ ref_for: true }, props, {
+					data: [],
+					"internal-rows": row.children,
+					"internal-nested": "",
+					"internal-store": unref(treeStore),
+					"internal-interaction-context": unref(interactionContext)
+				}), {
+					default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, slotProps), () => [createElementVNode("span", _hoisted_7, toDisplayString(slotProps.node.label), 1)], true)]),
+					_: 3
+				}, 16, [
+					"internal-rows",
+					"internal-store",
+					"internal-interaction-context"
+				])], 6)) : createCommentVNode("", true)], 8, _hoisted_2);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-0d01877b"]]);
+//#endregion
+export { GrTree_default as t };