niuma-ui 1.3.8 → 2.0.0

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

@@ -0,0 +1,762 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.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, 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, useModel, vShow, watch, withDirectives, withModifiers } from "vue";
+//#region src/components/tree/src/RsTree.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-multiselectable"];
+var _hoisted_2 = { class: "rs-tree__list" };
+var _hoisted_3 = [
+	"tabindex",
+	"aria-expanded",
+	"aria-selected",
+	"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 = ["aria-label"];
+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",
+	"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: { default: "md" },
+		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 fields = computed(() => resolveTreeFieldNames(props.fieldNames));
+		const rowHeight = computed(() => resolveTreeRowHeight(props.size, 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;
+		onMounted(() => {
+			if (!props.virtual || !treeRootRef.value) return;
+			if (props.height !== void 0 && !isVirtualListFillHeight(props.height)) return;
+			_heightObs = new ResizeObserver((entries) => {
+				_measuredHeight.value = entries[0]?.contentRect.height ?? 0;
+			});
+			_heightObs.observe(treeRootRef.value);
+			_measuredHeight.value = treeRootRef.value.clientHeight;
+		});
+		onUnmounted(() => {
+			_heightObs?.disconnect();
+			_heightObs = null;
+		});
+		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(() => {
+				resetViewportScroll();
+			});
+		}, { immediate: true });
+		watch(flatNodes, (nodes) => {
+			if (nodes.length === 0) {
+				focusedKey.value = null;
+				nextTick(() => {
+					clampViewportScroll();
+				});
+				return;
+			}
+			if (!focusedKey.value || !nodes.some((item) => item.key === focusedKey.value)) focusedKey.value = nodes[0]?.key ?? null;
+			nextTick(() => {
+				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);
+		}
+		async function scrollFocusedIntoView(key) {
+			await nextTick();
+			rowRefs.value.get(key)?.scrollIntoView?.({ block: "nearest" });
+		}
+		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 (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 {
+					const doneLoading = new Set(loadingKeys.value);
+					doneLoading.delete(key);
+					loadingKeys.value = doneLoading;
+				}
+			}
+			setExpanded(key, true);
+		}
+		function selectNode(node, key) {
+			if (!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 (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) {
+			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 (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);
+		}
+		/** 逐行渲染都会调用（含 title 插槽的 check-state）；无勾选项时全部为 unchecked，不必建索引 */
+		function checkStateFor(key) {
+			if (checkedSet.value.size === 0) return "unchecked";
+			return resolveTreeCheckState(key, checkedSet.value, nodeIndex.value, props.checkStrictly, props.onlyCheckLeaf);
+		}
+		function isSelected(key) {
+			return selectedSet.value.has(key);
+		}
+		function isExpanded(key) {
+			return expandedSet.value.has(key);
+		}
+		function isFocused(key) {
+			return focusedKey.value === key;
+		}
+		function labelParts(node) {
+			const label = getTreeLabel(node, fields.value);
+			if (!props.highlight || !props.filter.trim()) return [{
+				text: label,
+				highlight: false
+			}];
+			return splitTreeLabelHighlight(label, props.filter);
+		}
+		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 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 handleTreeArrowRight(event, entry, current) {
+			event.preventDefault();
+			if (entry.hasChildren && !isExpanded(current)) toggleExpanded(entry.node, current);
+			else moveFocus("next");
+		}
+		function handleTreeArrowLeft(event, entry, current) {
+			event.preventDefault();
+			if (entry.hasChildren && isExpanded(current)) setExpanded(current, false);
+			else moveFocus("parent");
+		}
+		function handleTreeEntryKeydown(event, entry, current) {
+			const key = event.key;
+			if (key === "ArrowRight") {
+				handleTreeArrowRight(event, entry, current);
+				return;
+			}
+			if (key === "ArrowLeft") {
+				handleTreeArrowLeft(event, entry, current);
+				return;
+			}
+			if (key === "Enter" || key === " ") {
+				event.preventDefault();
+				handleNodeAction(entry.node, current);
+			}
+		}
+		function handleKeydown(event) {
+			if (handleTreeNavigationKey(event)) return;
+			const current = focusedKey.value;
+			if (!current) return;
+			const entry = flatNodes.value.find((item) => item.key === current);
+			if (!entry) return;
+			handleTreeEntryKeydown(event, entry, current);
+		}
+		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 (!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 (!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 (!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
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "treeRootRef",
+				ref: treeRootRef,
+				class: normalizeClass(["rs-tree", [`rs-tree--${__props.size}`, {
+					"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
+				}]]),
+				role: "tree",
+				tabindex: "0",
+				"aria-label": unref(t)("tree.label"),
+				"aria-multiselectable": __props.multiple || __props.checkable || void 0,
+				onKeydown: handleKeydown
+			}, [isEmpty.value ? (openBlock(), createBlock(RsEmpty_default, {
+				key: 0,
+				fill: "",
+				class: "rs-tree__empty",
+				description: unref(t)("tree.empty")
+			}, null, 8, ["description"])) : (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, entryIndex) => {
+					return openBlock(), createElementBlock("li", {
+						key: `${entry.parentKey ?? "root"}:${entry.key}`,
+						class: "rs-tree__item"
+					}, [createElementVNode("div", {
+						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: isFocused(entry.key) ? 0 : -1,
+						"aria-expanded": entry.hasChildren ? isExpanded(entry.key) : void 0,
+						"aria-selected": __props.selectable ? isSelected(entry.key) : void 0,
+						"aria-level": entry.depth + 1,
+						"aria-setsize": flatNodes.value.length,
+						"aria-posinset": virtualSlice.value.startIndex + entryIndex + 1,
+						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),
+						onKeydown: handleKeydown,
+						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",
+							"aria-label": 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) }]),
+							"aria-label": isExpanded(entry.key) ? unref(t)("tree.collapse") : unref(t)("tree.expand"),
+							"aria-expanded": isExpanded(entry.key),
+							disabled: 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",
+							checked: checkStateFor(entry.key) === "checked",
+							disabled: 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),
+						entry.node[fields.value.icon] || entry.node.icon ? (openBlock(), createBlock(RsIcon_default, {
+							key: 6,
+							name: String(entry.node[fields.value.icon] ?? entry.node.icon),
+							size: "sm",
+							class: "rs-tree__node-icon"
+						}, null, 8, ["name"])) : createCommentVNode("", true),
+						!__props.blockNode ? (openBlock(), createElementBlock("button", {
+							key: 7,
+							type: "button",
+							class: "rs-tree__label",
+							disabled: 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.node), (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.node), (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 };