@veltra/desktop 1.0.7 → 1.0.9

package/dist/components/tabs/use-tabs-bar.js

@@ -0,0 +1,105 @@
+import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+//#region src/components/tabs/use-tabs-bar.ts
+/**
+* 水平标签栏的溢出滚动逻辑：
+* - 计算 nav 按钮显隐与可用状态
+* - 提供按步滚动与活动标签自动滚入视野的方法
+* - 绑定 wheel / scroll / resize 事件
+*/
+function useTabsBar(options) {
+	const { viewportRef, listRef, items, model } = options;
+	const showNav = shallowRef(false);
+	const canPrev = shallowRef(false);
+	const canNext = shallowRef(false);
+	/** 依据 viewport 与内容尺寸推导滚动按钮可用状态 */
+	const updateNavState = () => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		const { scrollLeft, scrollWidth, clientWidth } = vp;
+		const overflowing = scrollWidth - clientWidth > 1;
+		showNav.value = overflowing;
+		canPrev.value = overflowing && scrollLeft > 0;
+		canNext.value = overflowing && scrollLeft + clientWidth < scrollWidth - 1;
+	};
+	/** 箭头按钮：按视口宽度 80% 的步长平滑滚动 */
+	const scrollByStep = (dir) => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.scrollTo({
+			left: vp.scrollLeft + dir * vp.clientWidth * .8,
+			behavior: "smooth"
+		});
+	};
+	/** 活动标签自动滚入视野 */
+	const ensureActiveVisible = () => {
+		const vp = viewportRef.value;
+		const list = listRef.value;
+		if (!vp || !list) return;
+		const activeKey = model.value;
+		if (!activeKey) return;
+		const activeIndex = items.value.findIndex((i) => i.key === activeKey);
+		if (activeIndex < 0) return;
+		const el = list.children[activeIndex];
+		if (!el) return;
+		const vpRect = vp.getBoundingClientRect();
+		const elRect = el.getBoundingClientRect();
+		if (elRect.left < vpRect.left) vp.scrollTo({
+			left: vp.scrollLeft + (elRect.left - vpRect.left) - 8,
+			behavior: "smooth"
+		});
+		else if (elRect.right > vpRect.right) vp.scrollTo({
+			left: vp.scrollLeft + (elRect.right - vpRect.right) + 8,
+			behavior: "smooth"
+		});
+	};
+	/** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 deltaX）不拦截 */
+	const handleWheel = (e) => {
+		if (!showNav.value) return;
+		const vp = viewportRef.value;
+		if (!vp) return;
+		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+		if (e.deltaY === 0) return;
+		e.preventDefault();
+		vp.scrollLeft += e.deltaY;
+	};
+	useResizeObserver({
+		targets: [viewportRef, listRef],
+		onResize: () => updateNavState()
+	});
+	watch(model, async () => {
+		await nextTick();
+		ensureActiveVisible();
+	});
+	watch(items, async () => {
+		await nextTick();
+		updateNavState();
+		ensureActiveVisible();
+	}, { deep: false });
+	onMounted(() => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.addEventListener("wheel", handleWheel, { passive: false });
+		vp.addEventListener("scroll", updateNavState, { passive: true });
+		updateNavState();
+		nextTick(ensureActiveVisible);
+	});
+	onBeforeUnmount(() => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.removeEventListener("wheel", handleWheel);
+		vp.removeEventListener("scroll", updateNavState);
+	});
+	return {
+		showNav,
+		canPrev,
+		canNext,
+		updateNavState,
+		scrollByStep,
+		ensureActiveVisible
+	};
+}
+//#endregion
+export { useTabsBar };
+
+//# sourceMappingURL=use-tabs-bar.js.map

package/dist/components/tabs/use-tabs-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-bar.js","names":[],"sources":["../../../src/components/tabs/use-tabs-bar.ts"],"sourcesContent":["import { useResizeObserver } from '@veltra/compositions'\nimport {\n  type ModelRef,\n  type Ref,\n  type ShallowRef,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  watch\n} from 'vue'\n\nimport type { TabItem } from '../../types'\n\ninterface UseTabsBarOptions {\n  viewportRef: ShallowRef<HTMLElement | undefined>\n  listRef: ShallowRef<HTMLElement | undefined>\n  items: Ref<TabItem[]>\n  model: ModelRef<string | undefined>\n}\n\n/**\n * 水平标签栏的溢出滚动逻辑：\n * - 计算 nav 按钮显隐与可用状态\n * - 提供按步滚动与活动标签自动滚入视野的方法\n * - 绑定 wheel / scroll / resize 事件\n */\nexport function useTabsBar(options: UseTabsBarOptions) {\n  const { viewportRef, listRef, items, model } = options\n\n  const showNav = shallowRef(false)\n  const canPrev = shallowRef(false)\n  const canNext = shallowRef(false)\n\n  /** 依据 viewport 与内容尺寸推导滚动按钮可用状态 */\n  const updateNavState = () => {\n    const vp = viewportRef.value\n    if (!vp) return\n    const { scrollLeft, scrollWidth, clientWidth } = vp\n    const overflowing = scrollWidth - clientWidth > 1\n    showNav.value = overflowing\n    canPrev.value = overflowing && scrollLeft > 0\n    canNext.value = overflowing && scrollLeft + clientWidth < scrollWidth - 1\n  }\n\n  /** 箭头按钮：按视口宽度 80% 的步长平滑滚动 */\n  const scrollByStep = (dir: 1 | -1) => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.scrollTo({ left: vp.scrollLeft + dir * vp.clientWidth * 0.8, behavior: 'smooth' })\n  }\n\n  /** 活动标签自动滚入视野 */\n  const ensureActiveVisible = () => {\n    const vp = viewportRef.value\n    const list = listRef.value\n    if (!vp || !list) return\n    const activeKey = model.value\n    if (!activeKey) return\n    const activeIndex = items.value.findIndex((i) => i.key === activeKey)\n    if (activeIndex < 0) return\n    const el = list.children[activeIndex] as HTMLElement | undefined\n    if (!el) return\n\n    const vpRect = vp.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    if (elRect.left < vpRect.left) {\n      vp.scrollTo({ left: vp.scrollLeft + (elRect.left - vpRect.left) - 8, behavior: 'smooth' })\n    } else if (elRect.right > vpRect.right) {\n      vp.scrollTo({ left: vp.scrollLeft + (elRect.right - vpRect.right) + 8, behavior: 'smooth' })\n    }\n  }\n\n  /** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 deltaX）不拦截 */\n  const handleWheel = (e: WheelEvent) => {\n    if (!showNav.value) return\n    const vp = viewportRef.value\n    if (!vp) return\n    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return\n    if (e.deltaY === 0) return\n    e.preventDefault()\n    vp.scrollLeft += e.deltaY\n  }\n\n  useResizeObserver({ targets: [viewportRef, listRef], onResize: () => updateNavState() })\n\n  watch(model, async () => {\n    await nextTick()\n    ensureActiveVisible()\n  })\n\n  watch(\n    items,\n    async () => {\n      await nextTick()\n      updateNavState()\n      ensureActiveVisible()\n    },\n    { deep: false }\n  )\n\n  onMounted(() => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.addEventListener('wheel', handleWheel, { passive: false })\n    vp.addEventListener('scroll', updateNavState, { passive: true })\n    updateNavState()\n    nextTick(ensureActiveVisible)\n  })\n\n  onBeforeUnmount(() => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.removeEventListener('wheel', handleWheel)\n    vp.removeEventListener('scroll', updateNavState)\n  })\n\n  return { showNav, canPrev, canNext, updateNavState, scrollByStep, ensureActiveVisible }\n}\n"],"mappings":";;;;;;;;;AA2BA,SAAgB,WAAW,SAA4B;CACrD,MAAM,EAAE,aAAa,SAAS,OAAO,UAAU;CAE/C,MAAM,UAAU,WAAW,MAAM;CACjC,MAAM,UAAU,WAAW,MAAM;CACjC,MAAM,UAAU,WAAW,MAAM;;CAGjC,MAAM,uBAAuB;EAC3B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;EACT,MAAM,EAAE,YAAY,aAAa,gBAAgB;EACjD,MAAM,cAAc,cAAc,cAAc;AAChD,UAAQ,QAAQ;AAChB,UAAQ,QAAQ,eAAe,aAAa;AAC5C,UAAQ,QAAQ,eAAe,aAAa,cAAc,cAAc;;;CAI1E,MAAM,gBAAgB,QAAgB;EACpC,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,SAAS;GAAE,MAAM,GAAG,aAAa,MAAM,GAAG,cAAc;GAAK,UAAU;GAAU,CAAC;;;CAIvF,MAAM,4BAA4B;EAChC,MAAM,KAAK,YAAY;EACvB,MAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,MAAM,CAAC,KAAM;EAClB,MAAM,YAAY,MAAM;AACxB,MAAI,CAAC,UAAW;EAChB,MAAM,cAAc,MAAM,MAAM,WAAW,MAAM,EAAE,QAAQ,UAAU;AACrE,MAAI,cAAc,EAAG;EACrB,MAAM,KAAK,KAAK,SAAS;AACzB,MAAI,CAAC,GAAI;EAET,MAAM,SAAS,GAAG,uBAAuB;EACzC,MAAM,SAAS,GAAG,uBAAuB;AACzC,MAAI,OAAO,OAAO,OAAO,KACvB,IAAG,SAAS;GAAE,MAAM,GAAG,cAAc,OAAO,OAAO,OAAO,QAAQ;GAAG,UAAU;GAAU,CAAC;WACjF,OAAO,QAAQ,OAAO,MAC/B,IAAG,SAAS;GAAE,MAAM,GAAG,cAAc,OAAO,QAAQ,OAAO,SAAS;GAAG,UAAU;GAAU,CAAC;;;CAKhG,MAAM,eAAe,MAAkB;AACrC,MAAI,CAAC,QAAQ,MAAO;EACpB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,MAAI,KAAK,IAAI,EAAE,OAAO,GAAG,KAAK,IAAI,EAAE,OAAO,CAAE;AAC7C,MAAI,EAAE,WAAW,EAAG;AACpB,IAAE,gBAAgB;AAClB,KAAG,cAAc,EAAE;;AAGrB,mBAAkB;EAAE,SAAS,CAAC,aAAa,QAAQ;EAAE,gBAAgB,gBAAgB;EAAE,CAAC;AAExF,OAAM,OAAO,YAAY;AACvB,QAAM,UAAU;AAChB,uBAAqB;GACrB;AAEF,OACE,OACA,YAAY;AACV,QAAM,UAAU;AAChB,kBAAgB;AAChB,uBAAqB;IAEvB,EAAE,MAAM,OAAO,CAChB;AAED,iBAAgB;EACd,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AAC7D,KAAG,iBAAiB,UAAU,gBAAgB,EAAE,SAAS,MAAM,CAAC;AAChE,kBAAgB;AAChB,WAAS,oBAAoB;GAC7B;AAEF,uBAAsB;EACpB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,oBAAoB,SAAS,YAAY;AAC5C,KAAG,oBAAoB,UAAU,eAAe;GAChD;AAEF,QAAO;EAAE;EAAS;EAAS;EAAS;EAAgB;EAAc;EAAqB"}

package/dist/components/tag/style2.css

@@ -15,12 +15,6 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
-:root {
-  --u-tag-small: 20px;
-  --u-tag-default: 24px;
-  --u-tag-large: 28px;
-}
-
 .u-tag {
   cursor: default;
   color: var(--u-text-color-main);

package/dist/components/textarea/style.js

@@ -1,2 +1,3 @@
+import "../icon/style.js";
 import "./style2.css";
 import "@veltra/styles/anime/zoom-in.scss";

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

@@ -22,10 +22,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   onFocus?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
-  placeholder: string;
-  clearable: boolean;
   disabled: boolean;
   readonly: boolean;
+  placeholder: string;
+  clearable: boolean;
   resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/theme/style.js

@@ -1 +1,6 @@
+import "../button/style.js";
+import "../input/style.js";
+import "../number-input/style.js";
+import "../select/style.js";
+import "../palette/style.js";
 import "./style2.css";

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

@@ -11,12 +11,12 @@ declare const __VLS_base: _$vue.DefineComponent<TipProps, {}, {}, {}, {}, _$vue.
 }, string, _$vue.PublicProps, Readonly<TipProps> & Readonly<{
   "onUpdate:visible"?: ((value: boolean) => any) | undefined;
 }>, {
-  direction: TipDirection;
+  content: string;
   trigger: "hover" | "click";
   contentTag: string;
   visible: boolean;
+  direction: TipDirection;
   alignment: TipAlign;
-  content: string;
 }, {}, {}, {}, 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/tree/style.js

@@ -1 +1,5 @@
+import "../icon/style.js";
+import "../scroll/style.js";
+import "../checkbox/style.js";
+import "../empty/style.js";
 import "./style2.css";

package/dist/components/tree/style2.css

@@ -19,26 +19,38 @@
   border-radius: var(--u-radius-small);
   padding: var(--u-gap-small);
   line-height: 1;
+  gap: var(--u-gap-small);
 }
 .u-tree--small .u-tree__checkbox {
   margin-right: var(--u-gap-small);
 }
+.u-tree--small .u-tree__node {
+  min-height: 28px;
+}
 .u-tree--default .u-tree__node-content {
   border-radius: var(--u-radius-default);
   padding: var(--u-gap-default);
   line-height: 1;
+  gap: var(--u-gap-default);
 }
 .u-tree--default .u-tree__checkbox {
   margin-right: var(--u-gap-default);
 }
+.u-tree--default .u-tree__node {
+  min-height: 32px;
+}
 .u-tree--large .u-tree__node-content {
   border-radius: var(--u-radius-large);
   padding: var(--u-gap-large);
   line-height: 1;
+  gap: var(--u-gap-large);
 }
 .u-tree--large .u-tree__checkbox {
   margin-right: var(--u-gap-large);
 }
+.u-tree--large .u-tree__node {
+  min-height: 40px;
+}
 .u-tree__checkbox {
   height: fit-content;
   flex-shrink: 0;
@@ -52,6 +64,9 @@
   left: 0;
   width: 100%;
 }
+.u-tree__wrap:not(.is-virtual) .u-tree__node + .u-tree__wrap:not(.is-virtual) .u-tree__node {
+  margin-top: 2px;
+}
 .u-tree.is-selectable .u-tree__node:not(.is-disabled) .u-tree__node-content:hover {
   background-color: var(--u-bg-color-hover);
 }
@@ -59,17 +74,27 @@
   background-color: var(--u-bg-color-hover);
 }
 .u-tree__node {
+  position: relative;
   cursor: pointer;
-  margin-bottom: 0.2rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
 }
+.u-tree__node.is-selected::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  border-radius: 3px;
+  background-color: var(--u-color-primary);
+}
 .u-tree__node.is-selected .u-tree__node-content {
-  background-color: var(--u-color-primary-light-9) !important;
+  background-color: var(--u-color-primary-light-9);
   color: var(--u-color-primary);
-  font-weight: bold;
+  font-weight: 500;
 }
 .u-tree__node.is-expanded .u-tree__expand-icon {
   transform: rotate(90deg);
@@ -80,48 +105,45 @@
 .u-tree__node.is-disabled .u-tree__node-content {
   color: var(--u-text-color-disabled);
 }
-.u-tree__expand-icon, .u-tree__icon-placeholder {
+.u-tree__node.is-disabled .u-tree__node-content:hover {
+  background-color: transparent;
+}
+.u-tree__indent {
   flex-shrink: 0;
   width: 20px;
-  height: 20px;
+}
+.u-tree__indent__indent--leaf {
+  width: 20px;
 }
 .u-tree__expand-icon {
   cursor: pointer;
-  transition: transform 0.2s, background-color 0.2s;
   flex-shrink: 0;
+  width: 20px;
+  height: 20px;
   font-size: 20px;
   border-radius: 50%;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .u-tree__expand-icon:hover {
-  background-color: var(--u-color-primary-light-9);
-}
-.u-tree__icon-placeholder {
-  padding: 5px;
-}
-.u-tree__icon-placeholder::before {
-  content: "";
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: block;
-  border-radius: 50%;
-  border: 2px solid var(--u-text-color-main);
+  background-color: var(--u-bg-color-hover);
 }
 .u-tree__node-content {
   flex-grow: 1;
   overflow: hidden;
   user-select: none;
-  word-break: break-all;
-  transition: background-color 0.25s;
+  word-break: break-word;
+  transition: background-color 0.2s ease;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
 }
 .u-tree__ripple {
-  background-color: var(--u-color-primary-light-7);
-  opacity: 0.5;
+  background-color: var(--u-color-primary-light-5);
+  opacity: 0.25;
 }
 .u-tree__empty {
   text-align: center;
+  padding: var(--u-gap-default) 0;
+  color: var(--u-text-color-secondary);
 }

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,MAAM,QAAQ;EASd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAC9D,MAAM,WACP,CAAA;EAED,MAAM,YAAY,YAA0B;EAE5C,MAAM,YAAY,eAAe;AAC/B,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,cAAc,MAAM,WAAW;IACtC,IAAI,GAAG,aAAa,MAAM,UAAS;IACrC;IACD;EAMD,MAAM,QAAQ,UAAS;EAEvB,SAAS,iBAAiB,KAAmD;AAC3E,WAAQ,MAAM,OAAO,WAAW,MAAM,WAAW,IAAI,IAAI,IAAI,KAAK;;EAGpE,MAAM,EAAE,OAAO,QAAQ,iBAAiB,aAAa,aAAa,EAChE,OACD,CAAA;AAED,QACE;SAAO,MAAM;SAAkB,MAAM;GAAW;GAAO,GACtD,CAAC,GAAG,OAAO;AAEV,OAAI,KAAK,EAAG;AACZ,oBAAgB;KAElB,EAAE,WAAW,MAAK,CACpB;EAEA,MAAM,EAAE,WAAW,UAAU;GAAE;GAAQ;GAAiB,CAAA;EAExD,MAAM,EAAE,cAAc,iBAAiB,UAAU;GAC/C;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,EAAE,aAAa,gBAAgB,SAAS;GAC5C;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,qBAA6B;AAGjC,WAAQ,KAAK,OAAb;IACE,KAAK,QACH,QAAO;IACT,KAAK,QACH,QAAO;IACT,QACE,QAAO;;;EAKb,MAAM,iBAAiB,eAAe,MAAM,MAAM,SAAS,GAAE;EAE7D,MAAM,EAAE,aAAa,UAAU,eAAe;GAC5C,OAAO,eAAe,MAAM,MAAM,OAAO;GACzC,gBAAgB,UAAU,OAAO,gBAAgB;GAGjD,iBAAkB,eAAe,QAAS,UAAU,OAAO,cAAc,OAAQ;GACjF;GACA,KAAK;GAGL,aAAa,MAAM,MAAM,MAAM,IAAI,OAAO;GAC3C,CAAA;EAID,MAAM,eAAe,eAAe;GAClC,MAAM,SAAS,MAAM;AACrB,UAAO,MAAM,MAAM,KAAK,SAAS;IAC/B,MAAM,OAAO,OAAO,KAAK;AACzB,WAAO;KACL;KACA,KAAK,MAAM,OAAO,KAAK;KACvB,QAAQ,KAAK;KACb,OAAO,KAAK;KACd;KACD;IACF;EAED,MAAM,kBAA+D,OAAO,OAC1E,YAAY,eAAe,OAAO,GAAE;EAEtC,SAAS,SAAS,OAAqB;AACrC,eAAY,cAAc,OAAO,EAAE,OAAO,UAAU,CAAA;;EAGtD,SAAS,iBAAiB;GACxB,MAAM,EAAE,YAAY,WAAW,iBAAiB;AAChD,OAAI,CAAC,gBAAiB,CAAC,cAAc,CAAC,aAAc,CAAC,MAAM,MAAO;GAClE,IAAI,QAAQ;AAEZ,OAAI,YAAY;AACd,QAAI,CAAC,aAAa,MAAO;AACzB,YAAQ,MAAM,MAAM,WAAW,SAAS,KAAK,SAAS,aAAa,MAAK;cAC/D,WAAW;AACpB,QAAI,CAAC,YAAY,KAAM;AACvB,YAAQ,MAAM,MAAM,WAAW,SAAS,YAAY,IAAI,KAAK,KAAK,CAAA;;AAGpE,OAAI,eAAe,MACjB,UAAS,MAAK;QACT;IACL,MAAM,EAAE,YAAY,iBAAiB,UAAU,SAAS,EAAC;IACzD,MAAM,KAAK,YAAY,SAAS;AAChC,UAAM,wBAAwB,IAAmB,gBAAgB,KAAI;;;AAIzE,oBAAkB;AAChB,mBAAgB;AACd,oBAAe;KAChB;IACF;AAED,UAAQ,WAAW;GACjB;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,WAAW;GACE;GACC;GACf,CAAA;AAED,WAA2B;GACzB;GACA;GACA;GACA,WAAW;GACX,YAAY;GACZ,SAAS,OAAgB;AACvB,WAAO,MAAM,MAAM,SAAS,SAAS;AACnC,iBAAY,MAAM,MAAK;MACxB;;GAEH,cAAc;AACZ,WAAO;;GAET,aAAa;AACX,WAAO,MAAM,KAAK,YAAW;;GAE/B;GAEA,YAAY;AACV,WAAO,MAAM,KAAK,SAAS;AACzB,UAAK,WAAW;MACjB;AACD,qBAAgB;;GAElB,cAAc;AACZ,WAAO,MAAM,KAAK,SAAS;AACzB,UAAK,WAAW;MACjB;AACD,qBAAgB;;GAEnB,CAAA;;uBAnPC,YA4BW,MAAA,YAAA,EAAA;IA3BR,OAAK,eAAE,UAAA,MAAS;aACb;IAAJ,KAAI;IACH,iBAAa,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,GAAE,WAAY,eAAA,MAAc,CAAA;;2BAYrD,CAVK,eAAA,SAAA,UAAA,KAAA,EACd,mBAQE,UAAA,EAAA,KAAA,GAAA,EAAA,WAPuC,aAAA,QAAY,EAA1C,MAAM,KAAK,QAAQ,YAAK;yBADnC,YAQE,aAAA;MANO;MACD;MACL,OAAK,eAAE,MAAA,IAAG,CAAC,GAAE,YAAa,KAAK,SAAS,MAAA,aAAY,CAAA,CAAA;MAC7C;MACP,mBAAiB;MACjB,OAAK,eAAA,EAAA,WAAA,cAA6B,OAAM,MAAA,CAAA;;;;;;;kCAI3C,mBAKE,UAAA,EAAA,KAAA,GAAA,EAAA,WAJe,MAAA,MAAK,GAAb,SAAI;yBADb,YAKE,aAAA;MAHO;MACN,KAAK,KAAK;MACV,OAAK,eAAE,MAAA,IAAG,CAAC,GAAE,YAAa,KAAK,SAAS,MAAA,aAAY,CAAA,CAAA;;gBAIrB,MAAA,MAAK,CAAC,UAAA,WAAA,EAA1C,mBAEM,OAAA;;KAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;QAChB,YAAU,MAAA,YAAA,CAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA,CAAA,CAAA"}

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

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