@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
@@ -217,13 +217,13 @@ var Alert = function Alert(props) {
217
217
  };
218
218
 
219
219
  var iconNode = /*#__PURE__*/_react.default.createElement("div", {
220
- className: "".concat(alertPrefixCls, "-icon")
220
+ className: (0, _classnames.default)("".concat(alertPrefixCls, "-icon"), getAlertColorType('icon'))
221
221
  }, icon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
222
222
  type: alertIconType
223
223
  }));
224
224
 
225
225
  var AlertComp = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
226
- className: (0, _classnames.default)(alertClasses, getAlertColorType('bg'), getAlertColorType('font'))
226
+ className: (0, _classnames.default)(alertClasses, getAlertColorType('bg'), getAlertColorType('border'))
227
227
  }, events, {
228
228
  ref: alertRef
229
229
  }), showIcon && iconNode, /*#__PURE__*/_react.default.createElement("div", {
@@ -109,12 +109,14 @@
109
109
  z-index: var(--kd-g-z-index-apex, 9999);
110
110
  display: none;
111
111
  width: 100%;
112
- padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
112
+ padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
113
113
  -webkit-box-align: center;
114
114
  -ms-flex-align: center;
115
115
  align-items: center;
116
116
  -webkit-transition: display 3s;
117
117
  transition: display 3s;
118
+ border-radius: var(--kd-c-alert-radius-border, 4px);
119
+ border: 1px solid;
118
120
  }
119
121
  .kd-alert-banner-container {
120
122
  display: -webkit-box;
@@ -140,23 +142,24 @@
140
142
  .kd-alert.alert-info-bg-color {
141
143
  background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
142
144
  }
143
- .kd-alert.alert-success-font-color {
144
- color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
145
+ .kd-alert.alert-success-border-color {
146
+ border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
145
147
  }
146
- .kd-alert.alert-warning-font-color {
147
- color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
148
+ .kd-alert.alert-warning-border-color {
149
+ border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
148
150
  }
149
- .kd-alert.alert-error-font-color {
150
- color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
151
+ .kd-alert.alert-error-border-color {
152
+ border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
151
153
  }
152
- .kd-alert.alert-info-font-color {
153
- color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
154
+ .kd-alert.alert-info-border-color {
155
+ border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
154
156
  }
155
157
  .kd-alert-icon {
156
158
  display: -webkit-box;
157
159
  display: -ms-flexbox;
158
160
  display: flex;
159
161
  cursor: default;
162
+ height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
160
163
  margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
161
164
  font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
162
165
  }
@@ -164,9 +167,22 @@
164
167
  -ms-flex-item-align: center;
165
168
  align-self: center;
166
169
  }
170
+ .kd-alert-icon.alert-success-icon-color {
171
+ color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
172
+ }
173
+ .kd-alert-icon.alert-warning-icon-color {
174
+ color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
175
+ }
176
+ .kd-alert-icon.alert-error-icon-color {
177
+ color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
178
+ }
179
+ .kd-alert-icon.alert-info-icon-color {
180
+ color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
181
+ }
167
182
  .kd-alert-message {
183
+ color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
168
184
  font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
169
- line-height: 18px;
185
+ line-height: 16px;
170
186
  display: -webkit-box;
171
187
  display: -ms-flexbox;
172
188
  display: flex;
@@ -196,10 +212,10 @@
196
212
  display: -webkit-box;
197
213
  display: -ms-flexbox;
198
214
  display: flex;
215
+ height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
199
216
  margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
200
217
  color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
201
218
  font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
202
- justify-self: flex-end;
203
219
  cursor: pointer;
204
220
  }
205
221
  .kd-alert-close-icon:hover {
@@ -16,11 +16,18 @@
16
16
  @info: @alert-info-bg-color;
17
17
  }
18
18
 
19
- .alert-font-type-set() {
20
- @success: @alert-success-font-color;
21
- @warning: @alert-warning-font-color;
22
- @error: @alert-error-font-color;
23
- @info: @alert-info-font-color;
19
+ .alert-icon-type-set() {
20
+ @success: @alert-success-icon-color;
21
+ @warning: @alert-warning-icon-color;
22
+ @error: @alert-error-icon-color;
23
+ @info: @alert-info-icon-color;
24
+ }
25
+
26
+ .alert-border-type-set() {
27
+ @success: @alert-success-border-color;
28
+ @warning: @alert-warning-border-color;
29
+ @error: @alert-error-border-color;
30
+ @info: @alert-info-border-color;
24
31
  }
25
32
 
26
33
  @alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
@@ -36,9 +43,11 @@
36
43
  z-index: @z-index-apex;
37
44
  display: none;
38
45
  width: 100%;
39
- padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
46
+ padding: @alert-padding-vertical @alert-padding-horizontal;
40
47
  align-items: center;
41
48
  transition: display 3s;
49
+ border-radius: @alert-radius-border;
50
+ border: 1px solid;
42
51
  }
43
52
  &-banner-container {
44
53
  display: flex;
@@ -50,19 +59,24 @@
50
59
  each(.alert-bg-type-set(), {
51
60
  .alert-bg-type(@key, @value);
52
61
  });
53
- each(.alert-font-type-set(), {
54
- .alert-font-type(@key, @value);
62
+ each(.alert-border-type-set(), {
63
+ .alert-border-type(@key, @value);
55
64
  });
56
65
  &-icon {
57
66
  display: flex;
58
67
  cursor: default;
59
68
  .icon-center();
69
+ height: @alert-message-icon-font-size;
60
70
  margin-right: @alert-message-icon-margin-right;
61
71
  font-size: @alert-message-icon-font-size;
72
+ each(.alert-icon-type-set(), {
73
+ .alert-icon-type(@key, @value);
74
+ });
62
75
  }
63
76
  &-message {
77
+ color: @alert-message-color-text;
64
78
  font-size: @alert-message-font-size;
65
- line-height: 18px;
79
+ line-height: 16px;
66
80
  display: flex;
67
81
  flex-grow: 1;
68
82
  cursor: default;
@@ -86,10 +100,10 @@
86
100
  }
87
101
  &-close-icon {
88
102
  display: flex;
103
+ height: @alert-message-icon-font-size;
89
104
  margin-left: @alert-close-icon-margin-left;
90
105
  color: @alert-close-icon-color;
91
106
  font-size: @alert-close-icon-font-size;
92
- justify-self: flex-end;
93
107
  cursor: pointer;
94
108
  &:hover {
95
109
  color: @alert-close-icon-color-hover;
@@ -4,12 +4,18 @@
4
4
  }
5
5
  }
6
6
 
7
- .alert-font-type(@type, @color) {
8
- &.alert-@{type}-font-color {
7
+ .alert-icon-type(@type, @color) {
8
+ &.alert-@{type}-icon-color {
9
9
  color: @color
10
10
  }
11
11
  }
12
12
 
13
+ .alert-border-type(@type, @color) {
14
+ &.alert-@{type}-border-color {
15
+ border-color: @color
16
+ }
17
+ }
18
+
13
19
  .square(@side-length) {
14
20
  width: @side-length;
15
21
  height: @side-length;
@@ -8,10 +8,16 @@
8
8
  @alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
9
9
  @alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
10
10
 
11
- @alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
12
- @alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色
13
- @alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
14
- @alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
11
+ @alert-message-color-text: var(~'@{alert-custom-prefix}-color-text', @color-text-primary); // 反馈浮层提示的文字色
12
+ @alert-success-icon-color: var(~'@{alert-custom-prefix}-color-icon-success', @color-success); // 反馈浮层成功提示的图标颜色
13
+ @alert-warning-icon-color: var(~'@{alert-custom-prefix}-color-icon-warning', @color-warning); // 反馈浮层警告提示的图标颜色
14
+ @alert-error-icon-color: var(~'@{alert-custom-prefix}-color-icon-error', @color-error); // 反馈浮层错误提示的图标颜色
15
+ @alert-info-icon-color: var(~'@{alert-custom-prefix}-color-icon-info', @color-ongoing); // 反馈浮层一般提示的图标颜色
16
+
17
+ @alert-success-border-color: var(~'@{alert-custom-prefix}-color-border-success', #DCFAE4); // 反馈浮层成功提示的边框色
18
+ @alert-warning-border-color: var(~'@{alert-custom-prefix}-color-border-warning', #FFF1D4); // 反馈浮层警告提示的边框色
19
+ @alert-error-border-color: var(~'@{alert-custom-prefix}-color-border-error', #FFDBE0); // 反馈浮层错误提示的边框色
20
+ @alert-info-border-color: var(~'@{alert-custom-prefix}-color-border-info', #E0EFFF); // 反馈浮层一般提示的边框色
15
21
 
16
22
  @alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary);
17
23
  @alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover);
@@ -22,8 +28,10 @@
22
28
  @alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
23
29
 
24
30
  // spacing
25
- @alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
26
- @alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
27
- @alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
31
+ @alert-padding-vertical: var(~'@{alert-custom-prefix}-sizing-padding-vertical', 12px);
32
+ @alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 20px);
28
33
  @alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
29
- @alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
34
+ @alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
35
+
36
+ // radius
37
+ @alert-radius-border: var(~'@{alert-custom-prefix}-radius-border', 4px);
@@ -305,6 +305,7 @@ declare const compDefaultProps: {
305
305
  virtual: boolean;
306
306
  switcherIcon: () => JSX.Element;
307
307
  estimatedItemSize: number;
308
+ expandOnClickNode: boolean;
308
309
  };
309
310
  TreeNode: {};
310
311
  ToolTip: {
@@ -337,7 +337,8 @@ var compDefaultProps = {
337
337
  type: "arrow-right-solid"
338
338
  });
339
339
  },
340
- estimatedItemSize: 32
340
+ estimatedItemSize: 32,
341
+ expandOnClickNode: true
341
342
  },
342
343
  TreeNode: {},
343
344
  ToolTip: {
@@ -241,6 +241,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
241
241
  width: width,
242
242
  transform: transform
243
243
  } : {
244
+ height: height,
244
245
  transform: transform
245
246
  });
246
247
 
@@ -35,6 +35,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
35
35
 
36
36
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
37
 
38
+ var findItem = function findItem(element) {
39
+ var isItem = element.className === 'kd-dropdown-menu-item';
40
+
41
+ if (isItem) {
42
+ return element;
43
+ } else {
44
+ return element.parentNode ? findItem(element.parentNode) : null;
45
+ }
46
+ };
47
+
38
48
  var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
39
49
  var _a, _b, _c;
40
50
 
@@ -65,7 +75,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
65
75
  setVisible(!!props.visible);
66
76
  }, [props.visible]);
67
77
  var child = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
68
- ref: ref,
78
+ ref: children.ref || ref,
69
79
  className: (0, _classnames.default)("".concat(prefixCls, "-trigger"), children.props.className, {
70
80
  disabled: disabled
71
81
  })
@@ -83,13 +93,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
83
93
  var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
84
94
 
85
95
  var handleItemClick = function handleItemClick(e) {
86
- var _a, _b;
96
+ var _a;
87
97
 
88
- var currentTarget = e.target;
89
- var parentTarget = currentTarget.parentNode;
90
- var key = ((_a = currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.key) || ((_b = currentTarget.parentNode.dataset) === null || _b === void 0 ? void 0 : _b.key);
98
+ var item = findItem(e.target);
99
+ var key = (_a = item === null || item === void 0 ? void 0 : item.dataset) === null || _a === void 0 ? void 0 : _a.key;
91
100
 
92
- if (currentTarget.className.indexOf('disabled') === -1 && parentTarget.className.indexOf('disabled') === -1 && key) {
101
+ if ((item === null || item === void 0 ? void 0 : item.className.indexOf('disabled')) === -1 && key) {
93
102
  if (isMenu && menu.props.onClick) {
94
103
  menu.props.onClick(key);
95
104
  } else if (onItemClick) {
@@ -137,10 +137,10 @@
137
137
  opacity: 1;
138
138
  visibility: visible;
139
139
  z-index: var(--kd-g-z-index-popper, 1050);
140
- background-color: var(--kd-g-color-background, #fff);
140
+ background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
141
141
  border-radius: var(--kd-g-radius-border, 2px);
142
- min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
143
- max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
142
+ min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
143
+ max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
144
144
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
145
145
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
146
146
  }
@@ -151,7 +151,7 @@
151
151
  .kd-dropdown.arrow::before {
152
152
  position: absolute;
153
153
  z-index: -2;
154
- background: var(--kd-g-color-background, #fff);
154
+ background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
155
155
  border-style: solid;
156
156
  border-width: var(--arrowSize);
157
157
  -webkit-transform: rotate(45deg);
@@ -166,7 +166,7 @@
166
166
  bottom: 0;
167
167
  left: 0;
168
168
  content: '';
169
- background: var(--kd-g-color-background, #fff);
169
+ background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
170
170
  border-radius: var(--kd-g-radius-border, 2px);
171
171
  }
172
172
  .kd-dropdown.arrow.bottomLeft::before,
@@ -176,7 +176,7 @@
176
176
  top: var(--arrowSpill);
177
177
  -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
178
178
  box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
179
- border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
179
+ border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
180
180
  }
181
181
  .kd-dropdown.arrow.topLeft::before,
182
182
  .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
185
185
  bottom: var(--arrowSpill);
186
186
  -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
187
187
  box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
188
- border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
188
+ border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
189
189
  }
190
190
  .kd-dropdown.arrow.leftTop::before,
191
191
  .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
194
194
  right: var(--arrowSpill);
195
195
  -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
196
196
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
197
- border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
197
+ border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
198
198
  }
199
199
  .kd-dropdown.arrow.rightTop::before,
200
200
  .kd-dropdown.arrow.right::before,
@@ -203,11 +203,11 @@
203
203
  left: var(--arrowSpill);
204
204
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
205
205
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
206
- border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
206
+ border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
207
207
  }
208
208
  .kd-dropdown-menu {
209
- max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
210
- padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
209
+ max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
210
+ padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
211
211
  overflow-y: auto;
212
212
  }
213
213
  .kd-dropdown-menu-item {
@@ -234,12 +234,11 @@
234
234
  }
235
235
  .kd-dropdown-menu-item:not(.disabled):active,
236
236
  .kd-dropdown-menu-item:not(.disabled).selected {
237
- color: var(--kd-g-color-theme, #5582f3);
238
- background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
237
+ color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
239
238
  }
240
239
  .kd-dropdown-menu-item:not(.disabled):active > a,
241
240
  .kd-dropdown-menu-item:not(.disabled).selected > a {
242
- color: var(--kd-g-color-theme, #5582f3);
241
+ color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
243
242
  }
244
243
  .kd-dropdown-menu-item.divided::before {
245
244
  content: '';
@@ -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;
@@ -476,7 +476,7 @@ var InternalSelect = function InternalSelect(props, ref) {
476
476
  var selectedVal = multipleRef.current.selectedVal; // 选择器下拉icon样式
477
477
 
478
478
  var arrowIconCls = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
479
- var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : selectedVal);
479
+ var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '');
480
480
  var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
481
481
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
482
482
  onClick: handleReset,