@kdcloudjs/kdesign 1.5.3 → 1.5.6
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/CHANGELOG.md +61 -0
- package/dist/default-theme.js +4 -4
- package/dist/kdesign-complete.less +164 -88
- package/dist/kdesign.css +160 -86
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +392 -253
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +4 -4
- package/dist/kdesign.min.js +6 -6
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.js +79 -46
- package/es/alert/alert.js +2 -2
- package/es/alert/style/index.css +27 -11
- package/es/alert/style/index.less +24 -10
- package/es/alert/style/mixin.less +8 -2
- package/es/alert/style/token.less +16 -8
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +2 -1
- package/es/drawer/drawer.js +1 -0
- package/es/dropdown/dropdown.js +16 -6
- package/es/dropdown/style/index.css +13 -14
- package/es/dropdown/style/index.less +4 -5
- package/es/dropdown/style/token.less +6 -5
- package/es/radio/style/index.css +7 -1
- package/es/radio/style/index.less +9 -1
- package/es/search/style/index.css +3 -3
- package/es/select/select.js +1 -1
- package/es/spin/style/index.css +25 -26
- package/es/spin/style/index.less +18 -19
- package/es/spin/style/token.less +9 -3
- package/es/stepper/stepper.js +9 -4
- package/es/stepper/style/index.css +2 -0
- package/es/stepper/style/index.less +2 -0
- package/es/stepper/style/token.less +1 -2
- package/es/style/icon/kdicon.css +2 -1
- package/es/style/icon/kdicon.woff +0 -0
- package/es/style/themes/default.less +3 -4
- package/es/tabs/style/index.css +1 -0
- package/es/tabs/style/index.less +1 -0
- package/es/timeline/style/index.css +22 -21
- package/es/timeline/style/index.less +2 -2
- package/es/timeline/style/token.less +4 -7
- package/es/tooltip/tooltip.js +1 -1
- package/es/tree/style/index.css +56 -7
- package/es/tree/style/index.less +26 -18
- package/es/tree/style/mixin.less +25 -1
- package/es/tree/style/token.less +6 -4
- package/es/tree/tree.d.ts +2 -0
- package/es/tree/tree.js +77 -20
- package/es/tree/treeHooks.d.ts +1 -1
- package/es/tree/treeHooks.js +3 -4
- package/es/tree/treeNode.d.ts +1 -0
- package/es/tree/treeNode.js +45 -49
- package/es/tree/utils/treeUtils.d.ts +6 -3
- package/es/tree/utils/treeUtils.js +66 -42
- package/lib/_utils/usePopper.js +79 -46
- package/lib/alert/alert.js +2 -2
- package/lib/alert/style/index.css +27 -11
- package/lib/alert/style/index.less +24 -10
- package/lib/alert/style/mixin.less +8 -2
- package/lib/alert/style/token.less +16 -8
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +2 -1
- package/lib/drawer/drawer.js +1 -0
- package/lib/dropdown/dropdown.js +15 -6
- package/lib/dropdown/style/index.css +13 -14
- package/lib/dropdown/style/index.less +4 -5
- package/lib/dropdown/style/token.less +6 -5
- package/lib/radio/style/index.css +7 -1
- package/lib/radio/style/index.less +9 -1
- package/lib/search/style/index.css +3 -3
- package/lib/select/select.js +1 -1
- package/lib/spin/style/index.css +25 -26
- package/lib/spin/style/index.less +18 -19
- package/lib/spin/style/token.less +9 -3
- package/lib/stepper/stepper.js +9 -4
- package/lib/stepper/style/index.css +2 -0
- package/lib/stepper/style/index.less +2 -0
- package/lib/stepper/style/token.less +1 -2
- package/lib/style/icon/kdicon.css +2 -1
- package/lib/style/icon/kdicon.woff +0 -0
- package/lib/style/themes/default.less +3 -4
- package/lib/tabs/style/index.css +1 -0
- package/lib/tabs/style/index.less +1 -0
- package/lib/timeline/style/index.css +22 -21
- package/lib/timeline/style/index.less +2 -2
- package/lib/timeline/style/token.less +4 -7
- package/lib/tooltip/tooltip.js +1 -1
- package/lib/tree/style/index.css +56 -7
- package/lib/tree/style/index.less +26 -18
- package/lib/tree/style/mixin.less +25 -1
- package/lib/tree/style/token.less +6 -4
- package/lib/tree/tree.d.ts +2 -0
- package/lib/tree/tree.js +78 -20
- package/lib/tree/treeHooks.d.ts +1 -1
- package/lib/tree/treeHooks.js +3 -4
- package/lib/tree/treeNode.d.ts +1 -0
- package/lib/tree/treeNode.js +46 -48
- package/lib/tree/utils/treeUtils.d.ts +6 -3
- package/lib/tree/utils/treeUtils.js +64 -42
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
opacity: 1;
|
|
38
38
|
visibility: visible;
|
|
39
39
|
z-index: @z-index-popper;
|
|
40
|
-
background-color: @color-background;
|
|
40
|
+
background-color: @dropdown-color-background;
|
|
41
41
|
border-radius: @radius-border;
|
|
42
42
|
min-width: @dropdown-menu-min-width;
|
|
43
43
|
max-width: @dropdown-menu-max-width;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
// 箭头样式
|
|
52
|
-
.popperArrow(@color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
|
|
52
|
+
.popperArrow(@dropdown-color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
|
|
53
53
|
|
|
54
54
|
&-menu {
|
|
55
55
|
max-height: @dropdown-menu-max-height;
|
|
@@ -80,11 +80,10 @@
|
|
|
80
80
|
|
|
81
81
|
&:not(.disabled):active,
|
|
82
82
|
&:not(.disabled).selected {
|
|
83
|
-
color: @color
|
|
84
|
-
background-color: @dropdown-item-active-bg-color;
|
|
83
|
+
color: @dropdown-item-active-color;
|
|
85
84
|
|
|
86
85
|
> a {
|
|
87
|
-
color: @color
|
|
86
|
+
color: @dropdown-item-active-color;
|
|
88
87
|
}
|
|
89
88
|
}
|
|
90
89
|
|
|
@@ -4,22 +4,23 @@
|
|
|
4
4
|
|
|
5
5
|
// color
|
|
6
6
|
@dropdown-item-hover-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-hover', @color-hover);
|
|
7
|
-
@dropdown-item-active-
|
|
7
|
+
@dropdown-item-active-color: var(~'@{dropdown-custom-prefix}-item-color-text-active', @color-theme);
|
|
8
8
|
@dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
|
|
9
9
|
@dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
|
|
10
10
|
@dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
|
|
11
11
|
@dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
|
|
12
12
|
@dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
|
|
13
13
|
@dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
|
|
14
|
+
@dropdown-color-background: var(~'@{dropdown-custom-prefix}-menu-color-background', @color-background);
|
|
14
15
|
|
|
15
16
|
// sizing
|
|
16
|
-
@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width',
|
|
17
|
-
@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width',
|
|
18
|
-
@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height',
|
|
17
|
+
@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 64px);
|
|
18
|
+
@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 600px);
|
|
19
|
+
@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 328px);
|
|
19
20
|
@dropdown-divided-height: var(~'@{dropdown-custom-prefix}-divided-sizing-height', 1px);
|
|
20
21
|
|
|
21
22
|
// spacing
|
|
22
|
-
@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical',
|
|
23
|
+
@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 4px);
|
|
23
24
|
@dropdown-item-vertical-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-vertical', 7px);
|
|
24
25
|
@dropdown-item-horizontal-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-horizontal', 12px);
|
|
25
26
|
|
package/es/radio/style/index.css
CHANGED
|
@@ -284,6 +284,9 @@
|
|
|
284
284
|
width: 100%;
|
|
285
285
|
height: 100%;
|
|
286
286
|
}
|
|
287
|
+
.kd-radio-square-input[disabled] {
|
|
288
|
+
cursor: not-allowed;
|
|
289
|
+
}
|
|
287
290
|
.kd-radio-square:hover {
|
|
288
291
|
color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
289
292
|
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
@@ -391,6 +394,9 @@
|
|
|
391
394
|
cursor: pointer;
|
|
392
395
|
opacity: 0;
|
|
393
396
|
}
|
|
397
|
+
.kd-radio-button-input[disabled] {
|
|
398
|
+
cursor: not-allowed;
|
|
399
|
+
}
|
|
394
400
|
.kd-radio-button:hover {
|
|
395
401
|
color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
396
402
|
}
|
|
@@ -407,7 +413,7 @@
|
|
|
407
413
|
.kd-radio-button-checked:hover {
|
|
408
414
|
color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
|
|
409
415
|
}
|
|
410
|
-
.kd-radio-button-checked::before {
|
|
416
|
+
.kd-radio-button-checked:not(.kd-radio-button-disabled)::before {
|
|
411
417
|
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
412
418
|
}
|
|
413
419
|
.kd-radio-button-checked:first-child {
|
|
@@ -179,6 +179,10 @@
|
|
|
179
179
|
opacity: 0;
|
|
180
180
|
width: 100%;
|
|
181
181
|
height: 100%;
|
|
182
|
+
|
|
183
|
+
&[disabled] {
|
|
184
|
+
cursor: not-allowed;
|
|
185
|
+
}
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
// 悬停状态
|
|
@@ -289,6 +293,10 @@
|
|
|
289
293
|
z-index: 1;
|
|
290
294
|
cursor: pointer;
|
|
291
295
|
opacity: 0;
|
|
296
|
+
|
|
297
|
+
&[disabled]{
|
|
298
|
+
cursor: not-allowed;
|
|
299
|
+
}
|
|
292
300
|
}
|
|
293
301
|
|
|
294
302
|
// 悬停状态
|
|
@@ -312,7 +320,7 @@
|
|
|
312
320
|
color: @radio-color-background;
|
|
313
321
|
}
|
|
314
322
|
|
|
315
|
-
|
|
323
|
+
&:not(.@{radio-button-prefix-cls}-disabled)::before {
|
|
316
324
|
background-color: @radio-color-theme;
|
|
317
325
|
}
|
|
318
326
|
|
|
@@ -483,13 +483,13 @@
|
|
|
483
483
|
animation: animate_loading 1s infinite;
|
|
484
484
|
}
|
|
485
485
|
.kd-quick-search-npl-loading-item:nth-child(1) {
|
|
486
|
-
background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #
|
|
486
|
+
background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2486ee));
|
|
487
487
|
}
|
|
488
488
|
.kd-quick-search-npl-loading-item:nth-child(2) {
|
|
489
|
-
background-color: #
|
|
489
|
+
background-color: #02ccfe;
|
|
490
490
|
}
|
|
491
491
|
.kd-quick-search-npl-loading-item:nth-child(3) {
|
|
492
|
-
background-color: #
|
|
492
|
+
background-color: #05c8c7;
|
|
493
493
|
}
|
|
494
494
|
.kd-quick-search-npl-loading-item:nth-child(4) {
|
|
495
495
|
background-color: #a06eff;
|
package/es/select/select.js
CHANGED
|
@@ -448,7 +448,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
448
448
|
var selectedVal = multipleRef.current.selectedVal; // 选择器下拉icon样式
|
|
449
449
|
|
|
450
450
|
var arrowIconCls = classNames((_classNames8 = {}, _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
|
|
451
|
-
var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : selectedVal);
|
|
451
|
+
var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '');
|
|
452
452
|
var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
|
|
453
453
|
return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
|
|
454
454
|
onClick: handleReset,
|
package/es/spin/style/index.css
CHANGED
|
@@ -102,9 +102,9 @@
|
|
|
102
102
|
*/
|
|
103
103
|
/* ----------- zIndex ——————---- end */
|
|
104
104
|
.kd-spin-page .kd-spin-dot-spin {
|
|
105
|
-
width:
|
|
106
|
-
height:
|
|
107
|
-
padding:
|
|
105
|
+
width: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
|
|
106
|
+
height: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
|
|
107
|
+
padding: var(--kd-c-spin-page-dot-spin-spacing-padding, 4px);
|
|
108
108
|
-webkit-box-sizing: border-box;
|
|
109
109
|
box-sizing: border-box;
|
|
110
110
|
display: -webkit-box;
|
|
@@ -119,23 +119,22 @@
|
|
|
119
119
|
align-content: space-between;
|
|
120
120
|
}
|
|
121
121
|
.kd-spin-page .kd-spin-dot-item {
|
|
122
|
-
width: var(--kd-c-spin-page-sizing,
|
|
123
|
-
height: var(--kd-c-spin-page-sizing,
|
|
124
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #
|
|
122
|
+
width: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
|
|
123
|
+
height: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
|
|
124
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
|
|
125
125
|
border-radius: 50%;
|
|
126
126
|
}
|
|
127
127
|
.kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
|
|
128
|
-
margin-right: 10px;
|
|
129
128
|
-webkit-animation: pageLoading 1s 0.3s ease-in-out infinite;
|
|
130
129
|
animation: pageLoading 1s 0.3s ease-in-out infinite;
|
|
131
130
|
}
|
|
132
131
|
.kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
|
|
133
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #
|
|
132
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
|
|
134
133
|
-webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
|
|
135
134
|
animation: pageLoading 1s 0.2s ease-in-out infinite;
|
|
136
135
|
}
|
|
137
136
|
.kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
|
|
138
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #
|
|
137
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
|
|
139
138
|
-webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
|
|
140
139
|
animation: pageLoading 1s 0.1s ease-in-out infinite;
|
|
141
140
|
}
|
|
@@ -146,8 +145,8 @@
|
|
|
146
145
|
}
|
|
147
146
|
@-webkit-keyframes pageLoading {
|
|
148
147
|
50% {
|
|
149
|
-
-webkit-transform: scale(1.
|
|
150
|
-
transform: scale(1.
|
|
148
|
+
-webkit-transform: scale(1.25);
|
|
149
|
+
transform: scale(1.25);
|
|
151
150
|
}
|
|
152
151
|
100% {
|
|
153
152
|
-webkit-transform: scale(1);
|
|
@@ -156,8 +155,8 @@
|
|
|
156
155
|
}
|
|
157
156
|
@keyframes pageLoading {
|
|
158
157
|
50% {
|
|
159
|
-
-webkit-transform: scale(1.
|
|
160
|
-
transform: scale(1.
|
|
158
|
+
-webkit-transform: scale(1.25);
|
|
159
|
+
transform: scale(1.25);
|
|
161
160
|
}
|
|
162
161
|
100% {
|
|
163
162
|
-webkit-transform: scale(1);
|
|
@@ -178,9 +177,9 @@
|
|
|
178
177
|
align-items: flex-end;
|
|
179
178
|
}
|
|
180
179
|
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
|
|
181
|
-
width: var(--kd-c-spin-dot-container-sizing, 5px);
|
|
182
|
-
height: var(--kd-c-spin-dot-container-sizing, 5px);
|
|
183
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #
|
|
180
|
+
width: var(--kd-c-spin-dot-container-sizing-square, 5px);
|
|
181
|
+
height: var(--kd-c-spin-dot-container-sizing-square, 5px);
|
|
182
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
|
|
184
183
|
border-radius: 50%;
|
|
185
184
|
}
|
|
186
185
|
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
|
|
@@ -188,12 +187,12 @@
|
|
|
188
187
|
animation: containerLoading 1s 0.6s ease-in-out infinite;
|
|
189
188
|
}
|
|
190
189
|
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
|
|
191
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #
|
|
190
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
|
|
192
191
|
-webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
|
|
193
192
|
animation: containerLoading 1s 0.45s ease-in-out infinite;
|
|
194
193
|
}
|
|
195
194
|
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
|
|
196
|
-
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #
|
|
195
|
+
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
|
|
197
196
|
-webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
|
|
198
197
|
animation: containerLoading 1s 0.3s ease-in-out infinite;
|
|
199
198
|
}
|
|
@@ -223,25 +222,25 @@
|
|
|
223
222
|
}
|
|
224
223
|
}
|
|
225
224
|
.kd-spin-component .kd-spin-dot-spin {
|
|
226
|
-
width:
|
|
227
|
-
height:
|
|
228
|
-
border:
|
|
225
|
+
width: var(--kd-c-spin-dot-component-sizing-square, 24px);
|
|
226
|
+
height: var(--kd-c-spin-dot-component-sizing-square, 24px);
|
|
227
|
+
border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid var(--kd-c-spin-component-dot-color-border, #ebebeb);
|
|
229
228
|
border-radius: 50%;
|
|
230
229
|
position: relative;
|
|
231
230
|
-webkit-box-sizing: border-box;
|
|
232
231
|
box-sizing: border-box;
|
|
233
232
|
}
|
|
234
233
|
.kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
|
|
235
|
-
width:
|
|
236
|
-
height:
|
|
234
|
+
width: var(--kd-c-spin-dot-component-sizing-square, 24px);
|
|
235
|
+
height: var(--kd-c-spin-dot-component-sizing-square, 24px);
|
|
237
236
|
-webkit-box-sizing: border-box;
|
|
238
237
|
box-sizing: border-box;
|
|
239
|
-
border:
|
|
238
|
+
border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid transparent;
|
|
240
239
|
border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
|
|
241
240
|
border-radius: 50%;
|
|
242
241
|
position: absolute;
|
|
243
|
-
top: -
|
|
244
|
-
left: -
|
|
242
|
+
top: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
|
|
243
|
+
left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
|
|
245
244
|
-webkit-transform: rotate(-45deg);
|
|
246
245
|
transform: rotate(-45deg);
|
|
247
246
|
-webkit-animation: componentRotate 1s linear infinite;
|
package/es/spin/style/index.less
CHANGED
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
// right: 0;
|
|
13
13
|
|
|
14
14
|
.@{spin-prefix-cls}-dot-spin {
|
|
15
|
-
width:
|
|
16
|
-
height:
|
|
17
|
-
padding:
|
|
15
|
+
width: @spin-page-dot-spin-sizing;
|
|
16
|
+
height: @spin-page-dot-spin-sizing;
|
|
17
|
+
padding: @spin-page-dot-spin-spacing-padding;
|
|
18
18
|
// background: @logo-color-1;
|
|
19
19
|
box-sizing: border-box;
|
|
20
20
|
display: flex;
|
|
@@ -24,10 +24,9 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.@{spin-prefix-cls}-dot-item {
|
|
27
|
-
.dot(@spin-page-
|
|
27
|
+
.dot(@spin-page-dot-item-sizing, @spin-dot-color-first);
|
|
28
28
|
|
|
29
29
|
&:nth-child(2n+1) {
|
|
30
|
-
margin-right: 10px;
|
|
31
30
|
animation: pageLoading 1s .3s ease-in-out infinite
|
|
32
31
|
}
|
|
33
32
|
|
|
@@ -48,7 +47,7 @@
|
|
|
48
47
|
|
|
49
48
|
@keyframes pageLoading {
|
|
50
49
|
50% {
|
|
51
|
-
transform: scale(1.
|
|
50
|
+
transform: scale(1.25);
|
|
52
51
|
}
|
|
53
52
|
100% {
|
|
54
53
|
transform: scale(1);
|
|
@@ -72,22 +71,22 @@
|
|
|
72
71
|
&:nth-child(2n+1) {
|
|
73
72
|
animation: containerLoading 1s .6s ease-in-out infinite
|
|
74
73
|
}
|
|
75
|
-
|
|
74
|
+
|
|
76
75
|
&:nth-child(2n+2) {
|
|
77
76
|
background-color: @spin-dot-color-second;
|
|
78
77
|
animation: containerLoading 1s .45s ease-in-out infinite
|
|
79
78
|
}
|
|
80
|
-
|
|
79
|
+
|
|
81
80
|
&:nth-child(2n+3) {
|
|
82
81
|
background-color: @spin-dot-color-third;
|
|
83
82
|
animation: containerLoading 1s .3s ease-in-out infinite
|
|
84
83
|
}
|
|
85
|
-
|
|
84
|
+
|
|
86
85
|
&:nth-child(2n+4) {
|
|
87
86
|
background-color: @spin-dot-color-fourth;
|
|
88
87
|
animation: containerLoading 1s .15s ease-in-out infinite
|
|
89
88
|
}
|
|
90
|
-
|
|
89
|
+
|
|
91
90
|
@keyframes containerLoading {
|
|
92
91
|
50% {
|
|
93
92
|
transform: translateY(-10px);
|
|
@@ -103,24 +102,24 @@
|
|
|
103
102
|
// 组件加载动画
|
|
104
103
|
&-component {
|
|
105
104
|
.@{spin-prefix-cls}-dot-spin {
|
|
106
|
-
width:
|
|
107
|
-
height:
|
|
108
|
-
border:
|
|
105
|
+
width: @spin-component-spin-size;
|
|
106
|
+
height: @spin-component-spin-size;
|
|
107
|
+
border: @spin-component-spin-border solid @spin-component-dot-color-border;
|
|
109
108
|
border-radius: 50%;
|
|
110
109
|
position: relative;
|
|
111
110
|
box-sizing: border-box;
|
|
112
111
|
|
|
113
112
|
.@{spin-prefix-cls}-dot-item {
|
|
114
|
-
width:
|
|
115
|
-
height:
|
|
113
|
+
width: @spin-component-spin-size;
|
|
114
|
+
height: @spin-component-spin-size;
|
|
116
115
|
box-sizing: border-box;
|
|
117
|
-
border:
|
|
116
|
+
border: @spin-component-spin-border solid transparent;
|
|
118
117
|
// border-top-color: #5582f3;
|
|
119
118
|
border-right-color: @spin-component-dot-item-color-border;
|
|
120
119
|
border-radius: 50%;
|
|
121
120
|
position: absolute;
|
|
122
|
-
top: -
|
|
123
|
-
left: -
|
|
121
|
+
top: calc(-1 * @spin-component-spin-border);
|
|
122
|
+
left: calc(-1 * @spin-component-spin-border);
|
|
124
123
|
transform: rotate(-45deg);
|
|
125
124
|
animation: componentRotate 1s linear infinite;
|
|
126
125
|
|
|
@@ -161,4 +160,4 @@
|
|
|
161
160
|
flex-direction: column;
|
|
162
161
|
align-items: center;
|
|
163
162
|
}
|
|
164
|
-
}
|
|
163
|
+
}
|
package/es/spin/style/token.less
CHANGED
|
@@ -7,9 +7,15 @@
|
|
|
7
7
|
@spin-dot-color-second: var(~'@{spin-custom-prefix}-dot-color-backgroung-second', @color-logo-2);
|
|
8
8
|
@spin-dot-color-third: var(~'@{spin-custom-prefix}-dot-color-backgroung-third', @color-logo-3);
|
|
9
9
|
@spin-dot-color-fourth: var(~'@{spin-custom-prefix}-dot-color-backgroung-fourth', @color-logo-4);
|
|
10
|
-
@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #
|
|
10
|
+
@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #ebebeb);
|
|
11
11
|
@spin-component-dot-item-color-border: var(~'@{spin-custom-prefix}-component-dot-item-color-border', @color-theme);
|
|
12
12
|
|
|
13
13
|
// sizing
|
|
14
|
-
@spin-page-
|
|
15
|
-
@spin-
|
|
14
|
+
@spin-page-dot-item-sizing: var(~'@{spin-custom-prefix}-page-dot-item-sizing-square', 16px);
|
|
15
|
+
@spin-page-dot-spin-sizing: var(~'@{spin-custom-prefix}-page-dot-spin-sizing-square', 48px);
|
|
16
|
+
@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing-square', 5px);
|
|
17
|
+
@spin-component-spin-size: var(~'@{spin-custom-prefix}-dot-component-sizing-square', 24px);
|
|
18
|
+
@spin-component-spin-border: var(~'@{spin-custom-prefix}-dot-component-sizing-border', 2px);
|
|
19
|
+
|
|
20
|
+
// spacing
|
|
21
|
+
@spin-page-dot-spin-spacing-padding: var(~'@{spin-custom-prefix}-page-dot-spin-spacing-padding', 4px);
|
package/es/stepper/stepper.js
CHANGED
|
@@ -29,6 +29,7 @@ var InternalStepper = function InternalStepper(props, ref) {
|
|
|
29
29
|
stepBtnClassName = inputNumberProps.stepBtnClassName,
|
|
30
30
|
max = inputNumberProps.max,
|
|
31
31
|
min = inputNumberProps.min,
|
|
32
|
+
disabled = inputNumberProps.disabled,
|
|
32
33
|
propsValue = inputNumberProps.value,
|
|
33
34
|
defaultValue = inputNumberProps.defaultValue;
|
|
34
35
|
var inputPrefixCls = getPrefixCls(prefixCls, 'inputNumber', customPrefixcls);
|
|
@@ -70,10 +71,11 @@ var InternalStepper = function InternalStepper(props, ref) {
|
|
|
70
71
|
return null;
|
|
71
72
|
}
|
|
72
73
|
|
|
73
|
-
var decreaseClassName = getStepBtnClassNames('base', 'decrease', showPlusdisabled);
|
|
74
|
+
var decreaseClassName = getStepBtnClassNames('base', 'decrease', showPlusdisabled || disabled);
|
|
74
75
|
return /*#__PURE__*/React.createElement("span", {
|
|
75
76
|
className: decreaseClassName,
|
|
76
77
|
onMouseDown: function onMouseDown() {
|
|
78
|
+
if (disabled) return;
|
|
77
79
|
handleStepMouseDown('minus');
|
|
78
80
|
}
|
|
79
81
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -83,10 +85,11 @@ var InternalStepper = function InternalStepper(props, ref) {
|
|
|
83
85
|
};
|
|
84
86
|
|
|
85
87
|
var getStepSuffix = function getStepSuffix() {
|
|
86
|
-
var increaseClassName = getStepBtnClassNames('base', 'increase', showMinusdisabled);
|
|
88
|
+
var increaseClassName = getStepBtnClassNames('base', 'increase', showMinusdisabled || disabled);
|
|
87
89
|
return type === 'embed' ? getEmbedStepView() : /*#__PURE__*/React.createElement("span", {
|
|
88
90
|
className: increaseClassName,
|
|
89
91
|
onMouseDown: function onMouseDown() {
|
|
92
|
+
if (disabled) return;
|
|
90
93
|
handleStepMouseDown('plus');
|
|
91
94
|
}
|
|
92
95
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -183,13 +186,14 @@ var InternalStepper = function InternalStepper(props, ref) {
|
|
|
183
186
|
var _classNames2, _classNames3;
|
|
184
187
|
|
|
185
188
|
var embedStepClassName = getStepBtnClassNames('embed');
|
|
186
|
-
var plusClassName = classNames("".concat(inputPrefixCls, "-embedStep-plus"), (_classNames2 = {}, _defineProperty(_classNames2, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-embedStep-disabled"), showMinusdisabled), _classNames2));
|
|
187
|
-
var minusClassName = classNames("".concat(inputPrefixCls, "-embedStep-minus"), (_classNames3 = {}, _defineProperty(_classNames3, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames3, "".concat(inputPrefixCls, "-embedStep-disabled"), showPlusdisabled), _classNames3));
|
|
189
|
+
var plusClassName = classNames("".concat(inputPrefixCls, "-embedStep-plus"), (_classNames2 = {}, _defineProperty(_classNames2, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-embedStep-disabled"), showMinusdisabled || disabled), _classNames2));
|
|
190
|
+
var minusClassName = classNames("".concat(inputPrefixCls, "-embedStep-minus"), (_classNames3 = {}, _defineProperty(_classNames3, stepBtnClassName, stepBtnClassName), _defineProperty(_classNames3, "".concat(inputPrefixCls, "-embedStep-disabled"), showPlusdisabled || disabled), _classNames3));
|
|
188
191
|
return /*#__PURE__*/React.createElement("span", {
|
|
189
192
|
className: embedStepClassName
|
|
190
193
|
}, /*#__PURE__*/React.createElement("span", {
|
|
191
194
|
className: plusClassName,
|
|
192
195
|
onMouseDown: function onMouseDown() {
|
|
196
|
+
if (disabled) return;
|
|
193
197
|
handleStepMouseDown('plus');
|
|
194
198
|
}
|
|
195
199
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -198,6 +202,7 @@ var InternalStepper = function InternalStepper(props, ref) {
|
|
|
198
202
|
})), /*#__PURE__*/React.createElement("span", {
|
|
199
203
|
className: minusClassName,
|
|
200
204
|
onMouseDown: function onMouseDown() {
|
|
205
|
+
if (disabled) return;
|
|
201
206
|
handleStepMouseDown('minus');
|
|
202
207
|
}
|
|
203
208
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -152,6 +152,7 @@
|
|
|
152
152
|
}
|
|
153
153
|
.kd-inputNumber-baseStep-disabled {
|
|
154
154
|
cursor: not-allowed;
|
|
155
|
+
color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
|
|
155
156
|
}
|
|
156
157
|
.kd-inputNumber-baseStep-disabled .kd-inputNumber-icon {
|
|
157
158
|
color: unset !important;
|
|
@@ -244,6 +245,7 @@
|
|
|
244
245
|
}
|
|
245
246
|
.kd-inputNumber-embedStep-disabled {
|
|
246
247
|
cursor: not-allowed !important;
|
|
248
|
+
color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
|
|
247
249
|
}
|
|
248
250
|
.kd-inputNumber-embedStep-disabled .kd-inputNumber-icon {
|
|
249
251
|
color: unset !important;
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
|
|
54
54
|
&-disabled {
|
|
55
55
|
cursor: not-allowed;
|
|
56
|
+
color: @stepper-icon-color-disabled;
|
|
56
57
|
|
|
57
58
|
.@{inputNumber-prefix-cls}-icon {
|
|
58
59
|
color: unset !important;
|
|
@@ -104,6 +105,7 @@
|
|
|
104
105
|
|
|
105
106
|
&-disabled {
|
|
106
107
|
cursor: not-allowed !important;
|
|
108
|
+
color: @stepper-icon-color-disabled;
|
|
107
109
|
|
|
108
110
|
.@{inputNumber-prefix-cls}-icon {
|
|
109
111
|
color: unset !important;
|
|
@@ -7,15 +7,14 @@
|
|
|
7
7
|
@stepper-icon-color-hover: var(~'@{stepper-prefix}-icon-color-hover', @color-theme);
|
|
8
8
|
@stepper-color-border-strong: var(~'@{stepper-prefix}-color-border-strong', @color-border-strong);
|
|
9
9
|
@stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', transparent);
|
|
10
|
+
@stepper-icon-color-disabled: var(~'@{stepper-prefix}-icon-color-disabled', @color-disabled);
|
|
10
11
|
|
|
11
12
|
// font
|
|
12
13
|
@stepper-input-font-size: var(~'@{stepper-prefix}-input-font-size', 12px);
|
|
13
14
|
|
|
14
|
-
|
|
15
15
|
// motion
|
|
16
16
|
@stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
|
|
17
17
|
|
|
18
|
-
|
|
19
18
|
// sizing
|
|
20
19
|
@stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
|
|
21
20
|
@stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
|
package/es/style/icon/kdicon.css
CHANGED
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
.kdicon-fixed-solid:before { content: "\e65f"; }
|
|
100
100
|
.kdicon-fixed-window:before { content: "\e6d1"; }
|
|
101
101
|
.kdicon-fixed:before { content: "\e6e3"; }
|
|
102
|
+
.kdicon-fold:before { content: "\e71d"; }
|
|
102
103
|
.kdicon-foldmenu:before { content: "\e70e"; }
|
|
103
104
|
.kdicon-font-background-solid:before { content: "\e673"; }
|
|
104
105
|
.kdicon-font-color-solid:before { content: "\e674"; }
|
|
@@ -209,7 +210,7 @@
|
|
|
209
210
|
.kdicon-two-window:before { content: "\e6f6"; }
|
|
210
211
|
.kdicon-underline-solid:before { content: "\e671"; }
|
|
211
212
|
.kdicon-unfold-all:before { content: "\e6ad"; }
|
|
212
|
-
.kdicon-unfold:before { content: "\
|
|
213
|
+
.kdicon-unfold:before { content: "\e71e"; }
|
|
213
214
|
.kdicon-unfoldmenu:before { content: "\e70d"; }
|
|
214
215
|
.kdicon-unlock-solid:before { content: "\e666"; }
|
|
215
216
|
.kdicon-unlock:before { content: "\e69e"; }
|
|
Binary file
|
|
@@ -54,15 +54,14 @@
|
|
|
54
54
|
@bg2: #f2f2f2; // 底色灰背景
|
|
55
55
|
@bg3: rgba(255, 255, 255, 0.65); // 次级底色背景
|
|
56
56
|
@contain-bg: #fafafa; // 容器内的灰背景
|
|
57
|
-
@radius-size: 2px; // 圆角值
|
|
58
57
|
@input-color: #999; // 线型录入的默认态
|
|
59
58
|
@strong-border-color: #d9d9d9; // 强线条 --带操作
|
|
60
59
|
@strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
|
|
61
60
|
@strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
|
|
62
61
|
@weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时
|
|
63
|
-
@logo-color-1: #
|
|
64
|
-
@logo-color-2: #
|
|
65
|
-
@logo-color-3: #
|
|
62
|
+
@logo-color-1: #2486ee;
|
|
63
|
+
@logo-color-2: #02ccfe;
|
|
64
|
+
@logo-color-3: #05c8c7;
|
|
66
65
|
@logo-color-4: #a06eff;
|
|
67
66
|
// @shadow-on-hover: ; // 悬停时阴影
|
|
68
67
|
@white: #fff;
|
package/es/tabs/style/index.css
CHANGED