@sdata/web-vue 1.10.0 → 1.11.1
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/sd.css +148 -952
- package/dist/sd.min.css +1 -1
- package/es/_components/input-label/style/input-label.scss +11 -51
- package/es/_components/select-view/select-view.d.ts +1 -1
- package/es/_components/select-view/style/index.css +0 -84
- package/es/_components/virtual-list/interface.d.ts +10 -1
- package/es/{table/hooks/use-table-virtual-size.d.ts → _components/virtual-list/use-virtual-size.d.ts} +4 -2
- package/es/{table/hooks/use-table-virtual-size.js → _components/virtual-list/use-virtual-size.js} +17 -20
- package/es/_components/virtual-list/virtual-list.js +64 -2
- package/es/_components/virtual-list/virtual-list.vue.d.ts +208 -0
- package/es/_components/virtual-list/virtual-list.vue_vue_type_script_lang.js +277 -5
- package/es/_utils/clipboard.js +2 -1
- package/es/auto-complete/auto-complete.d.ts +1 -1
- package/es/auto-complete/index.d.ts +24 -15
- package/es/auto-complete/style/index.css +0 -16
- package/es/auto-complete/style/index.scss +11 -26
- package/es/badge/style/index.scss +11 -41
- package/es/button/style/index.css +35 -445
- package/es/button/style/index.scss +57 -332
- package/es/card/style/index.scss +18 -52
- package/es/carousel/index.d.ts +1 -0
- package/es/cascader/cascader-panel.vue.d.ts +1 -1
- package/es/cascader/cascader.vue.d.ts +3 -3
- package/es/cascader/index.d.ts +10 -10
- package/es/cascader/interface.d.ts +5 -0
- package/es/color-picker/style/index.scss +17 -99
- package/es/config-provider/config-provider.vue.d.ts +1 -1
- package/es/config-provider/index.d.ts +4 -3
- package/es/date-picker/index.d.ts +21 -14
- package/es/date-picker/panels/date/index.vue.d.ts +1 -1
- package/es/date-picker/panels/week/index.vue.d.ts +7 -7
- package/es/date-picker/picker.vue.d.ts +1 -1
- package/es/date-picker/range-picker.vue.d.ts +1 -1
- package/es/descriptions/descriptions.d.ts +1 -1
- package/es/descriptions/index.d.ts +4 -4
- package/es/descriptions/style/index.scss +18 -63
- package/es/form/style/index.css +12 -176
- package/es/form/style/status.scss +36 -73
- package/es/index.css +148 -952
- package/es/index.d.ts +21 -20
- package/es/input/style/input.scss +14 -66
- package/es/input-number/index.d.ts +5 -0
- package/es/input-tag/style/index.css +0 -84
- package/es/input-tag/style/input-tag.scss +16 -170
- package/es/list/style/index.scss +12 -42
- package/es/menu/index.d.ts +8 -0
- package/es/menu/style/index.css +0 -178
- package/es/menu/style/index.scss +36 -139
- package/es/pagination/index.d.ts +3 -3
- package/es/pagination/interface.d.ts +2 -1
- package/es/pagination/page-options.js +1 -1
- package/es/pagination/page-options.vue.d.ts +72 -71
- package/es/pagination/page-options.vue_vue_type_script_lang.js +6 -0
- package/es/pagination/pagination.d.ts +3 -3
- package/es/pagination/style/index.css +0 -12
- package/es/pagination/style/index.scss +19 -76
- package/es/radio/index.d.ts +3 -0
- package/es/result/style/index.css +0 -16
- package/es/result/style/index.scss +12 -34
- package/es/select/index.d.ts +9 -9
- package/es/select/interface.d.ts +2 -1
- package/es/select/select.d.ts +3 -3
- package/es/slider/index.d.ts +6 -3
- package/es/slider/slider.vue.d.ts +1 -1
- package/es/steps/index.d.ts +2 -0
- package/es/switch/index.d.ts +3 -0
- package/es/table/context.d.ts +1 -1
- package/es/table/hooks/use-column-resize.d.ts +2 -3
- package/es/table/hooks/use-column-resize.js +48 -21
- package/es/table/hooks/use-drag.d.ts +4 -2
- package/es/table/hooks/use-drag.js +16 -2
- package/es/table/index.d.ts +22 -34
- package/es/table/interface.d.ts +21 -2
- package/es/table/style/index.css +97 -21
- package/es/table/style/index.scss +137 -125
- package/es/table/table-operation-td.d.ts +2 -2
- package/es/table/table-operation-td.js +4 -5
- package/es/table/table-operation-th.js +4 -4
- package/es/table/table-tbody.js +1 -1
- package/es/table/table-td.js +5 -6
- package/es/table/table-th.js +25 -24
- package/es/table/table-thead.js +1 -1
- package/es/table/table-tr.js +1 -1
- package/es/table/table.d.ts +12 -16
- package/es/table/table.js +399 -190
- package/es/tabs/index.d.ts +1 -0
- package/es/tabs/style/index.scss +53 -135
- package/es/tag/index.d.ts +3 -3
- package/es/tag/style/index.css +0 -84
- package/es/tag/style/index.scss +19 -146
- package/es/tag/tag.vue.d.ts +1 -1
- package/es/theme-provider/index.d.ts +9 -9
- package/es/time-picker/index.d.ts +1 -0
- package/es/timeline/index.d.ts +1 -0
- package/es/transfer/index.d.ts +1 -0
- package/es/transfer/interface.d.ts +1 -1
- package/es/tree/hooks/use-tree-data.d.ts +17 -29
- package/es/tree/index.d.ts +6 -1
- package/es/tree/interface.d.ts +2 -0
- package/es/tree/tree.js +1 -1
- package/es/tree/tree.vue.d.ts +3561 -13
- package/es/tree/tree.vue_vue_type_script_lang.js +21 -9
- package/es/tree-select/hooks/use-selected-state.js +3 -1
- package/es/tree-select/index.d.ts +3 -0
- package/es/tree-select/tree-select.vue.d.ts +1367 -3
- package/json/vetur-attributes.json +1 -6
- package/json/vetur-tags.json +0 -1
- package/json/web-types.json +7 -11
- package/package.json +1 -1
- package/es/style/theme/legacy-less-var.scss +0 -15
- package/es/table/table-col-group.js +0 -21
- package/es/table/table-col-group.vue_vue_type_script_lang.js +0 -32
- package/es/table/table-legacy-virtual-list.js +0 -47
- package/es/table/table-legacy-virtual-list.vue.d.ts +0 -156
- package/es/table/table-legacy-virtual-list.vue_vue_type_script_lang.js +0 -148
- package/es/table/table-virtual-list-item.d.ts +0 -22
- package/es/table/table-virtual-list-item.js +0 -37
|
@@ -40,22 +40,6 @@
|
|
|
40
40
|
color: inherit;
|
|
41
41
|
font-size: 45px;
|
|
42
42
|
}
|
|
43
|
-
.sd-result-icon-success .sd-result-icon-tip {
|
|
44
|
-
color: rgb(var(--success-6));
|
|
45
|
-
background-color: var(--color-success-light-1);
|
|
46
|
-
}
|
|
47
|
-
.sd-result-icon-error .sd-result-icon-tip {
|
|
48
|
-
color: rgb(var(--danger-6));
|
|
49
|
-
background-color: var(--color-danger-light-1);
|
|
50
|
-
}
|
|
51
|
-
.sd-result-icon-info .sd-result-icon-tip {
|
|
52
|
-
color: rgb(var(--primary-6));
|
|
53
|
-
background-color: var(--color-primary-light-1);
|
|
54
|
-
}
|
|
55
|
-
.sd-result-icon-warning .sd-result-icon-tip {
|
|
56
|
-
color: rgb(var(--warning-6));
|
|
57
|
-
background-color: var(--color-warning-light-1);
|
|
58
|
-
}
|
|
59
43
|
.sd-result-icon-404, .sd-result-icon-403, .sd-result-icon-500 {
|
|
60
44
|
padding-top: 24px;
|
|
61
45
|
}
|
|
@@ -1,50 +1,28 @@
|
|
|
1
1
|
@use '@style/theme/index.scss' as theme;
|
|
2
|
+
@use 'sass:meta';
|
|
2
3
|
@use 'sass:string';
|
|
3
4
|
@use 'sass:map';
|
|
4
|
-
@use '@style/
|
|
5
|
+
@use '@components/result/style/token.scss' as token;
|
|
5
6
|
@use '@components/result/style/token.scss' as *;
|
|
6
7
|
|
|
7
8
|
$result-prefix-cls: string.unquote('#{theme.$prefix}-result');
|
|
8
9
|
|
|
9
|
-
$
|
|
10
|
-
'
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
'result-color-icon_info': $result-color-icon_info,
|
|
18
|
-
'result-color-icon_success': $result-color-icon_success,
|
|
19
|
-
'result-color-icon_warning': $result-color-icon_warning,
|
|
20
|
-
'result-color-subtitle-text': $result-color-subtitle-text,
|
|
21
|
-
'result-color-title-text': $result-color-title-text,
|
|
22
|
-
'result-font-subtitle-size': $result-font-subtitle-size,
|
|
23
|
-
'result-font-title-size': $result-font-title-size,
|
|
24
|
-
'result-font-title-weight': $result-font-title-weight,
|
|
25
|
-
'result-margin-content-top': $result-margin-content-top,
|
|
26
|
-
'result-margin-extra-top': $result-margin-extra-top,
|
|
27
|
-
'result-margin-icon-bottom': $result-margin-icon-bottom,
|
|
28
|
-
'result-padding-bottom': $result-padding-bottom,
|
|
29
|
-
'result-padding-horizontal': $result-padding-horizontal,
|
|
30
|
-
'result-padding-top': $result-padding-top,
|
|
31
|
-
'result-padding-top_icon': $result-padding-top_icon,
|
|
32
|
-
'result-size-icon': $result-size-icon,
|
|
33
|
-
'result-size-icon-wrapper': $result-size-icon-wrapper,
|
|
34
|
-
'result-size-icon_custom': $result-size-icon_custom,
|
|
35
|
-
'result-size-image-width': $result-size-image-width,
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
@function less-var($name, $fallback: null) {
|
|
39
|
-
@return legacyLessVar.get($__less-vars, $name, $fallback);
|
|
10
|
+
@function token-var($name, $fallback: null) {
|
|
11
|
+
$value: map.get(meta.module-variables('token'), $name);
|
|
12
|
+
|
|
13
|
+
@if $value == null {
|
|
14
|
+
@return $fallback;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@return $value;
|
|
40
18
|
}
|
|
41
19
|
|
|
42
20
|
@mixin icon-status($status) {
|
|
43
21
|
$color: string.unquote('result-color-icon_#{$status}');
|
|
44
22
|
$bg: string.unquote('result-color-icon-bg_#{$status}');
|
|
45
23
|
|
|
46
|
-
color:
|
|
47
|
-
background-color:
|
|
24
|
+
color: token-var($color);
|
|
25
|
+
background-color: token-var($bg);
|
|
48
26
|
}
|
|
49
27
|
|
|
50
28
|
.#{$result-prefix-cls} {
|
package/es/select/index.d.ts
CHANGED
|
@@ -192,17 +192,17 @@ declare const Select: {
|
|
|
192
192
|
value: import("./interface").SelectModelValue;
|
|
193
193
|
unmountOnClose: boolean;
|
|
194
194
|
options: import("./interface").SelectOption[];
|
|
195
|
-
scrollbar: boolean | import("..").ScrollbarProps;
|
|
196
195
|
popupVisible: boolean;
|
|
197
196
|
defaultPopupVisible: boolean;
|
|
198
197
|
showArrow: boolean;
|
|
199
198
|
show: boolean;
|
|
199
|
+
scrollbar: boolean | import("..").ScrollbarProps;
|
|
200
|
+
multiple: boolean;
|
|
200
201
|
modelValue: import("./interface").SelectModelValue;
|
|
201
202
|
allowClear: boolean;
|
|
202
203
|
valueKey: string;
|
|
203
204
|
filterOption: boolean | ((inputValue: string, option: import("./interface").SelectOptionData) => boolean);
|
|
204
205
|
showExtraOptions: boolean;
|
|
205
|
-
multiple: boolean;
|
|
206
206
|
defaultActiveFirstOption: boolean;
|
|
207
207
|
bordered: boolean;
|
|
208
208
|
showHeaderOnEmpty: boolean;
|
|
@@ -922,8 +922,8 @@ declare const Select: {
|
|
|
922
922
|
disabled: boolean;
|
|
923
923
|
loading: boolean;
|
|
924
924
|
showArrow: boolean;
|
|
925
|
-
allowClear: boolean;
|
|
926
925
|
multiple: boolean;
|
|
926
|
+
allowClear: boolean;
|
|
927
927
|
bordered: boolean;
|
|
928
928
|
maxTagCount: number | "responsive";
|
|
929
929
|
retainInputValue: boolean;
|
|
@@ -1111,17 +1111,17 @@ declare const Select: {
|
|
|
1111
1111
|
value: import("./interface").SelectModelValue;
|
|
1112
1112
|
unmountOnClose: boolean;
|
|
1113
1113
|
options: import("./interface").SelectOption[];
|
|
1114
|
-
scrollbar: boolean | import("..").ScrollbarProps;
|
|
1115
1114
|
popupVisible: boolean;
|
|
1116
1115
|
defaultPopupVisible: boolean;
|
|
1117
1116
|
showArrow: boolean;
|
|
1118
1117
|
show: boolean;
|
|
1118
|
+
scrollbar: boolean | import("..").ScrollbarProps;
|
|
1119
|
+
multiple: boolean;
|
|
1119
1120
|
modelValue: import("./interface").SelectModelValue;
|
|
1120
1121
|
allowClear: boolean;
|
|
1121
1122
|
valueKey: string;
|
|
1122
1123
|
filterOption: boolean | ((inputValue: string, option: import("./interface").SelectOptionData) => boolean);
|
|
1123
1124
|
showExtraOptions: boolean;
|
|
1124
|
-
multiple: boolean;
|
|
1125
1125
|
defaultActiveFirstOption: boolean;
|
|
1126
1126
|
bordered: boolean;
|
|
1127
1127
|
showHeaderOnEmpty: boolean;
|
|
@@ -1329,17 +1329,17 @@ declare const Select: {
|
|
|
1329
1329
|
value: import("./interface").SelectModelValue;
|
|
1330
1330
|
unmountOnClose: boolean;
|
|
1331
1331
|
options: import("./interface").SelectOption[];
|
|
1332
|
-
scrollbar: boolean | import("..").ScrollbarProps;
|
|
1333
1332
|
popupVisible: boolean;
|
|
1334
1333
|
defaultPopupVisible: boolean;
|
|
1335
1334
|
showArrow: boolean;
|
|
1336
1335
|
show: boolean;
|
|
1336
|
+
scrollbar: boolean | import("..").ScrollbarProps;
|
|
1337
|
+
multiple: boolean;
|
|
1337
1338
|
modelValue: import("./interface").SelectModelValue;
|
|
1338
1339
|
allowClear: boolean;
|
|
1339
1340
|
valueKey: string;
|
|
1340
1341
|
filterOption: boolean | ((inputValue: string, option: import("./interface").SelectOptionData) => boolean);
|
|
1341
1342
|
showExtraOptions: boolean;
|
|
1342
|
-
multiple: boolean;
|
|
1343
1343
|
defaultActiveFirstOption: boolean;
|
|
1344
1344
|
bordered: boolean;
|
|
1345
1345
|
showHeaderOnEmpty: boolean;
|
|
@@ -2059,8 +2059,8 @@ declare const Select: {
|
|
|
2059
2059
|
disabled: boolean;
|
|
2060
2060
|
loading: boolean;
|
|
2061
2061
|
showArrow: boolean;
|
|
2062
|
-
allowClear: boolean;
|
|
2063
2062
|
multiple: boolean;
|
|
2063
|
+
allowClear: boolean;
|
|
2064
2064
|
bordered: boolean;
|
|
2065
2065
|
maxTagCount: number | "responsive";
|
|
2066
2066
|
retainInputValue: boolean;
|
|
@@ -2381,6 +2381,6 @@ declare const Select: {
|
|
|
2381
2381
|
export type SelectInstance = InstanceType<typeof _Select>;
|
|
2382
2382
|
export type SelectOptionInstance = InstanceType<typeof _Option>;
|
|
2383
2383
|
export type SelectOptGroupInstance = InstanceType<typeof _Optgroup>;
|
|
2384
|
-
export type { SelectProps, SelectOption, SelectOptionData, SelectOptionGroup, SelectFieldNames, FilterOption, } from './interface';
|
|
2384
|
+
export type { SelectProps, SelectOption, SelectOptionData, SelectOptionGroup, SelectFieldNames, FilterOption, SelectFallbackOption, } from './interface';
|
|
2385
2385
|
export { _Option as Option, _Optgroup as Optgroup };
|
|
2386
2386
|
export default Select;
|
package/es/select/interface.d.ts
CHANGED
|
@@ -42,6 +42,7 @@ export interface SelectOptionGroupInfo extends SelectOptionGroup {
|
|
|
42
42
|
options: (SelectOptionInfo | SelectOptionGroupInfo)[];
|
|
43
43
|
}
|
|
44
44
|
export type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);
|
|
45
|
+
export type SelectFallbackOption = (value: SelectOptionValue) => SelectOptionData;
|
|
45
46
|
export interface SelectProps {
|
|
46
47
|
options?: SelectOption[];
|
|
47
48
|
multiple?: boolean;
|
|
@@ -73,7 +74,7 @@ export interface SelectProps {
|
|
|
73
74
|
filterOption?: FilterOption;
|
|
74
75
|
virtualListProps?: VirtualListProps;
|
|
75
76
|
triggerProps?: TriggerProps;
|
|
76
|
-
fallbackOption?: boolean |
|
|
77
|
+
fallbackOption?: boolean | SelectFallbackOption;
|
|
77
78
|
showExtraOptions?: boolean;
|
|
78
79
|
valueKey?: string;
|
|
79
80
|
searchDelay?: number;
|
package/es/select/select.d.ts
CHANGED
|
@@ -341,17 +341,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
341
341
|
value: SelectModelValue;
|
|
342
342
|
unmountOnClose: boolean;
|
|
343
343
|
options: SelectOption[];
|
|
344
|
-
scrollbar: boolean | ScrollbarProps;
|
|
345
344
|
popupVisible: boolean;
|
|
346
345
|
defaultPopupVisible: boolean;
|
|
347
346
|
showArrow: boolean;
|
|
348
347
|
show: boolean;
|
|
348
|
+
scrollbar: boolean | ScrollbarProps;
|
|
349
|
+
multiple: boolean;
|
|
349
350
|
modelValue: SelectModelValue;
|
|
350
351
|
allowClear: boolean;
|
|
351
352
|
valueKey: string;
|
|
352
353
|
filterOption: boolean | ((inputValue: string, option: SelectOptionData) => boolean);
|
|
353
354
|
showExtraOptions: boolean;
|
|
354
|
-
multiple: boolean;
|
|
355
355
|
defaultActiveFirstOption: boolean;
|
|
356
356
|
bordered: boolean;
|
|
357
357
|
showHeaderOnEmpty: boolean;
|
|
@@ -1071,8 +1071,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
1071
1071
|
disabled: boolean;
|
|
1072
1072
|
loading: boolean;
|
|
1073
1073
|
showArrow: boolean;
|
|
1074
|
-
allowClear: boolean;
|
|
1075
1074
|
multiple: boolean;
|
|
1075
|
+
allowClear: boolean;
|
|
1076
1076
|
bordered: boolean;
|
|
1077
1077
|
maxTagCount: number | "responsive";
|
|
1078
1078
|
retainInputValue: boolean;
|
package/es/slider/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { App } from 'vue';
|
|
2
2
|
import type { SDOptions } from '../_utils/types';
|
|
3
3
|
import _Slider from './slider.vue';
|
|
4
|
+
export type SliderValue = number | [number, number];
|
|
5
|
+
export type SliderFormatTooltip = (value: number) => string;
|
|
6
|
+
export type SliderChangeHandler = (value: SliderValue) => void;
|
|
4
7
|
declare const Slider: {
|
|
5
8
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
|
|
6
9
|
modelValue: {
|
|
@@ -88,8 +91,8 @@ declare const Slider: {
|
|
|
88
91
|
disabled: boolean;
|
|
89
92
|
defaultValue: number | [number, number];
|
|
90
93
|
direction: "horizontal" | "vertical";
|
|
91
|
-
modelValue: number | [number, number];
|
|
92
94
|
range: boolean;
|
|
95
|
+
modelValue: number | [number, number];
|
|
93
96
|
max: number;
|
|
94
97
|
step: number;
|
|
95
98
|
min: number;
|
|
@@ -2049,8 +2052,8 @@ declare const Slider: {
|
|
|
2049
2052
|
disabled: boolean;
|
|
2050
2053
|
defaultValue: number | [number, number];
|
|
2051
2054
|
direction: "horizontal" | "vertical";
|
|
2052
|
-
modelValue: number | [number, number];
|
|
2053
2055
|
range: boolean;
|
|
2056
|
+
modelValue: number | [number, number];
|
|
2054
2057
|
max: number;
|
|
2055
2058
|
step: number;
|
|
2056
2059
|
min: number;
|
|
@@ -2147,8 +2150,8 @@ declare const Slider: {
|
|
|
2147
2150
|
disabled: boolean;
|
|
2148
2151
|
defaultValue: number | [number, number];
|
|
2149
2152
|
direction: "horizontal" | "vertical";
|
|
2150
|
-
modelValue: number | [number, number];
|
|
2151
2153
|
range: boolean;
|
|
2154
|
+
modelValue: number | [number, number];
|
|
2152
2155
|
max: number;
|
|
2153
2156
|
step: number;
|
|
2154
2157
|
min: number;
|
|
@@ -139,8 +139,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|
|
139
139
|
disabled: boolean;
|
|
140
140
|
defaultValue: number | [number, number];
|
|
141
141
|
direction: "horizontal" | "vertical";
|
|
142
|
-
modelValue: number | [number, number];
|
|
143
142
|
range: boolean;
|
|
143
|
+
modelValue: number | [number, number];
|
|
144
144
|
max: number;
|
|
145
145
|
step: number;
|
|
146
146
|
min: number;
|
package/es/steps/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ import type { App } from 'vue';
|
|
|
2
2
|
import type { SDOptions } from '../_utils/types';
|
|
3
3
|
import _StepsStep from './step.vue';
|
|
4
4
|
import _Steps from './steps.vue';
|
|
5
|
+
export type { StepData, StepStatus, StepsType } from './interface';
|
|
6
|
+
export type StepsChangeHandler = (step: number, event: Event) => void;
|
|
5
7
|
declare const Steps: {
|
|
6
8
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
|
|
7
9
|
type: {
|
package/es/switch/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { App } from 'vue';
|
|
2
2
|
import type { SDOptions } from '../_utils/types';
|
|
3
3
|
import _Switch from './switch.vue';
|
|
4
|
+
export type SwitchValue = boolean | string | number;
|
|
5
|
+
export type SwitchBeforeChange = (newValue: SwitchValue) => Promise<boolean | void> | boolean | void;
|
|
6
|
+
export type SwitchChangeHandler = (value: SwitchValue, event: Event) => void;
|
|
4
7
|
declare const Switch: {
|
|
5
8
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
|
|
6
9
|
modelValue: {
|
package/es/table/context.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export interface TableContext {
|
|
|
19
19
|
onSelectAllLeafs: (record: TableDataWithRaw, checked: boolean) => void;
|
|
20
20
|
onSorterChange: (dataIndex: string, direction: 'ascend' | 'descend' | '', ev: Event) => void;
|
|
21
21
|
onFilterChange: (dataIndex: string, filteredValues: string[], ev: Event) => void;
|
|
22
|
-
onThMouseDown: (dataIndex: string, ev:
|
|
22
|
+
onThMouseDown: (dataIndex: string, ev: PointerEvent) => void;
|
|
23
23
|
}
|
|
24
24
|
export interface TableColumnContext {
|
|
25
25
|
addChild: (id: number, column: TableColumnData) => void;
|
|
@@ -2,9 +2,8 @@ import { Ref } from 'vue';
|
|
|
2
2
|
import { EmitFn2 } from '../../_utils/types';
|
|
3
3
|
export declare const useColumnResize: (thRefs: Ref<Record<string, HTMLElement>>, emit: EmitFn2<{
|
|
4
4
|
columnResize: (dataIndex: string, width: number) => true;
|
|
5
|
-
}
|
|
5
|
+
}>, getColExplicitWidth?: (dataIndex: string) => number | undefined) => {
|
|
6
6
|
resizingColumn: Ref<string, string>;
|
|
7
7
|
columnWidth: Record<string, number>;
|
|
8
|
-
handleThMouseDown: (dataIndex: string, ev:
|
|
9
|
-
handleThMouseUp: () => void;
|
|
8
|
+
handleThMouseDown: (dataIndex: string, ev: PointerEvent) => void;
|
|
10
9
|
};
|
|
@@ -1,38 +1,65 @@
|
|
|
1
|
-
import { off, on } from "../../_utils/dom.js";
|
|
2
1
|
import { reactive, ref } from "vue";
|
|
2
|
+
import { tryOnScopeDispose, useEventListener } from "@vueuse/core";
|
|
3
3
|
//#region components/table/hooks/use-column-resize.ts
|
|
4
|
-
var useColumnResize = (thRefs, emit) => {
|
|
4
|
+
var useColumnResize = (thRefs, emit, getColExplicitWidth) => {
|
|
5
5
|
const resizingColumn = ref("");
|
|
6
6
|
const columnWidth = reactive({});
|
|
7
|
+
let stopResizeListeners = [];
|
|
8
|
+
const clearResizeListeners = () => {
|
|
9
|
+
stopResizeListeners.forEach((stop) => stop());
|
|
10
|
+
stopResizeListeners = [];
|
|
11
|
+
};
|
|
12
|
+
const resetBodyResizeStyle = () => {
|
|
13
|
+
if (typeof document === "undefined") return;
|
|
14
|
+
document.body.style.cursor = "";
|
|
15
|
+
document.body.style.userSelect = "";
|
|
16
|
+
};
|
|
17
|
+
tryOnScopeDispose(() => {
|
|
18
|
+
clearResizeListeners();
|
|
19
|
+
resetBodyResizeStyle();
|
|
20
|
+
});
|
|
7
21
|
const handleThMouseDown = (dataIndex, ev) => {
|
|
22
|
+
var _columnWidth$dataInde, _ref, _rect$width;
|
|
23
|
+
if (typeof document === "undefined") return;
|
|
8
24
|
ev.preventDefault();
|
|
25
|
+
ev.stopPropagation();
|
|
9
26
|
resizingColumn.value = dataIndex;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
const { clientX } =
|
|
24
|
-
const
|
|
25
|
-
let width = Math.ceil(
|
|
27
|
+
document.body.style.cursor = "col-resize";
|
|
28
|
+
document.body.style.userSelect = "none";
|
|
29
|
+
const element = thRefs.value[dataIndex];
|
|
30
|
+
const rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
|
|
31
|
+
const startX = ev.clientX;
|
|
32
|
+
const explicitWidth = (_columnWidth$dataInde = columnWidth[dataIndex]) !== null && _columnWidth$dataInde !== void 0 ? _columnWidth$dataInde : getColExplicitWidth === null || getColExplicitWidth === void 0 ? void 0 : getColExplicitWidth(dataIndex);
|
|
33
|
+
const startWidth = (_ref = explicitWidth !== null && explicitWidth !== void 0 ? explicitWidth : rect === null || rect === void 0 ? void 0 : rect.width) !== null && _ref !== void 0 ? _ref : 0;
|
|
34
|
+
const renderWidth = (_rect$width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect$width !== void 0 ? _rect$width : startWidth;
|
|
35
|
+
const scale = renderWidth > 0 && startWidth > 0 ? renderWidth / startWidth : 1;
|
|
36
|
+
const target = ev.target;
|
|
37
|
+
if (target && "setPointerCapture" in target) target.setPointerCapture(ev.pointerId);
|
|
38
|
+
const onPointerMove = (e) => {
|
|
39
|
+
if (!thRefs.value[resizingColumn.value]) return;
|
|
40
|
+
const { clientX } = e;
|
|
41
|
+
const rawWidth = startWidth + (clientX - startX) / (scale || 1);
|
|
42
|
+
let width = Math.ceil(rawWidth);
|
|
26
43
|
if (width < 40) width = 40;
|
|
27
44
|
columnWidth[resizingColumn.value] = width;
|
|
28
45
|
emit("columnResize", resizingColumn.value, width);
|
|
29
|
-
}
|
|
46
|
+
};
|
|
47
|
+
const onPointerUp = () => {
|
|
48
|
+
resizingColumn.value = "";
|
|
49
|
+
resetBodyResizeStyle();
|
|
50
|
+
clearResizeListeners();
|
|
51
|
+
};
|
|
52
|
+
clearResizeListeners();
|
|
53
|
+
stopResizeListeners = [
|
|
54
|
+
useEventListener(document, "pointermove", onPointerMove),
|
|
55
|
+
useEventListener(document, "pointerup", onPointerUp),
|
|
56
|
+
useEventListener(document, "contextmenu", onPointerUp)
|
|
57
|
+
];
|
|
30
58
|
};
|
|
31
59
|
return {
|
|
32
60
|
resizingColumn,
|
|
33
61
|
columnWidth,
|
|
34
|
-
handleThMouseDown
|
|
35
|
-
handleThMouseUp
|
|
62
|
+
handleThMouseDown
|
|
36
63
|
};
|
|
37
64
|
};
|
|
38
65
|
//#endregion
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
|
+
import type { BaseType } from '../../_utils/types';
|
|
2
3
|
import { TableDraggable } from '../interface';
|
|
3
4
|
export declare const useDrag: (draggable: Ref<TableDraggable | undefined>) => {
|
|
4
5
|
dragType: import("vue").ComputedRef<"row" | "handle" | undefined>;
|
|
5
6
|
dragState: {
|
|
6
7
|
dragging: boolean;
|
|
7
|
-
sourceKey:
|
|
8
|
+
sourceKey: BaseType | "";
|
|
8
9
|
sourcePath: number[];
|
|
9
10
|
targetPath: number[];
|
|
10
11
|
data: Record<string, unknown>;
|
|
12
|
+
dropIndicatorPath: number[];
|
|
11
13
|
};
|
|
12
|
-
handleDragStart: (ev: DragEvent, sourceKey:
|
|
14
|
+
handleDragStart: (ev: DragEvent, sourceKey: BaseType, sourcePath: number[], data: Record<string, unknown>) => void;
|
|
13
15
|
handleDragEnter: (ev: DragEvent, targetPath: number[]) => void;
|
|
14
16
|
handleDragLeave: (_ev: DragEvent) => void;
|
|
15
17
|
handleDragover: (ev: DragEvent) => void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { computed, reactive } from "vue";
|
|
2
|
+
import { tryOnScopeDispose, useEventListener } from "@vueuse/core";
|
|
2
3
|
//#region components/table/hooks/use-drag.ts
|
|
3
4
|
var useDrag = (draggable) => {
|
|
4
5
|
const dragType = computed(() => {
|
|
@@ -12,7 +13,8 @@ var useDrag = (draggable) => {
|
|
|
12
13
|
sourceKey: "",
|
|
13
14
|
sourcePath: [],
|
|
14
15
|
targetPath: [],
|
|
15
|
-
data: {}
|
|
16
|
+
data: {},
|
|
17
|
+
dropIndicatorPath: []
|
|
16
18
|
});
|
|
17
19
|
const clearDragState = () => {
|
|
18
20
|
dragState.dragging = false;
|
|
@@ -20,7 +22,16 @@ var useDrag = (draggable) => {
|
|
|
20
22
|
dragState.sourcePath = [];
|
|
21
23
|
dragState.targetPath = [];
|
|
22
24
|
dragState.data = {};
|
|
25
|
+
dragState.dropIndicatorPath = [];
|
|
23
26
|
};
|
|
27
|
+
const stopGlobalDragListeners = [useEventListener(typeof window !== "undefined" ? window : void 0, "dragend", () => {
|
|
28
|
+
clearDragState();
|
|
29
|
+
}), useEventListener(typeof window !== "undefined" ? window : void 0, "drop", () => {
|
|
30
|
+
clearDragState();
|
|
31
|
+
})];
|
|
32
|
+
tryOnScopeDispose(() => {
|
|
33
|
+
stopGlobalDragListeners.forEach((stop) => stop());
|
|
34
|
+
});
|
|
24
35
|
const handleDragStart = (ev, sourceKey, sourcePath, data) => {
|
|
25
36
|
if (ev.dataTransfer) {
|
|
26
37
|
ev.dataTransfer.effectAllowed = "move";
|
|
@@ -37,7 +48,10 @@ var useDrag = (draggable) => {
|
|
|
37
48
|
};
|
|
38
49
|
const handleDragEnter = (ev, targetPath) => {
|
|
39
50
|
if (ev.dataTransfer) ev.dataTransfer.dropEffect = "move";
|
|
40
|
-
if (dragState.targetPath.toString() !== targetPath.toString())
|
|
51
|
+
if (dragState.targetPath.toString() !== targetPath.toString()) {
|
|
52
|
+
dragState.targetPath = targetPath;
|
|
53
|
+
dragState.dropIndicatorPath = targetPath;
|
|
54
|
+
}
|
|
41
55
|
ev.preventDefault();
|
|
42
56
|
};
|
|
43
57
|
const handleDragLeave = (_ev) => {};
|
package/es/table/index.d.ts
CHANGED
|
@@ -33,10 +33,6 @@ declare const Table: {
|
|
|
33
33
|
type: import("vue").PropType<import("..").Size>;
|
|
34
34
|
default: () => "mini" | "small" | "medium" | "large";
|
|
35
35
|
};
|
|
36
|
-
tableLayoutFixed: {
|
|
37
|
-
type: BooleanConstructor;
|
|
38
|
-
default: boolean;
|
|
39
|
-
};
|
|
40
36
|
loading: {
|
|
41
37
|
type: (BooleanConstructor | ObjectConstructor)[];
|
|
42
38
|
default: boolean;
|
|
@@ -68,7 +64,7 @@ declare const Table: {
|
|
|
68
64
|
default: number;
|
|
69
65
|
};
|
|
70
66
|
rowKey: {
|
|
71
|
-
type:
|
|
67
|
+
type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
|
|
72
68
|
default: string;
|
|
73
69
|
};
|
|
74
70
|
showHeader: {
|
|
@@ -81,10 +77,6 @@ declare const Table: {
|
|
|
81
77
|
fixedSize?: boolean;
|
|
82
78
|
estimatedSize?: number;
|
|
83
79
|
itemKey?: string | ((item: unknown, index: number) => string | number);
|
|
84
|
-
component?: keyof HTMLElementTagNameMap | Record<string, unknown>;
|
|
85
|
-
listAttrs?: Record<string, unknown>;
|
|
86
|
-
contentAttrs?: Record<string, unknown>;
|
|
87
|
-
paddingPosition?: "content" | "list";
|
|
88
80
|
}>;
|
|
89
81
|
};
|
|
90
82
|
spanMethod: {
|
|
@@ -173,6 +165,10 @@ declare const Table: {
|
|
|
173
165
|
type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
|
|
174
166
|
default: boolean;
|
|
175
167
|
};
|
|
168
|
+
debug: {
|
|
169
|
+
type: BooleanConstructor;
|
|
170
|
+
default: boolean;
|
|
171
|
+
};
|
|
176
172
|
showEmptyTree: {
|
|
177
173
|
type: BooleanConstructor;
|
|
178
174
|
default: boolean;
|
|
@@ -254,16 +250,16 @@ declare const Table: {
|
|
|
254
250
|
indentSize: number;
|
|
255
251
|
filterIconAlignLeft: boolean;
|
|
256
252
|
stripe: boolean;
|
|
257
|
-
tableLayoutFixed: boolean;
|
|
258
253
|
pagination: boolean | import("..").PaginationProps;
|
|
259
254
|
pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
|
|
260
|
-
rowKey: string;
|
|
255
|
+
rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
|
|
261
256
|
showHeader: boolean;
|
|
262
257
|
spanAll: boolean;
|
|
263
258
|
hideExpandButtonOnEmpty: boolean;
|
|
264
259
|
columnResizable: boolean;
|
|
265
260
|
summaryText: string;
|
|
266
261
|
stickyHeader: number | boolean;
|
|
262
|
+
debug: boolean;
|
|
267
263
|
showEmptyTree: boolean;
|
|
268
264
|
}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
|
269
265
|
P: {};
|
|
@@ -297,10 +293,6 @@ declare const Table: {
|
|
|
297
293
|
type: import("vue").PropType<import("..").Size>;
|
|
298
294
|
default: () => "mini" | "small" | "medium" | "large";
|
|
299
295
|
};
|
|
300
|
-
tableLayoutFixed: {
|
|
301
|
-
type: BooleanConstructor;
|
|
302
|
-
default: boolean;
|
|
303
|
-
};
|
|
304
296
|
loading: {
|
|
305
297
|
type: (BooleanConstructor | ObjectConstructor)[];
|
|
306
298
|
default: boolean;
|
|
@@ -332,7 +324,7 @@ declare const Table: {
|
|
|
332
324
|
default: number;
|
|
333
325
|
};
|
|
334
326
|
rowKey: {
|
|
335
|
-
type:
|
|
327
|
+
type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
|
|
336
328
|
default: string;
|
|
337
329
|
};
|
|
338
330
|
showHeader: {
|
|
@@ -345,10 +337,6 @@ declare const Table: {
|
|
|
345
337
|
fixedSize?: boolean;
|
|
346
338
|
estimatedSize?: number;
|
|
347
339
|
itemKey?: string | ((item: unknown, index: number) => string | number);
|
|
348
|
-
component?: keyof HTMLElementTagNameMap | Record<string, unknown>;
|
|
349
|
-
listAttrs?: Record<string, unknown>;
|
|
350
|
-
contentAttrs?: Record<string, unknown>;
|
|
351
|
-
paddingPosition?: "content" | "list";
|
|
352
340
|
}>;
|
|
353
341
|
};
|
|
354
342
|
spanMethod: {
|
|
@@ -437,6 +425,10 @@ declare const Table: {
|
|
|
437
425
|
type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
|
|
438
426
|
default: boolean;
|
|
439
427
|
};
|
|
428
|
+
debug: {
|
|
429
|
+
type: BooleanConstructor;
|
|
430
|
+
default: boolean;
|
|
431
|
+
};
|
|
440
432
|
showEmptyTree: {
|
|
441
433
|
type: BooleanConstructor;
|
|
442
434
|
default: boolean;
|
|
@@ -495,16 +487,16 @@ declare const Table: {
|
|
|
495
487
|
indentSize: number;
|
|
496
488
|
filterIconAlignLeft: boolean;
|
|
497
489
|
stripe: boolean;
|
|
498
|
-
tableLayoutFixed: boolean;
|
|
499
490
|
pagination: boolean | import("..").PaginationProps;
|
|
500
491
|
pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
|
|
501
|
-
rowKey: string;
|
|
492
|
+
rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
|
|
502
493
|
showHeader: boolean;
|
|
503
494
|
spanAll: boolean;
|
|
504
495
|
hideExpandButtonOnEmpty: boolean;
|
|
505
496
|
columnResizable: boolean;
|
|
506
497
|
summaryText: string;
|
|
507
498
|
stickyHeader: number | boolean;
|
|
499
|
+
debug: boolean;
|
|
508
500
|
showEmptyTree: boolean;
|
|
509
501
|
}>;
|
|
510
502
|
__isFragment?: never;
|
|
@@ -535,10 +527,6 @@ declare const Table: {
|
|
|
535
527
|
type: import("vue").PropType<import("..").Size>;
|
|
536
528
|
default: () => "mini" | "small" | "medium" | "large";
|
|
537
529
|
};
|
|
538
|
-
tableLayoutFixed: {
|
|
539
|
-
type: BooleanConstructor;
|
|
540
|
-
default: boolean;
|
|
541
|
-
};
|
|
542
530
|
loading: {
|
|
543
531
|
type: (BooleanConstructor | ObjectConstructor)[];
|
|
544
532
|
default: boolean;
|
|
@@ -570,7 +558,7 @@ declare const Table: {
|
|
|
570
558
|
default: number;
|
|
571
559
|
};
|
|
572
560
|
rowKey: {
|
|
573
|
-
type:
|
|
561
|
+
type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
|
|
574
562
|
default: string;
|
|
575
563
|
};
|
|
576
564
|
showHeader: {
|
|
@@ -583,10 +571,6 @@ declare const Table: {
|
|
|
583
571
|
fixedSize?: boolean;
|
|
584
572
|
estimatedSize?: number;
|
|
585
573
|
itemKey?: string | ((item: unknown, index: number) => string | number);
|
|
586
|
-
component?: keyof HTMLElementTagNameMap | Record<string, unknown>;
|
|
587
|
-
listAttrs?: Record<string, unknown>;
|
|
588
|
-
contentAttrs?: Record<string, unknown>;
|
|
589
|
-
paddingPosition?: "content" | "list";
|
|
590
574
|
}>;
|
|
591
575
|
};
|
|
592
576
|
spanMethod: {
|
|
@@ -675,6 +659,10 @@ declare const Table: {
|
|
|
675
659
|
type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
|
|
676
660
|
default: boolean;
|
|
677
661
|
};
|
|
662
|
+
debug: {
|
|
663
|
+
type: BooleanConstructor;
|
|
664
|
+
default: boolean;
|
|
665
|
+
};
|
|
678
666
|
showEmptyTree: {
|
|
679
667
|
type: BooleanConstructor;
|
|
680
668
|
default: boolean;
|
|
@@ -756,16 +744,16 @@ declare const Table: {
|
|
|
756
744
|
indentSize: number;
|
|
757
745
|
filterIconAlignLeft: boolean;
|
|
758
746
|
stripe: boolean;
|
|
759
|
-
tableLayoutFixed: boolean;
|
|
760
747
|
pagination: boolean | import("..").PaginationProps;
|
|
761
748
|
pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
|
|
762
|
-
rowKey: string;
|
|
749
|
+
rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
|
|
763
750
|
showHeader: boolean;
|
|
764
751
|
spanAll: boolean;
|
|
765
752
|
hideExpandButtonOnEmpty: boolean;
|
|
766
753
|
columnResizable: boolean;
|
|
767
754
|
summaryText: string;
|
|
768
755
|
stickyHeader: number | boolean;
|
|
756
|
+
debug: boolean;
|
|
769
757
|
showEmptyTree: boolean;
|
|
770
758
|
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
|
|
771
759
|
Thead: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
@@ -1092,6 +1080,6 @@ export type TrInstance = InstanceType<typeof _Tr>;
|
|
|
1092
1080
|
export type ThInstance = InstanceType<typeof _Th>;
|
|
1093
1081
|
export type TdInstance = InstanceType<typeof _Td>;
|
|
1094
1082
|
export type TableColumnInstance = InstanceType<typeof _Column>;
|
|
1095
|
-
export type { TableData, TableSortable, TableFilterData, TableFilterable, TableColumnData, TableBorder, TableRowSelection, TableExpandable, TableDraggable, TableChangeExtra, } from './interface';
|
|
1083
|
+
export type { TableData, TableSortable, TableFilterData, TableFilterable, TableColumnData, TableBorder, TableRowSelection, TableExpandable, TableDraggable, TableChangeExtra, TableLoadMore, TableProps, TableRowKey, TableSpanMethod, TableSpanMethodContext, TableSummary, TableSummaryContext, TableSummarySpanMethod, } from './interface';
|
|
1096
1084
|
export { _Thead as Thead, _Tbody as Tbody, _Tr as Tr, _Th as Th, _Td as Td, _Column as TableColumn, };
|
|
1097
1085
|
export default Table;
|