@kdcloudjs/kdesign 1.1.3 → 1.2.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 (132) hide show
  1. package/CHANGELOG.md +79 -3
  2. package/dist/kdesign-complete.less +1006 -783
  3. package/dist/kdesign.css +358 -268
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +529 -262
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.js +33 -12
  11. package/es/anchor/anchor.js +0 -6
  12. package/es/anchor/style/index.css +5 -2
  13. package/es/anchor/style/index.less +6 -2
  14. package/es/anchor/style/token.less +2 -1
  15. package/es/button/button.d.ts +1 -1
  16. package/es/button/button.js +2 -2
  17. package/es/button/group.d.ts +21 -0
  18. package/es/button/group.js +130 -0
  19. package/es/button/index.d.ts +5 -1
  20. package/es/button/index.js +4 -1
  21. package/es/button/style/index.css +117 -21
  22. package/es/button/style/index.less +332 -192
  23. package/es/button/style/token.less +41 -25
  24. package/es/carousel/carousel.js +4 -0
  25. package/es/carousel/displayList.js +8 -4
  26. package/es/carousel/fadeList.js +9 -5
  27. package/es/carousel/slideList.js +6 -3
  28. package/es/carousel/style/index.css +65 -0
  29. package/es/carousel/style/index.less +66 -1
  30. package/es/collapse/panel.d.ts +1 -0
  31. package/es/collapse/panel.js +17 -5
  32. package/es/collapse/style/index.css +32 -6
  33. package/es/collapse/style/index.less +24 -1
  34. package/es/collapse/style/token.less +12 -10
  35. package/es/config-provider/compDefaultProps.d.ts +4 -0
  36. package/es/config-provider/compDefaultProps.js +4 -0
  37. package/es/drawer/drawer.d.ts +1 -0
  38. package/es/drawer/drawer.js +56 -21
  39. package/es/empty/defaultEmptyImg.js +5 -3
  40. package/es/empty/illustrationEmptyImg.js +6 -4
  41. package/es/icon/interface.js +1 -1
  42. package/es/image/preview.js +1 -1
  43. package/es/image/style/index.css +8 -8
  44. package/es/image/style/index.less +5 -5
  45. package/es/image/style/token.less +12 -25
  46. package/es/radio/radio.js +3 -1
  47. package/es/radio/style/index.css +51 -24
  48. package/es/radio/style/index.less +28 -2
  49. package/es/radio/style/token.less +4 -4
  50. package/es/rate/style/index.css +9 -9
  51. package/es/rate/style/token.less +6 -6
  52. package/es/select/option.js +1 -1
  53. package/es/select/style/index.css +14 -5
  54. package/es/select/style/index.less +374 -368
  55. package/es/select/style/token.less +2 -2
  56. package/es/stepper/style/index.css +1 -1
  57. package/es/stepper/style/token.less +1 -1
  58. package/es/steps/style/index.css +40 -32
  59. package/es/steps/style/index.less +23 -33
  60. package/es/steps/style/token.less +6 -9
  61. package/es/style/icon/kdicon.css +2 -1
  62. package/es/style/icon/kdicon.woff +0 -0
  63. package/es/switch/style/index.css +11 -11
  64. package/es/switch/style/index.less +2 -2
  65. package/es/switch/style/token.less +7 -10
  66. package/es/tabs/tabs.js +5 -1
  67. package/es/tag/style/index.css +2 -147
  68. package/es/tag/style/index.less +4 -24
  69. package/es/tag/style/mixin.less +0 -13
  70. package/es/tag/style/token.less +1 -1
  71. package/lib/_utils/usePopper.js +34 -12
  72. package/lib/anchor/anchor.js +0 -6
  73. package/lib/anchor/style/index.css +5 -2
  74. package/lib/anchor/style/index.less +6 -2
  75. package/lib/anchor/style/token.less +2 -1
  76. package/lib/button/button.d.ts +1 -1
  77. package/lib/button/button.js +2 -2
  78. package/lib/button/group.d.ts +21 -0
  79. package/lib/button/group.js +166 -0
  80. package/lib/button/index.d.ts +5 -1
  81. package/lib/button/index.js +5 -1
  82. package/lib/button/style/index.css +117 -21
  83. package/lib/button/style/index.less +332 -192
  84. package/lib/button/style/token.less +41 -25
  85. package/lib/carousel/carousel.js +4 -0
  86. package/lib/carousel/displayList.js +9 -4
  87. package/lib/carousel/fadeList.js +10 -5
  88. package/lib/carousel/slideList.js +6 -3
  89. package/lib/carousel/style/index.css +65 -0
  90. package/lib/carousel/style/index.less +66 -1
  91. package/lib/collapse/panel.d.ts +1 -0
  92. package/lib/collapse/panel.js +17 -5
  93. package/lib/collapse/style/index.css +32 -6
  94. package/lib/collapse/style/index.less +24 -1
  95. package/lib/collapse/style/token.less +12 -10
  96. package/lib/config-provider/compDefaultProps.d.ts +4 -0
  97. package/lib/config-provider/compDefaultProps.js +4 -0
  98. package/lib/drawer/drawer.d.ts +1 -0
  99. package/lib/drawer/drawer.js +61 -27
  100. package/lib/empty/defaultEmptyImg.js +6 -3
  101. package/lib/empty/illustrationEmptyImg.js +7 -4
  102. package/lib/icon/interface.js +1 -1
  103. package/lib/image/preview.js +1 -1
  104. package/lib/image/style/index.css +8 -8
  105. package/lib/image/style/index.less +5 -5
  106. package/lib/image/style/token.less +12 -25
  107. package/lib/radio/radio.js +3 -1
  108. package/lib/radio/style/index.css +51 -24
  109. package/lib/radio/style/index.less +28 -2
  110. package/lib/radio/style/token.less +4 -4
  111. package/lib/rate/style/index.css +9 -9
  112. package/lib/rate/style/token.less +6 -6
  113. package/lib/select/option.js +1 -1
  114. package/lib/select/style/index.css +14 -5
  115. package/lib/select/style/index.less +374 -368
  116. package/lib/select/style/token.less +2 -2
  117. package/lib/stepper/style/index.css +1 -1
  118. package/lib/stepper/style/token.less +1 -1
  119. package/lib/steps/style/index.css +40 -32
  120. package/lib/steps/style/index.less +23 -33
  121. package/lib/steps/style/token.less +6 -9
  122. package/lib/style/icon/kdicon.css +2 -1
  123. package/lib/style/icon/kdicon.woff +0 -0
  124. package/lib/switch/style/index.css +11 -11
  125. package/lib/switch/style/index.less +2 -2
  126. package/lib/switch/style/token.less +7 -10
  127. package/lib/tabs/tabs.js +6 -1
  128. package/lib/tag/style/index.css +2 -147
  129. package/lib/tag/style/index.less +4 -24
  130. package/lib/tag/style/mixin.less +0 -13
  131. package/lib/tag/style/token.less +1 -1
  132. package/package.json +1 -1
@@ -9,24 +9,29 @@ exports.DisplayList = void 0;
9
9
 
10
10
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
11
11
 
12
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
+
12
14
  var _react = _interopRequireDefault(require("react"));
13
15
 
14
16
  var _classnames = _interopRequireDefault(require("classnames"));
15
17
 
16
18
  var DisplayList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
19
+ var _context;
20
+
17
21
  var items = props.items,
18
22
  parentPrefixCls = props.parentPrefixCls,
19
23
  currentIndex = props.currentIndex;
20
24
 
21
25
  var itemRef = _react.default.useRef(null);
22
26
 
23
- var displayListPrefixCls = "".concat(parentPrefixCls, "-displaylist");
27
+ var displayListPrefixCls = "".concat(parentPrefixCls, "-list-display");
28
+ var listPrefixCls = "".concat(parentPrefixCls, "-list");
24
29
 
25
30
  var renderItems = function renderItems() {
26
31
  return (0, _map.default)(items).call(items, function (item, index) {
27
- var opacityClassName = index === currentIndex ? "".concat(displayListPrefixCls, "-item-not-hidden") : "".concat(displayListPrefixCls, "-item-hidden");
32
+ var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
28
33
  return /*#__PURE__*/_react.default.createElement("li", {
29
- className: (0, _classnames.default)("".concat(displayListPrefixCls, "-item"), opacityClassName),
34
+ className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), opacityClassName),
30
35
  key: index,
31
36
  ref: itemRef
32
37
  }, item);
@@ -34,7 +39,7 @@ var DisplayList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
34
39
  };
35
40
 
36
41
  return /*#__PURE__*/_react.default.createElement("ul", {
37
- className: displayListPrefixCls,
42
+ className: (0, _concat.default)(_context = "".concat(listPrefixCls, " ")).call(_context, displayListPrefixCls),
38
43
  ref: ref
39
44
  }, renderItems());
40
45
  });
@@ -9,11 +9,15 @@ exports.FadeList = void 0;
9
9
 
10
10
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
11
11
 
12
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
+
12
14
  var _react = _interopRequireDefault(require("react"));
13
15
 
14
16
  var _classnames = _interopRequireDefault(require("classnames"));
15
17
 
16
18
  var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
19
+ var _context;
20
+
17
21
  var items = props.items,
18
22
  parentPrefixCls = props.parentPrefixCls,
19
23
  needAnimation = props.needAnimation,
@@ -22,15 +26,16 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
22
26
 
23
27
  var itemRef = _react.default.useRef(null);
24
28
 
25
- var fadeListPrefixCls = "".concat(parentPrefixCls, "-fadelist");
29
+ var fadeListPrefixCls = "".concat(parentPrefixCls, "-list-fade");
30
+ var listPrefixCls = "".concat(parentPrefixCls, "-list");
26
31
 
27
32
  var renderItems = function renderItems() {
28
33
  return (0, _map.default)(items).call(items, function (item, index) {
29
- var opacityClassName = index === currentIndex ? "".concat(fadeListPrefixCls, "-item-not-hidden") : "".concat(fadeListPrefixCls, "-item-hidden");
30
- var animationClassName = needAnimation ? "".concat(fadeListPrefixCls, "-item-animation") : "".concat(fadeListPrefixCls, "-item-none-animation");
34
+ var opacityClassName = index === currentIndex ? "".concat(listPrefixCls, "-item-not-hidden") : "".concat(listPrefixCls, "-item-hidden");
35
+ var animationClassName = needAnimation ? "".concat(listPrefixCls, "-item-animation") : "".concat(listPrefixCls, "-item-none-animation");
31
36
  var posx = -1 * index * itemWidth;
32
37
  return /*#__PURE__*/_react.default.createElement("li", {
33
- className: (0, _classnames.default)("".concat(fadeListPrefixCls, "-item"), opacityClassName, animationClassName),
38
+ className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), opacityClassName, animationClassName),
34
39
  key: index,
35
40
  ref: itemRef,
36
41
  style: {
@@ -41,7 +46,7 @@ var FadeList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
41
46
  };
42
47
 
43
48
  return /*#__PURE__*/_react.default.createElement("ul", {
44
- className: fadeListPrefixCls,
49
+ className: (0, _concat.default)(_context = "".concat(listPrefixCls, " ")).call(_context, fadeListPrefixCls),
45
50
  ref: ref
46
51
  }, renderItems());
47
52
  });
@@ -16,9 +16,12 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
16
16
  var _react = _interopRequireDefault(require("react"));
17
17
 
18
18
  var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
19
+ var _context2;
20
+
19
21
  var items = props.items,
20
22
  parentPrefixCls = props.parentPrefixCls;
21
- var slideListPrefixCls = "".concat(parentPrefixCls, "-slidelist");
23
+ var slideListPrefixCls = "".concat(parentPrefixCls, "-list-slide");
24
+ var listPrefixCls = "".concat(parentPrefixCls, "-list");
22
25
 
23
26
  var renderItems = function renderItems() {
24
27
  var _context;
@@ -28,14 +31,14 @@ var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
28
31
 
29
32
  return (0, _map.default)(_items).call(_items, function (item, index) {
30
33
  return /*#__PURE__*/_react.default.createElement("li", {
31
- className: "".concat(slideListPrefixCls, "-item"),
34
+ className: "".concat(listPrefixCls, "-item"),
32
35
  key: index
33
36
  }, item);
34
37
  });
35
38
  };
36
39
 
37
40
  return /*#__PURE__*/_react.default.createElement("ul", {
38
- className: slideListPrefixCls,
41
+ className: (0, _concat.default)(_context2 = "".concat(listPrefixCls, " ")).call(_context2, slideListPrefixCls),
39
42
  ref: ref
40
43
  }, renderItems());
41
44
  });
@@ -190,6 +190,71 @@
190
190
  .kd-carousel-displaylist-item-hidden {
191
191
  display: none;
192
192
  }
193
+ .kd-carousel-list {
194
+ list-style: none;
195
+ display: -webkit-box;
196
+ display: -ms-flexbox;
197
+ display: flex;
198
+ -webkit-box-orient: horizontal;
199
+ -webkit-box-direction: normal;
200
+ -ms-flex-direction: row;
201
+ flex-direction: row;
202
+ -webkit-box-flex: 1;
203
+ -ms-flex: 1;
204
+ flex: 1;
205
+ position: relative;
206
+ }
207
+ .kd-carousel-list-item {
208
+ position: relative;
209
+ -ms-flex-negative: 0;
210
+ flex-shrink: 0;
211
+ height: 100%;
212
+ width: 100%;
213
+ }
214
+ .kd-carousel-list-slide .kd-carousel-list-item {
215
+ opacity: 1;
216
+ border-radius: var(--kd-c-carousel-border-radius, 0px);
217
+ }
218
+ .kd-carousel-list-slide .kd-carousel-list-item-animation {
219
+ -webkit-transition: opacity 0.3s ease;
220
+ transition: opacity 0.3s ease;
221
+ }
222
+ .kd-carousel-list-slide .kd-carousel-list-item-none-animation {
223
+ -webkit-transition: none;
224
+ transition: none;
225
+ }
226
+ .kd-carousel-list-slide .kd-carousel-list-item-not-hidden {
227
+ opacity: 1;
228
+ }
229
+ .kd-carousel-list-slide .kd-carousel-list-item-hidden {
230
+ opacity: 0;
231
+ }
232
+ .kd-carousel-list-fade .kd-carousel-list-item {
233
+ opacity: 1;
234
+ }
235
+ .kd-carousel-list-fade .kd-carousel-list-item-animation {
236
+ -webkit-transition: opacity 0.3s ease;
237
+ transition: opacity 0.3s ease;
238
+ }
239
+ .kd-carousel-list-fade .kd-carousel-list-item-none-animation {
240
+ -webkit-transition: none;
241
+ transition: none;
242
+ }
243
+ .kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
244
+ opacity: 1;
245
+ }
246
+ .kd-carousel-list-fade .kd-carousel-list-item-hidden {
247
+ opacity: 0;
248
+ }
249
+ .kd-carousel-list-display .kd-carousel-list-item {
250
+ display: block;
251
+ }
252
+ .kd-carousel-list-display .kd-carousel-list-item-not-hidden {
253
+ display: block;
254
+ }
255
+ .kd-carousel-list-display .kd-carousel-list-item-hidden {
256
+ display: none;
257
+ }
193
258
  .kd-carousel-slidebar {
194
259
  position: absolute;
195
260
  }
@@ -69,6 +69,71 @@
69
69
  }
70
70
  }
71
71
  }
72
+
73
+ &-list {
74
+ list-style: none;
75
+ display: flex;
76
+ flex-direction: row;
77
+ flex: 1;
78
+ position: relative;
79
+
80
+ &-item {
81
+ position: relative;
82
+ flex-shrink: 0;
83
+ height: 100%;
84
+ width: 100%;
85
+ }
86
+
87
+ &-slide {
88
+ .@{carousel-prefix-cls}-list-item {
89
+ opacity: 1;
90
+ border-radius: @carousel-boder-radius;
91
+ &-animation {
92
+ transition: opacity 0.3s ease;
93
+ }
94
+ &-none-animation {
95
+ transition: none;
96
+ }
97
+ &-not-hidden {
98
+ opacity: 1;
99
+ }
100
+ &-hidden {
101
+ opacity: 0;
102
+ }
103
+ }
104
+ }
105
+
106
+ &-fade {
107
+ .@{carousel-prefix-cls}-list-item {
108
+ opacity: 1;
109
+ &-animation {
110
+ transition: opacity 0.3s ease;
111
+ }
112
+ &-none-animation {
113
+ transition: none;
114
+ }
115
+ &-not-hidden {
116
+ opacity: 1;
117
+ }
118
+ &-hidden {
119
+ opacity: 0;
120
+ }
121
+ }
122
+ }
123
+
124
+ &-display {
125
+ .@{carousel-prefix-cls}-list-item {
126
+ display: block;
127
+ &-not-hidden {
128
+ display: block;
129
+ }
130
+ &-hidden {
131
+ display: none;
132
+ }
133
+ }
134
+ }
135
+ }
136
+
72
137
  &-slidebar {
73
138
  position: absolute;
74
139
  &-left {
@@ -87,7 +152,7 @@
87
152
  .horizontal;
88
153
  top: @carousel-dots-margin-top;
89
154
  }
90
-
155
+
91
156
  &-dot > button {
92
157
  display: block;
93
158
  border-radius: @carousel-dots-boder-radius;
@@ -8,6 +8,7 @@ export interface PanelProps {
8
8
  expandIconPosition?: IconPositionType;
9
9
  onChange?: (key: keyType) => void;
10
10
  extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
11
+ assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
11
12
  expand?: boolean;
12
13
  defaultExpand?: boolean;
13
14
  children?: React.ReactNode;
@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
34
34
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
35
 
36
36
  var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
37
- var _classNames5, _classNames6, _classNames7;
37
+ var _classNames6, _classNames7, _classNames8;
38
38
 
39
39
  var _React$useContext = _react.default.useContext(_ConfigContext.default),
40
40
  getPrefixCls = _React$useContext.getPrefixCls,
@@ -44,6 +44,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
44
44
  var _getCompProps = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
45
45
  disabled = _getCompProps.disabled,
46
46
  extra = _getCompProps.extra,
47
+ assist = _getCompProps.assist,
47
48
  header = _getCompProps.header,
48
49
  onChange = _getCompProps.onChange,
49
50
  panelKey = _getCompProps.panelKey,
@@ -114,6 +115,17 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
114
115
  }, renderReactNode(extra)), expandIconPosition === 'right' ? renderIcon() : null);
115
116
  };
116
117
 
118
+ var renderMiddle = function renderMiddle() {
119
+ var _classNames5;
120
+
121
+ var className = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-middle"), true), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames5));
122
+ return /*#__PURE__*/_react.default.createElement("span", {
123
+ className: className
124
+ }, assist && /*#__PURE__*/_react.default.createElement("span", {
125
+ className: "".concat(panelPrefixCls, "-assist")
126
+ }, renderReactNode(assist)));
127
+ };
128
+
117
129
  var renderReactNode = function renderReactNode(reactNode) {
118
130
  if (typeof reactNode === 'function') {
119
131
  return reactNode();
@@ -122,9 +134,9 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
122
134
  return reactNode;
123
135
  };
124
136
 
125
- var rootClassName = (0, _classnames.default)(className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls), true), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-border"), bordered), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-opened"), expand), _classNames5));
126
- var topClassName = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top"), true), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames6));
127
- var childrenClassName = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children"), expand), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames7));
137
+ var rootClassName = (0, _classnames.default)(className, (_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls), true), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-border"), bordered), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-opened"), expand), _classNames6));
138
+ var topClassName = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-top"), true), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames7));
139
+ var childrenClassName = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(panelPrefixCls, "-children"), expand), (0, _defineProperty2.default)(_classNames8, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames8));
128
140
  var childrenBorderedClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
129
141
 
130
142
  var runExpandAnimation = function runExpandAnimation(element) {
@@ -175,7 +187,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
175
187
  ref: panelPrefixClsRef
176
188
  }, /*#__PURE__*/_react.default.createElement("span", {
177
189
  className: topClassName
178
- }, renderLeft(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
190
+ }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
179
191
  className: childrenClassName,
180
192
  ref: childrenRef
181
193
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -130,13 +130,22 @@
130
130
  display: -webkit-inline-box;
131
131
  display: -ms-inline-flexbox;
132
132
  display: inline-flex;
133
- padding: var(--kd-c-collapse-header-spacing-padding, 12px);
133
+ padding: var(--kd-c-collapse-header-spacing-padding, 8px 50px 8px 28px);
134
134
  background: var(--kd-c-collapse-header-color-background, rgba(0, 0, 0, 0));
135
135
  }
136
136
  .kd-collapse-panel-top-border {
137
137
  border-bottom: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
138
138
  }
139
139
  .kd-collapse-panel-left {
140
+ display: -webkit-inline-box;
141
+ display: -ms-inline-flexbox;
142
+ display: inline-flex;
143
+ -webkit-box-align: center;
144
+ -ms-flex-align: center;
145
+ align-items: center;
146
+ line-height: 1.5;
147
+ }
148
+ .kd-collapse-panel-middle {
140
149
  display: -webkit-inline-box;
141
150
  display: -ms-inline-flexbox;
142
151
  display: inline-flex;
@@ -144,16 +153,23 @@
144
153
  -ms-flex-align: center;
145
154
  align-items: center;
146
155
  -webkit-box-flex: 1;
147
- -ms-flex-positive: 1;
148
- flex-grow: 1;
156
+ -ms-flex: 1;
157
+ flex: 1;
158
+ margin-left: 22px;
159
+ color: var(--kd-c-collapse-header-color-text-secondary, var(--kd-g-color-text-secondary, #666));
160
+ white-space: nowrap;
161
+ overflow: hidden;
162
+ text-overflow: ellipsis;
149
163
  }
150
164
  .kd-collapse-panel-right {
165
+ margin-left: 40px;
151
166
  display: -webkit-inline-box;
152
167
  display: -ms-inline-flexbox;
153
168
  display: inline-flex;
154
169
  -webkit-box-align: center;
155
170
  -ms-flex-align: center;
156
171
  align-items: center;
172
+ white-space: nowrap;
157
173
  }
158
174
  .kd-collapse-panel-extra,
159
175
  .kd-collapse-panel-header {
@@ -164,7 +180,16 @@
164
180
  -ms-flex-align: center;
165
181
  align-items: center;
166
182
  color: var(--kd-c-collapse-header-color-text-primary, var(--kd-g-color-text-primary, #212121));
167
- font-size: var(--kd-c-collapse-header-font-size, var(--kd-g-font-size-middle, 14px));
183
+ font-size: var(--kd-c-collapse-header-font-size, 16px);
184
+ }
185
+ .kd-collapse-panel-header {
186
+ display: inline-block;
187
+ white-space: nowrap;
188
+ overflow: hidden;
189
+ text-overflow: ellipsis;
190
+ }
191
+ .kd-collapse-panel-header:hover {
192
+ color: var(--kd-c-collapse-header-color-text-hover, #666666);
168
193
  }
169
194
  .kd-collapse-panel-icon {
170
195
  -webkit-box-align: center;
@@ -174,6 +199,7 @@
174
199
  display: -ms-inline-flexbox;
175
200
  display: inline-flex;
176
201
  margin-right: var(--kd-c-collapse-spacing-margin-right, 6px);
202
+ font-size: var(--kd-c-collapse-icon-font-size, 16px);
177
203
  }
178
204
  .kd-collapse-panel-icon:hover,
179
205
  .kd-collapse-panel-left:hover {
@@ -198,7 +224,7 @@
198
224
  .kd-collapse-panel-children {
199
225
  overflow: hidden;
200
226
  opacity: 0;
201
- padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
227
+ padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
202
228
  color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
203
229
  font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
204
230
  -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
@@ -209,7 +235,7 @@
209
235
  overflow: hidden;
210
236
  opacity: 0;
211
237
  height: 0;
212
- padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
238
+ padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
213
239
  color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
214
240
  font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
215
241
  -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);
@@ -27,11 +27,23 @@
27
27
  &-left {
28
28
  display: inline-flex;
29
29
  align-items: center;
30
- flex-grow: 1;
30
+ line-height: 1.5;
31
+ }
32
+ &-middle {
33
+ display: inline-flex;
34
+ align-items: center;
35
+ flex: 1;
36
+ margin-left: 22px;
37
+ color: @collapse-header-font-color-secondary;
38
+ white-space: nowrap;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
31
41
  }
32
42
  &-right {
43
+ margin-left: 40px;
33
44
  display: inline-flex;
34
45
  align-items: center;
46
+ white-space: nowrap;
35
47
  }
36
48
  &-extra,
37
49
  &-header {
@@ -40,10 +52,21 @@
40
52
  color: @collapse-header-font-color;
41
53
  font-size: @collapse-header-font-size;
42
54
  }
55
+
56
+ &-header {
57
+ display: inline-block;
58
+ white-space: nowrap;
59
+ overflow: hidden;
60
+ text-overflow: ellipsis;
61
+ &:hover {
62
+ color: @collapse-header-color-text-hover;
63
+ }
64
+ }
43
65
  &-icon {
44
66
  align-items: center;
45
67
  display: inline-flex;
46
68
  margin-right: @collapse-icon-margin-right;
69
+ font-size: @collapse-icon-font-size;
47
70
  }
48
71
  &-icon:hover,
49
72
  &-left:hover {
@@ -2,25 +2,27 @@
2
2
 
3
3
  @collapse-prefix: '--@{kd-prefix}-c-collapse';
4
4
 
5
- // sizing
6
- @collapse-border-width: var(~'@{collapse-prefix}-border-width', 1px);
7
- @collapse-icon-margin-right: var(~'@{collapse-prefix}-spacing-margin-right', 6px);
8
- @collapse-header-padding: var(~'@{collapse-prefix}-header-spacing-padding', 12px);
9
- @collapse-content-bordered-padding: var(~'@{collapse-prefix}-content-bordered-spacing-padding', 12px);
10
- @collapse-content-padding: var(~'@{collapse-prefix}-content-spacing-padding', 0 16px);
11
-
12
5
  // color
13
6
  @collapse-border-color: var(~'@{collapse-prefix}-color-border-strong-2', @color-border-strong-2);
14
7
  @collapse-header-font-color: var(~'@{collapse-prefix}-header-color-text-primary', @color-text-primary);
8
+ @collapse-header-font-color-secondary: var(~'@{collapse-prefix}-header-color-text-secondary', @color-text-secondary);
15
9
  @collapse-content-font-color: var(~'@{collapse-prefix}-content-color-text-primary', @color-text-primary);
16
10
  @collapse-disabled-color: var(~'@{collapse-prefix}-color-disabled', raba(178, 178, 178, 1));
17
11
  @collapse-header-color-background: var(~'@{collapse-prefix}-header-color-background', rgba(0, 0, 0, 0));
18
12
  @collapse-content-color-background: var(~'@{collapse-prefix}-content-color-background', rgba(0, 0, 0, 0));
19
-
13
+ @collapse-header-color-text-hover: var(~'@{collapse-prefix}-header-color-text-hover', #666666);
20
14
 
21
15
  // font
22
- @collapse-header-font-size: var(~'@{collapse-prefix}-header-font-size', @font-size-middle);
16
+ @collapse-header-font-size: var(~'@{collapse-prefix}-header-font-size', 16px);
23
17
  @collapse-content-font-size: var(~'@{collapse-prefix}-content-font-size', @font-size-middle);
18
+ @collapse-icon-font-size: var(~'@{collapse-prefix}-icon-font-size', 16px);
24
19
 
25
20
  // motion
26
- @collapse-transition-duration: var(~'@{collapse-prefix}-motion-duration', @duration-promptly);
21
+ @collapse-transition-duration: var(~'@{collapse-prefix}-motion-duration', @duration-promptly);
22
+
23
+ // sizing
24
+ @collapse-border-width: var(~'@{collapse-prefix}-border-width', 1px);
25
+ @collapse-icon-margin-right: var(~'@{collapse-prefix}-spacing-margin-right', 6px);
26
+ @collapse-header-padding: var(~'@{collapse-prefix}-header-spacing-padding', 8px 50px 8px 28px);
27
+ @collapse-content-bordered-padding: var(~'@{collapse-prefix}-content-bordered-spacing-padding', 12px);
28
+ @collapse-content-padding: var(~'@{collapse-prefix}-content-spacing-padding', 0 50px);
@@ -20,6 +20,10 @@ declare const compDefaultProps: {
20
20
  size: string;
21
21
  bordered: boolean;
22
22
  };
23
+ ButtonGroup: {
24
+ buttonType: string;
25
+ type: string;
26
+ };
23
27
  Card: {
24
28
  hoverable: boolean;
25
29
  selectable: boolean;
@@ -40,6 +40,10 @@ var compDefaultProps = {
40
40
  size: 'middle',
41
41
  bordered: true
42
42
  },
43
+ ButtonGroup: {
44
+ buttonType: 'primary',
45
+ type: 'basic'
46
+ },
43
47
  Card: {
44
48
  hoverable: false,
45
49
  selectable: false
@@ -34,6 +34,7 @@ export interface IDrawerProps {
34
34
  titleStyle?: CSSProperties;
35
35
  visible?: boolean;
36
36
  width?: string | number;
37
+ height?: string | number;
37
38
  zIndex?: string | number;
38
39
  }
39
40
  declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<unknown>>;