@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.
- package/CHANGELOG.md +41 -0
- package/dist/kdesign-complete.less +75 -21
- package/dist/kdesign.css +79 -12
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +425 -180
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +4 -4
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.js +36 -19
- package/es/button/style/index.css +3 -0
- package/es/button/style/index.less +3 -3
- package/es/button/style/mixin.less +2 -1
- package/es/button/style/token.less +3 -0
- package/es/checkbox/style/index.css +1 -0
- package/es/checkbox/style/index.less +1 -0
- package/es/checkbox/style/token.less +1 -0
- package/es/city-picker/city-picker.js +6 -3
- package/es/city-picker/interface.d.ts +1 -0
- package/es/city-picker/style/index.css +2 -0
- package/es/city-picker/style/index.less +1 -0
- package/es/filter/style/index.css +6 -0
- package/es/filter/style/index.less +7 -0
- package/es/filter/style/token.less +4 -0
- package/es/form/style/index.css +1 -1
- package/es/form/style/index.less +1 -1
- package/es/form/style/token.less +1 -1
- package/es/input-number/inputNumber.js +5 -2
- package/es/menu/style/index.css +2 -1
- package/es/menu/style/mixin.less +2 -1
- package/es/menu/style/token.less +2 -0
- package/es/radio/style/index.css +8 -0
- package/es/radio/style/index.less +6 -1
- package/es/radio/style/token.less +3 -0
- package/es/search/search.js +2 -1
- package/es/search/style/index.css +1 -0
- package/es/search/style/index.less +1 -0
- package/es/search/style/token.less +1 -0
- package/es/select/select.js +3 -2
- package/es/select/style/index.css +6 -3
- package/es/select/style/index.less +10 -4
- package/es/select/style/token.less +1 -1
- package/es/style/core/motion/slide.less +5 -2
- package/es/style/index.css +36 -4
- package/es/table/api.js +19 -3
- package/es/tag/style/index.css +6 -0
- package/es/tag/style/index.less +3 -3
- package/es/tag/style/mixin.less +3 -1
- package/es/tag/style/token.less +2 -0
- package/es/timeline/style/index.css +2 -0
- package/es/timeline/style/index.less +3 -0
- package/es/timeline/style/token.less +2 -0
- package/es/transfer/style/index.css +2 -2
- package/es/transfer/style/index.less +2 -2
- package/es/transfer/style/token.less +1 -0
- package/es/tree/style/index.css +2 -0
- package/es/tree/style/index.less +2 -0
- package/es/tree/style/token.less +2 -0
- package/lib/_utils/usePopper.js +36 -19
- package/lib/button/style/index.css +3 -0
- package/lib/button/style/index.less +3 -3
- package/lib/button/style/mixin.less +2 -1
- package/lib/button/style/token.less +3 -0
- package/lib/checkbox/style/index.css +1 -0
- package/lib/checkbox/style/index.less +1 -0
- package/lib/checkbox/style/token.less +1 -0
- package/lib/city-picker/city-picker.js +6 -3
- package/lib/city-picker/interface.d.ts +1 -0
- package/lib/city-picker/style/index.css +2 -0
- package/lib/city-picker/style/index.less +1 -0
- package/lib/filter/style/index.css +6 -0
- package/lib/filter/style/index.less +7 -0
- package/lib/filter/style/token.less +4 -0
- package/lib/form/style/index.css +1 -1
- package/lib/form/style/index.less +1 -1
- package/lib/form/style/token.less +1 -1
- package/lib/input-number/inputNumber.js +5 -2
- package/lib/menu/style/index.css +2 -1
- package/lib/menu/style/mixin.less +2 -1
- package/lib/menu/style/token.less +2 -0
- package/lib/radio/style/index.css +8 -0
- package/lib/radio/style/index.less +6 -1
- package/lib/radio/style/token.less +3 -0
- package/lib/search/search.js +2 -1
- package/lib/search/style/index.css +1 -0
- package/lib/search/style/index.less +1 -0
- package/lib/search/style/token.less +1 -0
- package/lib/select/select.js +3 -2
- package/lib/select/style/index.css +6 -3
- package/lib/select/style/index.less +10 -4
- package/lib/select/style/token.less +1 -1
- package/lib/style/core/motion/slide.less +5 -2
- package/lib/style/index.css +36 -4
- package/lib/table/api.js +19 -3
- package/lib/tag/style/index.css +6 -0
- package/lib/tag/style/index.less +3 -3
- package/lib/tag/style/mixin.less +3 -1
- package/lib/tag/style/token.less +2 -0
- package/lib/timeline/style/index.css +2 -0
- package/lib/timeline/style/index.less +3 -0
- package/lib/timeline/style/token.less +2 -0
- package/lib/transfer/style/index.css +2 -2
- package/lib/transfer/style/index.less +2 -2
- package/lib/transfer/style/token.less +1 -0
- package/lib/tree/style/index.css +2 -0
- package/lib/tree/style/index.less +2 -0
- package/lib/tree/style/token.less +2 -0
- package/package.json +2 -2
package/es/_utils/usePopper.js
CHANGED
|
@@ -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
|
|
168
|
+
var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
|
|
156
169
|
_Promise.resolve().then(function () {
|
|
157
|
-
var
|
|
158
|
-
var
|
|
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
|
-
|
|
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
|
|
226
|
-
top =
|
|
227
|
-
bottom =
|
|
228
|
-
left =
|
|
229
|
-
right =
|
|
230
|
-
height =
|
|
231
|
-
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(
|
|
250
|
+
var _getOffsetPos2 = getOffsetPos(realDom),
|
|
236
251
|
locatorTop = _getOffsetPos2.top,
|
|
237
252
|
locatorLeft = _getOffsetPos2.left;
|
|
238
|
-
var _getTranslatePos = getTranslatePos(
|
|
253
|
+
var _getTranslatePos = getTranslatePos(realDom),
|
|
239
254
|
translateTop = _getTranslatePos.top,
|
|
240
255
|
translateLeft = _getTranslatePos.left;
|
|
241
|
-
var _getBorderWidth = getBorderWidth(
|
|
256
|
+
var _getBorderWidth = getBorderWidth(realDom),
|
|
242
257
|
borderTop = _getBorderWidth.top,
|
|
243
258
|
borderLeft = _getBorderWidth.left;
|
|
244
|
-
var _getScrollDist = getScrollDist(
|
|
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
|
|
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
|
|
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
|
-
|
|
536
|
-
var
|
|
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
|
|
|
@@ -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
|
-
|
|
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'
|
|
@@ -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');
|
package/es/form/style/index.css
CHANGED
package/es/form/style/index.less
CHANGED
package/es/form/style/token.less
CHANGED
|
@@ -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
|
-
|
|
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
|
}
|
package/es/menu/style/index.css
CHANGED
|
@@ -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
|
}
|
package/es/menu/style/mixin.less
CHANGED
package/es/menu/style/token.less
CHANGED
|
@@ -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
|
package/es/radio/style/index.css
CHANGED
|
@@ -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);
|
package/es/search/search.js
CHANGED
|
@@ -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
|
-
|
|
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);
|
|
@@ -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);
|
package/es/select/select.js
CHANGED
|
@@ -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:
|
|
652
|
-
line-height:
|
|
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;
|