@gx-design-vue/pro-table 0.2.0-alpha.7 → 0.2.0-alpha.9
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/ProTable.d.ts +14 -492
- package/dist/ProTable.js +818 -518
- package/dist/components/ScrollBar/Bar.d.ts +81 -0
- package/dist/components/ScrollBar/Bar.js +84 -0
- package/dist/components/ScrollBar/Thumb.d.ts +52 -0
- package/dist/components/ScrollBar/{Thumb/index.js → Thumb.js} +67 -55
- package/dist/components/ScrollBar/context.d.ts +3 -4
- package/dist/components/ScrollBar/context.js +3 -3
- package/dist/components/ScrollBar/util.d.ts +6 -5
- package/dist/components/ScrollBar/util.js +1 -12
- package/dist/components/SearchForm/CollapseToggle.d.ts +55 -0
- package/dist/components/SearchForm/CollapseToggle.js +47 -0
- package/dist/components/SearchForm/FormItemContainer.d.ts +75 -0
- package/dist/components/SearchForm/FormItemContainer.js +225 -0
- package/dist/components/SearchForm/FormItemWrapper.d.ts +82 -0
- package/dist/components/SearchForm/FormItemWrapper.js +62 -0
- package/dist/components/SearchForm/SearchForm.d.ts +130 -0
- package/dist/components/SearchForm/SearchForm.js +319 -0
- package/dist/components/SearchForm/index.d.ts +2 -0
- package/dist/components/SearchForm/index.js +2 -0
- package/dist/components/Toolbar/FullscreenIcon.d.ts +26 -0
- package/dist/components/Toolbar/FullscreenIcon.js +22 -0
- package/dist/components/Toolbar/ListToolBar.d.ts +111 -0
- package/dist/components/Toolbar/ListToolBar.js +101 -0
- package/dist/components/Toolbar/index.d.ts +103 -0
- package/dist/components/Toolbar/index.js +101 -0
- package/dist/components/Toolbar/style.d.ts +8 -0
- package/dist/components/{ListToolBar → Toolbar}/style.js +32 -27
- package/dist/context/TableContext.d.ts +15 -27
- package/dist/context/TableContext.js +3 -3
- package/dist/hooks/index.d.ts +16 -0
- package/dist/hooks/index.js +16 -0
- package/dist/hooks/useBreakpoints.d.ts +13 -0
- package/dist/hooks/useBreakpoints.js +57 -0
- package/dist/hooks/useCellRender.d.ts +13 -0
- package/dist/hooks/useCellRender.js +28 -0
- package/dist/hooks/useColumnResize.d.ts +30 -0
- package/dist/hooks/useColumnResize.js +110 -0
- package/dist/hooks/useColumns.d.ts +35 -24
- package/dist/hooks/useColumns.js +89 -56
- package/dist/hooks/useFetchData.d.ts +40 -65
- package/dist/hooks/useFetchData.js +157 -172
- package/dist/hooks/useFitPage.d.ts +19 -0
- package/dist/hooks/useFitPage.js +90 -0
- package/dist/hooks/useKeepAliveReload.d.ts +21 -0
- package/dist/hooks/useKeepAliveReload.js +24 -0
- package/dist/hooks/useLoading.d.ts +18 -7
- package/dist/hooks/useLoading.js +26 -8
- package/dist/hooks/usePagination.d.ts +10 -7
- package/dist/hooks/usePagination.js +37 -26
- package/dist/hooks/useRequestOptions.d.ts +18 -0
- package/dist/hooks/useRequestOptions.js +39 -0
- package/dist/hooks/useRowSelection.d.ts +27 -15
- package/dist/hooks/useRowSelection.js +92 -77
- package/dist/hooks/useTable.d.ts +19 -77
- package/dist/hooks/useTable.js +66 -54
- package/dist/hooks/useTableForm.d.ts +15 -83
- package/dist/hooks/useTableForm.js +93 -56
- package/dist/hooks/useTableScroll.d.ts +33 -31
- package/dist/hooks/useTableScroll.js +71 -26
- package/dist/hooks/useTableSize.d.ts +17 -7
- package/dist/hooks/useTableSize.js +20 -6
- package/dist/index.d.ts +10 -7
- package/dist/index.js +9 -3
- package/dist/interface.d.ts +492 -0
- package/dist/pro-table.esm.js +3483 -3913
- package/dist/pro-table.js +1 -1
- package/dist/style/fit-page.d.ts +4 -2
- package/dist/style/fit-page.js +9 -3
- package/dist/style/index.d.ts +4 -6
- package/dist/style/index.js +24 -74
- package/dist/style/list.d.ts +4 -2
- package/dist/style/list.js +1 -10
- package/dist/style/resizable.d.ts +8 -0
- package/dist/style/resizable.js +18 -0
- package/dist/style/scroll.d.ts +4 -2
- package/dist/style/scroll.js +8 -6
- package/dist/style/search.d.ts +8 -0
- package/dist/{components/Form/style.js → style/search.js} +22 -8
- package/dist/theme/augment.d.ts +8 -0
- package/dist/theme/interface/components.d.ts +8 -0
- package/dist/utils/dateFormat.d.ts +9 -0
- package/dist/utils/dateFormat.js +29 -0
- package/dist/utils/formConstants.d.ts +9 -0
- package/dist/utils/formConstants.js +29 -0
- package/dist/utils/valueFormat.d.ts +9 -0
- package/dist/utils/valueFormat.js +27 -0
- package/package.json +10 -9
- package/dist/components/Form/components/RequestSelect.d.ts +0 -50
- package/dist/components/Form/components/RequestSelect.js +0 -56
- package/dist/components/Form/hooks/useForm.d.ts +0 -11
- package/dist/components/Form/hooks/useForm.js +0 -30
- package/dist/components/Form/index.d.ts +0 -32
- package/dist/components/Form/index.js +0 -476
- package/dist/components/Form/style.d.ts +0 -6
- package/dist/components/Form/utils/config.d.ts +0 -9
- package/dist/components/Form/utils/config.js +0 -29
- package/dist/components/Form/utils/dateFormat.d.ts +0 -22
- package/dist/components/Form/utils/dateFormat.js +0 -43
- package/dist/components/ListToolBar/index.d.ts +0 -59
- package/dist/components/ListToolBar/index.js +0 -123
- package/dist/components/ListToolBar/style.d.ts +0 -6
- package/dist/components/ScrollBar/Bar/index.d.ts +0 -49
- package/dist/components/ScrollBar/Bar/index.js +0 -68
- package/dist/components/ScrollBar/Bar/props.d.ts +0 -25
- package/dist/components/ScrollBar/Bar/props.js +0 -17
- package/dist/components/ScrollBar/Thumb/index.d.ts +0 -40
- package/dist/components/ScrollBar/Thumb/props.d.ts +0 -20
- package/dist/components/ScrollBar/Thumb/props.js +0 -17
- package/dist/components/TableCell/index.d.ts +0 -37
- package/dist/components/TableCell/index.js +0 -69
- package/dist/components/ToolBar/FullscreenIcon.d.ts +0 -7
- package/dist/components/ToolBar/FullscreenIcon.js +0 -11
- package/dist/components/ToolBar/index.d.ts +0 -34
- package/dist/components/ToolBar/index.js +0 -97
- package/dist/hooks/tryOnActivated.d.ts +0 -6
- package/dist/hooks/tryOnActivated.js +0 -12
- package/dist/hooks/useDebounceFn.d.ts +0 -8
- package/dist/hooks/useDebounceFn.js +0 -31
- package/dist/hooks/useScrollArea.d.ts +0 -24
- package/dist/hooks/useScrollArea.js +0 -102
- package/dist/props.d.ts +0 -340
- package/dist/props.js +0 -247
- package/dist/types/ColumnTypings.d.ts +0 -130
- package/dist/types/SlotsTypings.d.ts +0 -63
- package/dist/types/SlotsTypings.js +0 -12
- package/dist/types/TableTypings.d.ts +0 -359
- package/dist/types/index.d.ts +0 -9
- package/dist/utils/utils.d.ts +0 -10
- package/dist/utils/utils.js +0 -89
- /package/dist/{types/ColumnTypings.js → interface.js} +0 -0
- /package/dist/{types/TableTypings.js → theme/augment.js} +0 -0
- /package/dist/{types/index.js → theme/interface/components.js} +0 -0
|
@@ -1,87 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ProTableProps } from "../types/TableTypings.js";
|
|
1
|
+
import { ProColumnType, ProSearchMap } from "../interface.js";
|
|
3
2
|
import { ComputedRef, Ref } from "vue";
|
|
4
|
-
import { RecordType } from "@gx-design-vue/pro-utils";
|
|
5
3
|
|
|
6
4
|
//#region src/hooks/useTableForm.d.ts
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
placeholder?: string | string[];
|
|
21
|
-
allowClear?: boolean;
|
|
22
|
-
showSearch?: boolean;
|
|
23
|
-
showToday?: boolean;
|
|
24
|
-
rangeStartName?: string;
|
|
25
|
-
rangeEndName?: string;
|
|
26
|
-
use12Hours?: boolean;
|
|
27
|
-
loading?: boolean;
|
|
28
|
-
showTime?: RecordType | boolean;
|
|
29
|
-
initialValue?: any;
|
|
30
|
-
valueKey?: string;
|
|
31
|
-
request?: {
|
|
32
|
-
fetch?: () => Promise<ProSchemaValueEnumType[]>;
|
|
33
|
-
manual?: boolean;
|
|
34
|
-
debounceTime?: number;
|
|
35
|
-
};
|
|
36
|
-
label?: string;
|
|
37
|
-
labelWidth?: string | number;
|
|
38
|
-
labelAlign?: "center" | "left" | "right";
|
|
39
|
-
field?: {
|
|
40
|
-
[x: string]: any;
|
|
41
|
-
rules?: RegExp;
|
|
42
|
-
};
|
|
43
|
-
valueEnum?: {
|
|
44
|
-
[x: string]: any;
|
|
45
|
-
label: any;
|
|
46
|
-
value: any;
|
|
47
|
-
disabled?: boolean;
|
|
48
|
-
}[];
|
|
49
|
-
}[], ProSearchMap<"text", string>[] | {
|
|
50
|
-
name: string;
|
|
51
|
-
order?: number;
|
|
52
|
-
valueType?: ProFieldValueType;
|
|
53
|
-
valueFormat?: ProFieldValueFormat;
|
|
54
|
-
placeholder?: string | string[];
|
|
55
|
-
allowClear?: boolean;
|
|
56
|
-
showSearch?: boolean;
|
|
57
|
-
showToday?: boolean;
|
|
58
|
-
rangeStartName?: string;
|
|
59
|
-
rangeEndName?: string;
|
|
60
|
-
use12Hours?: boolean;
|
|
61
|
-
loading?: boolean;
|
|
62
|
-
showTime?: RecordType | boolean;
|
|
63
|
-
initialValue?: any;
|
|
64
|
-
valueKey?: string;
|
|
65
|
-
request?: {
|
|
66
|
-
fetch?: () => Promise<ProSchemaValueEnumType[]>;
|
|
67
|
-
manual?: boolean;
|
|
68
|
-
debounceTime?: number;
|
|
69
|
-
};
|
|
70
|
-
label?: string;
|
|
71
|
-
labelWidth?: string | number;
|
|
72
|
-
labelAlign?: "center" | "left" | "right";
|
|
73
|
-
field?: {
|
|
74
|
-
[x: string]: any;
|
|
75
|
-
rules?: RegExp;
|
|
76
|
-
};
|
|
77
|
-
valueEnum?: {
|
|
78
|
-
[x: string]: any;
|
|
79
|
-
label: any;
|
|
80
|
-
value: any;
|
|
81
|
-
disabled?: boolean;
|
|
82
|
-
}[];
|
|
83
|
-
}[]>;
|
|
84
|
-
defaultFormSearch: Ref<RecordType, RecordType>;
|
|
85
|
-
};
|
|
5
|
+
interface UseTableFormOptions {
|
|
6
|
+
searchMap: ComputedRef<ProSearchMap[]>;
|
|
7
|
+
columns: ComputedRef<ProColumnType[]>;
|
|
8
|
+
}
|
|
9
|
+
interface UseTableFormReturn {
|
|
10
|
+
formColumns: ComputedRef<ProSearchMap[]>;
|
|
11
|
+
defaultFormSearch: Ref<Record<string, any>>;
|
|
12
|
+
formState: Ref<Record<string, any>>;
|
|
13
|
+
getFormSearch: () => Record<string, any>;
|
|
14
|
+
resetFormState: () => void;
|
|
15
|
+
changeFormState: (key: string, value: any) => void;
|
|
16
|
+
}
|
|
17
|
+
declare function useTableForm(options: UseTableFormOptions): UseTableFormReturn;
|
|
86
18
|
//#endregion
|
|
87
|
-
export {
|
|
19
|
+
export { UseTableFormOptions, UseTableFormReturn, useTableForm };
|
|
@@ -1,70 +1,107 @@
|
|
|
1
|
-
import { ref, watch } from "vue";
|
|
2
|
-
import {
|
|
1
|
+
import { computed, ref, toRaw, watch } from "vue";
|
|
2
|
+
import { cloneDeep } from "@gx-design-vue/pro-utils";
|
|
3
3
|
//#region src/hooks/useTableForm.ts
|
|
4
|
-
function
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
if (item.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (item.name) defaulState[item.name] = initialValue;
|
|
16
|
-
if (item.valueType === "dateRange") {
|
|
17
|
-
if (item.rangeStartName || item.rangeEndName) {
|
|
18
|
-
defaulState[item.rangeStartName || "start"] = isArray(initialValue) ? initialValue[0] : void 0;
|
|
19
|
-
defaulState[item.rangeEndName || "end"] = isArray(initialValue) ? initialValue[1] : void 0;
|
|
20
|
-
delete defaulState[item.name];
|
|
21
|
-
}
|
|
4
|
+
function sortFormItemsByOrder(items) {
|
|
5
|
+
let maxOrder = items.reduce((max, item) => {
|
|
6
|
+
return item.order !== void 0 ? Math.max(max, item.order) : max;
|
|
7
|
+
}, 0);
|
|
8
|
+
const sorted = items.map((item) => {
|
|
9
|
+
if (item.order === void 0) {
|
|
10
|
+
maxOrder += 1;
|
|
11
|
+
return {
|
|
12
|
+
...item,
|
|
13
|
+
order: maxOrder
|
|
14
|
+
};
|
|
22
15
|
}
|
|
16
|
+
return item;
|
|
23
17
|
});
|
|
24
|
-
|
|
18
|
+
sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
|
19
|
+
return sorted;
|
|
25
20
|
}
|
|
26
|
-
function
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
else formCols.value.push(item);
|
|
39
|
-
});
|
|
40
|
-
const defaultParams = handleFormDefaultValue(data);
|
|
41
|
-
defaultFormSearch.value = {
|
|
42
|
-
...defaultFormSearch.value,
|
|
43
|
-
...defaultParams
|
|
44
|
-
};
|
|
21
|
+
function computeDefaultFormValues(columns) {
|
|
22
|
+
const defaults = {};
|
|
23
|
+
for (const col of columns) {
|
|
24
|
+
const valueType = col.valueType ?? "text";
|
|
25
|
+
if (col.initialValue !== void 0) defaults[col.name] = col.initialValue;
|
|
26
|
+
else if (valueType === "numberRange") defaults[col.name] = [];
|
|
27
|
+
else if (valueType === "treeSelect" && (col.field?.treeCheckable || col.field?.multiple)) defaults[col.name] = [];
|
|
28
|
+
else if (valueType === "cascader" && col.field?.multiple) defaults[col.name] = [];
|
|
29
|
+
else if (valueType === "dateRange") if (col.rangeStartName || col.rangeEndName) {
|
|
30
|
+
defaults[col.rangeStartName || "start"] = void 0;
|
|
31
|
+
defaults[col.rangeEndName || "end"] = void 0;
|
|
32
|
+
} else defaults[col.name] = void 0;
|
|
45
33
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
34
|
+
return defaults;
|
|
35
|
+
}
|
|
36
|
+
function useTableForm(options) {
|
|
37
|
+
const { searchMap, columns } = options;
|
|
38
|
+
const formColumns = computed(() => {
|
|
39
|
+
const colsFromSearchMap = searchMap.value;
|
|
40
|
+
const colsFromColumns = columns.value.filter((col) => col.searchConfig).map((col) => ({
|
|
41
|
+
...col.searchConfig,
|
|
42
|
+
order: col.searchConfig.order ?? col.order ?? 0
|
|
43
|
+
}));
|
|
44
|
+
return sortFormItemsByOrder([...colsFromSearchMap, ...colsFromColumns]);
|
|
53
45
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
46
|
+
const defaultFormSearch = computed(() => {
|
|
47
|
+
return computeDefaultFormValues(formColumns.value);
|
|
48
|
+
});
|
|
49
|
+
const formState = ref({});
|
|
50
|
+
watch(() => defaultFormSearch.value, (newDefaults) => {
|
|
51
|
+
formState.value = cloneDeep(toRaw(newDefaults));
|
|
60
52
|
}, {
|
|
61
53
|
deep: true,
|
|
62
54
|
immediate: true
|
|
63
55
|
});
|
|
56
|
+
function getFormSearch() {
|
|
57
|
+
const searchParams = cloneDeep(toRaw(formState.value));
|
|
58
|
+
for (const record of formColumns.value) {
|
|
59
|
+
const valueType = record.valueType ?? "text";
|
|
60
|
+
const name = record.name;
|
|
61
|
+
if (valueType === "text") searchParams[name] = formState.value[name] ?? record.initialValue;
|
|
62
|
+
if (valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
|
|
63
|
+
const rangeValue = searchParams[name];
|
|
64
|
+
searchParams[record.rangeStartName || "start"] = Array.isArray(rangeValue) ? rangeValue[0] : void 0;
|
|
65
|
+
searchParams[record.rangeEndName || "end"] = Array.isArray(rangeValue) ? rangeValue[1] : void 0;
|
|
66
|
+
delete searchParams[name];
|
|
67
|
+
}
|
|
68
|
+
if (valueType === "cascader" && record.valueKey === "single") {
|
|
69
|
+
const value = searchParams[name];
|
|
70
|
+
searchParams[name] = Array.isArray(value) ? value[value.length - 1] : void 0;
|
|
71
|
+
}
|
|
72
|
+
if (valueType === "treeSelect" && Array.isArray(formState.value[name])) {
|
|
73
|
+
const keyField = record.valueKey === "text" ? "label" : "value";
|
|
74
|
+
searchParams[name] = formState.value[name].length > 0 ? formState.value[name].map((item) => item[keyField]).join(",") : void 0;
|
|
75
|
+
}
|
|
76
|
+
if (valueType === "numberRange") {
|
|
77
|
+
const value = searchParams[name];
|
|
78
|
+
searchParams[name] = Array.isArray(value) && value.some((val) => val !== void 0 && val !== null && val !== "") ? value : void 0;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return searchParams;
|
|
82
|
+
}
|
|
83
|
+
function resetFormState() {
|
|
84
|
+
const defaults = cloneDeep(toRaw(defaultFormSearch.value));
|
|
85
|
+
formState.value = defaults;
|
|
86
|
+
for (const record of formColumns.value) if (record.valueType === "dateRange" && (record.rangeStartName || record.rangeEndName)) {
|
|
87
|
+
const startKey = record.rangeStartName || "start";
|
|
88
|
+
const endKey = record.rangeEndName || "end";
|
|
89
|
+
const startValue = defaults[startKey];
|
|
90
|
+
const endValue = defaults[endKey];
|
|
91
|
+
if (startValue !== void 0 || endValue !== void 0) formState.value[record.name] = [startValue, endValue];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
function changeFormState(key, value) {
|
|
95
|
+
if (key) formState.value[key] = value;
|
|
96
|
+
}
|
|
64
97
|
return {
|
|
65
|
-
|
|
66
|
-
defaultFormSearch
|
|
98
|
+
formColumns,
|
|
99
|
+
defaultFormSearch,
|
|
100
|
+
formState,
|
|
101
|
+
getFormSearch,
|
|
102
|
+
resetFormState,
|
|
103
|
+
changeFormState
|
|
67
104
|
};
|
|
68
105
|
}
|
|
69
106
|
//#endregion
|
|
70
|
-
export {
|
|
107
|
+
export { useTableForm };
|
|
@@ -1,35 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { ProColumnType, ProTableScrollPolicy } from "../interface.js";
|
|
2
|
+
import { ComputedRef } from "vue";
|
|
3
|
+
import { Breakpoint, RecordType } from "@gx-design-vue/pro-utils";
|
|
4
|
+
import { TableProps } from "antdv-next";
|
|
5
5
|
|
|
6
6
|
//#region src/hooks/useTableScroll.d.ts
|
|
7
|
-
interface
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
interface NormalizedTableScrollPolicy {
|
|
8
|
+
mode: 'auto' | 'manual' | 'disabled';
|
|
9
|
+
breakpoint: Breakpoint | number;
|
|
10
|
+
modal: boolean;
|
|
11
|
+
modalY: {
|
|
12
|
+
desktop: number;
|
|
13
|
+
mobile: number;
|
|
14
|
+
};
|
|
15
|
+
actionFixed: boolean | 'auto';
|
|
14
16
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
17
|
+
interface UseTableScrollOptions<T = RecordType> {
|
|
18
|
+
scroll: ComputedRef<TableProps<T>['scroll'] | undefined>;
|
|
19
|
+
columns: ComputedRef<ProColumnType<T>[]>;
|
|
20
|
+
rowSelection: ComputedRef<TableProps<T>['rowSelection'] | undefined>;
|
|
21
|
+
screens: ComputedRef<Record<string, boolean>>;
|
|
22
|
+
screenWidth: ComputedRef<number>;
|
|
23
|
+
scrollPolicy: ComputedRef<false | ProTableScrollPolicy | undefined>;
|
|
24
|
+
}
|
|
25
|
+
interface UseTableScrollReturn<T = RecordType> {
|
|
26
|
+
tableScroll: ComputedRef<TableProps<T>['scroll']>;
|
|
27
|
+
hasHorizontalScroll: ComputedRef<boolean>;
|
|
28
|
+
shouldFixActionColumn: ComputedRef<boolean>;
|
|
29
|
+
normalizedScrollPolicy: ComputedRef<NormalizedTableScrollPolicy>;
|
|
30
|
+
}
|
|
31
|
+
declare function normalizeScrollPolicy(scrollPolicy: false | ProTableScrollPolicy | undefined): NormalizedTableScrollPolicy;
|
|
32
|
+
declare function isLargeScreenByBreakpoint(breakpoint: Breakpoint | number, screens: Record<string, boolean>, screenWidth: number): boolean;
|
|
33
|
+
declare function getColumnWidthValue(column: ProColumnType<any>): number;
|
|
34
|
+
declare function getTableScrollX(columns: ProColumnType<any>[], hasRowSelection: boolean): number;
|
|
35
|
+
declare function useTableScroll<T = RecordType>(options: UseTableScrollOptions<T>): UseTableScrollReturn<T>;
|
|
34
36
|
//#endregion
|
|
35
|
-
export { useTableScroll };
|
|
37
|
+
export { NormalizedTableScrollPolicy, UseTableScrollOptions, UseTableScrollReturn, getColumnWidthValue, getTableScrollX, isLargeScreenByBreakpoint, normalizeScrollPolicy, useTableScroll };
|
|
@@ -1,34 +1,79 @@
|
|
|
1
|
-
import { computed
|
|
2
|
-
import { cloneDeep, isBoolean, isNumber, isString, keysOf } from "@gx-design-vue/pro-utils";
|
|
1
|
+
import { computed } from "vue";
|
|
3
2
|
//#region src/hooks/useTableScroll.ts
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
const DEFAULT_COLUMN_WIDTH = 150;
|
|
4
|
+
const ROW_SELECTION_WIDTH = 60;
|
|
5
|
+
const DEFAULT_MODAL_SCROLL_Y = {
|
|
6
|
+
desktop: 400,
|
|
7
|
+
mobile: 235
|
|
8
|
+
};
|
|
9
|
+
function normalizeScrollPolicy(scrollPolicy) {
|
|
10
|
+
if (scrollPolicy === false) return {
|
|
11
|
+
mode: "disabled",
|
|
12
|
+
breakpoint: "xl",
|
|
13
|
+
modal: false,
|
|
14
|
+
modalY: DEFAULT_MODAL_SCROLL_Y,
|
|
15
|
+
actionFixed: false
|
|
16
|
+
};
|
|
17
|
+
const modalY = typeof scrollPolicy?.modalY === "number" ? {
|
|
18
|
+
desktop: scrollPolicy.modalY,
|
|
19
|
+
mobile: scrollPolicy.modalY
|
|
20
|
+
} : {
|
|
21
|
+
desktop: scrollPolicy?.modalY?.desktop ?? DEFAULT_MODAL_SCROLL_Y.desktop,
|
|
22
|
+
mobile: scrollPolicy?.modalY?.mobile ?? DEFAULT_MODAL_SCROLL_Y.mobile
|
|
23
|
+
};
|
|
24
|
+
const mode = scrollPolicy?.mode ?? "auto";
|
|
25
|
+
return {
|
|
26
|
+
mode,
|
|
27
|
+
breakpoint: scrollPolicy?.breakpoint ?? "xl",
|
|
28
|
+
modal: mode === "auto" ? !!scrollPolicy?.modal : false,
|
|
29
|
+
modalY,
|
|
30
|
+
actionFixed: mode === "disabled" ? false : scrollPolicy?.actionFixed ?? "auto"
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function isLargeScreenByBreakpoint(breakpoint, screens, screenWidth) {
|
|
34
|
+
return typeof breakpoint === "number" ? screenWidth >= breakpoint : !!screens[breakpoint];
|
|
35
|
+
}
|
|
36
|
+
function getColumnWidthValue(column) {
|
|
37
|
+
const width = Number.parseInt(String(column.width ?? ""), 10);
|
|
38
|
+
return Number.isFinite(width) && width > 0 ? width : DEFAULT_COLUMN_WIDTH;
|
|
39
|
+
}
|
|
40
|
+
function getTableScrollX(columns, hasRowSelection) {
|
|
41
|
+
return columns.reduce((total, column) => {
|
|
42
|
+
return total + getColumnWidthValue(column);
|
|
43
|
+
}, 0) + (hasRowSelection ? ROW_SELECTION_WIDTH : 0);
|
|
44
|
+
}
|
|
45
|
+
function useTableScroll(options) {
|
|
46
|
+
const normalizedScrollPolicy = computed(() => normalizeScrollPolicy(options.scrollPolicy.value));
|
|
47
|
+
const isLargeScreen = computed(() => {
|
|
48
|
+
const policy = normalizedScrollPolicy.value;
|
|
49
|
+
return isLargeScreenByBreakpoint(policy.breakpoint, options.screens.value, options.screenWidth.value);
|
|
50
|
+
});
|
|
51
|
+
const autoScrollX = computed(() => {
|
|
52
|
+
return getTableScrollX(options.columns.value, !!options.rowSelection.value);
|
|
53
|
+
});
|
|
54
|
+
const tableScroll = computed(() => {
|
|
55
|
+
const policy = normalizedScrollPolicy.value;
|
|
56
|
+
const explicitScroll = options.scroll.value;
|
|
57
|
+
if (policy.mode === "disabled") return {};
|
|
58
|
+
if (policy.mode === "manual") return explicitScroll ?? {};
|
|
59
|
+
const nextScroll = { ...explicitScroll ?? {} };
|
|
60
|
+
if (!nextScroll.x && !isLargeScreen.value) nextScroll.x = autoScrollX.value;
|
|
61
|
+
if (policy.modal && !nextScroll.y) nextScroll.y = isLargeScreen.value ? policy.modalY.desktop : policy.modalY.mobile;
|
|
62
|
+
return nextScroll;
|
|
8
63
|
});
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
const rowSelectWidth = unref(rowSelection) ? 60 : 0;
|
|
12
|
-
const NORMAL_WIDTH = 150;
|
|
13
|
-
const viewColumns = cloneDeep(unref(columns));
|
|
14
|
-
viewColumns.forEach((item) => {
|
|
15
|
-
width += Number.parseInt(String(item.width)) || 0;
|
|
16
|
-
});
|
|
17
|
-
const len = viewColumns.filter((item) => !Reflect.has(item, "width")).length;
|
|
18
|
-
if (len !== 0) width += len * NORMAL_WIDTH;
|
|
19
|
-
if (rowSelectWidth) width += rowSelectWidth;
|
|
20
|
-
return width;
|
|
64
|
+
const hasHorizontalScroll = computed(() => {
|
|
65
|
+
return !!tableScroll.value?.x;
|
|
21
66
|
});
|
|
22
67
|
return {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (
|
|
28
|
-
return
|
|
68
|
+
tableScroll,
|
|
69
|
+
hasHorizontalScroll,
|
|
70
|
+
shouldFixActionColumn: computed(() => {
|
|
71
|
+
const policy = normalizedScrollPolicy.value;
|
|
72
|
+
if (policy.mode === "disabled" || policy.actionFixed === false) return false;
|
|
73
|
+
return hasHorizontalScroll.value;
|
|
29
74
|
}),
|
|
30
|
-
|
|
75
|
+
normalizedScrollPolicy
|
|
31
76
|
};
|
|
32
77
|
}
|
|
33
78
|
//#endregion
|
|
34
|
-
export { useTableScroll };
|
|
79
|
+
export { getColumnWidthValue, getTableScrollX, isLargeScreenByBreakpoint, normalizeScrollPolicy, useTableScroll };
|
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ProTableSizeType } from "../interface.js";
|
|
2
|
+
import { ComputedRef } from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/hooks/useTableSize.d.ts
|
|
5
|
-
|
|
6
|
-
size:
|
|
7
|
-
onChange
|
|
8
|
-
}
|
|
5
|
+
interface UseTableSizeOptions {
|
|
6
|
+
size: ComputedRef<ProTableSizeType | undefined>;
|
|
7
|
+
onChange?: (size: ProTableSizeType) => void;
|
|
8
|
+
}
|
|
9
|
+
interface UseTableSizeReturn {
|
|
10
|
+
tableSize: ComputedRef<ProTableSizeType>;
|
|
11
|
+
setTableSize: (size: ProTableSizeType) => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Table 尺寸状态管理。
|
|
15
|
+
* 纯 computed 实现,无 ref + watch 链。
|
|
16
|
+
* setTableSize 校验合法值后才触发 onChange 回调。
|
|
17
|
+
*/
|
|
18
|
+
declare function useTableSize(options: UseTableSizeOptions): UseTableSizeReturn;
|
|
9
19
|
//#endregion
|
|
10
|
-
export { useTableSize };
|
|
20
|
+
export { UseTableSizeOptions, UseTableSizeReturn, useTableSize };
|
|
@@ -1,12 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { computed } from "vue";
|
|
2
2
|
//#region src/hooks/useTableSize.ts
|
|
3
|
+
const VALID_SIZES = new Set([
|
|
4
|
+
"small",
|
|
5
|
+
"medium",
|
|
6
|
+
"middle",
|
|
7
|
+
"large"
|
|
8
|
+
]);
|
|
9
|
+
const DEFAULT_SIZE = "middle";
|
|
10
|
+
/**
|
|
11
|
+
* Table 尺寸状态管理。
|
|
12
|
+
* 纯 computed 实现,无 ref + watch 链。
|
|
13
|
+
* setTableSize 校验合法值后才触发 onChange 回调。
|
|
14
|
+
*/
|
|
3
15
|
function useTableSize(options) {
|
|
4
|
-
const tableSize =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
tableSize.value = value || tableSize.value;
|
|
16
|
+
const tableSize = computed(() => options.size.value ?? DEFAULT_SIZE);
|
|
17
|
+
function setTableSize(size) {
|
|
18
|
+
if (VALID_SIZES.has(size)) options.onChange?.(size);
|
|
8
19
|
}
|
|
9
|
-
return
|
|
20
|
+
return {
|
|
21
|
+
tableSize,
|
|
22
|
+
setTableSize
|
|
23
|
+
};
|
|
10
24
|
}
|
|
11
25
|
//#endregion
|
|
12
26
|
export { useTableSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { ProColumnType,
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
|
|
1
|
+
import { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, FormConfig, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnType, ProColumnsValueType, ProCoreActionType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement } from "./interface.js";
|
|
2
|
+
import _default from "./ProTable.js";
|
|
3
|
+
import { useInjectTableContext } from "./context/TableContext.js";
|
|
4
|
+
import { UseProBreakpointsReturn, useProBreakpoints } from "./hooks/useBreakpoints.js";
|
|
5
|
+
import { FetchDataAction, FetchDataConfig, useFetchData } from "./hooks/useFetchData.js";
|
|
6
|
+
import { usePagination } from "./hooks/usePagination.js";
|
|
7
|
+
import { UseRequestOptionsParams, UseRequestOptionsReturn, useRequestOptions } from "./hooks/useRequestOptions.js";
|
|
8
|
+
import { UseTableOptions, UseTableReturn, useTable } from "./hooks/useTable.js";
|
|
9
|
+
import { UseTableFormOptions, UseTableFormReturn, useTableForm } from "./hooks/useTableForm.js";
|
|
10
|
+
export { BeforeSearchSubmit, ColConfig, ColumnWithKeyOrDataIndex, CustomDataFn, CustomDataRender, CustomRenderResult, DefaultProColumn, DefaultProColumnWithKeyOrDataIndex, DefaultRender, type FetchDataAction, type FetchDataConfig, FormConfig, _default as GProTable, OperateRowProps, PageItemFn, PageItemRender, PageState, ProColumn, ProColumnType, ProColumnsValueType, ProCoreActionType, ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap, ProTableBodyCellProps, ProTableClassNamesType, ProTableCustomProps, ProTableEmits, ProTableFetchParams, ProTableIndexColumn, ProTablePagination, ProTablePaginationConfig, ProTableProps, ProTableRef, ProTableScrollPolicy, ProTableSizeType, ProTableSlots, ProTableStylesType, RequestConfig, RequestData, RequestFunction, RowSelectionActions, TableSemanticName, TableSorterRecord, ToolbarOptionConfig, ToolbarPlacement, type UseProBreakpointsReturn, type UseRequestOptionsParams, type UseRequestOptionsReturn, type UseTableFormOptions, type UseTableFormReturn, type UseTableOptions, type UseTableReturn, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { useProBreakpoints } from "./hooks/useBreakpoints.js";
|
|
2
|
+
import { useRequestOptions } from "./hooks/useRequestOptions.js";
|
|
3
|
+
import { useInjectTableContext } from "./context/TableContext.js";
|
|
4
|
+
import { useFetchData } from "./hooks/useFetchData.js";
|
|
5
|
+
import { usePagination } from "./hooks/usePagination.js";
|
|
3
6
|
import { useTable } from "./hooks/useTable.js";
|
|
4
|
-
|
|
7
|
+
import { useTableForm } from "./hooks/useTableForm.js";
|
|
8
|
+
import "./hooks/index.js";
|
|
9
|
+
import ForwardProTable from "./ProTable.js";
|
|
10
|
+
export { ForwardProTable as GProTable, useFetchData, useInjectTableContext, usePagination, useProBreakpoints, useRequestOptions, useTable, useTableForm };
|