@kdcloudjs/kdesign 1.7.22 → 1.7.24

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 (108) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/kdesign-complete.less +75 -21
  3. package/dist/kdesign.css +79 -12
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +425 -180
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.js +36 -19
  11. package/es/button/style/index.css +3 -0
  12. package/es/button/style/index.less +3 -3
  13. package/es/button/style/mixin.less +2 -1
  14. package/es/button/style/token.less +3 -0
  15. package/es/checkbox/style/index.css +1 -0
  16. package/es/checkbox/style/index.less +1 -0
  17. package/es/checkbox/style/token.less +1 -0
  18. package/es/city-picker/city-picker.js +6 -3
  19. package/es/city-picker/interface.d.ts +1 -0
  20. package/es/city-picker/style/index.css +2 -0
  21. package/es/city-picker/style/index.less +1 -0
  22. package/es/filter/style/index.css +6 -0
  23. package/es/filter/style/index.less +7 -0
  24. package/es/filter/style/token.less +4 -0
  25. package/es/form/style/index.css +1 -1
  26. package/es/form/style/index.less +1 -1
  27. package/es/form/style/token.less +1 -1
  28. package/es/input-number/inputNumber.js +5 -2
  29. package/es/menu/style/index.css +2 -1
  30. package/es/menu/style/mixin.less +2 -1
  31. package/es/menu/style/token.less +2 -0
  32. package/es/radio/style/index.css +8 -0
  33. package/es/radio/style/index.less +6 -1
  34. package/es/radio/style/token.less +3 -0
  35. package/es/search/search.js +2 -1
  36. package/es/search/style/index.css +1 -0
  37. package/es/search/style/index.less +1 -0
  38. package/es/search/style/token.less +1 -0
  39. package/es/select/select.js +3 -2
  40. package/es/select/style/index.css +6 -3
  41. package/es/select/style/index.less +10 -4
  42. package/es/select/style/token.less +1 -1
  43. package/es/style/core/motion/slide.less +5 -2
  44. package/es/style/index.css +36 -4
  45. package/es/table/api.js +19 -3
  46. package/es/tag/style/index.css +6 -0
  47. package/es/tag/style/index.less +3 -3
  48. package/es/tag/style/mixin.less +3 -1
  49. package/es/tag/style/token.less +2 -0
  50. package/es/timeline/style/index.css +2 -0
  51. package/es/timeline/style/index.less +3 -0
  52. package/es/timeline/style/token.less +2 -0
  53. package/es/transfer/style/index.css +2 -2
  54. package/es/transfer/style/index.less +2 -2
  55. package/es/transfer/style/token.less +1 -0
  56. package/es/tree/style/index.css +2 -0
  57. package/es/tree/style/index.less +2 -0
  58. package/es/tree/style/token.less +2 -0
  59. package/lib/_utils/usePopper.js +36 -19
  60. package/lib/button/style/index.css +3 -0
  61. package/lib/button/style/index.less +3 -3
  62. package/lib/button/style/mixin.less +2 -1
  63. package/lib/button/style/token.less +3 -0
  64. package/lib/checkbox/style/index.css +1 -0
  65. package/lib/checkbox/style/index.less +1 -0
  66. package/lib/checkbox/style/token.less +1 -0
  67. package/lib/city-picker/city-picker.js +6 -3
  68. package/lib/city-picker/interface.d.ts +1 -0
  69. package/lib/city-picker/style/index.css +2 -0
  70. package/lib/city-picker/style/index.less +1 -0
  71. package/lib/filter/style/index.css +6 -0
  72. package/lib/filter/style/index.less +7 -0
  73. package/lib/filter/style/token.less +4 -0
  74. package/lib/form/style/index.css +1 -1
  75. package/lib/form/style/index.less +1 -1
  76. package/lib/form/style/token.less +1 -1
  77. package/lib/input-number/inputNumber.js +5 -2
  78. package/lib/menu/style/index.css +2 -1
  79. package/lib/menu/style/mixin.less +2 -1
  80. package/lib/menu/style/token.less +2 -0
  81. package/lib/radio/style/index.css +8 -0
  82. package/lib/radio/style/index.less +6 -1
  83. package/lib/radio/style/token.less +3 -0
  84. package/lib/search/search.js +2 -1
  85. package/lib/search/style/index.css +1 -0
  86. package/lib/search/style/index.less +1 -0
  87. package/lib/search/style/token.less +1 -0
  88. package/lib/select/select.js +3 -2
  89. package/lib/select/style/index.css +6 -3
  90. package/lib/select/style/index.less +10 -4
  91. package/lib/select/style/token.less +1 -1
  92. package/lib/style/core/motion/slide.less +5 -2
  93. package/lib/style/index.css +36 -4
  94. package/lib/table/api.js +19 -3
  95. package/lib/tag/style/index.css +6 -0
  96. package/lib/tag/style/index.less +3 -3
  97. package/lib/tag/style/mixin.less +3 -1
  98. package/lib/tag/style/token.less +2 -0
  99. package/lib/timeline/style/index.css +2 -0
  100. package/lib/timeline/style/index.less +3 -0
  101. package/lib/timeline/style/token.less +2 -0
  102. package/lib/transfer/style/index.css +2 -2
  103. package/lib/transfer/style/index.less +2 -2
  104. package/lib/transfer/style/token.less +1 -0
  105. package/lib/tree/style/index.css +2 -0
  106. package/lib/tree/style/index.less +2 -0
  107. package/lib/tree/style/token.less +2 -0
  108. package/package.json +2 -2
@@ -100,6 +100,19 @@ var getScrollDist = function getScrollDist(el, container) {
100
100
  }
101
101
  return elScroll;
102
102
  };
103
+ var getRealDom = function getRealDom(locatorRef, locatorElement) {
104
+ var _a;
105
+ if (!locatorRef.current) return locatorRef.current;
106
+ var REF_NAME_OBJ = {
107
+ Input: 'input',
108
+ InputNumber: 'input',
109
+ Select: 'select',
110
+ Upload: 'input'
111
+ };
112
+ if (locatorRef.current.tagName) return locatorRef.current;
113
+ var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
114
+ return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
115
+ };
103
116
  function usePopper(locatorElement, popperElement, props) {
104
117
  var _context3, _context4, _arrowStyle;
105
118
  var prefixCls = props.prefixCls,
@@ -152,10 +165,11 @@ function usePopper(locatorElement, popperElement, props) {
152
165
  var popperEl = useRef();
153
166
  var locatorRef = locatorElement.ref || locatorEl;
154
167
  var popperRef = popperElement.ref || popperEl;
155
- var container = getPopupContainer(locatorRef.current || document.body);
168
+ var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
156
169
  _Promise.resolve().then(function () {
157
- var triggerNode = getTriggerElement(locatorRef.current);
158
- var container = getPopupContainer(locatorRef.current);
170
+ var realDom = getRealDom(locatorRef, locatorElement);
171
+ var triggerNode = getTriggerElement(realDom);
172
+ var container = getPopupContainer(realDom);
159
173
  devWarning(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
160
174
  devWarning(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
161
175
  });
@@ -218,30 +232,31 @@ function usePopper(locatorElement, popperElement, props) {
218
232
  nextPlacement = _useState18[0],
219
233
  setNextPlacement = _useState18[1];
220
234
  var alignPopper = useCallback(function () {
221
- if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
235
+ var realDom = getRealDom(locatorRef, locatorElement);
236
+ if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
222
237
  var _popperRef$current$ge = popperRef.current.getBoundingClientRect(),
223
238
  popperWidth = _popperRef$current$ge.width,
224
239
  popperHeight = _popperRef$current$ge.height;
225
- var _locatorRef$current$g = locatorRef.current.getBoundingClientRect(),
226
- top = _locatorRef$current$g.top,
227
- bottom = _locatorRef$current$g.bottom,
228
- left = _locatorRef$current$g.left,
229
- right = _locatorRef$current$g.right,
230
- height = _locatorRef$current$g.height,
231
- width = _locatorRef$current$g.width;
240
+ var _realDom$getBoundingC = realDom.getBoundingClientRect(),
241
+ top = _realDom$getBoundingC.top,
242
+ bottom = _realDom$getBoundingC.bottom,
243
+ left = _realDom$getBoundingC.left,
244
+ right = _realDom$getBoundingC.right,
245
+ height = _realDom$getBoundingC.height,
246
+ width = _realDom$getBoundingC.width;
232
247
  var _getOffsetPos = getOffsetPos(container),
233
248
  containerTop = _getOffsetPos.top,
234
249
  containerLeft = _getOffsetPos.left;
235
- var _getOffsetPos2 = getOffsetPos(locatorRef.current),
250
+ var _getOffsetPos2 = getOffsetPos(realDom),
236
251
  locatorTop = _getOffsetPos2.top,
237
252
  locatorLeft = _getOffsetPos2.left;
238
- var _getTranslatePos = getTranslatePos(locatorRef.current),
253
+ var _getTranslatePos = getTranslatePos(realDom),
239
254
  translateTop = _getTranslatePos.top,
240
255
  translateLeft = _getTranslatePos.left;
241
- var _getBorderWidth = getBorderWidth(locatorRef.current),
256
+ var _getBorderWidth = getBorderWidth(realDom),
242
257
  borderTop = _getBorderWidth.top,
243
258
  borderLeft = _getBorderWidth.left;
244
- var _getScrollDist = getScrollDist(locatorRef.current.parentElement, container),
259
+ var _getScrollDist = getScrollDist(realDom.parentElement, container),
245
260
  scrollTop = _getScrollDist.top,
246
261
  scrollLeft = _getScrollDist.left;
247
262
  var locatorPos = {
@@ -427,7 +442,7 @@ function usePopper(locatorElement, popperElement, props) {
427
442
  }, "".concat(nextPlacement, "-active"), active))
428
443
  };
429
444
  var popperNode = popperRef.current;
430
- var locatorNode = locatorRef.current;
445
+ var locatorNode = getRealDom(locatorRef, locatorElement);
431
446
  useResizeObserver(popperNode || document.body, alignPopper);
432
447
  useResizeObserver(locatorNode || document.body, alignPopper);
433
448
  var showPopper = useCallback(function (evType) {
@@ -458,7 +473,8 @@ function usePopper(locatorElement, popperElement, props) {
458
473
  useEffect(function () {
459
474
  if (exist && visible) {
460
475
  var mouseleaveTimer;
461
- var triggerNode = getTriggerElement(locatorRef.current);
476
+ var realDom = getRealDom(locatorRef, locatorElement);
477
+ var triggerNode = getTriggerElement(realDom);
462
478
  var handleHidePopper = function handleHidePopper(e) {
463
479
  var triggerRect = triggerNode.getBoundingClientRect();
464
480
  var popperRect = popperRef.current.getBoundingClientRect();
@@ -532,8 +548,9 @@ function usePopper(locatorElement, popperElement, props) {
532
548
  };
533
549
  }
534
550
  }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
535
- React.useEffect(function () {
536
- var triggerNode = getTriggerElement(locatorRef.current);
551
+ useEffect(function () {
552
+ var realDom = getRealDom(locatorRef, locatorElement);
553
+ var triggerNode = getTriggerElement(realDom);
537
554
  if (triggerNode) {
538
555
  var mouseenterTimer;
539
556
  var clearMouseLeave = function clearMouseLeave() {
@@ -242,6 +242,7 @@
242
242
  line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
243
243
  font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
244
244
  padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
245
+ max-width: var(--kd-c-button-sizing-max-width-small);
245
246
  }
246
247
  .kd-btn-size-small.kd-btn-icon-only {
247
248
  font-size: var(--kd-c-button-icon-font-size-small, 14px);
@@ -265,6 +266,7 @@
265
266
  line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
266
267
  font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
267
268
  padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
269
+ max-width: var(--kd-c-button-sizing-max-width-middle);
268
270
  }
269
271
  .kd-btn-size-middle.kd-btn-icon-only {
270
272
  font-size: var(--kd-c-button-icon-font-size-middle, 16px);
@@ -288,6 +290,7 @@
288
290
  line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
289
291
  font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
290
292
  padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
293
+ max-width: var(--kd-c-button-sizing-max-width-large);
291
294
  }
292
295
  .kd-btn-size-large.kd-btn-icon-only {
293
296
  font-size: var(--kd-c-button-icon-font-size-large, 18px);
@@ -110,7 +110,7 @@
110
110
 
111
111
  // 小号尺寸按钮
112
112
  &-size-small {
113
- .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width);
113
+ .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width, @btn-small-max-width);
114
114
  &.@{btn-prefix-cls}-icon-only {
115
115
  font-size: @btn-icon-small-font-size;
116
116
  padding: 0 @btn-icon-padding-horizontal;
@@ -126,7 +126,7 @@
126
126
 
127
127
  // 中号尺寸按钮
128
128
  &-size-middle {
129
- .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width);
129
+ .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width, @btn-middle-max-width);
130
130
  &.@{btn-prefix-cls}-icon-only {
131
131
  font-size: @btn-icon-middle-font-size;
132
132
  padding: 0 @btn-icon-padding-horizontal;
@@ -142,7 +142,7 @@
142
142
 
143
143
  // 大号尺寸按钮
144
144
  &-size-large {
145
- .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width);
145
+ .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width, @btn-large-max-width);
146
146
  &.@{btn-prefix-cls}-icon-only {
147
147
  font-size: @btn-icon-large-font-size;
148
148
  padding: 0 @btn-icon-padding-horizontal;
@@ -30,12 +30,13 @@
30
30
  color: @color;
31
31
  }
32
32
  // 各个按钮尺寸的样式Mixins
33
- .btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width) {
33
+ .btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width,@max-width) {
34
34
  height: @height;
35
35
  min-width: @min-width;
36
36
  line-height: calc(@height - (@padding-vertical * 2) - (@btn-border-width * 2));
37
37
  font-size: @font-size;
38
38
  padding: @padding-vertical @padding-horizontal;
39
+ max-width: @max-width;
39
40
  }
40
41
  // 圆形按钮不同尺寸的样式Mixins
41
42
  .btn-shape-circle-width(@width) {
@@ -88,11 +88,14 @@
88
88
  @btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
89
89
  @btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
90
90
  @btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
91
+ @btn-small-max-width: var(~'@{button-custom-prefix}-sizing-max-width-small'); // 小号 最大宽度
91
92
  @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度 高度配置
92
93
  @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
94
+ @btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
93
95
  @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
94
96
  @btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
95
97
  @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
98
+ @btn-large-max-width: var(~'@{button-custom-prefix}-sizing-max-width-large'); // 大号 最大宽度
96
99
  @btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
97
100
  @btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);
98
101
 
@@ -162,6 +162,7 @@
162
162
  overflow: hidden;
163
163
  white-space: nowrap;
164
164
  text-overflow: ellipsis;
165
+ max-width: var(--kd-c-checkbox-default-input-label-max-width);
165
166
  }
166
167
  .kd-checkbox-children .kd-input-underline {
167
168
  background-color: transparent;
@@ -44,6 +44,7 @@
44
44
  overflow: hidden;
45
45
  white-space: nowrap;
46
46
  text-overflow: ellipsis;
47
+ max-width: @checkbox-default-input-label-max-width;
47
48
 
48
49
  .kd-input-underline {
49
50
  background-color: transparent;
@@ -33,6 +33,7 @@
33
33
  @checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
34
34
  @checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
35
35
  @checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
36
+ @checkbox-default-input-label-max-width: var(~'@{checkbox-prefix}-default-input-label-max-width'); // 勾选输入框便签文本最大宽度,默认为未设置。
36
37
  @checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
37
38
  @checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
38
39
  @checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
@@ -63,7 +63,8 @@ var InternalSelect = function InternalSelect(props, ref) {
63
63
  domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
64
64
  _selectProps$foreignL = selectProps.foreignList,
65
65
  foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
66
- itemRender = selectProps.itemRender;
66
+ itemRender = selectProps.itemRender,
67
+ onTabPaneChange = selectProps.onTabPaneChange;
67
68
  var _useMergedState = useMergedState(undefined, {
68
69
  value: value,
69
70
  defaultValue: defaultValue
@@ -246,6 +247,7 @@ var InternalSelect = function InternalSelect(props, ref) {
246
247
  };
247
248
  var toggleTabPane = function toggleTabPane(type) {
248
249
  setTabsValue(type);
250
+ onTabPaneChange === null || onTabPaneChange === void 0 ? void 0 : onTabPaneChange(type);
249
251
  };
250
252
  // 渲染下拉列表框
251
253
  var renderContent = function renderContent() {
@@ -268,12 +270,13 @@ var InternalSelect = function InternalSelect(props, ref) {
268
270
  if (!data) return null;
269
271
  if (isDomestic(type)) {
270
272
  var _context3;
271
- return _concatInstanceProperty(_context3 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context3, data === null || data === void 0 ? void 0 : data.province);
273
+ var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
274
+ return _concatInstanceProperty(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
272
275
  } else {
273
276
  var _context4, _context5, _context6;
274
277
  return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
275
278
  }
276
- }, [type]);
279
+ }, [type, tabsValue]);
277
280
  var renderSingle = function renderSingle() {
278
281
  var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
279
282
  visibility: 'hidden'
@@ -43,6 +43,7 @@ export interface CityPickerProps {
43
43
  onSearch?: (value: string) => void;
44
44
  onClear?: () => void;
45
45
  itemRender?: (city: City) => React.ReactNode;
46
+ onTabPaneChange?: (id: Type) => void;
46
47
  }
47
48
  export interface ICityPickerOptionProps {
48
49
  disabled?: boolean;
@@ -307,6 +307,8 @@
307
307
  padding: 8px 0;
308
308
  max-height: 320px;
309
309
  overflow-y: auto;
310
+ -webkit-box-sizing: content-box;
311
+ box-sizing: content-box;
310
312
  }
311
313
  .kd-city-picker-list-item {
312
314
  position: relative;
@@ -200,6 +200,7 @@
200
200
  padding: 8px 0;
201
201
  max-height: 320px;
202
202
  overflow-y: auto;
203
+ box-sizing: content-box;
203
204
 
204
205
  // 下拉列表选项
205
206
  &-item {
@@ -145,6 +145,7 @@
145
145
  white-space: nowrap;
146
146
  overflow: hidden;
147
147
  text-overflow: ellipsis;
148
+ display: block;
148
149
  }
149
150
  .kd-filter .kd-filter-header-search {
150
151
  min-width: 200px;
@@ -240,6 +241,7 @@
240
241
  padding: 11px 0 10px;
241
242
  color: var(--kd-g-color-text-third, #999);
242
243
  line-height: 18px;
244
+ width: var(--kd-c-filter-body-condition-label-width);
243
245
  }
244
246
  .kd-filter .kd-filter-body-condition-options {
245
247
  display: -webkit-box;
@@ -269,6 +271,10 @@
269
271
  border: 1px solid transparent;
270
272
  cursor: pointer;
271
273
  white-space: nowrap;
274
+ max-width: var(--kd-c-filter-body-condition-option-max-width);
275
+ overflow: hidden;
276
+ display: inline-block;
277
+ text-overflow: ellipsis;
272
278
  }
273
279
  .kd-filter .kd-filter-body-condition-option:not(:last-child) {
274
280
  margin-right: 24px;
@@ -36,6 +36,7 @@
36
36
  &-item-text {
37
37
  max-width: 224px;
38
38
  .ellipsis;
39
+ display: block;
39
40
  }
40
41
  }
41
42
 
@@ -130,6 +131,7 @@
130
131
  padding: 11px 0 10px;
131
132
  color: @color-text-third;
132
133
  line-height: 18px;
134
+ width: @filter-body-condition-label-width;
133
135
  }
134
136
 
135
137
  &-options {
@@ -154,6 +156,11 @@
154
156
  border: 1px solid transparent;
155
157
  cursor: pointer;
156
158
  white-space: nowrap;
159
+ max-width: @filter-body-condition-option-max-width;
160
+ overflow: hidden;
161
+ display: inline-block;
162
+ text-overflow: ellipsis;
163
+
157
164
 
158
165
  &:not(:last-child) {
159
166
  margin-right: 24px;
@@ -26,3 +26,7 @@
26
26
  @filter-condition-label-font-size: var(~'@{filter-custom-prefix}-condition-label-font-size', @font-size-middle);
27
27
  @filter-handle-font-size: var(~'@{filter-custom-prefix}-handle-font-size', @font-size-middle);
28
28
  @filter-body-tabs-item-font-size: var(~'@{filter-custom-prefix}-body-tabs-item-font-size', @font-size-middle);
29
+
30
+ //sizing
31
+ @filter-body-condition-label-width: var(~'@{filter-custom-prefix}-body-condition-label-width');
32
+ @filter-body-condition-option-max-width: var(~'@{filter-custom-prefix}-body-condition-option-max-width');
@@ -147,7 +147,7 @@
147
147
  flex-direction: column;
148
148
  }
149
149
  .kd-form-field-vertical .kd-form-field-label {
150
- margin-bottom: 5px;
150
+ margin-bottom: var(--kd-c-form-field-label-spacing-margin-bottom, 5px);
151
151
  }
152
152
  .kd-form-field-hidden {
153
153
  display: none !important;
@@ -39,7 +39,7 @@
39
39
  flex-direction: column;
40
40
 
41
41
  .@{field-label-cls} {
42
- margin-bottom: 5px;
42
+ margin-bottom: @form-field-label-spacing-margin-bottom;
43
43
  }
44
44
  }
45
45
 
@@ -19,4 +19,4 @@
19
19
  @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
20
20
  @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
21
21
  @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
22
-
22
+ @form-field-label-spacing-margin-bottom: var(~'@{form-prefix}-field-label-spacing-margin-bottom', 5px);
@@ -49,7 +49,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
49
49
  suffix = inputNumberProps.suffix,
50
50
  formatter = inputNumberProps.formatter,
51
51
  className = inputNumberProps.className,
52
- others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className"]);
52
+ onKeyDown = inputNumberProps.onKeyDown,
53
+ others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className", "onKeyDown"]);
53
54
  var initVal = value === undefined ? defaultValue : value;
54
55
  var _useState = useState(serialization(initVal !== undefined ? initVal + '' : '')),
55
56
  _useState2 = _slicedToArray(_useState, 2),
@@ -173,12 +174,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
173
174
  return resultNumerical;
174
175
  };
175
176
  var handleStepChang = function handleStepChang(type) {
177
+ var _a, _b;
176
178
  var step = stepOption.step === undefined ? 1 : parseFloat(stepOption.step);
177
179
  if (typeof step !== 'number') {
178
180
  devWarning(true, 'inputNumber', "stepOption.step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
179
181
  return false;
180
182
  }
181
- var startingNumber = parseFloat(inputNumberRef.current.value) || 0;
183
+ var startingNumber = parseFloat((_b = (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value) || 0;
182
184
  var calculationResults = new Big(startingNumber)[type](step).valueOf();
183
185
  var legalNumber = verifiValue(calculationResults);
184
186
  if (legalNumber === false) {
@@ -193,6 +195,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
193
195
  };
194
196
  var handleKeyDown = function handleKeyDown(event) {
195
197
  var _context11;
198
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
196
199
  if (!stepOption || props.disabled || props.readOnly) {
197
200
  return;
198
201
  }
@@ -192,7 +192,8 @@
192
192
  position: relative;
193
193
  width: 100%;
194
194
  height: 100%;
195
- min-width: 138px;
195
+ min-width: var(--kd-c-menu-sizing-min-width, 138px);
196
+ max-width: var(--kd-c-menu-sizing-max-width);
196
197
  background-color: var(--kd-c-menu-color-background, #343848);
197
198
  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
198
199
  }
@@ -10,7 +10,8 @@
10
10
  position: relative;
11
11
  width: 100%;
12
12
  height: 100%;
13
- min-width: 138px;
13
+ min-width: @menu-min-width;
14
+ max-width: @menu-max-width;
14
15
  background-color: @menu-color-background;
15
16
  color: @menu-sub-color;
16
17
  }
@@ -25,6 +25,8 @@
25
25
  @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
26
26
 
27
27
  // sizing
28
+ @menu-max-width: var(~'@{menu-prefix}-sizing-max-width');
29
+ @menu-min-width: var(~'@{menu-prefix}-sizing-min-width',138px);
28
30
  @menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
29
31
 
30
32
  // z-index
@@ -125,6 +125,9 @@
125
125
  vertical-align: middle;
126
126
  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
127
127
  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
128
+ max-width: var(--kd-c-radio-default-label-max-width);
129
+ overflow: hidden;
130
+ min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
128
131
  }
129
132
  .kd-radio::before {
130
133
  position: absolute;
@@ -256,6 +259,7 @@
256
259
  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
257
260
  -webkit-transition: all 0.3s;
258
261
  transition: all 0.3s;
262
+ max-width: var(--kd-c-radio-square-label-max-width);
259
263
  }
260
264
  .kd-radio-square::after {
261
265
  position: absolute;
@@ -348,6 +352,9 @@
348
352
  list-style: none;
349
353
  -webkit-font-feature-settings: 'tnum';
350
354
  font-feature-settings: 'tnum';
355
+ white-space: nowrap;
356
+ overflow: hidden;
357
+ text-overflow: ellipsis;
351
358
  position: relative;
352
359
  display: inline-block;
353
360
  height: var(--kd-c-radio-square-sizing-height, 32px);
@@ -365,6 +372,7 @@
365
372
  border-left: none;
366
373
  -webkit-transition: all 0.3s;
367
374
  transition: all 0.3s;
375
+ max-width: var(--kd-c-radio-button-label-max-width);
368
376
  }
369
377
  .kd-radio-button:first-child {
370
378
  border-radius: 2px 0 0 2px;
@@ -22,6 +22,9 @@
22
22
  vertical-align: middle;
23
23
  color: @radio-font-color;
24
24
  font-size: @radio-font-size;
25
+ max-width: @radio-default-label-max-width;
26
+ overflow: hidden;
27
+ min-height: @radio-circle-size;
25
28
 
26
29
  &::before {
27
30
  position: absolute;
@@ -152,6 +155,7 @@
152
155
  border-radius: @radius-size;
153
156
  border: @radio-border-width solid @radio-color-border;
154
157
  transition: all @transition-duration;
158
+ max-width: @radio-square-label-max-width;
155
159
 
156
160
  &::after {
157
161
  position: absolute;
@@ -241,7 +245,7 @@
241
245
  // 按钮类型(切换按钮)
242
246
  .@{radio-button-prefix-cls} {
243
247
  .reset-component();
244
-
248
+ .ellipsis();
245
249
  // 默认状态
246
250
  position: relative;
247
251
  display: inline-block;
@@ -259,6 +263,7 @@
259
263
  border: @radio-border-width solid @radio-color-border;
260
264
  border-left: none;
261
265
  transition: all @transition-duration;
266
+ max-width: @radio-button-label-max-width;
262
267
 
263
268
  &:first-child {
264
269
  border-radius: @radius-size 0 0 @radius-size;
@@ -22,6 +22,9 @@
22
22
  // sizing
23
23
  @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
24
24
  @radio-square-height: var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
25
+ @radio-default-label-max-width: var(~'@{radio-prefix}-default-label-max-width');//单选默认模式 最大宽度
26
+ @radio-square-label-max-width: var(~'@{radio-prefix}-square-label-max-width');//单选框模式 最大宽度
27
+ @radio-button-label-max-width: var(~'@{radio-prefix}-button-label-max-width');//单选按 最大宽度
25
28
 
26
29
  // spacing
27
30
  @radio-margin-right: var(~'@{radio-prefix}-spacing-margin-right',8px);
@@ -59,7 +59,8 @@ var InternalSearch = function InternalSearch(props, ref) {
59
59
  onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
60
60
  }, [onSearch]);
61
61
  var handlePressEnter = useCallback(function (_, event) {
62
- onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
62
+ var _a, _b;
63
+ onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, event));
63
64
  }, [onPressEnter, searchRef]);
64
65
  var handleFocus = useCallback(function (event) {
65
66
  setFocused(true);
@@ -335,6 +335,7 @@
335
335
  overflow: hidden;
336
336
  white-space: nowrap;
337
337
  text-overflow: ellipsis;
338
+ max-width: var(--kd-c-search-tag-sizing-max-width);
338
339
  }
339
340
  .kd-quick-search-selection-overflow-item-del {
340
341
  height: 14px;
@@ -140,6 +140,7 @@
140
140
  padding: 0 4px;
141
141
  align-self: center;
142
142
  .ellipsis();
143
+ max-width: @search-tag-max-width;
143
144
  }
144
145
  &-del {
145
146
  height: 14px;
@@ -14,6 +14,7 @@
14
14
  @search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
15
15
  @quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
16
16
  @search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
17
+ @search-tag-max-width: var(~'@{search-prefix}-tag-sizing-max-width');
17
18
 
18
19
  // color
19
20
  @search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);
@@ -22,7 +22,7 @@ import VirtualList from '../virtual-list';
22
22
  import KeyCode from '../_utils/KeyCode';
23
23
  var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
24
24
  var InternalSelect = function InternalSelect(props, ref) {
25
- var _context, _classNames6, _classNames12;
25
+ var _context, _classNames6, _classNames12, _context5;
26
26
  var _useContext = useContext(ConfigContext),
27
27
  getPrefixCls = _useContext.getPrefixCls,
28
28
  prefixCls = _useContext.prefixCls,
@@ -794,6 +794,7 @@ var InternalSelect = function InternalSelect(props, ref) {
794
794
  offset = 1;
795
795
  } else if (which === KeyCode.ENTER) {
796
796
  var item = filledOptions[activeIndex];
797
+ if (!item) return;
797
798
  var key = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) || item.value;
798
799
  var label = ((_b = item.props) === null || _b === void 0 ? void 0 : _b.children) || item.label;
799
800
  handleOption(key, label, true);
@@ -869,7 +870,7 @@ var InternalSelect = function InternalSelect(props, ref) {
869
870
  }
870
871
  };
871
872
  var popperProps = _extends(_extends({}, selectProps), {
872
- prefixCls: selectPrefixCls,
873
+ prefixCls: _concatInstanceProperty(_context5 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context5, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : ''),
873
874
  placement: 'bottomLeft',
874
875
  popperStyle: catchStyle(),
875
876
  defaultVisible: optionShow,
@@ -359,7 +359,7 @@
359
359
  z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
360
360
  -webkit-box-sizing: border-box;
361
361
  box-sizing: border-box;
362
- padding: 8px 0;
362
+ padding: var(--kd-c-select-dropdown-spacing-padding-vertical, 8px) 0;
363
363
  margin: 0;
364
364
  overflow: auto;
365
365
  font-size: var(--kd-c-select-dropdown-font-size, 12px);
@@ -382,6 +382,9 @@
382
382
  .kd-select-dropdown-search-hidden {
383
383
  display: none;
384
384
  }
385
+ .kd-select-multiple-dropdown-panel .kd-select-dropdown {
386
+ padding-bottom: 0;
387
+ }
385
388
  .kd-select-item {
386
389
  position: relative;
387
390
  display: block;
@@ -648,8 +651,8 @@
648
651
  align-items: center;
649
652
  width: 100%;
650
653
  padding: 0 12px;
651
- height: 32px;
652
- line-height: 32px;
654
+ height: 40px;
655
+ line-height: 40px;
653
656
  border-top: 1px solid #d9d9d9;
654
657
  -webkit-box-sizing: border-box;
655
658
  box-sizing: border-box;