@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.
- package/dist/components/action/action-group.vue.d.ts +1 -1
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/auto-complete/auto-complete.vue.d.ts +2 -2
- package/dist/components/batch-edit/batch-edit.vue.d.ts +2 -2
- package/dist/components/cascade/cascade.vue.d.ts +2 -2
- package/dist/components/date-picker/date-picker.vue.d.ts +2 -2
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +2 -2
- package/dist/components/empty/empty.vue.d.ts +1 -1
- package/dist/components/input/input.vue.d.ts +2 -2
- package/dist/components/multi-select/multi-select.vue.d.ts +2 -2
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +2 -2
- package/dist/components/number-input/number-input.vue.d.ts +2 -2
- package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
- package/dist/components/password-input/password-input.vue.d.ts +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
- package/dist/components/select/select.vue.d.ts +2 -2
- package/dist/components/steps/steps.vue.d.ts +2 -2
- package/dist/components/table/allocate-column-widths.js +32 -0
- package/dist/components/table/allocate-column-widths.js.map +1 -0
- package/dist/components/table/use-col-resize.js +2 -10
- package/dist/components/table/use-col-resize.js.map +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +2 -2
- package/dist/components/tree-select/tree-select.vue.d.ts +2 -2
- package/package.json +6 -6
- package/src/components/table/__test__/col-width.test.ts +77 -0
- package/src/components/table/allocate-column-widths.ts +38 -0
- 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
|
-
|
|
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
|
|
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.
|
|
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.
|
|
61
|
-
"@veltra/directives": "1.2.
|
|
62
|
-
"@veltra/icons": "1.2.
|
|
63
|
-
"@veltra/styles": "1.2.
|
|
64
|
-
"@veltra/utils": "1.2.
|
|
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
|
-
|
|
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')
|