@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.20
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 -493
- package/dist/ProTable.js +844 -512
- package/dist/components/ScrollBar/Bar.d.ts +79 -0
- package/dist/components/ScrollBar/Bar.js +84 -0
- package/dist/components/ScrollBar/Thumb.d.ts +50 -0
- package/dist/components/ScrollBar/{Thumb/index.js → Thumb.js} +67 -58
- package/dist/components/ScrollBar/context.d.ts +3 -4
- package/dist/components/ScrollBar/context.js +3 -5
- package/dist/components/ScrollBar/util.d.ts +6 -5
- package/dist/components/ScrollBar/util.js +1 -14
- package/dist/components/SearchForm/CollapseToggle.d.ts +53 -0
- package/dist/components/SearchForm/CollapseToggle.js +47 -0
- package/dist/components/SearchForm/FormItemContainer.d.ts +73 -0
- package/dist/components/SearchForm/FormItemContainer.js +225 -0
- package/dist/components/SearchForm/FormItemWrapper.d.ts +80 -0
- package/dist/components/SearchForm/FormItemWrapper.js +62 -0
- package/dist/components/SearchForm/SearchForm.d.ts +128 -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 +24 -0
- package/dist/components/Toolbar/FullscreenIcon.js +22 -0
- package/dist/components/Toolbar/ListToolBar.d.ts +109 -0
- package/dist/components/Toolbar/ListToolBar.js +101 -0
- package/dist/components/Toolbar/index.d.ts +101 -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 -5
- 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 +65 -0
- package/dist/hooks/useCellRender.d.ts +13 -0
- package/dist/hooks/useCellRender.js +28 -0
- package/dist/hooks/useColumnResize.d.ts +29 -0
- package/dist/hooks/useColumnResize.js +110 -0
- package/dist/hooks/useColumns.d.ts +35 -24
- package/dist/hooks/useColumns.js +89 -58
- package/dist/hooks/useFetchData.d.ts +42 -65
- package/dist/hooks/useFetchData.js +160 -176
- 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 +27 -11
- package/dist/hooks/usePagination.d.ts +10 -7
- package/dist/hooks/usePagination.js +38 -29
- 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 +93 -80
- package/dist/hooks/useTable.d.ts +35 -77
- package/dist/hooks/useTable.js +76 -49
- package/dist/hooks/useTableForm.d.ts +17 -82
- package/dist/hooks/useTableForm.js +137 -52
- package/dist/hooks/useTableScroll.d.ts +33 -31
- package/dist/hooks/useTableScroll.js +71 -28
- package/dist/hooks/useTableSize.d.ts +17 -7
- package/dist/hooks/useTableSize.js +21 -9
- package/dist/index.d.ts +10 -7
- package/dist/index.js +9 -4
- package/dist/interface.d.ts +499 -0
- package/dist/interface.js +1 -0
- package/dist/pro-table.esm.js +3251 -3909
- package/dist/pro-table.js +1 -1
- package/dist/style/fit-page.d.ts +4 -2
- package/dist/style/fit-page.js +10 -5
- package/dist/style/index.d.ts +3 -7
- package/dist/style/index.js +34 -76
- package/dist/style/list.d.ts +4 -2
- package/dist/style/list.js +2 -12
- 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 +9 -9
- package/dist/style/search.d.ts +8 -0
- package/dist/{components/Form/style.js → style/search.js} +22 -9
- package/dist/theme/augment.d.ts +8 -0
- package/dist/theme/augment.js +1 -0
- package/dist/theme/interface/components.d.ts +8 -0
- package/dist/theme/interface/components.js +1 -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 +21 -11
- package/dist/components/Form/components/RequestSelect.d.ts +0 -50
- package/dist/components/Form/components/RequestSelect.js +0 -58
- package/dist/components/Form/hooks/useForm.d.ts +0 -11
- package/dist/components/Form/hooks/useForm.js +0 -32
- package/dist/components/Form/index.d.ts +0 -33
- package/dist/components/Form/index.js +0 -479
- 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 -30
- package/dist/components/Form/utils/dateFormat.d.ts +0 -22
- package/dist/components/Form/utils/dateFormat.js +0 -45
- package/dist/components/ListToolBar/index.d.ts +0 -60
- 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 -71
- package/dist/components/ScrollBar/Bar/props.d.ts +0 -25
- package/dist/components/ScrollBar/Bar/props.js +0 -18
- 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 -18
- package/dist/components/TableCell/index.d.ts +0 -37
- package/dist/components/TableCell/index.js +0 -72
- package/dist/components/ToolBar/FullscreenIcon.d.ts +0 -7
- package/dist/components/ToolBar/FullscreenIcon.js +0 -14
- package/dist/components/ToolBar/index.d.ts +0 -34
- package/dist/components/ToolBar/index.js +0 -100
- package/dist/hooks/tryOnActivated.d.ts +0 -6
- package/dist/hooks/tryOnActivated.js +0 -14
- package/dist/hooks/useDebounceFn.d.ts +0 -8
- package/dist/hooks/useDebounceFn.js +0 -34
- package/dist/hooks/useScrollArea.d.ts +0 -24
- package/dist/hooks/useScrollArea.js +0 -104
- package/dist/props.d.ts +0 -340
- package/dist/props.js +0 -251
- package/dist/types/ColumnTypings.d.ts +0 -129
- package/dist/types/ColumnTypings.js +0 -1
- package/dist/types/SlotsTypings.d.ts +0 -63
- package/dist/types/SlotsTypings.js +0 -13
- package/dist/types/TableTypings.d.ts +0 -359
- package/dist/types/TableTypings.js +0 -1
- package/dist/types/index.d.ts +0 -9
- package/dist/types/index.js +0 -1
- package/dist/utils/utils.d.ts +0 -10
- package/dist/utils/utils.js +0 -91
package/dist/style/index.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import { genToolbarStyle } from "../components/Toolbar/style.js";
|
|
1
2
|
import { genProTableFitPage } from "./fit-page.js";
|
|
2
3
|
import { genProTableList } from "./list.js";
|
|
4
|
+
import { genProTableResizable } from "./resizable.js";
|
|
3
5
|
import { genProTableScroll } from "./scroll.js";
|
|
4
|
-
|
|
6
|
+
import { genProTableSearch } from "./search.js";
|
|
7
|
+
import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
|
|
5
8
|
//#region src/style/index.ts
|
|
6
9
|
const genProTableStyle = (token) => {
|
|
7
10
|
return { [token.componentCls]: {
|
|
11
|
+
[`${token.componentCls}-content`]: {
|
|
12
|
+
display: "flex",
|
|
13
|
+
flexDirection: "column"
|
|
14
|
+
},
|
|
8
15
|
[`${token.componentCls}-card`]: { [`${token.antCls}-table-pagination${token.antCls}-pagination`]: {
|
|
9
16
|
margin: 0,
|
|
10
17
|
marginTop: token.margin
|
|
@@ -20,35 +27,26 @@ const genProTableStyle = (token) => {
|
|
|
20
27
|
justifyContent: "center",
|
|
21
28
|
marginBlock: token.marginXL
|
|
22
29
|
},
|
|
23
|
-
"&-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
30
|
+
"&-loading-container": { position: "relative" },
|
|
31
|
+
"&-loading-mask": {
|
|
32
|
+
position: "absolute",
|
|
33
|
+
inset: 0,
|
|
34
|
+
display: "flex",
|
|
35
|
+
alignItems: "center",
|
|
36
|
+
justifyContent: "center",
|
|
37
|
+
backgroundColor: `color-mix(in srgb, ${token.colorBgContainer} 50%, transparent)`,
|
|
38
|
+
zIndex: 10
|
|
39
|
+
},
|
|
33
40
|
"&-full-screen": { [`${token.componentCls}-content`]: {
|
|
34
41
|
height: "100% !important",
|
|
35
42
|
padding: 24,
|
|
36
43
|
backgroundColor: token.colorWhite,
|
|
37
44
|
boxShadow: "0 4px 8px #0003, 0 6px 20px #00000030 !important"
|
|
38
45
|
} },
|
|
39
|
-
"&-no-scroll": {
|
|
40
|
-
[`${token.antCls}-table`]: { table: {
|
|
41
|
-
width: "100% !important",
|
|
42
|
-
minWidth: "unset"
|
|
43
|
-
} },
|
|
44
|
-
[`${token.antCls}-table-ping-right:not(${token.antCls}-table-has-fix-right)`]: { [`${token.antCls}-table-container::after`]: { boxShadow: "none" } },
|
|
45
|
-
[`${token.antCls}-table-bordered ${token.antCls}-table-fixed-left ${token.antCls}-table-thead > tr > th`]: { "&:last-child": { borderRight: 0 } },
|
|
46
|
-
[`${token.antCls}-table-bordered ${token.antCls}-table-fixed-left ${token.antCls}-table-tbody > tr > td`]: { "&:last-child": { borderRight: 0 } }
|
|
47
|
-
},
|
|
48
46
|
[`&-card-border`]: {
|
|
49
47
|
paddingInline: token.paddingMD,
|
|
50
48
|
paddingBlock: token.paddingMD,
|
|
51
|
-
border: `${token.lineWidth}
|
|
49
|
+
border: `${token.lineWidth} ${token.lineType} ${token.colorSplit}`,
|
|
52
50
|
borderRadius: token.borderRadiusLG,
|
|
53
51
|
backgroundColor: token.colorBgContainer,
|
|
54
52
|
[`${token.antCls}-table-wrapper ${token.antCls}-table-pagination${token.antCls}-pagination`]: { marginBottom: 0 }
|
|
@@ -62,62 +60,22 @@ const genProTableStyle = (token) => {
|
|
|
62
60
|
cursor: "pointer"
|
|
63
61
|
}
|
|
64
62
|
},
|
|
65
|
-
[`${token.componentCls}-ellipsis`]: {
|
|
66
|
-
overflow: "hidden",
|
|
67
|
-
textOverflow: "ellipsis",
|
|
68
|
-
display: "-webkit-box",
|
|
69
|
-
"-webkit-box-orient": "vertical",
|
|
70
|
-
"word-break": "break-word"
|
|
71
|
-
},
|
|
72
63
|
[`${token.componentCls}-action-size`]: { display: "inline-block" },
|
|
73
|
-
[`${token.componentCls}-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
width: "100%",
|
|
79
|
-
alignItems: "center",
|
|
80
|
-
"&:first-child": { paddingTop: 0 },
|
|
81
|
-
"&:last-child": { paddingBottom: 4 },
|
|
82
|
-
"&:hover": {
|
|
83
|
-
backgroundColor: "#e6f7ff",
|
|
84
|
-
[`${token.componentCls}-action-columns-list-item-actions`]: { display: "block" }
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
[`${token.antCls}-tree ${token.antCls}-tree-node-content-wrapper`]: {
|
|
88
|
-
flex: "1",
|
|
89
|
-
"&:hover": { backgroundColor: "transparent" }
|
|
90
|
-
},
|
|
91
|
-
"&-popover-title": {
|
|
92
|
-
display: "flex",
|
|
93
|
-
alignItems: "center",
|
|
94
|
-
justifyContent: "space-between",
|
|
95
|
-
"&-check": { marginRight: 8 },
|
|
96
|
-
[`${token.antCls}-btn-sm`]: { padding: 0 }
|
|
97
|
-
},
|
|
98
|
-
"&-list-group": {
|
|
99
|
-
marginTop: 6,
|
|
100
|
-
marginBottom: 6,
|
|
101
|
-
fontSize: 12,
|
|
102
|
-
color: "rgba(0, 0, 0, 0.45)"
|
|
103
|
-
},
|
|
104
|
-
"$-list-item": {
|
|
105
|
-
display: "flex",
|
|
106
|
-
alignItems: "center",
|
|
107
|
-
justifyContent: "space-between",
|
|
108
|
-
"&-actions": {
|
|
109
|
-
display: "block",
|
|
110
|
-
float: "right",
|
|
111
|
-
cursor: "pointer",
|
|
112
|
-
"> span + span": { marginLeft: 8 },
|
|
113
|
-
"&-disabled": { "action": { color: "rgba(0, 0, 0, 0.25)" } },
|
|
114
|
-
"anticon": { color: token.colorPrimary }
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
[`${token.antCls}-tooltip-inner`]: { a: { color: token.colorWhite } }
|
|
64
|
+
[`${token.componentCls}-a`]: {
|
|
65
|
+
color: token.colorPrimary,
|
|
66
|
+
cursor: "pointer",
|
|
67
|
+
"&:hover": { color: token.colorPrimaryHover }
|
|
68
|
+
}
|
|
119
69
|
} };
|
|
120
70
|
};
|
|
121
|
-
|
|
71
|
+
var style_default = proGenStyleHooks("ProTable", (token) => [
|
|
72
|
+
genProTableStyle(token),
|
|
73
|
+
genProTableList(token),
|
|
74
|
+
genProTableScroll(token),
|
|
75
|
+
genProTableFitPage(token),
|
|
76
|
+
genProTableResizable(token),
|
|
77
|
+
genProTableSearch(token),
|
|
78
|
+
genToolbarStyle(token)
|
|
79
|
+
]);
|
|
122
80
|
//#endregion
|
|
123
|
-
export {
|
|
81
|
+
export { style_default as default };
|
package/dist/style/list.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ProFullToken } from "@gx-design-vue/pro-provider";
|
|
2
|
+
import { CSSObject } from "@antdv-next/cssinjs";
|
|
3
|
+
import { GenerateStyle } from "antdv-next/dist/theme/internal";
|
|
2
4
|
|
|
3
5
|
//#region src/style/list.d.ts
|
|
4
|
-
declare const genProTableList: GenerateStyle
|
|
6
|
+
declare const genProTableList: GenerateStyle<ProFullToken<'ProTable'>, CSSObject>;
|
|
5
7
|
//#endregion
|
|
6
8
|
export { genProTableList };
|
package/dist/style/list.js
CHANGED
|
@@ -3,18 +3,8 @@ const genProTableList = (token) => {
|
|
|
3
3
|
return { [token.componentCls]: { [`${token.componentCls}-list`]: {
|
|
4
4
|
clear: "both",
|
|
5
5
|
maxWidth: "100%",
|
|
6
|
-
[`${token.componentCls}-pagination${token.antCls}-pagination`]: { marginTop: token.margin }
|
|
7
|
-
[`${token.componentCls}-pagination`]: {
|
|
8
|
-
display: "flex",
|
|
9
|
-
flexWrap: "wrap",
|
|
10
|
-
rowGap: token.paddingXS,
|
|
11
|
-
"> *": { flex: "none" },
|
|
12
|
-
"&-left": { justifyContent: "flex-start" },
|
|
13
|
-
"&-center": { justifyContent: "center" },
|
|
14
|
-
"&-right": { justifyContent: "flex-end" }
|
|
15
|
-
}
|
|
6
|
+
[`${token.componentCls}-pagination${token.antCls}-pagination`]: { marginTop: token.margin }
|
|
16
7
|
} } };
|
|
17
8
|
};
|
|
18
|
-
|
|
19
9
|
//#endregion
|
|
20
|
-
export { genProTableList };
|
|
10
|
+
export { genProTableList };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ProFullToken } from "@gx-design-vue/pro-provider";
|
|
2
|
+
import { CSSObject } from "@antdv-next/cssinjs";
|
|
3
|
+
import { GenerateStyle } from "antdv-next/dist/theme/internal";
|
|
4
|
+
|
|
5
|
+
//#region src/style/resizable.d.ts
|
|
6
|
+
declare const genProTableResizable: GenerateStyle<ProFullToken<'ProTable'>, CSSObject>;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { genProTableResizable };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/style/resizable.ts
|
|
2
|
+
const genProTableResizable = (token) => {
|
|
3
|
+
return { [token.componentCls]: {
|
|
4
|
+
".resizable-title": { position: "relative" },
|
|
5
|
+
".resizable-handle": {
|
|
6
|
+
position: "absolute",
|
|
7
|
+
top: 0,
|
|
8
|
+
right: -5,
|
|
9
|
+
width: 10,
|
|
10
|
+
height: "100%",
|
|
11
|
+
cursor: "col-resize",
|
|
12
|
+
userSelect: "none",
|
|
13
|
+
zIndex: 1
|
|
14
|
+
}
|
|
15
|
+
} };
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
export { genProTableResizable };
|
package/dist/style/scroll.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ProFullToken } from "@gx-design-vue/pro-provider";
|
|
2
|
+
import { CSSObject } from "@antdv-next/cssinjs";
|
|
3
|
+
import { GenerateStyle } from "antdv-next/dist/theme/internal";
|
|
2
4
|
|
|
3
5
|
//#region src/style/scroll.d.ts
|
|
4
|
-
declare const genProTableScroll: GenerateStyle
|
|
6
|
+
declare const genProTableScroll: GenerateStyle<ProFullToken<'ProTable'>, CSSObject>;
|
|
5
7
|
//#endregion
|
|
6
8
|
export { genProTableScroll };
|
package/dist/style/scroll.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { unit } from "@gx-design-vue/pro-provider";
|
|
3
2
|
//#region src/style/scroll.ts
|
|
3
|
+
function withAlpha(color, alpha) {
|
|
4
|
+
return `color-mix(in srgb, ${color} ${alpha * 100}%, transparent)`;
|
|
5
|
+
}
|
|
4
6
|
function scrollBarStyle() {
|
|
5
7
|
return {
|
|
6
8
|
scrollbarWidth: "none",
|
|
@@ -11,8 +13,8 @@ function scrollBarStyle() {
|
|
|
11
13
|
};
|
|
12
14
|
}
|
|
13
15
|
const genProTableScroll = (token) => {
|
|
14
|
-
const color =
|
|
15
|
-
const colorHover =
|
|
16
|
+
const color = withAlpha(token.colorText, .2);
|
|
17
|
+
const colorHover = withAlpha(token.colorText, .4);
|
|
16
18
|
return { [token.componentCls]: {
|
|
17
19
|
[`${token.antCls}-table-container`]: { position: "relative" },
|
|
18
20
|
[`${token.componentCls}-scroll`]: {
|
|
@@ -21,7 +23,7 @@ const genProTableScroll = (token) => {
|
|
|
21
23
|
right: 2,
|
|
22
24
|
bottom: 2,
|
|
23
25
|
zIndex: 100,
|
|
24
|
-
borderRadius: token.borderRadius -
|
|
26
|
+
borderRadius: `calc(${unit(token.borderRadius)} - 2px)`,
|
|
25
27
|
"&.is-vertical": {
|
|
26
28
|
top: 2,
|
|
27
29
|
width: 6,
|
|
@@ -49,11 +51,9 @@ const genProTableScroll = (token) => {
|
|
|
49
51
|
}
|
|
50
52
|
}
|
|
51
53
|
},
|
|
52
|
-
[`${token.antCls}-table-content`]: scrollBarStyle(),
|
|
53
54
|
[`${token.antCls}-table-body`]: scrollBarStyle(),
|
|
54
|
-
[`${token.antCls}-table-
|
|
55
|
+
[`${token.antCls}-table-container`]: scrollBarStyle()
|
|
55
56
|
} };
|
|
56
57
|
};
|
|
57
|
-
|
|
58
58
|
//#endregion
|
|
59
|
-
export { genProTableScroll };
|
|
59
|
+
export { genProTableScroll };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ProFullToken } from "@gx-design-vue/pro-provider";
|
|
2
|
+
import { CSSObject } from "@antdv-next/cssinjs";
|
|
3
|
+
import { GenerateStyle } from "antdv-next/dist/theme/internal";
|
|
4
|
+
|
|
5
|
+
//#region src/style/search.d.ts
|
|
6
|
+
declare const genProTableSearch: GenerateStyle<ProFullToken<'ProTable'>, CSSObject>;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { genProTableSearch };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { unit } from "@gx-design-vue/pro-provider";
|
|
2
|
+
//#region src/style/search.ts
|
|
3
|
+
const genProTableSearch = (token) => {
|
|
4
|
+
return { [token.componentCls]: {
|
|
4
5
|
[`${token.componentCls}-search`]: {
|
|
5
6
|
position: "relative",
|
|
6
7
|
display: "flex",
|
|
@@ -9,8 +10,8 @@ const genTableFormStyle = (token) => {
|
|
|
9
10
|
"&-border": {
|
|
10
11
|
paddingInline: token.paddingMD,
|
|
11
12
|
paddingBlock: token.paddingMD,
|
|
12
|
-
paddingBlockEnd: token.paddingMD -
|
|
13
|
-
border: `${token.lineWidth}
|
|
13
|
+
paddingBlockEnd: `calc(${unit(token.paddingMD)} - 16px)`,
|
|
14
|
+
border: `${token.lineWidth} ${token.lineType} ${token.colorSplit}`,
|
|
14
15
|
borderRadius: token.borderRadiusLG,
|
|
15
16
|
marginBottom: token.marginLG,
|
|
16
17
|
backgroundColor: token.colorBgContainer
|
|
@@ -64,6 +65,19 @@ const genTableFormStyle = (token) => {
|
|
|
64
65
|
borderRightWidth: 0,
|
|
65
66
|
backgroundColor: "transparent",
|
|
66
67
|
cursor: "default"
|
|
68
|
+
},
|
|
69
|
+
[`${token.antCls}-input${token.componentCls}-number-range-separator`]: {
|
|
70
|
+
textAlign: "center",
|
|
71
|
+
borderInlineStartWidth: 0,
|
|
72
|
+
borderInlineEndWidth: 0,
|
|
73
|
+
backgroundColor: "transparent",
|
|
74
|
+
color: token.colorTextTertiary,
|
|
75
|
+
cursor: "default",
|
|
76
|
+
[`&:disabled, &${token.antCls}-input-disabled`]: {
|
|
77
|
+
backgroundColor: "transparent",
|
|
78
|
+
color: token.colorTextTertiary,
|
|
79
|
+
cursor: "default"
|
|
80
|
+
}
|
|
67
81
|
}
|
|
68
82
|
},
|
|
69
83
|
"&-label": {
|
|
@@ -72,7 +86,7 @@ const genTableFormStyle = (token) => {
|
|
|
72
86
|
content: "\":\"",
|
|
73
87
|
position: "relative",
|
|
74
88
|
marginBlock: 0,
|
|
75
|
-
marginInlineStart: token.marginXXS / 2
|
|
89
|
+
marginInlineStart: `calc(${unit(token.marginXXS)} / 2)`,
|
|
76
90
|
marginInlineEnd: token.marginXS
|
|
77
91
|
},
|
|
78
92
|
[`&${token.componentCls}-search-item-label-no-colon::after`]: { content: "\" \"" },
|
|
@@ -89,8 +103,7 @@ const genTableFormStyle = (token) => {
|
|
|
89
103
|
justifyContent: "center",
|
|
90
104
|
alignItems: "center"
|
|
91
105
|
}
|
|
92
|
-
};
|
|
106
|
+
} };
|
|
93
107
|
};
|
|
94
|
-
|
|
95
108
|
//#endregion
|
|
96
|
-
export {
|
|
109
|
+
export { genProTableSearch };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
|
|
3
|
+
//#region src/utils/dateFormat.d.ts
|
|
4
|
+
type DateFormatType = ((day: dayjs.Dayjs) => string) | string | undefined;
|
|
5
|
+
declare function formatStringValue(value: any, format: DateFormatType): string;
|
|
6
|
+
declare function resolveValueFormat(valueFormat?: string, showTime?: boolean | Record<string, any>): string;
|
|
7
|
+
declare function formatDateRangeArray(values: any[], format: DateFormatType | DateFormatType[], type?: 'dayjs' | 'string'): any[] | undefined;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { formatDateRangeArray, formatStringValue, resolveValueFormat };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
//#region src/utils/dateFormat.ts
|
|
3
|
+
function formatStringValue(value, format) {
|
|
4
|
+
if (typeof format === "function") return format(dayjs(value));
|
|
5
|
+
return dayjs(value).format(format);
|
|
6
|
+
}
|
|
7
|
+
function resolveValueFormat(valueFormat, showTime) {
|
|
8
|
+
return showTime ? "YYYY-MM-DD HH:mm:ss" : valueFormat ?? "YYYY-MM-DD";
|
|
9
|
+
}
|
|
10
|
+
function formatDateRangeArray(values, format, type = "string") {
|
|
11
|
+
if (!Array.isArray(values) || values.length !== 2) return;
|
|
12
|
+
const [startText, endText] = values;
|
|
13
|
+
let formatFirst;
|
|
14
|
+
let formatEnd;
|
|
15
|
+
if (Array.isArray(format)) {
|
|
16
|
+
formatFirst = format[0];
|
|
17
|
+
formatEnd = format[1];
|
|
18
|
+
} else if (typeof format === "object" && format !== void 0) {
|
|
19
|
+
formatFirst = format.format;
|
|
20
|
+
formatEnd = format.format;
|
|
21
|
+
} else {
|
|
22
|
+
formatFirst = format;
|
|
23
|
+
formatEnd = format;
|
|
24
|
+
}
|
|
25
|
+
if (type === "dayjs") return [dayjs(startText), dayjs(endText)];
|
|
26
|
+
return [startText ? formatStringValue(startText, formatFirst) : "", endText ? formatStringValue(endText, formatEnd) : ""];
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { formatDateRangeArray, formatStringValue, resolveValueFormat };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
//#region src/utils/formConstants.ts
|
|
2
|
+
const DEFAULT_BREAKPOINT_SPANS = [
|
|
3
|
+
{
|
|
4
|
+
breakpoint: "xxl",
|
|
5
|
+
span: 4
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
breakpoint: "xl",
|
|
9
|
+
span: 3
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
breakpoint: "lg",
|
|
13
|
+
span: 2
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
breakpoint: "md",
|
|
17
|
+
span: 2
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
breakpoint: "sm",
|
|
21
|
+
span: 2
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
breakpoint: "xs",
|
|
25
|
+
span: 1
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
//#endregion
|
|
29
|
+
export { DEFAULT_BREAKPOINT_SPANS };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ProColumnsValueType } from "../interface.js";
|
|
2
|
+
|
|
3
|
+
//#region src/utils/valueFormat.d.ts
|
|
4
|
+
interface ValueFormatOptions {
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare function valueFormat(value: any, valueType: ProColumnsValueType | undefined, options?: ValueFormatOptions): any;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { ValueFormatOptions, valueFormat };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { h } from "vue";
|
|
2
|
+
import { isNil, isObject } from "@gx-design-vue/pro-utils";
|
|
3
|
+
import dayjs from "dayjs";
|
|
4
|
+
//#region src/utils/valueFormat.ts
|
|
5
|
+
function valueFormat(value, valueType, options = {}) {
|
|
6
|
+
if (isNil(value) || value === "") return value;
|
|
7
|
+
if (!valueType || valueType === "text") return value;
|
|
8
|
+
if (isObject(valueType) && !Array.isArray(valueType)) {
|
|
9
|
+
const config = valueType;
|
|
10
|
+
const tagName = config.node ?? "span";
|
|
11
|
+
return h(tagName === "a" ? "span" : tagName, {
|
|
12
|
+
class: config.class,
|
|
13
|
+
...config.attr ?? {},
|
|
14
|
+
...config.click ? { onClick: config.click } : {}
|
|
15
|
+
}, value);
|
|
16
|
+
}
|
|
17
|
+
switch (valueType) {
|
|
18
|
+
case "link": return h("span", { class: [`${options.className}-a`] }, value);
|
|
19
|
+
case "time": return dayjs(value).format("HH:mm:ss");
|
|
20
|
+
case "dateMonth": return `${dayjs(value).month() + 1}月`;
|
|
21
|
+
case "date": return dayjs(value).format("YYYY-MM-DD");
|
|
22
|
+
case "dateTime": return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
|
|
23
|
+
default: return value;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
export { valueFormat };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gx-design-vue/pro-table",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.0-alpha.
|
|
4
|
+
"version": "0.2.0-alpha.20",
|
|
5
5
|
"description": "Gx Design Pro Table",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "gx12358",
|
|
@@ -37,20 +37,30 @@
|
|
|
37
37
|
"package.json"
|
|
38
38
|
],
|
|
39
39
|
"peerDependencies": {
|
|
40
|
+
"@antdv-next/cssinjs": "^1.0.6",
|
|
41
|
+
"@gx-design-vue/context": "^0.0.5-alpha.7",
|
|
42
|
+
"@gx-design-vue/icon": "^0.0.1-alpha.12",
|
|
43
|
+
"@gx-design-vue/pro-hooks": "^0.2.0-alpha.7",
|
|
44
|
+
"@gx-design-vue/pro-provider": "^0.1.0-alpha.16",
|
|
45
|
+
"@gx-design-vue/pro-utils": "^0.2.0-alpha.9",
|
|
46
|
+
"antdv-next": "^1.4.0",
|
|
40
47
|
"vue": ">=3.2.0"
|
|
41
48
|
},
|
|
42
49
|
"dependencies": {
|
|
43
|
-
"@ant-design/icons-vue": "^7.0.1",
|
|
44
50
|
"@ctrl/tinycolor": "^3.5.0",
|
|
45
|
-
"@vueuse/core": "^14.
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"@
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"@gx-design-vue/
|
|
51
|
+
"@vueuse/core": "^14.3.0",
|
|
52
|
+
"dayjs": "^1.11.21",
|
|
53
|
+
"es-toolkit": "1.48.1"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@antdv-next/cssinjs": "^1.0.6",
|
|
57
|
+
"antdv-next": "^1.4.0",
|
|
58
|
+
"vue": "^3.5.38",
|
|
59
|
+
"@gx-design-vue/icon": "^0.0.1-alpha.12",
|
|
60
|
+
"@gx-design-vue/context": "^0.0.5-alpha.7",
|
|
61
|
+
"@gx-design-vue/pro-hooks": "^0.2.0-alpha.7",
|
|
62
|
+
"@gx-design-vue/pro-provider": "^0.1.0-alpha.16",
|
|
63
|
+
"@gx-design-vue/pro-utils": "^0.2.0-alpha.9"
|
|
54
64
|
},
|
|
55
65
|
"browserslist": [
|
|
56
66
|
"> 1%",
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { ProSchemaValueEnumType } from "../../../types/ColumnTypings.js";
|
|
2
|
-
import * as vue199 from "vue";
|
|
3
|
-
import { PropType } from "vue";
|
|
4
|
-
|
|
5
|
-
//#region src/components/Form/components/RequestSelect.d.ts
|
|
6
|
-
declare const _default: vue199.DefineComponent<vue199.ExtractPropTypes<{
|
|
7
|
-
fetch: PropType<() => Promise<ProSchemaValueEnumType[]>>;
|
|
8
|
-
loading: {
|
|
9
|
-
type: PropType<boolean>;
|
|
10
|
-
default: boolean;
|
|
11
|
-
};
|
|
12
|
-
debounceTime: PropType<number>;
|
|
13
|
-
manual: {
|
|
14
|
-
type: PropType<boolean>;
|
|
15
|
-
default: any;
|
|
16
|
-
};
|
|
17
|
-
fieldName: {
|
|
18
|
-
type: PropType<string>;
|
|
19
|
-
default: string;
|
|
20
|
-
};
|
|
21
|
-
notFoundContent: {
|
|
22
|
-
type: PropType<(loading: boolean) => any>;
|
|
23
|
-
};
|
|
24
|
-
}>, () => vue199.VNode<vue199.RendererNode, vue199.RendererElement, {
|
|
25
|
-
[key: string]: any;
|
|
26
|
-
}>, {}, {}, {}, vue199.ComponentOptionsMixin, vue199.ComponentOptionsMixin, {}, string, vue199.PublicProps, Readonly<vue199.ExtractPropTypes<{
|
|
27
|
-
fetch: PropType<() => Promise<ProSchemaValueEnumType[]>>;
|
|
28
|
-
loading: {
|
|
29
|
-
type: PropType<boolean>;
|
|
30
|
-
default: boolean;
|
|
31
|
-
};
|
|
32
|
-
debounceTime: PropType<number>;
|
|
33
|
-
manual: {
|
|
34
|
-
type: PropType<boolean>;
|
|
35
|
-
default: any;
|
|
36
|
-
};
|
|
37
|
-
fieldName: {
|
|
38
|
-
type: PropType<string>;
|
|
39
|
-
default: string;
|
|
40
|
-
};
|
|
41
|
-
notFoundContent: {
|
|
42
|
-
type: PropType<(loading: boolean) => any>;
|
|
43
|
-
};
|
|
44
|
-
}>> & Readonly<{}>, {
|
|
45
|
-
loading: boolean;
|
|
46
|
-
manual: boolean;
|
|
47
|
-
fieldName: string;
|
|
48
|
-
}, {}, {}, {}, string, vue199.ComponentProvideOptions, true, {}, any>;
|
|
49
|
-
//#endregion
|
|
50
|
-
export { _default as default };
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { cloneVNode, defineComponent, ref, watch } from "vue";
|
|
2
|
-
import { isArray } from "@gx-design-vue/pro-utils";
|
|
3
|
-
import { useDebounceFn } from "@vueuse/core";
|
|
4
|
-
import { cloneDeep as cloneDeep$1 } from "es-toolkit";
|
|
5
|
-
|
|
6
|
-
//#region src/components/Form/components/RequestSelect.tsx
|
|
7
|
-
var RequestSelect_default = /* @__PURE__ */ defineComponent({
|
|
8
|
-
name: "RequestSelect",
|
|
9
|
-
props: {
|
|
10
|
-
fetch: Function,
|
|
11
|
-
loading: {
|
|
12
|
-
type: Boolean,
|
|
13
|
-
default: false
|
|
14
|
-
},
|
|
15
|
-
debounceTime: Number,
|
|
16
|
-
manual: {
|
|
17
|
-
type: Boolean,
|
|
18
|
-
default: void 0
|
|
19
|
-
},
|
|
20
|
-
fieldName: {
|
|
21
|
-
type: String,
|
|
22
|
-
default: "options"
|
|
23
|
-
},
|
|
24
|
-
notFoundContent: { type: Function }
|
|
25
|
-
},
|
|
26
|
-
setup(props, { slots }) {
|
|
27
|
-
const options = ref([]);
|
|
28
|
-
const loading = ref(props.loading);
|
|
29
|
-
const status = ref("init");
|
|
30
|
-
const debouncedFn = useDebounceFn(props.fetch, props.debounceTime || 10);
|
|
31
|
-
watch([() => props.fetch, () => props.manual], () => {
|
|
32
|
-
if (status.value !== "init" && loading.value) return;
|
|
33
|
-
const manual = props.manual ?? false;
|
|
34
|
-
if (props.fetch && !manual) {
|
|
35
|
-
loading.value = true;
|
|
36
|
-
debouncedFn().then((result) => {
|
|
37
|
-
options.value = cloneDeep$1(result);
|
|
38
|
-
status.value = "success";
|
|
39
|
-
}).catch((e) => {
|
|
40
|
-
console.error(e);
|
|
41
|
-
status.value = "error";
|
|
42
|
-
}).finally(() => {
|
|
43
|
-
loading.value = false;
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
}, { immediate: true });
|
|
47
|
-
return () => {
|
|
48
|
-
const children = slots.default?.();
|
|
49
|
-
return cloneVNode(isArray(children) ? children[0] : children, {
|
|
50
|
-
options: options.value,
|
|
51
|
-
notFoundContent: props.notFoundContent?.(loading.value)
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
//#endregion
|
|
58
|
-
export { RequestSelect_default as default };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { ProSearchMap } from "../../../types/ColumnTypings.js";
|
|
2
|
-
import { Ref } from "vue";
|
|
3
|
-
|
|
4
|
-
//#region src/components/Form/hooks/useForm.d.ts
|
|
5
|
-
declare function useForm(defaultState: Ref<any>, searchMap: Ref<ProSearchMap[]>): {
|
|
6
|
-
formState: any;
|
|
7
|
-
resetFormState: () => void;
|
|
8
|
-
changeFormState: (key: string, value: any) => void;
|
|
9
|
-
};
|
|
10
|
-
//#endregion
|
|
11
|
-
export { useForm };
|