@veltra/desktop 1.0.8 → 1.0.9

package/dist/components/tree/tree-node.js

@@ -2,8 +2,8 @@ import _sfc_main$1 from "../icon/icon.js";
 import NodeRender from "../node-render/node-render.js";
 import _sfc_main$2 from "../checkbox/checkbox.js";
 import { TreeDIKey } from "./di.js";
-import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, unref, withCtx, withDirectives, withModifiers } from "vue";
-import { bem, withUnit } from "@veltra/utils";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, renderList, unref, withCtx, withDirectives, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
 import { vRipple } from "@veltra/directives";
 import { ArrowRight } from "@veltra/icons/normal";
 //#region src/components/tree/tree-node.vue
@@ -12,11 +12,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "tree-node",
 	props: {
 		node: {},
+		index: {},
 		measureElement: { type: Function }
 	},
 	setup(__props) {
 		const props = __props;
 		const { treeProps, treeEmit, cls, getTreeSlotsNode, getFlattedNodes, toggleCheck, handleSelect } = inject(TreeDIKey);
+		function measureRef(el) {
+			if (typeof props.index !== "number" || !props.measureElement) return;
+			props.measureElement(props.index, el);
+		}
 		function toggleExpand() {
 			const { node } = props;
 			node.expanded = !node.expanded;
@@ -40,39 +45,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					unref(bem).is("expanded", __props.node.expanded),
 					unref(bem).is("disabled", __props.node.disabled)
 				]),
-				style: normalizeStyle({ paddingLeft: unref(withUnit)(__props.node.depth * 20 - 20, "px") }),
-				ref: __props.measureElement
-			}, [!__props.node.isLeaf ? (openBlock(), createBlock(unref(_sfc_main$1), {
-				key: 0,
-				class: normalizeClass(unref(cls).e("expand-icon")),
-				onClick: withModifiers(toggleExpand, ["stop"])
-			}, {
-				default: withCtx(() => [createVNode(unref(ArrowRight))]),
-				_: 1
-			}, 8, ["class"])) : (openBlock(), createElementBlock("i", {
-				key: 1,
-				class: normalizeClass(unref(cls).e("icon-placeholder"))
-			}, null, 2)), withDirectives((openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(cls).e("node-content")),
-				onClick: handleClick,
-				onContextmenu: _cache[1] || (_cache[1] = ($event) => unref(treeEmit)("node-contextmenu", $event, __props.node))
-			}, [unref(treeProps).checkable ? (openBlock(), createBlock(_sfc_main$2, {
-				key: 0,
-				class: normalizeClass(unref(cls).e("checkbox")),
-				"model-value": __props.node.checked,
-				indeterminate: __props.node.indeterminate,
-				disabled: __props.node.disabled,
-				onChange: handleChange,
-				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-			}, null, 8, [
-				"class",
-				"model-value",
-				"indeterminate",
-				"disabled"
-			])) : createCommentVNode("v-if", true), createVNode(unref(NodeRender), { content: unref(getTreeSlotsNode)({
-				node: __props.node,
-				data: __props.node.data
-			}) }, null, 8, ["content"])], 34)), [[unref(vRipple), (unref(treeProps).checkable || unref(treeProps).selectable) && !__props.node.disabled ? unref(cls).e("ripple") : false]])], 6);
+				ref: measureRef
+			}, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.depth, (i) => {
+					return openBlock(), createElementBlock("span", {
+						key: i,
+						class: normalizeClass(unref(cls).e("indent")),
+						"aria-hidden": "true"
+					}, null, 2);
+				}), 128)),
+				!__props.node.isLeaf ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 0,
+					class: normalizeClass(unref(cls).e("expand-icon")),
+					onClick: withModifiers(toggleExpand, ["stop"])
+				}, {
+					default: withCtx(() => [createVNode(unref(ArrowRight))]),
+					_: 1
+				}, 8, ["class"])) : (openBlock(), createElementBlock("i", {
+					key: 1,
+					class: normalizeClass([unref(cls).e("indent"), unref(cls).em("indent", "leaf")]),
+					"aria-hidden": "true"
+				}, null, 2)),
+				withDirectives((openBlock(), createElementBlock("div", {
+					class: normalizeClass(unref(cls).e("node-content")),
+					onClick: handleClick,
+					onContextmenu: _cache[1] || (_cache[1] = ($event) => unref(treeEmit)("node-contextmenu", $event, __props.node))
+				}, [unref(treeProps).checkable ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 0,
+					class: normalizeClass(unref(cls).e("checkbox")),
+					"model-value": __props.node.checked,
+					indeterminate: __props.node.indeterminate,
+					disabled: __props.node.disabled,
+					onChange: handleChange,
+					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, null, 8, [
+					"class",
+					"model-value",
+					"indeterminate",
+					"disabled"
+				])) : createCommentVNode("v-if", true), createVNode(unref(NodeRender), { content: unref(getTreeSlotsNode)({
+					node: __props.node,
+					data: __props.node.data
+				}) }, null, 8, ["content"])], 34)), [[unref(vRipple), (unref(treeProps).checkable || unref(treeProps).selectable) && !__props.node.disabled ? unref(cls).e("ripple") : false]])
+			], 2);
 		};
 	}
 });

package/dist/components/tree/tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.js","names":[],"sources":["../../../src/components/tree/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.e('node'), bem.is('expanded', node.expanded), bem.is('disabled', node.disabled)]\"\n    :style=\"{ paddingLeft: withUnit(node.depth * 20 - 20, 'px') }\"\n    :ref=\"measureElement\"\n  >\n    <u-icon v-if=\"!node.isLeaf\" :class=\"cls.e('expand-icon')\" @click.stop=\"toggleExpand\">\n      <ArrowRight />\n    </u-icon>\n    <i v-else :class=\"cls.e('icon-placeholder')\"> </i>\n\n    <div\n      :class=\"cls.e('node-content')\"\n      @click=\"handleClick\"\n      @contextmenu=\"treeEmit('node-contextmenu', $event, node)\"\n      v-ripple=\"\n        (treeProps.checkable || treeProps.selectable) && !node.disabled ? cls.e('ripple') : false\n      \"\n    >\n      <u-checkbox\n        v-if=\"treeProps.checkable\"\n        :class=\"cls.e('checkbox')\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"node.disabled\"\n        @change=\"handleChange\"\n        @click.stop\n      />\n\n      <u-node-render :content=\"getTreeSlotsNode({ node, data: node.data })\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { vRipple } from '@veltra/directives'\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem, withUnit } from '@veltra/utils'\nimport { inject } from 'vue'\n\nimport type { TreeNodeProps } from '../../types'\nimport UCheckbox from '../checkbox/checkbox.vue'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { TreeDIKey } from './di'\n\ndefineOptions({\n  name: 'TreeNode'\n})\n\nconst props = defineProps<TreeNodeProps>()\n\nconst { treeProps, treeEmit, cls, getTreeSlotsNode, getFlattedNodes, toggleCheck, handleSelect } =\n  inject(TreeDIKey)!\n\nfunction toggleExpand() {\n  const { node } = props\n  node.expanded = !node.expanded\n  getFlattedNodes()\n\n  treeEmit('expand', node)\n}\n\nfunction handleChange(checked: boolean, e: MouseEvent) {\n  toggleCheck(props.node, checked, e.ctrlKey)\n}\n\nfunction handleClick(e: MouseEvent) {\n  const { node } = props\n  treeEmit('node-click', node)\n\n  treeProps.selectable && handleSelect(node)\n  treeProps.expandOnClickNode && toggleExpand()\n  treeProps.checkable &&\n    !node.disabled &&\n    !treeProps.expandOnClickNode &&\n    toggleCheck(node, !node.checked, e.ctrlKey)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkDA,MAAM,QAAQ;EAEd,MAAM,EAAE,WAAW,UAAU,KAAK,kBAAkB,iBAAiB,aAAa,iBAChF,OAAO,UAAU;EAEnB,SAAS,eAAe;GACtB,MAAM,EAAE,SAAS;AACjB,QAAK,WAAW,CAAC,KAAK;AACtB,oBAAgB;AAEhB,YAAS,UAAU,KAAI;;EAGzB,SAAS,aAAa,SAAkB,GAAe;AACrD,eAAY,MAAM,MAAM,SAAS,EAAE,QAAO;;EAG5C,SAAS,YAAY,GAAe;GAClC,MAAM,EAAE,SAAS;AACjB,YAAS,cAAc,KAAI;AAE3B,aAAU,cAAc,aAAa,KAAI;AACzC,aAAU,qBAAqB,cAAa;AAC5C,aAAU,aACR,CAAC,KAAK,YACN,CAAC,UAAU,qBACX,YAAY,MAAM,CAAC,KAAK,SAAS,EAAE,QAAO;;;uBA3E5C,mBA8BM,OAAA;IA7BH,OAAK,eAAA;KAAG,MAAA,IAAG,CAAC,EAAC,OAAA;KAAU,MAAA,IAAG,CAAC,GAAE,YAAa,QAAA,KAAK,SAAQ;KAAG,MAAA,IAAG,CAAC,GAAE,YAAa,QAAA,KAAK,SAAQ;KAAA,CAAA;IAC1F,OAAK,eAAA,EAAA,aAAiB,MAAA,SAAQ,CAAC,QAAA,KAAK,QAAK,KAAA,IAAA,KAAA,EAAA,CAAA;IACzC,KAAK,QAAA;QAES,QAAA,KAAK,UAAA,WAAA,EAApB,YAES,MAAA,YAAA,EAAA;;IAFoB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IAAkB,SAAK,cAAO,cAAY,CAAA,OAAA,CAAA;;2BACnE,CAAd,YAAc,MAAA,WAAA,CAAA,CAAA,CAAA;;qCAEhB,mBAAkD,KAAA;;IAAvC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,mBAAA,CAAA;8CAEvB,mBAmBM,OAAA;IAlBH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,eAAA,CAAA;IACZ,SAAO;IACP,eAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,CAAA,oBAAqB,QAAQ,QAAA,KAAI;OAM/C,MAAA,UAAS,CAAC,aAAA,WAAA,EADlB,YAQE,aAAA;;IANC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IACZ,eAAa,QAAA,KAAK;IAClB,eAAe,QAAA,KAAK;IACpB,UAAU,QAAA,KAAK;IACf,UAAQ;IACR,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;;;;;2CAGb,YAAwE,MAAA,WAAA,EAAA,EAAxD,SAAS,MAAA,iBAAgB,CAAA;IAAA,MAAG,QAAA;IAAI,MAAQ,QAAA,KAAK;IAAI,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,EAAA,GAAA,GAAA,CAAA,CAAA,MAAA,QAAA,GAd7C,MAAA,UAAS,CAAC,aAAa,MAAA,UAAS,CAAC,eAAU,CAAM,QAAA,KAAK,WAAW,MAAA,IAAG,CAAC,EAAC,SAAA,GAAA,MAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"tree-node.js","names":[],"sources":["../../../src/components/tree/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.e('node'), bem.is('expanded', node.expanded), bem.is('disabled', node.disabled)]\"\n    :ref=\"measureRef\"\n  >\n    <span v-for=\"i in node.depth\" :key=\"i\" :class=\"cls.e('indent')\" aria-hidden=\"true\"></span>\n\n    <u-icon v-if=\"!node.isLeaf\" :class=\"cls.e('expand-icon')\" @click.stop=\"toggleExpand\">\n      <ArrowRight />\n    </u-icon>\n    <i v-else :class=\"[cls.e('indent'), cls.em('indent', 'leaf')]\" aria-hidden=\"true\"></i>\n\n    <div\n      :class=\"cls.e('node-content')\"\n      @click=\"handleClick\"\n      @contextmenu=\"treeEmit('node-contextmenu', $event, node)\"\n      v-ripple=\"\n        (treeProps.checkable || treeProps.selectable) && !node.disabled ? cls.e('ripple') : false\n      \"\n    >\n      <u-checkbox\n        v-if=\"treeProps.checkable\"\n        :class=\"cls.e('checkbox')\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"node.disabled\"\n        @change=\"handleChange\"\n        @click.stop\n      />\n\n      <u-node-render :content=\"getTreeSlotsNode({ node, data: node.data })\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { vRipple } from '@veltra/directives'\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { inject } from 'vue'\n\nimport type { TreeNodeProps } from '../../types'\nimport UCheckbox from '../checkbox/checkbox.vue'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { TreeDIKey } from './di'\n\ndefineOptions({\n  name: 'TreeNode'\n})\n\nconst props = defineProps<TreeNodeProps>()\n\nconst { treeProps, treeEmit, cls, getTreeSlotsNode, getFlattedNodes, toggleCheck, handleSelect } =\n  inject(TreeDIKey)!\n\nfunction measureRef(el: unknown) {\n  if (typeof props.index !== 'number' || !props.measureElement) return\n  props.measureElement(props.index, el as Element | null)\n}\n\nfunction toggleExpand() {\n  const { node } = props\n  node.expanded = !node.expanded\n  getFlattedNodes()\n\n  treeEmit('expand', node)\n}\n\nfunction handleChange(checked: boolean, e: MouseEvent) {\n  toggleCheck(props.node, checked, e.ctrlKey)\n}\n\nfunction handleClick(e: MouseEvent) {\n  const { node } = props\n  treeEmit('node-click', node)\n\n  treeProps.selectable && handleSelect(node)\n  treeProps.expandOnClickNode && toggleExpand()\n  treeProps.checkable &&\n    !node.disabled &&\n    !treeProps.expandOnClickNode &&\n    toggleCheck(node, !node.checked, e.ctrlKey)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAmDA,MAAM,QAAQ;EAEd,MAAM,EAAE,WAAW,UAAU,KAAK,kBAAkB,iBAAiB,aAAa,iBAChF,OAAO,UAAU;EAEnB,SAAS,WAAW,IAAa;AAC/B,OAAI,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,eAAgB;AAC9D,SAAM,eAAe,MAAM,OAAO,GAAoB;;EAGxD,SAAS,eAAe;GACtB,MAAM,EAAE,SAAS;AACjB,QAAK,WAAW,CAAC,KAAK;AACtB,oBAAgB;AAEhB,YAAS,UAAU,KAAI;;EAGzB,SAAS,aAAa,SAAkB,GAAe;AACrD,eAAY,MAAM,MAAM,SAAS,EAAE,QAAO;;EAG5C,SAAS,YAAY,GAAe;GAClC,MAAM,EAAE,SAAS;AACjB,YAAS,cAAc,KAAI;AAE3B,aAAU,cAAc,aAAa,KAAI;AACzC,aAAU,qBAAqB,cAAa;AAC5C,aAAU,aACR,CAAC,KAAK,YACN,CAAC,UAAU,qBACX,YAAY,MAAM,CAAC,KAAK,SAAS,EAAE,QAAO;;;uBAjF5C,mBA+BM,OAAA;IA9BH,OAAK,eAAA;KAAG,MAAA,IAAG,CAAC,EAAC,OAAA;KAAU,MAAA,IAAG,CAAC,GAAE,YAAa,QAAA,KAAK,SAAQ;KAAG,MAAA,IAAG,CAAC,GAAE,YAAa,QAAA,KAAK,SAAQ;KAAA,CAAA;IAC1F,KAAK;;sBAEN,mBAA0F,UAAA,MAAA,WAAxE,QAAA,KAAK,QAAV,MAAC;yBAAd,mBAA0F,QAAA;MAA3D,KAAK;MAAI,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;MAAY,eAAY;;;KAE7D,QAAA,KAAK,UAAA,WAAA,EAApB,YAES,MAAA,YAAA,EAAA;;KAFoB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;KAAkB,SAAK,cAAO,cAAY,CAAA,OAAA,CAAA;;4BACnE,CAAd,YAAc,MAAA,WAAA,CAAA,CAAA,CAAA;;sCAEhB,mBAAsF,KAAA;;KAA3E,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,SAAA,EAAY,MAAA,IAAG,CAAC,GAAE,UAAA,OAAA,CAAA,CAAA;KAAqB,eAAY;;iCAE3E,mBAmBM,OAAA;KAlBH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,eAAA,CAAA;KACZ,SAAO;KACP,eAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,CAAA,oBAAqB,QAAQ,QAAA,KAAI;QAM/C,MAAA,UAAS,CAAC,aAAA,WAAA,EADlB,YAQE,aAAA;;KANC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;KACZ,eAAa,QAAA,KAAK;KAClB,eAAe,QAAA,KAAK;KACpB,UAAU,QAAA,KAAK;KACf,UAAQ;KACR,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;;;;;4CAGb,YAAwE,MAAA,WAAA,EAAA,EAAxD,SAAS,MAAA,iBAAgB,CAAA;KAAA,MAAG,QAAA;KAAI,MAAQ,QAAA,KAAK;KAAI,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,EAAA,GAAA,GAAA,CAAA,CAAA,MAAA,QAAA,GAd7C,MAAA,UAAS,CAAC,aAAa,MAAA,UAAS,CAAC,eAAU,CAAM,QAAA,KAAK,WAAW,MAAA,IAAG,CAAC,EAAC,SAAA,GAAA,MAAA,CAAA,CAAA"}

package/dist/components/tree/tree.js

@@ -7,8 +7,8 @@ import { useFilter } from "./use-filter.js";
 import { useSelect } from "./use-select.js";
 import { useTreeNodes } from "./use-tree-nodes.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, shallowRef, unref, useSlots, watch, watchEffect, withCtx } from "vue";
-import { bem, nextFrame, scrollIntoContainerView, withUnit } from "@veltra/utils";
-import { useFormComponent, useFormFallbackProps, useVirtual } from "@veltra/compositions";
+import { bem, nextFrame, scrollIntoContainerView } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
 //#region src/components/tree/tree.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "Tree",
@@ -87,25 +87,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			nodeDict,
 			getFlattedNodes
 		});
-		const { totalHeight, virtualList, scrollTo, virtualEnabled, measureElement } = useVirtual({
+		const estimateSize = () => {
+			switch (size.value) {
+				case "small": return 32;
+				case "large": return 44;
+				default: return 36;
+			}
+		};
+		const virtualEnabled = computed(() => nodes.value.length > 80);
+		const { virtualizer, items } = useVirtualizer({
 			count: computed(() => nodes.value.length),
-			estimateSize: () => 40,
+			scrollEl: () => scrollRef.value?.containerRef ?? null,
+			contentEl: () => virtualEnabled.value ? scrollRef.value?.contentRef ?? null : null,
+			estimateSize,
 			gap: 2,
-			virtualThreshold: 80,
-			scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+			getItemKey: (i) => nodes.value[i]?.key ?? i
 		});
 		const virtualNodes = computed(() => {
 			const _nodes = nodes.value;
-			return virtualList.value.map((item) => {
+			return items.value.map((item) => {
 				const node = _nodes[item.index];
 				return {
 					node,
-					key: node.key || item.key,
+					key: node?.key ?? item.index,
 					offset: item.start,
 					index: item.index
 				};
 			});
 		});
+		const measureElement = (index, el) => virtualizer.measureElement(index, el);
+		function scrollTo(index) {
+			virtualizer.scrollToIndex(index, { align: "center" });
+		}
 		function scrollIntoView() {
 			const { selectable, checkable, scrollToView } = props;
 			if (!scrollToView || !selectable && !checkable || !nodes.value) return;
@@ -176,22 +189,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(className.value),
 				ref_key: "scrollRef",
 				ref: scrollRef,
-				"content-style": { height: unref(virtualEnabled) ? unref(withUnit)(unref(totalHeight), "px") : void 0 },
-				"content-class": [unref(cls).e("wrap"), unref(bem).is("virtual", unref(virtualEnabled))]
+				"content-class": [unref(cls).e("wrap"), unref(bem).is("virtual", virtualEnabled.value)]
 			}, {
-				default: withCtx(() => [unref(virtualEnabled) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(virtualNodes.value, ({ node, key, offset, index }) => {
+				default: withCtx(() => [virtualEnabled.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(virtualNodes.value, ({ node, key, offset, index }) => {
 					return openBlock(), createBlock(_sfc_main$3, {
 						node,
 						key,
 						class: normalizeClass(unref(bem).is("selected", node.data === unref(selectedData))),
-						"data-index": index,
-						"measure-element": unref(measureElement),
+						index,
+						"measure-element": measureElement,
 						style: normalizeStyle({ transform: `translateY(${offset}px)` })
 					}, null, 8, [
 						"node",
 						"class",
-						"data-index",
-						"measure-element",
+						"index",
 						"style"
 					]);
 				}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(nodes), (node) => {
@@ -205,11 +216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(cls).e("empty"))
 				}, [createVNode(unref(_sfc_main$2))], 2)) : createCommentVNode("v-if", true)]),
 				_: 1
-			}, 8, [
-				"class",
-				"content-style",
-				"content-class"
-			]);
+			}, 8, ["class", "content-class"]);
 		};
 	}
 });

package/dist/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../../src/components/tree/tree.vue"],"sourcesContent":["<template>\n  <u-scroll\n    :class=\"className\"\n    ref=\"scrollRef\"\n    :content-style=\"{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }\"\n    :content-class=\"[cls.e('wrap'), bem.is('virtual', virtualEnabled)]\"\n  >\n    <template v-if=\"virtualEnabled\">\n      <UTreeNode\n        v-for=\"{ node, key, offset, index } of virtualNodes\"\n        :node=\"node\"\n        :key=\"key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n        :data-index=\"index\"\n        :measure-element=\"measureElement\"\n        :style=\"{ transform: `translateY(${offset}px)` }\"\n      />\n    </template>\n    <template v-else>\n      <UTreeNode\n        v-for=\"node of nodes\"\n        :node=\"node\"\n        :key=\"node.key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n      />\n    </template>\n\n    <div :class=\"cls.e('empty')\" v-if=\"!nodes.length\">\n      <UEmpty />\n    </div>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { useVirtual } from '@veltra/compositions'\nimport { bem, nextFrame, withUnit, scrollIntoContainerView } from '@veltra/utils'\nimport { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'\n\nimport type { TreeProps, TreeEmit, _TreeExposed } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UEmpty } from '../empty'\nimport { UScroll } from '../scroll'\nimport { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'\nimport UTreeNode from './tree-node.vue'\nimport { useCheck } from './use-check'\nimport { useFilter } from './use-filter'\nimport { useSelect } from './use-select'\nimport { useTreeNodes } from './use-tree-nodes'\n\ndefineOptions({\n  name: 'Tree'\n})\n\nconst props = withDefaults(defineProps<TreeProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  childrenKey: 'children',\n  expandOnClickNode: false,\n  checkStrictly: false,\n  data: () => []\n})\n\nconst emit = defineEmits<TreeEmit>()\n\nconst cls = bem('tree')\n\nconst { formProps } = useFormComponent()\n\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default'\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('selectable', props.selectable),\n    bem.is('checkable', props.checkable)\n  ]\n})\n\ndefineSlots<{\n  default: (props: TreeSlotsScope) => any\n}>()\n\nconst slots = useSlots()\n\nfunction getTreeSlotsNode(ctx: TreeSlotsScope): VNode[] | string | undefined {\n  return (props.slots?.default ?? slots.default)?.(ctx) ?? ctx.node.label\n}\n\nconst { nodes, forest, getFlattedNodes, nodeDict } = useTreeNodes({\n  props\n})\n\nwatch(\n  [() => props.selectable, () => props.checkable, forest],\n  ([s, c]) => {\n    // 如果选择或勾选，则不更新节点\n    if (s || c) return\n    getFlattedNodes()\n  },\n  { immediate: true }\n)\n\nconst { filter } = useFilter({ forest, getFlattedNodes })\n\nconst { handleSelect, selectedData } = useSelect({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst { checkedData, toggleCheck } = useCheck({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst { totalHeight, virtualList, scrollTo, virtualEnabled, measureElement } = useVirtual({\n  count: computed(() => nodes.value.length),\n  estimateSize: () => 40,\n  gap: 2,\n  virtualThreshold: 80,\n  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)\n})\n\nconst virtualNodes = computed(() => {\n  const _nodes = nodes.value\n\n  return virtualList.value.map((item) => {\n    const node = _nodes[item.index]!\n    return {\n      node,\n      key: node.key || item.key,\n      offset: item.start,\n      index: item.index\n    }\n  })\n})\n\nfunction scrollIntoView() {\n  const { selectable, checkable, scrollToView } = props\n  if (!scrollToView || (!selectable && !checkable) || !nodes.value) return\n  let index = -1\n\n  if (selectable) {\n    if (!selectedData.value) return\n    index = nodes.value.findIndex((node) => node.data === selectedData.value)\n  } else if (checkable) {\n    if (!checkedData.size) return\n    index = nodes.value.findIndex((node) => checkedData.has(node.data))\n  }\n\n  if (virtualEnabled.value) {\n    scrollTo(index)\n  } else {\n    const { contentRef, containerRef } = scrollRef.value ?? {}\n    const el = contentRef?.children[index]\n    el && scrollIntoContainerView(el as HTMLElement, containerRef ?? null)\n  }\n}\n\nwatchEffect(() => {\n  nextFrame(() => {\n    scrollIntoView()\n  })\n})\n\nprovide(TreeDIKey, {\n  cls,\n  selectedData,\n  checkedData,\n  getFlattedNodes,\n  getTreeSlotsNode,\n  treeEmit: emit as TreeEmit,\n  treeProps: props as TreeProps,\n  toggleCheck: toggleCheck as TreeConText['toggleCheck'],\n  handleSelect: handleSelect as TreeConText['handleSelect']\n})\n\ndefineExpose<_TreeExposed>({\n  filter,\n  forest,\n  nodes,\n  checkNode: toggleCheck,\n  selectNode: handleSelect,\n  checkAll(check: boolean) {\n    forest.value.roots.forEach((node) => {\n      toggleCheck(node, check)\n    })\n  },\n  getSelected() {\n    return selectedData\n  },\n  getChecked() {\n    return Array.from(checkedData)\n  },\n  scrollTo,\n\n  expandAll() {\n    forest.value.dfs((node) => {\n      node.expanded = true\n    })\n    getFlattedNodes()\n  },\n  collapseAll() {\n    forest.value.dfs((node) => {\n      node.expanded = false\n    })\n    getFlattedNodes()\n  }\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tree.js","names":[],"sources":["../../../src/components/tree/tree.vue"],"sourcesContent":["<template>\n  <u-scroll\n    :class=\"className\"\n    ref=\"scrollRef\"\n    :content-class=\"[cls.e('wrap'), bem.is('virtual', virtualEnabled)]\"\n  >\n    <template v-if=\"virtualEnabled\">\n      <UTreeNode\n        v-for=\"{ node, key, offset, index } of virtualNodes\"\n        :node=\"node\"\n        :key=\"key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n        :index=\"index\"\n        :measure-element=\"measureElement\"\n        :style=\"{ transform: `translateY(${offset}px)` }\"\n      />\n    </template>\n    <template v-else>\n      <UTreeNode\n        v-for=\"node of nodes\"\n        :node=\"node\"\n        :key=\"node.key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n      />\n    </template>\n\n    <div :class=\"cls.e('empty')\" v-if=\"!nodes.length\">\n      <UEmpty />\n    </div>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'\nimport { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'\n\nimport type { TreeProps, TreeEmit, _TreeExposed } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UEmpty } from '../empty'\nimport { UScroll } from '../scroll'\nimport { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'\nimport UTreeNode from './tree-node.vue'\nimport { useCheck } from './use-check'\nimport { useFilter } from './use-filter'\nimport { useSelect } from './use-select'\nimport { useTreeNodes } from './use-tree-nodes'\n\ndefineOptions({\n  name: 'Tree'\n})\n\nconst props = withDefaults(defineProps<TreeProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  childrenKey: 'children',\n  expandOnClickNode: false,\n  checkStrictly: false,\n  data: () => []\n})\n\nconst emit = defineEmits<TreeEmit>()\n\nconst cls = bem('tree')\n\nconst { formProps } = useFormComponent()\n\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default'\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('selectable', props.selectable),\n    bem.is('checkable', props.checkable)\n  ]\n})\n\ndefineSlots<{\n  default: (props: TreeSlotsScope) => any\n}>()\n\nconst slots = useSlots()\n\nfunction getTreeSlotsNode(ctx: TreeSlotsScope): VNode[] | string | undefined {\n  return (props.slots?.default ?? slots.default)?.(ctx) ?? ctx.node.label\n}\n\nconst { nodes, forest, getFlattedNodes, nodeDict } = useTreeNodes({\n  props\n})\n\nwatch(\n  [() => props.selectable, () => props.checkable, forest],\n  ([s, c]) => {\n    // 如果选择或勾选，则不更新节点\n    if (s || c) return\n    getFlattedNodes()\n  },\n  { immediate: true }\n)\n\nconst { filter } = useFilter({ forest, getFlattedNodes })\n\nconst { handleSelect, selectedData } = useSelect({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst { checkedData, toggleCheck } = useCheck({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst estimateSize = (): number => {\n  // 基于 style.scss 中节点稳态高度推算的默认值；\n  // 实际高度仍由 `measureElement` 通过 ResizeObserver 回填覆盖。\n  switch (size.value) {\n    case 'small':\n      return 32\n    case 'large':\n      return 44\n    default:\n      return 36\n  }\n}\n\n// 80 阈值内化为消费者侧语义；低于此值时不启用虚拟化。\nconst virtualEnabled = computed(() => nodes.value.length > 80)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => nodes.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  // 仅在虚拟化启用时把内容容器的 height 撑开到 totalSize；\n  // 关闭时传 null，hook 会清除此前写入的内联 height，回到 CSS 默认。\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  estimateSize,\n  gap: 2,\n  // 以节点稳定 key 作为虚拟项身份，展开 / 收起 / 过滤引起的 nodes 数组变更\n  // 保留未移动节点的真实测量值，避免再次滚动首屏抖动。\n  getItemKey: (i) => nodes.value[i]?.key ?? i\n})\n\n// 身份稳定性已由底层 `getItemKey` 保证；直接以 `node.key` 作为 Vue 层 key。\n// `item.index` 仅作为 nodes / snapshot 竞态边缘的 fallback。\nconst virtualNodes = computed(() => {\n  const _nodes = nodes.value\n  return items.value.map((item) => {\n    const node = _nodes[item.index]!\n    return {\n      node,\n      key: node?.key ?? item.index,\n      offset: item.start,\n      index: item.index\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nfunction scrollIntoView() {\n  const { selectable, checkable, scrollToView } = props\n  if (!scrollToView || (!selectable && !checkable) || !nodes.value) return\n  let index = -1\n\n  if (selectable) {\n    if (!selectedData.value) return\n    index = nodes.value.findIndex((node) => node.data === selectedData.value)\n  } else if (checkable) {\n    if (!checkedData.size) return\n    index = nodes.value.findIndex((node) => checkedData.has(node.data))\n  }\n\n  if (virtualEnabled.value) {\n    scrollTo(index)\n  } else {\n    const { contentRef, containerRef } = scrollRef.value ?? {}\n    const el = contentRef?.children[index]\n    el && scrollIntoContainerView(el as HTMLElement, containerRef ?? null)\n  }\n}\n\nwatchEffect(() => {\n  nextFrame(() => {\n    scrollIntoView()\n  })\n})\n\nprovide(TreeDIKey, {\n  cls,\n  selectedData,\n  checkedData,\n  getFlattedNodes,\n  getTreeSlotsNode,\n  treeEmit: emit as TreeEmit,\n  treeProps: props as TreeProps,\n  toggleCheck: toggleCheck as TreeConText['toggleCheck'],\n  handleSelect: handleSelect as TreeConText['handleSelect']\n})\n\ndefineExpose<_TreeExposed>({\n  filter,\n  forest,\n  nodes,\n  checkNode: toggleCheck,\n  selectNode: handleSelect,\n  checkAll(check: boolean) {\n    forest.value.roots.forEach((node) => {\n      toggleCheck(node, check)\n    })\n  },\n  getSelected() {\n    return selectedData\n  },\n  getChecked() {\n    return Array.from(checkedData)\n  },\n  scrollTo,\n\n  expandAll() {\n    forest.value.dfs((node) => {\n      node.expanded = true\n    })\n    getFlattedNodes()\n  },\n  collapseAll() {\n    forest.value.dfs((node) => {\n      node.expanded = false\n    })\n    getFlattedNodes()\n  }\n})\n</script>\n"],"mappings":"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"}

package/dist/components/tree/tree.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_base: _$vue.DefineComponent<TreeProps, _TreeExposed, {}, {},
 }>, {
   labelKey: string;
   valueKey: string;
-  childrenKey: string;
   data: Record<string, any>[];
   expandOnClickNode: boolean;
+  childrenKey: string;
   checkStrictly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/tree/use-check.js

@@ -1,15 +1,38 @@
 import { nextTick, watch } from "vue";
 import { dfs, o } from "@cat-kit/core";
 //#region src/components/tree/use-check.ts
+/**
+* 展开目标节点的所有祖先。返回是否发生了实际展开。
+*/
+function expandAncestors(node) {
+	let changed = false;
+	node.bubbleSet((n) => {
+		if (n.parent) {
+			if (n.parent.expanded) return false;
+			n.parent.expanded = true;
+			changed = true;
+		}
+	});
+	return changed;
+}
 function useCheck(options) {
 	const { emit, props, nodeDict, getFlattedNodes } = options;
 	const checkedData = /* @__PURE__ */ new Set();
+	/**
+	* 上一次回显使用的 value 集合（仅限 props.checked）。
+	* 用于在相同 `nodeDict` 下走差集回显，避免每次全量清空再重建。
+	*/
+	let lastCheckedSet = /* @__PURE__ */ new Set();
+	/** 最近一次参与差集比较的 nodeDict 引用；引用变化时视为整棵树重建。 */
+	let lastDict = null;
 	function checkNode(node) {
+		if (node.checked) return;
 		node.checked = true;
 		if (node.parent) node.parent.childrenCheckCount++;
 		checkedData.add(node.data);
 	}
 	function uncheckNode(node) {
+		if (!node.checked) return;
 		node.checked = false;
 		if (node.parent) node.parent.childrenCheckCount--;
 		checkedData.delete(node.data);
@@ -18,23 +41,35 @@ function useCheck(options) {
 	* 模型值是否由事件触发
 	*/
 	let checkedByEvent = false;
-	watch([() => props.checked, nodeDict], ([c, nodeDict]) => {
+	watch([() => props.checked, nodeDict], ([c, dict]) => {
 		if (checkedByEvent || !props.checkable) return;
-		if (!nodeDict.size) return;
-		checkedData.clear();
-		c?.forEach((v) => {
-			const node = nodeDict.get(v);
+		if (!dict.size) return;
+		const nextSet = new Set(c ?? []);
+		const dictChanged = dict !== lastDict;
+		if (dictChanged) {
+			checkedData.clear();
+			lastCheckedSet = /* @__PURE__ */ new Set();
+		}
+		let mutated = false;
+		for (const v of lastCheckedSet) if (!nextSet.has(v)) {
+			const node = dict.get(v);
+			if (node) {
+				uncheckNode(node);
+				mutated = true;
+			}
+		}
+		let ancestorsExpanded = false;
+		for (const v of nextSet) if (!lastCheckedSet.has(v) || dictChanged) {
+			const node = dict.get(v);
 			if (node) {
 				checkNode(node);
-				node.bubbleSet((node) => {
-					if (node.parent) {
-						if (node.parent.expanded) return false;
-						node.parent.expanded = true;
-					}
-				});
+				mutated = true;
+				if (expandAncestors(node)) ancestorsExpanded = true;
 			}
-		});
-		getFlattedNodes();
+		}
+		lastCheckedSet = nextSet;
+		lastDict = dict;
+		if (mutated || ancestorsExpanded) getFlattedNodes();
 	}, { immediate: true });
 	function handleCheck(node, ctrlKey) {
 		const { checkStrictly } = props;
@@ -64,7 +99,10 @@ function useCheck(options) {
 		checkedByEvent = true;
 		check ? handleCheck(node, ctrlKey) : handleUncheck(node, ctrlKey);
 		const checkedArr = Array.from(checkedData);
-		emit("update:checked", checkedArr.map((item) => o(item).get(props.valueKey)), checkedArr);
+		const valueKey = props.valueKey;
+		const nextValues = checkedArr.map((item) => o(item).get(valueKey));
+		lastCheckedSet = new Set(nextValues);
+		emit("update:checked", nextValues, checkedArr);
 		nextTick(() => {
 			checkedByEvent = false;
 		});

package/dist/components/tree/use-check.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-check.js","names":[],"sources":["../../../src/components/tree/use-check.ts"],"sourcesContent":["import { dfs, o } from '@cat-kit/core'\nimport { nextTick, watch, type ComputedRef } from 'vue'\n\nimport type { TreeEmit, TreeProps } from '../../types'\nimport type { TreeNode } from './tree-node'\n\ninterface Options {\n  emit: TreeEmit\n  props: TreeProps\n  nodeDict: ComputedRef<Map<any, TreeNode>>\n  getFlattedNodes: () => void\n}\n\ninterface UseCheckReturned {\n  checkedData: Set<Record<string, any>>\n  toggleCheck: (node: TreeNode, check: boolean, ctrlKey?: boolean) => void\n}\n\nexport function useCheck(options: Options): UseCheckReturned {\n  const { emit, props, nodeDict, getFlattedNodes } = options\n\n  const checkedData = new Set<Record<string, any>>()\n\n  function checkNode(node: TreeNode) {\n    node.checked = true\n    if (node.parent) {\n      node.parent.childrenCheckCount++\n    }\n    checkedData.add(node.data)\n  }\n\n  function uncheckNode(node: TreeNode) {\n    node.checked = false\n    if (node.parent) {\n      node.parent.childrenCheckCount--\n    }\n    checkedData.delete(node.data)\n  }\n\n  /**\n   * 模型值是否由事件触发\n   */\n  let checkedByEvent = false\n\n  // 回显\n  watch(\n    [() => props.checked, nodeDict],\n    ([c, nodeDict]) => {\n      // 事件已经触发模型变更了，所以不再进行下面的计算\n      if (checkedByEvent || !props.checkable) return\n\n      if (!nodeDict.size) return\n      checkedData.clear()\n\n      c?.forEach((v) => {\n        const node = nodeDict.get(v)\n        if (node) {\n          checkNode(node)\n          node.bubbleSet((node) => {\n            if (node.parent) {\n              if (node.parent.expanded) return false\n              node.parent.expanded = true\n            }\n          })\n        }\n      })\n\n      getFlattedNodes()\n    },\n    { immediate: true }\n  )\n\n  function handleCheck(node: TreeNode, ctrlKey?: boolean) {\n    const { checkStrictly } = props\n\n    if (ctrlKey) {\n      checkNode(node)\n    } else {\n      dfs(\n        node as unknown as Record<string, unknown>,\n        (n) => {\n          const tn = n as unknown as TreeNode\n          !tn.disabled && checkNode(tn)\n        },\n        props.childrenKey ?? 'children'\n      )\n    }\n\n    // 非严格选择时还需要更新祖先节点，\n    // 一旦子节点全部选中，父节点也要设置为选中状态\n    if (!checkStrictly) {\n      node.bubbleSet((node) => {\n        const { parent } = node\n\n        if (parent) {\n          const parentChecked = parent.childrenCheckCount === parent.children!.length\n\n          parentChecked ? checkNode(parent) : uncheckNode(parent)\n        }\n      })\n    }\n  }\n\n  function handleUncheck(node: TreeNode, ctrlKey?: boolean) {\n    const { checkStrictly } = props\n    if (ctrlKey) {\n      uncheckNode(node)\n    } else {\n      dfs(\n        node as unknown as Record<string, unknown>,\n        (n) => {\n          const tn = n as unknown as TreeNode\n          !tn.disabled && uncheckNode(tn)\n        },\n        props.childrenKey ?? 'children'\n      )\n    }\n\n    // 非严格模式下，取消选中时，需要更新父节点\n    if (!checkStrictly) {\n      node.bubbleSet((node) => {\n        const { parent } = node\n        if (parent) {\n          uncheckNode(parent)\n        }\n      })\n    }\n  }\n\n  function toggleCheck(node: TreeNode, check: boolean, ctrlKey?: boolean) {\n    checkedByEvent = true\n\n    check ? handleCheck(node, ctrlKey) : handleUncheck(node, ctrlKey)\n\n    const checkedArr = Array.from(checkedData)\n\n    emit(\n      'update:checked',\n      checkedArr.map((item) => o(item).get(props.valueKey!)),\n      checkedArr\n    )\n\n    nextTick(() => {\n      checkedByEvent = false\n    })\n  }\n\n  return { checkedData, toggleCheck }\n}\n"],"mappings":";;;AAkBA,SAAgB,SAAS,SAAoC;CAC3D,MAAM,EAAE,MAAM,OAAO,UAAU,oBAAoB;CAEnD,MAAM,8BAAc,IAAI,KAA0B;CAElD,SAAS,UAAU,MAAgB;AACjC,OAAK,UAAU;AACf,MAAI,KAAK,OACP,MAAK,OAAO;AAEd,cAAY,IAAI,KAAK,KAAK;;CAG5B,SAAS,YAAY,MAAgB;AACnC,OAAK,UAAU;AACf,MAAI,KAAK,OACP,MAAK,OAAO;AAEd,cAAY,OAAO,KAAK,KAAK;;;;;CAM/B,IAAI,iBAAiB;AAGrB,OACE,OAAO,MAAM,SAAS,SAAS,GAC9B,CAAC,GAAG,cAAc;AAEjB,MAAI,kBAAkB,CAAC,MAAM,UAAW;AAExC,MAAI,CAAC,SAAS,KAAM;AACpB,cAAY,OAAO;AAEnB,KAAG,SAAS,MAAM;GAChB,MAAM,OAAO,SAAS,IAAI,EAAE;AAC5B,OAAI,MAAM;AACR,cAAU,KAAK;AACf,SAAK,WAAW,SAAS;AACvB,SAAI,KAAK,QAAQ;AACf,UAAI,KAAK,OAAO,SAAU,QAAO;AACjC,WAAK,OAAO,WAAW;;MAEzB;;IAEJ;AAEF,mBAAiB;IAEnB,EAAE,WAAW,MAAM,CACpB;CAED,SAAS,YAAY,MAAgB,SAAmB;EACtD,MAAM,EAAE,kBAAkB;AAE1B,MAAI,QACF,WAAU,KAAK;MAEf,KACE,OACC,MAAM;GACL,MAAM,KAAK;AACX,IAAC,GAAG,YAAY,UAAU,GAAG;KAE/B,MAAM,eAAe,WACtB;AAKH,MAAI,CAAC,cACH,MAAK,WAAW,SAAS;GACvB,MAAM,EAAE,WAAW;AAEnB,OAAI,OACoB,QAAO,uBAAuB,OAAO,SAAU,SAErD,UAAU,OAAO,GAAG,YAAY,OAAO;IAEzD;;CAIN,SAAS,cAAc,MAAgB,SAAmB;EACxD,MAAM,EAAE,kBAAkB;AAC1B,MAAI,QACF,aAAY,KAAK;MAEjB,KACE,OACC,MAAM;GACL,MAAM,KAAK;AACX,IAAC,GAAG,YAAY,YAAY,GAAG;KAEjC,MAAM,eAAe,WACtB;AAIH,MAAI,CAAC,cACH,MAAK,WAAW,SAAS;GACvB,MAAM,EAAE,WAAW;AACnB,OAAI,OACF,aAAY,OAAO;IAErB;;CAIN,SAAS,YAAY,MAAgB,OAAgB,SAAmB;AACtE,mBAAiB;AAEjB,UAAQ,YAAY,MAAM,QAAQ,GAAG,cAAc,MAAM,QAAQ;EAEjE,MAAM,aAAa,MAAM,KAAK,YAAY;AAE1C,OACE,kBACA,WAAW,KAAK,SAAS,EAAE,KAAK,CAAC,IAAI,MAAM,SAAU,CAAC,EACtD,WACD;AAED,iBAAe;AACb,oBAAiB;IACjB;;AAGJ,QAAO;EAAE;EAAa;EAAa"}
+{"version":3,"file":"use-check.js","names":[],"sources":["../../../src/components/tree/use-check.ts"],"sourcesContent":["import { dfs, o } from '@cat-kit/core'\nimport { nextTick, watch, type ComputedRef } from 'vue'\n\nimport type { TreeEmit, TreeProps } from '../../types'\nimport type { TreeNode } from './tree-node'\n\ninterface Options {\n  emit: TreeEmit\n  props: TreeProps\n  nodeDict: ComputedRef<Map<any, TreeNode>>\n  getFlattedNodes: () => void\n}\n\ninterface UseCheckReturned {\n  checkedData: Set<Record<string, any>>\n  toggleCheck: (node: TreeNode, check: boolean, ctrlKey?: boolean) => void\n}\n\n/**\n * 展开目标节点的所有祖先。返回是否发生了实际展开。\n */\nfunction expandAncestors(node: TreeNode): boolean {\n  let changed = false\n  node.bubbleSet((n) => {\n    if (n.parent) {\n      if (n.parent.expanded) return false\n      n.parent.expanded = true\n      changed = true\n    }\n  })\n  return changed\n}\n\nexport function useCheck(options: Options): UseCheckReturned {\n  const { emit, props, nodeDict, getFlattedNodes } = options\n\n  const checkedData = new Set<Record<string, any>>()\n\n  /**\n   * 上一次回显使用的 value 集合（仅限 props.checked）。\n   * 用于在相同 `nodeDict` 下走差集回显，避免每次全量清空再重建。\n   */\n  let lastCheckedSet = new Set<unknown>()\n  /** 最近一次参与差集比较的 nodeDict 引用；引用变化时视为整棵树重建。 */\n  let lastDict: Map<any, TreeNode> | null = null\n\n  function checkNode(node: TreeNode): void {\n    if (node.checked) return\n    node.checked = true\n    if (node.parent) {\n      node.parent.childrenCheckCount++\n    }\n    checkedData.add(node.data)\n  }\n\n  function uncheckNode(node: TreeNode): void {\n    if (!node.checked) return\n    node.checked = false\n    if (node.parent) {\n      node.parent.childrenCheckCount--\n    }\n    checkedData.delete(node.data)\n  }\n\n  /**\n   * 模型值是否由事件触发\n   */\n  let checkedByEvent = false\n\n  // 回显\n  watch(\n    [() => props.checked, nodeDict],\n    ([c, dict]) => {\n      // 事件已经触发模型变更了，所以不再进行下面的计算\n      if (checkedByEvent || !props.checkable) return\n      if (!dict.size) return\n\n      const nextSet = new Set<unknown>(c ?? [])\n\n      // 森林重建（dict 引用变化）→ 走全量清空重建路径，\n      // 因为所有 TreeNode 实例都是新的，上一轮缓存的 lastCheckedSet 失效。\n      const dictChanged = dict !== lastDict\n      if (dictChanged) {\n        checkedData.clear()\n        lastCheckedSet = new Set()\n      }\n\n      let mutated = false\n\n      // 取消：上一轮有但本轮没有的 value\n      for (const v of lastCheckedSet) {\n        if (!nextSet.has(v)) {\n          const node = dict.get(v)\n          if (node) {\n            uncheckNode(node)\n            mutated = true\n          }\n        }\n      }\n\n      // 新增：本轮有但上一轮没有的 value\n      let ancestorsExpanded = false\n      for (const v of nextSet) {\n        if (!lastCheckedSet.has(v) || dictChanged) {\n          const node = dict.get(v)\n          if (node) {\n            checkNode(node)\n            mutated = true\n            if (expandAncestors(node)) {\n              ancestorsExpanded = true\n            }\n          }\n        }\n      }\n\n      lastCheckedSet = nextSet\n      lastDict = dict\n\n      // 只在真实发生变化时才触发扁平化，避免空转。\n      if (mutated || ancestorsExpanded) {\n        getFlattedNodes()\n      }\n    },\n    { immediate: true }\n  )\n\n  function handleCheck(node: TreeNode, ctrlKey?: boolean) {\n    const { checkStrictly } = props\n\n    if (ctrlKey) {\n      checkNode(node)\n    } else {\n      dfs(\n        node as unknown as Record<string, unknown>,\n        (n) => {\n          const tn = n as unknown as TreeNode\n          !tn.disabled && checkNode(tn)\n        },\n        props.childrenKey ?? 'children'\n      )\n    }\n\n    // 非严格选择时还需要更新祖先节点，\n    // 一旦子节点全部选中，父节点也要设置为选中状态\n    if (!checkStrictly) {\n      node.bubbleSet((node) => {\n        const { parent } = node\n\n        if (parent) {\n          const parentChecked = parent.childrenCheckCount === parent.children!.length\n\n          parentChecked ? checkNode(parent) : uncheckNode(parent)\n        }\n      })\n    }\n  }\n\n  function handleUncheck(node: TreeNode, ctrlKey?: boolean) {\n    const { checkStrictly } = props\n    if (ctrlKey) {\n      uncheckNode(node)\n    } else {\n      dfs(\n        node as unknown as Record<string, unknown>,\n        (n) => {\n          const tn = n as unknown as TreeNode\n          !tn.disabled && uncheckNode(tn)\n        },\n        props.childrenKey ?? 'children'\n      )\n    }\n\n    // 非严格模式下，取消选中时，需要更新父节点\n    if (!checkStrictly) {\n      node.bubbleSet((node) => {\n        const { parent } = node\n        if (parent) {\n          uncheckNode(parent)\n        }\n      })\n    }\n  }\n\n  function toggleCheck(node: TreeNode, check: boolean, ctrlKey?: boolean) {\n    checkedByEvent = true\n\n    check ? handleCheck(node, ctrlKey) : handleUncheck(node, ctrlKey)\n\n    const checkedArr = Array.from(checkedData)\n\n    const valueKey = props.valueKey!\n    const nextValues = checkedArr.map((item) => o(item).get(valueKey) as unknown)\n\n    // 与外部 checked 保持差集缓存同步，避免下一次 watch 回调把刚勾选的值又误判为“新增”。\n    lastCheckedSet = new Set(nextValues)\n\n    emit('update:checked', nextValues as any[], checkedArr)\n\n    nextTick(() => {\n      checkedByEvent = false\n    })\n  }\n\n  return { checkedData, toggleCheck }\n}\n"],"mappings":"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"}

package/dist/components/tree/use-tree-nodes.js

@@ -1,14 +1,19 @@
 import { TreeNode as TreeNode$1 } from "./tree-node2.js";
-import { computed, shallowRef } from "vue";
+import { computed, shallowRef, triggerRef, watch } from "vue";
 import { Forest } from "@cat-kit/core";
 //#region src/components/tree/use-tree-nodes.ts
 function useTreeNodes(options) {
 	const { props } = options;
-	/** 森林 */
-	const forest = computed(() => {
+	const forestRef = shallowRef(new Forest({
+		data: [],
+		childrenKey: props.childrenKey ?? "children"
+	}));
+	const nodeDictRef = shallowRef(/* @__PURE__ */ new Map());
+	const nodes = shallowRef([]);
+	function buildForest() {
 		const { disabledNode, expandAll = false, valueKey, labelKey } = props;
 		const childrenKey = props.childrenKey ?? "children";
-		function createNode(data, index, depth, _f, parent) {
+		function createNode(data, index, depth, parent) {
 			const node = new TreeNode$1({
 				data,
 				index,
@@ -21,36 +26,58 @@ function useTreeNodes(options) {
 			return node;
 		}
 		return new Forest({
-			data: props.data,
+			data: props.data ?? [],
 			childrenKey,
-			createNode: disabledNode ? (data, index, depth, f, parent) => {
-				const node = createNode(data, index, depth, f, parent);
+			createNode: disabledNode ? (data, index, depth, _f, parent) => {
+				const node = createNode(data, index, depth, parent);
 				if (data) node.disabled = disabledNode(data, node) ?? false;
 				return node;
-			} : (data, index, depth, f, parent) => createNode(data, index, depth, f, parent)
+			} : (data, index, depth, _f, parent) => createNode(data, index, depth, parent)
 		});
-	});
-	/** 碾平后的节点 */
-	const nodes = shallowRef([]);
-	/**
-	* 节点的字典，key为指定的valueKey的值
-	*/
-	const nodeDict = computed(() => {
-		const dict = /* @__PURE__ */ new Map();
-		forest.value.dfs((node) => {
-			dict.set(node.key, node);
+	}
+	function rebuildForest() {
+		const nextForest = buildForest();
+		const nextDict = /* @__PURE__ */ new Map();
+		nextForest.dfs((node) => {
+			nextDict.set(node.key, node);
 		});
-		return dict;
-	});
-	/** 获取碾平后的节点 */
+		forestRef.value = nextForest;
+		nodeDictRef.value = nextDict;
+		getFlattedNodes();
+	}
+	/** 按展开与可见性扁平化：仅一次 DFS。 */
 	function getFlattedNodes() {
-		nodes.value = forest.value.flattenVisible((n) => n.expanded).filter((n) => n.visible);
+		const result = [];
+		const roots = forestRef.value.roots;
+		const stack = [];
+		for (let i = roots.length - 1; i >= 0; i--) stack.push(roots[i]);
+		while (stack.length) {
+			const node = stack.pop();
+			if (!node.visible) continue;
+			result.push(node);
+			if (node.expanded && node.children && node.children.length) for (let i = node.children.length - 1; i >= 0; i--) stack.push(node.children[i]);
+		}
+		nodes.value = result;
+	}
+	function triggerNodes() {
+		triggerRef(nodes);
 	}
+	watch([
+		() => props.data,
+		() => props.disabledNode,
+		() => props.childrenKey,
+		() => props.valueKey,
+		() => props.labelKey,
+		() => props.expandAll
+	], () => {
+		rebuildForest();
+	}, { immediate: true });
 	return {
 		nodes,
-		forest,
+		forest: computed(() => forestRef.value),
 		getFlattedNodes,
-		nodeDict
+		nodeDict: computed(() => nodeDictRef.value),
+		triggerNodes
 	};
 }
 //#endregion

package/dist/components/tree/use-tree-nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree-nodes.js","names":["TreeNode"],"sources":["../../../src/components/tree/use-tree-nodes.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { computed, shallowRef, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { TreeProps } from '../../types'\nimport { TreeNode } from './tree-node'\n\ninterface Options {\n  props: TreeProps\n}\n\ninterface UseTreeNodesReturned {\n  nodes: ShallowRef<TreeNode[]>\n  forest: ComputedRef<Forest<Record<string, unknown>, any>>\n  getFlattedNodes: () => void\n  nodeDict: ComputedRef<Map<string | number, TreeNode>>\n}\nexport function useTreeNodes(options: Options): UseTreeNodesReturned {\n  const { props } = options\n\n  /** 森林 */\n  const forest = computed(() => {\n    const { disabledNode, expandAll = false, valueKey, labelKey } = props\n    const childrenKey = props.childrenKey ?? 'children'\n\n    function createNode(\n      data: Record<string, any>,\n      index: number,\n      depth: number,\n      _f: Forest<Record<string, unknown>, any>,\n      parent?: TreeNode\n    ) {\n      const node = new TreeNode({\n        data,\n        index,\n        depth,\n        parent,\n        valueKey: valueKey!,\n        labelKey: labelKey!\n      })\n      node.expanded = expandAll\n      return node\n    }\n\n    return new Forest<Record<string, unknown>, any>({\n      data: props.data! as Record<string, unknown>[],\n      childrenKey,\n      createNode: disabledNode\n        ? (data, index, depth, f, parent) => {\n            const node = createNode(\n              data as Record<string, any>,\n              index,\n              depth,\n              f,\n              parent as TreeNode\n            )\n            if (data) {\n              node.disabled = disabledNode(data, node) ?? false\n            }\n            return node\n          }\n        : (data, index, depth, f, parent) =>\n            createNode(data as Record<string, any>, index, depth, f, parent as TreeNode)\n    })\n  })\n\n  /** 碾平后的节点 */\n  const nodes = shallowRef<TreeNode[]>([])\n\n  /**\n   * 节点的字典，key为指定的valueKey的值\n   */\n  const nodeDict = computed(() => {\n    const dict = new Map<string | number, TreeNode>()\n\n    forest.value.dfs((node) => {\n      dict.set(node.key, node)\n    })\n\n    return dict\n  })\n\n  /** 获取碾平后的节点 */\n  function getFlattedNodes() {\n    nodes.value = forest.value.flattenVisible((n) => n.expanded).filter((n) => n.visible)\n  }\n\n  return { nodes, forest, getFlattedNodes, nodeDict }\n}\n"],"mappings":";;;;AAgBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,UAAU;;CAGlB,MAAM,SAAS,eAAe;EAC5B,MAAM,EAAE,cAAc,YAAY,OAAO,UAAU,aAAa;EAChE,MAAM,cAAc,MAAM,eAAe;EAEzC,SAAS,WACP,MACA,OACA,OACA,IACA,QACA;GACA,MAAM,OAAO,IAAIA,WAAS;IACxB;IACA;IACA;IACA;IACU;IACA;IACX,CAAC;AACF,QAAK,WAAW;AAChB,UAAO;;AAGT,SAAO,IAAI,OAAqC;GAC9C,MAAM,MAAM;GACZ;GACA,YAAY,gBACP,MAAM,OAAO,OAAO,GAAG,WAAW;IACjC,MAAM,OAAO,WACX,MACA,OACA,OACA,GACA,OACD;AACD,QAAI,KACF,MAAK,WAAW,aAAa,MAAM,KAAK,IAAI;AAE9C,WAAO;QAER,MAAM,OAAO,OAAO,GAAG,WACtB,WAAW,MAA6B,OAAO,OAAO,GAAG,OAAmB;GACnF,CAAC;GACF;;CAGF,MAAM,QAAQ,WAAuB,EAAE,CAAC;;;;CAKxC,MAAM,WAAW,eAAe;EAC9B,MAAM,uBAAO,IAAI,KAAgC;AAEjD,SAAO,MAAM,KAAK,SAAS;AACzB,QAAK,IAAI,KAAK,KAAK,KAAK;IACxB;AAEF,SAAO;GACP;;CAGF,SAAS,kBAAkB;AACzB,QAAM,QAAQ,OAAO,MAAM,gBAAgB,MAAM,EAAE,SAAS,CAAC,QAAQ,MAAM,EAAE,QAAQ;;AAGvF,QAAO;EAAE;EAAO;EAAQ;EAAiB;EAAU"}
+{"version":3,"file":"use-tree-nodes.js","names":["TreeNode"],"sources":["../../../src/components/tree/use-tree-nodes.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { computed, shallowRef, triggerRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { TreeProps } from '../../types'\nimport { TreeNode } from './tree-node'\n\ninterface Options {\n  props: TreeProps\n}\n\ninterface UseTreeNodesReturned {\n  nodes: ShallowRef<TreeNode[]>\n  forest: ComputedRef<Forest<Record<string, unknown>, any>>\n  getFlattedNodes: () => void\n  nodeDict: ComputedRef<Map<string | number, TreeNode>>\n  /** 强制刷新 `nodes` 的订阅者（供字段级别变化但列表引用不变时手动触发）。 */\n  triggerNodes: () => void\n}\n\nexport function useTreeNodes(options: Options): UseTreeNodesReturned {\n  const { props } = options\n\n  // forest / nodeDict 保持为 shallowRef 而非 computed：\n  // - computed 会因为任一 prop 变化（尤其是内联 disabledNode 函数）而整棵重建，\n  //   丢失 expanded/checked/visible 等运行时状态；\n  // - 显式 watch 仅在真正影响结构的输入变化时才重建，行为可控、可测量。\n  const forestRef = shallowRef<Forest<Record<string, unknown>, any>>(\n    new Forest<Record<string, unknown>, any>({\n      data: [],\n      childrenKey: props.childrenKey ?? 'children'\n    })\n  )\n\n  const nodeDictRef = shallowRef<Map<string | number, TreeNode>>(new Map())\n\n  const nodes = shallowRef<TreeNode[]>([])\n\n  function buildForest(): Forest<Record<string, unknown>, any> {\n    const { disabledNode, expandAll = false, valueKey, labelKey } = props\n    const childrenKey = props.childrenKey ?? 'children'\n\n    function createNode(\n      data: Record<string, any>,\n      index: number,\n      depth: number,\n      parent?: TreeNode\n    ): TreeNode {\n      const node = new TreeNode({\n        data,\n        index,\n        depth,\n        parent,\n        valueKey: valueKey!,\n        labelKey: labelKey!\n      })\n      node.expanded = expandAll\n      return node\n    }\n\n    return new Forest<Record<string, unknown>, any>({\n      data: (props.data ?? []) as Record<string, unknown>[],\n      childrenKey,\n      createNode: disabledNode\n        ? (data, index, depth, _f, parent) => {\n            const node = createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n            if (data) {\n              node.disabled = disabledNode(data as Record<string, any>, node) ?? false\n            }\n            return node\n          }\n        : (data, index, depth, _f, parent) =>\n            createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n    })\n  }\n\n  function rebuildForest(): void {\n    const nextForest = buildForest()\n    const nextDict = new Map<string | number, TreeNode>()\n\n    // 构建森林的同时一次 DFS 同步填充字典，\n    // 避免旧版 “forest computed → nodeDict computed” 两次完整遍历。\n    nextForest.dfs((node) => {\n      nextDict.set(node.key, node)\n    })\n\n    forestRef.value = nextForest\n    nodeDictRef.value = nextDict\n\n    getFlattedNodes()\n  }\n\n  /** 按展开与可见性扁平化：仅一次 DFS。 */\n  function getFlattedNodes(): void {\n    const result: TreeNode[] = []\n    const roots = forestRef.value.roots as TreeNode[]\n\n    const stack: TreeNode[] = []\n    for (let i = roots.length - 1; i >= 0; i--) {\n      stack.push(roots[i]!)\n    }\n\n    while (stack.length) {\n      const node = stack.pop()!\n      if (!node.visible) continue\n      result.push(node)\n      if (node.expanded && node.children && node.children.length) {\n        for (let i = node.children.length - 1; i >= 0; i--) {\n          stack.push(node.children[i]!)\n        }\n      }\n    }\n\n    nodes.value = result\n  }\n\n  function triggerNodes(): void {\n    triggerRef(nodes)\n  }\n\n  watch(\n    [\n      () => props.data,\n      () => props.disabledNode,\n      () => props.childrenKey,\n      () => props.valueKey,\n      () => props.labelKey,\n      () => props.expandAll\n    ],\n    () => {\n      rebuildForest()\n    },\n    { immediate: true }\n  )\n\n  const forest = computed(() => forestRef.value)\n  const nodeDict = computed(() => nodeDictRef.value)\n\n  return { nodes, forest, getFlattedNodes, nodeDict, triggerNodes }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,UAAU;CAMlB,MAAM,YAAY,WAChB,IAAI,OAAqC;EACvC,MAAM,EAAE;EACR,aAAa,MAAM,eAAe;EACnC,CAAC,CACH;CAED,MAAM,cAAc,2BAA2C,IAAI,KAAK,CAAC;CAEzE,MAAM,QAAQ,WAAuB,EAAE,CAAC;CAExC,SAAS,cAAoD;EAC3D,MAAM,EAAE,cAAc,YAAY,OAAO,UAAU,aAAa;EAChE,MAAM,cAAc,MAAM,eAAe;EAEzC,SAAS,WACP,MACA,OACA,OACA,QACU;GACV,MAAM,OAAO,IAAIA,WAAS;IACxB;IACA;IACA;IACA;IACU;IACA;IACX,CAAC;AACF,QAAK,WAAW;AAChB,UAAO;;AAGT,SAAO,IAAI,OAAqC;GAC9C,MAAO,MAAM,QAAQ,EAAE;GACvB;GACA,YAAY,gBACP,MAAM,OAAO,OAAO,IAAI,WAAW;IAClC,MAAM,OAAO,WAAW,MAA6B,OAAO,OAAO,OAAmB;AACtF,QAAI,KACF,MAAK,WAAW,aAAa,MAA6B,KAAK,IAAI;AAErE,WAAO;QAER,MAAM,OAAO,OAAO,IAAI,WACvB,WAAW,MAA6B,OAAO,OAAO,OAAmB;GAChF,CAAC;;CAGJ,SAAS,gBAAsB;EAC7B,MAAM,aAAa,aAAa;EAChC,MAAM,2BAAW,IAAI,KAAgC;AAIrD,aAAW,KAAK,SAAS;AACvB,YAAS,IAAI,KAAK,KAAK,KAAK;IAC5B;AAEF,YAAU,QAAQ;AAClB,cAAY,QAAQ;AAEpB,mBAAiB;;;CAInB,SAAS,kBAAwB;EAC/B,MAAM,SAAqB,EAAE;EAC7B,MAAM,QAAQ,UAAU,MAAM;EAE9B,MAAM,QAAoB,EAAE;AAC5B,OAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,IACrC,OAAM,KAAK,MAAM,GAAI;AAGvB,SAAO,MAAM,QAAQ;GACnB,MAAM,OAAO,MAAM,KAAK;AACxB,OAAI,CAAC,KAAK,QAAS;AACnB,UAAO,KAAK,KAAK;AACjB,OAAI,KAAK,YAAY,KAAK,YAAY,KAAK,SAAS,OAClD,MAAK,IAAI,IAAI,KAAK,SAAS,SAAS,GAAG,KAAK,GAAG,IAC7C,OAAM,KAAK,KAAK,SAAS,GAAI;;AAKnC,QAAM,QAAQ;;CAGhB,SAAS,eAAqB;AAC5B,aAAW,MAAM;;AAGnB,OACE;QACQ,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;EACb,QACK;AACJ,iBAAe;IAEjB,EAAE,WAAW,MAAM,CACpB;AAKD,QAAO;EAAE;EAAO,QAHD,eAAe,UAAU,MAAM;EAGtB;EAAiB,UAFxB,eAAe,YAAY,MAAM;EAEC;EAAc"}

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -25,14 +25,14 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  placeholder: string;
-  clearable: boolean;
   readonly: boolean;
   labelKey: string;
   valueKey: string;
-  filterable: boolean;
+  placeholder: string;
+  clearable: boolean;
   minWidth: string;
   expandAll: boolean;
+  filterable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/watermark/watermark.vue.d.ts

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<WatermarkProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<WatermarkProps> & Readonly<{}>, {
-  fontSize: number;
   route: number;
+  fontSize: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;