@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.
Files changed (133) hide show
  1. package/dist/ProTable.d.ts +14 -492
  2. package/dist/ProTable.js +818 -518
  3. package/dist/components/ScrollBar/Bar.d.ts +81 -0
  4. package/dist/components/ScrollBar/Bar.js +84 -0
  5. package/dist/components/ScrollBar/Thumb.d.ts +52 -0
  6. package/dist/components/ScrollBar/{Thumb/index.js → Thumb.js} +67 -55
  7. package/dist/components/ScrollBar/context.d.ts +3 -4
  8. package/dist/components/ScrollBar/context.js +3 -3
  9. package/dist/components/ScrollBar/util.d.ts +6 -5
  10. package/dist/components/ScrollBar/util.js +1 -12
  11. package/dist/components/SearchForm/CollapseToggle.d.ts +55 -0
  12. package/dist/components/SearchForm/CollapseToggle.js +47 -0
  13. package/dist/components/SearchForm/FormItemContainer.d.ts +75 -0
  14. package/dist/components/SearchForm/FormItemContainer.js +225 -0
  15. package/dist/components/SearchForm/FormItemWrapper.d.ts +82 -0
  16. package/dist/components/SearchForm/FormItemWrapper.js +62 -0
  17. package/dist/components/SearchForm/SearchForm.d.ts +130 -0
  18. package/dist/components/SearchForm/SearchForm.js +319 -0
  19. package/dist/components/SearchForm/index.d.ts +2 -0
  20. package/dist/components/SearchForm/index.js +2 -0
  21. package/dist/components/Toolbar/FullscreenIcon.d.ts +26 -0
  22. package/dist/components/Toolbar/FullscreenIcon.js +22 -0
  23. package/dist/components/Toolbar/ListToolBar.d.ts +111 -0
  24. package/dist/components/Toolbar/ListToolBar.js +101 -0
  25. package/dist/components/Toolbar/index.d.ts +103 -0
  26. package/dist/components/Toolbar/index.js +101 -0
  27. package/dist/components/Toolbar/style.d.ts +8 -0
  28. package/dist/components/{ListToolBar → Toolbar}/style.js +32 -27
  29. package/dist/context/TableContext.d.ts +15 -27
  30. package/dist/context/TableContext.js +3 -3
  31. package/dist/hooks/index.d.ts +16 -0
  32. package/dist/hooks/index.js +16 -0
  33. package/dist/hooks/useBreakpoints.d.ts +13 -0
  34. package/dist/hooks/useBreakpoints.js +57 -0
  35. package/dist/hooks/useCellRender.d.ts +13 -0
  36. package/dist/hooks/useCellRender.js +28 -0
  37. package/dist/hooks/useColumnResize.d.ts +30 -0
  38. package/dist/hooks/useColumnResize.js +110 -0
  39. package/dist/hooks/useColumns.d.ts +35 -24
  40. package/dist/hooks/useColumns.js +89 -56
  41. package/dist/hooks/useFetchData.d.ts +40 -65
  42. package/dist/hooks/useFetchData.js +157 -172
  43. package/dist/hooks/useFitPage.d.ts +19 -0
  44. package/dist/hooks/useFitPage.js +90 -0
  45. package/dist/hooks/useKeepAliveReload.d.ts +21 -0
  46. package/dist/hooks/useKeepAliveReload.js +24 -0
  47. package/dist/hooks/useLoading.d.ts +18 -7
  48. package/dist/hooks/useLoading.js +26 -8
  49. package/dist/hooks/usePagination.d.ts +10 -7
  50. package/dist/hooks/usePagination.js +37 -26
  51. package/dist/hooks/useRequestOptions.d.ts +18 -0
  52. package/dist/hooks/useRequestOptions.js +39 -0
  53. package/dist/hooks/useRowSelection.d.ts +27 -15
  54. package/dist/hooks/useRowSelection.js +92 -77
  55. package/dist/hooks/useTable.d.ts +19 -77
  56. package/dist/hooks/useTable.js +66 -54
  57. package/dist/hooks/useTableForm.d.ts +15 -83
  58. package/dist/hooks/useTableForm.js +93 -56
  59. package/dist/hooks/useTableScroll.d.ts +33 -31
  60. package/dist/hooks/useTableScroll.js +71 -26
  61. package/dist/hooks/useTableSize.d.ts +17 -7
  62. package/dist/hooks/useTableSize.js +20 -6
  63. package/dist/index.d.ts +10 -7
  64. package/dist/index.js +9 -3
  65. package/dist/interface.d.ts +492 -0
  66. package/dist/pro-table.esm.js +3483 -3913
  67. package/dist/pro-table.js +1 -1
  68. package/dist/style/fit-page.d.ts +4 -2
  69. package/dist/style/fit-page.js +9 -3
  70. package/dist/style/index.d.ts +4 -6
  71. package/dist/style/index.js +24 -74
  72. package/dist/style/list.d.ts +4 -2
  73. package/dist/style/list.js +1 -10
  74. package/dist/style/resizable.d.ts +8 -0
  75. package/dist/style/resizable.js +18 -0
  76. package/dist/style/scroll.d.ts +4 -2
  77. package/dist/style/scroll.js +8 -6
  78. package/dist/style/search.d.ts +8 -0
  79. package/dist/{components/Form/style.js → style/search.js} +22 -8
  80. package/dist/theme/augment.d.ts +8 -0
  81. package/dist/theme/interface/components.d.ts +8 -0
  82. package/dist/utils/dateFormat.d.ts +9 -0
  83. package/dist/utils/dateFormat.js +29 -0
  84. package/dist/utils/formConstants.d.ts +9 -0
  85. package/dist/utils/formConstants.js +29 -0
  86. package/dist/utils/valueFormat.d.ts +9 -0
  87. package/dist/utils/valueFormat.js +27 -0
  88. package/package.json +10 -9
  89. package/dist/components/Form/components/RequestSelect.d.ts +0 -50
  90. package/dist/components/Form/components/RequestSelect.js +0 -56
  91. package/dist/components/Form/hooks/useForm.d.ts +0 -11
  92. package/dist/components/Form/hooks/useForm.js +0 -30
  93. package/dist/components/Form/index.d.ts +0 -32
  94. package/dist/components/Form/index.js +0 -476
  95. package/dist/components/Form/style.d.ts +0 -6
  96. package/dist/components/Form/utils/config.d.ts +0 -9
  97. package/dist/components/Form/utils/config.js +0 -29
  98. package/dist/components/Form/utils/dateFormat.d.ts +0 -22
  99. package/dist/components/Form/utils/dateFormat.js +0 -43
  100. package/dist/components/ListToolBar/index.d.ts +0 -59
  101. package/dist/components/ListToolBar/index.js +0 -123
  102. package/dist/components/ListToolBar/style.d.ts +0 -6
  103. package/dist/components/ScrollBar/Bar/index.d.ts +0 -49
  104. package/dist/components/ScrollBar/Bar/index.js +0 -68
  105. package/dist/components/ScrollBar/Bar/props.d.ts +0 -25
  106. package/dist/components/ScrollBar/Bar/props.js +0 -17
  107. package/dist/components/ScrollBar/Thumb/index.d.ts +0 -40
  108. package/dist/components/ScrollBar/Thumb/props.d.ts +0 -20
  109. package/dist/components/ScrollBar/Thumb/props.js +0 -17
  110. package/dist/components/TableCell/index.d.ts +0 -37
  111. package/dist/components/TableCell/index.js +0 -69
  112. package/dist/components/ToolBar/FullscreenIcon.d.ts +0 -7
  113. package/dist/components/ToolBar/FullscreenIcon.js +0 -11
  114. package/dist/components/ToolBar/index.d.ts +0 -34
  115. package/dist/components/ToolBar/index.js +0 -97
  116. package/dist/hooks/tryOnActivated.d.ts +0 -6
  117. package/dist/hooks/tryOnActivated.js +0 -12
  118. package/dist/hooks/useDebounceFn.d.ts +0 -8
  119. package/dist/hooks/useDebounceFn.js +0 -31
  120. package/dist/hooks/useScrollArea.d.ts +0 -24
  121. package/dist/hooks/useScrollArea.js +0 -102
  122. package/dist/props.d.ts +0 -340
  123. package/dist/props.js +0 -247
  124. package/dist/types/ColumnTypings.d.ts +0 -130
  125. package/dist/types/SlotsTypings.d.ts +0 -63
  126. package/dist/types/SlotsTypings.js +0 -12
  127. package/dist/types/TableTypings.d.ts +0 -359
  128. package/dist/types/index.d.ts +0 -9
  129. package/dist/utils/utils.d.ts +0 -10
  130. package/dist/utils/utils.js +0 -89
  131. /package/dist/{types/ColumnTypings.js → interface.js} +0 -0
  132. /package/dist/{types/TableTypings.js → theme/augment.js} +0 -0
  133. /package/dist/{types/index.js → theme/interface/components.js} +0 -0
@@ -1,87 +1,19 @@
1
- import { ProFieldValueFormat, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap } from "../types/ColumnTypings.js";
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
- declare function handleFormDefaultValue(data: ProSearchMap[]): RecordType;
8
- declare function useTableForm({
9
- searchMap,
10
- columns
11
- }: {
12
- searchMap: Ref<ProTableProps['searchMap']>;
13
- columns: ComputedRef<ProTableProps['columns']>;
14
- }): {
15
- formCols: Ref<{
16
- name: string;
17
- order?: number;
18
- valueType?: ProFieldValueType;
19
- valueFormat?: ProFieldValueFormat;
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 { handleFormDefaultValue, useTableForm };
19
+ export { UseTableFormOptions, UseTableFormReturn, useTableForm };
@@ -1,70 +1,107 @@
1
- import { ref, watch } from "vue";
2
- import { isArray } from "@gx-design-vue/pro-utils";
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 handleFormDefaultValue(data) {
5
- const defaulState = {};
6
- data.forEach((item) => {
7
- let initialValue = item.initialValue;
8
- const valueEmptyArray = ["numberRange"];
9
- if (item.valueType) {
10
- if (!initialValue) {
11
- if (valueEmptyArray.includes(item.valueType)) initialValue = [];
12
- else if (item.valueType === "treeSelect" && (item.field?.multiple || item.field?.treeCheckable)) initialValue = [];
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
- return defaulState;
18
+ sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
19
+ return sorted;
25
20
  }
26
- function useTableForm({ searchMap, columns }) {
27
- const formCols = ref([]);
28
- const defaultFormSearch = ref({});
29
- function updateFormData(data) {
30
- data.forEach((item) => {
31
- if (formCols.value.some((el) => el.name === item.name)) formCols.value = formCols.value.map((el) => {
32
- if (el.name === item.name) return {
33
- ...el,
34
- ...item
35
- };
36
- return el;
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
- watch(() => searchMap.value, () => {
47
- const searchData = [];
48
- searchMap.value?.forEach((item) => searchData.push(item));
49
- if (searchData.length) updateFormData(searchData);
50
- }, {
51
- deep: true,
52
- immediate: true
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
- watch(() => columns.value, () => {
55
- const searchData = [];
56
- if (columns.value && columns.value?.length) columns.value.forEach((item) => {
57
- if (item.searchConfig) searchData.push(item.searchConfig);
58
- });
59
- if (searchData.length) updateFormData(searchData);
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
- formCols,
66
- defaultFormSearch
98
+ formColumns,
99
+ defaultFormSearch,
100
+ formState,
101
+ getFormSearch,
102
+ resetFormState,
103
+ changeFormState
67
104
  };
68
105
  }
69
106
  //#endregion
70
- export { handleFormDefaultValue, useTableForm };
107
+ export { useTableForm };
@@ -1,35 +1,37 @@
1
- import { ProColumnsType } from "../types/ColumnTypings.js";
2
- import { ProTableProps, TableScroll } from "../types/TableTypings.js";
3
- import { ComputedRef, Ref } from "vue";
4
- import { Breakpoint } from "@gx-design-vue/pro-utils";
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 ConfigScroll {
8
- scroll: Ref<ProTableProps['scroll']>;
9
- autoScroll: Ref<ProTableProps['autoScroll']>;
10
- modalScroll: Ref<ProTableProps['modalScroll']>;
11
- neverScroll: Ref<ProTableProps['neverScroll']>;
12
- rowSelection: Ref<ProTableProps['rowSelection']>;
13
- scrollBreakpoint: Ref<ProTableProps['scrollBreakpoint']>;
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
- type useTableScrollType = {
16
- columns: ComputedRef<ProColumnsType>;
17
- innerWidth: Ref<number>;
18
- screens: Ref<Partial<Record<Breakpoint, boolean>>>;
19
- } & ConfigScroll;
20
- declare function useTableScroll({
21
- scroll,
22
- columns,
23
- autoScroll,
24
- modalScroll,
25
- neverScroll,
26
- rowSelection,
27
- screens,
28
- innerWidth,
29
- scrollBreakpoint
30
- }: useTableScrollType): {
31
- proScroll: ComputedRef<TableScroll>;
32
- breakpoint: ComputedRef<boolean>;
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, unref } from "vue";
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
- function useTableScroll({ scroll, columns, autoScroll, modalScroll, neverScroll, rowSelection, screens, innerWidth, scrollBreakpoint }) {
5
- const breakpoint = computed(() => {
6
- if (scrollBreakpoint.value) return isNumber(scrollBreakpoint.value) ? innerWidth.value > scrollBreakpoint.value : isString(scrollBreakpoint.value) ? screens.value?.[scrollBreakpoint.value] : screens.value?.xl;
7
- return screens.value?.xl;
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 scrollX = computed(() => {
10
- let width = 0;
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
- proScroll: computed(() => {
24
- if (neverScroll.value) return {};
25
- if (scroll.value && keysOf(scroll.value).length) return unref(scroll);
26
- if (modalScroll.value) return { y: scroll.value?.y || (screens.value?.xl ? 400 : 235) };
27
- if (!autoScroll.value) return {};
28
- return breakpoint.value ? {} : isBoolean(breakpoint.value) ? { x: scrollX.value } : {};
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
- breakpoint
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 { Ref } from "vue";
2
- import { SizeType } from "@gx-design-vue/pro-utils";
1
+ import { ProTableSizeType } from "../interface.js";
2
+ import { ComputedRef } from "vue";
3
3
 
4
4
  //#region src/hooks/useTableSize.d.ts
5
- declare function useTableSize(options: {
6
- size: Ref<SizeType>;
7
- onChange: (value: SizeType) => void;
8
- }): [Ref<SizeType>, (value: SizeType) => void];
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 { ref, watch } from "vue";
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 = ref(options.size.value || "middle");
5
- watch(() => options.size.value, (value) => tableSize.value = value);
6
- function setTableSize(value) {
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 [tableSize, setTableSize];
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, ProColumnsType, ProFieldValueType, ProSchemaValueEnumType, ProSearchMap } from "./types/ColumnTypings.js";
2
- import { CustomRenderResult, ProTableBodyCellProps, TableSlots } from "./types/SlotsTypings.js";
3
- import { FormConfig, OptionConfig, PageState, ProCoreActionType, ProCoreFormType, ProTableFetchParams, ProTablePaginationConfig, ProTableProps, ProTableRef, RequestConfig, RequestFunction } from "./types/TableTypings.js";
4
- import { BaseTableProps, proTableProps } from "./props.js";
5
- import { BaseTableState, ProTableState, UseTableReturn, useTable } from "./hooks/useTable.js";
6
- import ProTable from "./ProTable.js";
7
- export { type BaseTableProps, BaseTableState, type CustomRenderResult, type FormConfig, ProTable as GProTable, type OptionConfig, type PageState, type ProColumnType, type ProColumnsType, type ProCoreActionType, type ProCoreFormType, type ProFieldValueType, type ProSchemaValueEnumType, type ProSearchMap, type ProTableBodyCellProps, type ProTableFetchParams, type ProTablePaginationConfig, type ProTableProps, type ProTableRef, ProTableState, type RequestConfig, type RequestFunction, type TableSlots, UseTableReturn, proTableProps, useTable };
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 { proTableProps } from "./props.js";
2
- import ProTable from "./ProTable.js";
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
- export { ProTable as GProTable, proTableProps, useTable };
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 };