@aloudata/aloudata-design 1.6.1 → 1.6.3

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 (21) hide show
  1. package/dist/Button/index.js +3 -3
  2. package/dist/Button/style/index.less +2 -318
  3. package/dist/Button/style/size.less +80 -0
  4. package/dist/Button/style/type.less +235 -0
  5. package/dist/Checkbox/index.js +21 -3
  6. package/dist/Checkbox/type.d.ts +2 -2
  7. package/dist/DataPreviewTable/components/Body/index.js +0 -1
  8. package/dist/DataPreviewTable/hooks/useDirection.js +0 -3
  9. package/dist/DataPreviewTable/index.js +0 -15
  10. package/dist/Form/index.d.ts +6 -2
  11. package/dist/Form/index.js +26 -5
  12. package/dist/Form/style/index.less +23 -18
  13. package/dist/InputNumber/style/index.less +3 -3
  14. package/dist/Menu/style/index.less +1 -1
  15. package/dist/Modal/style/index.less +2 -1
  16. package/dist/Radio/style/index.less +7 -7
  17. package/dist/Select/style/index.less +1 -0
  18. package/dist/Select/style/multiple.less +9 -10
  19. package/dist/Switch/style/index.less +7 -7
  20. package/dist/Tooltip/style/index.less +8 -6
  21. package/package.json +1 -1
package/dist/Button/index.js CHANGED
@@ -19,9 +19,9 @@ import classNames from 'classnames';
19
19
  import React, { useContext } from 'react';
20
20
  import { ConfigContext } from "../ConfigProvider";
21
21
  import SizeContext from "../ConfigProvider/sizeContext";
22
- var ICON_LARGE = 20;
23
- var ICON_MIDDLE = 16;
24
- var ICON_SMALL = 14;
22
+ var ICON_LARGE = 24;
23
+ var ICON_MIDDLE = 20;
24
+ var ICON_SMALL = 16;
25
25
  export var btnPrefix = 'ald-btn';
26
26
  export function getButtonType(buttonType) {
27
27
  if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
package/dist/Button/style/index.less CHANGED
@@ -1,320 +1,4 @@
1
1
  @import '../../style/index.less';
2
2
  @import './variables.less';
3
-
4
- .ant-btn.ald-btn {
5
- &.ald-btn {
6
- // &-loading::before{
7
- // // display: none !important;
8
- // }
9
-
10
- &-primary,
11
- &-dangerous,
12
- &-secondary,
13
- &-text,
14
- &-link {
15
- display: inline-flex;
16
- align-items: center;
17
- justify-content: center;
18
- font-weight: 600;
19
- font-size: 12px;
20
- text-shadow: none;
21
- text-decoration: none;
22
-
23
- /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
24
- &:focus-visible {
25
- outline: none;
26
- }
27
- }
28
-
29
- &.ant-btn-loading::before {
30
- display: none;
31
- }
32
-
33
- &-primary {
34
- color: @button-primary-color;
35
- background-color: @button-primary-bg-color;
36
- border-color: @button-primary-bg-color;
37
- box-shadow: none;
38
-
39
- &:focus {
40
- //text-shadow: @text-shadow;
41
- color: @button-primary-color;
42
- background-color: @button-primary-bg-color;
43
- border-color: @button-primary-bg-color;
44
- box-shadow: none;
45
- }
46
-
47
- &:hover,
48
- &:active {
49
- color: @button-primary-color-active;
50
- background-color: @button-primary-bg-color-active;
51
- border-color: @button-primary-bg-color-active;
52
- }
53
-
54
- &.ant-btn-loading,
55
- &[disabled] {
56
- color: @button-primary-color-disable;
57
- background-color: @button-primary-bg-color-disable;
58
- border-color: @button-primary-bg-color-disable;
59
- cursor: default;
60
- opacity: 0.5;
61
-
62
- &:hover,
63
- &:focus,
64
- &:active {
65
- color: @button-primary-color-disable;
66
- background-color: @button-primary-bg-color-disable;
67
- border-color: @button-primary-bg-color-disable;
68
- }
69
- }
70
- }
71
-
72
- &-dangerous {
73
- color: @button-dangerous-color;
74
- background-color: @button-dangerous-bg-color;
75
- border-color: @button-dangerous-bg-color;
76
- box-shadow: unset;
77
-
78
- &:focus:not(:disabled) {
79
- color: @button-dangerous-color;
80
- background-color: @button-dangerous-bg-color;
81
- border-color: @button-dangerous-bg-color;
82
- box-shadow: unset;
83
- }
84
-
85
- &:hover:not(:disabled),
86
- &:active:not(:disabled) {
87
- color: @button-dangerous-color-active;
88
- background-color: @button-dangerous-bg-color-active;
89
- border-color: @button-dangerous-bg-color-active;
90
- }
91
-
92
- &[disabled],
93
- &.ant-btn-loading {
94
- color: @button-dangerous-color-disable;
95
- background-color: @button-dangerous-bg-color-disable;
96
- border-color: @button-dangerous-bg-color-disable;
97
- cursor: default;
98
- opacity: 0.5;
99
-
100
- &:hover,
101
- &:focus,
102
- &:active {
103
- color: @button-dangerous-color-disable;
104
- background-color: @button-dangerous-bg-color-disable;
105
- border-color: @button-dangerous-bg-color-disable;
106
- }
107
- }
108
- }
109
-
110
- &.ant-btn-circle {
111
- justify-content: center;
112
- padding: 0;
113
- border-radius: 50%;
114
- }
115
-
116
- &-default,
117
- &-secondary {
118
- color: @button-secondary-color;
119
- background-color: @button-secondary-bg-color;
120
- border: 1px solid;
121
- border-color: @button-secondary-border-color;
122
- box-shadow: none;
123
-
124
- &:focus {
125
- color: @button-secondary-color;
126
- //text-shadow: @text-shadow;
127
- background-color: @button-secondary-bg-color;
128
- border-color: @button-secondary-border-color;
129
- box-shadow: none;
130
- }
131
-
132
- &:hover,
133
- &:active {
134
- color: @button-secondary-color-active;
135
- background-color: @button-secondary-bg-color-active;
136
- border-color: @button-secondary-border-color-active;
137
- }
138
-
139
- &[disabled],
140
- &.ant-btn-loading {
141
- color: @button-secondary-color-disable;
142
- background-color: @button-secondary-bg-color-disable;
143
- border-color: @button-secondary-border-color;
144
- cursor: default;
145
- opacity: 0.5;
146
-
147
- &:hover,
148
- &:focus,
149
- &:active {
150
- color: @button-secondary-color-disable;
151
- background-color: @button-secondary-bg-color-disable;
152
- border-color: @button-secondary-border-color;
153
- }
154
- }
155
- }
156
-
157
- &-text {
158
- color: @button-text-color;
159
- background-color: @button-text-bg-color;
160
- border: none;
161
- box-shadow: none;
162
-
163
- &:focus,
164
- &:active {
165
- color: @button-text-color;
166
- background-color: @button-text-bg-color;
167
- box-shadow: none;
168
- }
169
-
170
- &:hover,
171
- &.ant-btn-loading {
172
- color: @button-text-color-active;
173
- background-color: @button-text-bg-color-active;
174
- }
175
-
176
- &[disabled] {
177
- color: @button-text-color-disable;
178
- background-color: @button-text-bg-color-disable;
179
- cursor: default;
180
- opacity: 0.5;
181
-
182
- &:hover,
183
- &:focus,
184
- &:active {
185
- color: @button-text-color-disable;
186
- background-color: @button-text-bg-color-disable;
187
- }
188
- }
189
- }
190
-
191
- &-link {
192
- color: @button-link-color;
193
- font-weight: 400;
194
- //text-shadow: @text-shadow;
195
- background-color: @button-link-bg-color;
196
- border-color: @button-link-bg-color;
197
- box-shadow: none;
198
- padding: 0 !important;
199
-
200
- &:focus {
201
- color: @button-link-color;
202
- font-weight: 400;
203
- //text-shadow: @text-shadow;
204
- background-color: @button-link-bg-color;
205
- border-color: @button-link-bg-color;
206
- box-shadow: none;
207
- }
208
-
209
- &:hover,
210
- &:active {
211
- color: @button-link-color-active;
212
- background-color: @button-link-bg-color-active;
213
- border-color: @button-link-bg-color-active;
214
- }
215
-
216
- &[disabled],
217
- &.ant-btn-loading {
218
- color: @button-link-color-disable;
219
- background-color: @button-link-bg-color-disable;
220
- border-color: @button-link-bg-color-disable;
221
- cursor: default;
222
- opacity: 0.5;
223
-
224
- &:hover,
225
- &:focus,
226
- &:active {
227
- color: @button-link-color-disable;
228
- background-color: @button-link-bg-color-disable;
229
- border-color: @button-link-bg-color-disable;
230
- }
231
- }
232
- }
233
-
234
- &.ant-btn-icon-only {
235
- justify-content: center;
236
- width: initial;
237
- padding: 0;
238
- vertical-align: baseline;
239
- }
240
- }
241
-
242
- &-large {
243
- min-width: auto;
244
- height: @button-height-large;
245
- padding: @button-border-padding-large;
246
- font-size: @button-text-size-large;
247
- line-height: 24px;
248
- border-radius: @button-border-radius-large;
249
-
250
- &.ant-btn-icon-only {
251
- min-width: @button-height-large;
252
- height: @button-height-large;
253
- border-radius: @button-border-radius-large;
254
- }
255
-
256
- &.ant-btn-circle {
257
- min-width: @button-height-large;
258
- height: @button-height-large;
259
- border-radius: 50%;
260
- }
261
-
262
- gap: @button-left-icon-margin-right-large;
263
-
264
- &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
265
- min-width: @button-text-min-width-large;
266
- }
267
- }
268
-
269
- &-middle {
270
- min-width: auto;
271
- height: @button-height-middle;
272
- padding: @button-border-padding-middle;
273
- font-size: @button-text-size-middle;
274
- border-radius: @button-border-radius-middle;
275
-
276
- &.ant-btn-icon-only {
277
- min-width: @button-height-middle;
278
- height: @button-height-middle;
279
- border-radius: @button-border-radius-middle;
280
- }
281
-
282
- &.ant-btn-circle {
283
- min-width: @button-height-middle;
284
- height: @button-height-middle;
285
- border-radius: 50%;
286
- }
287
-
288
- gap: @button-left-icon-margin-right-middle;
289
-
290
- &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
291
- min-width: @button-text-min-width-middle;
292
- }
293
- }
294
-
295
- &-small {
296
- height: @button-height-small;
297
- padding: @button-border-padding-small;
298
- font-size: @button-text-size-small;
299
- line-height: 22px;
300
- border-radius: @button-border-radius-small;
301
-
302
- &.ant-btn-icon-only {
303
- min-width: @button-height-small;
304
- height: @button-height-small;
305
- border-radius: @button-border-radius-small;
306
- }
307
-
308
- &.ant-btn-circle {
309
- min-width: @button-height-small;
310
- height: @button-height-small;
311
- border-radius: 50%;
312
- }
313
-
314
- gap: @button-left-icon-margin-right-small;
315
-
316
- &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
317
- min-width: @button-text-min-width-small;
318
- }
319
- }
320
- }
3
+ @import './type.less';
4
+ @import './size.less';
package/dist/Button/style/size.less ADDED
@@ -0,0 +1,80 @@
1
+ .ald-btn.ald-btn {
2
+ &-large {
3
+ min-width: auto;
4
+ height: @button-height-large;
5
+ padding: @button-border-padding-large;
6
+ font-size: @button-text-size-large;
7
+ line-height: 24px;
8
+ border-radius: @button-border-radius-large;
9
+
10
+ &.ant-btn-icon-only {
11
+ min-width: @button-height-large;
12
+ height: @button-height-large;
13
+ border-radius: @button-border-radius-large;
14
+ }
15
+
16
+ &.ant-btn-circle {
17
+ min-width: @button-height-large;
18
+ height: @button-height-large;
19
+ border-radius: 50%;
20
+ }
21
+
22
+ gap: @button-left-icon-margin-right-large;
23
+
24
+ &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
25
+ min-width: @button-text-min-width-large;
26
+ }
27
+ }
28
+
29
+ &-middle {
30
+ min-width: auto;
31
+ height: @button-height-middle;
32
+ padding: @button-border-padding-middle;
33
+ font-size: @button-text-size-middle;
34
+ border-radius: @button-border-radius-middle;
35
+
36
+ &.ant-btn-icon-only {
37
+ min-width: @button-height-middle;
38
+ height: @button-height-middle;
39
+ border-radius: @button-border-radius-middle;
40
+ }
41
+
42
+ &.ant-btn-circle {
43
+ min-width: @button-height-middle;
44
+ height: @button-height-middle;
45
+ border-radius: 50%;
46
+ }
47
+
48
+ gap: @button-left-icon-margin-right-middle;
49
+
50
+ &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
51
+ min-width: @button-text-min-width-middle;
52
+ }
53
+ }
54
+
55
+ &-small {
56
+ height: @button-height-small;
57
+ padding: @button-border-padding-small;
58
+ font-size: @button-text-size-small;
59
+ line-height: 22px;
60
+ border-radius: @button-border-radius-small;
61
+
62
+ &.ant-btn-icon-only {
63
+ min-width: @button-height-small;
64
+ height: @button-height-small;
65
+ border-radius: @button-border-radius-small;
66
+ }
67
+
68
+ &.ant-btn-circle {
69
+ min-width: @button-height-small;
70
+ height: @button-height-small;
71
+ border-radius: 50%;
72
+ }
73
+
74
+ gap: @button-left-icon-margin-right-small;
75
+
76
+ &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
77
+ min-width: @button-text-min-width-small;
78
+ }
79
+ }
80
+ }
package/dist/Button/style/type.less ADDED
@@ -0,0 +1,235 @@
1
+ .ald-btn.ald-btn {
2
+ &.ald-btn {
3
+ // &-loading::before{
4
+ // // display: none !important;
5
+ // }
6
+
7
+ &-primary,
8
+ &-dangerous,
9
+ &-secondary,
10
+ &-text,
11
+ &-link {
12
+ display: inline-flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ font-weight: 500;
16
+ text-shadow: none;
17
+ text-decoration: none;
18
+
19
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
20
+ &:focus-visible {
21
+ outline: none;
22
+ }
23
+ }
24
+
25
+ &.ant-btn-loading::before {
26
+ display: none;
27
+ }
28
+
29
+ &-primary {
30
+ color: @button-primary-color;
31
+ background-color: @button-primary-bg-color;
32
+ border-color: @button-primary-bg-color;
33
+ box-shadow: none;
34
+
35
+ &:focus {
36
+ //text-shadow: @text-shadow;
37
+ color: @button-primary-color;
38
+ background-color: @button-primary-bg-color;
39
+ border-color: @button-primary-bg-color;
40
+ box-shadow: none;
41
+ }
42
+
43
+ &:hover,
44
+ &:active {
45
+ color: @button-primary-color-active;
46
+ background-color: @button-primary-bg-color-active;
47
+ border-color: @button-primary-bg-color-active;
48
+ }
49
+
50
+ &.ant-btn-loading,
51
+ &[disabled] {
52
+ color: @button-primary-color-disable;
53
+ background-color: @button-primary-bg-color-disable;
54
+ border-color: @button-primary-bg-color-disable;
55
+ cursor: default;
56
+ opacity: 0.5;
57
+
58
+ &:hover,
59
+ &:focus,
60
+ &:active {
61
+ color: @button-primary-color-disable;
62
+ background-color: @button-primary-bg-color-disable;
63
+ border-color: @button-primary-bg-color-disable;
64
+ }
65
+ }
66
+ }
67
+
68
+ &-dangerous {
69
+ color: @button-dangerous-color;
70
+ background-color: @button-dangerous-bg-color;
71
+ border-color: @button-dangerous-bg-color;
72
+ box-shadow: unset;
73
+
74
+ &:focus:not(:disabled) {
75
+ color: @button-dangerous-color;
76
+ background-color: @button-dangerous-bg-color;
77
+ border-color: @button-dangerous-bg-color;
78
+ box-shadow: unset;
79
+ }
80
+
81
+ &:hover:not(:disabled),
82
+ &:active:not(:disabled) {
83
+ color: @button-dangerous-color-active;
84
+ background-color: @button-dangerous-bg-color-active;
85
+ border-color: @button-dangerous-bg-color-active;
86
+ }
87
+
88
+ &[disabled],
89
+ &.ant-btn-loading {
90
+ color: @button-dangerous-color-disable;
91
+ background-color: @button-dangerous-bg-color-disable;
92
+ border-color: @button-dangerous-bg-color-disable;
93
+ cursor: default;
94
+ opacity: 0.5;
95
+
96
+ &:hover,
97
+ &:focus,
98
+ &:active {
99
+ color: @button-dangerous-color-disable;
100
+ background-color: @button-dangerous-bg-color-disable;
101
+ border-color: @button-dangerous-bg-color-disable;
102
+ }
103
+ }
104
+ }
105
+
106
+ &.ant-btn-circle {
107
+ justify-content: center;
108
+ padding: 0;
109
+ border-radius: 50%;
110
+ }
111
+
112
+ &-default,
113
+ &-secondary {
114
+ color: @button-secondary-color;
115
+ background-color: @button-secondary-bg-color;
116
+ border: 1px solid;
117
+ border-color: @button-secondary-border-color;
118
+ box-shadow: none;
119
+
120
+ &:focus {
121
+ color: @button-secondary-color;
122
+ //text-shadow: @text-shadow;
123
+ background-color: @button-secondary-bg-color;
124
+ border-color: @button-secondary-border-color;
125
+ box-shadow: none;
126
+ }
127
+
128
+ &:hover,
129
+ &:active {
130
+ color: @button-secondary-color-active;
131
+ background-color: @button-secondary-bg-color-active;
132
+ border-color: @button-secondary-border-color-active;
133
+ }
134
+
135
+ &[disabled],
136
+ &.ant-btn-loading {
137
+ color: @button-secondary-color-disable;
138
+ background-color: @button-secondary-bg-color-disable;
139
+ border-color: @button-secondary-border-color;
140
+ cursor: default;
141
+ opacity: 0.5;
142
+
143
+ &:hover,
144
+ &:focus,
145
+ &:active {
146
+ color: @button-secondary-color-disable;
147
+ background-color: @button-secondary-bg-color-disable;
148
+ border-color: @button-secondary-border-color;
149
+ }
150
+ }
151
+ }
152
+
153
+ &-text {
154
+ color: @button-text-color;
155
+ background-color: @button-text-bg-color;
156
+ border: none;
157
+ box-shadow: none;
158
+
159
+ &:focus,
160
+ &:active {
161
+ color: @button-text-color;
162
+ background-color: @button-text-bg-color;
163
+ box-shadow: none;
164
+ }
165
+
166
+ &:hover,
167
+ &.ant-btn-loading {
168
+ color: @button-text-color-active;
169
+ background-color: @button-text-bg-color-active;
170
+ }
171
+
172
+ &[disabled] {
173
+ color: @button-text-color-disable;
174
+ background-color: @button-text-bg-color-disable;
175
+ cursor: default;
176
+ opacity: 0.5;
177
+
178
+ &:hover,
179
+ &:focus,
180
+ &:active {
181
+ color: @button-text-color-disable;
182
+ background-color: @button-text-bg-color-disable;
183
+ }
184
+ }
185
+ }
186
+
187
+ &-link {
188
+ color: @button-link-color;
189
+ //text-shadow: @text-shadow;
190
+ background-color: @button-link-bg-color;
191
+ border-color: @button-link-bg-color;
192
+ box-shadow: none;
193
+ padding: 0 !important;
194
+
195
+ &:focus {
196
+ color: @button-link-color;
197
+ //text-shadow: @text-shadow;
198
+ background-color: @button-link-bg-color;
199
+ border-color: @button-link-bg-color;
200
+ box-shadow: none;
201
+ }
202
+
203
+ &:hover,
204
+ &:active {
205
+ color: @button-link-color-active;
206
+ background-color: @button-link-bg-color-active;
207
+ border-color: @button-link-bg-color-active;
208
+ }
209
+
210
+ &[disabled],
211
+ &.ant-btn-loading {
212
+ color: @button-link-color-disable;
213
+ background-color: @button-link-bg-color-disable;
214
+ border-color: @button-link-bg-color-disable;
215
+ cursor: default;
216
+ opacity: 0.5;
217
+
218
+ &:hover,
219
+ &:focus,
220
+ &:active {
221
+ color: @button-link-color-disable;
222
+ background-color: @button-link-bg-color-disable;
223
+ border-color: @button-link-bg-color-disable;
224
+ }
225
+ }
226
+ }
227
+
228
+ &.ant-btn-icon-only {
229
+ justify-content: center;
230
+ width: initial;
231
+ padding: 0;
232
+ vertical-align: baseline;
233
+ }
234
+ }
235
+ }
package/dist/Checkbox/index.js CHANGED
@@ -1,4 +1,5 @@
1
- var _excluded = ["className"];
1
+ var _excluded = ["className", "disabled"],
2
+ _excluded2 = ["className", "disabled"];
2
3
 
3
4
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
5
 
@@ -7,18 +8,35 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
7
8
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
8
9
 
9
10
  import { Checkbox as AntdCheckbox } from 'antd';
11
+ import DisabledContext from 'antd/lib/config-provider/DisabledContext';
10
12
  import classNames from 'classnames';
11
13
  import React from 'react';
12
14
  import CheckboxGroup from "./component/CheckboxGroup";
13
15
 
14
16
  function Checkbox(props) {
15
17
  var className = props.className,
18
+ customDisabled = props.disabled,
16
19
  otherProps = _objectWithoutProperties(props, _excluded);
17
20
 
21
+ var disabled = React.useContext(DisabledContext);
22
+ var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
18
23
  return /*#__PURE__*/React.createElement(AntdCheckbox, _extends({
19
- className: classNames('ald-checkbox', className)
24
+ className: classNames('ald-checkbox', className),
25
+ disabled: mergedDisabled
20
26
  }, otherProps));
21
27
  }
22
28
 
23
- Checkbox.Group = CheckboxGroup;
29
+ Checkbox.Group = function Group(props) {
30
+ var className = props.className,
31
+ customDisabled = props.disabled,
32
+ otherProps = _objectWithoutProperties(props, _excluded2);
33
+
34
+ var disabled = React.useContext(DisabledContext);
35
+ var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
36
+ return /*#__PURE__*/React.createElement(CheckboxGroup, _extends({
37
+ className: classNames('ald-checkbox-group', className),
38
+ disabled: mergedDisabled
39
+ }, otherProps));
40
+ };
41
+
24
42
  export default Checkbox;
package/dist/Checkbox/type.d.ts CHANGED
@@ -34,7 +34,7 @@ export interface ICheckboxProps extends CheckboxProps {
34
34
  * @type boolean
35
35
  * @default false
36
36
  */
37
- indeterminate?: false;
37
+ indeterminate?: boolean;
38
38
  /**
39
39
  * @description 变化时的回调函数
40
40
  * @type function(e:Event)
@@ -84,7 +84,7 @@ export interface ICheckboxGroupProps extends CheckboxGroupProps {
84
84
  * @type 'vertical' | 'horizontal'
85
85
  * @default -
86
86
  */
87
- direction: EDirection.VERTICAL;
87
+ direction?: 'vertical' | 'horizontal';
88
88
  /**
89
89
  * @description className
90
90
  * @type string
package/dist/DataPreviewTable/components/Body/index.js CHANGED
@@ -24,7 +24,6 @@ function Body(props) {
24
24
  startRowIndex = _props$rowRange[0],
25
25
  endRowIndex = _props$rowRange[1];
26
26
 
27
- console.log(columnLayout, columns, 'columnLayout---body');
28
27
  return /*#__PURE__*/React.createElement("div", {
29
28
  className: "ald-data-preview-table-body"
30
29
  }, datasource.slice(startRowIndex, endRowIndex).map(function (row, rowIndex) {
package/dist/DataPreviewTable/hooks/useDirection.js CHANGED
@@ -117,7 +117,6 @@ export default function useDirection(columns, wrapRef) {
117
117
  var setRange = useCallback(function (columnsOffsets) {
118
118
  var _wrapRef$current, _wrapRef$current2, _wrapRef$current3, _wrapRef$current4;
119
119
 
120
- console.log(columnsOffsets, 'columnsOffsets');
121
120
  var scrollTop = ((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.scrollTop) || 0;
122
121
  var scrollLeft = ((_wrapRef$current2 = wrapRef.current) === null || _wrapRef$current2 === void 0 ? void 0 : _wrapRef$current2.scrollLeft) || 0;
123
122
  var direction = getScrollDirection(scrollTop, scrollLeft);
@@ -149,7 +148,6 @@ export default function useDirection(columns, wrapRef) {
149
148
  setColumnLayout = _useState12[1];
150
149
 
151
150
  var onScroll = function onScroll() {
152
- console.log(111);
153
151
  setRange(columnsOffsets);
154
152
  };
155
153
 
@@ -231,7 +229,6 @@ export default function useDirection(columns, wrapRef) {
231
229
  resizeObserver.disconnect();
232
230
  };
233
231
  }, [wrapRef, setRange, columnsOffsets]);
234
- console.log(columnLayout, 'columnLayout,useDirection', columnRange);
235
232
  return {
236
233
  columnRange: columnRange,
237
234
  rowRange: rowRange,
package/dist/DataPreviewTable/index.js CHANGED
@@ -1,10 +1,3 @@
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 { useWhyDidYouUpdate } from 'ahooks';
8
1
  import classNames from 'classnames';
9
2
  import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
10
3
  import Progress from "../Progress";
@@ -43,13 +36,6 @@ function DataPreviewTable(props, ref) {
43
36
  contentWidth = _useDirection.contentWidth,
44
37
  tableColumns = _useDirection.tableColumns;
45
38
 
46
- useWhyDidYouUpdate('DataPreviewTable', _objectSpread({
47
- columnRange: columnRange,
48
- rowRange: rowRange,
49
- onScroll: onScroll,
50
- columnLayout: columnLayout,
51
- setColumnsWidth: setColumnsWidth
52
- }, props));
53
39
  useEffect(function () {
54
40
  if (ref) {
55
41
  if (typeof ref === 'function') {
@@ -63,7 +49,6 @@ function DataPreviewTable(props, ref) {
63
49
  var rows = Math.ceil((((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.clientHeight) || 0 - HEADER_HEIGHT) / CELL_HEIGHT);
64
50
  return rows - 1 < 0 ? 0 : rows - 1; // eslint-disable-next-line react-hooks/exhaustive-deps
65
51
  }, [wrapRef.current]);
66
- console.log(columnLayout, 'columnLayout');
67
52
  return /*#__PURE__*/React.createElement(ScrollArea, {
68
53
  ref: wrapRef,
69
54
  style: {
package/dist/Form/index.d.ts CHANGED
@@ -10,11 +10,15 @@ declare const AldForm: <Values = any>(props: FormProps<Values> & {
10
10
  children?: React.ReactNode;
11
11
  } & {
12
12
  ref?: React.Ref<FormInstance<Values>> | undefined;
13
+ labelWidth?: number | undefined;
13
14
  }) => React.ReactElement;
15
+ interface IFormItemProps extends FormItemProps {
16
+ labelWidth?: number;
17
+ }
14
18
  declare const AldFormItem: {
15
- (props: FormItemProps): JSX.Element;
19
+ (props: IFormItemProps): JSX.Element;
16
20
  useStatus: () => {
17
- status?: "" | "error" | "success" | "warning" | "validating" | undefined;
21
+ status?: "" | "warning" | "error" | "success" | "validating" | undefined;
18
22
  errors: React.ReactNode[];
19
23
  warnings: React.ReactNode[];
20
24
  };
package/dist/Form/index.js CHANGED
@@ -1,7 +1,14 @@
1
- var _excluded = ["children", "colon", "size"];
1
+ var _excluded = ["children", "colon", "size", "labelWidth", "style"],
2
+ _excluded2 = ["labelWidth", "style"];
2
3
 
3
4
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
5
 
6
+ 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; }
7
+
8
+ 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; }
9
+
10
+ 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; }
11
+
5
12
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
6
13
 
7
14
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -23,23 +30,37 @@ var AldForm = /*#__PURE__*/forwardRef(function (props, ref) {
23
30
  colon = _props$colon === void 0 ? false : _props$colon,
24
31
  _props$size = props.size,
25
32
  size = _props$size === void 0 ? contextSize : _props$size,
33
+ labelWidth = props.labelWidth,
34
+ _props$style = props.style,
35
+ style = _props$style === void 0 ? {} : _props$style,
26
36
  restProps = _objectWithoutProperties(props, _excluded);
27
37
 
38
+ var customStyle = labelWidth ? _objectSpread(_objectSpread({}, style), {}, {
39
+ '--label-width': "".concat(labelWidth, "px")
40
+ }) : style;
28
41
  return /*#__PURE__*/React.createElement(SizeContextProvider, {
29
42
  size: size
30
43
  }, /*#__PURE__*/React.createElement(InternalForm, _extends({
31
44
  colon: colon,
32
- size: size
45
+ size: size,
46
+ style: customStyle
33
47
  }, restProps, {
34
48
  ref: ref
35
49
  }), children));
36
50
  });
37
51
 
38
52
  var AldFormItem = function AldFormItem(props) {
39
- //@ts-ignore antd formItem 的ts接口里面无gutter 但是实际上是支持的
53
+ var labelWidth = props.labelWidth,
54
+ _props$style2 = props.style,
55
+ style = _props$style2 === void 0 ? {} : _props$style2,
56
+ restProps = _objectWithoutProperties(props, _excluded2);
57
+
58
+ var customStyle = labelWidth ? _objectSpread(_objectSpread({}, style), {}, {
59
+ '--label-width': "".concat(labelWidth, "px")
60
+ }) : style;
40
61
  return /*#__PURE__*/React.createElement(Item, _extends({
41
- gutter: 12
42
- }, props));
62
+ style: customStyle
63
+ }, restProps));
43
64
  };
44
65
 
45
66
  AldFormItem.useStatus = Item.useStatus;
package/dist/Form/style/index.less CHANGED
@@ -9,8 +9,8 @@
9
9
  }
10
10
 
11
11
  .ant-form-item-label {
12
- display: inline-flex;
13
- align-items: center;
12
+ width: var(--label-width);
13
+ margin-right: 12px;
14
14
 
15
15
  label {
16
16
  overflow: hidden;
@@ -19,15 +19,9 @@
19
19
  font-style: normal;
20
20
  font-weight: 500;
21
21
  line-height: 20px;
22
- height: auto !important;
23
-
24
- &[for='textarea'] {
25
- align-self: flex-start;
26
- }
22
+ height: 32px;
27
23
 
28
24
  &.ant-form-item-no-colon {
29
- display: flex;
30
-
31
25
  &::after {
32
26
  display: none;
33
27
  }
@@ -37,6 +31,7 @@
37
31
 
38
32
  .ant-form-item-control {
39
33
  line-height: 20px;
34
+ justify-content: center;
40
35
 
41
36
  .ant-form-item-control-input {
42
37
  min-height: 20px;
@@ -64,15 +59,25 @@
64
59
  }
65
60
  }
66
61
 
67
- // &.ant-form-small {
68
- // .ant-form-item {
69
- // .ant-form-item-control {
70
- // .ant-form-item-control-input {
71
- // min-height: 16px;
72
- // }
73
- // }
74
- // }
75
- // }
62
+ &-small {
63
+ .ant-form-item {
64
+ .ant-form-item-label {
65
+ label {
66
+ height: 28px;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ &-large {
73
+ .ant-form-item {
74
+ .ant-form-item-label {
75
+ label {
76
+ height: 36px;
77
+ }
78
+ }
79
+ }
80
+ }
76
81
  }
77
82
 
78
83
  .ant-form-vertical {
package/dist/InputNumber/style/index.less CHANGED
@@ -33,10 +33,10 @@
33
33
  @inputNumber-cursor-color: @B60;
34
34
 
35
35
  //前后填充
36
- @inputNumber-addon-bg-color: @BG100;
37
- @inputNumber-addon-color: @NL40;
36
+ @inputNumber-addon-bg-color: #f8f8f8;
37
+ @inputNumber-addon-color: #858585;
38
38
  @inputNumber-addon-border-color: @BG60;
39
- @inputNumber-addon-disable-color: @NL40;
39
+ @inputNumber-addon-disable-color: #858585;
40
40
 
41
41
  .ald-input-number {
42
42
  &.ant-input-number {
package/dist/Menu/style/index.less CHANGED
@@ -54,8 +54,8 @@
54
54
  }
55
55
 
56
56
  .ant-menu-submenu-expand-icon {
57
- inset-inline-end: 0;
58
57
  width: initial;
58
+ right: 8px;
59
59
  }
60
60
  }
61
61
  }
package/dist/Modal/style/index.less CHANGED
@@ -10,9 +10,10 @@
10
10
 
11
11
  .ant-modal-body {
12
12
  max-height: 70vh;
13
- overflow: auto;
13
+ overflow-y: auto;
14
14
  line-height: 20px;
15
15
  font-size: 13px;
16
+ overflow-x: hidden;
16
17
  }
17
18
  }
18
19
 
package/dist/Radio/style/index.less CHANGED
@@ -112,9 +112,9 @@
112
112
  cursor: default;
113
113
  opacity: 0.5;
114
114
 
115
- .ald-radio-desc {
116
- color: @NL60;
117
- }
115
+ // .ald-radio-desc {
116
+ // color: @NL60;
117
+ // }
118
118
  }
119
119
 
120
120
  .ald-radio-button-wrapper-border-primary,
@@ -192,7 +192,7 @@
192
192
  // 按钮样式禁用的文字颜色
193
193
  .ald-radio-wrapper-disabled {
194
194
  .ald-radio-desc {
195
- color: @NL80;
195
+ color: @NL0;
196
196
  }
197
197
  }
198
198
 
@@ -264,7 +264,7 @@
264
264
 
265
265
  .ald-radio-desc {
266
266
  position: relative;
267
- color: @ND0;
267
+ color: @NL0;
268
268
  transition: text-shadow 0.3s ease, color 0.3s ease;
269
269
  }
270
270
  }
@@ -310,7 +310,7 @@
310
310
  }
311
311
 
312
312
  .ald-radio-desc {
313
- font-weight: 600;
313
+ font-weight: 400;
314
314
  }
315
315
  }
316
316
 
@@ -325,7 +325,7 @@
325
325
 
326
326
  .ald-radio-desc {
327
327
  position: relative;
328
- font-weight: 600;
328
+ font-weight: 400;
329
329
  z-index: 2;
330
330
  color: @NL0;
331
331
  }
package/dist/Select/style/index.less CHANGED
@@ -1,6 +1,7 @@
1
1
  /* stylelint-disable no-descending-specificity */
2
2
  @import './variables.less';
3
3
  @import '../../Empty/style/index.less';
4
+ @import '../../Checkbox/style/index.less';
4
5
  @import './multiple.less';
5
6
  @import './single.less';
6
7
  @import './size.less';
package/dist/Select/style/multiple.less CHANGED
@@ -1,38 +1,37 @@
1
1
  @import './variables.less';
2
2
 
3
- .ald-multiple-option-list{
3
+ .ald-multiple-option-list {
4
4
  display: flex;
5
5
  justify-content: space-between;
6
6
  flex-direction: column;
7
7
  color: @NL0;
8
8
  font-size: 13px;
9
9
  line-height: 20px;
10
-
11
10
  }
12
11
 
13
- .ald-multiple-option{
14
- padding: 8px 14px;
12
+ .ald-multiple-option {
13
+ padding: 8px 12px;
15
14
  // height: 20px;
16
15
  margin-left: 0;
17
16
  display: flex;
18
17
  height: 36px;
19
18
  box-sizing: border-box;
20
19
 
21
- &:hover{
20
+ &:hover {
22
21
  background-color: @BG90;
23
22
  }
24
23
 
25
- &.ald-multiple-option-disabled{
24
+ &.ald-multiple-option-disabled {
26
25
  opacity: 0.5;
27
26
 
28
- &:hover{
27
+ &:hover {
29
28
  background: none;
30
29
  cursor: default;
31
30
  }
32
31
  }
33
32
  }
34
33
 
35
- .ald-multiple-option-label{
34
+ .ald-multiple-option-label {
36
35
  white-space: nowrap;
37
36
  margin-left: 10px;
38
37
  flex: 1;
@@ -48,8 +47,8 @@
48
47
  cursor: text;
49
48
  align-items: flex-start;
50
49
 
51
- .ant-select-selection-overflow{
50
+ .ant-select-selection-overflow {
52
51
  height: 100%;
53
52
  }
54
53
  }
55
- }
54
+ }
package/dist/Switch/style/index.less CHANGED
@@ -9,20 +9,22 @@
9
9
  @switch-text-margin-left: 8px;
10
10
  @switch-aspect-ratio: 2; //宽高比
11
11
  @switch-height-radius-ratio: 2; //高度和边框圆角比
12
+ @switch-background-color: #dbdbdb;
13
+ @switch-background-color-checked: #3271c9;
12
14
 
13
15
  .ald-switch.ald-switch {
14
16
  display: inline-block;
15
17
  font-size: 0;
16
18
 
17
19
  .ald-switch-btn {
18
- background: @BG60;
20
+ background: @switch-background-color;
19
21
 
20
22
  &:focus {
21
23
  box-shadow: none;
22
24
  }
23
25
 
24
26
  &:hover {
25
- background: @BG60;
27
+ background: @switch-background-color;
26
28
  }
27
29
  }
28
30
 
@@ -36,10 +38,10 @@
36
38
 
37
39
  &.ald-switch-checked {
38
40
  .ald-switch-btn {
39
- background-color: @B40;
41
+ background-color: @switch-background-color-checked;
40
42
 
41
43
  &:hover {
42
- background-color: @B40;
44
+ background-color: @switch-background-color-checked;
43
45
  }
44
46
  }
45
47
  }
@@ -67,7 +69,6 @@
67
69
  min-width: @switch-handle-height-middle * @switch-aspect-ratio;
68
70
  height: @switch-handle-height-middle;
69
71
  line-height: @switch-handle-height-middle;
70
- border-radius: @switch-handle-height-middle / @switch-height-radius-ratio;
71
72
 
72
73
  .ant-switch-handle {
73
74
  top: @switch-handle-gap-middle;
@@ -79,7 +80,7 @@
79
80
  width: @switch-handle-middle - 4px;
80
81
  height: @switch-handle-middle - 4px;
81
82
  font-size: @switch-handle-middle - 4px;
82
-
83
+
83
84
  svg {
84
85
  width: @switch-handle-middle - 4px;
85
86
  height: @switch-handle-middle - 4px;
@@ -110,7 +111,6 @@
110
111
  min-width: @switch-handle-height-small * @switch-aspect-ratio;
111
112
  height: @switch-handle-height-small;
112
113
  line-height: @switch-handle-height-small;
113
- border-radius: @switch-handle-height-small / @switch-height-radius-ratio;
114
114
 
115
115
  .ant-switch-handle {
116
116
  top: @switch-handle-gap-small;
package/dist/Tooltip/style/index.less CHANGED
@@ -2,17 +2,19 @@
2
2
 
3
3
  .ald-tooltip-overlay.ald-tooltip-overlay {
4
4
  .ant-tooltip-inner {
5
- padding: 6px 12px;
6
- line-height: 20px;
5
+ padding: 6px 8px;
6
+ line-height: 16px;
7
7
  background: @BG10;
8
- border-radius: 4px;
8
+ border-radius: 2px;
9
9
  box-shadow: none;
10
- color:@ND0;
11
- font-size: 13px;
10
+ color: @ND0;
11
+ font-weight: 400;
12
+ font-size: 12px;
13
+ min-height: 28px;
12
14
  }
13
15
 
14
16
  .ant-tooltip-arrow {
15
- &::before{
17
+ &::before {
16
18
  background-color: @BG10;
17
19
  }
18
20
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",