@kdcloudjs/kdesign 1.7.24 → 1.7.26

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 (74) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/kdesign-complete.less +101 -43
  3. package/dist/kdesign.css +81 -37
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +251 -132
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +5 -5
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.d.ts +1 -0
  11. package/es/_utils/usePopper.js +4 -2
  12. package/es/cascader/cascader.js +64 -32
  13. package/es/cascader/style/index.css +40 -24
  14. package/es/cascader/style/index.less +49 -27
  15. package/es/cascader/style/token.less +4 -3
  16. package/es/city-picker/city-picker.js +33 -26
  17. package/es/city-picker/option.js +4 -3
  18. package/es/city-picker/style/index.css +24 -10
  19. package/es/city-picker/style/index.less +22 -6
  20. package/es/city-picker/style/token.less +4 -5
  21. package/es/collapse/panel.js +31 -18
  22. package/es/collapse/style/index.css +4 -1
  23. package/es/collapse/style/index.less +4 -1
  24. package/es/form/Field.d.ts +1 -0
  25. package/es/form/Field.js +5 -3
  26. package/es/form/FieldWrapper.d.ts +1 -0
  27. package/es/form/FieldWrapper.js +13 -5
  28. package/es/form/style/index.css +11 -1
  29. package/es/form/style/index.less +16 -1
  30. package/es/form/style/token.less +1 -0
  31. package/es/input-number/inputNumber.js +15 -3
  32. package/es/input-number/useSelectionRange.d.ts +4 -0
  33. package/es/input-number/useSelectionRange.js +22 -0
  34. package/es/locale/locale.d.ts +4 -4
  35. package/es/locale/zh-CN.d.ts +4 -2
  36. package/es/locale/zh-CN.js +4 -2
  37. package/es/radio/style/index.css +1 -0
  38. package/es/radio/style/index.less +1 -0
  39. package/es/select/select.js +3 -3
  40. package/es/tag/tag.d.ts +1 -0
  41. package/es/tree-select/tree-select.js +2 -1
  42. package/lib/_utils/usePopper.d.ts +1 -0
  43. package/lib/_utils/usePopper.js +4 -2
  44. package/lib/cascader/cascader.js +63 -31
  45. package/lib/cascader/style/index.css +40 -24
  46. package/lib/cascader/style/index.less +49 -27
  47. package/lib/cascader/style/token.less +4 -3
  48. package/lib/city-picker/city-picker.js +33 -26
  49. package/lib/city-picker/option.js +4 -3
  50. package/lib/city-picker/style/index.css +24 -10
  51. package/lib/city-picker/style/index.less +22 -6
  52. package/lib/city-picker/style/token.less +4 -5
  53. package/lib/collapse/panel.js +32 -19
  54. package/lib/collapse/style/index.css +4 -1
  55. package/lib/collapse/style/index.less +4 -1
  56. package/lib/form/Field.d.ts +1 -0
  57. package/lib/form/Field.js +5 -3
  58. package/lib/form/FieldWrapper.d.ts +1 -0
  59. package/lib/form/FieldWrapper.js +13 -5
  60. package/lib/form/style/index.css +11 -1
  61. package/lib/form/style/index.less +16 -1
  62. package/lib/form/style/token.less +1 -0
  63. package/lib/input-number/inputNumber.js +14 -2
  64. package/lib/input-number/useSelectionRange.d.ts +4 -0
  65. package/lib/input-number/useSelectionRange.js +29 -0
  66. package/lib/locale/locale.d.ts +4 -4
  67. package/lib/locale/zh-CN.d.ts +4 -2
  68. package/lib/locale/zh-CN.js +4 -2
  69. package/lib/radio/style/index.css +1 -0
  70. package/lib/radio/style/index.less +1 -0
  71. package/lib/select/select.js +3 -3
  72. package/lib/tag/tag.d.ts +1 -0
  73. package/lib/tree-select/tree-select.js +2 -1
  74. package/package.json +1 -1
@@ -8,6 +8,7 @@ var InternalOption = function InternalOption(props, ref) {
8
8
  var children = props.children,
9
9
  value = props.value,
10
10
  disabled = props.disabled,
11
+ className = props.className,
11
12
  onChangeSelect = props.onChangeSelect,
12
13
  _props$city = props.city,
13
14
  city = _props$city === void 0 ? {} : _props$city,
@@ -20,7 +21,7 @@ var InternalOption = function InternalOption(props, ref) {
20
21
  prefixCls = _useContext.prefixCls;
21
22
  var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
22
23
  var isSelected = id !== undefined ? id === value : false;
23
- var optionCls = classNames(selectOptionPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
24
+ var optionCls = classNames(selectOptionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
24
25
  var handleClick = function handleClick(e) {
25
26
  e.preventDefault();
26
27
  if (disabled || id === undefined) return;
@@ -31,9 +32,9 @@ var InternalOption = function InternalOption(props, ref) {
31
32
  className: optionCls,
32
33
  title: name,
33
34
  onClick: handleClick
34
- }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
35
+ }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
35
36
  className: "".concat(selectOptionPrefixCls, "-content")
36
- }, children), /*#__PURE__*/React.createElement("div", {
37
+ }, children), /*#__PURE__*/React.createElement("span", {
37
38
  className: "".concat(selectOptionPrefixCls, "-info")
38
39
  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
39
40
  };
@@ -121,6 +121,9 @@
121
121
  -ms-flex-direction: column;
122
122
  flex-direction: column;
123
123
  }
124
+ .kd-city-picker-selector {
125
+ width: 100%;
126
+ }
124
127
  .kd-city-picker-selector:hover .kd-city-picker-icon-active {
125
128
  color: #3761ca;
126
129
  }
@@ -264,6 +267,12 @@
264
267
  padding: 0 12px;
265
268
  font-size: 12px;
266
269
  }
270
+ .kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
271
+ overflow: hidden;
272
+ white-space: nowrap;
273
+ text-overflow: ellipsis;
274
+ width: 100%;
275
+ }
267
276
  .kd-city-picker-dropdown .kd-tabs-noContainer {
268
277
  height: unset;
269
278
  }
@@ -311,6 +320,9 @@
311
320
  box-sizing: content-box;
312
321
  }
313
322
  .kd-city-picker-list-item {
323
+ overflow: hidden;
324
+ white-space: nowrap;
325
+ text-overflow: ellipsis;
314
326
  position: relative;
315
327
  display: block;
316
328
  font-weight: normal;
@@ -319,16 +331,8 @@
319
331
  padding: 5px 12px;
320
332
  color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
321
333
  line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
322
- display: -webkit-box;
323
- display: -ms-flexbox;
324
- display: flex;
325
334
  cursor: pointer;
326
335
  }
327
- .kd-city-picker-list-item-content {
328
- overflow: hidden;
329
- white-space: nowrap;
330
- text-overflow: ellipsis;
331
- }
332
336
  .kd-city-picker-list-item-info {
333
337
  color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
334
338
  white-space: nowrap;
@@ -337,15 +341,25 @@
337
341
  background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
338
342
  }
339
343
  .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
340
- background-color: var(--kd-c-city-picker-color-background-selected, #f2f6ff);
344
+ background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
345
+ color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
346
+ }
347
+ .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
348
+ color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
341
349
  }
342
350
  .kd-city-picker-list-item-disabled {
343
351
  color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
344
352
  cursor: not-allowed;
345
353
  background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
346
354
  }
355
+ .kd-city-picker-list > .kd-city-picker-list-item-match {
356
+ color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
357
+ }
358
+ .kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
359
+ color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
360
+ }
347
361
  .kd-city-picker-highlight {
348
- color: #5582f3;
362
+ color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
349
363
  }
350
364
  .kd-city-picker-size-small {
351
365
  min-height: var(--kd-c-city-picker-sizing-height-small, 24px);
@@ -14,6 +14,9 @@
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
 
17
+ &-selector {
18
+ width: 100%;
19
+ }
17
20
  &-selector:hover {
18
21
  .@{city-picker-prefix-cls}-icon-active {
19
22
  color: #3761ca;
@@ -159,6 +162,11 @@
159
162
  &-type-line {
160
163
  padding: 0 12px;
161
164
  font-size: 12px;
165
+
166
+ .@{kd-prefix}-tab-pane-text {
167
+ .over();
168
+ width: 100%;
169
+ }
162
170
  }
163
171
  }
164
172
  }
@@ -204,14 +212,10 @@
204
212
 
205
213
  // 下拉列表选项
206
214
  &-item {
215
+ .over();
207
216
  .item();
208
- display: flex;
209
217
  cursor: pointer;
210
218
 
211
- &-content {
212
- .over();
213
- }
214
-
215
219
  &-info {
216
220
  color: @city-picker-placeholder-color;
217
221
  white-space: nowrap;
@@ -223,6 +227,11 @@
223
227
 
224
228
  &-selected:not(&-disabled) {
225
229
  background-color: @city-picker-item-selected-bg;
230
+ color: @city-picker-list-item-color-selected;
231
+
232
+ .@{city-picker-prefix-cls}-list-item-info {
233
+ color: @city-picker-list-item-color-selected;
234
+ }
226
235
  }
227
236
 
228
237
  &-disabled {
@@ -231,10 +240,17 @@
231
240
  background-color: @city-picker-disabled-option-bg;
232
241
  }
233
242
  }
243
+
244
+ & > .@{city-picker-prefix-cls}-list-item-match {
245
+ color: @city-picker-font-color;
246
+ .@{city-picker-prefix-cls}-list-item-info {
247
+ color: @city-picker-placeholder-color;
248
+ }
249
+ }
234
250
  }
235
251
 
236
252
  &-highlight {
237
- color: #5582f3;
253
+ color: @city-picker-highlight-color;
238
254
  }
239
255
 
240
256
  // 选择器框大小
@@ -6,7 +6,7 @@
6
6
  @city-picker-dropdown-bg: var(~'@{city-picker-custom-prefix}-dropdown-color-background', @color-background);
7
7
  @city-picker-disabled-option-bg: var(~'@{city-picker-custom-prefix}-item-color-background-disabled', #fff);
8
8
  @city-picker-item-active-bg: var(~'@{city-picker-custom-prefix}-color-background', #f5f5f5);
9
- @city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected', #f2f6ff);
9
+ @city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected', @color-theme-3);
10
10
  @city-picker-g-color-border: var(~'@{city-picker-custom-prefix}-color-border', @color-input);
11
11
  @city-picker-g-color-border-foucs: var(~'@{city-picker-custom-prefix}-color-border-foucs', @color-theme);
12
12
  @city-picker-g-color-border-hover: var(~'@{city-picker-custom-prefix}-color-border-hover', @color-theme);
@@ -16,12 +16,11 @@
16
16
  @city-picker-g-item-text-color-disabled: var(~'@{city-picker-custom-prefix}-item-color-text-disabled', @color-disabled);
17
17
  @city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
18
18
  @city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
19
- @city-picker-arrow-icon-color-text-disabled: var(
20
- ~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled',
21
- #b2b2b2
22
- );
19
+ @city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
23
20
  @city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
24
21
  @city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
22
+ @city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
23
+ @city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
25
24
 
26
25
  // font
27
26
  @city-picker-list-font-size: var(~'@{city-picker-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
@@ -1,6 +1,16 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
1
2
  import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
2
3
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
4
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
5
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
6
+ var __rest = this && this.__rest || function (s, e) {
7
+ var t = {};
8
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
9
+ if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
10
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
11
+ }
12
+ return t;
13
+ };
4
14
  import React, { useEffect, useRef, useState } from 'react';
5
15
  import classNames from 'classnames';
6
16
  import ConfigContext from '../config-provider/ConfigContext';
@@ -12,21 +22,23 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
12
22
  getPrefixCls = _React$useContext.getPrefixCls,
13
23
  prefixCls = _React$useContext.prefixCls,
14
24
  userDefaultProps = _React$useContext.compDefaultProps;
15
- var _getCompProps = getCompProps('CollapsePanel', userDefaultProps, props),
16
- disabled = _getCompProps.disabled,
17
- extra = _getCompProps.extra,
18
- assist = _getCompProps.assist,
19
- header = _getCompProps.header,
20
- onChange = _getCompProps.onChange,
21
- panelKey = _getCompProps.panelKey,
22
- innerKey = _getCompProps.innerKey,
23
- bordered = _getCompProps.bordered,
24
- expandIcon = _getCompProps.expandIcon,
25
- expandIconPosition = _getCompProps.expandIconPosition,
26
- style = _getCompProps.style,
27
- className = _getCompProps.className,
28
- children = _getCompProps.children,
29
- customPrefixcls = _getCompProps.prefixCls;
25
+ var _a = getCompProps('CollapsePanel', userDefaultProps, props),
26
+ disabled = _a.disabled,
27
+ extra = _a.extra,
28
+ assist = _a.assist,
29
+ header = _a.header,
30
+ onChange = _a.onChange,
31
+ panelKey = _a.panelKey,
32
+ innerKey = _a.innerKey,
33
+ bordered = _a.bordered,
34
+ expandIcon = _a.expandIcon,
35
+ expandIconPosition = _a.expandIconPosition,
36
+ style = _a.style,
37
+ title = _a.title,
38
+ className = _a.className,
39
+ children = _a.children,
40
+ customPrefixcls = _a.prefixCls,
41
+ others = __rest(_a, ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"]);
30
42
  var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
31
43
  var childrenRef = useRef();
32
44
  var setHeightTimerRef = useRef(null);
@@ -68,7 +80,8 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
68
80
  className: className,
69
81
  onClick: handleClick
70
82
  }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/React.createElement("span", {
71
- className: headerClassName
83
+ className: headerClassName,
84
+ title: title
72
85
  }, renderReactNode(header)));
73
86
  };
74
87
  var renderRight = function renderRight() {
@@ -135,11 +148,11 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
135
148
  expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
136
149
  }
137
150
  }, [childrenRef.current, expandAnimation, expand]);
138
- return /*#__PURE__*/React.createElement("div", {
151
+ return /*#__PURE__*/React.createElement("div", _extends({
139
152
  className: rootClassName,
140
153
  style: style,
141
154
  ref: panelPrefixClsRef
142
- }, /*#__PURE__*/React.createElement("span", {
155
+ }, others), /*#__PURE__*/React.createElement("span", {
143
156
  className: topClassName
144
157
  }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/React.createElement("div", {
145
158
  className: childrenClassName,
@@ -116,9 +116,12 @@
116
116
  .kd-collapse-panel:last-child {
117
117
  border-top: none;
118
118
  }
119
- .kd-collapse-panel:first-child {
119
+ .kd-collapse-panel-border.kd-collapse-panel:first-child {
120
120
  border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
121
121
  }
122
+ .kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
123
+ border-top: none;
124
+ }
122
125
  .kd-collapse-panel {
123
126
  display: -webkit-inline-box;
124
127
  display: -ms-inline-flexbox;
@@ -9,9 +9,12 @@
9
9
  &-panel:last-child {
10
10
  border-top: none;
11
11
  }
12
- &-panel:first-child {
12
+ &-panel-border&-panel:first-child {
13
13
  border-top: @collapse-border-width solid @collapse-border-color;
14
14
  }
15
+ &-panel-border&-panel:not(:nth-child(1)) {
16
+ border-top: none;
17
+ }
15
18
  &-panel {
16
19
  display: inline-flex;
17
20
  flex-direction: column;
@@ -17,6 +17,7 @@ export interface FormItemProps {
17
17
  validateTrigger?: string | string[];
18
18
  wrapperWidth?: string | number;
19
19
  valuePropName?: string;
20
+ extra?: React.ReactNode;
20
21
  }
21
22
  export declare const INNER_VALUE_PROPS_LIST: {
22
23
  name: string;
package/es/form/Field.js CHANGED
@@ -101,7 +101,8 @@ var Field = function Field(props) {
101
101
  wrapperWidth = props.wrapperWidth,
102
102
  validateTrigger = props.validateTrigger,
103
103
  defaultValue = props.defaultValue,
104
- valuePropName = props.valuePropName;
104
+ valuePropName = props.valuePropName,
105
+ extra = props.extra;
105
106
  var htmlFor = customizeHtmlFor || (name ? _concatInstanceProperty(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
106
107
  var childrenNode = null;
107
108
  var innerValuePropName = 'value';
@@ -187,7 +188,7 @@ var Field = function Field(props) {
187
188
  };
188
189
  }, []);
189
190
  var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
190
- var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
191
+ var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
191
192
  var value = getFieldValue(name);
192
193
  var validateMessage = getFieldError(name);
193
194
  var getInputValueFormProp = function getInputValueFormProp(evt) {
@@ -282,7 +283,8 @@ var Field = function Field(props) {
282
283
  requiredMark: mergedRequired
283
284
  }), /*#__PURE__*/React.createElement(FieldWrapper, {
284
285
  width: wrapperWidth,
285
- validateMessage: validateMessage
286
+ validateMessage: validateMessage,
287
+ extra: extra
286
288
  }, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
287
289
  var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
288
290
  key: index,
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  export interface FieldWrapperProps {
3
+ extra?: React.ReactNode;
3
4
  children?: React.ReactNode;
4
5
  width?: string | number;
5
6
  validateMessage?: string;
@@ -11,18 +11,26 @@ var FieldWrapper = function FieldWrapper(props) {
11
11
  var children = wrapperProps.children,
12
12
  customizePrefixCls = wrapperProps.prefixCls,
13
13
  width = wrapperProps.width,
14
- validateMessage = wrapperProps.validateMessage;
14
+ validateMessage = wrapperProps.validateMessage,
15
+ extra = wrapperProps.extra;
15
16
  var wrapperPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-wrapper', customizePrefixCls);
16
17
  var wrapperClassName = classnames(["".concat(wrapperPrefixCls)]);
17
18
  var messageClassName = classnames(["".concat(wrapperPrefixCls, "-message")]);
19
+ var validate = validateMessage ? /*#__PURE__*/React.createElement("p", {
20
+ className: messageClassName,
21
+ title: validateMessage
22
+ }, validateMessage) : null;
18
23
  return /*#__PURE__*/React.createElement("div", {
19
24
  className: wrapperClassName,
20
25
  style: {
21
26
  width: width
22
27
  }
23
- }, children, validateMessage && /*#__PURE__*/React.createElement("p", {
24
- className: messageClassName,
25
- title: validateMessage
26
- }, validateMessage));
28
+ }, children, extra ? /*#__PURE__*/React.createElement("div", {
29
+ className: "".concat(wrapperPrefixCls, "-extra")
30
+ }, /*#__PURE__*/React.createElement("div", {
31
+ className: "".concat(wrapperPrefixCls, "-extra-message")
32
+ }, validateMessage), /*#__PURE__*/React.createElement("div", {
33
+ className: "".concat(wrapperPrefixCls, "-extra-text")
34
+ }, extra)) : /*#__PURE__*/React.createElement(React.Fragment, null, validate));
27
35
  };
28
36
  export default FieldWrapper;
@@ -152,6 +152,9 @@
152
152
  .kd-form-field-hidden {
153
153
  display: none !important;
154
154
  }
155
+ .kd-form-field-extra {
156
+ margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
157
+ }
155
158
  .kd-form-field-label {
156
159
  font-size: var(--kd-c-form-field-label-font-size, 12px);
157
160
  line-height: var(--kd-c-form-field-label-line-height, 18px);
@@ -178,7 +181,8 @@
178
181
  .kd-form-field-wrapper {
179
182
  position: relative;
180
183
  }
181
- .kd-form-field-wrapper-message {
184
+ .kd-form-field-wrapper-message,
185
+ .kd-form-field-wrapper-extra {
182
186
  position: absolute;
183
187
  left: -7px;
184
188
  right: 0;
@@ -191,3 +195,9 @@
191
195
  white-space: nowrap;
192
196
  text-overflow: ellipsis;
193
197
  }
198
+ .kd-form-field-wrapper-extra-message {
199
+ color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
200
+ }
201
+ .kd-form-field-wrapper-extra-text {
202
+ color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
203
+ }
@@ -46,6 +46,10 @@
46
46
  &-hidden {
47
47
  display: none !important;
48
48
  }
49
+
50
+ &-extra {
51
+ margin-bottom: calc(@form-field-spacing-margin-bottom * 2);
52
+ }
49
53
  }
50
54
 
51
55
  .@{field-label-cls} {
@@ -76,7 +80,8 @@
76
80
 
77
81
  .@{field-wrapper-cls} {
78
82
  position: relative;
79
- &-message {
83
+
84
+ &-message, &-extra {
80
85
  position: absolute;
81
86
  left: -7px;
82
87
  right: 0;
@@ -89,4 +94,14 @@
89
94
  white-space: nowrap;
90
95
  text-overflow: ellipsis;
91
96
  }
97
+
98
+ &-extra {
99
+ &-message {
100
+ color: @form-error-color;
101
+ }
102
+
103
+ &-text {
104
+ color: @form-extra-color;
105
+ }
106
+ }
92
107
  }
@@ -5,6 +5,7 @@
5
5
  // color
6
6
  @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
7
7
  @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
8
+ @form-extra-color: var(~'@{form-prefix}-extra-color', @color-text-third);
8
9
 
9
10
  // font
10
11
  @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
11
11
  }
12
12
  return t;
13
13
  };
14
- import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
14
+ import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
15
15
  import Input from '../input';
16
16
  import ConfigContext from '../config-provider/ConfigContext';
17
17
  import { getCompProps } from '../_utils';
@@ -20,7 +20,9 @@ import { formatEditNumber, formatNumber } from '../_utils/formatUtil';
20
20
  import devWarning from '../_utils/devwarning';
21
21
  import Big from 'big.js';
22
22
  import classNames from 'classnames';
23
+ import useSelectionRange from './useSelectionRange';
23
24
  var InternalInputNumber = function InternalInputNumber(props, ref) {
25
+ var _a;
24
26
  var _useContext = useContext(ConfigContext),
25
27
  userDefaultProps = _useContext.compDefaultProps,
26
28
  getPrefixCls = _useContext.getPrefixCls,
@@ -110,6 +112,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
110
112
  if (legalNumber === false) {
111
113
  return false;
112
114
  }
115
+ updateSelectionRangePosition(event);
113
116
  value === undefined && setInputValue(legalNumber);
114
117
  onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
115
118
  };
@@ -225,10 +228,12 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
225
228
  // 还原最小值
226
229
  if (typeof min === 'number' && bigValue.lt(min)) {
227
230
  _inputValue = min.toString();
231
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
228
232
  }
229
233
  // 还原最大值
230
- if (typeof min === 'number' && bigValue.gt(max)) {
234
+ if (typeof max === 'number' && bigValue.gt(max)) {
231
235
  _inputValue = max.toString();
236
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
232
237
  }
233
238
  // 超过精度位数直接截断
234
239
  _inputValue = handleNumericalAccuracy(_inputValue);
@@ -300,9 +305,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
300
305
  }
301
306
  };
302
307
  });
308
+ var displayedInputValue = useMemo(function () {
309
+ return formatter ? formatter(inputValue) : inputValue;
310
+ }, [inputValue, formatter]);
311
+ var updateSelectionRangePosition = useSelectionRange({
312
+ inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
313
+ inputValue: displayedInputValue
314
+ });
303
315
  return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
304
316
  ref: inputNumberRef,
305
- value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
317
+ value: displayedInputValue,
306
318
  prefix: prefix,
307
319
  suffix: suffix,
308
320
  onChange: handleChange,
@@ -0,0 +1,4 @@
1
+ export default function useSelectionRange({ inputElement, inputValue, }: {
2
+ inputElement: HTMLInputElement;
3
+ inputValue: string;
4
+ }): (event: any) => void;
@@ -0,0 +1,22 @@
1
+ import { useRef, useLayoutEffect } from 'react';
2
+ import isNumber from 'lodash/isNumber';
3
+ export default function useSelectionRange(_ref) {
4
+ var inputElement = _ref.inputElement,
5
+ inputValue = _ref.inputValue;
6
+ var refSelectionPosition = useRef();
7
+ useLayoutEffect(function () {
8
+ var position = refSelectionPosition.current;
9
+ if (inputElement && inputValue && isNumber(position)) {
10
+ var start = Math.max(0, inputValue.length - position);
11
+ inputElement.setSelectionRange(start, start);
12
+ }
13
+ }, [inputValue]);
14
+ return function (event) {
15
+ var _event$target = event.target,
16
+ end = _event$target.selectionEnd,
17
+ value = _event$target.value;
18
+ if (isNumber(end)) {
19
+ refSelectionPosition.current = value.length - end;
20
+ }
21
+ };
22
+ }
@@ -61,11 +61,11 @@ declare class LocaleCache {
61
61
  'QuickSearch.emptyTip': string;
62
62
  'QuickSearch.or': string;
63
63
  'CityPicker.domestic': string;
64
- 'CityPicker.internation': string;
65
64
  'CityPicker.common': string;
66
- 'CityPicker.noData': string; /**
67
- * 获取所有语言包数据
68
- */
65
+ 'CityPicker.emptyText': string;
66
+ 'CityPicker.commonEmptyText': string;
67
+ 'CityPicker.tabsDomestic': string;
68
+ 'CityPicker.tabsInternation': string;
69
69
  'ColorPicker.followFunctionalColor': string;
70
70
  'Search.placeholder': string;
71
71
  'Search.desc': string[];
@@ -35,9 +35,11 @@ declare const locale: {
35
35
  'QuickSearch.emptyTip': string;
36
36
  'QuickSearch.or': string;
37
37
  'CityPicker.domestic': string;
38
- 'CityPicker.internation': string;
39
38
  'CityPicker.common': string;
40
- 'CityPicker.noData': string;
39
+ 'CityPicker.emptyText': string;
40
+ 'CityPicker.commonEmptyText': string;
41
+ 'CityPicker.tabsDomestic': string;
42
+ 'CityPicker.tabsInternation': string;
41
43
  'ColorPicker.followFunctionalColor': string;
42
44
  'Search.placeholder': string;
43
45
  'Search.desc': string[];
@@ -39,9 +39,11 @@ var locale = _extends(_extends({
39
39
  'QuickSearch.emptyTip': '暂无数据',
40
40
  'QuickSearch.or': '或',
41
41
  'CityPicker.domestic': '国内',
42
- 'CityPicker.internation': '国际',
43
42
  'CityPicker.common': '常用',
44
- 'CityPicker.noData': '暂无数据',
43
+ 'CityPicker.emptyText': '暂无数据',
44
+ 'CityPicker.commonEmptyText': '无常用城市',
45
+ 'CityPicker.tabsDomestic': '国内',
46
+ 'CityPicker.tabsInternation': '国际/中国港澳台',
45
47
  'ColorPicker.followFunctionalColor': '跟随功能色',
46
48
  'Search.placeholder': '请输入需要搜索的内容',
47
49
  'Search.desc': ['空格代表"或",回车代表"且"'],
@@ -169,6 +169,7 @@
169
169
  .kd-radio-input {
170
170
  position: absolute;
171
171
  opacity: 0;
172
+ left: 0;
172
173
  }
173
174
  .kd-radio > span {
174
175
  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
@@ -60,6 +60,7 @@
60
60
  &-input {
61
61
  position: absolute;
62
62
  opacity: 0;
63
+ left: 0;
63
64
  }
64
65
 
65
66
  &>span {
@@ -766,7 +766,7 @@ var InternalSelect = function InternalSelect(props, ref) {
766
766
  // open
767
767
  if (which === KeyCode.ENTER || which === KeyCode.UP || which === KeyCode.DOWN) {
768
768
  e.preventDefault();
769
- setOptionShow(true);
769
+ handleVisibleChange(true);
770
770
  }
771
771
  // backspace
772
772
  var _multipleRef$current5 = multipleRef.current,
@@ -810,10 +810,10 @@ var InternalSelect = function InternalSelect(props, ref) {
810
810
  }));
811
811
  }
812
812
  if (!isMultiple) {
813
- setOptionShow(false);
813
+ handleVisibleChange(false);
814
814
  }
815
815
  } else if (which === KeyCode.ESC) {
816
- setOptionShow(false);
816
+ handleVisibleChange(false);
817
817
  }
818
818
  if (offset !== 0) {
819
819
  var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
package/es/tag/tag.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface ITagProps {
19
19
  onClick?: React.MouseEventHandler<HTMLElement>;
20
20
  onClose?: React.MouseEventHandler<HTMLElement>;
21
21
  children?: React.ReactNode;
22
+ title?: string;
22
23
  }
23
24
  declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
24
25
  export default Tag;
@@ -444,7 +444,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
444
444
  onClose: function onClose(e) {
445
445
  return handleRemove(e, key);
446
446
  },
447
- "data-tag": key
447
+ "data-tag": key,
448
+ title: label
448
449
  }, label));
449
450
  }), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
450
451
  className: itemCls