@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.21

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 (160) hide show
  1. package/dist/ProTable.d.ts +14 -493
  2. package/dist/ProTable.js +902 -511
  3. package/dist/components/Drag/Handle.d.ts +90 -0
  4. package/dist/components/Drag/Handle.js +64 -0
  5. package/dist/components/Drag/Tbody.d.ts +17 -0
  6. package/dist/components/Drag/Tbody.js +27 -0
  7. package/dist/components/EllipsisText/index.d.ts +50 -0
  8. package/dist/components/EllipsisText/index.js +65 -0
  9. package/dist/components/ScrollBar/Bar.d.ts +79 -0
  10. package/dist/components/ScrollBar/Bar.js +84 -0
  11. package/dist/components/ScrollBar/Thumb.d.ts +50 -0
  12. package/dist/components/ScrollBar/{Thumb/index.js → Thumb.js} +67 -58
  13. package/dist/components/ScrollBar/context.d.ts +3 -4
  14. package/dist/components/ScrollBar/context.js +3 -5
  15. package/dist/components/ScrollBar/util.d.ts +6 -5
  16. package/dist/components/ScrollBar/util.js +1 -14
  17. package/dist/components/SearchForm/CollapseToggle.d.ts +53 -0
  18. package/dist/components/SearchForm/CollapseToggle.js +47 -0
  19. package/dist/components/SearchForm/FormItemContainer.d.ts +73 -0
  20. package/dist/components/SearchForm/FormItemContainer.js +225 -0
  21. package/dist/components/SearchForm/FormItemWrapper.d.ts +80 -0
  22. package/dist/components/SearchForm/FormItemWrapper.js +62 -0
  23. package/dist/components/SearchForm/SearchForm.d.ts +128 -0
  24. package/dist/components/SearchForm/SearchForm.js +319 -0
  25. package/dist/components/SearchForm/index.d.ts +2 -0
  26. package/dist/components/SearchForm/index.js +2 -0
  27. package/dist/components/Toolbar/FullscreenIcon.d.ts +24 -0
  28. package/dist/components/Toolbar/FullscreenIcon.js +22 -0
  29. package/dist/components/Toolbar/ListToolBar.d.ts +109 -0
  30. package/dist/components/Toolbar/ListToolBar.js +101 -0
  31. package/dist/components/Toolbar/index.d.ts +101 -0
  32. package/dist/components/Toolbar/index.js +101 -0
  33. package/dist/components/Toolbar/style.d.ts +8 -0
  34. package/dist/components/{ListToolBar → Toolbar}/style.js +32 -27
  35. package/dist/context/TableContext.d.ts +15 -27
  36. package/dist/context/TableContext.js +3 -5
  37. package/dist/hooks/index.d.ts +19 -0
  38. package/dist/hooks/index.js +19 -0
  39. package/dist/hooks/useAutoScroll.d.ts +32 -0
  40. package/dist/hooks/useAutoScroll.js +127 -0
  41. package/dist/hooks/useBreakpoints.d.ts +13 -0
  42. package/dist/hooks/useBreakpoints.js +65 -0
  43. package/dist/hooks/useCellRender.d.ts +13 -0
  44. package/dist/hooks/useCellRender.js +40 -0
  45. package/dist/hooks/useColumnResize.d.ts +29 -0
  46. package/dist/hooks/useColumnResize.js +112 -0
  47. package/dist/hooks/useColumns.d.ts +35 -24
  48. package/dist/hooks/useColumns.js +89 -58
  49. package/dist/hooks/useDragHandleColumn.d.ts +26 -0
  50. package/dist/hooks/useDragHandleColumn.js +52 -0
  51. package/dist/hooks/useEllipsis.d.ts +20 -0
  52. package/dist/hooks/useEllipsis.js +51 -0
  53. package/dist/hooks/useFetchData.d.ts +42 -65
  54. package/dist/hooks/useFetchData.js +160 -176
  55. package/dist/hooks/useFitPage.d.ts +19 -0
  56. package/dist/hooks/useFitPage.js +90 -0
  57. package/dist/hooks/useKeepAliveReload.d.ts +21 -0
  58. package/dist/hooks/useKeepAliveReload.js +24 -0
  59. package/dist/hooks/useLoading.d.ts +18 -7
  60. package/dist/hooks/useLoading.js +27 -11
  61. package/dist/hooks/usePagination.d.ts +10 -7
  62. package/dist/hooks/usePagination.js +38 -29
  63. package/dist/hooks/useRequestOptions.d.ts +18 -0
  64. package/dist/hooks/useRequestOptions.js +39 -0
  65. package/dist/hooks/useRowDrag.d.ts +42 -0
  66. package/dist/hooks/useRowDrag.js +268 -0
  67. package/dist/hooks/useRowSelection.d.ts +27 -15
  68. package/dist/hooks/useRowSelection.js +93 -80
  69. package/dist/hooks/useTable.d.ts +35 -77
  70. package/dist/hooks/useTable.js +76 -49
  71. package/dist/hooks/useTableForm.d.ts +17 -82
  72. package/dist/hooks/useTableForm.js +137 -52
  73. package/dist/hooks/useTableScroll.d.ts +33 -31
  74. package/dist/hooks/useTableScroll.js +71 -28
  75. package/dist/hooks/useTableSize.d.ts +17 -7
  76. package/dist/hooks/useTableSize.js +21 -9
  77. package/dist/index.d.ts +11 -7
  78. package/dist/index.js +10 -4
  79. package/dist/interface.d.ts +537 -0
  80. package/dist/interface.js +1 -0
  81. package/dist/pro-table.esm.js +8897 -4012
  82. package/dist/pro-table.js +4 -1
  83. package/dist/style/ellipsis.d.ts +13 -0
  84. package/dist/style/ellipsis.js +16 -0
  85. package/dist/style/fit-page.d.ts +4 -2
  86. package/dist/style/fit-page.js +10 -5
  87. package/dist/style/index.d.ts +3 -7
  88. package/dist/style/index.js +38 -76
  89. package/dist/style/list.d.ts +4 -2
  90. package/dist/style/list.js +2 -12
  91. package/dist/style/resizable.d.ts +8 -0
  92. package/dist/style/resizable.js +18 -0
  93. package/dist/style/row-drag.d.ts +8 -0
  94. package/dist/style/row-drag.js +44 -0
  95. package/dist/style/scroll.d.ts +4 -2
  96. package/dist/style/scroll.js +9 -9
  97. package/dist/style/search.d.ts +8 -0
  98. package/dist/{components/Form/style.js → style/search.js} +22 -9
  99. package/dist/theme/augment.d.ts +8 -0
  100. package/dist/theme/augment.js +1 -0
  101. package/dist/theme/interface/components.d.ts +8 -0
  102. package/dist/theme/interface/components.js +1 -0
  103. package/dist/utils/arrayMove.d.ts +9 -0
  104. package/dist/utils/arrayMove.js +15 -0
  105. package/dist/utils/dateFormat.d.ts +9 -0
  106. package/dist/utils/dateFormat.js +29 -0
  107. package/dist/utils/ellipsis.d.ts +19 -0
  108. package/dist/utils/ellipsis.js +30 -0
  109. package/dist/utils/flipAnimate.d.ts +25 -0
  110. package/dist/utils/flipAnimate.js +40 -0
  111. package/dist/utils/formConstants.d.ts +9 -0
  112. package/dist/utils/formConstants.js +29 -0
  113. package/dist/utils/valueFormat.d.ts +9 -0
  114. package/dist/utils/valueFormat.js +27 -0
  115. package/package.json +23 -11
  116. package/dist/components/Form/components/RequestSelect.d.ts +0 -50
  117. package/dist/components/Form/components/RequestSelect.js +0 -58
  118. package/dist/components/Form/hooks/useForm.d.ts +0 -11
  119. package/dist/components/Form/hooks/useForm.js +0 -32
  120. package/dist/components/Form/index.d.ts +0 -33
  121. package/dist/components/Form/index.js +0 -479
  122. package/dist/components/Form/style.d.ts +0 -6
  123. package/dist/components/Form/utils/config.d.ts +0 -9
  124. package/dist/components/Form/utils/config.js +0 -30
  125. package/dist/components/Form/utils/dateFormat.d.ts +0 -22
  126. package/dist/components/Form/utils/dateFormat.js +0 -45
  127. package/dist/components/ListToolBar/index.d.ts +0 -60
  128. package/dist/components/ListToolBar/index.js +0 -123
  129. package/dist/components/ListToolBar/style.d.ts +0 -6
  130. package/dist/components/ScrollBar/Bar/index.d.ts +0 -49
  131. package/dist/components/ScrollBar/Bar/index.js +0 -71
  132. package/dist/components/ScrollBar/Bar/props.d.ts +0 -25
  133. package/dist/components/ScrollBar/Bar/props.js +0 -18
  134. package/dist/components/ScrollBar/Thumb/index.d.ts +0 -40
  135. package/dist/components/ScrollBar/Thumb/props.d.ts +0 -20
  136. package/dist/components/ScrollBar/Thumb/props.js +0 -18
  137. package/dist/components/TableCell/index.d.ts +0 -37
  138. package/dist/components/TableCell/index.js +0 -72
  139. package/dist/components/ToolBar/FullscreenIcon.d.ts +0 -7
  140. package/dist/components/ToolBar/FullscreenIcon.js +0 -14
  141. package/dist/components/ToolBar/index.d.ts +0 -34
  142. package/dist/components/ToolBar/index.js +0 -100
  143. package/dist/hooks/tryOnActivated.d.ts +0 -6
  144. package/dist/hooks/tryOnActivated.js +0 -14
  145. package/dist/hooks/useDebounceFn.d.ts +0 -8
  146. package/dist/hooks/useDebounceFn.js +0 -34
  147. package/dist/hooks/useScrollArea.d.ts +0 -24
  148. package/dist/hooks/useScrollArea.js +0 -104
  149. package/dist/props.d.ts +0 -340
  150. package/dist/props.js +0 -251
  151. package/dist/types/ColumnTypings.d.ts +0 -129
  152. package/dist/types/ColumnTypings.js +0 -1
  153. package/dist/types/SlotsTypings.d.ts +0 -63
  154. package/dist/types/SlotsTypings.js +0 -13
  155. package/dist/types/TableTypings.d.ts +0 -359
  156. package/dist/types/TableTypings.js +0 -1
  157. package/dist/types/index.d.ts +0 -9
  158. package/dist/types/index.js +0 -1
  159. package/dist/utils/utils.d.ts +0 -10
  160. package/dist/utils/utils.js +0 -91
@@ -1,479 +0,0 @@
1
- import { useTableContext } from "../../context/TableContext.js";
2
- import { proTableProps } from "../../props.js";
3
- import RequestSelect_default from "./components/RequestSelect.js";
4
- import { useForm } from "./hooks/useForm.js";
5
- import { genTableFormStyle } from "./style.js";
6
- import { defaultSpans } from "./utils/config.js";
7
- import { dateArrayFormatter, formatString, valueFormater } from "./utils/dateFormat.js";
8
- import { Fragment, cloneVNode, computed, createVNode, defineComponent, h, isVNode, mergeProps, ref, toRef, watch } from "vue";
9
- import { useProAppContext } from "@gx-design-vue/pro-app";
10
- import { useBreakpoint } from "@gx-design-vue/pro-hooks";
11
- import { unit, useProStyle } from "@gx-design-vue/pro-provider";
12
- import { classNames as classNames$1, filterEmpty, isArray, isBoolean, isNumber, isObject } from "@gx-design-vue/pro-utils";
13
- import { Button, DatePicker, Input, InputNumber, Select, Spin, TimePicker, TreeSelect } from "ant-design-vue";
14
- import { cloneDeep as cloneDeep$1, omit } from "es-toolkit";
15
- import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
16
- import dayjs from "dayjs";
17
-
18
- //#region src/components/Form/index.tsx
19
- function _isSlot(s) {
20
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
21
- }
22
- const { MonthPicker, RangePicker, YearPicker, WeekPicker, QuarterPicker } = DatePicker;
23
- function sortObjectsByOrder(array) {
24
- let maxOrder = array.reduce((max, item) => {
25
- return item.order !== void 0 ? Math.max(max, item.order) : max;
26
- }, 0);
27
- array.forEach((item) => {
28
- if (item.order === void 0) {
29
- maxOrder += 1;
30
- item.order = maxOrder;
31
- }
32
- });
33
- array.sort((a, b) => a.order - b.order);
34
- return array;
35
- }
36
- const ProTableForm = /* @__PURE__ */ defineComponent({
37
- name: "ProTableForm",
38
- inheritAttrs: false,
39
- props: {
40
- modalScroll: proTableProps.modalScroll,
41
- formCols: {
42
- type: Array,
43
- default: () => []
44
- },
45
- loading: proTableProps.loading,
46
- cardBordered: proTableProps.cardBordered,
47
- prefixCls: String,
48
- defaultFormSearch: {
49
- type: Object,
50
- default: () => ({})
51
- },
52
- onSearch: Function
53
- },
54
- setup(props, { slots, expose }) {
55
- const { wrapSSR, hashId } = useProStyle("ProTableForm", [genTableFormStyle], props.prefixCls);
56
- const appContext = useProAppContext();
57
- const screens = useBreakpoint();
58
- const { formAutoRequest, formConfig, formActions, screenWidth, styles, classNames } = useTableContext();
59
- const { formState, resetFormState, changeFormState } = useForm(toRef(props, "defaultFormSearch"), toRef(props, "formCols"));
60
- const gap = ref(unit(formConfig.value?.gap || 16));
61
- const breakpoint = computed(() => {
62
- if (formConfig.value?.breakpoint && isObject(formConfig.value.breakpoint) && Object.keys(formConfig.value.breakpoint).length) return formConfig.value?.breakpoint;
63
- });
64
- const collapsed = ref(formConfig.value?.collapsed ?? formConfig.value?.defaultCollapsed);
65
- const showResetButton = computed(() => isBoolean(formActions.value?.reset) ? formActions.value?.reset : !formAutoRequest.value);
66
- const rowLength = computed(() => {
67
- if (breakpoint.value) return getBreakpointRowLength(breakpoint.value, screenWidth.value);
68
- return getColSpanStyle(formConfig.value?.span, screens.value);
69
- });
70
- const formItemLabel = computed(() => formConfig.value?.label);
71
- watch(() => formConfig.value?.collapsed, (value) => {
72
- collapsed.value = value;
73
- });
74
- function getBreakpointRowLength(config, rootWidth) {
75
- let span = 4;
76
- const sortConfig = Object.keys(config).map((key) => Number(key)).filter((key) => !Number.isNaN(key)).sort((a, b) => b - a);
77
- for (let i = 0; i < sortConfig.length; i += 1) {
78
- const width = sortConfig[i];
79
- if (config[width] && rootWidth >= width) {
80
- span = config[width];
81
- break;
82
- }
83
- }
84
- return span;
85
- }
86
- function getColSpanStyle(colSpan, rootScreen) {
87
- let span = 4;
88
- for (let i = 0; i < defaultSpans.length; i += 1) {
89
- const breakpoint = defaultSpans[i].value;
90
- if (rootScreen[breakpoint]) {
91
- span = colSpan?.[breakpoint] || (props.modalScroll ? 3 : defaultSpans[i].span);
92
- break;
93
- }
94
- }
95
- return span;
96
- }
97
- const onCollapse = (status) => {
98
- collapsed.value = status;
99
- };
100
- const getStyleWidth = (index, rowLength, rowWidth) => {
101
- return (index + 1) % rowLength === 0 ? {
102
- ...rowWidth,
103
- marginRight: unit(0)
104
- } : {
105
- ...rowWidth,
106
- marginRight: gap.value
107
- };
108
- };
109
- const getFormSearch = () => {
110
- const searchParams = cloneDeep$1(formState);
111
- const textRecord = props.formCols.find((item) => item.valueType === "text");
112
- const dateRangeRecord = props.formCols.find((item) => item.valueType === "dateRange");
113
- const numberRangeRecord = props.formCols.find((item) => item.valueType === "numberRange");
114
- const treeSelectRecord = props.formCols.find((item) => item.valueType === "treeSelect");
115
- if (textRecord) searchParams[textRecord.name] = formState[textRecord.name] || textRecord.initialValue;
116
- if (dateRangeRecord) if (dateRangeRecord.rangeStartName || dateRangeRecord.rangeEndName) {
117
- searchParams[dateRangeRecord.rangeStartName || "start"] = searchParams[dateRangeRecord.name] ? searchParams[dateRangeRecord.name][0] : void 0;
118
- searchParams[dateRangeRecord.rangeEndName || "end"] = searchParams[dateRangeRecord.name] ? searchParams[dateRangeRecord.name][1] : void 0;
119
- delete searchParams[dateRangeRecord.name];
120
- } else searchParams[dateRangeRecord.name] = isArray(searchParams[dateRangeRecord.name]) && searchParams[dateRangeRecord.name].length > 0 ? formState[dateRangeRecord.name] : void 0;
121
- if (numberRangeRecord) {
122
- const value = searchParams[numberRangeRecord.name];
123
- searchParams[numberRangeRecord.name] = isArray(value) && value.some((val) => isNumber(val)) ? value : void 0;
124
- }
125
- if (treeSelectRecord) {
126
- if (treeSelectRecord?.name && isArray(formState[treeSelectRecord?.name])) searchParams[treeSelectRecord.name] = formState[treeSelectRecord.name].length ? formState[treeSelectRecord.name].map((item) => item[treeSelectRecord.valueKey === "text" ? "label" : "value"]).join() : void 0;
127
- if (treeSelectRecord?.name && isArray(searchParams[treeSelectRecord?.name])) searchParams[treeSelectRecord.name] = searchParams[treeSelectRecord.name].length ? searchParams[treeSelectRecord.name].map((item) => item[treeSelectRecord.valueKey === "text" ? "label" : "value"]) : void 0;
128
- }
129
- return searchParams;
130
- };
131
- const handleSubmit = (action = false, isReset) => {
132
- if (formAutoRequest.value || action) props.onSearch?.(getFormSearch(), action ? isReset ? "reset" : "submit" : void 0);
133
- };
134
- const handleChange = (value, record, options) => {
135
- let newValue = formState[record.name];
136
- switch (record.valueType) {
137
- case "text":
138
- changeFormState(record.name, value);
139
- break;
140
- case "number":
141
- changeFormState(record.name, value ?? void 0);
142
- break;
143
- case "numberRange":
144
- if ((options?.key === 0 || options?.key === 1) && newValue) {
145
- newValue = isArray(newValue) ? newValue : [];
146
- for (let i = 0; i < 2; i += 1) if (options?.key === i) newValue[i] = value ?? "";
147
- else newValue[i] = newValue[i] ?? "";
148
- changeFormState(record.name, newValue);
149
- }
150
- break;
151
- case "select":
152
- changeFormState(record.name, value ?? void 0);
153
- break;
154
- case "treeSelect":
155
- changeFormState(record.name, value ?? (record.field?.treeCheckable || record.field?.multiple ? [] : null));
156
- break;
157
- case "date":
158
- changeFormState(record.name, value ? formatString(value, valueFormater(record.valueFormat, record.showTime)) : null);
159
- break;
160
- case "dateWeek":
161
- changeFormState(record.name, value ? formatString(value, "YYYY-wo") : null);
162
- break;
163
- case "dateMonth":
164
- changeFormState(record.name, value ? formatString(value, "YYYY-MM") : null);
165
- break;
166
- case "dateQuarter":
167
- changeFormState(record.name, value ? formatString(value, "YYYY-QQ") : null);
168
- break;
169
- case "dateYear":
170
- changeFormState(record.name, value ? formatString(value, "YYYY") : null);
171
- break;
172
- case "dateRange":
173
- changeFormState(record.name, value && isArray(value) && value.length === 2 ? dateArrayFormatter(value, valueFormater(record.valueFormat, record.showTime)) : null);
174
- break;
175
- case "time":
176
- changeFormState(record.name, value ? formatString(value, record.valueFormat || "HH:mm:ss") : null);
177
- break;
178
- }
179
- handleSubmit();
180
- };
181
- const resetForm = (reset = true) => {
182
- resetFormState();
183
- handleSubmit(true, reset);
184
- };
185
- expose({
186
- getFormSearch: () => getFormSearch(),
187
- resetForm
188
- });
189
- const renderEmpty = () => {
190
- const emptyRender = appContext?.emptyText?.value;
191
- if (emptyRender) {
192
- const isNode = isVNode(emptyRender);
193
- const customEmpty = isNode ? h(emptyRender) : filterEmpty(emptyRender || []);
194
- return createVNode("div", { "class": classNames$1(`${props.prefixCls}-search-empty-text`, hashId.value) }, [isNode ? customEmpty : isArray(customEmpty) ? customEmpty.map((item) => cloneVNode(item)) : void 0]);
195
- }
196
- };
197
- const optionRender = () => (!formAutoRequest.value || showResetButton.value) && createVNode("div", {
198
- "class": classNames$1(`${props.prefixCls}-search-buttons ${hashId.value}`, classNames.value?.searchButtons),
199
- "style": styles.value?.searchButtons
200
- }, [showResetButton.value && createVNode(Button, {
201
- "key": "reset",
202
- "onClick": () => resetForm()
203
- }, { default: () => [formActions.value?.resetText || "重置"] }), !formAutoRequest.value && createVNode(Button, {
204
- "key": "submit",
205
- "loading": props.loading,
206
- "type": "primary",
207
- "onClick": () => handleSubmit(true)
208
- }, { default: () => [formActions.value?.searchText || "查询"] })]);
209
- const AdvancedSlot = ({ formItemStyle = {}, collapsed, collapseRender = true }) => createVNode("div", {
210
- "style": {
211
- ...formItemStyle,
212
- ...styles.value?.searchControl
213
- },
214
- "class": classNames$1(`${props.prefixCls}-search-control ${hashId.value}`, classNames.value?.searchControl)
215
- }, [createVNode("div", { "class": classNames$1(`${props.prefixCls}-search-control-content ${hashId.value}`, classNames.value?.searchContent) }, [optionRender(), formConfig.value?.collapseRender !== false && collapseRender && createVNode(Fragment, null, [typeof formConfig.value?.collapseRender === "function" ? formConfig.value?.collapseRender(collapsed) : createVNode("span", {
216
- "class": classNames$1(`${props.prefixCls}-search-control-text ${hashId.value}`, classNames.value?.searchText),
217
- "style": styles.value?.searchText,
218
- "onClick": () => onCollapse(!collapsed)
219
- }, [collapsed ? "收起" : "展开", collapsed ? createVNode(UpOutlined, null, null) : createVNode(DownOutlined, null, null)])])])]);
220
- function renderNotFount(loading) {
221
- return loading === void 0 ? void 0 : loading ? createVNode(Spin, {
222
- "size": "small",
223
- "indicator": appContext?.indicator?.value
224
- }, null) : renderEmpty();
225
- }
226
- function renderRequestFormItem(record, baseSelect) {
227
- return createVNode(RequestSelect_default, mergeProps(record.request, {
228
- "loading": record.loading,
229
- "notFoundContent": renderNotFount
230
- }), _isSlot(baseSelect) ? baseSelect : { default: () => [baseSelect] });
231
- }
232
- const FormItemContainer = (record) => {
233
- let show;
234
- const InputTag = formAutoRequest.value ? Input.Search : Input;
235
- const fields = omit(record.field || {}, "rules");
236
- let baseSelect = null;
237
- switch (record.valueType) {
238
- case "text":
239
- show = createVNode(InputTag, mergeProps({
240
- "style": { width: "100%" },
241
- "value": formState[record.name],
242
- "placeholder": record.placeholder || "请输入",
243
- "allowClear": record.allowClear ?? true,
244
- "onChange": (e) => handleChange(e.target.value, record),
245
- "onSearch": (_) => handleSubmit()
246
- }, fields), null);
247
- break;
248
- case "number":
249
- show = createVNode(InputNumber, mergeProps({
250
- "style": { width: "100%" },
251
- "value": formState[record.name],
252
- "placeholder": record.placeholder || "请输入",
253
- "onChange": (val) => handleChange(val, record)
254
- }, fields), null);
255
- break;
256
- case "numberRange":
257
- show = createVNode(Input.Group, {
258
- "compact": true,
259
- "class": classNames$1(hashId.value, `${props.prefixCls}-search-input-compact`)
260
- }, { default: () => [
261
- createVNode(InputNumber, {
262
- "value": formState[record.name]?.[0],
263
- "onChange": (val) => handleChange(val, record, { key: 0 }),
264
- "placeholder": isArray(record.placeholder) ? record.placeholder?.[0] || "请输入" : "请输入"
265
- }, null),
266
- createVNode(Input, {
267
- "disabled": true,
268
- "placeholder": "~"
269
- }, null),
270
- createVNode(InputNumber, {
271
- "value": formState[record.name]?.[1],
272
- "onChange": (val) => handleChange(val, record, { key: 1 }),
273
- "placeholder": isArray(record.placeholder) ? record.placeholder?.[1] || "请输入" : "请输入"
274
- }, null)
275
- ] });
276
- break;
277
- case "select":
278
- baseSelect = createVNode(Select, mergeProps({
279
- "style": { width: "100%" },
280
- "value": record.loading ? void 0 : formState[record.name],
281
- "optionFilterProp": "label",
282
- "placeholder": record.placeholder || "请选择",
283
- "showSearch": record.showSearch,
284
- "allowClear": record.allowClear ?? true,
285
- "getPopupContainer": (trigger) => {
286
- if (trigger && trigger.parentNode) return trigger.parentNode;
287
- return trigger;
288
- },
289
- "notFoundContent": renderNotFount(record.loading),
290
- "onChange": (e) => handleChange(e, record),
291
- "options": record.loading ? [] : record?.valueEnum || []
292
- }, fields), null);
293
- break;
294
- case "treeSelect":
295
- baseSelect = createVNode(TreeSelect, mergeProps({
296
- "style": { width: "100%" },
297
- "value": formState[record.name],
298
- "placeholder": record.placeholder || "请选择",
299
- "allowClear": record.allowClear ?? true,
300
- "treeData": record.loading ? [] : record.valueEnum || [],
301
- "getPopupContainer": (trigger) => {
302
- if (trigger && trigger.parentNode) return trigger.parentNode;
303
- return trigger;
304
- },
305
- "notFoundContent": renderNotFount(record.loading),
306
- "onChange": (e) => handleChange(e, record)
307
- }, fields), null);
308
- break;
309
- case "date":
310
- show = createVNode(DatePicker, mergeProps({
311
- "style": { width: "100%" },
312
- "value": formState[record.name] ? dayjs(formState[record.name]) : void 0,
313
- "getPopupContainer": (trigger) => {
314
- if (trigger && trigger.parentNode) return trigger.parentNode;
315
- return trigger;
316
- },
317
- "placeholder": record.placeholder || "请选择",
318
- "allowClear": record.allowClear ?? true,
319
- "format": valueFormater(record.valueFormat, record.showTime),
320
- "showTime": record.showTime,
321
- "showToday": record.showToday || true,
322
- "onChange": (e) => handleChange(e, record)
323
- }, fields), null);
324
- break;
325
- case "dateWeek":
326
- show = createVNode(WeekPicker, mergeProps({
327
- "style": { width: "100%" },
328
- "value": formState[record.name] ? dayjs(formState[record.name], record.valueFormat || "YYYY-wo") : void 0,
329
- "getPopupContainer": (trigger) => {
330
- if (trigger && trigger.parentNode) return trigger.parentNode;
331
- return trigger;
332
- },
333
- "allowClear": record.allowClear ?? true,
334
- "placeholder": record.placeholder || "请选择",
335
- "onChange": (e) => handleChange(e, record)
336
- }, fields), null);
337
- break;
338
- case "dateMonth":
339
- show = createVNode(MonthPicker, mergeProps({
340
- "style": { width: "100%" },
341
- "value": formState[record.name] ? dayjs(formState[record.name], record.valueFormat || "YYYY-MM") : void 0,
342
- "getPopupContainer": (trigger) => {
343
- if (trigger && trigger.parentNode) return trigger.parentNode;
344
- return trigger;
345
- },
346
- "allowClear": record.allowClear ?? true,
347
- "placeholder": record.placeholder || "请选择",
348
- "onChange": (e) => handleChange(e, record)
349
- }, fields), null);
350
- break;
351
- case "dateQuarter":
352
- show = createVNode(QuarterPicker, mergeProps({
353
- "style": { width: "100%" },
354
- "value": formState[record.name] ? dayjs(formState[record.name], record.valueFormat || "YYYY-QQ") : void 0,
355
- "getPopupContainer": (trigger) => {
356
- if (trigger && trigger.parentNode) return trigger.parentNode;
357
- return trigger;
358
- },
359
- "allowClear": record.allowClear ?? true,
360
- "placeholder": record.placeholder || "请选择",
361
- "onChange": (e) => handleChange(e, record)
362
- }, fields), null);
363
- break;
364
- case "dateYear":
365
- show = createVNode(YearPicker, mergeProps({
366
- "style": { width: "100%" },
367
- "value": formState[record.name] ? dayjs(formState[record.name], record.valueFormat || "YYYY") : void 0,
368
- "getPopupContainer": (trigger) => {
369
- if (trigger && trigger.parentNode) return trigger.parentNode;
370
- return trigger;
371
- },
372
- "allowClear": record.allowClear ?? true,
373
- "placeholder": record.placeholder || "请选择",
374
- "onChange": (e) => handleChange(e, record)
375
- }, fields), null);
376
- break;
377
- case "dateRange":
378
- show = createVNode(RangePicker, mergeProps({
379
- "style": { width: "100%" },
380
- "value": formState[record.name] && isArray(formState[record.name]) && formState[record.name]?.length === 2 ? dateArrayFormatter(formState[record.name], valueFormater(record.valueFormat, record.showTime), "dayjs") : void 0,
381
- "getPopupContainer": (trigger) => {
382
- if (trigger && trigger.parentNode) return trigger.parentNode;
383
- return trigger;
384
- },
385
- "placeholder": record.placeholder || ["开始日期", "结束日期"],
386
- "format": valueFormater(record.valueFormat, record.showTime),
387
- "showTime": record.showTime,
388
- "onChange": (e) => handleChange(e, record)
389
- }, fields), null);
390
- break;
391
- case "time":
392
- show = createVNode(TimePicker, mergeProps({
393
- "style": { width: "100%" },
394
- "value": formState[record.name] ? dayjs(formState[record.name], record.valueFormat || "HH:mm:ss") : void 0,
395
- "getPopupContainer": (trigger) => {
396
- if (trigger && trigger.parentNode) return trigger.parentNode;
397
- return trigger;
398
- },
399
- "placeholder": record.placeholder || "请选择",
400
- "allowClear": record.allowClear || record.allowClear === false ? record.allowClear : true,
401
- "use12Hours": record.use12Hours,
402
- "format": record.valueFormat || "HH:mm:ss",
403
- "onChange": (e) => handleChange(e, record)
404
- }, fields), null);
405
- break;
406
- }
407
- if (record.valueType && ["select", "treeSelect"].includes(record.valueType)) show = record.request ? renderRequestFormItem(record, baseSelect) : baseSelect;
408
- return show;
409
- };
410
- const FormItemWrapper = ({ formItemStyle = {}, item }) => {
411
- const label = isVNode(item) ? item.props?.label : item.label;
412
- const labelWidth = (isVNode(item) ? item.props?.labelWidth : item.labelWidth) || formItemLabel.value?.width;
413
- const labelAlign = (isVNode(item) ? item.props?.labelAlign : item.labelAlign) || formItemLabel.value?.align;
414
- return createVNode("div", {
415
- "class": classNames$1(`${props.prefixCls}-search-item`, hashId.value, classNames.value?.searchItem),
416
- "style": {
417
- ...formItemStyle,
418
- gap: formItemLabel.value?.gap ? unit(formItemLabel.value?.gap) : void 0,
419
- ...styles.value?.searchItem || {}
420
- }
421
- }, [label && createVNode("div", {
422
- "class": classNames$1(`${props.prefixCls}-search-item-label`, formItemLabel.value?.colon === false && `${props.prefixCls}-search-item-label-no-colon`, labelAlign && `${props.prefixCls}-search-item-label-${labelAlign}`),
423
- "style": { width: labelWidth ? unit(labelWidth) : void 0 }
424
- }, [label]), createVNode("div", { "class": classNames$1(`${props.prefixCls}-search-item-children`) }, [isVNode(item) ? item : FormItemContainer(item)])]);
425
- };
426
- const FormItemRender = () => {
427
- let slotChildren = slots.default?.() || [];
428
- if (slotChildren.length === 1 && slotChildren[0].type === "template") slotChildren = slotChildren[0]?.children || [];
429
- const formNode = sortObjectsByOrder([...props.formCols, ...slotChildren.map((item) => ({
430
- ...item,
431
- order: item.props?.order || void 0
432
- }))]);
433
- const rowWidth = { width: `calc((100% - (${rowLength.value - 1} * ${gap.value})) / ${rowLength.value})` };
434
- return formNode.map((item, index) => {
435
- const formItemStyle = getStyleWidth(index, rowLength.value, rowWidth);
436
- if (formNode.length < rowLength.value || collapsed.value) return createVNode(Fragment, null, [FormItemWrapper({
437
- formItemStyle,
438
- item
439
- }), index === formNode.length - 1 && AdvancedSlot({
440
- formItemStyle: {
441
- flex: 1,
442
- justifyContent: "flex-end"
443
- },
444
- collapsed: collapsed.value,
445
- collapseRender: !!collapsed.value
446
- })]);
447
- else return createVNode(Fragment, null, [
448
- index < rowLength.value - 1 && FormItemWrapper({
449
- formItemStyle,
450
- item
451
- }),
452
- index === rowLength.value - 1 && (rowLength.value - 1 === 0 || formNode.length === rowLength.value) && FormItemWrapper({
453
- formItemStyle,
454
- item
455
- }),
456
- index === rowLength.value - 1 && formNode.length >= rowLength.value && AdvancedSlot({
457
- formItemStyle: {
458
- flex: 1,
459
- justifyContent: "flex-end"
460
- },
461
- collapsed: false,
462
- collapseRender: formNode.length !== rowLength.value
463
- })
464
- ]);
465
- });
466
- };
467
- return () => {
468
- const borderedCls = props.cardBordered && `${props.prefixCls}-search-border`;
469
- return wrapSSR(createVNode("div", {
470
- "class": classNames$1(classNames.value?.search, hashId.value, `${props.prefixCls}-search`, borderedCls, hashId.value, formConfig.value?.className),
471
- "style": styles.value?.search
472
- }, [FormItemRender()]));
473
- };
474
- }
475
- });
476
- var Form_default = ProTableForm;
477
-
478
- //#endregion
479
- export { Form_default as default };
@@ -1,6 +0,0 @@
1
- import { GenerateStyle } from "@gx-design-vue/pro-provider";
2
-
3
- //#region src/components/Form/style.d.ts
4
- declare const genTableFormStyle: GenerateStyle;
5
- //#endregion
6
- export { genTableFormStyle };
@@ -1,9 +0,0 @@
1
- import { Breakpoint } from "@gx-design-vue/pro-utils";
2
-
3
- //#region src/components/Form/utils/config.d.ts
4
- declare const defaultSpans: {
5
- value: Breakpoint;
6
- span: number;
7
- }[];
8
- //#endregion
9
- export { defaultSpans };
@@ -1,30 +0,0 @@
1
- //#region src/components/Form/utils/config.ts
2
- const defaultSpans = [
3
- {
4
- value: "xxl",
5
- span: 4
6
- },
7
- {
8
- value: "xl",
9
- span: 3
10
- },
11
- {
12
- value: "lg",
13
- span: 2
14
- },
15
- {
16
- value: "md",
17
- span: 2
18
- },
19
- {
20
- value: "sm",
21
- span: 2
22
- },
23
- {
24
- value: "xs",
25
- span: 1
26
- }
27
- ];
28
-
29
- //#endregion
30
- export { defaultSpans };
@@ -1,22 +0,0 @@
1
- //#region src/components/Form/utils/dateFormat.d.ts
2
- type FormatType = ((dayjs: any) => string) | string | undefined;
3
- /**
4
- * 通过 format 来格式化日期,因为支持了function 所以需要单独的方法来处理
5
- * @param {any} endText
6
- * @param {FormatType} format
7
- * @return string
8
- */
9
- declare function formatString(endText: any, format: FormatType): string;
10
- declare function valueFormater(valueFormat?: string, showTime?: any): string;
11
- /**
12
- * 格式化区域日期,如果是一个数组,会返回 start ~ end 数组
13
- * @param {any} value
14
- * @param {FormatType | FormatType[]} format
15
- * returns string[] | Dayjs[]
16
- */
17
- declare function dateArrayFormatter(value: any[], format: FormatType | FormatType[] | {
18
- format: string;
19
- type?: 'mask';
20
- }, type?: 'dayjs' | 'string'): any | undefined;
21
- //#endregion
22
- export { dateArrayFormatter, formatString, valueFormater };
@@ -1,45 +0,0 @@
1
- import { isArray } from "@gx-design-vue/pro-utils";
2
- import dayjs from "dayjs";
3
-
4
- //#region src/components/Form/utils/dateFormat.ts
5
- /**
6
- * 通过 format 来格式化日期,因为支持了function 所以需要单独的方法来处理
7
- * @param {any} endText
8
- * @param {FormatType} format
9
- * @return string
10
- */
11
- function formatString(endText, format) {
12
- if (typeof format === "function") return format(dayjs(endText));
13
- return dayjs(endText).format(format);
14
- }
15
- function valueFormater(valueFormat, showTime) {
16
- return showTime ? "YYYY-MM-DD HH:mm:ss" : valueFormat ?? "YYYY-MM-DD";
17
- }
18
- /**
19
- * 格式化区域日期,如果是一个数组,会返回 start ~ end 数组
20
- * @param {any} value
21
- * @param {FormatType | FormatType[]} format
22
- * returns string[] | Dayjs[]
23
- */
24
- function dateArrayFormatter(value, format, type = "string") {
25
- if (isArray(value)) {
26
- const [startText, endText] = value;
27
- let formatFirst;
28
- let formatEnd;
29
- if (Array.isArray(format)) {
30
- formatFirst = format[0];
31
- formatEnd = format[1];
32
- } else if (typeof format === "object" && format.type === "mask") {
33
- formatFirst = format.format;
34
- formatEnd = format.format;
35
- } else {
36
- formatFirst = format;
37
- formatEnd = format;
38
- }
39
- if (type === "string") return [startText ? formatString(startText, formatFirst) : "", endText ? formatString(endText, formatEnd) : ""];
40
- return [dayjs(startText), dayjs(endText)];
41
- }
42
- }
43
-
44
- //#endregion
45
- export { dateArrayFormatter, formatString, valueFormater };
@@ -1,60 +0,0 @@
1
- import { DefaultRender } from "../../types/SlotsTypings.js";
2
- import { ProTableProps, TableActionPlacement } from "../../types/TableTypings.js";
3
- import "../../index.js";
4
- import * as vue192 from "vue";
5
- import { PropType } from "vue";
6
- import { VueNode } from "@gx-design-vue/pro-utils";
7
- import * as vue_jsx_runtime4 from "vue/jsx-runtime";
8
-
9
- //#region src/components/ListToolBar/index.d.ts
10
- interface ListToolBarSetting {
11
- icon: VueNode;
12
- tooltip?: string;
13
- key?: string;
14
- onClick?: (key?: string) => void;
15
- }
16
- declare const ListToolBar: vue192.DefineComponent<vue192.ExtractPropTypes<{
17
- actions: PropType<VueNode[]>;
18
- settings: PropType<VueNode[]>;
19
- headerTitle: {
20
- type: PropType<ProTableProps["headerTitle"]>;
21
- default: () => any;
22
- };
23
- listToolAfter: {
24
- type: PropType<ProTableProps["listToolAfter"]>;
25
- default: () => any;
26
- };
27
- headerTitleTip: {
28
- type: PropType<ProTableProps["headerTitleTip"]>;
29
- default: () => any;
30
- };
31
- titleTipText: {
32
- type: PropType<ProTableProps["titleTipText"]>;
33
- };
34
- actionsPlacement: PropType<TableActionPlacement>;
35
- }>, () => vue_jsx_runtime4.JSX.Element, {}, {}, {}, vue192.ComponentOptionsMixin, vue192.ComponentOptionsMixin, {}, string, vue192.PublicProps, Readonly<vue192.ExtractPropTypes<{
36
- actions: PropType<VueNode[]>;
37
- settings: PropType<VueNode[]>;
38
- headerTitle: {
39
- type: PropType<ProTableProps["headerTitle"]>;
40
- default: () => any;
41
- };
42
- listToolAfter: {
43
- type: PropType<ProTableProps["listToolAfter"]>;
44
- default: () => any;
45
- };
46
- headerTitleTip: {
47
- type: PropType<ProTableProps["headerTitleTip"]>;
48
- default: () => any;
49
- };
50
- titleTipText: {
51
- type: PropType<ProTableProps["titleTipText"]>;
52
- };
53
- actionsPlacement: PropType<TableActionPlacement>;
54
- }>> & Readonly<{}>, {
55
- headerTitle: DefaultRender;
56
- headerTitleTip: DefaultRender;
57
- listToolAfter: DefaultRender;
58
- }, {}, {}, {}, string, vue192.ComponentProvideOptions, true, {}, any>;
59
- //#endregion
60
- export { ListToolBarSetting, ListToolBar as default };