@veltra/desktop 1.0.8 → 1.0.9

package/dist/components/file-viewer/style2.css

@@ -0,0 +1,445 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-file-viewer {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 480px;
+  color: var(--u-text-color-main);
+  background: var(--u-bg-color-top);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--u-border-color);
+}
+.u-file-viewer__inner {
+  display: contents;
+}
+.u-file-viewer.is-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(16px, 3vw, 48px);
+  min-height: 0;
+  max-height: none;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  outline: none;
+}
+.u-file-viewer.is-modal .u-file-viewer__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.52);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.u-file-viewer.is-modal .u-file-viewer__inner {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  max-width: 1440px;
+  background: var(--u-bg-color-top);
+  border: 1px solid var(--u-border-color);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32), 0 2px 8px rgba(15, 23, 42, 0.18);
+  z-index: 1;
+}
+.u-file-viewer__sidebar {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--u-border-color);
+  background: var(--u-bg-color-middle);
+  flex-shrink: 0;
+  min-width: 0;
+}
+.u-file-viewer__sidebar-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 18px 20px 10px;
+  color: var(--u-text-color-title);
+}
+.u-file-viewer__sidebar-title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.u-file-viewer__sidebar-count {
+  font-size: 12px;
+  color: var(--u-text-color-second);
+}
+.u-file-viewer__list {
+  flex: 1;
+  min-height: 0;
+  padding: 4px 10px 16px;
+}
+.u-file-viewer__list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  color: var(--u-text-color-second);
+}
+.u-file-viewer__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  margin: 2px 0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
+}
+.u-file-viewer__item:hover {
+  background: var(--u-bg-color-hover);
+}
+.u-file-viewer__item.is-active {
+  background: color-mix(in srgb, var(--u-color-primary) 14%, transparent);
+  color: var(--u-color-primary);
+}
+.u-file-viewer__item-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+  flex: 1;
+}
+.u-file-viewer__item-name {
+  font-size: 13px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-file-viewer__item-size {
+  font-size: 11px;
+  color: var(--u-text-color-second);
+}
+.u-file-viewer__badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 28px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: #fff;
+  background: var(--u-text-color-placeholder);
+}
+.u-file-viewer__badge__badge--image {
+  background: #0ea5e9;
+}
+.u-file-viewer__badge__badge--video {
+  background: #ef4444;
+}
+.u-file-viewer__badge__badge--pdf {
+  background: #dc2626;
+}
+.u-file-viewer__badge__badge--sheet {
+  background: #16a34a;
+}
+.u-file-viewer__badge__badge--docx {
+  background: #2563eb;
+}
+.u-file-viewer__badge__badge--text {
+  background: #64748b;
+}
+.u-file-viewer__stage {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.u-file-viewer__stage-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 22px;
+  border-bottom: 1px solid var(--u-border-color);
+  background: var(--u-bg-color-top);
+  flex-shrink: 0;
+}
+.u-file-viewer__stage-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.u-file-viewer__stage-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--u-text-color-title);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-file-viewer__stage-sub {
+  font-size: 12px;
+  color: var(--u-text-color-second);
+  flex-shrink: 0;
+}
+.u-file-viewer__stage-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.u-file-viewer__action {
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid var(--u-border-color);
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.18s, border-color 0.18s, color 0.18s;
+}
+.u-file-viewer__action:not(:disabled):hover {
+  border-color: var(--u-color-primary);
+  color: var(--u-color-primary);
+}
+.u-file-viewer__action:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.u-file-viewer__action__action--primary {
+  background: var(--u-color-primary);
+  border-color: var(--u-color-primary);
+  color: #fff;
+}
+.u-file-viewer__action__action--primary:not(:disabled):hover {
+  color: #fff;
+  filter: brightness(1.05);
+}
+.u-file-viewer__action__action--icon {
+  width: 30px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+  color: var(--u-text-color-second);
+}
+.u-file-viewer__action__action--icon:not(:disabled):hover {
+  border-color: var(--u-color-danger);
+  color: var(--u-color-danger);
+}
+.u-file-viewer__body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--u-bg-color-bottom);
+  overflow: hidden;
+}
+.u-file-viewer__empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--u-text-color-second);
+}
+.u-file-viewer__image {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  user-select: none;
+}
+.u-file-viewer__image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: transform 0.3s ease;
+  border-radius: 6px;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
+}
+.u-file-viewer__image.is-actual img {
+  max-width: none;
+  max-height: none;
+  object-fit: none;
+  cursor: zoom-out;
+}
+.u-file-viewer__video {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+.u-file-viewer__video video {
+  max-width: 100%;
+  max-height: 100%;
+  outline: none;
+}
+.u-file-viewer__text {
+  position: absolute;
+  inset: 0;
+}
+.u-file-viewer__text-pre {
+  margin: 0;
+  padding: 20px 24px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre;
+  tab-size: 2;
+  color: var(--u-text-color-main);
+}
+.u-file-viewer__pdf {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+.u-file-viewer__pdf-viewport {
+  width: 100%;
+  height: 100%;
+  background: var(--u-bg-color-middle);
+}
+.u-file-viewer__pdf-page {
+  margin: 16px auto;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+}
+.u-file-viewer__docx {
+  position: absolute;
+  inset: 0;
+  background: var(--u-bg-color-middle);
+}
+.u-file-viewer__docx-body {
+  padding: 24px;
+}
+.u-file-viewer__docx-body :deep(.u-file-viewer__docx-doc) {
+  margin: 0 auto;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+  color: #222;
+}
+.u-file-viewer__sheet {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--u-bg-color-middle);
+}
+.u-file-viewer__sheet-note {
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--u-text-color-second);
+  background: var(--u-bg-color-top);
+  border-bottom: 1px solid var(--u-border-color);
+  flex-shrink: 0;
+}
+.u-file-viewer__sheet-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--u-border-color);
+  background: var(--u-bg-color-top);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.u-file-viewer__sheet-tab {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--u-text-color-second);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.18s, color 0.18s;
+}
+.u-file-viewer__sheet-tab:hover {
+  background: var(--u-bg-color-hover);
+  color: var(--u-text-color-main);
+}
+.u-file-viewer__sheet-tab.is-active {
+  background: color-mix(in srgb, var(--u-color-primary) 14%, transparent);
+  color: var(--u-color-primary);
+}
+.u-file-viewer__sheet-stage {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.u-file-viewer__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--u-text-color-second);
+  font-size: 13px;
+  pointer-events: none;
+}
+
+.u-file-viewer-fade-enter-active,
+.u-file-viewer-fade-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.u-file-viewer-fade-enter-from,
+.u-file-viewer-fade-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.u-file-viewer-modal-enter-active,
+.u-file-viewer-modal-leave-active {
+  transition: opacity 0.22s ease;
+}
+.u-file-viewer-modal-enter-active .u-file-viewer__inner,
+.u-file-viewer-modal-leave-active .u-file-viewer__inner {
+  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.u-file-viewer-modal-enter-active .u-file-viewer__backdrop,
+.u-file-viewer-modal-leave-active .u-file-viewer__backdrop {
+  transition: opacity 0.22s ease;
+}
+
+.u-file-viewer-modal-enter-from,
+.u-file-viewer-modal-leave-to {
+  opacity: 1;
+}
+.u-file-viewer-modal-enter-from .u-file-viewer__inner,
+.u-file-viewer-modal-leave-to .u-file-viewer__inner {
+  opacity: 0;
+  transform: translateY(12px) scale(0.985);
+}
+.u-file-viewer-modal-enter-from .u-file-viewer__backdrop,
+.u-file-viewer-modal-leave-to .u-file-viewer__backdrop {
+  opacity: 0;
+}

package/dist/components/grid-input/grid-input.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: _$vue.DefineComponent<GridInputProps, _$_veltra_util
   onInput?: ((value: string) => any) | undefined;
 }>, {
   length: number;
-  separator: string;
   zero: false;
+  separator: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/index.d.ts

@@ -80,12 +80,15 @@ import { _default as _default$69 } from "./table-editor/table-editor.vue.js";
 import { _default as _default$70 } from "./table/table.vue.js";
 import { defineTableColumns } from "./table/use-columns.js";
 import { _default as _default$71 } from "./tabs/tabs.vue.js";
-import { _default as _default$72 } from "./tag/tag.vue.js";
-import { _default as _default$73 } from "./text/text.vue.js";
-import { _default as _default$74 } from "./textarea/textarea.vue.js";
-import { _default as _default$75 } from "./theme/theme.vue.js";
-import { _default as _default$76 } from "./tip/tip.vue.js";
-import { _default as _default$77 } from "./tree-select/tree-select.vue.js";
-import { _default as _default$78 } from "./tree/tree.vue.js";
-import { _default as _default$79 } from "./watermark/watermark.vue.js";
-import { _default as _default$80 } from "./progress-nodes/progress-nodes.vue.js";
+import { _default as _default$72 } from "./tabs/tabs-horizontal.vue.js";
+import { _default as _default$73 } from "./tabs/tabs-vertical.vue.js";
+import { _default as _default$74 } from "./tag/tag.vue.js";
+import { _default as _default$75 } from "./text/text.vue.js";
+import { _default as _default$76 } from "./textarea/textarea.vue.js";
+import { _default as _default$77 } from "./theme/theme.vue.js";
+import { _default as _default$78 } from "./tip/tip.vue.js";
+import { _default as _default$79 } from "./tree-select/tree-select.vue.js";
+import { _default as _default$80 } from "./tree/tree.vue.js";
+import { _default as _default$81 } from "./watermark/watermark.vue.js";
+import { _default as _default$82 } from "./progress-nodes/progress-nodes.vue.js";
+import { _default as _default$83 } from "./file-viewer/file-viewer.vue.js";

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

@@ -35,9 +35,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, _InputExposed
   "onNative:input"?: ((ev: Event) => any) | undefined;
 }>, {
   disabled: boolean;
+  readonly: boolean;
   placeholder: string;
   clearable: boolean;
-  readonly: 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/multi-select/multi-select-option.js

@@ -8,24 +8,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "multi-select-option",
 	props: {
 		option: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
+		disabled: { type: Boolean },
 		checked: { type: Boolean },
+		index: {},
 		measureElement: { type: Function }
 	},
 	emits: ["check"],
 	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const { disabled = false, checked } = props;
+		function measureRef(el) {
+			if (typeof props.index !== "number" || !props.measureElement) return;
+			props.measureElement(props.index, el);
+		}
 		const emit = __emit;
 		const { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey);
 		let ripple = null;
 		function handleClick(e) {
-			if (__props.disabled) return;
-			emit("check", !__props.checked);
+			if (disabled) return;
+			emit("check", !checked);
 		}
 		function handleMousedown(e) {
-			if (__props.disabled) return;
+			if (disabled) return;
 			ripple = new Ripple(e.currentTarget, { rippleClass });
 			ripple.showByEvent(e);
 		}
@@ -46,13 +50,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				onMousedown: handleMousedown,
 				onMouseup: handleMouseup,
 				onMouseleave: handleMouseleave,
-				ref: __props.measureElement
+				ref: measureRef
 			}, [createVNode(unref(_sfc_main$1), {
 				class: normalizeClass(unref(checkboxClass)),
-				"model-value": __props.checked,
+				"model-value": unref(checked),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("check", $event)),
 				onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
-				disabled: __props.disabled
+				disabled: unref(disabled)
 			}, null, 8, [
 				"class",
 				"model-value",

package/dist/components/multi-select/multi-select-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-option.js","names":[],"sources":["../../../src/components/multi-select/multi-select-option.vue"],"sourcesContent":["<template>\n  <li\n    :class=\"optionClass\"\n    @click=\"handleClick\"\n    @mousedown=\"handleMousedown\"\n    @mouseup=\"handleMouseup\"\n    @mouseleave=\"handleMouseleave\"\n    :ref=\"measureElement\"\n  >\n    <u-checkbox\n      :class=\"checkboxClass\"\n      :model-value=\"checked\"\n      @update:model-value=\"emit('check', $event)\"\n      @click.stop\n      :disabled=\"disabled\"\n    />\n\n    <slot />\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Ripple } from '@veltra/directives'\nimport { inject, onBeforeUnmount } from 'vue'\n\nimport { UCheckbox } from '../checkbox'\nimport { MultiSelectDIKey } from './di'\n\ndefineOptions({\n  name: 'MultiSelectOption'\n})\n\nconst { disabled = false, checked } = defineProps<{\n  option: Record<string, any>\n  disabled?: boolean\n  checked: boolean\n  measureElement?: (el: any) => void\n}>()\n\nconst emit = defineEmits<{\n  (e: 'check', checked: boolean): void\n}>()\n\nconst { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!\n\nlet ripple: Ripple | null = null\n\nfunction handleClick(e) {\n  if (disabled) return\n  emit('check', !checked)\n}\n\nfunction handleMousedown(e: MouseEvent) {\n  if (disabled) return\n\n  ripple = new Ripple(e.currentTarget as HTMLElement, {\n    rippleClass\n  })\n\n  ripple.showByEvent(e)\n}\n\nfunction handleMouseleave() {\n  ripple?.remove()\n}\n\nfunction handleMouseup() {\n  ripple?.remove()\n}\n\nonBeforeUnmount(() => {\n  ripple?.remove()\n  ripple = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAuCA,MAAM,OAAO;EAIb,MAAM,EAAE,aAAa,aAAa,kBAAkB,OAAO,iBAAiB;EAE5E,IAAI,SAAwB;EAE5B,SAAS,YAAY,GAAG;AACtB,OAAI,QAAA,SAAU;AACd,QAAK,SAAS,CAAC,QAAA,QAAO;;EAGxB,SAAS,gBAAgB,GAAe;AACtC,OAAI,QAAA,SAAU;AAEd,YAAS,IAAI,OAAO,EAAE,eAA8B,EAClD,aACD,CAAA;AAED,UAAO,YAAY,EAAC;;EAGtB,SAAS,mBAAmB;AAC1B,WAAQ,QAAO;;EAGjB,SAAS,gBAAgB;AACvB,WAAQ,QAAO;;AAGjB,wBAAsB;AACpB,WAAQ,QAAO;AACf,YAAS;IACV;;uBAxEC,mBAiBK,MAAA;IAhBF,OAAK,eAAE,MAAA,YAAW,CAAA;IAClB,SAAO;IACP,aAAW;IACX,WAAS;IACT,cAAY;IACZ,KAAK,QAAA;OAEN,YAME,MAAA,YAAA,EAAA;IALC,OAAK,eAAE,MAAA,cAAa,CAAA;IACpB,eAAa,QAAA;IACb,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAU,OAAM;IACxC,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IACV,UAAU,QAAA;;;;;OAGb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"multi-select-option.js","names":[],"sources":["../../../src/components/multi-select/multi-select-option.vue"],"sourcesContent":["<template>\n  <li\n    :class=\"optionClass\"\n    @click=\"handleClick\"\n    @mousedown=\"handleMousedown\"\n    @mouseup=\"handleMouseup\"\n    @mouseleave=\"handleMouseleave\"\n    :ref=\"measureRef\"\n  >\n    <u-checkbox\n      :class=\"checkboxClass\"\n      :model-value=\"checked\"\n      @update:model-value=\"emit('check', $event)\"\n      @click.stop\n      :disabled=\"disabled\"\n    />\n\n    <slot />\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Ripple } from '@veltra/directives'\nimport { inject, onBeforeUnmount } from 'vue'\n\nimport { UCheckbox } from '../checkbox'\nimport { MultiSelectDIKey } from './di'\n\ndefineOptions({\n  name: 'MultiSelectOption'\n})\n\nconst props = defineProps<{\n  option: Record<string, any>\n  disabled?: boolean\n  checked: boolean\n  /**\n   * 虚拟项索引：对应 `options` 数组中的绝对位置。\n   * 非虚拟模式下可省略；虚拟模式下必须传入，否则元素卸载时 Virtualizer 无法及时解绑，\n   * 会因为 ResizeObserver 对脱离 DOM 的元素回调 size=0 而污染尺寸缓存。\n   */\n  index?: number\n  measureElement?: (index: number, el: Element | null) => void\n}>()\n\nconst { disabled = false, checked } = props\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\nconst emit = defineEmits<{\n  (e: 'check', checked: boolean): void\n}>()\n\nconst { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!\n\nlet ripple: Ripple | null = null\n\nfunction handleClick(e) {\n  if (disabled) return\n  emit('check', !checked)\n}\n\nfunction handleMousedown(e: MouseEvent) {\n  if (disabled) return\n\n  ripple = new Ripple(e.currentTarget as HTMLElement, {\n    rippleClass\n  })\n\n  ripple.showByEvent(e)\n}\n\nfunction handleMouseleave() {\n  ripple?.remove()\n}\n\nfunction handleMouseup() {\n  ripple?.remove()\n}\n\nonBeforeUnmount(() => {\n  ripple?.remove()\n  ripple = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EAad,MAAM,EAAE,WAAW,OAAO,YAAY;EAEtC,SAAS,WAAW,IAAa;AAC/B,OAAI,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,eAAgB;AAC9D,SAAM,eAAe,MAAM,OAAO,GAAoB;;EAGxD,MAAM,OAAO;EAIb,MAAM,EAAE,aAAa,aAAa,kBAAkB,OAAO,iBAAiB;EAE5E,IAAI,SAAwB;EAE5B,SAAS,YAAY,GAAG;AACtB,OAAI,SAAU;AACd,QAAK,SAAS,CAAC,QAAO;;EAGxB,SAAS,gBAAgB,GAAe;AACtC,OAAI,SAAU;AAEd,YAAS,IAAI,OAAO,EAAE,eAA8B,EAClD,aACD,CAAA;AAED,UAAO,YAAY,EAAC;;EAGtB,SAAS,mBAAmB;AAC1B,WAAQ,QAAO;;EAGjB,SAAS,gBAAgB;AACvB,WAAQ,QAAO;;AAGjB,wBAAsB;AACpB,WAAQ,QAAO;AACf,YAAS;IACV;;uBArFC,mBAiBK,MAAA;IAhBF,OAAK,eAAE,MAAA,YAAW,CAAA;IAClB,SAAO;IACP,aAAW;IACX,WAAS;IACT,cAAY;IACZ,KAAK;OAEN,YAME,MAAA,YAAA,EAAA;IALC,OAAK,eAAE,MAAA,cAAa,CAAA;IACpB,eAAa,MAAA,QAAO;IACpB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAU,OAAM;IACxC,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IACV,UAAU,MAAA,SAAQ;;;;;OAGrB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/multi-select/multi-select.js

@@ -10,8 +10,8 @@ import { MultiSelectDIKey } from "./di.js";
 import _sfc_main$7 from "./multi-select-option.js";
 import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, shallowReactive, shallowRef, toDisplayString, unref, useModel, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { o } from "@cat-kit/core";
-import { FORM_EMPTY_CONTENT, bem, withUnit } from "@veltra/utils";
-import { useFormComponent, useFormFallbackProps, useVirtual } from "@veltra/compositions";
+import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from "@veltra/compositions";
 import { ArrowDown, Close, Search } from "@veltra/icons/normal";
 //#region src/components/multi-select/multi-select.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -80,28 +80,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			if (!props.creatable || !createdOptions.value.length) return rawAllOptions.value;
 			return [...createdOptions.value, ...rawAllOptions.value];
 		});
-		const { totalHeight, virtualList, virtualEnabled, measureElement } = useVirtual({
-			virtualThreshold: 80,
+		const virtualEnabled = computed(() => options.value.length > 80);
+		const { virtualizer, items } = useVirtualizer({
 			estimateSize: () => 40,
 			count: computed(() => options.value.length),
-			scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+			scrollEl: () => scrollRef.value?.containerRef ?? null,
+			contentEl: () => virtualEnabled.value ? scrollRef.value?.contentRef ?? null : null
 		});
 		const virtualOptions = computed(() => {
 			const { valueKey, labelKey } = props;
 			const _options = options.value;
-			return virtualList.value.map((v) => {
+			return items.value.map((v) => {
 				const option = _options[v.index];
 				const val = o(option).get(valueKey);
 				return {
 					option,
 					index: v.index,
 					val,
-					key: v.key,
+					key: v.index,
 					offset: v.start,
 					label: o(option).get(labelKey)
 				};
 			});
 		});
+		const measureElement = (index, el) => virtualizer.measureElement(index, el);
 		const filterable = computed(() => {
 			return props.filterable || props.creatable || typeof props.options === "function";
 		});
@@ -363,16 +365,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 						_: 1
 					}, 8, ["modelValue", "onKeydown"])], 2)) : createCommentVNode("v-if", true),
 					createCommentVNode(" 多选列表 "),
+					createCommentVNode("\n        虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；\n        模板不再绑定 totalSize，避免尺寸变化引起重渲染。\n      "),
 					options.value.length ? (openBlock(), createBlock(unref(_sfc_main$3), {
 						key: 1,
 						tag: "ul",
 						class: normalizeClass([unref(cls).e("options")]),
 						ref_key: "scrollRef",
 						ref: scrollRef,
-						"content-class": [unref(cls).e("options-wrap"), unref(bem).is("virtual", unref(virtualEnabled))],
-						"content-style": { height: unref(virtualEnabled) ? unref(withUnit)(unref(totalHeight), "px") : void 0 }
+						"content-class": [unref(cls).e("options-wrap"), unref(bem).is("virtual", virtualEnabled.value)]
 					}, {
-						default: withCtx(() => [unref(virtualEnabled) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(virtualOptions.value, ({ option, index, key, label, offset }) => {
+						default: withCtx(() => [virtualEnabled.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(virtualOptions.value, ({ option, index, key, label, offset }) => {
 							return openBlock(), createBlock(_sfc_main$7, {
 								option,
 								disabled: isDisabled(option),
@@ -380,8 +382,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 								style: normalizeStyle({ transform: `translateY(${offset}px)` }),
 								onCheck: ($event) => handleCheck(option, $event),
 								checked: unref(checkedSet).has(option),
-								"data-index": index,
-								"measure-element": unref(measureElement)
+								index,
+								"measure-element": measureElement
 							}, {
 								default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, {
 									option,
@@ -394,8 +396,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 								"style",
 								"onCheck",
 								"checked",
-								"data-index",
-								"measure-element"
+								"index"
 							]);
 						}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(options.value, (option, index) => {
 							return openBlock(), createBlock(_sfc_main$7, {
@@ -418,11 +419,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							]);
 						}), 128))]),
 						_: 3
-					}, 8, [
-						"class",
-						"content-class",
-						"content-style"
-					])) : (openBlock(), createElementBlock("div", {
+					}, 8, ["class", "content-class"])) : (openBlock(), createElementBlock("div", {
 						key: 2,
 						class: normalizeClass(unref(cls).e("empty"))
 					}, [createVNode(unref(_sfc_main$4))], 2))