@veltra/desktop 1.1.21 → 1.1.23

package/dist/components/password-input/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n  <u-input\n    :class=\"cls.b\"\n    :model-value=\"passwordText\"\n    v-bind=\"inputProps\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    @native:input=\"handleUpdatePwd\"\n    @update:model-value=\"!$event && handleClear()\"\n    @suffix:click=\"toggleVisible\"\n  >\n    <template #suffix>\n      <Transition name=\"fade\">\n        <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\">\n          <Hide v-if=\"pwdVisible\" />\n          <View v-else />\n        </UIcon>\n      </Transition>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n  name: 'PasswordInput'\n})\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  clearable: false,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst slots = defineSlots<{\n  prefix?: () => any\n}>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst inputProps = computed(() => {\n  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  if (!val) {\n    model.value = val\n    return\n  }\n\n  // 字符从无到有\n  if (!model.value) {\n    model.value = val\n    return\n  }\n\n  const pointIndex = target.selectionStart!\n  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n  if (inputChar === passwordChar) inputChar = ''\n\n  // 光标右侧字符数量（当前字符长度减去光标位置）\n  const rightLen = val.length - pointIndex\n  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）\n  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n  const leftVal = model.value.slice(0, leftLen)\n  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n  model.value = leftVal + inputChar + rightVal\n\n  nextTick(() => {\n    target.selectionStart = pointIndex\n    target.selectionEnd = pointIndex\n  })\n}\n\nconst handleClear = (): void => {\n  model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n  if (pwdVisible.value) return model.value\n  return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n  pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAqEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1BrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,UAAA;EAId,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAK,EAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAK,CAAE,KAAK;IAAC;IAAa;IAAY;IAAe;IAAO,CAAA;IACtE;EAED,MAAM,MAAM,IAAI,iBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAIlC,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;IACR,MAAM,QAAQ;IACd;;GAIF,IAAI,CAAC,MAAM,OAAO;IAChB,MAAM,QAAQ;IACd;;GAGF,MAAM,aAAa,OAAO;GAC1B,IAAI,YAAY,eAAe,IAAI,KAAK,IAAI,aAAa;GACzD,IAAI,cAAc,cAAc,YAAY;GAG5C,MAAM,WAAW,IAAI,SAAS;GAE9B,MAAM,UAAU,cAAc,KAAK,aAAa,aAAa;GAE7D,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,QAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,SAAQ;GAElE,MAAM,QAAQ,UAAU,YAAY;GAEpC,eAAe;IACb,OAAO,iBAAiB;IACxB,OAAO,eAAe;KACvB;;EAGH,MAAM,oBAA0B;GAC9B,MAAM,QAAQ;;EAGhB,MAAM,aAAa,WAAW,MAAK;EAEnC,MAAM,eAAe,eAAmC;GACtD,IAAI,WAAW,OAAO,OAAO,MAAM;GACnC,OAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,OAAM,GAAI;IAChE;EAED,MAAM,sBAAsB;GAC1B,WAAW,QAAQ,CAAC,WAAW;;;uBApH/B,YAuBU,MAAA,cAAA,EAvBV,WAuBU;IAtBP,OAAO,MAAA,IAAA,CAAI;IACX,eAAa,aAAA;MACN,WAAA,OAAU;IACjB,MAAM,MAAA,KAAA;IACN,UAAU,MAAA,SAAA;IACV,UAAU,MAAA,SAAA;IACV,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,aAAW;IAC1C,kBAAc;;IAEJ,QAAM,cAMF,CALb,YAKa,YAAA,EALD,MAAK,QAAM,EAAA;4BAIb,CAHR,YAGQ,MAAA,YAAA,EAAA;MAHA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,oBAAA,CAAA;MAAwB,MAAM;;6BACtB,CAAd,WAAA,SAAA,WAAA,EAAZ,YAA0B,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAC1B,YAAe,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA;;;;;;OAKG,MAAM,SAAA;UAAnB;sBACa,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n  <u-input\n    :class=\"cls.b\"\n    :model-value=\"passwordText\"\n    v-bind=\"inputProps\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :clearable=\"false\"\n    @native:input=\"handleUpdatePwd\"\n    @update:model-value=\"!$event && handleClear()\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <template #suffix>\n      <span :class=\"cls.e('suffix')\">\n        <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n          <Close />\n        </UIcon>\n        <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n          <Hide v-if=\"pwdVisible\" />\n          <View v-else />\n        </UIcon>\n      </span>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'PasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  clearable: false,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst inputProps = computed(() => {\n  return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n  hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n  hovered.value = false\n}\n\nconst showClear = computed(() => {\n  return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  if (!val) {\n    model.value = val\n    return\n  }\n\n  // 字符从无到有\n  if (!model.value) {\n    model.value = val\n    return\n  }\n\n  const pointIndex = target.selectionStart!\n  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n  if (inputChar === passwordChar) inputChar = ''\n\n  // 光标右侧字符数量（当前字符长度减去光标位置）\n  const rightLen = val.length - pointIndex\n  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）\n  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n  const leftVal = model.value.slice(0, leftLen)\n  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n  model.value = leftVal + inputChar + rightVal\n\n  nextTick(() => {\n    target.selectionStart = pointIndex\n    target.selectionEnd = pointIndex\n  })\n}\n\nconst handleClear = (): void => {\n  model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n  if (pwdVisible.value) return model.value\n  return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n  pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":"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"}

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

@@ -16,8 +16,8 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   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/password-input/style2.css

@@ -15,3 +15,24 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-password-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 2px;
+}
+.u-password-input__clear {
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 20px;
+  border-radius: var(--u-radius-default);
+  transition: color 0.25s;
+}
+.u-password-input__clear:hover {
+  color: var(--u-color-primary);
+}
+.u-password-input__visibility-toggle {
+  cursor: pointer;
+  flex-shrink: 0;
+}

package/dist/components/pop-confirm/pop-confirm.vue.d.ts

@@ -15,8 +15,8 @@ declare const __VLS_base: _$vue.DefineComponent<PopConfirmProps, {}, {}, {}, {},
   onCancel?: (() => any) | undefined;
 }>, {
   trigger: "hover" | "click";
-  icon: _$vue.Component;
   direction: TipDirection;
+  icon: _$vue.Component;
   iconColor: string;
   confirmText: string;
   cancelText: string;

package/dist/components/progress-nodes/progress-nodes.vue.d.ts

@@ -16,11 +16,11 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
-  "update:modelValue": (value: string | number) => any;
   click: (node: Record<string, any>, index: number) => any;
+  "update:modelValue": (value: string | number) => any;
 }, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
   labelKey: string;
   valueKey: string;

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_export: _$vue.DefineComponent<RichTextEditorProps & {
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
+  readonly: boolean;
   format: RichTextFormat;
   toolbar: ToolbarItem[];
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -27,11 +27,11 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
-  placeholder: string;
-  clearable: boolean;
   labelKey: string;
   valueKey: string;
+  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/table/node/col.js

@@ -1,4 +1,4 @@
-import { reactive, shallowReactive } from "vue";
+import { isReactive, reactive, shallowReactive } from "vue";
 import { TreeNode } from "@cat-kit/core";
 //#region src/components/table/node/col.ts
 var ColumnNode = class extends TreeNode {
@@ -76,7 +76,7 @@ var ColumnNode = class extends TreeNode {
 	}
 	style = reactive({});
 	constructor(val, index, depth, parent) {
-		super(val ? shallowReactive(val) : val, index, depth, parent);
+		super(isReactive(val) ? val : shallowReactive(val), index, depth, parent);
 	}
 };
 //#endregion

package/dist/components/table/node/col.js.map

@@ -1 +1 @@
-{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n  declare children?: ColumnNode[] | undefined\n  declare parent?: ColumnNode\n  /** 叶子节点数量 */\n  leafs?: number\n\n  nextNode: ColumnNode | null = null\n\n  /** 列key */\n  get key(): string {\n    return this.data.key\n  }\n  set key(val) {\n    this.data.key = val\n  }\n  /** 列名 */\n  get name(): string {\n    return this.data.name\n  }\n  set name(val) {\n    this.data.name = val\n  }\n\n  /**\n   * 列对齐方式\n   * @default 'left'\n   */\n  get align(): TableColumnAlign {\n    return this.data.align ?? 'left'\n  }\n  set align(val) {\n    this.data.align = val\n  }\n\n  get headerAlign(): TableColumnAlign {\n    return this.data.headerAlign ?? this.align\n  }\n  set headerAlign(val) {\n    this.data.headerAlign = val\n  }\n\n  /** 宽度 */\n  get width(): number | undefined {\n    const { width } = this.data\n    if (!width || (this.minWidth && width && width < this.minWidth)) {\n      return this.minWidth\n    }\n    return width\n  }\n  set width(val) {\n    if (this.minWidth && val && val < this.minWidth) {\n      val = this.minWidth\n    }\n    this.data.width = val\n  }\n  /** 最小宽度 */\n  get minWidth(): number | undefined {\n    const minWidth = this.data.minWidth\n    if (!minWidth && this.isLeaf) {\n      return 100\n    }\n    return minWidth\n  }\n  set minWidth(val) {\n    this.data.minWidth = val\n  }\n\n  /** 列固定方向 */\n  get fixed(): 'left' | 'right' | undefined {\n    if (this.depth > 0) return\n    return this.data.fixed\n  }\n  set fixed(val) {\n    this.data.fixed = val\n  }\n\n  /** 是否是左侧的最后一个固定列 */\n  get isLastFixed(): boolean {\n    return this.data.isLastFixed ?? false\n  }\n\n  /** 是否是右侧的第一个固定列 */\n  get isFirstFixed(): boolean {\n    return this.data.isFirstFixed ?? false\n  }\n\n  /** 是否是可调整宽度的列 */\n  get resizable(): boolean {\n    return this.data.resizable ?? true\n  }\n\n  style: Record<string, number> = reactive({})\n\n  constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n    super(val ? shallowReactive(val) : val, index, depth, parent)\n  }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;EAChB,OAAO,KAAK,KAAK;;CAEnB,IAAI,IAAI,KAAK;EACX,KAAK,KAAK,MAAM;;;CAGlB,IAAI,OAAe;EACjB,OAAO,KAAK,KAAK;;CAEnB,IAAI,KAAK,KAAK;EACZ,KAAK,KAAK,OAAO;;;;;;CAOnB,IAAI,QAA0B;EAC5B,OAAO,KAAK,KAAK,SAAS;;CAE5B,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;CAGpB,IAAI,cAAgC;EAClC,OAAO,KAAK,KAAK,eAAe,KAAK;;CAEvC,IAAI,YAAY,KAAK;EACnB,KAAK,KAAK,cAAc;;;CAI1B,IAAI,QAA4B;EAC9B,MAAM,EAAE,UAAU,KAAK;EACvB,IAAI,CAAC,SAAU,KAAK,YAAY,SAAS,QAAQ,KAAK,UACpD,OAAO,KAAK;EAEd,OAAO;;CAET,IAAI,MAAM,KAAK;EACb,IAAI,KAAK,YAAY,OAAO,MAAM,KAAK,UACrC,MAAM,KAAK;EAEb,KAAK,KAAK,QAAQ;;;CAGpB,IAAI,WAA+B;EACjC,MAAM,WAAW,KAAK,KAAK;EAC3B,IAAI,CAAC,YAAY,KAAK,QACpB,OAAO;EAET,OAAO;;CAET,IAAI,SAAS,KAAK;EAChB,KAAK,KAAK,WAAW;;;CAIvB,IAAI,QAAsC;EACxC,IAAI,KAAK,QAAQ,GAAG;EACpB,OAAO,KAAK,KAAK;;CAEnB,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;;CAIpB,IAAI,cAAuB;EACzB,OAAO,KAAK,KAAK,eAAe;;;CAIlC,IAAI,eAAwB;EAC1B,OAAO,KAAK,KAAK,gBAAgB;;;CAInC,IAAI,YAAqB;EACvB,OAAO,KAAK,KAAK,aAAa;;CAGhC,QAAgC,SAAS,EAAE,CAAC;CAE5C,YAAY,KAAkB,OAAe,OAAe,QAAqB;EAC/E,MAAM,MAAM,gBAAgB,IAAI,GAAG,KAAK,OAAO,OAAO,OAAO"}
+{"version":3,"file":"col.js","names":[],"sources":["../../../../src/components/table/node/col.ts"],"sourcesContent":["import { TreeNode } from '@cat-kit/core'\nimport { isReactive, reactive, shallowReactive } from 'vue'\n\nimport type { TableColumn, TableColumnAlign } from '../../../types'\n\nexport class ColumnNode extends TreeNode<TableColumn, ColumnNode> {\n  declare children?: ColumnNode[] | undefined\n  declare parent?: ColumnNode\n  /** 叶子节点数量 */\n  leafs?: number\n\n  nextNode: ColumnNode | null = null\n\n  /** 列key */\n  get key(): string {\n    return this.data.key\n  }\n  set key(val) {\n    this.data.key = val\n  }\n  /** 列名 */\n  get name(): string {\n    return this.data.name\n  }\n  set name(val) {\n    this.data.name = val\n  }\n\n  /**\n   * 列对齐方式\n   * @default 'left'\n   */\n  get align(): TableColumnAlign {\n    return this.data.align ?? 'left'\n  }\n  set align(val) {\n    this.data.align = val\n  }\n\n  get headerAlign(): TableColumnAlign {\n    return this.data.headerAlign ?? this.align\n  }\n  set headerAlign(val) {\n    this.data.headerAlign = val\n  }\n\n  /** 宽度 */\n  get width(): number | undefined {\n    const { width } = this.data\n    if (!width || (this.minWidth && width && width < this.minWidth)) {\n      return this.minWidth\n    }\n    return width\n  }\n  set width(val) {\n    if (this.minWidth && val && val < this.minWidth) {\n      val = this.minWidth\n    }\n    this.data.width = val\n  }\n  /** 最小宽度 */\n  get minWidth(): number | undefined {\n    const minWidth = this.data.minWidth\n    if (!minWidth && this.isLeaf) {\n      return 100\n    }\n    return minWidth\n  }\n  set minWidth(val) {\n    this.data.minWidth = val\n  }\n\n  /** 列固定方向 */\n  get fixed(): 'left' | 'right' | undefined {\n    if (this.depth > 0) return\n    return this.data.fixed\n  }\n  set fixed(val) {\n    this.data.fixed = val\n  }\n\n  /** 是否是左侧的最后一个固定列 */\n  get isLastFixed(): boolean {\n    return this.data.isLastFixed ?? false\n  }\n\n  /** 是否是右侧的第一个固定列 */\n  get isFirstFixed(): boolean {\n    return this.data.isFirstFixed ?? false\n  }\n\n  /** 是否是可调整宽度的列 */\n  get resizable(): boolean {\n    return this.data.resizable ?? true\n  }\n\n  style: Record<string, number> = reactive({})\n\n  constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {\n    super(isReactive(val) ? val : shallowReactive(val), index, depth, parent)\n  }\n}\n"],"mappings":";;;AAKA,IAAa,aAAb,cAAgC,SAAkC;;CAIhE;CAEA,WAA8B;;CAG9B,IAAI,MAAc;EAChB,OAAO,KAAK,KAAK;;CAEnB,IAAI,IAAI,KAAK;EACX,KAAK,KAAK,MAAM;;;CAGlB,IAAI,OAAe;EACjB,OAAO,KAAK,KAAK;;CAEnB,IAAI,KAAK,KAAK;EACZ,KAAK,KAAK,OAAO;;;;;;CAOnB,IAAI,QAA0B;EAC5B,OAAO,KAAK,KAAK,SAAS;;CAE5B,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;CAGpB,IAAI,cAAgC;EAClC,OAAO,KAAK,KAAK,eAAe,KAAK;;CAEvC,IAAI,YAAY,KAAK;EACnB,KAAK,KAAK,cAAc;;;CAI1B,IAAI,QAA4B;EAC9B,MAAM,EAAE,UAAU,KAAK;EACvB,IAAI,CAAC,SAAU,KAAK,YAAY,SAAS,QAAQ,KAAK,UACpD,OAAO,KAAK;EAEd,OAAO;;CAET,IAAI,MAAM,KAAK;EACb,IAAI,KAAK,YAAY,OAAO,MAAM,KAAK,UACrC,MAAM,KAAK;EAEb,KAAK,KAAK,QAAQ;;;CAGpB,IAAI,WAA+B;EACjC,MAAM,WAAW,KAAK,KAAK;EAC3B,IAAI,CAAC,YAAY,KAAK,QACpB,OAAO;EAET,OAAO;;CAET,IAAI,SAAS,KAAK;EAChB,KAAK,KAAK,WAAW;;;CAIvB,IAAI,QAAsC;EACxC,IAAI,KAAK,QAAQ,GAAG;EACpB,OAAO,KAAK,KAAK;;CAEnB,IAAI,MAAM,KAAK;EACb,KAAK,KAAK,QAAQ;;;CAIpB,IAAI,cAAuB;EACzB,OAAO,KAAK,KAAK,eAAe;;;CAIlC,IAAI,eAAwB;EAC1B,OAAO,KAAK,KAAK,gBAAgB;;;CAInC,IAAI,YAAqB;EACvB,OAAO,KAAK,KAAK,aAAa;;CAGhC,QAAgC,SAAS,EAAE,CAAC;CAE5C,YAAY,KAAkB,OAAe,OAAe,QAAqB;EAC/E,MAAM,WAAW,IAAI,GAAG,MAAM,gBAAgB,IAAI,EAAE,OAAO,OAAO,OAAO"}

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -15,18 +15,18 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
   close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
+  rounded: boolean;
   position: "top" | "bottom";
   block: boolean;
-  rounded: 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/tabs/tabs-vertical.vue.d.ts

@@ -14,17 +14,17 @@ type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
   close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
-  position: "left" | "right";
   rounded: boolean;
+  position: "left" | "right";
 }, {}, {}, {}, 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/tabs/tabs.vue.d.ts

@@ -10,18 +10,18 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
   close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
+  rounded: boolean;
   position: "left" | "right" | "top" | "bottom";
   block: boolean;
-  rounded: boolean;
   keepAlive: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/textarea/style2.css

@@ -29,6 +29,7 @@
 }
 .u-textarea--small {
   border-radius: var(--u-radius-small);
+  font-size: var(--u-font-size-main-small);
 }
 .u-textarea--small .u-textarea__native {
   padding: calc(var(--u-gap-small) / 2);
@@ -36,10 +37,11 @@
   padding-right: 20px;
 }
 .u-textarea--small .u-textarea__clear {
-  font-size: var(--u-font-size-main-small);
+  font-size: inherit;
 }
 .u-textarea--default {
   border-radius: var(--u-radius-default);
+  font-size: var(--u-font-size-main-default);
 }
 .u-textarea--default .u-textarea__native {
   padding: calc(var(--u-gap-default) / 2);
@@ -47,10 +49,11 @@
   padding-right: 20px;
 }
 .u-textarea--default .u-textarea__clear {
-  font-size: var(--u-font-size-main-default);
+  font-size: inherit;
 }
 .u-textarea--large {
   border-radius: var(--u-radius-large);
+  font-size: var(--u-font-size-main-large);
 }
 .u-textarea--large .u-textarea__native {
   padding: calc(var(--u-gap-large) / 2);
@@ -58,7 +61,7 @@
   padding-right: 20px;
 }
 .u-textarea--large .u-textarea__clear {
-  font-size: var(--u-font-size-main-large);
+  font-size: inherit;
 }
 .u-textarea__native {
   color: var(--u-text-color-main);
@@ -66,7 +69,7 @@
   border: none;
   background-color: transparent;
   font-family: var(--u-font-family);
-  font-size: 1em;
+  font-size: inherit;
   width: 100%;
   display: block;
   padding: 0;

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

@@ -11,21 +11,21 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
+  clear: () => any;
   change: (value: string) => any;
   focus: () => any;
-  clear: () => any;
   blur: () => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
   onFocus?: (() => any) | undefined;
-  onClear?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
   resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -14,8 +14,8 @@ declare const __VLS_base: _$vue.DefineComponent<TipProps, {}, {}, {}, {}, _$vue.
   trigger: "hover" | "click";
   contentTag: string;
   visible: boolean;
-  content: string;
   direction: TipDirection;
+  content: string;
   alignment: TipAlign;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -15,24 +15,24 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | number | undefined) => any;
 } & {
-  change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
   clear: () => any;
+  change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
   "update:text": (text?: string | undefined) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-  onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   onClear?: (() => any) | undefined;
+  onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  minWidth: string;
   disabled: boolean;
-  readonly: boolean;
-  placeholder: string;
-  clearable: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  minWidth: string;
+  placeholder: string;
+  clearable: boolean;
   filterable: 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/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;

package/dist/types/collapse.d.ts

@@ -20,11 +20,6 @@ interface CollapseProps extends ComponentProps {
    * @default false
    */
   defaultCollapseAll?: boolean;
-  /**
-   * 是否使用边框模式
-   * @default false
-   */
-  bordered?: boolean;
   /**
    * 自定义展开图标组件，活动态会自动旋转 90°。
    * 接受任意 Vue 组件（SFC、Functional Component 等）。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "files": [
     "dist",
     "src"
@@ -37,9 +37,6 @@
   "scripts": {
     "build": "vp pack"
   },
-  "devDependencies": {
-    "@cat-kit/fe": "^1.1.3"
-  },
   "dependencies": {
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.5",
@@ -48,33 +45,34 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.41.1",
-    "@embedpdf/core": "^2.14.1",
-    "@embedpdf/engines": "^2.14.1",
-    "@embedpdf/plugin-document-manager": "^2.14.1",
-    "@embedpdf/plugin-render": "^2.14.1",
-    "@embedpdf/plugin-scroll": "^2.14.1",
-    "@embedpdf/plugin-viewport": "^2.14.1",
+    "@embedpdf/core": "^2.14.3",
+    "@embedpdf/engines": "^2.14.3",
+    "@embedpdf/plugin-document-manager": "^2.14.3",
+    "@embedpdf/plugin-render": "^2.14.3",
+    "@embedpdf/plugin-scroll": "^2.14.3",
+    "@embedpdf/plugin-viewport": "^2.14.3",
     "@embedpdf/plugin-zoom": "^2.14.1",
-    "@lexical/history": "^0.43.0",
-    "@lexical/html": "^0.43.0",
-    "@lexical/link": "^0.43.0",
-    "@lexical/list": "^0.43.0",
-    "@lexical/rich-text": "^0.43.0",
-    "@lexical/selection": "^0.43.0",
-    "@lexical/utils": "^0.43.0",
-    "@visactor/vtable": "^1.26.0",
+    "@lexical/history": "^0.45.0",
+    "@lexical/html": "^0.45.0",
+    "@lexical/link": "^0.45.0",
+    "@lexical/list": "^0.45.0",
+    "@lexical/rich-text": "^0.45.0",
+    "@lexical/selection": "^0.45.0",
+    "@lexical/utils": "^0.45.0",
+    "@visactor/vtable": "^1.26.1",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
-    "lexical": "^0.43.0"
+    "lexical": "^0.45.0"
   },
   "peerDependencies": {
-    "@cat-kit/core": ">=1.1.0",
+    "@cat-kit/core": ">=1.1.5",
     "@cat-kit/excel": ">=1.0.0",
-    "@veltra/compositions": "1.1.21",
-    "@veltra/directives": "1.1.21",
-    "@veltra/icons": "1.1.21",
-    "@veltra/styles": "1.1.21",
-    "@veltra/utils": "1.1.21",
+    "@cat-kit/fe": "^1.1.5",
+    "@veltra/compositions": "1.1.23",
+    "@veltra/directives": "1.1.23",
+    "@veltra/icons": "1.1.23",
+    "@veltra/styles": "1.1.23",
+    "@veltra/utils": "1.1.23",
     "vue": ">=3.5.0"
   }
 }

package/src/components/collapse/collapse-item.vue

@@ -54,8 +54,7 @@ const iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight)
 const classList = computed(() => [
   cls.e('item'),
   bem.is('active', isActive.value),
-  bem.is('disabled', props.disabled),
-  bem.is('bordered', context?.bordered.value)
+  bem.is('disabled', props.disabled)
 ])
 
 const headerClassList = computed(() => [

package/src/components/collapse/collapse.vue

@@ -18,8 +18,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<CollapseProps>(), {
   accordion: false,
-  defaultCollapseAll: false,
-  bordered: false
+  defaultCollapseAll: false
 })
 const emit = defineEmits<CollapseEmits>()
 
@@ -33,9 +32,7 @@ const { size } = useFormFallbackProps([props], { size: 'default' })
 
 const expandIcon = computed(() => props.expandIcon)
 
-const bordered = computed(() => props.bordered)
-
-const classList = computed(() => [cls.b, cls.m(size.value), bem.is('bordered', bordered.value)])
+const classList = computed(() => [cls.b, cls.m(size.value)])
 
 const modelValue = useModel<CollapseProps, 'modelValue'>({
   props,
@@ -110,7 +107,6 @@ const unregister = (value: CollapseValue) => {
 provide(CollapseDIKey, {
   cls,
   size,
-  bordered,
   expandIcon,
   activeValues,
   toggle,

package/src/components/collapse/di.ts

@@ -6,7 +6,6 @@ import type { CollapseValue } from '../../types'
 export interface CollapseContext {
   cls: BEM<'collapse'>
   size: ComputedRef<ComponentSize>
-  bordered: ComputedRef<boolean>
   expandIcon: ComputedRef<Component | undefined>
   activeValues: ComputedRef<CollapseValue[]>
   toggle: (value: CollapseValue) => void

package/src/components/collapse/style.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'pkg:@veltra/styles/mixins' as m;
-@use 'pkg:@veltra/styles/vars';
 @use 'pkg:@veltra/styles/functions' as fn;
 
 $root-name: collapse;
@@ -9,6 +7,32 @@ $root-name: collapse;
 $ease: cubic-bezier(0.4, 0, 0.2, 1);
 $transition-fast: 0.18s $ease;
 $transition-normal: 0.24s $ease;
+$item-bg: fn.component-var(
+  collapse,
+  item-bg,
+  color-mix(in srgb, #{fn.use-var(bg-color, hover)} 72%, #{fn.use-var(bg-color, top)})
+);
+$item-hover-bg: fn.component-var(
+  collapse,
+  item-hover-bg,
+  color-mix(in srgb, #{fn.use-var(color, primary)} 4%, #{$item-bg})
+);
+$item-active-bg: fn.component-var(
+  collapse,
+  item-active-bg,
+  color-mix(in srgb, #{fn.use-var(color, primary)} 5%, #{$item-bg})
+);
+$header-active-bg: fn.component-var(
+  collapse,
+  header-active-bg,
+  color-mix(in srgb, #{fn.use-var(color, primary)} 8%, #{$item-bg})
+);
+$content-bg: fn.component-var(
+  collapse,
+  content-bg,
+  color-mix(in srgb, #{$item-active-bg} 42%, #{fn.use-var(bg-color, top)})
+);
+$active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(color, primary));
 
 @include m.b($root-name) {
   width: 100%;
@@ -18,32 +42,42 @@ $transition-normal: 0.24s $ease;
 
   // ===== Item =====
   @include m.e(item) {
+    position: relative;
     border-radius: calc(fn.use-var(radius, default) + 2px);
-    background-color: fn.use-var(bg-color, hover);
+    overflow: hidden;
+    background-color: $item-bg;
     transition: background-color $transition-fast;
 
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 3px;
+      background-color: fn.use-var(color, primary);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity $transition-fast;
+      z-index: 1;
+    }
+
     & + #{fn.bem($root-name, item)} {
       margin-top: fn.use-var(gap, default);
     }
 
     @include m.is-not(disabled) {
       &:hover {
-        // hover 状态与展开状态保持一致的微加深背景（混入 6% 的正文文字色）
-        background-color: color-mix(
-          in srgb,
-          #{fn.use-var(text-color, main)} 6%,
-          #{fn.use-var(bg-color, hover)}
-        );
+        background-color: $item-hover-bg;
       }
     }
 
     @include m.is(active) {
-      // 展开/活动状态背景（混入 6% 的正文文字色）
-      background-color: color-mix(
-        in srgb,
-        #{fn.use-var(text-color, main)} 6%,
-        #{fn.use-var(bg-color, hover)}
-      );
+      background-color: $item-active-bg;
+
+      &::before {
+        opacity: 1;
+      }
     }
 
     @include m.is(disabled) {
@@ -79,10 +113,14 @@ $transition-normal: 0.24s $ease;
 
     @include m.is(active) {
       font-weight: 600;
+      color: $active-title-color;
+      background-color: $header-active-bg;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
 
       #{fn.bem($root-name, icon)} {
         transform: rotate(90deg);
-        color: fn.use-var(text-color, second);
+        color: $active-title-color;
       }
     }
   }
@@ -111,6 +149,9 @@ $transition-normal: 0.24s $ease;
   @include m.e(content-wrapper) {
     overflow: hidden;
     height: 0;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+    background-color: $content-bg;
     transition: height $transition-normal;
   }
 
@@ -141,25 +182,4 @@ $transition-normal: 0.24s $ease;
       }
     }
   }
-
-  // ===== Bordered =====
-  @include m.is(bordered) {
-    #{fn.bem($root-name, item)} {
-      background-color: transparent;
-      border: 1px solid vars.$border-color;
-
-      &:hover,
-      &.is-active {
-        background-color: transparent;
-      }
-    }
-
-    #{fn.bem($root-name, header)} {
-      border-radius: 0;
-
-      @include m.is(active) {
-        border-bottom: 1px solid vars.$border-color;
-      }
-    }
-  }
 }