@aloudata/aloudata-design 0.4.0-beta.6 → 0.4.0-beta.8
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/es/Avatar/component/Avatar/index.d.ts +84 -0
- package/es/Avatar/component/Avatar/index.js +42 -0
- package/es/Avatar/index.d.ts +1 -13
- package/es/Avatar/index.js +1 -30
- package/es/Avatar/style/index.less +1 -1
- package/es/Button/index.d.ts +1 -1
- package/es/Button/index.js +3 -8
- package/es/Button/style/index.less +7 -1
- package/es/Button/style/variables.less +26 -26
- package/es/Checkbox/component/CheckboxGroup/index.d.ts +4 -0
- package/es/Checkbox/component/CheckboxGroup/index.js +27 -0
- package/es/Checkbox/index.d.ts +4 -5
- package/es/Checkbox/index.js +3 -12
- package/es/Checkbox/style/index.less +36 -12
- package/es/Checkbox/type.d.ts +94 -0
- package/es/Checkbox/type.js +6 -0
- package/es/Divider/index.d.ts +40 -2
- package/es/Divider/index.js +10 -1
- package/es/Divider/style/index.less +4 -0
- package/es/Divider/style/index.less.d.ts +183 -0
- package/es/Icon/icons.js +135 -58
- package/es/Input/components/Input/index.d.ts +13 -1
- package/es/Input/components/Input/index.js +1 -3
- package/es/Input/components/Password/index.d.ts +6 -1
- package/es/Input/components/Password/index.js +11 -3
- package/es/Input/components/TextArea/index.d.ts +1 -1
- package/es/Input/style/index.less +139 -59
- package/es/InputNumber/index.d.ts +3 -3
- package/es/InputNumber/style/index.less +66 -26
- package/es/InputNumber/type.d.ts +161 -0
- package/es/InputNumber/type.js +1 -0
- package/es/Steps/style/index.less +10 -4
- package/es/Table/Table.js +31 -23
- package/es/Table/components/TableHead/index.d.ts +0 -1
- package/es/Table/components/TableHead/index.js +1 -2
- package/es/Table/interface.d.ts +1 -0
- package/es/Table/style/index.less +2 -1
- package/es/Table/utils.js +16 -9
- package/es/Tabs/style/index.less +1 -1
- package/es/Tooltip/style/index.less +1 -1
- package/es/index.d.ts +3 -3
- package/es/style/themes/default/scrollBar.less +10 -7
- package/es/style/themes/default/themeColor.module.less +164 -166
- package/lib/Avatar/component/Avatar/index.d.ts +84 -0
- package/lib/Avatar/component/Avatar/index.js +61 -0
- package/lib/Avatar/index.d.ts +1 -13
- package/lib/Avatar/index.js +3 -44
- package/lib/Avatar/style/index.less +1 -1
- package/lib/Button/index.d.ts +1 -1
- package/lib/Button/index.js +3 -8
- package/lib/Button/style/index.less +7 -1
- package/lib/Button/style/variables.less +26 -26
- package/lib/Checkbox/component/CheckboxGroup/index.d.ts +4 -0
- package/lib/Checkbox/component/CheckboxGroup/index.js +42 -0
- package/lib/Checkbox/index.d.ts +4 -5
- package/lib/Checkbox/index.js +4 -13
- package/lib/Checkbox/style/index.less +36 -12
- package/lib/Checkbox/type.d.ts +94 -0
- package/lib/Checkbox/type.js +13 -0
- package/lib/Divider/index.d.ts +40 -2
- package/lib/Divider/index.js +11 -1
- package/lib/Divider/style/index.less +4 -0
- package/lib/Divider/style/index.less.d.ts +183 -0
- package/lib/Icon/icons.js +135 -58
- package/lib/Input/components/Input/index.d.ts +13 -1
- package/lib/Input/components/Input/index.js +1 -3
- package/lib/Input/components/Password/index.d.ts +6 -1
- package/lib/Input/components/Password/index.js +14 -4
- package/lib/Input/components/TextArea/index.d.ts +1 -1
- package/lib/Input/style/index.less +139 -59
- package/lib/InputNumber/index.d.ts +3 -3
- package/lib/InputNumber/style/index.less +66 -26
- package/lib/InputNumber/type.d.ts +161 -0
- package/lib/InputNumber/type.js +5 -0
- package/lib/Steps/style/index.less +10 -4
- package/lib/Table/Table.js +31 -23
- package/lib/Table/components/TableHead/index.d.ts +0 -1
- package/lib/Table/components/TableHead/index.js +1 -2
- package/lib/Table/interface.d.ts +1 -0
- package/lib/Table/style/index.less +2 -1
- package/lib/Table/utils.js +16 -9
- package/lib/Tabs/style/index.less +1 -1
- package/lib/Tooltip/style/index.less +1 -1
- package/lib/index.d.ts +3 -3
- package/lib/style/themes/default/scrollBar.less +10 -7
- package/lib/style/themes/default/themeColor.module.less +164 -166
- package/package.json +2 -2
- package/es/Table/hooks/useTableColumn.d.ts +0 -28
- package/es/Table/hooks/useTableColumn.js +0 -53
- package/lib/Table/hooks/useTableColumn.d.ts +0 -28
- package/lib/Table/hooks/useTableColumn.js +0 -66
|
@@ -3,98 +3,98 @@
|
|
|
3
3
|
* 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
|
|
4
4
|
**/
|
|
5
5
|
@NL0: #101828;
|
|
6
|
-
@NL97: fade(@NL0, 3%)
|
|
7
|
-
@NL95
|
|
8
|
-
@NL90: #
|
|
9
|
-
@NL80: #
|
|
10
|
-
@NL70: #
|
|
11
|
-
@NL60: #
|
|
12
|
-
@NL50: #
|
|
6
|
+
@NL97: fade(@NL0, 3%); //TODO: 版本升级后,删除NL97;新版无此色号
|
|
7
|
+
@NL95: #fcfcfd;
|
|
8
|
+
@NL90: #f9fafb;
|
|
9
|
+
@NL80: #f2f4f7;
|
|
10
|
+
@NL70: #eaecf0;
|
|
11
|
+
@NL60: #d0d5dd;
|
|
12
|
+
@NL50: #98a2b3;
|
|
13
13
|
@NL40: #667085;
|
|
14
14
|
@NL30: #475467;
|
|
15
15
|
@NL20: #344054;
|
|
16
|
-
@NL10: #
|
|
16
|
+
@NL10: #1d2939;
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
*中性深色背景 Neutral Dark
|
|
20
20
|
* 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
|
|
21
21
|
**/
|
|
22
|
-
@ND0: #
|
|
23
|
-
@ND97: fade(@ND0, 3%)
|
|
24
|
-
@ND95
|
|
25
|
-
@ND90: #
|
|
22
|
+
@ND0: #fcfcfd;
|
|
23
|
+
@ND97: fade(@ND0, 3%); //TODO: 版本升级后,删除ND97;新版无此色号
|
|
24
|
+
@ND95: #101828;
|
|
25
|
+
@ND90: #1d2939;
|
|
26
26
|
@ND80: #344054;
|
|
27
27
|
@ND70: #475467;
|
|
28
28
|
@ND60: #667085;
|
|
29
|
-
@ND50: #
|
|
30
|
-
@ND40: #
|
|
31
|
-
@ND30: #
|
|
32
|
-
@ND20: #
|
|
33
|
-
@ND10: #
|
|
29
|
+
@ND50: #98a2b3;
|
|
30
|
+
@ND40: #d0d5dd;
|
|
31
|
+
@ND30: #eaecf0;
|
|
32
|
+
@ND20: #f2f4f7;
|
|
33
|
+
@ND10: #f9fafb;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* 品牌色 Brand
|
|
37
37
|
* 主色调是你的 "品牌 "颜色,用于所有互动元素,如按钮、链接、输入等。这种颜色可以定义整体感觉,并能引起人们的情感。
|
|
38
38
|
**/
|
|
39
39
|
@B10: #194185;
|
|
40
|
-
@B20: #
|
|
41
|
-
@B30: #
|
|
42
|
-
@B40: #
|
|
43
|
-
@B50: #
|
|
44
|
-
@B60: #
|
|
45
|
-
@B70: #
|
|
46
|
-
@B80: #
|
|
47
|
-
@B90: #
|
|
48
|
-
@B95: #
|
|
49
|
-
@B98: #
|
|
40
|
+
@B20: #1849a9;
|
|
41
|
+
@B30: #175cd3;
|
|
42
|
+
@B40: #1570ef;
|
|
43
|
+
@B50: #2e90fa;
|
|
44
|
+
@B60: #53b1fd;
|
|
45
|
+
@B70: #84caff;
|
|
46
|
+
@B80: #b2ddff;
|
|
47
|
+
@B90: #d1e9ff;
|
|
48
|
+
@B95: #eff8ff;
|
|
49
|
+
@B98: #f5faff;
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
52
|
* 辅助A Secondary A
|
|
53
53
|
* 绿色传达了一个积极的行动,积极的趋势,或成功的确认。
|
|
54
54
|
**/
|
|
55
|
-
@SA10: #
|
|
56
|
-
@SA20: #
|
|
57
|
-
@SA30: #
|
|
55
|
+
@SA10: #054f31;
|
|
56
|
+
@SA20: #05603a;
|
|
57
|
+
@SA30: #027a48;
|
|
58
58
|
@SA40: #039855;
|
|
59
|
-
@SA50: #
|
|
60
|
-
@SA60: #
|
|
61
|
-
@SA70: #
|
|
62
|
-
@SA80: #
|
|
63
|
-
@SA90: #
|
|
64
|
-
@SA95: #
|
|
65
|
-
@SA98: #
|
|
59
|
+
@SA50: #12b76a;
|
|
60
|
+
@SA60: #32d583;
|
|
61
|
+
@SA70: #6ce9a6;
|
|
62
|
+
@SA80: #a6f4c5;
|
|
63
|
+
@SA90: #d1fadf;
|
|
64
|
+
@SA95: #ecfdf3;
|
|
65
|
+
@SA98: #f6fef9;
|
|
66
66
|
|
|
67
67
|
/**
|
|
68
68
|
* 辅助B Secondary B
|
|
69
69
|
* 橙色可以传达一个警示信号。这些颜色通常被用于提醒,以抓住用户的注意力。
|
|
70
70
|
**/
|
|
71
|
-
@SB10: #
|
|
72
|
-
@SB20: #
|
|
73
|
-
@SB30: #
|
|
74
|
-
@SB40: #
|
|
75
|
-
@SB50: #
|
|
76
|
-
@SB60: #
|
|
77
|
-
@SB70: #
|
|
78
|
-
@SB80: #
|
|
79
|
-
@SB90: #
|
|
80
|
-
@SB95: #
|
|
81
|
-
@SB98: #
|
|
71
|
+
@SB10: #7a2e0e;
|
|
72
|
+
@SB20: #93370d;
|
|
73
|
+
@SB30: #b54708;
|
|
74
|
+
@SB40: #dc6803;
|
|
75
|
+
@SB50: #f79009;
|
|
76
|
+
@SB60: #fdb022;
|
|
77
|
+
@SB70: #fec84b;
|
|
78
|
+
@SB80: #fedf89;
|
|
79
|
+
@SB90: #fef0c7;
|
|
80
|
+
@SB95: #fffaeb;
|
|
81
|
+
@SB98: #fffcf5;
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
84
|
* 辅助C Secondary C
|
|
85
85
|
* 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动,例如将一个用户从你的团队中删除。
|
|
86
86
|
**/
|
|
87
|
-
@SC10: #
|
|
87
|
+
@SC10: #7a271a;
|
|
88
88
|
@SC20: #912018;
|
|
89
|
-
@SC30: #
|
|
90
|
-
@SC40: #
|
|
91
|
-
@SC50: #
|
|
92
|
-
@SC60: #
|
|
93
|
-
@SC70: #
|
|
94
|
-
@SC80: #
|
|
95
|
-
@SC90: #
|
|
96
|
-
@SC95: #
|
|
97
|
-
@SC98: #
|
|
89
|
+
@SC30: #b42318;
|
|
90
|
+
@SC40: #d92d20;
|
|
91
|
+
@SC50: #f04438;
|
|
92
|
+
@SC60: #f97066;
|
|
93
|
+
@SC70: #fda29b;
|
|
94
|
+
@SC80: #fecdca;
|
|
95
|
+
@SC90: #fee4e2;
|
|
96
|
+
@SC95: #fef3f2;
|
|
97
|
+
@SC98: #fffbfa;
|
|
98
98
|
|
|
99
99
|
/**
|
|
100
100
|
* 背景色 Background
|
|
@@ -102,162 +102,160 @@
|
|
|
102
102
|
**/
|
|
103
103
|
@BG0: #000000;
|
|
104
104
|
@BG10: #101828;
|
|
105
|
-
@BG20: #
|
|
105
|
+
@BG20: #1d2939;
|
|
106
106
|
@BG30: #475467;
|
|
107
107
|
@BG40: #667085;
|
|
108
|
-
@BG50: #
|
|
109
|
-
@BG60: #
|
|
110
|
-
@BG70: #
|
|
111
|
-
@BG80: #
|
|
112
|
-
@BG90: #
|
|
113
|
-
@BG95: #
|
|
114
|
-
@BG97: #
|
|
115
|
-
@BG100
|
|
116
|
-
|
|
108
|
+
@BG50: #98a2b3;
|
|
109
|
+
@BG60: #d0d5dd;
|
|
110
|
+
@BG70: #eaecf0;
|
|
111
|
+
@BG80: #f2f4f7;
|
|
112
|
+
@BG90: #f5f6f7;
|
|
113
|
+
@BG95: #f9fafb;
|
|
114
|
+
@BG97: #fcfcfd;
|
|
115
|
+
@BG100: #ffffff;
|
|
117
116
|
|
|
118
117
|
/***
|
|
119
118
|
* 投影
|
|
120
119
|
***/
|
|
121
|
-
@shadow-L: 0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05),
|
|
120
|
+
@shadow-L: 0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05),
|
|
121
|
+
0px 24px 38px rgba(0, 26, 51, 0.03);
|
|
122
122
|
@shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
|
|
123
123
|
@shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
124
124
|
@shadow-md: 0px 4px 6px -2px rgba(16, 24, 40, 0.08), 0px 2px 4px -2px rgba(16, 24, 40, 0.03);
|
|
125
125
|
@shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.06), 0px 1px 2px rgba(16, 24, 40, 0.04);
|
|
126
126
|
@shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
127
127
|
@shadow-body-top-left: -4px -4px 2px rgba(0, 0, 0, 0.05);
|
|
128
|
-
|
|
129
|
-
// 业务颜色
|
|
128
|
+
@shadow-primary:0px 0px 0px 4px rgba(21, 111, 238, 0.12);
|
|
129
|
+
// 业务颜色
|
|
130
130
|
// 除了原色之外,在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用,而主要颜色应该占优先地位。
|
|
131
131
|
|
|
132
132
|
/**
|
|
133
133
|
* 业务A (Tertiary A)
|
|
134
134
|
**/
|
|
135
135
|
|
|
136
|
-
@TA10: #
|
|
136
|
+
@TA10: #2b4212;
|
|
137
137
|
@TA20: #335015;
|
|
138
|
-
@TA30: #
|
|
139
|
-
@TA40: #
|
|
140
|
-
@TA50: #
|
|
141
|
-
@TA60: #
|
|
142
|
-
@TA70: #
|
|
143
|
-
@TA80: #
|
|
144
|
-
@TA90: #
|
|
145
|
-
@TA95: #
|
|
146
|
-
@TA98: #
|
|
147
|
-
|
|
138
|
+
@TA30: #3f611a;
|
|
139
|
+
@TA40: #4f7a21;
|
|
140
|
+
@TA50: #669f2a;
|
|
141
|
+
@TA60: #86cb3c;
|
|
142
|
+
@TA70: #acdc79;
|
|
143
|
+
@TA80: #cdeaaf;
|
|
144
|
+
@TA90: #e6f4d7;
|
|
145
|
+
@TA95: #f5fbee;
|
|
146
|
+
@TA98: #fafdf7;
|
|
148
147
|
|
|
149
148
|
/**
|
|
150
149
|
* 业务B (Tertiary B)
|
|
151
150
|
**/
|
|
152
151
|
|
|
153
|
-
@TB10: #
|
|
154
|
-
@TB20: #
|
|
155
|
-
@TB30: #
|
|
156
|
-
@TB40: #
|
|
157
|
-
@TB50: #
|
|
158
|
-
@TB60: #
|
|
159
|
-
@TB70: #
|
|
160
|
-
@TB80: #
|
|
161
|
-
@TB90: #
|
|
162
|
-
@TB95: #
|
|
163
|
-
@TB98: #
|
|
152
|
+
@TB10: #134e48;
|
|
153
|
+
@TB20: #125d56;
|
|
154
|
+
@TB30: #0f7569;
|
|
155
|
+
@TB40: #0e9384;
|
|
156
|
+
@TB50: #15b79e;
|
|
157
|
+
@TB60: #2ed2b7;
|
|
158
|
+
@TB70: #5ee9cf;
|
|
159
|
+
@TB80: #99f6e0;
|
|
160
|
+
@TB90: #ccfbef;
|
|
161
|
+
@TB95: #f0fdf9;
|
|
162
|
+
@TB98: #f6fefc;
|
|
164
163
|
|
|
165
164
|
/**
|
|
166
165
|
* 业务C (Tertiary C)
|
|
167
166
|
**/
|
|
168
167
|
|
|
169
168
|
@TC10: #013743;
|
|
170
|
-
@TC20: #
|
|
171
|
-
@TC30: #
|
|
172
|
-
@TC40: #
|
|
173
|
-
@TC50: #
|
|
174
|
-
@TC60: #
|
|
175
|
-
@TC70: #
|
|
176
|
-
@TC80: #
|
|
177
|
-
@TC90: #
|
|
178
|
-
@TC95: #
|
|
179
|
-
@TC98: #
|
|
169
|
+
@TC20: #024d5e;
|
|
170
|
+
@TC30: #036e86;
|
|
171
|
+
@TC40: #0386a4;
|
|
172
|
+
@TC50: #049bbd;
|
|
173
|
+
@TC60: #05aed4;
|
|
174
|
+
@TC70: #72c0dd;
|
|
175
|
+
@TC80: #a1d2e6;
|
|
176
|
+
@TC90: #c5e2ee;
|
|
177
|
+
@TC95: #e4f0f6;
|
|
178
|
+
@TC98: #f1f8fb;
|
|
180
179
|
|
|
181
180
|
/**
|
|
182
181
|
* 业务D (Tertiary D)
|
|
183
182
|
**/
|
|
184
183
|
|
|
185
|
-
@TD10: #
|
|
186
|
-
@TD20: #
|
|
187
|
-
@TD30: #
|
|
188
|
-
@TD40: #
|
|
189
|
-
@TD50: #
|
|
190
|
-
@TD60: #
|
|
191
|
-
@TD70: #
|
|
192
|
-
@TD80: #
|
|
193
|
-
@TD90: #
|
|
194
|
-
@TD95: #
|
|
195
|
-
@TD98: #
|
|
184
|
+
@TD10: #2d3282;
|
|
185
|
+
@TD20: #2d31a5;
|
|
186
|
+
@TD30: #3537cc;
|
|
187
|
+
@TD40: #444ce7;
|
|
188
|
+
@TD50: #6071f3;
|
|
189
|
+
@TD60: #7f98f9;
|
|
190
|
+
@TD70: #a3bbfd;
|
|
191
|
+
@TD80: #c7d7fe;
|
|
192
|
+
@TD90: #e0eaff;
|
|
193
|
+
@TD95: #eef4ff;
|
|
194
|
+
@TD98: #f5f8ff;
|
|
196
195
|
|
|
197
196
|
/**
|
|
198
197
|
* 业务E (Tertiary E)
|
|
199
198
|
**/
|
|
200
199
|
|
|
201
|
-
@TE10: #
|
|
200
|
+
@TE10: #271b47;
|
|
202
201
|
@TE20: #382765;
|
|
203
|
-
@TE30: #
|
|
204
|
-
@TE40: #
|
|
205
|
-
@TE50: #
|
|
206
|
-
@TE60: #
|
|
207
|
-
@TE70: #
|
|
208
|
-
@TE80: #
|
|
209
|
-
@TE90: #
|
|
210
|
-
@TE95: #
|
|
211
|
-
@TE98: #
|
|
202
|
+
@TE30: #4f378f;
|
|
203
|
+
@TE40: #6144af;
|
|
204
|
+
@TE50: #704ecb;
|
|
205
|
+
@TE60: #7e58e3;
|
|
206
|
+
@TE70: #a08ae8;
|
|
207
|
+
@TE80: #bcafee;
|
|
208
|
+
@TE90: #d4cdf4;
|
|
209
|
+
@TE95: #eae7f9;
|
|
210
|
+
@TE98: #f5f3fc;
|
|
212
211
|
|
|
213
212
|
/**
|
|
214
213
|
* 业务F (Tertiary F)
|
|
215
214
|
**/
|
|
216
215
|
|
|
217
|
-
@TF10: #
|
|
216
|
+
@TF10: #6e1876;
|
|
218
217
|
@TF20: #821890;
|
|
219
|
-
@TF30: #
|
|
220
|
-
@TF40: #
|
|
221
|
-
@TF50: #
|
|
222
|
-
@TF60: #
|
|
223
|
-
@TF70: #
|
|
224
|
-
@TF80: #
|
|
225
|
-
@TF90: #
|
|
226
|
-
@TF95: #
|
|
227
|
-
@TF98: #
|
|
218
|
+
@TF30: #9f1ab0;
|
|
219
|
+
@TF40: #ba24d5;
|
|
220
|
+
@TF50: #d444f1;
|
|
221
|
+
@TF60: #e477fa;
|
|
222
|
+
@TF70: #edaafc;
|
|
223
|
+
@TF80: #f6d0fe;
|
|
224
|
+
@TF90: #fbe8ff;
|
|
225
|
+
@TF95: #fdf4ff;
|
|
226
|
+
@TF98: #fefaff;
|
|
228
227
|
|
|
229
228
|
/**
|
|
230
229
|
* 业务G (Tertiary G)
|
|
231
230
|
**/
|
|
232
231
|
|
|
233
232
|
@TG10: #851651;
|
|
234
|
-
@TG20: #
|
|
235
|
-
@TG30: #
|
|
236
|
-
@TG40: #
|
|
237
|
-
@TG50: #
|
|
238
|
-
@TG60: #
|
|
239
|
-
@TG70: #
|
|
240
|
-
@TG80: #
|
|
241
|
-
@TG90: #
|
|
242
|
-
@TG95: #
|
|
243
|
-
@TG98: #
|
|
233
|
+
@TG20: #9e155e;
|
|
234
|
+
@TG30: #c01573;
|
|
235
|
+
@TG40: #dc2590;
|
|
236
|
+
@TG50: #ee46bc;
|
|
237
|
+
@TG60: #f570c7;
|
|
238
|
+
@TG70: #f9a7df;
|
|
239
|
+
@TG80: #fcceee;
|
|
240
|
+
@TG90: #fce7f6;
|
|
241
|
+
@TG95: #fdf2fa;
|
|
242
|
+
@TG98: #fef6fb;
|
|
244
243
|
|
|
245
244
|
/**
|
|
246
245
|
* 业务H (Tertiary H)
|
|
247
246
|
**/
|
|
248
247
|
|
|
249
|
-
@TH10: #
|
|
250
|
-
@TH20: #
|
|
251
|
-
@TH30: #
|
|
252
|
-
@TH40: #
|
|
253
|
-
@TH50: #
|
|
254
|
-
@TH60: #
|
|
255
|
-
@TH70: #
|
|
256
|
-
@TH80: #
|
|
257
|
-
@TH90: #
|
|
258
|
-
@TH95: #
|
|
259
|
-
@TH98: #
|
|
260
|
-
|
|
248
|
+
@TH10: #713b11;
|
|
249
|
+
@TH20: #85490d;
|
|
250
|
+
@TH30: #a15b06;
|
|
251
|
+
@TH40: #ca8403;
|
|
252
|
+
@TH50: #eaa907;
|
|
253
|
+
@TH60: #fac414;
|
|
254
|
+
@TH70: #fde272;
|
|
255
|
+
@TH80: #feee94;
|
|
256
|
+
@TH90: #fdf7c3;
|
|
257
|
+
@TH95: #fefbe8;
|
|
258
|
+
@TH98: #fefdf0;
|
|
261
259
|
|
|
262
260
|
// 用css module的能力,将less变量输出给js,供js文件中使用
|
|
263
261
|
:export {
|
|
@@ -343,7 +341,7 @@
|
|
|
343
341
|
BG97: @BG97;
|
|
344
342
|
BG100: @BG100;
|
|
345
343
|
SHADOW_L: @shadow-L;
|
|
346
|
-
SHADOW_BODY_TOP_LEFT
|
|
344
|
+
SHADOW_BODY_TOP_LEFT: @shadow-body-top-left;
|
|
347
345
|
SHADOW_XS: @shadow-xs;
|
|
348
346
|
SHADOW_SM: @shadow-sm;
|
|
349
347
|
SHADOW_MD: @shadow-md;
|
|
@@ -359,7 +357,7 @@
|
|
|
359
357
|
TA80: @TA80;
|
|
360
358
|
TA90: @TA90;
|
|
361
359
|
TA95: @TA95;
|
|
362
|
-
TA98: @TA98;
|
|
360
|
+
TA98: @TA98;
|
|
363
361
|
|
|
364
362
|
TB10: @TB10;
|
|
365
363
|
TB20: @TB20;
|
|
@@ -371,7 +369,7 @@
|
|
|
371
369
|
TB80: @TB80;
|
|
372
370
|
TB90: @TB90;
|
|
373
371
|
TB95: @TB95;
|
|
374
|
-
TB98: @TB98;
|
|
372
|
+
TB98: @TB98;
|
|
375
373
|
|
|
376
374
|
TC10: @TC10;
|
|
377
375
|
TC20: @TC20;
|
|
@@ -383,7 +381,7 @@
|
|
|
383
381
|
TC80: @TC80;
|
|
384
382
|
TC90: @TC90;
|
|
385
383
|
TC95: @TC95;
|
|
386
|
-
TC98: @TC98;
|
|
384
|
+
TC98: @TC98;
|
|
387
385
|
|
|
388
386
|
TD10: @TD10;
|
|
389
387
|
TD20: @TD20;
|
|
@@ -395,7 +393,7 @@
|
|
|
395
393
|
TD80: @TD80;
|
|
396
394
|
TD90: @TD90;
|
|
397
395
|
TD95: @TD95;
|
|
398
|
-
TD98: @TD98;
|
|
396
|
+
TD98: @TD98;
|
|
399
397
|
|
|
400
398
|
TE10: @TE10;
|
|
401
399
|
TE20: @TE20;
|
|
@@ -407,7 +405,7 @@
|
|
|
407
405
|
TE80: @TE80;
|
|
408
406
|
TE90: @TE90;
|
|
409
407
|
TE95: @TE95;
|
|
410
|
-
TE98: @TE98;
|
|
408
|
+
TE98: @TE98;
|
|
411
409
|
|
|
412
410
|
TF10: @TF10;
|
|
413
411
|
TF20: @TF20;
|
|
@@ -419,7 +417,7 @@
|
|
|
419
417
|
TF80: @TF80;
|
|
420
418
|
TF90: @TF90;
|
|
421
419
|
TF95: @TF95;
|
|
422
|
-
TF98: @TF98;
|
|
420
|
+
TF98: @TF98;
|
|
423
421
|
|
|
424
422
|
TG10: @TG10;
|
|
425
423
|
TG20: @TG20;
|
|
@@ -431,7 +429,7 @@
|
|
|
431
429
|
TG80: @TG80;
|
|
432
430
|
TG90: @TG90;
|
|
433
431
|
TG95: @TG95;
|
|
434
|
-
TG98: @TG98;
|
|
432
|
+
TG98: @TG98;
|
|
435
433
|
|
|
436
434
|
TH10: @TH10;
|
|
437
435
|
TH20: @TH20;
|
|
@@ -443,5 +441,5 @@
|
|
|
443
441
|
TH80: @TH80;
|
|
444
442
|
TH90: @TH90;
|
|
445
443
|
TH95: @TH95;
|
|
446
|
-
TH98: @TH98;
|
|
447
|
-
}
|
|
444
|
+
TH98: @TH98;
|
|
445
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aloudata/aloudata-design",
|
|
3
|
-
"version": "0.4.0-beta.
|
|
3
|
+
"version": "0.4.0-beta.8",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "dumi dev",
|
|
6
6
|
"docs:build": "dumi build",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
]
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@aloudata/icons-react": "^0.0.
|
|
55
|
+
"@aloudata/icons-react": "^0.0.12",
|
|
56
56
|
"@ant-design/icons": "^4.7.0",
|
|
57
57
|
"antd": "^4.23.5",
|
|
58
58
|
"babel-preset-react-app": "^10.0.1",
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IColumn } from '../interface';
|
|
3
|
-
import { IWidthDetail } from '../utils';
|
|
4
|
-
import { Cell } from 'react-table';
|
|
5
|
-
import 'react-table/node_modules/@types/react';
|
|
6
|
-
interface IUseTableColumnProps<T> {
|
|
7
|
-
columnsWidthMapRef: React.MutableRefObject<Map<string, IWidthDetail> | undefined>;
|
|
8
|
-
columnsTotalWidthRef: React.MutableRefObject<number>;
|
|
9
|
-
columnsRef: React.MutableRefObject<IColumn<T>[]>;
|
|
10
|
-
tableClientWidth: number;
|
|
11
|
-
sortable?: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare function useTableColumn<T extends object = {}>(props: IUseTableColumnProps<T>): {
|
|
14
|
-
width: number | undefined;
|
|
15
|
-
Header: string | (() => null);
|
|
16
|
-
disableSortBy: boolean;
|
|
17
|
-
accessor: string;
|
|
18
|
-
Cell: ({ row, value }: Cell) => any;
|
|
19
|
-
title: string | null;
|
|
20
|
-
dataIndex: string;
|
|
21
|
-
render?: ((value: any, row: T, index: number) => React.ReactNode) | undefined;
|
|
22
|
-
minWidth?: number | undefined;
|
|
23
|
-
sorter?: boolean | "string" | "number" | "basic" | "datetime" | "alphanumeric" | undefined;
|
|
24
|
-
sortOrder?: false | "ascend" | "descend" | undefined;
|
|
25
|
-
sortDirections?: ("ascend" | "descend")[] | undefined;
|
|
26
|
-
selected?: boolean | undefined;
|
|
27
|
-
}[];
|
|
28
|
-
export default useTableColumn;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { useMemo } from 'react';
|
|
8
|
-
import { getColumnsWidthMap } from '../utils';
|
|
9
|
-
import message from '../../message';
|
|
10
|
-
import 'react-table/node_modules/@types/react';
|
|
11
|
-
|
|
12
|
-
function useTableColumn(props) {
|
|
13
|
-
var columnsWidthMapRef = props.columnsWidthMapRef,
|
|
14
|
-
columnsTotalWidthRef = props.columnsTotalWidthRef,
|
|
15
|
-
columnsRef = props.columnsRef,
|
|
16
|
-
tableClientWidth = props.tableClientWidth,
|
|
17
|
-
sortable = props.sortable; // 转换外部传入的columns
|
|
18
|
-
|
|
19
|
-
var newColumns = useMemo(function () {
|
|
20
|
-
var _getColumnsWidthMap = getColumnsWidthMap(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
|
|
21
|
-
columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
|
|
22
|
-
totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
|
|
23
|
-
|
|
24
|
-
columnsWidthMapRef.current = columnsWidthMap;
|
|
25
|
-
columnsTotalWidthRef.current = totalColumnWidth;
|
|
26
|
-
return columnsRef.current.map(function (column, index) {
|
|
27
|
-
var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
|
|
28
|
-
|
|
29
|
-
var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
|
|
30
|
-
|
|
31
|
-
if (!column.dataIndex === undefined && sortable) {
|
|
32
|
-
message.error('不支持未设置dataIndex时进行排序设置');
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return _objectSpread(_objectSpread({}, column), {}, {
|
|
36
|
-
width: (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width,
|
|
37
|
-
Header: column.title ? column.title : function () {
|
|
38
|
-
return null;
|
|
39
|
-
},
|
|
40
|
-
disableSortBy: !sortable || typeof column.sorter === 'boolean',
|
|
41
|
-
accessor: column.dataIndex,
|
|
42
|
-
Cell: function Cell(_ref) {
|
|
43
|
-
var row = _ref.row,
|
|
44
|
-
value = _ref.value;
|
|
45
|
-
return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
}, [columnsRef, columnsTotalWidthRef, columnsWidthMapRef, sortable, tableClientWidth]);
|
|
50
|
-
return newColumns;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export default useTableColumn;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IColumn } from '../interface';
|
|
3
|
-
import { IWidthDetail } from '../utils';
|
|
4
|
-
import { Cell } from 'react-table';
|
|
5
|
-
import 'react-table/node_modules/@types/react';
|
|
6
|
-
interface IUseTableColumnProps<T> {
|
|
7
|
-
columnsWidthMapRef: React.MutableRefObject<Map<string, IWidthDetail> | undefined>;
|
|
8
|
-
columnsTotalWidthRef: React.MutableRefObject<number>;
|
|
9
|
-
columnsRef: React.MutableRefObject<IColumn<T>[]>;
|
|
10
|
-
tableClientWidth: number;
|
|
11
|
-
sortable?: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare function useTableColumn<T extends object = {}>(props: IUseTableColumnProps<T>): {
|
|
14
|
-
width: number | undefined;
|
|
15
|
-
Header: string | (() => null);
|
|
16
|
-
disableSortBy: boolean;
|
|
17
|
-
accessor: string;
|
|
18
|
-
Cell: ({ row, value }: Cell) => any;
|
|
19
|
-
title: string | null;
|
|
20
|
-
dataIndex: string;
|
|
21
|
-
render?: ((value: any, row: T, index: number) => React.ReactNode) | undefined;
|
|
22
|
-
minWidth?: number | undefined;
|
|
23
|
-
sorter?: boolean | "string" | "number" | "basic" | "datetime" | "alphanumeric" | undefined;
|
|
24
|
-
sortOrder?: false | "ascend" | "descend" | undefined;
|
|
25
|
-
sortDirections?: ("ascend" | "descend")[] | undefined;
|
|
26
|
-
selected?: boolean | undefined;
|
|
27
|
-
}[];
|
|
28
|
-
export default useTableColumn;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
|
|
10
|
-
var _utils = require("../utils");
|
|
11
|
-
|
|
12
|
-
var _message = _interopRequireDefault(require("../../message"));
|
|
13
|
-
|
|
14
|
-
require("react-table/node_modules/@types/react");
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
-
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
|
|
22
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
-
|
|
24
|
-
function useTableColumn(props) {
|
|
25
|
-
var columnsWidthMapRef = props.columnsWidthMapRef,
|
|
26
|
-
columnsTotalWidthRef = props.columnsTotalWidthRef,
|
|
27
|
-
columnsRef = props.columnsRef,
|
|
28
|
-
tableClientWidth = props.tableClientWidth,
|
|
29
|
-
sortable = props.sortable; // 转换外部传入的columns
|
|
30
|
-
|
|
31
|
-
var newColumns = (0, _react.useMemo)(function () {
|
|
32
|
-
var _getColumnsWidthMap = (0, _utils.getColumnsWidthMap)(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
|
|
33
|
-
columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
|
|
34
|
-
totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
|
|
35
|
-
|
|
36
|
-
columnsWidthMapRef.current = columnsWidthMap;
|
|
37
|
-
columnsTotalWidthRef.current = totalColumnWidth;
|
|
38
|
-
return columnsRef.current.map(function (column, index) {
|
|
39
|
-
var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
|
|
40
|
-
|
|
41
|
-
var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
|
|
42
|
-
|
|
43
|
-
if (!column.dataIndex === undefined && sortable) {
|
|
44
|
-
_message.default.error('不支持未设置dataIndex时进行排序设置');
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
return _objectSpread(_objectSpread({}, column), {}, {
|
|
48
|
-
width: (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width,
|
|
49
|
-
Header: column.title ? column.title : function () {
|
|
50
|
-
return null;
|
|
51
|
-
},
|
|
52
|
-
disableSortBy: !sortable || typeof column.sorter === 'boolean',
|
|
53
|
-
accessor: column.dataIndex,
|
|
54
|
-
Cell: function Cell(_ref) {
|
|
55
|
-
var row = _ref.row,
|
|
56
|
-
value = _ref.value;
|
|
57
|
-
return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
}, [columnsRef, columnsTotalWidthRef, columnsWidthMapRef, sortable, tableClientWidth]);
|
|
62
|
-
return newColumns;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
var _default = useTableColumn;
|
|
66
|
-
exports.default = _default;
|