@kdcloudjs/kdesign 1.7.45 → 1.7.47

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 (91) hide show
  1. package/CHANGELOG.md +292 -0
  2. package/dist/kdesign-complete.less +247 -0
  3. package/dist/kdesign.css +368 -1
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +865 -237
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +2 -2
  8. package/dist/kdesign.min.js +10 -10
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.js +1 -1
  11. package/es/breadcrumb/breadcrumb.d.ts +7 -0
  12. package/es/breadcrumb/breadcrumb.js +204 -0
  13. package/es/breadcrumb/breadcrumbItem.d.ts +4 -0
  14. package/es/breadcrumb/breadcrumbItem.js +53 -0
  15. package/es/breadcrumb/index.d.ts +3 -0
  16. package/es/breadcrumb/index.js +3 -0
  17. package/es/breadcrumb/interface.d.ts +33 -0
  18. package/es/breadcrumb/interface.js +2 -0
  19. package/es/breadcrumb/style/css.js +2 -0
  20. package/es/breadcrumb/style/index.css +174 -0
  21. package/es/breadcrumb/style/index.d.ts +2 -0
  22. package/es/breadcrumb/style/index.js +2 -0
  23. package/es/breadcrumb/style/index.less +71 -0
  24. package/es/breadcrumb/style/mixin.less +7 -0
  25. package/es/breadcrumb/style/token.less +27 -0
  26. package/es/city-picker/city-picker.js +3 -1
  27. package/es/config-provider/compDefaultProps.d.ts +11 -0
  28. package/es/config-provider/compDefaultProps.js +12 -1
  29. package/es/divider/divider.d.ts +22 -0
  30. package/es/divider/divider.js +66 -0
  31. package/es/divider/index.d.ts +3 -0
  32. package/es/divider/index.js +3 -0
  33. package/es/divider/style/css.js +2 -0
  34. package/es/divider/style/index.css +191 -0
  35. package/es/divider/style/index.d.ts +2 -0
  36. package/es/divider/style/index.js +2 -0
  37. package/es/divider/style/index.less +105 -0
  38. package/es/divider/style/mixin.less +19 -0
  39. package/es/divider/style/token.less +12 -0
  40. package/es/index.d.ts +2 -0
  41. package/es/index.js +3 -1
  42. package/es/select/select.js +81 -15
  43. package/es/tree/tree.d.ts +1 -0
  44. package/es/tree/tree.js +5 -4
  45. package/es/tree/treeHooks.d.ts +1 -1
  46. package/es/tree/treeHooks.js +3 -3
  47. package/es/tree/utils/treeUtils.d.ts +3 -3
  48. package/es/tree/utils/treeUtils.js +12 -4
  49. package/lib/_utils/usePopper.js +1 -1
  50. package/lib/breadcrumb/breadcrumb.d.ts +7 -0
  51. package/lib/breadcrumb/breadcrumb.js +217 -0
  52. package/lib/breadcrumb/breadcrumbItem.d.ts +4 -0
  53. package/lib/breadcrumb/breadcrumbItem.js +66 -0
  54. package/lib/breadcrumb/index.d.ts +3 -0
  55. package/lib/breadcrumb/index.js +27 -0
  56. package/lib/breadcrumb/interface.d.ts +33 -0
  57. package/lib/breadcrumb/interface.js +9 -0
  58. package/lib/breadcrumb/style/css.js +4 -0
  59. package/lib/breadcrumb/style/index.css +174 -0
  60. package/lib/breadcrumb/style/index.d.ts +2 -0
  61. package/lib/breadcrumb/style/index.js +4 -0
  62. package/lib/breadcrumb/style/index.less +71 -0
  63. package/lib/breadcrumb/style/mixin.less +7 -0
  64. package/lib/breadcrumb/style/token.less +27 -0
  65. package/lib/checkbox/group.js +0 -3
  66. package/lib/city-picker/city-picker.js +3 -1
  67. package/lib/config-provider/compDefaultProps.d.ts +11 -0
  68. package/lib/config-provider/compDefaultProps.js +12 -1
  69. package/lib/date-picker/utils/date-fns.js +1 -5
  70. package/lib/divider/divider.d.ts +22 -0
  71. package/lib/divider/divider.js +82 -0
  72. package/lib/divider/index.d.ts +3 -0
  73. package/lib/divider/index.js +27 -0
  74. package/lib/divider/style/css.js +4 -0
  75. package/lib/divider/style/index.css +191 -0
  76. package/lib/divider/style/index.d.ts +2 -0
  77. package/lib/divider/style/index.js +4 -0
  78. package/lib/divider/style/index.less +105 -0
  79. package/lib/divider/style/mixin.less +19 -0
  80. package/lib/divider/style/token.less +12 -0
  81. package/lib/index.d.ts +2 -0
  82. package/lib/index.js +14 -0
  83. package/lib/select/select.js +81 -15
  84. package/lib/style/components.less +2 -0
  85. package/lib/tree/tree.d.ts +1 -0
  86. package/lib/tree/tree.js +5 -4
  87. package/lib/tree/treeHooks.d.ts +1 -1
  88. package/lib/tree/treeHooks.js +3 -3
  89. package/lib/tree/utils/treeUtils.d.ts +3 -3
  90. package/lib/tree/utils/treeUtils.js +12 -4
  91. package/package.json +1 -1
@@ -15,6 +15,10 @@ var compDefaultProps = {
15
15
  banner: false,
16
16
  bannerOffset: [0, 0]
17
17
  },
18
+ Breadcrumb: {
19
+ colorModel: 'emphasize',
20
+ separator: '/'
21
+ },
18
22
  Button: {
19
23
  type: 'second',
20
24
  iconPlace: 'left',
@@ -119,6 +123,12 @@ var compDefaultProps = {
119
123
  minuteStep: 1,
120
124
  secondStep: 1
121
125
  },
126
+ Divider: {
127
+ orientation: 'left',
128
+ orientationMargin: '74px',
129
+ type: 'horizontal',
130
+ borderStyle: 'solid'
131
+ },
122
132
  Drawer: {
123
133
  closable: true,
124
134
  destroyOnClose: false,
@@ -351,7 +361,8 @@ var compDefaultProps = {
351
361
  });
352
362
  },
353
363
  estimatedItemSize: 32,
354
- expandOnClickNode: true
364
+ expandOnClickNode: true,
365
+ expandOnFilterNode: false
355
366
  },
356
367
  TreeNode: {},
357
368
  ToolTip: {
@@ -0,0 +1,22 @@
1
+ import React, { FunctionComponentElement } from 'react';
2
+ export declare const DividerTypes: ["horizontal", "vertical"];
3
+ export declare type DividerType = typeof DividerTypes[number];
4
+ export declare const DividerOrientations: ["left", "center", "right"];
5
+ export declare type DividerOrientation = typeof DividerOrientations[number];
6
+ export declare const DividerBorderStyles: ["solid", "dashed", "dotted"];
7
+ export declare type DividerBorderStyle = typeof DividerBorderStyles[number];
8
+ export interface IDividerProps {
9
+ style?: Record<string, unknown>;
10
+ className?: string;
11
+ prefixCls?: string;
12
+ children?: React.ReactNode;
13
+ borderStyle?: DividerBorderStyle;
14
+ type?: DividerType;
15
+ orientation?: DividerOrientation;
16
+ orientationMargin?: number | string;
17
+ }
18
+ declare const Divider: {
19
+ (props: IDividerProps): FunctionComponentElement<IDividerProps>;
20
+ displayName: string;
21
+ };
22
+ export default Divider;
@@ -0,0 +1,66 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
2
+ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
3
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
4
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
+ var __rest = this && this.__rest || function (s, e) {
6
+ var t = {};
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
8
+ if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
9
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ import React, { useContext, useEffect, useMemo } from 'react';
14
+ import classNames from 'classnames';
15
+ import ConfigContext from '../config-provider/ConfigContext';
16
+ import { getCompProps } from '../_utils';
17
+ import devWarning from '../_utils/devwarning';
18
+ import { tuple } from '../_utils/type';
19
+ export var DividerTypes = tuple('horizontal', 'vertical');
20
+ export var DividerOrientations = tuple('left', 'center', 'right');
21
+ export var DividerBorderStyles = tuple('solid', 'dashed', 'dotted');
22
+ var Divider = function Divider(props) {
23
+ var _context, _classNames;
24
+ var _useContext = useContext(ConfigContext),
25
+ getPrefixCls = _useContext.getPrefixCls,
26
+ prefixCls = _useContext.prefixCls,
27
+ userDefaultProps = _useContext.compDefaultProps;
28
+ var dividerProps = getCompProps('Divider', userDefaultProps, props);
29
+ var className = dividerProps.className,
30
+ customPrefixcls = dividerProps.prefixCls,
31
+ children = dividerProps.children,
32
+ type = dividerProps.type,
33
+ orientationMargin = dividerProps.orientationMargin,
34
+ orientation = dividerProps.orientation,
35
+ borderStyle = dividerProps.borderStyle,
36
+ others = __rest(dividerProps, ["className", "prefixCls", "children", "type", "orientationMargin", "orientation", "borderStyle"]);
37
+ var dividerPrefixCls = getPrefixCls(prefixCls, 'divider', customPrefixcls);
38
+ var orientationPrefix = orientation.length > 0 ? "-".concat(orientation) : orientation;
39
+ var hasChildren = !!children;
40
+ var isHorizontal = type === 'horizontal';
41
+ var isVertical = type === 'vertical';
42
+ var optimizedOrientationMargin = useMemo(function () {
43
+ if (/^[0-9]+$/.test(orientationMargin)) {
44
+ return orientationMargin + 'px';
45
+ }
46
+ return '';
47
+ }, [orientationMargin]);
48
+ var dividerClass = classNames(dividerPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(dividerPrefixCls, "-with-text"), hasChildren && isHorizontal), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(dividerPrefixCls, "-with-text")).call(_context, orientationPrefix), hasChildren && isHorizontal), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-solid"), borderStyle === 'solid'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-dashed"), borderStyle === 'dashed'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-dotted"), borderStyle === 'dotted'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-vertical"), isVertical), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-margin-left"), isHorizontal && orientation === 'left' && optimizedOrientationMargin), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-margin-right"), isHorizontal && orientation === 'right' && optimizedOrientationMargin), _classNames));
49
+ var innerTextClass = classNames("".concat(dividerPrefixCls, "-inner-text"));
50
+ var innerTextStyle = _extends(_extends({}, orientation === 'left' && {
51
+ marginLeft: optimizedOrientationMargin
52
+ }), orientation === 'right' && {
53
+ marginRight: optimizedOrientationMargin
54
+ });
55
+ useEffect(function () {
56
+ devWarning(isVertical && children, 'divider', '`children` not working in `vertical` mode.');
57
+ }, [children, isVertical]);
58
+ return /*#__PURE__*/React.createElement("div", _extends({
59
+ className: dividerClass
60
+ }, others), isHorizontal && hasChildren && /*#__PURE__*/React.createElement("div", {
61
+ className: innerTextClass,
62
+ style: innerTextStyle
63
+ }, children));
64
+ };
65
+ Divider.displayName = 'Divider';
66
+ export default Divider;
@@ -0,0 +1,3 @@
1
+ import Divider from './divider';
2
+ export * from './divider';
3
+ export default Divider;
@@ -0,0 +1,3 @@
1
+ import Divider from './divider';
2
+ export * from './divider';
3
+ export default Divider;
@@ -0,0 +1,2 @@
1
+ import '../../style/index.css';
2
+ import './index.css';
@@ -0,0 +1,191 @@
1
+ /* ----------- color ——————---- start */
2
+ /* ----------- color ——————---- end */
3
+ /* ----------- motion ——————---- start */
4
+ /* ----------- motion ——————---- end */
5
+ /* ----------- transition ——————---- start */
6
+ /* ----------- transition ——————---- end */
7
+ /* ----------- font ——————---- start */
8
+ /* ----------- font ——————---- end */
9
+ /* ----------- zIndex ——————---- start */
10
+ /*
11
+ 普通组件内部自身层级应设置在0-100间
12
+ */
13
+ /* ----------- zIndex ——————---- end */
14
+ /* ----------- Button ——————---- start */
15
+ /* ----------- Button ——————---- end */
16
+ /* ----------- Collapse ——————---- start */
17
+ /* ----------- Collapse ——————---- end */
18
+ /* ----------- Card ——————---- start */
19
+ /* ----------- Card ——————---- end */
20
+ /* ----------- Carousel ——————---- start */
21
+ /* ----------- Carousel ——————---- end */
22
+ /* ----------- Cascader ——————---- start */
23
+ /* ----------- Cascader ——————---- end */
24
+ /* ----------- Switch ——————---- start */
25
+ /* ----------- Switch ——————---- end */
26
+ /* ----------- Input ——————---- start */
27
+ /* ----------- Input ——————---- end */
28
+ /* ----------- InputNumber ——————---- start */
29
+ /* ----------- InputNumber ——————---- end */
30
+ /* ----------- checkbox ——————---- start */
31
+ /* ----------- checkbox ——————---- start */
32
+ /* ----------- checkbox ——————---- end */
33
+ /* ----------- Radio ——————---- start */
34
+ /* ----------- Radio ——————---- end */
35
+ /* ----------- icon ——————---- start */
36
+ /* ----------- icon ——————---- end */
37
+ /* ----------- Popconfirm ——————---- start */
38
+ /* ----------- Popconfirm ——————---- end */
39
+ /* ----------- Progress ——————---- start */
40
+ /* ----------- Progress ——————---- end */
41
+ /* ----------- Pagination ——————---- start */
42
+ /* ----------- Pagination ——————---- end */
43
+ /* ----------- Timeline ——————---- start */
44
+ /* ----------- Timeline ——————---- end */
45
+ /* ----------- Tabs ——————---- start */
46
+ /* ----------- Tabs ——————---- end */
47
+ /* ----------- Select ——————---- start */
48
+ /* ----------- Select ——————---- end */
49
+ /* ----------- Rate ——————---- start */
50
+ /* ----------- Rate ——————---- end */
51
+ /* ----------- Dropdown ——————---- start */
52
+ /* ----------- Dropdown ——————---- end */
53
+ /* ----------- Tooltip ——————---- start */
54
+ /* ----------- Tooltip ——————---- end */
55
+ /* ----------- Transfer ——————---- start */
56
+ /* ----------- Transfer ——————---- end */
57
+ /* ----------- DatePicker ——————---- start */
58
+ /* ----------- DatePicker ——————---- end */
59
+ /* ----------- ColorPicker ——————---- start */
60
+ /* ----------- ColorPicker ——————---- end */
61
+ /* ----------- Tree ——————---- start */
62
+ /* ----------- Tree ——————---- end */
63
+ /* ----------- Alert ——————---- start */
64
+ /* ----------- Alert ——————---- end */
65
+ /* ----------- Split-Panel ——————---- start */
66
+ /* ----------- Split-Panel ——————---- end */
67
+ /* ----------- Modal ——————---- start */
68
+ /* ----------- Modal ——————---- end */
69
+ /* ----------- Steps ——————---- start */
70
+ /* ----------- Steps ——————---- end */
71
+ /* ----------- Form ——————---- start */
72
+ /* ----------- Form ——————---- end */
73
+ /* ----------- Tag ——————---- start */
74
+ /* ----------- Tag ——————---- end */
75
+ /* ----------- Menu ——————---- start */
76
+ /* ----------- Menu ——————---- end */
77
+ /* ----------- notice ——————---- start */
78
+ /* ----------- message ——————---- end */
79
+ /* ----------- Spin ——————---- start */
80
+ /* ----------- Spin ——————---- end */
81
+ /* ----------- Spin ——————---- start */
82
+ /* ----------- Spin ——————---- end */
83
+ /* ----------- Layout ——————---- start */
84
+ /* ----------- Layout ——————---- end */
85
+ /* ----------- Typography ——————---- start */
86
+ /* ----------- Typography ——————---- start */
87
+ /* ----------- Search ——————---- start */
88
+ /* ----------- Search ——————---- start */
89
+ /* ----------- Badge ——————---- start */
90
+ /* ----------- Badge ——————---- end */
91
+ /* ----------- Anchor ——————---- start */
92
+ /* ----------- Anchor ——————---- end */
93
+ /* ----------- Avatar ——————---- start */
94
+ /* ----------- Avatar ——————---- end */
95
+ /* ----------- AdvancedSelector ——————---- start */
96
+ /* ----------- AdvancedSelector ——————---- end */
97
+ /* ----------- motion ——————---- start */
98
+ /* ----------- motion ——————---- end */
99
+ /* ----------- transition ——————---- start */
100
+ /* ----------- transition ——————---- end */
101
+ /* ----------- zIndex ——————---- start */
102
+ /*
103
+ 普通组件内部自身层级应设置在0-100间
104
+ */
105
+ /* ----------- zIndex ——————---- end */
106
+ .kd-divider {
107
+ color: var(--kd-c-divider-color-text, var(--kd-g-color-text-primary, #212121));
108
+ font-size: var(--kd-c-divider-font-size, var(--kd-g-font-size-small, 12px));
109
+ width: 900px;
110
+ padding: var(--kd-c-divider-spacing-padding-horizontal, 0px);
111
+ -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
112
+ border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
113
+ }
114
+ .kd-divider-vertical {
115
+ display: inline-block;
116
+ -webkit-border-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
117
+ border-inline-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
118
+ width: 0;
119
+ height: 1em;
120
+ }
121
+ .kd-divider-solid {
122
+ border-block-start-style: solid;
123
+ border-inline-start-style: solid;
124
+ }
125
+ .kd-divider-solid .kd-divider-inner-text::before,
126
+ .kd-divider-solid .kd-divider-inner-text::after {
127
+ border-block-start-style: solid !important;
128
+ }
129
+ .kd-divider-dashed {
130
+ border-block-start-style: dashed;
131
+ border-inline-start-style: dashed;
132
+ }
133
+ .kd-divider-dashed .kd-divider-inner-text::before,
134
+ .kd-divider-dashed .kd-divider-inner-text::after {
135
+ border-block-start-style: dashed !important;
136
+ }
137
+ .kd-divider-dotted {
138
+ border-block-start-style: dotted;
139
+ border-inline-start-style: dotted;
140
+ }
141
+ .kd-divider-dotted .kd-divider-inner-text::before,
142
+ .kd-divider-dotted .kd-divider-inner-text::after {
143
+ border-block-start-style: dotted !important;
144
+ }
145
+ .kd-divider-with-text {
146
+ border: unset;
147
+ }
148
+ .kd-divider-with-text .kd-divider-inner-text {
149
+ display: -webkit-box;
150
+ display: -ms-flexbox;
151
+ display: flex;
152
+ -webkit-box-align: center;
153
+ -ms-flex-align: center;
154
+ align-items: center;
155
+ }
156
+ .kd-divider-with-text .kd-divider-inner-text::before {
157
+ content: '';
158
+ width: 74px;
159
+ margin-right: 8px;
160
+ -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
161
+ border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
162
+ }
163
+ .kd-divider-with-text .kd-divider-inner-text::after {
164
+ content: '';
165
+ width: calc(100% - 74px);
166
+ margin-left: 8px;
167
+ -webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
168
+ border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
169
+ }
170
+ .kd-divider-with-text-center .kd-divider-inner-text::before,
171
+ .kd-divider-with-text-center .kd-divider-inner-text::after {
172
+ width: 50%;
173
+ }
174
+ .kd-divider-with-text-right .kd-divider-inner-text::before {
175
+ width: calc(100% - 74px);
176
+ }
177
+ .kd-divider-with-text-right .kd-divider-inner-text::after {
178
+ width: 74px;
179
+ }
180
+ .kd-divider-margin-left .kd-divider-inner-text::before {
181
+ width: 0;
182
+ }
183
+ .kd-divider-margin-left .kd-divider-inner-text::after {
184
+ width: 100%;
185
+ }
186
+ .kd-divider-margin-right .kd-divider-inner-text::before {
187
+ width: 100%;
188
+ }
189
+ .kd-divider-margin-right .kd-divider-inner-text::after {
190
+ width: 0;
191
+ }
@@ -0,0 +1,2 @@
1
+ import '../../style/index.less';
2
+ import './index.less';
@@ -0,0 +1,2 @@
1
+ import '../../style/index.less';
2
+ import './index.less';
@@ -0,0 +1,105 @@
1
+ @import '../../style/themes/index';
2
+ @import './mixin.less';
3
+ @divider-prefix-cls: ~'@{kd-prefix}-divider';
4
+
5
+ .@{divider-prefix-cls} {
6
+ .divider;
7
+
8
+ width: 900px;
9
+ padding: @divider-spacing-padding-horizontal;
10
+ border-block-start: 1px solid @color-border-strong;
11
+
12
+ &-vertical {
13
+ display: inline-block;
14
+ border-inline-start: 1px solid @color-border-strong;
15
+ width: 0;
16
+ height: 1em;
17
+ }
18
+
19
+ &-solid {
20
+ .borderStyle(solid)
21
+ }
22
+
23
+ &-dashed {
24
+ .borderStyle(dashed)
25
+ }
26
+
27
+ &-dotted {
28
+ .borderStyle(dotted)
29
+ }
30
+
31
+ &-with-text {
32
+ border: unset;
33
+
34
+ .@{divider-prefix-cls}-inner-text {
35
+ display: flex;
36
+ align-items: center;
37
+
38
+ &::before {
39
+ content: '';
40
+ width: 74px;
41
+ margin-right: 8px;
42
+ border-block-start: 1px solid @color-border-strong;
43
+ }
44
+
45
+ &::after {
46
+ content: '';
47
+ width: calc(100% - 74px);
48
+ margin-left: 8px;
49
+ border-block-start: 1px solid @color-border-strong;
50
+ }
51
+ }
52
+ }
53
+
54
+ &-with-text-center {
55
+ .@{divider-prefix-cls}-inner-text {
56
+
57
+ &::before,
58
+ &::after {
59
+ width: 50%;
60
+ }
61
+ }
62
+ }
63
+
64
+ &-with-text-right {
65
+ .@{divider-prefix-cls}-inner-text {
66
+
67
+ &::before {
68
+ width: calc(100% - 74px);
69
+
70
+ }
71
+
72
+ &::after {
73
+ width: 74px;
74
+ }
75
+ }
76
+ }
77
+
78
+ &-margin-left {
79
+ .@{divider-prefix-cls}-inner-text {
80
+
81
+ &::before {
82
+ width: 0;
83
+
84
+ }
85
+
86
+ &::after {
87
+ width: 100%;
88
+ }
89
+ }
90
+ }
91
+
92
+ &-margin-right {
93
+ .@{divider-prefix-cls}-inner-text {
94
+
95
+ &::before {
96
+ width: 100%;
97
+
98
+ }
99
+
100
+ &::after {
101
+ width: 0;
102
+ }
103
+ }
104
+ }
105
+ }
@@ -0,0 +1,19 @@
1
+ @import './token.less';
2
+
3
+ .divider() {
4
+ color: @divider-color-text;
5
+ font-size: @divider-font-size;
6
+ }
7
+
8
+ .borderStyle(@border-style) {
9
+ border-block-start-style: @border-style;
10
+ border-inline-start-style: @border-style;
11
+
12
+ .@{divider-prefix-cls}-inner-text {
13
+
14
+ &::before,
15
+ &::after {
16
+ border-block-start-style: @border-style !important
17
+ }
18
+ }
19
+ }
@@ -0,0 +1,12 @@
1
+ @import '../../style/themes/token.less';
2
+
3
+ @divider-custom-prefix: ~'--@{kd-prefix}-c-divider';
4
+
5
+ // color
6
+ @divider-color-text: var(~'@{divider-custom-prefix}-color-text', @color-text-primary);
7
+
8
+ // font
9
+ @divider-font-size: var(~'@{divider-custom-prefix}-font-size', @font-size-small);
10
+
11
+ // spacing
12
+ @divider-spacing-padding-horizontal: var(~'@{divider-custom-prefix}-spacing-padding-horizontal', 0px);
package/es/index.d.ts CHANGED
@@ -57,3 +57,5 @@ export { default as TreeSelect } from './tree-select';
57
57
  export { default as ColorPicker } from './color-picker';
58
58
  export { default as Clipboard } from './clipboard';
59
59
  export { default as QRCode } from './qr-code';
60
+ export { default as Divider } from './divider';
61
+ export { default as Breadcrumb } from './breadcrumb';
package/es/index.js CHANGED
@@ -56,4 +56,6 @@ export { default as Link } from './link';
56
56
  export { default as TreeSelect } from './tree-select';
57
57
  export { default as ColorPicker } from './color-picker';
58
58
  export { default as Clipboard } from './clipboard';
59
- export { default as QRCode } from './qr-code';
59
+ export { default as QRCode } from './qr-code';
60
+ export { default as Divider } from './divider';
61
+ export { default as Breadcrumb } from './breadcrumb';
@@ -1,12 +1,20 @@
1
+ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
2
+ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
3
+ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
4
+ import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
1
5
  import _extends from "@babel/runtime-corejs3/helpers/extends";
2
6
  import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
3
7
  import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
4
8
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
9
+ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
10
+ function _unsupportedIterableToArray(o, minLen) { var _context6; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context6 = Object.prototype.toString.call(o)).call(_context6, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
12
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
6
13
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
7
14
  import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
8
15
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
9
16
  import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
17
+ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
10
18
  import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
11
19
  import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useImperativeHandle } from 'react';
12
20
  import { useMergedState } from '../_utils/hooks';
@@ -327,7 +335,7 @@ var InternalSelect = function InternalSelect(props, ref) {
327
335
  onDeselect && onDeselect(key); // 下拉项取消选中时调用,参数为选中项的value,多选模式下生效
328
336
  }
329
337
  } else {
330
- props.visible === undefined && setOptionShow(false);
338
+ handleVisibleChange(false);
331
339
  initValue !== key && onChange && onChange(labelInValue ? {
332
340
  value: key,
333
341
  label: label
@@ -343,7 +351,7 @@ var InternalSelect = function InternalSelect(props, ref) {
343
351
  setSingleVal(getOptionLabel(obj) || key);
344
352
  multipleRef.current.selectedVal = key;
345
353
  setInitValue(key);
346
- props.visible === undefined && setOptionShow(false);
354
+ handleVisibleChange(false);
347
355
  initValue !== key && onChange && onChange(labelInValue ? {
348
356
  value: key,
349
357
  label: label
@@ -376,14 +384,39 @@ var InternalSelect = function InternalSelect(props, ref) {
376
384
  setSearchValue('');
377
385
  onSelect && onSelect(key); // 下拉项被选中时调用,参数为选中项value或key
378
386
  };
387
+
388
+ var removeIntersection = function removeIntersection(selectedItems, filteredItems) {
389
+ var filteredValues = new _Set(_mapInstanceProperty(filteredItems).call(filteredItems, function (item) {
390
+ var _a;
391
+ return item.value || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value);
392
+ }));
393
+ var filteredSelectedItems = [];
394
+ var filteredSelectedValues = [];
395
+ var _iterator = _createForOfIteratorHelper(selectedItems),
396
+ _step;
397
+ try {
398
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
399
+ var item = _step.value;
400
+ if (!filteredValues.has(item.value)) {
401
+ filteredSelectedItems.push(item);
402
+ filteredSelectedValues.push(item.value);
403
+ }
404
+ }
405
+ } catch (err) {
406
+ _iterator.e(err);
407
+ } finally {
408
+ _iterator.f();
409
+ }
410
+ return [filteredSelectedValues, filteredSelectedItems];
411
+ };
379
412
  // 多选模式下选中所有 与清除所有 (可以优化)
380
- var handleSelectAll = function handleSelectAll() {
413
+ var handleSelectAll = function handleSelectAll(checked) {
381
414
  var _multipleRef$current3 = multipleRef.current,
382
415
  selectedVal = _multipleRef$current3.selectedVal,
383
416
  selectMulOpts = _multipleRef$current3.selectMulOpts;
384
417
  var newSelectedVal = _toConsumableArray(selectedVal);
385
418
  var newSelectMulOpts = _toConsumableArray(selectMulOpts);
386
- if ((filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) !== newSelectedVal.length) {
419
+ if (!checked) {
387
420
  _mapInstanceProperty(filledOptions).call(filledOptions, function (child) {
388
421
  var _ref = child.props || child,
389
422
  value = _ref.value;
@@ -402,23 +435,26 @@ var InternalSelect = function InternalSelect(props, ref) {
402
435
  setSearchValue('');
403
436
  }
404
437
  } else {
405
- newSelectedVal = [];
406
- newSelectMulOpts = [];
438
+ ;
439
+ var _removeIntersection = removeIntersection(newSelectMulOpts, filledOptions);
440
+ var _removeIntersection2 = _slicedToArray(_removeIntersection, 2);
441
+ newSelectedVal = _removeIntersection2[0];
442
+ newSelectMulOpts = _removeIntersection2[1];
407
443
  if (typeof value === 'undefined') {
408
- multipleRef.current.selectedVal = [];
409
- multipleRef.current.selectMulOpts = [];
410
- setMulOptions([]);
444
+ multipleRef.current.selectedVal = newSelectedVal;
445
+ multipleRef.current.selectMulOpts = newSelectMulOpts;
446
+ setMulOptions(_toConsumableArray(newSelectMulOpts));
411
447
  }
412
448
  }
413
449
  onChange && onChange(labelInValue ? newSelectMulOpts : newSelectedVal, newSelectMulOpts);
414
450
  };
415
451
  // 输入框变化搜索内容
416
- var handleSearchChange = useCallback(function (event) {
452
+ var handleSearchChange = function handleSearchChange(event) {
417
453
  var val = event.currentTarget.value;
418
- setOptionShow(true);
454
+ handleVisibleChange(true);
419
455
  setSearchValue(val);
420
456
  onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
421
- }, [onSearch]);
457
+ };
422
458
  // 清除搜索内容
423
459
  var handleClear = useCallback(function () {
424
460
  if (searchRef.current) {
@@ -528,6 +564,33 @@ var InternalSelect = function InternalSelect(props, ref) {
528
564
  }
529
565
  }, [isShowSearch, autoFocus, disabled]);
530
566
  var optionsListRef = React.useRef(null);
567
+ var getCheckedState = function getCheckedState(selectedItems, filteredItems) {
568
+ var _a;
569
+ var valuesSet = new _Set(_mapInstanceProperty(selectedItems).call(selectedItems, function (item) {
570
+ return item.value;
571
+ }));
572
+ var number = 0;
573
+ var _iterator2 = _createForOfIteratorHelper(filteredItems),
574
+ _step2;
575
+ try {
576
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
577
+ var item = _step2.value;
578
+ if (valuesSet.has(item.value || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value))) {
579
+ number += 1;
580
+ }
581
+ }
582
+ } catch (err) {
583
+ _iterator2.e(err);
584
+ } finally {
585
+ _iterator2.f();
586
+ }
587
+ var checked = number > 0 && number === filteredItems.length;
588
+ var indeterminate = number > 0 && number < filteredItems.length;
589
+ return {
590
+ checked: checked,
591
+ indeterminate: indeterminate
592
+ };
593
+ };
531
594
  // 渲染下拉列表框
532
595
  var renderContent = function renderContent() {
533
596
  var dropdownRender = selectProps.dropdownRender,
@@ -567,8 +630,9 @@ var InternalSelect = function InternalSelect(props, ref) {
567
630
  height: '30px',
568
631
  background: 'none'
569
632
  };
570
- var indeterminate = mulOptions.length > 0 && mulOptions.length < filledOptions.length;
571
- var checked = mulOptions.length > 0 && mulOptions.length === filledOptions.length;
633
+ var _getCheckedState = getCheckedState(mulOptions, filledOptions),
634
+ checked = _getCheckedState.checked,
635
+ indeterminate = _getCheckedState.indeterminate;
572
636
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
573
637
  className: dropDownCls,
574
638
  style: dropdownStyle,
@@ -579,7 +643,9 @@ var InternalSelect = function InternalSelect(props, ref) {
579
643
  style: checkboxStyle,
580
644
  checked: checked,
581
645
  indeterminate: indeterminate,
582
- onChange: handleSelectAll
646
+ onChange: function onChange() {
647
+ return handleSelectAll(checked);
648
+ }
583
649
  }, selectLangMsg === null || selectLangMsg === void 0 ? void 0 : selectLangMsg.selectAll), /*#__PURE__*/React.createElement("span", {
584
650
  className: "".concat(selectPrefixCls, "-multiple-footer-hadSelected")
585
651
  }, locale.getLangMsg('Select', 'seleted', {