@kdcloudjs/kdesign 1.0.4 → 1.1.2

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 (144) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/dist/kdesign-complete.less +230 -224
  3. package/dist/kdesign.css +127 -96
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +46 -52
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +6 -6
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/anchor/style/index.css +5 -0
  11. package/es/anchor/style/index.less +5 -0
  12. package/es/avatar/style/token.less +13 -8
  13. package/es/base-data/base-data.js +5 -1
  14. package/es/base-data/style/index.css +8 -3
  15. package/es/base-data/style/index.less +8 -3
  16. package/es/base-data/style/token.less +7 -0
  17. package/es/button/style/index.css +4 -4
  18. package/es/button/style/index.less +1 -1
  19. package/es/button/style/token.less +16 -14
  20. package/es/card/card.d.ts +1 -0
  21. package/es/card/card.js +4 -1
  22. package/es/card/style/index.css +16 -0
  23. package/es/card/style/index.less +19 -0
  24. package/es/card/style/token.less +8 -8
  25. package/es/carousel/style/index.css +4 -4
  26. package/es/carousel/style/token.less +10 -9
  27. package/es/city-picker/style/token.less +7 -7
  28. package/es/config-provider/compDefaultProps.d.ts +0 -1
  29. package/es/config-provider/compDefaultProps.js +1 -2
  30. package/es/date-picker/style/index.css +8 -8
  31. package/es/date-picker/style/index.less +8 -8
  32. package/es/date-picker/style/token.less +3 -21
  33. package/es/drawer/drawer.d.ts +0 -1
  34. package/es/drawer/drawer.js +6 -26
  35. package/es/drawer/style/index.css +8 -11
  36. package/es/drawer/style/index.less +7 -9
  37. package/es/drawer/style/token.less +3 -1
  38. package/es/dropdown/dropdown.d.ts +1 -0
  39. package/es/dropdown/dropdown.js +9 -6
  40. package/es/dropdown/menu.d.ts +1 -1
  41. package/es/dropdown/menu.js +3 -3
  42. package/es/form/Field.js +4 -2
  43. package/es/form/style/index.css +1 -2
  44. package/es/form/style/index.less +1 -2
  45. package/es/form/style/token.less +7 -12
  46. package/es/icon/interface.js +1 -1
  47. package/es/image/style/token.less +0 -13
  48. package/es/menu/menuItem.js +1 -2
  49. package/es/message/content.js +7 -3
  50. package/es/message/style/index.css +30 -13
  51. package/es/message/style/index.less +22 -9
  52. package/es/message/style/token.less +29 -5
  53. package/es/notification/content.js +1 -1
  54. package/es/notification/style/index.css +1 -1
  55. package/es/notification/style/index.less +1 -1
  56. package/es/pagination/pagination.js +2 -2
  57. package/es/pagination/style/token.less +5 -3
  58. package/es/progress/style/token.less +0 -8
  59. package/es/radio/style/token.less +0 -16
  60. package/es/select/style/index.css +2 -2
  61. package/es/select/style/token.less +2 -2
  62. package/es/split-panel/style/index.css +24 -42
  63. package/es/split-panel/style/index.less +14 -33
  64. package/es/split-panel/style/token.less +15 -4
  65. package/es/stepper/style/index.css +1 -0
  66. package/es/stepper/style/index.less +1 -0
  67. package/es/stepper/style/token.less +8 -10
  68. package/es/switch/style/token.less +0 -6
  69. package/es/timeline/style/token.less +0 -8
  70. package/es/transfer/operation.js +2 -2
  71. package/es/transfer/style/index.css +5 -1
  72. package/es/transfer/style/index.less +4 -0
  73. package/es/transfer/style/token.less +1 -1
  74. package/es/tree/style/index.css +6 -3
  75. package/es/tree/style/index.less +4 -0
  76. package/es/tree/style/token.less +2 -2
  77. package/lib/anchor/style/index.css +5 -0
  78. package/lib/anchor/style/index.less +5 -0
  79. package/lib/avatar/style/token.less +13 -8
  80. package/lib/base-data/base-data.js +5 -1
  81. package/lib/base-data/style/index.css +8 -3
  82. package/lib/base-data/style/index.less +8 -3
  83. package/lib/base-data/style/token.less +7 -0
  84. package/lib/button/style/index.css +4 -4
  85. package/lib/button/style/index.less +1 -1
  86. package/lib/button/style/token.less +16 -14
  87. package/lib/card/card.d.ts +1 -0
  88. package/lib/card/card.js +4 -1
  89. package/lib/card/style/index.css +16 -0
  90. package/lib/card/style/index.less +19 -0
  91. package/lib/card/style/token.less +8 -8
  92. package/lib/carousel/style/index.css +4 -4
  93. package/lib/carousel/style/token.less +10 -9
  94. package/lib/city-picker/style/token.less +7 -7
  95. package/lib/config-provider/compDefaultProps.d.ts +0 -1
  96. package/lib/config-provider/compDefaultProps.js +1 -2
  97. package/lib/date-picker/style/index.css +8 -8
  98. package/lib/date-picker/style/index.less +8 -8
  99. package/lib/date-picker/style/token.less +3 -21
  100. package/lib/drawer/drawer.d.ts +0 -1
  101. package/lib/drawer/drawer.js +6 -26
  102. package/lib/drawer/style/index.css +8 -11
  103. package/lib/drawer/style/index.less +7 -9
  104. package/lib/drawer/style/token.less +3 -1
  105. package/lib/dropdown/dropdown.d.ts +1 -0
  106. package/lib/dropdown/dropdown.js +9 -6
  107. package/lib/dropdown/menu.d.ts +1 -1
  108. package/lib/dropdown/menu.js +3 -3
  109. package/lib/form/Field.js +4 -2
  110. package/lib/form/style/index.css +1 -2
  111. package/lib/form/style/index.less +1 -2
  112. package/lib/form/style/token.less +7 -12
  113. package/lib/icon/interface.js +1 -1
  114. package/lib/image/style/token.less +0 -13
  115. package/lib/menu/menuItem.js +1 -2
  116. package/lib/message/content.js +7 -3
  117. package/lib/message/style/index.css +30 -13
  118. package/lib/message/style/index.less +22 -9
  119. package/lib/message/style/token.less +29 -5
  120. package/lib/notification/content.js +1 -1
  121. package/lib/notification/style/index.css +1 -1
  122. package/lib/notification/style/index.less +1 -1
  123. package/lib/pagination/pagination.js +2 -2
  124. package/lib/pagination/style/token.less +5 -3
  125. package/lib/progress/style/token.less +0 -8
  126. package/lib/radio/style/token.less +0 -16
  127. package/lib/select/style/index.css +2 -2
  128. package/lib/select/style/token.less +2 -2
  129. package/lib/split-panel/style/index.css +24 -42
  130. package/lib/split-panel/style/index.less +14 -33
  131. package/lib/split-panel/style/token.less +15 -4
  132. package/lib/stepper/style/index.css +1 -0
  133. package/lib/stepper/style/index.less +1 -0
  134. package/lib/stepper/style/token.less +8 -10
  135. package/lib/switch/style/token.less +0 -6
  136. package/lib/timeline/style/token.less +0 -8
  137. package/lib/transfer/operation.js +2 -2
  138. package/lib/transfer/style/index.css +5 -1
  139. package/lib/transfer/style/index.less +4 -0
  140. package/lib/transfer/style/token.less +1 -1
  141. package/lib/tree/style/index.css +6 -3
  142. package/lib/tree/style/index.less +4 -0
  143. package/lib/tree/style/token.less +2 -2
  144. package/package.json +1 -1
@@ -115,7 +115,7 @@
115
115
  bottom: -1px;
116
116
  height: 2px;
117
117
  margin-left: 11px;
118
- background: #1890ff;
118
+ background: @date-bar-color-bg-active;
119
119
  opacity: 0;
120
120
  transition: all 0.3s ease-out;
121
121
  pointer-events: none;
@@ -243,7 +243,7 @@
243
243
 
244
244
  &:not(.@{datePicker-prefix-cls}-year-item-disabled) {
245
245
  .@{datePicker-prefix-cls}-year-text-selected {
246
- background: #104ccc;
246
+ background: @date-square-item-color-selected;
247
247
  }
248
248
  }
249
249
  }
@@ -299,7 +299,7 @@
299
299
 
300
300
  &:not(.@{datePicker-prefix-cls}-month-item-disabled) {
301
301
  .@{datePicker-prefix-cls}-month-text-selected {
302
- background: #104ccc;
302
+ background: @date-square-item-color-selected;
303
303
  }
304
304
  }
305
305
  }
@@ -359,7 +359,7 @@
359
359
 
360
360
  &:not(.@{datePicker-prefix-cls}-quarter-item-disabled) {
361
361
  .@{datePicker-prefix-cls}-quarter-text-selected {
362
- background: #104ccc;
362
+ background: @date-square-item-color-selected;
363
363
  }
364
364
  }
365
365
  }
@@ -426,7 +426,7 @@
426
426
  }
427
427
 
428
428
  .@{datePicker-prefix-cls}-calendar-text-selected {
429
- background: #104ccc !important;
429
+ background: @date-square-item-color-selected !important;
430
430
  }
431
431
  }
432
432
 
@@ -489,7 +489,7 @@
489
489
  &:hover {
490
490
  & .@{datePicker-prefix-cls}-calendar-item:not(.@{datePicker-prefix-cls}-calendar-item-disabled) {
491
491
  .@{datePicker-prefix-cls}-calendar-week-text::before {
492
- background: #104ccc;
492
+ background: @date-square-item-color-selected;
493
493
  }
494
494
  }
495
495
  }
@@ -605,7 +605,7 @@
605
605
  height: 24px;
606
606
  width: 100%;
607
607
  margin: 0 -4px;
608
- background: #e6f7ff;
608
+ background: @date-range-item-color-bg;
609
609
  }
610
610
  }
611
611
 
@@ -699,7 +699,7 @@
699
699
 
700
700
  .@{datePicker-prefix-cls}-time-cell-selected {
701
701
  .@{datePicker-prefix-cls}-time-cell-inner {
702
- background: #e6f7ff;
702
+ background: @date-range-item-color-bg;
703
703
  }
704
704
  }
705
705
 
@@ -2,7 +2,6 @@
2
2
 
3
3
  @date-picker-custom-prefix: ~'--@{kd-prefix}-c-date-picker';
4
4
 
5
- // shadow
6
5
  // color
7
6
  @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
8
7
  @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
@@ -14,7 +13,6 @@
14
13
  @date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
15
14
  @date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
16
15
  @date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
17
-
18
16
  @date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', @color-disabled);
19
17
  @date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
20
18
  @date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
@@ -22,8 +20,10 @@
22
20
  @date-container-color: var(~'@{date-picker-custom-prefix}-container-color', @color-text-primary);
23
21
  @date-container-color-border: var(~'@{date-picker-custom-prefix}-container-color-border', @color-border-weak);
24
22
  @date-container-color-background: var(~'@{date-picker-custom-prefix}-container-color-background', @color-background-2);
25
-
26
23
  @date-footer-color-background: var(~'@{date-picker-custom-prefix}-footer-color-background', @color-background);
24
+ @date-bar-color-bg-active: var(~'@{date-picker-custom-prefix}-bar-color-bg-active', @color-theme);
25
+ @date-square-item-color-selected: var(~'@{date-picker-custom-prefix}-square-item-color-selected', @color-theme-hover);
26
+ @date-range-item-color-bg: var(~'@{date-picker-custom-prefix}-range-item-color-bg', @color-theme-1);
27
27
 
28
28
  // sizing
29
29
  @date-width: var(~'@{date-picker-custom-prefix}-sizing-width', 230px);
@@ -41,8 +41,6 @@
41
41
  @date-large-padding-horizontal: var(~'@{date-picker-custom-prefix}-large-spacing-padding-horizontal', 9px); // 大号 内间距 横向
42
42
  @date-suffix-spacing-margin-left: var(~'@{date-picker-custom-prefix}-suffix-spacing-margin-left', 10px);
43
43
 
44
-
45
- // motion
46
44
  // font
47
45
  @date-container-font-size: var(~'@{date-picker-custom-prefix}-container-font-size', @font-size-small);
48
46
  @date-panel-font-size: var(~'@{date-picker-custom-prefix}-panel-font-size', @font-size-middle);
@@ -53,19 +51,3 @@
53
51
  // radius
54
52
  @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
55
53
  @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
56
-
57
- // line-height
58
- // z-index
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
@@ -21,7 +21,6 @@ export interface IDrawerProps {
21
21
  getContainer?: (() => Element | CSSSelector | false | null) | Element | false;
22
22
  headerStyle?: CSSProperties;
23
23
  headerClassName?: string;
24
- height?: string | number;
25
24
  keyboard?: boolean;
26
25
  mask?: boolean;
27
26
  maskClassName?: string;
@@ -63,7 +63,6 @@ var InternalDrawer = function InternalDrawer(props, ref) {
63
63
  footerClassName = drawerProps.footerClassName,
64
64
  visible = drawerProps.visible,
65
65
  width = drawerProps.width,
66
- height = drawerProps.height,
67
66
  headerStyle = drawerProps.headerStyle,
68
67
  headerClassName = drawerProps.headerClassName,
69
68
  zindex = drawerProps.zIndex,
@@ -81,12 +80,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
81
80
  var _useState3 = useState(width),
82
81
  _useState4 = _slicedToArray(_useState3, 2),
83
82
  currentWidth = _useState4[0],
84
- setCurrentWidth = _useState4[1];
85
-
86
- var _useState5 = useState(height),
87
- _useState6 = _slicedToArray(_useState5, 2),
88
- currentHeight = _useState6[0],
89
- setCurrentHeight = _useState6[1]; // const previousWidthRef = usePrevious(currentWidth)
83
+ setCurrentWidth = _useState4[1]; // const previousWidthRef = usePrevious(currentWidth)
90
84
  // const previousHeightRef = usePrevious(currentHeight)
91
85
 
92
86
 
@@ -125,9 +119,8 @@ var InternalDrawer = function InternalDrawer(props, ref) {
125
119
  }
126
120
  }, [drawerContainer, isBody, isAtOriginalPlace, containerRef]);
127
121
  var handleContainerResize = useCallback(function (_ref) {
128
- var containerWidth = _ref.width,
129
- containerHeight = _ref.height;
130
- if (!visible && width === currentWidth && height === currentHeight) return;
122
+ var containerWidth = _ref.width;
123
+ if (!visible && width === currentWidth) return;
131
124
 
132
125
  if (containerWidth < currentWidth) {
133
126
  // 这里改成操作DOM?
@@ -137,13 +130,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
137
130
  } else {
138
131
  setCurrentWidth(width);
139
132
  }
140
-
141
- if (containerHeight < currentHeight) {
142
- setCurrentHeight(containerHeight);
143
- } else {
144
- setCurrentHeight(height);
145
- }
146
- }, [width, height, visible, currentWidth, currentHeight]);
133
+ }, [width, visible, currentWidth]);
147
134
  useResizeObserver(function () {
148
135
  var _a;
149
136
 
@@ -154,9 +141,6 @@ var InternalDrawer = function InternalDrawer(props, ref) {
154
141
  useEffect(function () {
155
142
  setCurrentWidth(width);
156
143
  }, [width]);
157
- useEffect(function () {
158
- setCurrentHeight(height);
159
- }, [height]);
160
144
  var closeDrawer = useCallback(function () {
161
145
  onClose && onClose();
162
146
  destroyOnClose && setShowChildren(false);
@@ -189,10 +173,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
189
173
  var containerStyle = _extends(_defineProperty({}, placement, 0), _includesInstanceProperty(horizontalPlacements).call(horizontalPlacements, placement) ? {
190
174
  width: currentWidth,
191
175
  transform: "translateX(".concat(visible ? 0 : transformSize(currentWidth, placement), ")")
192
- } : {
193
- height: currentHeight,
194
- transform: "translateY(".concat(visible ? 0 : transformSize(currentHeight, placement), ")")
195
- });
176
+ } : {});
196
177
 
197
178
  var container = /*#__PURE__*/React.createElement("div", {
198
179
  className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-container-box"), true), _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-has-container-box"), drawerContainer), _defineProperty(_classNames2, _concatInstanceProperty(_context2 = "".concat(drawerPrefixCls, "-container-")).call(_context2, placement), true), _classNames2)),
@@ -222,8 +203,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
222
203
  return p !== placement;
223
204
  })[0] : '';
224
205
  var noneMaskStyle = !mask ? {
225
- width: containerStyle.width,
226
- height: containerStyle.height
206
+ width: containerStyle.width
227
207
  } : {};
228
208
  var comp = /*#__PURE__*/React.createElement("div", {
229
209
  className: drawerClasses,
@@ -155,22 +155,21 @@
155
155
  .kd-drawer-not-at-body .kd-drawer-mask {
156
156
  position: absolute;
157
157
  }
158
- .kd-drawer-container-left {
159
- top: 0;
160
- bottom: 0;
161
- }
158
+ .kd-drawer-container-left,
162
159
  .kd-drawer-container-right {
163
160
  top: 0;
164
161
  bottom: 0;
165
162
  }
166
- .kd-drawer-container-top {
167
- left: 0;
168
- right: 0;
169
- }
163
+ .kd-drawer-container-top,
170
164
  .kd-drawer-container-bottom {
171
165
  left: 0;
172
166
  right: 0;
173
167
  }
168
+ .kd-drawer-container-top .kd-drawer-body,
169
+ .kd-drawer-container-bottom .kd-drawer-body {
170
+ max-height: var(--kd-c-drawer-body-max-height-vertical, 470px);
171
+ overflow-y: auto;
172
+ }
174
173
  .kd-drawer-container-box {
175
174
  display: -webkit-box;
176
175
  display: -ms-flexbox;
@@ -196,18 +195,16 @@
196
195
  -webkit-box-align: center;
197
196
  -ms-flex-align: center;
198
197
  align-items: center;
199
- padding: var(--kd-c-drawer-header-sizing-padding, 12px);
198
+ padding: var(--kd-c-drawer-header-sizing-padding-vertical, 12px) var(--kd-c-drawer-header-sizing-padding-horizontal, 16px);
200
199
  border-bottom: var(--kd-c-drawer-dividing-sizing-width, 1px) solid var(--kd-c-drawer-dividing-color-border, var(--kd-g-color-border-disabled, #ccc));
201
200
  }
202
201
  .kd-drawer-container-box .kd-drawer-header .kd-drawer-title {
203
- margin-left: 20px;
204
202
  letter-spacing: 0;
205
203
  line-height: 26px;
206
204
  font-size: var(--kd-c-drawer-title-font-size, var(--kd-g-font-size-x-large, 18px));
207
205
  color: var(--kd-c-drawer-title-color-text, var(--kd-g-color-text-primary, #212121));
208
206
  }
209
207
  .kd-drawer-container-box .kd-drawer-header .kd-drawer-close-icon {
210
- margin-right: 10px;
211
208
  cursor: pointer;
212
209
  }
213
210
  .kd-drawer-container-box .kd-drawer-header .kd-drawer-close-icon i {
@@ -32,17 +32,17 @@
32
32
  position: absolute;
33
33
  }
34
34
  }
35
- &-container-left {
36
- .drawer-container-placement-horizontal();
37
- }
35
+ &-container-left,
38
36
  &-container-right {
39
37
  .drawer-container-placement-horizontal();
40
38
  }
41
- &-container-top {
42
- .drawer-container-placement-vertical();
43
- }
39
+ &-container-top,
44
40
  &-container-bottom {
45
41
  .drawer-container-placement-vertical();
42
+ .@{drawer-prefix-cls}-body {
43
+ max-height: @drawer-body-max-height-vertical;
44
+ overflow-y: auto;
45
+ }
46
46
  }
47
47
 
48
48
  &-container-box {
@@ -56,10 +56,9 @@
56
56
  display: flex;
57
57
  justify-content: space-between;
58
58
  align-items: center;
59
- padding: @drawer-header-padding;
59
+ padding: @drawer-header-padding-vertical @drawer-header-padding-horizontal;
60
60
  border-bottom: @drawer-dividing-width solid @drawer-dividing-color;
61
61
  .@{drawer-prefix-cls}-title {
62
- margin-left: 20px;
63
62
  letter-spacing: 0;
64
63
  line-height: 26px;
65
64
  font-size: @drawer-title-font-size;
@@ -70,7 +69,6 @@
70
69
  color: @drawer-close-icon-color;
71
70
  font-size: @drawer-close-icon-font-size;
72
71
  }
73
- margin-right: 10px;
74
72
  cursor: pointer;
75
73
  }
76
74
  }
@@ -14,8 +14,10 @@
14
14
  @drawer-close-icon-font-size: var(~'@{drawer-custom-prefix}-close-icon-font-size', @font-size-large);
15
15
 
16
16
  // sizing
17
+ @drawer-body-max-height-vertical: var(~'@{drawer-custom-prefix}-body-max-height-vertical', 470px);
17
18
  @drawer-dividing-width: var(~'@{drawer-custom-prefix}-dividing-sizing-width', 1px);
18
19
 
19
20
  // spacing
20
- @drawer-header-padding: var(~'@{drawer-custom-prefix}-header-sizing-padding', 12px);
21
+ @drawer-header-padding-vertical: var(~'@{drawer-custom-prefix}-header-sizing-padding-vertical', 12px);
22
+ @drawer-header-padding-horizontal: var(~'@{drawer-custom-prefix}-header-sizing-padding-horizontal', 16px);
21
23
  @drawer-body-padding: var(~'@{drawer-custom-prefix}-body-sizing-padding', 16px);
@@ -12,6 +12,7 @@ declare type MenuItem = {
12
12
  };
13
13
  export interface DropDownProps extends PopperProps {
14
14
  defaultKey?: string;
15
+ selectedKey?: string;
15
16
  selectable?: boolean;
16
17
  children?: React.ReactNode;
17
18
  onItemClick?: (key: string) => void;
@@ -44,11 +44,14 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
44
44
  });
45
45
  var isMenu = menu.type === Menu;
46
46
 
47
- var _React$useState3 = React.useState(((_a = menu.props) === null || _a === void 0 ? void 0 : _a.defaultKey) || props.defaultKey || ''),
47
+ var _React$useState3 = React.useState(props.selectedKey || ((_a = menu.props) === null || _a === void 0 ? void 0 : _a.defaultKey) || props.defaultKey || ''),
48
48
  _React$useState4 = _slicedToArray(_React$useState3, 2),
49
- defaultKey = _React$useState4[0],
50
- setKeyValue = _React$useState4[1];
49
+ selectedKey = _React$useState4[0],
50
+ setSelectedKey = _React$useState4[1];
51
51
 
52
+ React.useEffect(function () {
53
+ setSelectedKey(props.selectedKey);
54
+ }, [props.selectedKey]);
52
55
  var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
53
56
 
54
57
  var handleItemClick = function handleItemClick(e) {
@@ -65,13 +68,13 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
65
68
  onItemClick(key);
66
69
  }
67
70
 
68
- menuSelectable && setKeyValue(key);
71
+ menuSelectable && setSelectedKey(key);
69
72
  props.visible === undefined && setVisible(false);
70
73
  }
71
74
  };
72
75
 
73
76
  var menuElement = isMenu ? /*#__PURE__*/React.cloneElement(menu, {
74
- defaultKey: defaultKey,
77
+ selectedKey: selectedKey,
75
78
  onClick: handleItemClick,
76
79
  selectable: menuSelectable
77
80
  }) : /*#__PURE__*/React.createElement("ul", {
@@ -91,7 +94,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
91
94
  rel: 'noopener noreferrer'
92
95
  };
93
96
  var key = itemKey || label;
94
- var selected = selectable && String(defaultKey) === String(key);
97
+ var selected = selectable && String(selectedKey) === String(key);
95
98
  return /*#__PURE__*/React.createElement("li", {
96
99
  title: label,
97
100
  key: key,
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export interface MenuProps {
3
- defaultKey?: string;
3
+ selectedKey?: string;
4
4
  className?: string;
5
5
  selectable?: boolean;
6
6
  style?: React.CSSProperties;
@@ -32,16 +32,16 @@ export var Menu = /*#__PURE__*/React.forwardRef(function (props, ref) {
32
32
  customPrefixcls = _a.prefixCls,
33
33
  children = _a.children,
34
34
  selectable = _a.selectable,
35
- defaultKey = _a.defaultKey,
35
+ selectedKey = _a.selectedKey,
36
36
  className = _a.className,
37
- restProps = __rest(_a, ["prefixCls", "children", "selectable", "defaultKey", "className"]); // className前缀
37
+ restProps = __rest(_a, ["prefixCls", "children", "selectable", "selectedKey", "className"]); // className前缀
38
38
 
39
39
 
40
40
  var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown-menu', customPrefixcls);
41
41
 
42
42
  var cloneItem = function cloneItem(item, index) {
43
43
  var key = item.key || index;
44
- var selected = selectable && String(defaultKey) === String(key);
44
+ var selected = selectable && String(selectedKey) === String(key);
45
45
  return /*#__PURE__*/React.cloneElement(item, {
46
46
  key: key,
47
47
  selected: selected,
package/es/form/Field.js CHANGED
@@ -123,7 +123,9 @@ var Field = function Field(props) {
123
123
  });
124
124
  var mergedRequired = required || !!rulesRequired;
125
125
 
126
- if (rules.length === 0 && required) {
126
+ if (Array.isArray(rules) && !rules.some(function (rule) {
127
+ return Object.prototype.hasOwnProperty.call(rule, 'required');
128
+ }) && required) {
127
129
  rules.push({
128
130
  required: true
129
131
  });
@@ -131,7 +133,7 @@ var Field = function Field(props) {
131
133
 
132
134
  var mergeRules = rules;
133
135
 
134
- if (Array.isArray(mergeRules) && mergeRules.length) {
136
+ if (mergeRules.length) {
135
137
  mergeRules = _mapInstanceProperty(rules).call(rules, function (r) {
136
138
  if (typeof r === 'function') {
137
139
  return r(fieldContext);
@@ -174,13 +174,12 @@
174
174
  }
175
175
  .kd-form-field-wrapper-message {
176
176
  position: absolute;
177
- left: 0;
177
+ left: -7px;
178
178
  right: 0;
179
179
  padding: var(--kd-c-form-field-message-spacing-padding-horizontal, 2px) var(--kd-c-form-field-message-spacing-padding-vertical, 8px);
180
180
  font-size: var(--kd-c-form-field-message-font-size, 12px);
181
181
  line-height: var(--kd-c-form-field-message-line-height, 18px);
182
182
  color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
183
- background-color: var(--kd-c-form-error-color-background, var(--kd-g-color-background-error, #fff2f4));
184
183
  word-break: break-word;
185
184
  overflow: hidden;
186
185
  white-space: nowrap;
@@ -72,13 +72,12 @@
72
72
  position: relative;
73
73
  &-message {
74
74
  position: absolute;
75
- left: 0;
75
+ left: -7px;
76
76
  right: 0;
77
77
  padding: @form-field-message-spacing-padding-horizontal @form-field-message-spacing-padding-vertical;
78
78
  font-size: @form-field-message-font-size;
79
79
  line-height: @form-field-message-line-height;
80
80
  color: @form-error-color;
81
- background-color: @form-error-color-background;
82
81
  word-break: break-word;
83
82
  overflow: hidden;
84
83
  white-space: nowrap;
@@ -2,26 +2,21 @@
2
2
 
3
3
  @form-prefix: '--@{kd-prefix}-c-form';
4
4
 
5
- // shadow
6
5
  // color
7
6
  @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
8
7
  @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
9
- @form-error-color-background: var(~'@{form-prefix}-error-color-background', @color-background-error);
10
8
 
11
- // sizing
12
- // spacing
13
- @form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
14
- @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
15
- @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
16
- @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
17
-
18
- // motion
19
9
  // font
20
10
  @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
21
11
  @form-field-message-font-size: var(~'@{form-prefix}-field-message-font-size', 12px);
22
12
 
23
- // radius
24
13
  // line-height
25
14
  @form-field-label-line-height: var(~'@{form-prefix}-field-label-line-height', 18px);
26
15
  @form-field-message-line-height: var(~'@{form-prefix}-field-message-line-height', 18px);
27
- // z-index
16
+
17
+ // spacing
18
+ @form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
19
+ @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
20
+ @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
21
+ @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
22
+
@@ -1,5 +1,5 @@
1
1
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
2
2
  import { tuple } from '../_utils/type';
3
- export var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'svn', 'reset', 'preview-view', 'unfold', 'unfoldmenu', 'foldmenu', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'meun', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'litte-k', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting'];
3
+ export var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'unfoldmenu', 'foldmenu', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'reset', 'preview-view', 'unfold', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'menu', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting', 'chart-display', 'date', 'more-item', 'international', 'little-k', 'bellOutlined'];
4
4
  export var SolidIcon = ['arrow-up-solid', 'arrow-right-solid', 'arrow-down-solid', 'arrow-left-solid', 'left-unfold-solid', 'right-unfold-solid', 'unlock-solid', 'multiply', 'division-solid', 'title-solid', 'communication-solid', 'fixed-solid', 'more-info-solid', 'timezone-solid', 'mosaic-solid', 'strike-solid', 'lock-solid', 'filter-solid', 'person-solid', 'bold-solid', 'delete-solid', 'processing-solid', 'tips-solid', 'quote-solid', 'oblique-solid', 'sun-solid', 'underline-solid', 'font-background-solid', 'eliminate-solid', 'font-color-solid', 'fx', 'refresh-solid', 'right-solid', 'location-solid', 'add-solid', 'warning-solid', 'close-solid', 'right-bold', 'close-bold', 'workbench', 'star', 'notice'];
5
5
  export var IconTypes = tuple.apply(void 0, _concatInstanceProperty(BaseIcon).call(BaseIcon, SolidIcon));
@@ -2,24 +2,11 @@
2
2
 
3
3
  @image-prefix: '--@{kd-prefix}-c-image';
4
4
 
5
-
6
-
7
-
8
-
9
-
10
-
11
5
  @image-transition-duration: var(~'@{image-prefix}-transition-duration',@transition-duration);
12
-
13
6
  @image-motion-ease-out: var(~'@{image-prefix}-motion-ease-out',@motion-ease-out);
14
7
  @image-motion-ease-in: var(~'@{image-prefix}-motion-ease-out',@motion-ease-in);
15
-
16
-
17
-
18
8
  @image-z-index-masker: var(~'@{image-prefix}-z-index-masker',@z-index-masker);
19
-
20
9
  @image-border-radius: var(~'@{image-prefix}-radius-border',@radius-border);
21
-
22
-
23
10
  @image-action-transition: var(~'@{image-prefix}-action-transition',@duration-quickly);
24
11
 
25
12
 
@@ -132,8 +132,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
132
132
  className: classNames(className, (_classNames = {}, _defineProperty(_classNames, prefixCls, subMenuMode !== 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),
133
133
  role: "menuitem",
134
134
  style: style,
135
- key: keyValue,
136
- title: children
135
+ key: keyValue
137
136
  }, mouseEvent), /*#__PURE__*/React.createElement("div", {
138
137
  className: classNames("".concat(prefixCls, "-title")),
139
138
  style: titleStyle
@@ -30,13 +30,17 @@ var Content = function Content(args) {
30
30
  type: "warning-solid"
31
31
  }),
32
32
  info: /*#__PURE__*/React.createElement(Icon, {
33
- type: "tips-solid"
33
+ type: "notice"
34
34
  })
35
35
  };
36
36
 
37
37
  var renderIcon = function renderIcon() {
38
- if (icon) return /*#__PURE__*/React.createElement("div", null, icon);
39
- return iconMap[type] ? /*#__PURE__*/React.createElement("div", null, iconMap[type]) : null;
38
+ if (icon) return /*#__PURE__*/React.createElement("div", {
39
+ className: "".concat(classPrefix, "-icon-wrapper")
40
+ }, icon);
41
+ return iconMap[type] ? /*#__PURE__*/React.createElement("div", {
42
+ className: "".concat(classPrefix, "-icon-wrapper")
43
+ }, iconMap[type]) : null;
40
44
  };
41
45
 
42
46
  var handleClick = function handleClick(e) {
@@ -120,13 +120,13 @@
120
120
  display: inline-block;
121
121
  -webkit-box-sizing: border-box;
122
122
  box-sizing: border-box;
123
- min-width: 280px;
124
- max-width: 1000px;
125
- margin: 0 auto 16px;
126
- padding: 10px 20px;
127
- color: var(--kd-c-message-info-color-text, var(--kd-g-color-text-link, #0e5fd8));
123
+ min-width: var(--kd-c-message-sizing-min-width, 280px);
124
+ max-width: var(--kd-c-message-sizing-max-width, 1000px);
125
+ margin: 0 auto var(--kd-c-message-spacing-margin-bottom, 16px);
126
+ padding: var(--kd-c-message-spacing-padding-horizontal, 10px) var(--kd-c-message-spacing-padding-vertical, 20px);
127
+ color: var(--kd-c-message-info-color-text, #0e5fd8);
128
128
  border: 1px solid var(--kd-c-message-info-color-border, #b3d5ff);
129
- border-radius: 4px;
129
+ border-radius: var(--kd-c-message-border-radius, 4px);
130
130
  background-color: var(--kd-c-message-info-color-background, #e0efff);
131
131
  pointer-events: all;
132
132
  -webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
@@ -139,37 +139,54 @@
139
139
  -webkit-box-pack: justify;
140
140
  -ms-flex-pack: justify;
141
141
  justify-content: space-between;
142
- font-size: 12px;
142
+ font-size: var(--kd-c-message-font-size, 14px);
143
+ line-height: var(--kd-c-message-line-height, 20px);
143
144
  }
144
145
  .kd-message-content-main {
145
146
  display: -webkit-box;
146
147
  display: -ms-flexbox;
147
148
  display: flex;
149
+ }
150
+ .kd-message-content-icon-wrapper {
151
+ font-size: var(--kd-c-message-icon-font-size, 16px);
152
+ margin-right: var(--kd-c-message-icon-spacing-margin-right, 8px);
153
+ -ms-flex-item-align: start;
154
+ align-self: flex-start;
155
+ display: -webkit-inline-box;
156
+ display: -ms-inline-flexbox;
157
+ display: inline-flex;
148
158
  -webkit-box-align: center;
149
159
  -ms-flex-align: center;
150
160
  align-items: center;
151
161
  }
152
- .kd-message-content-main > div:nth-child(1) {
153
- margin-right: 10px;
162
+ .kd-message-content-text {
163
+ max-height: var(--kd-c-message-text-sizing-max-height, 160px);
164
+ overflow: auto;
154
165
  }
155
166
  .kd-message-content-close {
156
167
  cursor: pointer;
168
+ color: var(--kd-c-message-close-color-text, #666);
169
+ font-size: var(--kd-c-message-font-size, 16px);
170
+ margin-left: var(--kd-c-message-close-spacing-margin-left, 12px);
171
+ display: -webkit-inline-box;
172
+ display: -ms-inline-flexbox;
173
+ display: inline-flex;
157
174
  }
158
175
  .kd-message-content-close:hover {
159
- color: var(--kd-c-message-icon-color-text-hover, var(--kd-g-color-border-ongoing, #85b8ff));
176
+ color: var(--kd-c-message-close-color-text-hover, var(--kd-g-color-theme-5, #87adff));
160
177
  }
161
178
  .kd-message-success {
162
- color: var(--kd-c-message-success-color-text, var(--kd-g-color-success, #1ba854));
179
+ color: var(--kd-c-message-success-color-text, #1BA854);
163
180
  background: var(--kd-c-message-success-color-background, #dcfae4);
164
181
  border: 1px solid var(--kd-c-message-success-color-border, #a1e6b5);
165
182
  }
166
183
  .kd-message-warning {
167
- color: var(--kd-c-message-warning-color-text, var(--kd-g-color-warning, #ff991c));
184
+ color: var(--kd-c-message-warning-color-text, #FF991C);
168
185
  background: var(--kd-c-message-warning-color-background, #fff1d4);
169
186
  border: 1px solid var(--kd-c-message-warning-color-border, #ffe0a6);
170
187
  }
171
188
  .kd-message-error {
172
- color: var(--kd-c-message-error-color-text, var(--kd-g-color-error, #fb2323));
189
+ color: var(--kd-c-message-error-color-text, #FB2323);
173
190
  background: var(--kd-c-message-error-color-background, #ffdbe0);
174
191
  border: 1px solid var(--kd-c-message-error-color-border, #ffadb6);
175
192
  }