@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.
Files changed (101) hide show
  1. package/CHANGELOG.md +61 -0
  2. package/dist/default-theme.js +4 -4
  3. package/dist/kdesign-complete.less +164 -88
  4. package/dist/kdesign.css +160 -86
  5. package/dist/kdesign.css.map +1 -1
  6. package/dist/kdesign.js +392 -253
  7. package/dist/kdesign.js.map +1 -1
  8. package/dist/kdesign.min.css +4 -4
  9. package/dist/kdesign.min.js +6 -6
  10. package/dist/kdesign.min.js.map +1 -1
  11. package/es/_utils/usePopper.js +79 -46
  12. package/es/alert/alert.js +2 -2
  13. package/es/alert/style/index.css +27 -11
  14. package/es/alert/style/index.less +24 -10
  15. package/es/alert/style/mixin.less +8 -2
  16. package/es/alert/style/token.less +16 -8
  17. package/es/config-provider/compDefaultProps.d.ts +1 -0
  18. package/es/config-provider/compDefaultProps.js +2 -1
  19. package/es/drawer/drawer.js +1 -0
  20. package/es/dropdown/dropdown.js +16 -6
  21. package/es/dropdown/style/index.css +13 -14
  22. package/es/dropdown/style/index.less +4 -5
  23. package/es/dropdown/style/token.less +6 -5
  24. package/es/radio/style/index.css +7 -1
  25. package/es/radio/style/index.less +9 -1
  26. package/es/search/style/index.css +3 -3
  27. package/es/select/select.js +1 -1
  28. package/es/spin/style/index.css +25 -26
  29. package/es/spin/style/index.less +18 -19
  30. package/es/spin/style/token.less +9 -3
  31. package/es/stepper/stepper.js +9 -4
  32. package/es/stepper/style/index.css +2 -0
  33. package/es/stepper/style/index.less +2 -0
  34. package/es/stepper/style/token.less +1 -2
  35. package/es/style/icon/kdicon.css +2 -1
  36. package/es/style/icon/kdicon.woff +0 -0
  37. package/es/style/themes/default.less +3 -4
  38. package/es/tabs/style/index.css +1 -0
  39. package/es/tabs/style/index.less +1 -0
  40. package/es/timeline/style/index.css +22 -21
  41. package/es/timeline/style/index.less +2 -2
  42. package/es/timeline/style/token.less +4 -7
  43. package/es/tooltip/tooltip.js +1 -1
  44. package/es/tree/style/index.css +56 -7
  45. package/es/tree/style/index.less +26 -18
  46. package/es/tree/style/mixin.less +25 -1
  47. package/es/tree/style/token.less +6 -4
  48. package/es/tree/tree.d.ts +2 -0
  49. package/es/tree/tree.js +77 -20
  50. package/es/tree/treeHooks.d.ts +1 -1
  51. package/es/tree/treeHooks.js +3 -4
  52. package/es/tree/treeNode.d.ts +1 -0
  53. package/es/tree/treeNode.js +45 -49
  54. package/es/tree/utils/treeUtils.d.ts +6 -3
  55. package/es/tree/utils/treeUtils.js +66 -42
  56. package/lib/_utils/usePopper.js +79 -46
  57. package/lib/alert/alert.js +2 -2
  58. package/lib/alert/style/index.css +27 -11
  59. package/lib/alert/style/index.less +24 -10
  60. package/lib/alert/style/mixin.less +8 -2
  61. package/lib/alert/style/token.less +16 -8
  62. package/lib/config-provider/compDefaultProps.d.ts +1 -0
  63. package/lib/config-provider/compDefaultProps.js +2 -1
  64. package/lib/drawer/drawer.js +1 -0
  65. package/lib/dropdown/dropdown.js +15 -6
  66. package/lib/dropdown/style/index.css +13 -14
  67. package/lib/dropdown/style/index.less +4 -5
  68. package/lib/dropdown/style/token.less +6 -5
  69. package/lib/radio/style/index.css +7 -1
  70. package/lib/radio/style/index.less +9 -1
  71. package/lib/search/style/index.css +3 -3
  72. package/lib/select/select.js +1 -1
  73. package/lib/spin/style/index.css +25 -26
  74. package/lib/spin/style/index.less +18 -19
  75. package/lib/spin/style/token.less +9 -3
  76. package/lib/stepper/stepper.js +9 -4
  77. package/lib/stepper/style/index.css +2 -0
  78. package/lib/stepper/style/index.less +2 -0
  79. package/lib/stepper/style/token.less +1 -2
  80. package/lib/style/icon/kdicon.css +2 -1
  81. package/lib/style/icon/kdicon.woff +0 -0
  82. package/lib/style/themes/default.less +3 -4
  83. package/lib/tabs/style/index.css +1 -0
  84. package/lib/tabs/style/index.less +1 -0
  85. package/lib/timeline/style/index.css +22 -21
  86. package/lib/timeline/style/index.less +2 -2
  87. package/lib/timeline/style/token.less +4 -7
  88. package/lib/tooltip/tooltip.js +1 -1
  89. package/lib/tree/style/index.css +56 -7
  90. package/lib/tree/style/index.less +26 -18
  91. package/lib/tree/style/mixin.less +25 -1
  92. package/lib/tree/style/token.less +6 -4
  93. package/lib/tree/tree.d.ts +2 -0
  94. package/lib/tree/tree.js +78 -20
  95. package/lib/tree/treeHooks.d.ts +1 -1
  96. package/lib/tree/treeHooks.js +3 -4
  97. package/lib/tree/treeNode.d.ts +1 -0
  98. package/lib/tree/treeNode.js +46 -48
  99. package/lib/tree/utils/treeUtils.d.ts +6 -3
  100. package/lib/tree/utils/treeUtils.js +64 -42
  101. 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-theme;
84
- background-color: @dropdown-item-active-bg-color;
83
+ color: @dropdown-item-active-color;
85
84
 
86
85
  > a {
87
- color: @color-theme;
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-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-active', @color-theme-light-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', 136px);
17
- @dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 320px);
18
- @dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 336px);
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', 8px);
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
 
@@ -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
- &::before {
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, #2386ee));
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: #00ccfe;
489
+ background-color: #02ccfe;
490
490
  }
491
491
  .kd-quick-search-npl-loading-item:nth-child(3) {
492
- background-color: #05c8c8;
492
+ background-color: #05c8c7;
493
493
  }
494
494
  .kd-quick-search-npl-loading-item:nth-child(4) {
495
495
  background-color: #a06eff;
@@ -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,
@@ -102,9 +102,9 @@
102
102
  */
103
103
  /* ----------- zIndex ——————---- end */
104
104
  .kd-spin-page .kd-spin-dot-spin {
105
- width: 50px;
106
- height: 50px;
107
- padding: 5px;
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, 15px);
123
- height: var(--kd-c-spin-page-sizing, 15px);
124
- background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
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, #00ccfe));
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, #05c8c8));
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.3);
150
- transform: scale(1.3);
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.3);
160
- transform: scale(1.3);
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, #2386ee));
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, #00ccfe));
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, #05c8c8));
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: 13px;
227
- height: 13px;
228
- border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1);
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: 13px;
236
- height: 13px;
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: 1px solid transparent;
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: -1px;
244
- left: -1px;
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;
@@ -12,9 +12,9 @@
12
12
  // right: 0;
13
13
 
14
14
  .@{spin-prefix-cls}-dot-spin {
15
- width: 50px;
16
- height: 50px;
17
- padding: 5px;
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-size, @spin-dot-color-first);
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.3);
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: 13px;
107
- height: 13px;
108
- border: 1px solid @spin-component-dot-color-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: 13px;
115
- height: 13px;
113
+ width: @spin-component-spin-size;
114
+ height: @spin-component-spin-size;
116
115
  box-sizing: border-box;
117
- border: 1px solid transparent;
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: -1px;
123
- left: -1px;
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
+ }
@@ -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', #e1e1e1);
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-size: var(~'@{spin-custom-prefix}-page-sizing', 15px);
15
- @spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing', 5px);
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);
@@ -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);
@@ -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: "\e6bb"; }
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: #2386ee;
64
- @logo-color-2: #00ccfe;
65
- @logo-color-3: #05c8c8;
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;
@@ -294,6 +294,7 @@
294
294
  min-width: 120px;
295
295
  height: 100%;
296
296
  font-size: 0;
297
+ border-top: 1px solid transparent;
297
298
  }
298
299
  .kd-tabs-navs-card.kd-tabs-navs-left::before,
299
300
  .kd-tabs-navs-card.kd-tabs-navs-right::before,
@@ -156,6 +156,7 @@
156
156
  min-width: 120px;
157
157
  height: 100%;
158
158
  font-size: 0;
159
+ border-top: 1px solid transparent;
159
160
  &::before, &::after {
160
161
  position: absolute;
161
162
  content: '';