ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/tree/src/RsTree.impl.js

@@ -0,0 +1,988 @@
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import RsEmpty_default from "../../empty/src/RsEmpty.js";
+import { buildTreeNodeIndex, collectExpandableKeys, collectHalfCheckedKeys, filterTreeNodes, flattenVisibleTreeNodes, getTreeChildren, getTreeKey, getTreeLabel, hasTreeChildren, isTreeAncestorKey, isTreeCheckboxDisabled, isTreeNodeDisabled, isTreeNodeLoading, resolveAccordionExpandedKeys, resolveTreeCheckState, resolveTreeFieldNames, resolveTreeFocusKey, resolveTreeIndent, resolveTreeRowHeight, resolveTreeTypeaheadKey, resolveTreeVirtualEnabled, shouldShowTreeCheckbox, sliceVirtualTreeNodes, splitTreeLabelHighlight, toggleTreeCheck } from "./tree-utils.js";
+import { isVirtualListFillHeight, parseVirtualListHeightPx, resolveVirtualListHeight } from "../../virtual-list/src/virtual-list-utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, vShow, watch, withDirectives, withModifiers } from "vue";
+//#region src/components/tree/src/RsTree.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"tabindex",
+	"aria-label",
+	"aria-disabled",
+	"aria-multiselectable",
+	"aria-activedescendant"
+];
+var _hoisted_2 = { class: "rs-tree__list" };
+var _hoisted_3 = [
+	"id",
+	"aria-expanded",
+	"aria-selected",
+	"aria-checked",
+	"aria-disabled",
+	"aria-busy",
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset",
+	"draggable",
+	"data-tree-key",
+	"onContextmenu",
+	"onDragstart",
+	"onDragover",
+	"onDrop",
+	"onClick",
+	"onDblclick"
+];
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-tree__lines",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = ["title"];
+var _hoisted_6 = [
+	"aria-label",
+	"aria-expanded",
+	"disabled",
+	"onClick"
+];
+var _hoisted_7 = {
+	key: 1,
+	class: "rs-tree__toggle-caret",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = {
+	key: 3,
+	class: "rs-tree__spacer",
+	"aria-hidden": "true"
+};
+var _hoisted_9 = [
+	"checked",
+	"indeterminate",
+	"disabled",
+	"aria-label",
+	"onChange"
+];
+var _hoisted_10 = {
+	key: 5,
+	class: "rs-tree__checkbox-spacer",
+	"aria-hidden": "true"
+};
+var _hoisted_11 = ["disabled", "onClick"];
+var _hoisted_12 = { class: "rs-tree__label-text" };
+var _hoisted_13 = {
+	key: 0,
+	class: "rs-tree__highlight"
+};
+var _hoisted_14 = { class: "rs-tree__label-text" };
+var _hoisted_15 = {
+	key: 0,
+	class: "rs-tree__highlight"
+};
+var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsTree",
+	__name: "RsTree",
+	props: /*@__PURE__*/ mergeModels({
+		nodes: {},
+		fieldNames: {},
+		size: {},
+		id: {},
+		ariaLabel: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		selectable: {
+			type: Boolean,
+			default: true
+		},
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: false
+		},
+		onlyCheckLeaf: {
+			type: Boolean,
+			default: false
+		},
+		checkOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		defaultExpandAll: {
+			type: Boolean,
+			default: false
+		},
+		defaultExpandedKeys: { default: () => [] },
+		defaultCheckedKeys: { default: () => [] },
+		expandOnClickNode: {
+			type: Boolean,
+			default: false
+		},
+		blockNode: {
+			type: Boolean,
+			default: false
+		},
+		showLine: {
+			type: Boolean,
+			default: false
+		},
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		filter: { default: "" },
+		filterNode: {},
+		highlight: {
+			type: Boolean,
+			default: true
+		},
+		autoExpandParent: {
+			type: Boolean,
+			default: true
+		},
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		loadData: {},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		dragTrigger: { default: "handle" },
+		allowDrop: {},
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		virtualThreshold: { default: 100 },
+		height: {},
+		itemHeight: {},
+		overscan: { default: 4 }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"expandedKeys": {},
+		"expandedKeysModifiers": {},
+		"checkedKeys": {},
+		"checkedKeysModifiers": {},
+		"halfCheckedKeys": {},
+		"halfCheckedKeysModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"node-click",
+		"node-dblclick",
+		"node-contextmenu",
+		"expand",
+		"check",
+		"node-drop"
+	], [
+		"update:modelValue",
+		"update:expandedKeys",
+		"update:checkedKeys",
+		"update:halfCheckedKeys"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const expandedKeysModel = useModel(__props, "expandedKeys");
+		const checkedKeysModel = useModel(__props, "checkedKeys");
+		const halfCheckedKeysModel = useModel(__props, "halfCheckedKeys");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const formContext = useRsFormContext();
+		const config = useRsConfigOptional();
+		const uid = useId();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const treeDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const rootId = computed(() => props.id || uid);
+		const treeLabel = computed(() => props.ariaLabel || t("tree.label"));
+		const fields = computed(() => resolveTreeFieldNames(props.fieldNames));
+		const rowHeight = computed(() => resolveTreeRowHeight(resolvedSize.value, props.itemHeight));
+		const indentPx = computed(() => resolveTreeIndent(props.size));
+		const rootKeys = computed(() => props.nodes.map((node) => getTreeKey(node, fields.value)));
+		const treeRootRef = ref(null);
+		const _measuredHeight = ref(0);
+		let _heightObs = null;
+		let alive = true;
+		let typeaheadQuery = "";
+		let typeaheadTimer = null;
+		function needsHeightObserver() {
+			if (!props.virtual || !treeRootRef.value) return false;
+			if (props.height !== void 0 && !isVirtualListFillHeight(props.height)) return false;
+			return typeof ResizeObserver !== "undefined";
+		}
+		function syncHeightObserver() {
+			_heightObs?.disconnect();
+			_heightObs = null;
+			if (!needsHeightObserver() || !treeRootRef.value) return;
+			const target = treeRootRef.value;
+			_heightObs = new ResizeObserver((entries) => {
+				if (!alive) return;
+				_measuredHeight.value = entries[0]?.contentRect.height ?? 0;
+			});
+			_heightObs.observe(target);
+			_measuredHeight.value = target.clientHeight;
+		}
+		onMounted(() => {
+			syncHeightObserver();
+		});
+		watch(() => [props.virtual, props.height], () => {
+			nextTick(() => {
+				if (!alive) return;
+				syncHeightObserver();
+			});
+		});
+		onUnmounted(() => {
+			alive = false;
+			_heightObs?.disconnect();
+			_heightObs = null;
+			if (typeaheadTimer != null) clearTimeout(typeaheadTimer);
+			typeaheadTimer = null;
+			typeaheadQuery = "";
+			rowRefs.value.clear();
+		});
+		const expandedKeysInternal = ref(props.defaultExpandAll ? collectExpandableKeys(props.nodes, fields.value, props.lazy) : [...props.defaultExpandedKeys]);
+		/** 进入过滤前的展开快照；清空过滤时还原，避免无匹配时被清空后无法恢复 */
+		const expandedKeysBeforeFilter = ref(null);
+		const checkedKeysInternal = ref([...props.defaultCheckedKeys]);
+		const scrollTop = ref(0);
+		const viewportRef = ref(null);
+		const focusedKey = ref(null);
+		const loadingKeys = ref(/* @__PURE__ */ new Set());
+		const dragKey = ref(null);
+		const dropTargetKey = ref(null);
+		const dropPosition = ref("inside");
+		const rowRefs = ref(/* @__PURE__ */ new Map());
+		const expandedKeys = computed({
+			get: () => expandedKeysModel.value ?? expandedKeysInternal.value,
+			set: (value) => {
+				expandedKeysInternal.value = value;
+				expandedKeysModel.value = value;
+			}
+		});
+		const checkedKeys = computed({
+			get: () => checkedKeysModel.value ?? checkedKeysInternal.value,
+			set: (value) => {
+				checkedKeysInternal.value = value;
+				checkedKeysModel.value = value;
+			}
+		});
+		const expandedSet = computed(() => new Set(expandedKeys.value));
+		const checkedSet = computed(() => new Set(checkedKeys.value));
+		const displayNodes = computed(() => {
+			const keyword = props.filter.trim();
+			if (!keyword) return props.nodes;
+			return filterTreeNodes(props.nodes, keyword, {
+				fieldNames: fields.value,
+				filterNode: props.filterNode
+			});
+		});
+		const nodeIndex = computed(() => buildTreeNodeIndex(props.nodes, fields.value, props.lazy));
+		const flatNodes = computed(() => flattenVisibleTreeNodes(displayNodes.value, expandedSet.value, fields.value, props.lazy));
+		/**
+		* 无勾选项时不存在半选态，直接短路。
+		* 关键在于「不读取 nodeIndex」——否则这个 immediate watch 会把全树索引拽成 eager，
+		* 使不带 checkbox 的树也在每次数据变更时重建 O(N) 索引并做一次全量勾选态遍历。
+		*/
+		const halfCheckedKeys = computed(() => {
+			if (checkedSet.value.size === 0) return [];
+			return collectHalfCheckedKeys(nodeIndex.value, checkedSet.value, props.checkStrictly, props.onlyCheckLeaf);
+		});
+		function checkboxOptions() {
+			return {
+				onlyCheckLeaf: props.onlyCheckLeaf,
+				lazy: props.lazy
+			};
+		}
+		watch(halfCheckedKeys, (value) => {
+			halfCheckedKeysModel.value = value;
+		}, { immediate: true });
+		const useVirtualScroll = computed(() => resolveTreeVirtualEnabled({
+			virtual: props.virtual,
+			flatCount: flatNodes.value.length,
+			virtualThreshold: props.virtualThreshold
+		}));
+		const viewportHeightPx = computed(() => {
+			const parsed = parseVirtualListHeightPx(props.height);
+			if (parsed != null) return parsed;
+			if (_measuredHeight.value > 0) return _measuredHeight.value;
+			const el = treeRootRef.value;
+			if (el && el.clientHeight > 0) return el.clientHeight;
+			return 320;
+		});
+		/** 过滤后滚回顶部；内容缩短时钳位，避免内部 scrollTop 与 DOM 脱节导致虚拟列表空白 */
+		function resetViewportScroll() {
+			scrollTop.value = 0;
+			const el = viewportRef.value;
+			if (el && el.scrollTop !== 0) el.scrollTop = 0;
+		}
+		function clampViewportScroll() {
+			if (!useVirtualScroll.value) return;
+			const totalHeight = flatNodes.value.length * rowHeight.value;
+			const maxScroll = Math.max(0, totalHeight - viewportHeightPx.value);
+			if (scrollTop.value <= maxScroll) return;
+			scrollTop.value = maxScroll;
+			const el = viewportRef.value;
+			if (el && el.scrollTop !== maxScroll) el.scrollTop = maxScroll;
+		}
+		const virtualSlice = computed(() => {
+			if (!useVirtualScroll.value) return {
+				nodes: flatNodes.value,
+				startIndex: 0,
+				paddingTop: 0,
+				paddingBottom: 0
+			};
+			return sliceVirtualTreeNodes(flatNodes.value, scrollTop.value, viewportHeightPx.value, rowHeight.value, props.overscan);
+		});
+		const visibleFlatNodes = computed(() => virtualSlice.value.nodes);
+		const isEmpty = computed(() => displayNodes.value.length === 0);
+		const showDragHandle = computed(() => props.draggable && props.dragTrigger === "handle");
+		const dragWholeRow = computed(() => props.draggable && props.dragTrigger === "row");
+		/** 限定高度或虚拟滚动时铺满父级，并用 ::before 捕获空白区右键（对齐 RsTable shell） */
+		const fillCapture = computed(() => props.virtual || props.height !== void 0);
+		const viewportStyle = computed(() => {
+			if (!useVirtualScroll.value && props.height === void 0) return void 0;
+			if (props.height !== void 0 && !isVirtualListFillHeight(props.height)) return { maxHeight: resolveVirtualListHeight(props.height, 320) };
+			if (isVirtualListFillHeight(props.height)) return {
+				height: "100%",
+				maxHeight: "100%"
+			};
+			return { maxHeight: `${_measuredHeight.value > 0 ? _measuredHeight.value : 320}px` };
+		});
+		const selectedSet = computed(() => {
+			if (props.multiple) return new Set(Array.isArray(model.value) ? model.value.map(String) : []);
+			return new Set(typeof model.value === "string" && model.value ? [model.value] : []);
+		});
+		watch(() => props.filter, (keyword, previousKeyword) => {
+			if (props.autoExpandParent) if (!keyword.trim()) {
+				if (expandedKeysBeforeFilter.value !== null) {
+					expandedKeys.value = expandedKeysBeforeFilter.value;
+					expandedKeysBeforeFilter.value = null;
+				}
+			} else {
+				if (expandedKeysBeforeFilter.value === null) expandedKeysBeforeFilter.value = [...expandedKeys.value];
+				const filtered = displayNodes.value;
+				if (filtered.length > 0) expandedKeys.value = collectExpandableKeys(filtered, fields.value, props.lazy);
+			}
+			if (previousKeyword === void 0) return;
+			nextTick(() => {
+				if (!alive) return;
+				resetViewportScroll();
+			});
+		}, { immediate: true });
+		watch(flatNodes, (nodes) => {
+			if (nodes.length === 0) {
+				focusedKey.value = null;
+				nextTick(() => {
+					if (!alive) return;
+					clampViewportScroll();
+				});
+				return;
+			}
+			if (!focusedKey.value || !nodes.some((item) => item.key === focusedKey.value)) focusedKey.value = nodes[0]?.key ?? null;
+			nextTick(() => {
+				if (!alive) return;
+				clampViewportScroll();
+			});
+		}, { immediate: true });
+		watch(() => props.nodes, () => {
+			dragKey.value = null;
+			dropTargetKey.value = null;
+		});
+		function setRowRef(key, element) {
+			if (element instanceof HTMLElement) rowRefs.value.set(key, element);
+			else rowRefs.value.delete(key);
+		}
+		function pruneRowRefs(nodes) {
+			const live = new Set(nodes.map((item) => item.key));
+			for (const key of rowRefs.value.keys()) if (!live.has(key)) rowRefs.value.delete(key);
+		}
+		watch(visibleFlatNodes, (nodes) => {
+			pruneRowRefs(nodes);
+		});
+		function itemDomId(key) {
+			return `${rootId.value}-item-${encodeURIComponent(key).replace(/%/g, "_")}`;
+		}
+		function isRtlHost() {
+			if (config) return resolveDirMode(config.dir.value, config.locale.value) === "rtl";
+			const dir = treeRootRef.value?.closest("[dir]")?.getAttribute("dir");
+			if (dir === "rtl") return true;
+			if (dir === "ltr") return false;
+			if (treeRootRef.value && typeof getComputedStyle === "function") return getComputedStyle(treeRootRef.value).direction === "rtl";
+			return false;
+		}
+		function scrollKeyIntoView(key) {
+			const index = flatNodes.value.findIndex((item) => item.key === key);
+			if (index < 0) return;
+			if (useVirtualScroll.value) {
+				const top = index * rowHeight.value;
+				const view = viewportHeightPx.value;
+				const current = scrollTop.value;
+				let next = current;
+				if (top < current) next = top;
+				else if (top + rowHeight.value > current + view) next = Math.max(0, top + rowHeight.value - view);
+				if (next !== current) {
+					scrollTop.value = next;
+					const el = viewportRef.value;
+					if (el && el.scrollTop !== next) el.scrollTop = next;
+				}
+				return;
+			}
+			rowRefs.value.get(key)?.scrollIntoView?.({ block: "nearest" });
+		}
+		async function scrollFocusedIntoView(key) {
+			await nextTick();
+			if (!alive) return;
+			scrollKeyIntoView(key);
+		}
+		function revealAncestors(key) {
+			const index = nodeIndex.value;
+			if (!index.has(key)) return;
+			const chain = [];
+			let parent = index.get(key)?.parentKey ?? null;
+			while (parent) {
+				chain.push(parent);
+				parent = index.get(parent)?.parentKey ?? null;
+			}
+			if (chain.length === 0) return;
+			const next = new Set(expandedKeys.value);
+			let changed = false;
+			for (const id of chain) if (!next.has(id)) {
+				next.add(id);
+				changed = true;
+			}
+			if (changed) expandedKeys.value = [...next];
+		}
+		function setExpanded(key, expanded) {
+			let next = [...expandedKeys.value];
+			if (expanded) next = props.accordion ? resolveAccordionExpandedKeys(key, next, nodeIndex.value, rootKeys.value) : [.../* @__PURE__ */ new Set([...next, key])];
+			else {
+				const set = new Set(next);
+				set.delete(key);
+				next = [...set];
+			}
+			expandedKeys.value = next;
+			emit("expand", key, expanded);
+		}
+		async function toggleExpanded(node, key) {
+			if (treeDisabled.value) return;
+			if (expandedSet.value.has(key)) {
+				setExpanded(key, false);
+				return;
+			}
+			if (props.lazy && props.loadData && hasTreeChildren(node, fields.value, true) && getTreeChildren(node, fields.value).length === 0) {
+				const nextLoading = new Set(loadingKeys.value);
+				nextLoading.add(key);
+				loadingKeys.value = nextLoading;
+				try {
+					await props.loadData(node, key);
+				} finally {
+					if (!alive) return;
+					const doneLoading = new Set(loadingKeys.value);
+					doneLoading.delete(key);
+					loadingKeys.value = doneLoading;
+				}
+			}
+			if (!alive) return;
+			setExpanded(key, true);
+		}
+		function selectNode(node, key) {
+			if (treeDisabled.value || !props.selectable || isTreeNodeDisabled(node, fields.value)) return;
+			if (props.multiple) {
+				const next = new Set(selectedSet.value);
+				if (next.has(key)) next.delete(key);
+				else next.add(key);
+				model.value = [...next];
+				return;
+			}
+			model.value = key;
+		}
+		function toggleCheck(node, key) {
+			if (treeDisabled.value || isTreeCheckboxDisabled(node, fields.value, checkboxOptions())) return;
+			const next = toggleTreeCheck(key, checkedSet.value, nodeIndex.value, props.checkStrictly, props.onlyCheckLeaf);
+			checkedKeys.value = next;
+			emit("check", next, halfCheckedKeys.value, node, key);
+		}
+		function handleNodeAction(node, key) {
+			if (treeDisabled.value) return;
+			emit("node-click", node, key);
+			focusedKey.value = key;
+			if (props.checkable && props.checkOnClickNode) {
+				toggleCheck(node, key);
+				if (!props.selectable && !props.expandOnClickNode) return;
+			}
+			if (props.expandOnClickNode && hasTreeChildren(node, fields.value, props.lazy)) {
+				toggleExpanded(node, key);
+				return;
+			}
+			if (props.selectable) selectNode(node, key);
+		}
+		function handleRowClick(node, key, event) {
+			if (event.target.closest(".rs-tree__toggle, .rs-tree__checkbox, .rs-tree__drag-handle")) return;
+			handleNodeAction(node, key);
+		}
+		function handleRowDblclick(node, key, event) {
+			if (treeDisabled.value) return;
+			if (event.target.closest(".rs-tree__toggle, .rs-tree__checkbox, .rs-tree__drag-handle")) return;
+			emit("node-dblclick", node, key);
+		}
+		function handleLabelClick(node, key, event) {
+			event.stopPropagation();
+			handleNodeAction(node, key);
+		}
+		/**
+		* 只给当前可见行算勾选态，模板里多次读取走 Map。
+		* 没有勾选项时不建索引。
+		*/
+		const checkStateMap = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			if (!props.checkable || checkedSet.value.size === 0) return map;
+			const index = nodeIndex.value;
+			for (const entry of visibleFlatNodes.value) map.set(entry.key, resolveTreeCheckState(entry.key, checkedSet.value, index, props.checkStrictly, props.onlyCheckLeaf));
+			return map;
+		});
+		function checkStateFor(key) {
+			return checkStateMap.value.get(key) ?? "unchecked";
+		}
+		function ariaChecked(key) {
+			if (!props.checkable) return void 0;
+			const state = checkStateFor(key);
+			if (state === "checked") return "true";
+			if (state === "indeterminate") return "mixed";
+			return "false";
+		}
+		function isSelected(key) {
+			return selectedSet.value.has(key);
+		}
+		function isExpanded(key) {
+			return expandedSet.value.has(key);
+		}
+		function isFocused(key) {
+			return focusedKey.value === key;
+		}
+		const labelPartsByKey = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			const keyword = props.filter.trim();
+			for (const entry of visibleFlatNodes.value) {
+				const label = getTreeLabel(entry.node, fields.value);
+				map.set(entry.key, !props.highlight || !keyword ? [{
+					text: label,
+					highlight: false
+				}] : splitTreeLabelHighlight(label, props.filter));
+			}
+			return map;
+		});
+		function labelParts(key) {
+			return labelPartsByKey.value.get(key) ?? [];
+		}
+		function rowIndentStyle(depth) {
+			return { paddingInlineStart: `${depth * indentPx.value}px` };
+		}
+		function expandAll() {
+			expandedKeys.value = collectExpandableKeys(displayNodes.value, fields.value, props.lazy);
+		}
+		function collapseAll() {
+			expandedKeys.value = [];
+		}
+		function expandNode(key) {
+			setExpanded(key, true);
+		}
+		function collapseNode(key) {
+			setExpanded(key, false);
+		}
+		function focusNode(key) {
+			focusedKey.value = key;
+			scrollFocusedIntoView(key);
+		}
+		function focus() {
+			treeRootRef.value?.focus();
+		}
+		function scrollToKey(key) {
+			if (!nodeIndex.value.has(key)) return;
+			revealAncestors(key);
+			focusedKey.value = key;
+			scrollFocusedIntoView(key);
+		}
+		function getSelectedKeys() {
+			if (props.multiple) return Array.isArray(model.value) ? model.value.map(String) : [];
+			return typeof model.value === "string" && model.value ? [model.value] : [];
+		}
+		function getCheckedKeys() {
+			return [...checkedKeys.value];
+		}
+		function getExpandedKeys() {
+			return [...expandedKeys.value];
+		}
+		function getHalfCheckedKeys() {
+			return [...halfCheckedKeys.value];
+		}
+		function moveFocus(move) {
+			const nextKey = resolveTreeFocusKey(flatNodes.value, focusedKey.value, move, nodeIndex.value);
+			if (!nextKey) return;
+			focusedKey.value = nextKey;
+			scrollFocusedIntoView(nextKey);
+		}
+		const TREE_NAVIGATION_KEYS = {
+			ArrowDown: "next",
+			ArrowUp: "prev",
+			Home: "first",
+			End: "last"
+		};
+		function handleTreeNavigationKey(event) {
+			const move = TREE_NAVIGATION_KEYS[event.key];
+			if (!move) return false;
+			event.preventDefault();
+			moveFocus(move);
+			return true;
+		}
+		function handleTreeArrowForward(event, entry, current) {
+			event.preventDefault();
+			if (entry.hasChildren && !isExpanded(current)) toggleExpanded(entry.node, current);
+			else moveFocus("next");
+		}
+		function handleTreeArrowBackward(event, entry, current) {
+			event.preventDefault();
+			if (entry.hasChildren && isExpanded(current)) setExpanded(current, false);
+			else moveFocus("parent");
+		}
+		function expandSiblingBranches(current) {
+			if (props.accordion || treeDisabled.value) return;
+			const index = nodeIndex.value;
+			const parentKey = index.get(current)?.parentKey ?? null;
+			const siblings = parentKey ? index.get(parentKey)?.childrenKeys ?? [] : rootKeys.value;
+			const next = new Set(expandedKeys.value);
+			let changed = false;
+			for (const sibling of siblings) {
+				const entry = index.get(sibling);
+				if (!entry || entry.childrenKeys.length === 0 || next.has(sibling)) continue;
+				next.add(sibling);
+				changed = true;
+			}
+			if (changed) expandedKeys.value = [...next];
+		}
+		function handleTypeahead(event) {
+			if (event.isComposing || event.key === "Process") return false;
+			if (event.altKey || event.ctrlKey || event.metaKey) return false;
+			if (event.key.length !== 1) return false;
+			event.preventDefault();
+			typeaheadQuery = `${typeaheadQuery}${event.key}`.slice(-32);
+			if (typeaheadTimer != null) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadTimer = null;
+				typeaheadQuery = "";
+			}, 500);
+			const nextKey = resolveTreeTypeaheadKey(flatNodes.value, focusedKey.value, typeaheadQuery, fields.value);
+			if (!nextKey) return true;
+			focusedKey.value = nextKey;
+			scrollFocusedIntoView(nextKey);
+			return true;
+		}
+		function isInnerControlTarget(event) {
+			const target = event.target;
+			if (!(target instanceof Element)) return false;
+			return Boolean(target.closest(".rs-tree__label, .rs-tree__toggle, .rs-tree__checkbox"));
+		}
+		function handleKeydown(event) {
+			if (treeDisabled.value) return;
+			if ((event.key === "Enter" || event.key === " ") && isInnerControlTarget(event)) return;
+			if (handleTreeNavigationKey(event)) return;
+			const current = focusedKey.value;
+			if (!current) return;
+			const entry = flatNodes.value.find((item) => item.key === current);
+			if (!entry) return;
+			const forward = isRtlHost() ? "ArrowLeft" : "ArrowRight";
+			const backward = isRtlHost() ? "ArrowRight" : "ArrowLeft";
+			if (event.key === forward) {
+				handleTreeArrowForward(event, entry, current);
+				return;
+			}
+			if (event.key === backward) {
+				handleTreeArrowBackward(event, entry, current);
+				return;
+			}
+			if (event.key === "*") {
+				event.preventDefault();
+				expandSiblingBranches(current);
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				handleNodeAction(entry.node, current);
+				return;
+			}
+			handleTypeahead(event);
+		}
+		function canDrop(drag, drop, position) {
+			if (drag === drop) return false;
+			if (isTreeAncestorKey(drag, drop, nodeIndex.value)) return false;
+			if (props.allowDrop) return props.allowDrop(drag, drop, position);
+			return true;
+		}
+		function resolveDropPosition(event, element) {
+			const rect = element.getBoundingClientRect();
+			const offset = event.clientY - rect.top;
+			if (offset < rect.height * .25) return "before";
+			if (offset > rect.height * .75) return "after";
+			return "inside";
+		}
+		function onDragStart(key, event) {
+			if (treeDisabled.value || !props.draggable) return;
+			dragKey.value = key;
+			if (!event.dataTransfer) return;
+			event.dataTransfer.setData("text/plain", key);
+			event.dataTransfer.effectAllowed = "move";
+		}
+		function onDragOver(key, event) {
+			if (treeDisabled.value || !props.draggable || !dragKey.value) return;
+			const row = event.currentTarget;
+			const position = resolveDropPosition(event, row);
+			if (!canDrop(dragKey.value, key, position)) return;
+			event.preventDefault();
+			dropTargetKey.value = key;
+			dropPosition.value = position;
+		}
+		function onDragLeave() {
+			dropTargetKey.value = null;
+		}
+		function onDrop(key, event) {
+			if (treeDisabled.value || !props.draggable || !dragKey.value) return;
+			const row = event.currentTarget;
+			const position = resolveDropPosition(event, row);
+			event.preventDefault();
+			if (!canDrop(dragKey.value, key, position)) return;
+			emit("node-drop", dragKey.value, key, position);
+			dragKey.value = null;
+			dropTargetKey.value = null;
+		}
+		function onDragEnd() {
+			dragKey.value = null;
+			dropTargetKey.value = null;
+		}
+		function onViewportScroll(event) {
+			scrollTop.value = event.target.scrollTop;
+		}
+		__expose({
+			expandAll,
+			collapseAll,
+			expandNode,
+			collapseNode,
+			focusNode,
+			focus,
+			scrollToKey,
+			getSelectedKeys,
+			getCheckedKeys,
+			getExpandedKeys,
+			getHalfCheckedKeys
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: rootId.value,
+				ref_key: "treeRootRef",
+				ref: treeRootRef,
+				class: normalizeClass(["rs-tree rs-motion-reduce", [`rs-tree--${unref(resolvedSize)}`, {
+					"rs-tree--virtual": useVirtualScroll.value,
+					"rs-tree--fill-capture": fillCapture.value,
+					"rs-tree--block": __props.blockNode,
+					"rs-tree--line": __props.showLine,
+					"rs-tree--draggable": __props.draggable,
+					"rs-tree--drag-row": dragWholeRow.value,
+					"rs-tree--disabled": treeDisabled.value
+				}]]),
+				role: "tree",
+				tabindex: treeDisabled.value ? -1 : 0,
+				"aria-label": treeLabel.value,
+				"aria-disabled": treeDisabled.value || void 0,
+				"aria-multiselectable": __props.multiple || __props.checkable || void 0,
+				"aria-activedescendant": focusedKey.value ? itemDomId(focusedKey.value) : void 0,
+				onKeydown: handleKeydown
+			}, [isEmpty.value ? renderSlot(_ctx.$slots, "empty", {}, () => [createVNode(RsEmpty_default, {
+				fill: "",
+				class: "rs-tree__empty",
+				description: unref(t)("tree.empty")
+			}, null, 8, ["description"])], true, 0) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				ref_key: "viewportRef",
+				ref: viewportRef,
+				class: normalizeClass(["rs-tree__viewport", { "rs-tree__viewport--scroll rs-native-scrollbar": useVirtualScroll.value || __props.height !== void 0 }]),
+				style: normalizeStyle(viewportStyle.value),
+				onScroll: onViewportScroll
+			}, [
+				useVirtualScroll.value && virtualSlice.value.paddingTop > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "rs-tree__pad",
+					style: normalizeStyle({ height: `${virtualSlice.value.paddingTop}px` }),
+					"aria-hidden": "true"
+				}, null, 4)) : createCommentVNode("", true),
+				createElementVNode("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleFlatNodes.value, (entry) => {
+					return openBlock(), createElementBlock("li", {
+						key: `${entry.parentKey ?? "root"}:${entry.key}`,
+						class: "rs-tree__item"
+					}, [createElementVNode("div", {
+						id: itemDomId(entry.key),
+						ref_for: true,
+						ref: (el) => setRowRef(entry.key, el),
+						class: normalizeClass(["rs-tree__row", {
+							"rs-tree__row--selected": __props.selectable && isSelected(entry.key),
+							"rs-tree__row--focused": isFocused(entry.key),
+							"rs-tree__row--disabled": unref(isTreeNodeDisabled)(entry.node, fields.value),
+							"rs-tree__row--drop-before": dropTargetKey.value === entry.key && dropPosition.value === "before",
+							"rs-tree__row--drop-inside": dropTargetKey.value === entry.key && dropPosition.value === "inside",
+							"rs-tree__row--drop-after": dropTargetKey.value === entry.key && dropPosition.value === "after",
+							"rs-tree__row--last": __props.showLine && entry.isLast
+						}]),
+						role: "treeitem",
+						tabindex: "-1",
+						"aria-expanded": entry.hasChildren ? isExpanded(entry.key) : void 0,
+						"aria-selected": __props.selectable ? isSelected(entry.key) : void 0,
+						"aria-checked": __props.checkable && unref(shouldShowTreeCheckbox)(entry.node, fields.value, checkboxOptions()) ? ariaChecked(entry.key) : void 0,
+						"aria-disabled": treeDisabled.value || unref(isTreeNodeDisabled)(entry.node, fields.value) || void 0,
+						"aria-busy": unref(isTreeNodeLoading)(entry.node, entry.key, loadingKeys.value, fields.value) || void 0,
+						"aria-level": entry.depth + 1,
+						"aria-setsize": entry.setSize,
+						"aria-posinset": entry.posInSet,
+						draggable: __props.draggable && !unref(isTreeNodeDisabled)(entry.node, fields.value),
+						"data-tree-key": entry.key,
+						style: normalizeStyle([rowIndentStyle(entry.depth), { minHeight: `${rowHeight.value}px` }]),
+						onContextmenu: ($event) => emit("node-contextmenu", entry.node, entry.key, $event),
+						onDragstart: ($event) => onDragStart(entry.key, $event),
+						onDragover: ($event) => onDragOver(entry.key, $event),
+						onDragleave: onDragLeave,
+						onDrop: ($event) => onDrop(entry.key, $event),
+						onDragend: onDragEnd,
+						onClick: ($event) => __props.blockNode ? handleRowClick(entry.node, entry.key, $event) : void 0,
+						onDblclick: ($event) => handleRowDblclick(entry.node, entry.key, $event)
+					}, [
+						__props.showLine ? (openBlock(), createElementBlock("span", _hoisted_4, [
+							(openBlock(true), createElementBlock(Fragment, null, renderList(entry.levelLines, (draw, level) => {
+								return withDirectives((openBlock(), createElementBlock("span", {
+									key: `v-${level}`,
+									class: "rs-tree__line-vert",
+									style: normalizeStyle({ insetInlineStart: `${level * indentPx.value + indentPx.value / 2}px` })
+								}, null, 4)), [[vShow, draw]]);
+							}), 128)),
+							createElementVNode("span", {
+								class: normalizeClass(["rs-tree__line-vert rs-tree__line-vert--self", { "rs-tree__line-vert--end": entry.isLast }]),
+								style: normalizeStyle({ insetInlineStart: `${entry.depth * indentPx.value + indentPx.value / 2}px` })
+							}, null, 6),
+							createElementVNode("span", {
+								class: "rs-tree__line-horz",
+								style: normalizeStyle({
+									insetInlineStart: `${entry.depth * indentPx.value + indentPx.value / 2}px`,
+									width: `${indentPx.value / 2}px`
+								})
+							}, null, 4)
+						])) : createCommentVNode("", true),
+						showDragHandle.value ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: "rs-tree__drag-handle",
+							title: unref(t)("tree.drag"),
+							"aria-hidden": "true"
+						}, [createVNode(RsIcon_default, {
+							name: "grip-vertical",
+							size: "sm"
+						})], 8, _hoisted_5)) : createCommentVNode("", true),
+						entry.hasChildren ? (openBlock(), createElementBlock("button", {
+							key: 2,
+							type: "button",
+							class: normalizeClass(["rs-tree__toggle", { "rs-tree__toggle--expanded": isExpanded(entry.key) }]),
+							tabindex: "-1",
+							"aria-label": isExpanded(entry.key) ? unref(t)("tree.collapse") : unref(t)("tree.expand"),
+							"aria-expanded": isExpanded(entry.key),
+							disabled: treeDisabled.value || unref(isTreeNodeLoading)(entry.node, entry.key, loadingKeys.value, fields.value),
+							onClick: withModifiers(($event) => toggleExpanded(entry.node, entry.key), ["stop"])
+						}, [unref(isTreeNodeLoading)(entry.node, entry.key, loadingKeys.value, fields.value) ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: "loader",
+							size: "sm",
+							class: "rs-tree__loading-icon",
+							spin: ""
+						})) : (openBlock(), createElementBlock("span", _hoisted_7, "›"))], 10, _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_8)),
+						__props.checkable && unref(shouldShowTreeCheckbox)(entry.node, fields.value, checkboxOptions()) ? (openBlock(), createElementBlock("label", {
+							key: 4,
+							class: normalizeClass(["rs-tree__checkbox", {
+								"rs-tree__checkbox--checked": checkStateFor(entry.key) === "checked",
+								"rs-tree__checkbox--indeterminate": checkStateFor(entry.key) === "indeterminate"
+							}])
+						}, [createElementVNode("input", {
+							type: "checkbox",
+							class: "rs-tree__checkbox-input",
+							tabindex: "-1",
+							checked: checkStateFor(entry.key) === "checked",
+							indeterminate: checkStateFor(entry.key) === "indeterminate",
+							disabled: treeDisabled.value || unref(isTreeCheckboxDisabled)(entry.node, fields.value, checkboxOptions()),
+							"aria-label": unref(t)("tree.check"),
+							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+							onChange: ($event) => toggleCheck(entry.node, entry.key)
+						}, null, 40, _hoisted_9), _cache[1] || (_cache[1] = createElementVNode("span", {
+							class: "rs-tree__checkbox-box",
+							"aria-hidden": "true"
+						}, null, -1))], 2)) : __props.checkable && __props.onlyCheckLeaf && unref(hasTreeChildren)(entry.node, fields.value, __props.lazy) ? (openBlock(), createElementBlock("span", _hoisted_10)) : createCommentVNode("", true),
+						_ctx.$slots.icon || entry.node[fields.value.icon] || entry.node.icon ? renderSlot(_ctx.$slots, "icon", {
+							node: entry.node,
+							key: entry.key,
+							expanded: isExpanded(entry.key)
+						}, () => [entry.node[fields.value.icon] || entry.node.icon ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: String(entry.node[fields.value.icon] ?? entry.node.icon),
+							size: "sm",
+							class: "rs-tree__node-icon"
+						}, null, 8, ["name"])) : createCommentVNode("", true)], true) : createCommentVNode("", true),
+						!__props.blockNode ? (openBlock(), createElementBlock("button", {
+							key: 7,
+							type: "button",
+							class: "rs-tree__label",
+							tabindex: "-1",
+							disabled: treeDisabled.value || unref(isTreeNodeDisabled)(entry.node, fields.value),
+							onClick: ($event) => handleLabelClick(entry.node, entry.key, $event)
+						}, [renderSlot(_ctx.$slots, "title", {
+							node: entry.node,
+							key: entry.key,
+							label: unref(getTreeLabel)(entry.node, fields.value),
+							expanded: isExpanded(entry.key),
+							selected: isSelected(entry.key),
+							checkState: checkStateFor(entry.key),
+							depth: entry.depth,
+							focused: isFocused(entry.key)
+						}, () => [createElementVNode("span", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(labelParts(entry.key), (part, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_13, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))])], true)], 8, _hoisted_11)) : (openBlock(), createElementBlock("span", {
+							key: 8,
+							class: normalizeClass(["rs-tree__label rs-tree__label--block", { "rs-tree__label--disabled": unref(isTreeNodeDisabled)(entry.node, fields.value) }])
+						}, [renderSlot(_ctx.$slots, "title", {
+							node: entry.node,
+							key: entry.key,
+							label: unref(getTreeLabel)(entry.node, fields.value),
+							expanded: isExpanded(entry.key),
+							selected: isSelected(entry.key),
+							checkState: checkStateFor(entry.key),
+							depth: entry.depth,
+							focused: isFocused(entry.key)
+						}, () => [createElementVNode("span", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(labelParts(entry.key), (part, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_15, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))])], true)], 2))
+					], 46, _hoisted_3)]);
+				}), 128))]),
+				useVirtualScroll.value && virtualSlice.value.paddingBottom > 0 ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "rs-tree__pad",
+					style: normalizeStyle({ height: `${virtualSlice.value.paddingBottom}px` }),
+					"aria-hidden": "true"
+				}, null, 4)) : createCommentVNode("", true)
+			], 38))], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsTree_vue_vue_type_script_setup_true_lang_default as default };