niuma-ui 2.0.4 → 2.1.0

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

@@ -1,16 +1,30 @@
+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, resolveTreeVirtualEnabled, shouldShowTreeCheckbox, sliceVirtualTreeNodes, splitTreeLabelHighlight, toggleTreeCheck } from "./tree-utils.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, useModel, vShow, watch, withDirectives, withModifiers } from "vue";
+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 = ["aria-label", "aria-multiselectable"];
+var _hoisted_1 = [
+	"id",
+	"tabindex",
+	"aria-label",
+	"aria-disabled",
+	"aria-multiselectable",
+	"aria-activedescendant"
+];
 var _hoisted_2 = { class: "rs-tree__list" };
 var _hoisted_3 = [
-	"tabindex",
+	"id",
 	"aria-expanded",
 	"aria-selected",
+	"aria-checked",
+	"aria-disabled",
+	"aria-busy",
 	"aria-level",
 	"aria-setsize",
 	"aria-posinset",
@@ -28,7 +42,7 @@ var _hoisted_4 = {
 	class: "rs-tree__lines",
 	"aria-hidden": "true"
 };
-var _hoisted_5 = ["aria-label"];
+var _hoisted_5 = ["title"];
 var _hoisted_6 = [
 	"aria-label",
 	"aria-expanded",
@@ -47,6 +61,7 @@ var _hoisted_8 = {
 };
 var _hoisted_9 = [
 	"checked",
+	"indeterminate",
 	"disabled",
 	"aria-label",
 	"onChange"
@@ -73,7 +88,13 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 	props: /*@__PURE__*/ mergeModels({
 		nodes: {},
 		fieldNames: {},
-		size: { default: "md" },
+		size: {},
+		id: {},
+		ariaLabel: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
 		multiple: {
 			type: Boolean,
 			default: false
@@ -180,25 +201,57 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		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(props.size, props.itemHeight));
+		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;
-		onMounted(() => {
-			if (!props.virtual || !treeRootRef.value) return;
-			if (props.height !== void 0 && !isVirtualListFillHeight(props.height)) return;
+		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(treeRootRef.value);
-			_measuredHeight.value = treeRootRef.value.clientHeight;
+			_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]);
 		/** 进入过滤前的展开快照；清空过滤时还原，避免无匹配时被清空后无法恢复 */
@@ -325,6 +378,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			}
 			if (previousKeyword === void 0) return;
 			nextTick(() => {
+				if (!alive) return;
 				resetViewportScroll();
 			});
 		}, { immediate: true });
@@ -332,12 +386,14 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			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 });
@@ -349,9 +405,65 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			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();
-			rowRefs.value.get(key)?.scrollIntoView?.({ block: "nearest" });
+			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];
@@ -365,6 +477,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			emit("expand", key, expanded);
 		}
 		async function toggleExpanded(node, key) {
+			if (treeDisabled.value) return;
 			if (expandedSet.value.has(key)) {
 				setExpanded(key, false);
 				return;
@@ -376,15 +489,17 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				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 (!props.selectable || isTreeNodeDisabled(node, fields.value)) return;
+			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);
@@ -395,12 +510,13 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			model.value = key;
 		}
 		function toggleCheck(node, key) {
-			if (isTreeCheckboxDisabled(node, fields.value, checkboxOptions())) return;
+			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) {
@@ -418,6 +534,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			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);
 		}
@@ -425,10 +542,26 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			event.stopPropagation();
 			handleNodeAction(node, key);
 		}
-		/** 逐行渲染都会调用（含 title 插槽的 check-state）；无勾选项时全部为 unchecked，不必建索引 */
+		/**
+		* 只给当前可见行算勾选态，模板里多次读取走 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) {
-			if (checkedSet.value.size === 0) return "unchecked";
-			return resolveTreeCheckState(key, checkedSet.value, nodeIndex.value, props.checkStrictly, props.onlyCheckLeaf);
+			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);
@@ -439,13 +572,20 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		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);
+		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` };
@@ -466,6 +606,28 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			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;
@@ -485,38 +647,82 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			moveFocus(move);
 			return true;
 		}
-		function handleTreeArrowRight(event, entry, current) {
+		function handleTreeArrowForward(event, entry, current) {
 			event.preventDefault();
 			if (entry.hasChildren && !isExpanded(current)) toggleExpanded(entry.node, current);
 			else moveFocus("next");
 		}
-		function handleTreeArrowLeft(event, entry, current) {
+		function handleTreeArrowBackward(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 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;
-			handleTreeEntryKeydown(event, entry, current);
+			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;
@@ -532,14 +738,14 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			return "inside";
 		}
 		function onDragStart(key, event) {
-			if (!props.draggable) return;
+			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 (!props.draggable || !dragKey.value) return;
+			if (treeDisabled.value || !props.draggable || !dragKey.value) return;
 			const row = event.currentTarget;
 			const position = resolveDropPosition(event, row);
 			if (!canDrop(dragKey.value, key, position)) return;
@@ -551,7 +757,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			dropTargetKey.value = null;
 		}
 		function onDrop(key, event) {
-			if (!props.draggable || !dragKey.value) return;
+			if (treeDisabled.value || !props.draggable || !dragKey.value) return;
 			const row = event.currentTarget;
 			const position = resolveDropPosition(event, row);
 			event.preventDefault();
@@ -572,31 +778,40 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			collapseAll,
 			expandNode,
 			collapseNode,
-			focusNode
+			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-tree--${__props.size}`, {
+				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--drag-row": dragWholeRow.value,
+					"rs-tree--disabled": treeDisabled.value
 				}]]),
 				role: "tree",
-				tabindex: "0",
-				"aria-label": unref(t)("tree.label"),
+				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 ? (openBlock(), createBlock(RsEmpty_default, {
-				key: 0,
+			}, [isEmpty.value ? renderSlot(_ctx.$slots, "empty", {}, () => [createVNode(RsEmpty_default, {
 				fill: "",
 				class: "rs-tree__empty",
 				description: unref(t)("tree.empty")
-			}, null, 8, ["description"])) : (openBlock(), createElementBlock("div", {
+			}, null, 8, ["description"])], true, 0) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				ref_key: "viewportRef",
 				ref: viewportRef,
@@ -610,11 +825,12 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					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) => {
+				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", {
@@ -627,17 +843,19 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							"rs-tree__row--last": __props.showLine && entry.isLast
 						}]),
 						role: "treeitem",
-						tabindex: isFocused(entry.key) ? 0 : -1,
+						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": flatNodes.value.length,
-						"aria-posinset": virtualSlice.value.startIndex + entryIndex + 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),
-						onKeydown: handleKeydown,
 						onDragstart: ($event) => onDragStart(entry.key, $event),
 						onDragover: ($event) => onDragOver(entry.key, $event),
 						onDragleave: onDragLeave,
@@ -669,7 +887,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 						showDragHandle.value ? (openBlock(), createElementBlock("span", {
 							key: 1,
 							class: "rs-tree__drag-handle",
-							"aria-label": unref(t)("tree.drag"),
+							title: unref(t)("tree.drag"),
 							"aria-hidden": "true"
 						}, [createVNode(RsIcon_default, {
 							name: "grip-vertical",
@@ -679,9 +897,10 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							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: unref(isTreeNodeLoading)(entry.node, entry.key, loadingKeys.value, fields.value),
+							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,
@@ -699,8 +918,10 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 						}, [createElementVNode("input", {
 							type: "checkbox",
 							class: "rs-tree__checkbox-input",
+							tabindex: "-1",
 							checked: checkStateFor(entry.key) === "checked",
-							disabled: unref(isTreeCheckboxDisabled)(entry.node, fields.value, checkboxOptions()),
+							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)
@@ -708,17 +929,22 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							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,
+						_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),
+						}, null, 8, ["name"])) : createCommentVNode("", true)], true) : createCommentVNode("", true),
 						!__props.blockNode ? (openBlock(), createElementBlock("button", {
 							key: 7,
 							type: "button",
 							class: "rs-tree__label",
-							disabled: unref(isTreeNodeDisabled)(entry.node, fields.value),
+							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,
@@ -729,7 +955,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							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) => {
+						}, () => [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,
@@ -743,7 +969,7 @@ var RsTree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							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) => {
+						}, () => [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)]);

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

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsTree_vue_vue_type_script_setup_true_lang_default from "./RsTree.impl.js";
 
 //#region src/components/tree/src/RsTree.vue
-var RsTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsTree_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-59bbd9de"]]);
+var RsTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsTree_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ef7566eb"]]);
 //#endregion
 export { RsTree_default as default };