@veltra/desktop 1.2.25 → 1.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/components/action/action-group.vue.d.ts +1 -1
  2. package/dist/components/action/action.vue.d.ts +1 -1
  3. package/dist/components/auto-complete/auto-complete.vue.d.ts +2 -2
  4. package/dist/components/batch-edit/batch-edit.vue.d.ts +2 -2
  5. package/dist/components/cascade/cascade.vue.d.ts +2 -2
  6. package/dist/components/date-picker/date-picker.vue.d.ts +2 -2
  7. package/dist/components/date-range-picker/date-range-picker.vue.d.ts +2 -2
  8. package/dist/components/empty/empty.vue.d.ts +1 -1
  9. package/dist/components/input/input.vue.d.ts +2 -2
  10. package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
  11. package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
  12. package/dist/components/number-input/number-input.vue.d.ts +2 -2
  13. package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
  14. package/dist/components/password-input/password-input.vue.d.ts +1 -1
  15. package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
  16. package/dist/components/select/select.vue.d.ts +2 -2
  17. package/dist/components/steps/steps.vue.d.ts +2 -2
  18. package/dist/components/table/allocate-column-widths.js +32 -0
  19. package/dist/components/table/allocate-column-widths.js.map +1 -0
  20. package/dist/components/table/use-col-resize.js +2 -10
  21. package/dist/components/table/use-col-resize.js.map +1 -1
  22. package/dist/components/textarea/textarea.vue.d.ts +2 -2
  23. package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
  24. package/package.json +6 -6
  25. package/src/components/table/__test__/col-width.test.ts +77 -0
  26. package/src/components/table/allocate-column-widths.ts +38 -0
  27. package/src/components/table/use-col-resize.ts +2 -19
@@ -7,8 +7,8 @@ type __VLS_Slots = {
7
7
  };
8
8
  declare const __VLS_base: import("vue").DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
9
9
  type: import("@veltra/utils").ColorType;
10
- text: boolean;
11
10
  size: "small" | "default" | "large";
11
+ text: boolean;
12
12
  circle: boolean;
13
13
  max: number;
14
14
  loading: boolean;
@@ -13,8 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<ActionProps, {}, {}, {},
13
13
  onRun?: (() => any) | undefined;
14
14
  }>, {
15
15
  type: ButtonType;
16
- text: boolean;
17
16
  size: import("@veltra/utils").ComponentSize;
17
+ text: boolean;
18
18
  circle: boolean;
19
19
  loading: boolean;
20
20
  inDropdown: boolean;
@@ -22,10 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Auto
22
22
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
23
23
  onSelect?: ((value: string) => any) | undefined;
24
24
  }>, {
25
- placeholder: string;
26
- clearable: boolean;
27
25
  disabled: boolean;
28
26
  readonly: boolean;
27
+ placeholder: string;
28
+ clearable: boolean;
29
29
  allowCustom: boolean;
30
30
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
31
31
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -6,20 +6,20 @@ declare const __VLS_base: import("vue").DefineComponent<BatchEditProps, {}, {},
6
6
  "update:selected": (value: Record<string, any> | undefined) => any;
7
7
  "update:checked": (value: Record<string, any>[]) => any;
8
8
  "update:current": (row?: TableRow | undefined) => any;
9
- "update:data": (value: Record<string, any>[]) => any;
10
9
  "update:rows": (rows: TableRow[]) => any;
11
10
  "update:forest": (rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any;
12
11
  "cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
13
12
  "row-click": (row: TableRow, ev: MouseEvent) => any;
13
+ "update:data": (value: Record<string, any>[]) => any;
14
14
  }, string, import("vue").PublicProps, Readonly<BatchEditProps> & Readonly<{
15
15
  "onUpdate:selected"?: ((value: Record<string, any> | undefined) => any) | undefined;
16
16
  "onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
17
17
  "onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;
18
- "onUpdate:data"?: ((value: Record<string, any>[]) => any) | undefined;
19
18
  "onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
20
19
  "onUpdate:forest"?: ((rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
21
20
  "onCell-click"?: ((row: TableRow, column: TableColumn, ev: MouseEvent) => any) | undefined;
22
21
  "onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
22
+ "onUpdate:data"?: ((value: Record<string, any>[]) => any) | undefined;
23
23
  }>, {
24
24
  cols: string | [string, string];
25
25
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -15,11 +15,11 @@ declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {},
15
15
  valueKey: string;
16
16
  childrenKey: string;
17
17
  data: Record<string, any>[];
18
+ disabled: boolean;
19
+ readonly: boolean;
18
20
  placeholder: string;
19
21
  clearable: boolean;
20
22
  filterable: boolean;
21
- disabled: boolean;
22
- readonly: boolean;
23
23
  visibilityLimit: number;
24
24
  separator: string;
25
25
  showFullPath: boolean;
@@ -6,10 +6,10 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
6
6
  "onUpdate:modelValue"?: ((value?: string | number | Date | undefined) => any) | undefined;
7
7
  }>, {
8
8
  type: "date" | "month" | "year";
9
- placeholder: string;
10
- clearable: boolean;
11
9
  disabled: boolean;
12
10
  readonly: boolean;
11
+ placeholder: string;
12
+ clearable: boolean;
13
13
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
14
14
  declare const _default: typeof __VLS_export;
15
15
  //#endregion
@@ -6,10 +6,10 @@ declare const __VLS_export: import("vue").DefineComponent<DateRangePickerProps,
6
6
  "onUpdate:modelValue"?: ((value?: [string, string] | undefined) => any) | undefined;
7
7
  }>, {
8
8
  type: "date" | "month" | "year";
9
- placeholder: [string, string];
10
- clearable: boolean;
11
9
  disabled: boolean;
12
10
  readonly: boolean;
11
+ placeholder: [string, string];
12
+ clearable: boolean;
13
13
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
14
14
  declare const _default: typeof __VLS_export;
15
15
  //#endregion
@@ -1,8 +1,8 @@
1
1
  import { EmptyProps } from "../../types/empty.js";
2
2
  //#region src/components/empty/empty.vue.d.ts
3
3
  declare const __VLS_export: import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
4
- text: string;
5
4
  size: number;
5
+ text: string;
6
6
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
7
  declare const _default: typeof __VLS_export;
8
8
  //#endregion
@@ -32,10 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Inpu
32
32
  onBlur?: ((value?: string | undefined) => any) | undefined;
33
33
  "onNative:input"?: ((ev: Event) => any) | undefined;
34
34
  }>, {
35
- placeholder: string;
36
- clearable: boolean;
37
35
  disabled: boolean;
38
36
  readonly: boolean;
37
+ placeholder: string;
38
+ clearable: boolean;
39
39
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
40
40
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
41
41
  declare const _default: typeof __VLS_export;
@@ -28,11 +28,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
28
28
  }>, {
29
29
  labelKey: string;
30
30
  valueKey: string;
31
+ disabled: boolean;
32
+ readonly: boolean;
31
33
  placeholder: string;
32
34
  clearable: boolean;
33
35
  minWidth: string;
34
- disabled: boolean;
35
- readonly: boolean;
36
36
  visibilityLimit: number;
37
37
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
38
38
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -24,12 +24,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
24
24
  expandAll: boolean;
25
25
  labelKey: string;
26
26
  valueKey: string;
27
+ disabled: boolean;
28
+ readonly: boolean;
27
29
  placeholder: string;
28
30
  clearable: boolean;
29
31
  filterable: boolean;
30
32
  minWidth: string;
31
- disabled: boolean;
32
- readonly: boolean;
33
33
  visibilityLimit: number;
34
34
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
35
35
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -20,10 +20,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
20
20
  onClear?: (() => any) | undefined;
21
21
  onChange?: ((value?: number | undefined) => any) | undefined;
22
22
  }>, {
23
- placeholder: string;
24
- clearable: boolean;
25
23
  disabled: boolean;
26
24
  readonly: boolean;
25
+ placeholder: string;
26
+ clearable: boolean;
27
27
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
28
28
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
29
29
  declare const _default: typeof __VLS_export;
@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
22
22
  "onUpdate:start"?: ((value: number | undefined) => any) | undefined;
23
23
  "onUpdate:end"?: ((value: number | undefined) => any) | undefined;
24
24
  }>, {
25
- clearable: boolean;
26
25
  disabled: boolean;
27
26
  readonly: boolean;
27
+ clearable: boolean;
28
28
  startPlaceholder: string;
29
29
  endPlaceholder: string;
30
30
  separator: string;
@@ -13,9 +13,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
13
13
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
14
14
  "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
15
15
  }>, {
16
- clearable: boolean;
17
16
  disabled: boolean;
18
17
  readonly: boolean;
18
+ clearable: boolean;
19
19
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
20
20
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
21
21
  declare const _default: typeof __VLS_export;
@@ -10,9 +10,9 @@ declare const __VLS_export: import("vue").DefineComponent<RichTextEditorProps &
10
10
  }> & Readonly<{
11
11
  "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
12
12
  }>, {
13
- placeholder: string;
14
13
  disabled: boolean;
15
14
  readonly: boolean;
15
+ placeholder: string;
16
16
  format: RichTextFormat;
17
17
  toolbar: ToolbarItem[];
18
18
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -26,10 +26,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
26
26
  }>, {
27
27
  labelKey: string;
28
28
  valueKey: string;
29
- placeholder: string;
30
- clearable: boolean;
31
29
  disabled: boolean;
32
30
  readonly: boolean;
31
+ placeholder: string;
32
+ clearable: boolean;
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
34
34
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
35
35
  declare const _default: typeof __VLS_export;
@@ -6,11 +6,11 @@ type __VLS_Slots = {
6
6
  tip?: (scope: StepsSlotScope) => any;
7
7
  };
8
8
  declare const __VLS_base: import("vue").DefineComponent<StepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
- "update:current": (value?: string | number | undefined) => any;
10
9
  "item-click": (item: Record<string, any>, index: number) => any;
10
+ "update:current": (value?: string | number | undefined) => any;
11
11
  }, string, import("vue").PublicProps, Readonly<StepsProps> & Readonly<{
12
- "onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
13
12
  "onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
13
+ "onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
14
14
  }>, {
15
15
  labelKey: string;
16
16
  direction: "horizontal" | "vertical";
@@ -0,0 +1,32 @@
1
+ //#region src/components/table/allocate-column-widths.ts
2
+ /**
3
+ * 按容器宽度分配叶子列宽。
4
+ *
5
+ * - `explicitWidth` 列:保持配置/拖拽锁定的宽度
6
+ * - `fixed` 且未显式设宽的列:保持 `minWidth`,不参与剩余宽度均分
7
+ * - 其余未显式设宽的列:均分容器剩余宽度
8
+ */
9
+ function allocateLeafColumnWidths(leafColumns, containerWidth) {
10
+ if (!containerWidth || !leafColumns.length) return;
11
+ const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed);
12
+ const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed);
13
+ fixedFlexColumns.forEach((column) => {
14
+ column.data.width = void 0;
15
+ });
16
+ const explicitWidthTotal = leafColumns.filter((column) => column.explicitWidth).reduce((acc, cur) => acc + (cur.width ?? cur.minWidth), 0);
17
+ const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth, 0);
18
+ const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth, 0);
19
+ const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal;
20
+ if (growColumns.length > 0 && totalBase < containerWidth) {
21
+ const allocatedWidth = (containerWidth - totalBase) / growColumns.length;
22
+ growColumns.forEach((column) => {
23
+ column.width = column.minWidth + allocatedWidth;
24
+ });
25
+ } else growColumns.forEach((column) => {
26
+ column.data.width = void 0;
27
+ });
28
+ }
29
+ //#endregion
30
+ export { allocateLeafColumnWidths };
31
+
32
+ //# sourceMappingURL=allocate-column-widths.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"allocate-column-widths.js","names":[],"sources":["../../../src/components/table/allocate-column-widths.ts"],"sourcesContent":["import type { ColumnNode } from './node/col'\n\n/**\n * 按容器宽度分配叶子列宽。\n *\n * - `explicitWidth` 列:保持配置/拖拽锁定的宽度\n * - `fixed` 且未显式设宽的列:保持 `minWidth`,不参与剩余宽度均分\n * - 其余未显式设宽的列:均分容器剩余宽度\n */\nexport function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWidth: number): void {\n if (!containerWidth || !leafColumns.length) return\n\n const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed)\n // fixed 且未显式设宽:清掉可能被旧算法撑大的残留 width,回落到 minWidth\n const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)\n\n fixedFlexColumns.forEach((column) => {\n column.data.width = undefined\n })\n\n const explicitWidthTotal = leafColumns\n .filter((column) => column.explicitWidth)\n .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)\n const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal\n\n if (growColumns.length > 0 && totalBase < containerWidth) {\n const allocatedWidth = (containerWidth - totalBase) / growColumns.length\n growColumns.forEach((column) => {\n column.width = column.minWidth! + allocatedWidth\n })\n } else {\n growColumns.forEach((column) => {\n column.data.width = undefined\n })\n }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,yBAAyB,aAA2B,gBAA8B;CAChG,IAAI,CAAC,kBAAkB,CAAC,YAAY,QAAQ;CAE5C,MAAM,cAAc,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,CAAC,OAAO,KAAK;CAEzF,MAAM,mBAAmB,YAAY,QAAQ,WAAW,CAAC,OAAO,iBAAiB,OAAO,KAAK;CAE7F,iBAAiB,SAAS,WAAW;EACnC,OAAO,KAAK,QAAQ,KAAA;CACtB,CAAC;CAED,MAAM,qBAAqB,YACxB,QAAQ,WAAW,OAAO,aAAa,CAAC,CACxC,QAAQ,KAAK,QAAQ,OAAO,IAAI,SAAS,IAAI,WAAY,CAAC;CAC7D,MAAM,gBAAgB,YAAY,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CAC7E,MAAM,qBAAqB,iBAAiB,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAAC;CACvF,MAAM,YAAY,qBAAqB,gBAAgB;CAEvD,IAAI,YAAY,SAAS,KAAK,YAAY,gBAAgB;EACxD,MAAM,kBAAkB,iBAAiB,aAAa,YAAY;EAClE,YAAY,SAAS,WAAW;GAC9B,OAAO,QAAQ,OAAO,WAAY;EACpC,CAAC;CACH,OACE,YAAY,SAAS,WAAW;EAC9B,OAAO,KAAK,QAAQ,KAAA;CACtB,CAAC;AAEL"}
@@ -1,4 +1,5 @@
1
1
  import { TableResizeKey } from "./di.js";
2
+ import { allocateLeafColumnWidths } from "./allocate-column-widths.js";
2
3
  import { nextTick, provide, shallowRef, watchEffect } from "vue";
3
4
  //#region src/components/table/use-col-resize.ts
4
5
  function useColResize(options) {
@@ -13,16 +14,7 @@ function useColResize(options) {
13
14
  function correctColumnStyle() {
14
15
  const containerWidth = scrollRef.value?.containerRef?.clientWidth;
15
16
  if (!containerWidth || !leafColumns.value.length) return;
16
- const flexColumns = leafColumns.value.filter((column) => !column.explicitWidth);
17
- const totalBase = leafColumns.value.filter((column) => column.explicitWidth).reduce((acc, cur) => acc + (cur.width ?? cur.minWidth), 0) + flexColumns.reduce((acc, cur) => acc + cur.minWidth, 0);
18
- if (flexColumns.length > 0 && totalBase < containerWidth) {
19
- const allocatedWidth = (containerWidth - totalBase) / flexColumns.length;
20
- flexColumns.forEach((column) => {
21
- column.width = column.minWidth + allocatedWidth;
22
- });
23
- } else flexColumns.forEach((column) => {
24
- column.data.width = void 0;
25
- });
17
+ allocateLeafColumnWidths(leafColumns.value, containerWidth);
26
18
  const fixedLeft = leafColumns.value.filter((column) => column.fixed === "left");
27
19
  const fixedRight = leafColumns.value.filter((column) => column.fixed === "right");
28
20
  fixedLeft.reduce((acc, cur) => {
@@ -1 +1 @@
1
- {"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n scrollRef: ShallowRef<ScrollExposed | undefined>\n leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n resizeLineRef: ShallowRef<HTMLElement | undefined>\n colgroupRef: ShallowRef<HTMLElement | undefined>\n showResizeLine: ShallowRef<boolean>\n handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n const { scrollRef, leafColumns } = options\n\n const showResizeLine = shallowRef(false)\n\n const resizeLineRef = shallowRef<HTMLElement>()\n const colgroupRef = shallowRef<HTMLElement>()\n const headerRef = shallowRef<HTMLElement>()\n\n /**\n * 修正列样式\n */\n function correctColumnStyle() {\n // 获取表格容器宽度\n const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n if (!containerWidth || !leafColumns.value.length) return\n\n const flexColumns = leafColumns.value.filter((column) => !column.explicitWidth)\n const fixedWidthTotal = leafColumns.value\n .filter((column) => column.explicitWidth)\n .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)\n const flexBaseTotal = flexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)\n const totalBase = fixedWidthTotal + flexBaseTotal\n\n // 仅未显式指定 width 的列参与剩余宽度均分;指定了 width 的列保持该宽度。\n if (flexColumns.length > 0 && totalBase < containerWidth) {\n const allocatedWidth = (containerWidth - totalBase) / flexColumns.length\n\n flexColumns.forEach((column) => {\n column.width = column.minWidth! + allocatedWidth\n })\n } else {\n flexColumns.forEach((column) => {\n column.data.width = undefined\n })\n }\n\n const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n fixedLeft.reduce((acc, cur) => {\n cur.style.left = acc\n return acc + (cur.width ?? cur.minWidth!)\n }, 0)\n\n fixedRight.reduceRight((acc, cur) => {\n cur.style.right = acc\n return acc + (cur.width ?? cur.minWidth!)\n }, 0)\n }\n\n watchEffect(correctColumnStyle)\n\n function updateResizeLine(transformX: number): void {\n if (!resizeLineRef.value) return\n resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n }\n\n // 表格相对于页面左边缘的偏移量,\n // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n let containerLeft = 0\n let originX = 0\n let originWidth = 0\n let currentResizeColumn: ColumnNode | null = null\n\n function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n const tableEl = scrollRef.value?.el\n if (!tableEl) return\n\n showResizeLine.value = true\n currentResizeColumn = resizeColumn\n originX = e.pageX\n originWidth = resizeColumn.width ?? 0\n\n const { left } = tableEl.getBoundingClientRect()\n containerLeft = left\n\n nextTick(() => {\n updateResizeLine(e.pageX - left)\n })\n\n document.addEventListener('mousemove', handleResizeMousemove)\n document.addEventListener('mouseup', handleResizeMouseup)\n }\n\n function handleResizeMousemove(e: MouseEvent): void {\n updateResizeLine(e.pageX - containerLeft)\n }\n\n function handleResizeMouseup(e: MouseEvent): void {\n currentResizeColumn!.width = Math.max(\n originWidth + e.pageX - originX,\n currentResizeColumn!.minWidth!\n )\n currentResizeColumn!.explicitWidth = true\n\n showResizeLine.value = false\n currentResizeColumn = null\n correctColumnStyle()\n\n document.removeEventListener('mouseup', handleResizeMouseup)\n document.removeEventListener('mousemove', handleResizeMousemove)\n }\n\n provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;AAkBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,MAAM,cAAc,YAAY,MAAM,QAAQ,WAAW,CAAC,OAAO,aAAa;EAK9E,MAAM,YAJkB,YAAY,MACjC,QAAQ,WAAW,OAAO,aAAa,CAAC,CACxC,QAAQ,KAAK,QAAQ,OAAO,IAAI,SAAS,IAAI,WAAY,CAE5B,IADV,YAAY,QAAQ,KAAK,QAAQ,MAAM,IAAI,UAAW,CAC5B;EAGhD,IAAI,YAAY,SAAS,KAAK,YAAY,gBAAgB;GACxD,MAAM,kBAAkB,iBAAiB,aAAa,YAAY;GAElE,YAAY,SAAS,WAAW;IAC9B,OAAO,QAAQ,OAAO,WAAY;GACpC,CAAC;EACH,OACE,YAAY,SAAS,WAAW;GAC9B,OAAO,KAAK,QAAQ,KAAA;EACtB,CAAC;EAGH,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAE9B,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}
1
+ {"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { allocateLeafColumnWidths } from './allocate-column-widths'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n scrollRef: ShallowRef<ScrollExposed | undefined>\n leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n resizeLineRef: ShallowRef<HTMLElement | undefined>\n colgroupRef: ShallowRef<HTMLElement | undefined>\n showResizeLine: ShallowRef<boolean>\n handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n const { scrollRef, leafColumns } = options\n\n const showResizeLine = shallowRef(false)\n\n const resizeLineRef = shallowRef<HTMLElement>()\n const colgroupRef = shallowRef<HTMLElement>()\n const headerRef = shallowRef<HTMLElement>()\n\n /**\n * 修正列样式\n */\n function correctColumnStyle() {\n // 获取表格容器宽度\n const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n if (!containerWidth || !leafColumns.value.length) return\n\n allocateLeafColumnWidths(leafColumns.value, containerWidth)\n\n const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n fixedLeft.reduce((acc, cur) => {\n cur.style.left = acc\n return acc + (cur.width ?? cur.minWidth!)\n }, 0)\n\n fixedRight.reduceRight((acc, cur) => {\n cur.style.right = acc\n return acc + (cur.width ?? cur.minWidth!)\n }, 0)\n }\n\n watchEffect(correctColumnStyle)\n\n function updateResizeLine(transformX: number): void {\n if (!resizeLineRef.value) return\n resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n }\n\n // 表格相对于页面左边缘的偏移量,\n // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n let containerLeft = 0\n let originX = 0\n let originWidth = 0\n let currentResizeColumn: ColumnNode | null = null\n\n function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n const tableEl = scrollRef.value?.el\n if (!tableEl) return\n\n showResizeLine.value = true\n currentResizeColumn = resizeColumn\n originX = e.pageX\n originWidth = resizeColumn.width ?? 0\n\n const { left } = tableEl.getBoundingClientRect()\n containerLeft = left\n\n nextTick(() => {\n updateResizeLine(e.pageX - left)\n })\n\n document.addEventListener('mousemove', handleResizeMousemove)\n document.addEventListener('mouseup', handleResizeMouseup)\n }\n\n function handleResizeMousemove(e: MouseEvent): void {\n updateResizeLine(e.pageX - containerLeft)\n }\n\n function handleResizeMouseup(e: MouseEvent): void {\n currentResizeColumn!.width = Math.max(\n originWidth + e.pageX - originX,\n currentResizeColumn!.minWidth!\n )\n currentResizeColumn!.explicitWidth = true\n\n showResizeLine.value = false\n currentResizeColumn = null\n correctColumnStyle()\n\n document.removeEventListener('mouseup', handleResizeMouseup)\n document.removeEventListener('mousemove', handleResizeMousemove)\n }\n\n provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,yBAAyB,YAAY,OAAO,cAAc;EAE1D,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAE9B,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}
@@ -20,10 +20,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
20
20
  onFocus?: (() => any) | undefined;
21
21
  onBlur?: (() => any) | undefined;
22
22
  }>, {
23
- placeholder: string;
24
- clearable: boolean;
25
23
  disabled: boolean;
26
24
  readonly: boolean;
25
+ placeholder: string;
26
+ clearable: boolean;
27
27
  resize: boolean;
28
28
  autosize: boolean;
29
29
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -27,12 +27,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
27
27
  expandAll: boolean;
28
28
  labelKey: string;
29
29
  valueKey: string;
30
+ disabled: boolean;
31
+ readonly: boolean;
30
32
  placeholder: string;
31
33
  clearable: boolean;
32
34
  filterable: boolean;
33
35
  minWidth: string;
34
- disabled: boolean;
35
- readonly: boolean;
36
36
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
37
37
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
38
38
  declare const _default: typeof __VLS_export;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veltra/desktop",
3
- "version": "1.2.25",
3
+ "version": "1.2.26",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -57,11 +57,11 @@
57
57
  "@cat-kit/core": ">=1.1.8",
58
58
  "@cat-kit/excel": ">=1.0.0",
59
59
  "@cat-kit/fe": "^1.1.8",
60
- "@veltra/compositions": "1.2.25",
61
- "@veltra/directives": "1.2.25",
62
- "@veltra/icons": "1.2.25",
63
- "@veltra/styles": "1.2.25",
64
- "@veltra/utils": "1.2.25",
60
+ "@veltra/compositions": "1.2.26",
61
+ "@veltra/directives": "1.2.26",
62
+ "@veltra/icons": "1.2.26",
63
+ "@veltra/styles": "1.2.26",
64
+ "@veltra/utils": "1.2.26",
65
65
  "vue": ">=3.5.39"
66
66
  },
67
67
  "devDependencies": {
@@ -0,0 +1,77 @@
1
+ import { describe, expect, it } from 'vitest'
2
+
3
+ import type { TableColumn } from '../../../types'
4
+ import { allocateLeafColumnWidths } from '../allocate-column-widths'
5
+ import { ColumnNode } from '../node/col'
6
+
7
+ function createLeaf(column: TableColumn): ColumnNode {
8
+ return new ColumnNode(column, 0, 0)
9
+ }
10
+
11
+ describe('allocateLeafColumnWidths', () => {
12
+ it('fixed right 操作列未设 width 时保持 minWidth,不吞剩余空间', () => {
13
+ const name = createLeaf({ key: 'name', name: '姓名', width: 200 })
14
+ const age = createLeaf({ key: 'age', name: '年龄', width: 200 })
15
+ const action = createLeaf({ key: 'action', name: '操作', fixed: 'right' })
16
+ // 模拟旧算法曾把操作列撑大
17
+ action.data.width = 800
18
+
19
+ allocateLeafColumnWidths([name, age, action], 1000)
20
+
21
+ expect(name.width).toBe(200)
22
+ expect(age.width).toBe(200)
23
+ expect(action.data.width).toBeUndefined()
24
+ expect(action.width).toBe(100)
25
+ })
26
+
27
+ it('多个非 fixed 无 width 列均分剩余宽度', () => {
28
+ const a = createLeaf({ key: 'a', name: 'A', width: 200 })
29
+ const b = createLeaf({ key: 'b', name: 'B' })
30
+ const c = createLeaf({ key: 'c', name: 'C' })
31
+
32
+ // totalBase = 200 + 100 + 100 = 400,剩余 600,每列 +300
33
+ allocateLeafColumnWidths([a, b, c], 1000)
34
+
35
+ expect(a.width).toBe(200)
36
+ expect(b.width).toBe(400)
37
+ expect(c.width).toBe(400)
38
+ })
39
+
40
+ it('fixed left 未设 width 时同样不参与均分', () => {
41
+ const name = createLeaf({ key: 'name', name: '姓名', fixed: 'left' })
42
+ const age = createLeaf({ key: 'age', name: '年龄' })
43
+ const score = createLeaf({ key: 'score', name: '分数' })
44
+
45
+ // totalBase = 100 + 100 + 100 = 300,剩余 700 只分给 age/score
46
+ allocateLeafColumnWidths([name, age, score], 1000)
47
+
48
+ expect(name.data.width).toBeUndefined()
49
+ expect(name.width).toBe(100)
50
+ expect(age.width).toBe(450)
51
+ expect(score.width).toBe(450)
52
+ })
53
+
54
+ it('explicitWidth 列宽度不变', () => {
55
+ const locked = createLeaf({ key: 'locked', name: '锁定', width: 180 })
56
+ locked.explicitWidth = true
57
+ const grow = createLeaf({ key: 'grow', name: '弹性' })
58
+
59
+ allocateLeafColumnWidths([locked, grow], 500)
60
+
61
+ expect(locked.width).toBe(180)
62
+ // totalBase = 180 + 100 = 280,剩余 220 全给 grow
63
+ expect(grow.width).toBe(320)
64
+ })
65
+
66
+ it('无剩余空间时 grow 列回落到 minWidth', () => {
67
+ const a = createLeaf({ key: 'a', name: 'A', width: 400 })
68
+ const b = createLeaf({ key: 'b', name: 'B' })
69
+ b.data.width = 300
70
+
71
+ allocateLeafColumnWidths([a, b], 450)
72
+
73
+ expect(a.width).toBe(400)
74
+ expect(b.data.width).toBeUndefined()
75
+ expect(b.width).toBe(100)
76
+ })
77
+ })
@@ -0,0 +1,38 @@
1
+ import type { ColumnNode } from './node/col'
2
+
3
+ /**
4
+ * 按容器宽度分配叶子列宽。
5
+ *
6
+ * - `explicitWidth` 列:保持配置/拖拽锁定的宽度
7
+ * - `fixed` 且未显式设宽的列:保持 `minWidth`,不参与剩余宽度均分
8
+ * - 其余未显式设宽的列:均分容器剩余宽度
9
+ */
10
+ export function allocateLeafColumnWidths(leafColumns: ColumnNode[], containerWidth: number): void {
11
+ if (!containerWidth || !leafColumns.length) return
12
+
13
+ const growColumns = leafColumns.filter((column) => !column.explicitWidth && !column.fixed)
14
+ // fixed 且未显式设宽:清掉可能被旧算法撑大的残留 width,回落到 minWidth
15
+ const fixedFlexColumns = leafColumns.filter((column) => !column.explicitWidth && column.fixed)
16
+
17
+ fixedFlexColumns.forEach((column) => {
18
+ column.data.width = undefined
19
+ })
20
+
21
+ const explicitWidthTotal = leafColumns
22
+ .filter((column) => column.explicitWidth)
23
+ .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)
24
+ const growBaseTotal = growColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
25
+ const fixedFlexBaseTotal = fixedFlexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
26
+ const totalBase = explicitWidthTotal + growBaseTotal + fixedFlexBaseTotal
27
+
28
+ if (growColumns.length > 0 && totalBase < containerWidth) {
29
+ const allocatedWidth = (containerWidth - totalBase) / growColumns.length
30
+ growColumns.forEach((column) => {
31
+ column.width = column.minWidth! + allocatedWidth
32
+ })
33
+ } else {
34
+ growColumns.forEach((column) => {
35
+ column.data.width = undefined
36
+ })
37
+ }
38
+ }
@@ -1,6 +1,7 @@
1
1
  import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
2
2
 
3
3
  import type { ScrollExposed } from '../../types'
4
+ import { allocateLeafColumnWidths } from './allocate-column-widths'
4
5
  import { TableResizeKey } from './di'
5
6
  import type { ColumnNode } from './node/col'
6
7
 
@@ -34,25 +35,7 @@ export function useColResize(options: Options): UseColResizeReturned {
34
35
 
35
36
  if (!containerWidth || !leafColumns.value.length) return
36
37
 
37
- const flexColumns = leafColumns.value.filter((column) => !column.explicitWidth)
38
- const fixedWidthTotal = leafColumns.value
39
- .filter((column) => column.explicitWidth)
40
- .reduce((acc, cur) => acc + (cur.width ?? cur.minWidth!), 0)
41
- const flexBaseTotal = flexColumns.reduce((acc, cur) => acc + cur.minWidth!, 0)
42
- const totalBase = fixedWidthTotal + flexBaseTotal
43
-
44
- // 仅未显式指定 width 的列参与剩余宽度均分;指定了 width 的列保持该宽度。
45
- if (flexColumns.length > 0 && totalBase < containerWidth) {
46
- const allocatedWidth = (containerWidth - totalBase) / flexColumns.length
47
-
48
- flexColumns.forEach((column) => {
49
- column.width = column.minWidth! + allocatedWidth
50
- })
51
- } else {
52
- flexColumns.forEach((column) => {
53
- column.data.width = undefined
54
- })
55
- }
38
+ allocateLeafColumnWidths(leafColumns.value, containerWidth)
56
39
 
57
40
  const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')
58
41
  const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')