@v-c/tree 0.0.2 → 1.0.0

package/dist/MotionTreeNode.cjs

@@ -70,7 +70,7 @@ var MotionTreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 		if (targetVisible.value === newVisible) triggerMotionEnd();
 	};
 	return () => {
-		const { motionNodes, treeNodeRequiredProps, active, motion, motionType } = props;
+		const { motionNodes, treeNodeRequiredProps, active, motion, motionType, treeId } = props;
 		if (motionNodes) {
 			const _motionNodes = motionNodes ?? [];
 			const requiredProps = treeNodeRequiredProps;
@@ -95,7 +95,8 @@ var MotionTreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 					"data": nodeData,
 					"key": key,
 					"isStart": isStart,
-					"isEnd": isEnd
+					"isEnd": isEnd,
+					"treeId": treeId
 				}), null);
 			})])] });
 		}
@@ -145,6 +146,11 @@ var MotionTreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 			required: true,
 			default: void 0
 		},
+		treeId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		eventKey: {
 			type: [String, Number],
 			required: false,

package/dist/MotionTreeNode.d.ts

@@ -9,6 +9,7 @@ export interface MotionTreeNodeProps extends Omit<TreeNodeProps, 'domRef'> {
     onMotionStart?: () => void;
     onMotionEnd?: () => void;
     treeNodeRequiredProps: TreeNodeRequiredProps;
+    treeId?: string;
 }
 declare const MotionTreeNode: import('vue').DefineSetupFnComponent<MotionTreeNodeProps, {}, {}, MotionTreeNodeProps & {}, import('vue').PublicProps>;
 export default MotionTreeNode;

package/dist/MotionTreeNode.js

@@ -64,7 +64,7 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
 		if (targetVisible.value === newVisible) triggerMotionEnd();
 	};
 	return () => {
-		const { motionNodes, treeNodeRequiredProps, active, motion, motionType } = props;
+		const { motionNodes, treeNodeRequiredProps, active, motion, motionType, treeId } = props;
 		if (motionNodes) {
 			const _motionNodes = motionNodes ?? [];
 			const requiredProps = treeNodeRequiredProps;
@@ -89,7 +89,8 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
 					"data": nodeData,
 					"key": key,
 					"isStart": isStart,
-					"isEnd": isEnd
+					"isEnd": isEnd,
+					"treeId": treeId
 				}), null);
 			})])] });
 		}
@@ -139,6 +140,11 @@ var MotionTreeNode_default = /* @__PURE__ */ defineComponent((props) => {
 			required: true,
 			default: void 0
 		},
+		treeId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		eventKey: {
 			type: [String, Number],
 			required: false,

package/dist/NodeList.cjs

@@ -8,32 +8,14 @@ const require_MotionTreeNode = require("./MotionTreeNode.cjs");
 const require_diffUtil = require("./utils/diffUtil.cjs");
 let vue = require("vue");
 let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util_dist_hooks_useId = require("@v-c/util/dist/hooks/useId");
+_v_c_util_dist_hooks_useId = require_rolldown_runtime.__toESM(_v_c_util_dist_hooks_useId);
 let _v_c_virtual_list = require("@v-c/virtual-list");
 _v_c_virtual_list = require_rolldown_runtime.__toESM(_v_c_virtual_list);
-var HIDDEN_STYLE = {
-	width: 0,
-	height: 0,
-	display: "flex",
-	overflow: "hidden",
-	opacity: 0,
-	border: 0,
-	padding: 0,
-	margin: 0
-};
-function noop() {}
 function itemKey(item) {
 	const { key, pos } = item;
 	return String(require_treeUtil.getKey(key, pos));
 }
-function getAccessibilityPath(item) {
-	let path = String(item.data.key);
-	let current = item;
-	while (current.parent) {
-		current = current.parent;
-		path = `${current.data.key} > ${path}`;
-	}
-	return path;
-}
 const MOTION_KEY = `VC_TREE_MOTION_${Math.random()}`;
 var MotionNode = { key: MOTION_KEY };
 const MotionEntity = {
@@ -59,6 +41,7 @@ function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {
 	return list.slice(0, Math.ceil(height / itemHeight) + 1);
 }
 var NodeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose }) => {
+	const treeId = (0, _v_c_util_dist_hooks_useId.default)();
 	const listRef = (0, vue.ref)();
 	const indentMeasurerRef = (0, vue.ref)();
 	const { expandedKeys, data } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "expandedKeys", "data");
@@ -130,81 +113,69 @@ var NodeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose
 	});
 	const mergedData = (0, vue.computed)(() => props.motion ? transitionData.value : props.data || []);
 	return () => {
-		const { motion, focused, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
-		return (0, vue.createVNode)(vue.Fragment, null, [
-			focused && activeItem && (0, vue.createVNode)("span", {
-				"style": HIDDEN_STYLE,
-				"aria-live": "assertive"
-			}, [getAccessibilityPath(activeItem)]),
-			(0, vue.createVNode)("div", null, [(0, vue.createVNode)("input", {
-				"style": HIDDEN_STYLE,
-				"disabled": focusable === false || disabled,
-				"tabindex": focusable !== false ? tabIndex : void 0,
-				"onKeydown": onKeyDown,
-				"onFocus": onFocus,
-				"onBlur": onBlur,
-				"value": "",
-				"onInput": noop,
-				"aria-label": "for screen reader"
-			}, null)]),
-			(0, vue.createVNode)("div", {
-				"class": `${prefixCls}-treenode`,
-				"aria-hidden": true,
-				"style": {
-					position: "absolute",
-					pointerEvents: "none",
-					visibility: "hidden",
-					height: 0,
-					overflow: "hidden",
-					border: 0,
-					padding: 0
-				}
-			}, [(0, vue.createVNode)("div", { "class": `${prefixCls}-indent` }, [(0, vue.createVNode)("div", {
-				"ref": indentMeasurerRef,
-				"class": `${prefixCls}-indent-unit`
-			}, null)])]),
-			(0, vue.createVNode)(VirtualListAny, (0, vue.mergeProps)(attrs, {
-				"data": mergedData.value,
-				"itemKey": itemKey,
-				"height": height,
-				"fullHeight": false,
-				"virtual": virtual,
-				"itemHeight": itemHeight,
-				"scrollWidth": scrollWidth,
-				"prefixCls": `${prefixCls}-list`,
-				"ref": listRef,
-				"role": "tree",
-				"style": props.style,
-				"onContextmenu": onContextmenu,
-				"onScroll": onScroll,
-				"onVisibleChange": (originList) => {
-					if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
-				}
-			}), { default: ({ item: treeNode }) => {
-				const { pos, data: nodeData, title, key, isStart, isEnd } = treeNode;
-				const mergedKey = require_treeUtil.getKey(key, pos);
-				const treeNodeProps = require_treeUtil.getTreeNodeProps(mergedKey, treeNodeRequiredProps.value);
-				const active = !!props.activeItem && mergedKey === props.activeItem.key;
-				const restProps = { ...nodeData || {} };
-				delete restProps.key;
-				delete restProps.children;
-				return (0, vue.createVNode)(require_MotionTreeNode.default, (0, vue.mergeProps)(restProps, treeNodeProps, {
-					"title": title,
-					"active": active,
-					"pos": pos,
-					"data": nodeData,
-					"isStart": isStart,
-					"isEnd": isEnd,
-					"motion": motion,
-					"motionNodes": key === MOTION_KEY ? transitionRange.value : null,
-					"motionType": motionType.value,
-					"onMotionStart": onListChangeStart,
-					"onMotionEnd": onMotionEnd,
-					"treeNodeRequiredProps": treeNodeRequiredProps.value,
-					"onMouseMove": () => onActiveChange?.(null)
-				}), null);
-			} })
-		]);
+		const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
+		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", {
+			"class": `${prefixCls}-treenode`,
+			"aria-hidden": true,
+			"style": {
+				position: "absolute",
+				pointerEvents: "none",
+				visibility: "hidden",
+				height: 0,
+				overflow: "hidden",
+				border: 0,
+				padding: 0
+			}
+		}, [(0, vue.createVNode)("div", { "class": `${prefixCls}-indent` }, [(0, vue.createVNode)("div", {
+			"ref": indentMeasurerRef,
+			"class": `${prefixCls}-indent-unit`
+		}, null)])]), (0, vue.createVNode)(VirtualListAny, (0, vue.mergeProps)(attrs, {
+			"data": mergedData.value,
+			"itemKey": itemKey,
+			"height": height,
+			"fullHeight": false,
+			"virtual": virtual,
+			"itemHeight": itemHeight,
+			"scrollWidth": scrollWidth,
+			"prefixCls": `${prefixCls}-list`,
+			"ref": listRef,
+			"role": "tree",
+			"tabindex": focusable !== false && !disabled ? tabIndex : void 0,
+			"aria-activedescendant": activeItem ? require_treeUtil.getTreeNodeId(treeId, activeItem.key) : void 0,
+			"style": props.style,
+			"onContextmenu": onContextmenu,
+			"onScroll": onScroll,
+			"onKeydown": onKeyDown,
+			"onFocus": onFocus,
+			"onBlur": onBlur,
+			"onVisibleChange": (originList) => {
+				if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
+			}
+		}), { default: ({ item: treeNode }) => {
+			const { pos, data: nodeData, title, key, isStart, isEnd } = treeNode;
+			const mergedKey = require_treeUtil.getKey(key, pos);
+			const treeNodeProps = require_treeUtil.getTreeNodeProps(mergedKey, treeNodeRequiredProps.value);
+			const active = !!props.activeItem && mergedKey === props.activeItem.key;
+			const restProps = { ...nodeData || {} };
+			delete restProps.key;
+			delete restProps.children;
+			return (0, vue.createVNode)(require_MotionTreeNode.default, (0, vue.mergeProps)(restProps, treeNodeProps, {
+				"title": title,
+				"active": active,
+				"pos": pos,
+				"data": nodeData,
+				"isStart": isStart,
+				"isEnd": isEnd,
+				"motion": motion,
+				"motionNodes": key === MOTION_KEY ? transitionRange.value : null,
+				"motionType": motionType.value,
+				"onMotionStart": onListChangeStart,
+				"onMotionEnd": onMotionEnd,
+				"treeNodeRequiredProps": treeNodeRequiredProps.value,
+				"treeId": treeId,
+				"onMouseMove": () => onActiveChange?.(null)
+			}), null);
+		} })]);
 	};
 }, {
 	props: {
@@ -227,11 +198,6 @@ var NodeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose
 			required: false,
 			default: void 0
 		},
-		focused: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
 		tabIndex: {
 			type: Number,
 			required: false,

package/dist/NodeList.d.ts

@@ -11,7 +11,6 @@ export interface NodeListProps {
     style?: any;
     data?: FlattenNode[];
     focusable?: boolean;
-    focused?: boolean;
     tabIndex?: number;
     selectable?: boolean;
     checkable?: boolean;

package/dist/NodeList.js

@@ -1,33 +1,14 @@
-import { getKey, getTreeNodeProps } from "./utils/treeUtil.js";
+import { getKey, getTreeNodeId, getTreeNodeProps } from "./utils/treeUtil.js";
 import MotionTreeNode_default from "./MotionTreeNode.js";
 import { findExpandedKeys, getExpandRange } from "./utils/diffUtil.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
+import useId from "@v-c/util/dist/hooks/useId";
 import VirtualList from "@v-c/virtual-list";
-var HIDDEN_STYLE = {
-	width: 0,
-	height: 0,
-	display: "flex",
-	overflow: "hidden",
-	opacity: 0,
-	border: 0,
-	padding: 0,
-	margin: 0
-};
-function noop() {}
 function itemKey(item) {
 	const { key, pos } = item;
 	return String(getKey(key, pos));
 }
-function getAccessibilityPath(item) {
-	let path = String(item.data.key);
-	let current = item;
-	while (current.parent) {
-		current = current.parent;
-		path = `${current.data.key} > ${path}`;
-	}
-	return path;
-}
 const MOTION_KEY = `VC_TREE_MOTION_${Math.random()}`;
 var MotionNode = { key: MOTION_KEY };
 const MotionEntity = {
@@ -53,6 +34,7 @@ function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {
 	return list.slice(0, Math.ceil(height / itemHeight) + 1);
 }
 var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const treeId = useId();
 	const listRef = ref();
 	const indentMeasurerRef = ref();
 	const { expandedKeys, data } = toPropsRefs(props, "expandedKeys", "data");
@@ -124,81 +106,69 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
 	});
 	const mergedData = computed(() => props.motion ? transitionData.value : props.data || []);
 	return () => {
-		const { motion, focused, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
-		return createVNode(Fragment, null, [
-			focused && activeItem && createVNode("span", {
-				"style": HIDDEN_STYLE,
-				"aria-live": "assertive"
-			}, [getAccessibilityPath(activeItem)]),
-			createVNode("div", null, [createVNode("input", {
-				"style": HIDDEN_STYLE,
-				"disabled": focusable === false || disabled,
-				"tabindex": focusable !== false ? tabIndex : void 0,
-				"onKeydown": onKeyDown,
-				"onFocus": onFocus,
-				"onBlur": onBlur,
-				"value": "",
-				"onInput": noop,
-				"aria-label": "for screen reader"
-			}, null)]),
-			createVNode("div", {
-				"class": `${prefixCls}-treenode`,
-				"aria-hidden": true,
-				"style": {
-					position: "absolute",
-					pointerEvents: "none",
-					visibility: "hidden",
-					height: 0,
-					overflow: "hidden",
-					border: 0,
-					padding: 0
-				}
-			}, [createVNode("div", { "class": `${prefixCls}-indent` }, [createVNode("div", {
-				"ref": indentMeasurerRef,
-				"class": `${prefixCls}-indent-unit`
-			}, null)])]),
-			createVNode(VirtualListAny, mergeProps(attrs, {
-				"data": mergedData.value,
-				"itemKey": itemKey,
-				"height": height,
-				"fullHeight": false,
-				"virtual": virtual,
-				"itemHeight": itemHeight,
-				"scrollWidth": scrollWidth,
-				"prefixCls": `${prefixCls}-list`,
-				"ref": listRef,
-				"role": "tree",
-				"style": props.style,
-				"onContextmenu": onContextmenu,
-				"onScroll": onScroll,
-				"onVisibleChange": (originList) => {
-					if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
-				}
-			}), { default: ({ item: treeNode }) => {
-				const { pos, data: nodeData, title, key, isStart, isEnd } = treeNode;
-				const mergedKey = getKey(key, pos);
-				const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps.value);
-				const active = !!props.activeItem && mergedKey === props.activeItem.key;
-				const restProps = { ...nodeData || {} };
-				delete restProps.key;
-				delete restProps.children;
-				return createVNode(MotionTreeNode_default, mergeProps(restProps, treeNodeProps, {
-					"title": title,
-					"active": active,
-					"pos": pos,
-					"data": nodeData,
-					"isStart": isStart,
-					"isEnd": isEnd,
-					"motion": motion,
-					"motionNodes": key === MOTION_KEY ? transitionRange.value : null,
-					"motionType": motionType.value,
-					"onMotionStart": onListChangeStart,
-					"onMotionEnd": onMotionEnd,
-					"treeNodeRequiredProps": treeNodeRequiredProps.value,
-					"onMouseMove": () => onActiveChange?.(null)
-				}), null);
-			} })
-		]);
+		const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
+		return createVNode(Fragment, null, [createVNode("div", {
+			"class": `${prefixCls}-treenode`,
+			"aria-hidden": true,
+			"style": {
+				position: "absolute",
+				pointerEvents: "none",
+				visibility: "hidden",
+				height: 0,
+				overflow: "hidden",
+				border: 0,
+				padding: 0
+			}
+		}, [createVNode("div", { "class": `${prefixCls}-indent` }, [createVNode("div", {
+			"ref": indentMeasurerRef,
+			"class": `${prefixCls}-indent-unit`
+		}, null)])]), createVNode(VirtualListAny, mergeProps(attrs, {
+			"data": mergedData.value,
+			"itemKey": itemKey,
+			"height": height,
+			"fullHeight": false,
+			"virtual": virtual,
+			"itemHeight": itemHeight,
+			"scrollWidth": scrollWidth,
+			"prefixCls": `${prefixCls}-list`,
+			"ref": listRef,
+			"role": "tree",
+			"tabindex": focusable !== false && !disabled ? tabIndex : void 0,
+			"aria-activedescendant": activeItem ? getTreeNodeId(treeId, activeItem.key) : void 0,
+			"style": props.style,
+			"onContextmenu": onContextmenu,
+			"onScroll": onScroll,
+			"onKeydown": onKeyDown,
+			"onFocus": onFocus,
+			"onBlur": onBlur,
+			"onVisibleChange": (originList) => {
+				if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
+			}
+		}), { default: ({ item: treeNode }) => {
+			const { pos, data: nodeData, title, key, isStart, isEnd } = treeNode;
+			const mergedKey = getKey(key, pos);
+			const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps.value);
+			const active = !!props.activeItem && mergedKey === props.activeItem.key;
+			const restProps = { ...nodeData || {} };
+			delete restProps.key;
+			delete restProps.children;
+			return createVNode(MotionTreeNode_default, mergeProps(restProps, treeNodeProps, {
+				"title": title,
+				"active": active,
+				"pos": pos,
+				"data": nodeData,
+				"isStart": isStart,
+				"isEnd": isEnd,
+				"motion": motion,
+				"motionNodes": key === MOTION_KEY ? transitionRange.value : null,
+				"motionType": motionType.value,
+				"onMotionStart": onListChangeStart,
+				"onMotionEnd": onMotionEnd,
+				"treeNodeRequiredProps": treeNodeRequiredProps.value,
+				"treeId": treeId,
+				"onMouseMove": () => onActiveChange?.(null)
+			}), null);
+		} })]);
 	};
 }, {
 	props: {
@@ -221,11 +191,6 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
 			required: false,
 			default: void 0
 		},
-		focused: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
 		tabIndex: {
 			type: Number,
 			required: false,

package/dist/Tree.cjs

@@ -724,7 +724,6 @@ var Tree = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, attrs, expo
 			"itemHeight": props.itemHeight,
 			"virtual": mergedVirtual.value,
 			"focusable": mergedFocusable.value,
-			"focused": focused.value,
 			"tabIndex": mergedTabIndex.value,
 			"activeItem": getActiveItem.value,
 			"onFocus": onFocus,

package/dist/Tree.js

@@ -715,7 +715,6 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 			"itemHeight": props.itemHeight,
 			"virtual": mergedVirtual.value,
 			"focusable": mergedFocusable.value,
-			"focused": focused.value,
 			"tabIndex": mergedTabIndex.value,
 			"activeItem": getActiveItem.value,
 			"onFocus": onFocus,

package/dist/TreeNode.cjs

@@ -18,6 +18,7 @@ var defaultTitle = "---";
 var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 	const context = (0, vue.inject)(require_contextTypes.TreeContextKey, null);
 	const unstableContext = (0, vue.inject)(require_contextTypes.UnstableContextKey, {});
+	const nodeId = (0, vue.computed)(() => require_treeUtil.getTreeNodeId(props.treeId || "", props.eventKey));
 	const dragNodeHighlight = (0, vue.ref)(false);
 	const isDisabled = (0, vue.computed)(() => {
 		return !!(context.disabled || props.disabled || unstableContext.nodeDisabled?.(props.data));
@@ -35,8 +36,7 @@ var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 		return Boolean((children || []).length);
 	});
 	const memoizedIsLeaf = (0, vue.computed)(() => {
-		if (props.isLeaf === false) return false;
-		return props.isLeaf || !context.loadData && !hasChildren.value || context.loadData && props.loaded && !hasChildren.value;
+		return require_treeUtil.isLeafNode(props.isLeaf, context.loadData, hasChildren.value, props.loaded);
 	});
 	(0, vue.watchEffect)(() => {
 		if (props.loading) return;
@@ -151,7 +151,7 @@ var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 	});
 	const checkboxNode = (0, vue.computed)(() => {
 		if (!isCheckable.value) return null;
-		const { checked, halfChecked, disableCheckbox, title } = props;
+		const { checked, halfChecked, disableCheckbox } = props;
 		const prefixCls = context.prefixCls;
 		const custom = typeof isCheckable.value !== "boolean" ? isCheckable.value : null;
 		return (0, vue.createVNode)("span", {
@@ -164,7 +164,7 @@ var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 			"role": "checkbox",
 			"aria-checked": halfChecked ? "mixed" : checked,
 			"aria-disabled": isDisabled.value || disableCheckbox,
-			"aria-label": `Select ${typeof title === "string" ? title : "tree node"}`
+			"aria-labelledby": nodeId.value
 		}, [custom]);
 	});
 	const selectorNode = (0, vue.computed)(() => {
@@ -218,9 +218,11 @@ var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 		const filterNode = context.filterTreeNode?.(require_treeUtil.convertNodePropsToEventData(props));
 		return (0, vue.createVNode)("div", (0, vue.mergeProps)({
 			"role": "treeitem",
+			"id": nodeId.value,
 			"aria-expanded": memoizedIsLeaf.value ? void 0 : props.expanded,
-			"aria-selected": context.selectable ? props.selected : void 0,
-			"data-selectable": props.selectable === false ? "false" : void 0,
+			"aria-selected": isSelectable.value && !isDisabled.value ? props.selected : void 0,
+			"aria-checked": isCheckable.value && !isDisabled.value ? props.halfChecked ? "mixed" : props.checked : void 0,
+			"aria-disabled": isDisabled.value,
 			"class": (0, _v_c_util.clsx)(props.className, `${context.prefixCls}-treenode`, context.classNames?.item, {
 				[`${context.prefixCls}-treenode-disabled`]: isDisabled.value,
 				[`${context.prefixCls}-treenode-switcher-${props.expanded ? "open" : "close"}`]: !memoizedIsLeaf.value,
@@ -292,6 +294,11 @@ var TreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 			required: false,
 			default: void 0
 		},
+		treeId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		expanded: {
 			type: Boolean,
 			required: false,

package/dist/TreeNode.js

@@ -1,7 +1,7 @@
 import Indent_default from "./Indent.js";
 import { TreeContextKey, UnstableContextKey } from "./contextTypes.js";
 import getEntity from "./utils/keyUtil.js";
-import { convertNodePropsToEventData } from "./utils/treeUtil.js";
+import { convertNodePropsToEventData, getTreeNodeId, isLeafNode } from "./utils/treeUtil.js";
 import { computed, createVNode, defineComponent, inject, mergeProps, ref, watchEffect } from "vue";
 import { clsx } from "@v-c/util";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
@@ -12,6 +12,7 @@ var defaultTitle = "---";
 var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	const context = inject(TreeContextKey, null);
 	const unstableContext = inject(UnstableContextKey, {});
+	const nodeId = computed(() => getTreeNodeId(props.treeId || "", props.eventKey));
 	const dragNodeHighlight = ref(false);
 	const isDisabled = computed(() => {
 		return !!(context.disabled || props.disabled || unstableContext.nodeDisabled?.(props.data));
@@ -29,8 +30,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		return Boolean((children || []).length);
 	});
 	const memoizedIsLeaf = computed(() => {
-		if (props.isLeaf === false) return false;
-		return props.isLeaf || !context.loadData && !hasChildren.value || context.loadData && props.loaded && !hasChildren.value;
+		return isLeafNode(props.isLeaf, context.loadData, hasChildren.value, props.loaded);
 	});
 	watchEffect(() => {
 		if (props.loading) return;
@@ -145,7 +145,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	});
 	const checkboxNode = computed(() => {
 		if (!isCheckable.value) return null;
-		const { checked, halfChecked, disableCheckbox, title } = props;
+		const { checked, halfChecked, disableCheckbox } = props;
 		const prefixCls = context.prefixCls;
 		const custom = typeof isCheckable.value !== "boolean" ? isCheckable.value : null;
 		return createVNode("span", {
@@ -158,7 +158,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			"role": "checkbox",
 			"aria-checked": halfChecked ? "mixed" : checked,
 			"aria-disabled": isDisabled.value || disableCheckbox,
-			"aria-label": `Select ${typeof title === "string" ? title : "tree node"}`
+			"aria-labelledby": nodeId.value
 		}, [custom]);
 	});
 	const selectorNode = computed(() => {
@@ -212,9 +212,11 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		const filterNode = context.filterTreeNode?.(convertNodePropsToEventData(props));
 		return createVNode("div", mergeProps({
 			"role": "treeitem",
+			"id": nodeId.value,
 			"aria-expanded": memoizedIsLeaf.value ? void 0 : props.expanded,
-			"aria-selected": context.selectable ? props.selected : void 0,
-			"data-selectable": props.selectable === false ? "false" : void 0,
+			"aria-selected": isSelectable.value && !isDisabled.value ? props.selected : void 0,
+			"aria-checked": isCheckable.value && !isDisabled.value ? props.halfChecked ? "mixed" : props.checked : void 0,
+			"aria-disabled": isDisabled.value,
 			"class": clsx(props.className, `${context.prefixCls}-treenode`, context.classNames?.item, {
 				[`${context.prefixCls}-treenode-disabled`]: isDisabled.value,
 				[`${context.prefixCls}-treenode-switcher-${props.expanded ? "open" : "close"}`]: !memoizedIsLeaf.value,
@@ -286,6 +288,11 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			required: false,
 			default: void 0
 		},
+		treeId: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		expanded: {
 			type: Boolean,
 			required: false,

package/dist/index.cjs

@@ -13,8 +13,6 @@ ExportTree.TreeNode = require_TreeNode.default;
 var src_default = ExportTree;
 exports.TreeNode = require_TreeNode.default;
 exports.UnstableContextKey = require_contextTypes.UnstableContextKey;
-exports.arrAdd = require_util.arrAdd;
-exports.arrDel = require_util.arrDel;
 exports.conductCheck = require_conductUtil.conductCheck;
 exports.conductExpandParent = require_util.conductExpandParent;
 exports.convertDataToEntities = require_treeUtil.convertDataToEntities;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ExpandAction, TreeProps, TreeRef, default as Tree } from './Tree';
 import { default as TreeNode } from './TreeNode';
 export { UnstableContextKey } from './contextTypes';
 export { TreeNode };
-export { arrAdd, arrDel, conductExpandParent } from './util.ts';
+export { conductExpandParent } from './util.ts';
 export { conductCheck } from './utils/conductUtil';
 export { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from './utils/treeUtil';
 export type { BasicDataNode, DataEntity, DataNode, EventDataNode, ExpandAction, FieldNames, FlattenNode, IconType, Key, KeyEntities, ScrollTo, TreeNodeProps, TreeProps, TreeRef, };

package/dist/index.js

@@ -1,10 +1,10 @@
 import { UnstableContextKey } from "./contextTypes.js";
 import { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from "./utils/treeUtil.js";
 import TreeNode_default from "./TreeNode.js";
-import { arrAdd, arrDel, conductExpandParent } from "./util.js";
+import { conductExpandParent } from "./util.js";
 import { conductCheck } from "./utils/conductUtil.js";
 import Tree_default from "./Tree.js";
 var ExportTree = Tree_default;
 ExportTree.TreeNode = TreeNode_default;
 var src_default = ExportTree;
-export { TreeNode_default as TreeNode, UnstableContextKey, arrAdd, arrDel, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, src_default as default, fillFieldNames, flattenTreeData };
+export { TreeNode_default as TreeNode, UnstableContextKey, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, src_default as default, fillFieldNames, flattenTreeData };

package/dist/interface.d.ts

@@ -16,6 +16,7 @@ export interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
     className?: string;
     style?: CSSProperties;
     id?: Key;
+    treeId?: string;
     expanded?: boolean;
     selected?: boolean;
     checked?: boolean;

package/dist/utils/treeUtil.cjs

@@ -213,6 +213,13 @@ function convertNodePropsToEventData(props) {
 	} });
 	return eventData;
 }
+function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
+	if (isLeaf === false) return false;
+	return !!isLeaf || !loadData && !hasChildren || !!(loadData && loaded && !hasChildren);
+}
+function getTreeNodeId(treeId, key) {
+	return `${treeId}-${key}`;
+}
 exports.convertDataToEntities = convertDataToEntities;
 exports.convertNodePropsToEventData = convertNodePropsToEventData;
 exports.convertTreeToData = convertTreeToData;
@@ -220,7 +227,9 @@ exports.fillFieldNames = fillFieldNames;
 exports.flattenTreeData = flattenTreeData;
 exports.getKey = getKey;
 exports.getPosition = getPosition;
+exports.getTreeNodeId = getTreeNodeId;
 exports.getTreeNodeProps = getTreeNodeProps;
+exports.isLeafNode = isLeafNode;
 exports.isTreeNode = isTreeNode;
 exports.traverseDataNodes = traverseDataNodes;
 exports.warningWithoutKey = warningWithoutKey;

package/dist/utils/treeUtil.d.ts

@@ -58,4 +58,6 @@ export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = Da
     dragOverGapBottom: boolean;
 };
 export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode<TreeDataType>;
+export declare function isLeafNode<TreeDataType extends BasicDataNode = DataNode>(isLeaf: boolean | undefined, loadData: ((node: EventDataNode<TreeDataType>) => Promise<any>) | undefined, hasChildren: boolean, loaded: boolean | undefined): boolean;
+export declare function getTreeNodeId(treeId: string, key: Key): string;
 export {};

package/dist/utils/treeUtil.js

@@ -210,4 +210,11 @@ function convertNodePropsToEventData(props) {
 	} });
 	return eventData;
 }
-export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeProps, isTreeNode, traverseDataNodes, warningWithoutKey };
+function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
+	if (isLeaf === false) return false;
+	return !!isLeaf || !loadData && !hasChildren || !!(loadData && loaded && !hasChildren);
+}
+function getTreeNodeId(treeId, key) {
+	return `${treeId}-${key}`;
+}
+export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeId, getTreeNodeProps, isLeafNode, isTreeNode, traverseDataNodes, warningWithoutKey };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tree",
   "type": "module",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.5",
+    "@v-c/util": "^1.0.9",
     "@v-c/virtual-list": "^1.0.5"
   },
   "scripts": {