@kdcloudjs/kdesign 1.7.34 → 1.7.37

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 (109) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/kdesign-complete.less +244 -77
  3. package/dist/kdesign.css +263 -42
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +614 -168
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +5 -5
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/city-picker/city-picker.js +1 -1
  11. package/es/clipboard/clipboard.d.ts +21 -0
  12. package/es/clipboard/clipboard.js +106 -0
  13. package/es/clipboard/index.d.ts +4 -0
  14. package/es/clipboard/index.js +3 -0
  15. package/es/clipboard/style/css.js +2 -0
  16. package/es/clipboard/style/index.css +190 -0
  17. package/es/clipboard/style/index.d.ts +2 -0
  18. package/es/clipboard/style/index.js +2 -0
  19. package/es/clipboard/style/index.less +32 -0
  20. package/es/clipboard/style/mixin.less +39 -0
  21. package/es/clipboard/style/token.less +52 -0
  22. package/es/clipboard/util.d.ts +13 -0
  23. package/es/clipboard/util.js +197 -0
  24. package/es/color-picker/color-picker-panel.js +15 -6
  25. package/es/color-picker/color-picker.js +17 -3
  26. package/es/color-picker/interface.d.ts +5 -0
  27. package/es/color-picker/style/index.css +30 -13
  28. package/es/color-picker/style/index.less +49 -43
  29. package/es/config-provider/compDefaultProps.d.ts +5 -0
  30. package/es/config-provider/compDefaultProps.js +5 -0
  31. package/es/index.d.ts +1 -0
  32. package/es/index.js +2 -1
  33. package/es/locale/locale.d.ts +2 -0
  34. package/es/locale/zh-CN.d.ts +2 -0
  35. package/es/locale/zh-CN.js +3 -1
  36. package/es/message/content.js +1 -4
  37. package/es/select/interface.d.ts +1 -0
  38. package/es/select/select.js +15 -12
  39. package/es/select/style/index.css +12 -9
  40. package/es/select/style/index.less +22 -12
  41. package/es/select/style/token.less +1 -0
  42. package/es/tree/style/index.css +22 -15
  43. package/es/tree/style/index.less +33 -18
  44. package/es/tree/tree.d.ts +1 -0
  45. package/es/tree/tree.js +29 -13
  46. package/es/tree/treeHooks.d.ts +2 -2
  47. package/es/tree/treeHooks.js +11 -6
  48. package/es/tree/treeNode.d.ts +2 -3
  49. package/es/tree/treeNode.js +6 -5
  50. package/es/tree/utils/treeUtils.d.ts +2 -2
  51. package/es/tree/utils/treeUtils.js +5 -6
  52. package/es/tree-select/interface.d.ts +1 -0
  53. package/es/tree-select/style/index.css +7 -4
  54. package/es/tree-select/style/index.less +12 -4
  55. package/es/tree-select/style/token.less +1 -0
  56. package/es/tree-select/tree-select.js +6 -2
  57. package/lib/city-picker/city-picker.js +1 -1
  58. package/lib/clipboard/clipboard.d.ts +21 -0
  59. package/lib/clipboard/clipboard.js +121 -0
  60. package/lib/clipboard/index.d.ts +4 -0
  61. package/lib/clipboard/index.js +11 -0
  62. package/lib/clipboard/style/css.js +4 -0
  63. package/lib/clipboard/style/index.css +190 -0
  64. package/lib/clipboard/style/index.d.ts +2 -0
  65. package/lib/clipboard/style/index.js +4 -0
  66. package/lib/clipboard/style/index.less +32 -0
  67. package/lib/clipboard/style/mixin.less +39 -0
  68. package/lib/clipboard/style/token.less +52 -0
  69. package/lib/clipboard/util.d.ts +13 -0
  70. package/lib/clipboard/util.js +204 -0
  71. package/lib/color-picker/color-picker-panel.js +16 -7
  72. package/lib/color-picker/color-picker.js +17 -3
  73. package/lib/color-picker/interface.d.ts +5 -0
  74. package/lib/color-picker/style/index.css +30 -13
  75. package/lib/color-picker/style/index.less +49 -43
  76. package/lib/config-provider/compDefaultProps.d.ts +5 -0
  77. package/lib/config-provider/compDefaultProps.js +5 -0
  78. package/lib/index.d.ts +1 -0
  79. package/lib/index.js +7 -0
  80. package/lib/locale/locale.d.ts +2 -0
  81. package/lib/locale/zh-CN.d.ts +2 -0
  82. package/lib/locale/zh-CN.js +3 -1
  83. package/lib/message/content.js +1 -4
  84. package/lib/select/interface.d.ts +1 -0
  85. package/lib/select/select.js +15 -12
  86. package/lib/select/style/index.css +12 -9
  87. package/lib/select/style/index.less +22 -12
  88. package/lib/select/style/token.less +1 -0
  89. package/lib/style/components.less +1 -0
  90. package/lib/tree/style/index.css +22 -15
  91. package/lib/tree/style/index.less +33 -18
  92. package/lib/tree/tree.d.ts +1 -0
  93. package/lib/tree/tree.js +28 -12
  94. package/lib/tree/treeHooks.d.ts +2 -2
  95. package/lib/tree/treeHooks.js +10 -5
  96. package/lib/tree/treeNode.d.ts +2 -3
  97. package/lib/tree/treeNode.js +6 -5
  98. package/lib/tree/utils/treeUtils.d.ts +2 -2
  99. package/lib/tree/utils/treeUtils.js +5 -6
  100. package/lib/tree-select/interface.d.ts +1 -0
  101. package/lib/tree-select/style/index.css +7 -4
  102. package/lib/tree-select/style/index.less +12 -4
  103. package/lib/tree-select/style/token.less +1 -0
  104. package/lib/tree-select/tree-select.js +6 -2
  105. package/package.json +1 -1
  106. package/es/color-picker/utils/hooks/useOnClickOutside.d.ts +0 -2
  107. package/es/color-picker/utils/hooks/useOnClickOutside.js +0 -16
  108. package/lib/color-picker/utils/hooks/useOnClickOutside.d.ts +0 -2
  109. package/lib/color-picker/utils/hooks/useOnClickOutside.js +0 -23
@@ -0,0 +1,197 @@
1
+ /**
2
+ * 获取元素的内容
3
+ * @param {HTMLElement} element
4
+ * @return {string}
5
+ */
6
+ var getContent = function getContent(element) {
7
+ var content;
8
+ if (element.nodeName === 'SELECT') {
9
+ content = element.value;
10
+ } else if (element.nodeName === 'INPUT') {
11
+ content = element.value;
12
+ } else if (element.nodeName === 'TEXTAREA') {
13
+ content = element.value;
14
+ } else {
15
+ // 其他类型通过 select 与 range 来获取文本
16
+ // 获取 select
17
+ var selection = window.getSelection();
18
+ // 创建 range
19
+ var range = document.createRange();
20
+ // 设置 range 的元素
21
+ range.selectNodeContents(element);
22
+ // 重置 select
23
+ selection.removeAllRanges();
24
+ // 设置 select 的 range
25
+ selection.addRange(range);
26
+ // 获取选中的文本
27
+ content = selection.toString();
28
+ // 获取到文本后清空选中范围
29
+ selection.removeAllRanges();
30
+ }
31
+ return content;
32
+ };
33
+ /**
34
+ * 清空元素的内容
35
+ * @param {HTMLElement} element
36
+ */
37
+ var clearElement = function clearElement(element) {
38
+ if (element.nodeName === 'SELECT') {
39
+ ;
40
+ element.value = '';
41
+ } else if (element.nodeName === 'INPUT') {
42
+ ;
43
+ element.value = '';
44
+ } else if (element.nodeName === 'TEXTAREA') {
45
+ ;
46
+ element.value = '';
47
+ } else {
48
+ element.innerHTML = '';
49
+ }
50
+ };
51
+ /**
52
+ * 由将被复制的文本为 value 创建一个 HTMLTextAreaElement 容器
53
+ * @param {String} value
54
+ * @return {HTMLTextAreaElement}
55
+ */
56
+ var createContainer = function createContainer(value) {
57
+ var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
58
+ var container = document.createElement('textarea');
59
+ // 防止在 ios 上缩放
60
+ container.style.fontSize = '12pt';
61
+ // 重置样式
62
+ container.style.border = '0';
63
+ container.style.padding = '0';
64
+ container.style.margin = '0';
65
+ // 把元素定位在视窗外
66
+ container.style.position = 'absolute';
67
+ container.style[isRTL ? 'right' : 'left'] = '-9999px';
68
+ var yPosition = window.pageYOffset || document.documentElement.scrollTop;
69
+ container.style.top = "".concat(yPosition, "px");
70
+ // 设置为只读
71
+ container.setAttribute('readonly', '');
72
+ // 将文本赋值给元素
73
+ container.value = value;
74
+ document.body.appendChild(container);
75
+ return container;
76
+ };
77
+ /**
78
+ * 删除元素
79
+ * @param {HTMLElement} container
80
+ */
81
+ var removeContainer = function removeContainer(container) {
82
+ document.body.removeChild(container);
83
+ };
84
+ /**
85
+ * 添加选中状态
86
+ * @param {HTMLElement} element
87
+ */
88
+ var addSelection = function addSelection(element) {
89
+ // 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 <textarea> 及 <input> 元素不起作用
90
+ // 使用 select 对 <textarea> 及 <input> 单独处理
91
+ if (element.nodeName === 'INPUT') {
92
+ ;
93
+ element.select();
94
+ } else if (element.nodeName === 'TEXTAREA') {
95
+ ;
96
+ element.select();
97
+ } else {
98
+ var selection = window.getSelection();
99
+ var range = document.createRange();
100
+ range.selectNodeContents(element);
101
+ selection.removeAllRanges();
102
+ selection.addRange(range);
103
+ }
104
+ };
105
+ /**
106
+ * 移除选中状态
107
+ * @param {HTMLElement} element
108
+ */
109
+ var removeSelection = function removeSelection(element) {
110
+ var _a;
111
+ // 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 <textarea> 及 <input> 元素不起作用
112
+ // 使用 setSelectRange 对 <textarea> 及 <input> 单独处理
113
+ if (element.nodeName === 'INPUT') {
114
+ ;
115
+ element.setSelectionRange(0, 0);
116
+ } else if (element.nodeName === 'TEXTAREA') {
117
+ ;
118
+ element.setSelectionRange(0, 0);
119
+ } else {
120
+ (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
121
+ }
122
+ };
123
+ /**
124
+ * 剪贴板复制操作
125
+ * @param {string | HTMLElement} target
126
+ * @return {string}
127
+ */
128
+ var onClipboardCopy = function onClipboardCopy(target) {
129
+ var copiedValue;
130
+ if (typeof target === 'string') {
131
+ // 如果传的是字符串,直接复制值
132
+ copiedValue = target;
133
+ if (navigator.clipboard) {
134
+ // navigator.clipboard api 存在时,优先使用其进行复制操作
135
+ if (copiedValue !== '') {
136
+ navigator.clipboard.writeText(copiedValue).then(null, function () {
137
+ throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
138
+ });
139
+ }
140
+ } else {
141
+ var container = createContainer(copiedValue);
142
+ addSelection(container);
143
+ document.execCommand('copy');
144
+ removeSelection(container);
145
+ removeContainer(container);
146
+ }
147
+ } else {
148
+ // 通过元素来复制
149
+ copiedValue = getContent(target);
150
+ if (navigator.clipboard) {
151
+ if (copiedValue !== '') {
152
+ navigator.clipboard.writeText(copiedValue).then(null, function () {
153
+ throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
154
+ });
155
+ }
156
+ } else {
157
+ addSelection(target);
158
+ document.execCommand('copy');
159
+ removeSelection(target);
160
+ }
161
+ }
162
+ return copiedValue;
163
+ };
164
+ /**
165
+ * 剪贴板剪切操作
166
+ * @param {HTMLElement} target
167
+ * @return {string}
168
+ */
169
+ var onClipboardCut = function onClipboardCut(target) {
170
+ var cutValue = getContent(target);
171
+ if (target.nodeName === 'SELECT' || target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
172
+ // 对于输入框,使用 document.execCommand('cut') 来剪切,防止受控的输入框无法清空内容
173
+ if (document.execCommand) {
174
+ addSelection(target);
175
+ document.execCommand('cut');
176
+ removeSelection(target);
177
+ } else {
178
+ // document.execCommand 命令不兼容,则抛出异常,因为受控的输入框无法清空元素内容
179
+ throw new Error("failed to cut to clipboard through unavailable api \"document.execCommand\"");
180
+ }
181
+ } else {
182
+ // 对于其他标签的元素,使用 navigator 写入剪贴板,并手动清空内容,防止其他标签无法清空内容
183
+ if (navigator.clipboard) {
184
+ if (cutValue !== '') {
185
+ navigator.clipboard.writeText(cutValue).then(null, function () {
186
+ throw new Error("failed to cut to clipboard of value '".concat(cutValue, "'"));
187
+ });
188
+ }
189
+ clearElement(target);
190
+ } else {
191
+ // navigator.clipboard 命令不兼容,则抛出异常,因为非输入框无法适用 document.execCommand('cut')
192
+ throw new Error("failed to cut to clipboard through unavailable api \"navigator.clipboard\"");
193
+ }
194
+ }
195
+ return cutValue;
196
+ };
197
+ export { onClipboardCopy, onClipboardCut };
@@ -13,7 +13,7 @@ import { toLowerCase } from './utils/convertLetters';
13
13
  import Color from 'color';
14
14
  import { ChromePicker } from 'react-color';
15
15
  import devWarning from '../_utils/devwarning';
16
- import useOnClickOutside from './utils/hooks/useOnClickOutside';
16
+ import { useOnClickOutside } from '../_utils/hooks';
17
17
  var ColorPickerPanel = function ColorPickerPanel(props) {
18
18
  var _classNames, _context;
19
19
  var setCorrectColorValue = props.setCorrectColorValue,
@@ -26,6 +26,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
26
26
  setColTypeArr = props.setColTypeArr,
27
27
  setCurrentColorType = props.setCurrentColorType,
28
28
  onChange = props.onChange,
29
+ onVisibleChange = props.onVisibleChange,
29
30
  alpha = props.alpha,
30
31
  alphaNoVerifyVal = props.alphaNoVerifyVal,
31
32
  clickedColorIndex = props.clickedColorIndex,
@@ -43,7 +44,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
43
44
  showPresetColor = props.showPresetColor,
44
45
  showColorPickerBox = props.showColorPickerBox,
45
46
  showColorPickerPanel = props.showColorPickerPanel,
46
- value = props.value;
47
+ value = props.value,
48
+ visible = props.visible,
49
+ showPanel = props.showPanel;
47
50
  var panelInputRef = useRef(null);
48
51
  var panelClsRef = useRef(null);
49
52
  var Option = Select.Option;
@@ -55,8 +58,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
55
58
  var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
56
59
  var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
57
60
  var panelFollowThemeCls = classNames("".concat(colorPickerPrefixCls, "-panel-switch"));
58
- var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-input"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
59
- var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-transparent"));
61
+ var panelContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-container"));
62
+ var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-input"));
63
+ var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
60
64
  var colorDivContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0));
61
65
  var colorLiClick = function colorLiClick(index, colorValue) {
62
66
  var formatArr = colorFormat(colorValue, alpha);
@@ -171,7 +175,10 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
171
175
  return isTrueFormat;
172
176
  };
173
177
  useOnClickOutside([panelClsRef, inputRef], function () {
174
- setShowPanel(false);
178
+ if (typeof visible === 'undefined') {
179
+ setShowPanel(false);
180
+ }
181
+ showPanel && onVisibleChange && onVisibleChange(false);
175
182
  });
176
183
  return /*#__PURE__*/React.createElement(React.Fragment, null, showColorPickerPanel && /*#__PURE__*/React.createElement("div", {
177
184
  className: panelCls,
@@ -185,7 +192,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
185
192
  }, /*#__PURE__*/React.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/React.createElement(Switch, {
186
193
  checked: isFollow,
187
194
  onChange: handleSwitchChange
188
- })), showColorTransfer && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
195
+ })), showColorTransfer && /*#__PURE__*/React.createElement("div", {
196
+ className: panelContainerCls
197
+ }, /*#__PURE__*/React.createElement("div", {
189
198
  className: panelInputCls,
190
199
  ref: panelInputRef
191
200
  }, /*#__PURE__*/React.createElement(Select, {
@@ -36,8 +36,10 @@ var ColorPicker = function ColorPicker(props) {
36
36
  placeholder = colorPickerProps.placeholder,
37
37
  defaultValue = colorPickerProps.defaultValue,
38
38
  defaultOpen = colorPickerProps.defaultOpen,
39
+ visible = colorPickerProps.visible,
39
40
  suffixIcon = colorPickerProps.suffixIcon,
40
- onChange = colorPickerProps.onChange;
41
+ onChange = colorPickerProps.onChange,
42
+ onVisibleChange = colorPickerProps.onVisibleChange;
41
43
  var _useState = useState(defaultValue || ''),
42
44
  _useState2 = _slicedToArray(_useState, 2),
43
45
  inputColorValue = _useState2[0],
@@ -54,7 +56,7 @@ var ColorPicker = function ColorPicker(props) {
54
56
  _useState8 = _slicedToArray(_useState7, 2),
55
57
  colTypeArr = _useState8[0],
56
58
  setColTypeArr = _useState8[1];
57
- var _useState9 = useState(defaultOpen),
59
+ var _useState9 = useState(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
58
60
  _useState10 = _slicedToArray(_useState9, 2),
59
61
  showPanel = _useState10[0],
60
62
  setShowPanel = _useState10[1];
@@ -118,8 +120,16 @@ var ColorPicker = function ColorPicker(props) {
118
120
  functionalColor && showSwitch && setIsFollow(false);
119
121
  };
120
122
  var handleClick = function handleClick() {
121
- setShowPanel(!showPanel);
123
+ if (typeof visible === 'undefined') {
124
+ setShowPanel(!showPanel);
125
+ }
126
+ onVisibleChange && onVisibleChange(!showPanel);
122
127
  };
128
+ useEffect(function () {
129
+ if (typeof visible !== 'undefined') {
130
+ setShowPanel(visible);
131
+ }
132
+ }, [visible]);
123
133
  useEffect(function () {
124
134
  if (value) {
125
135
  setIconColor(value);
@@ -169,6 +179,9 @@ var ColorPicker = function ColorPicker(props) {
169
179
  switchName: switchName,
170
180
  presetColor: presetColor,
171
181
  value: value,
182
+ visible: visible,
183
+ showPanel: showPanel,
184
+ onVisibleChange: onVisibleChange,
172
185
  // private
173
186
  setInputColorValue: setInputColorValue,
174
187
  setCorrectColorValue: setCorrectColorValue,
@@ -195,6 +208,7 @@ var ColorPicker = function ColorPicker(props) {
195
208
  placement: 'bottomLeft',
196
209
  defaultVisible: showPanel,
197
210
  visible: showPanel,
211
+ onVisibleChange: null,
198
212
  clickToClose: false
199
213
  });
200
214
  return usePopper(colorInputEle, panel, popperProps);
@@ -32,7 +32,9 @@ export interface IColorPickerProps extends PopperProps {
32
32
  showOpacity: boolean;
33
33
  };
34
34
  defaultOpen: boolean;
35
+ visible: boolean;
35
36
  onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
37
+ onVisibleChange: (visible: boolean) => void;
36
38
  }
37
39
  export interface IColorPickerPanelProps {
38
40
  alpha: number;
@@ -60,6 +62,8 @@ export interface IColorPickerPanelProps {
60
62
  };
61
63
  showColorPickerPanel: boolean;
62
64
  value: string;
65
+ visible: boolean;
66
+ showPanel: boolean;
63
67
  setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
64
68
  setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
65
69
  setClickedColorIndex: (clickedColorIndex: number) => void;
@@ -70,4 +74,5 @@ export interface IColorPickerPanelProps {
70
74
  setInputColorValue: (colorValue: string) => void;
71
75
  setShowPanel: (showPanel: boolean) => void;
72
76
  onChange?: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
77
+ onVisibleChange?: (visible: boolean) => void;
73
78
  }
@@ -105,6 +105,7 @@
105
105
  /* ----------- zIndex ——————---- end */
106
106
  .kd-color-picker-container {
107
107
  position: relative;
108
+ width: var(--kd-c-color-picker-input-sizing-width, 230px);
108
109
  }
109
110
  .kd-color-picker-container .kd-color-picker-input {
110
111
  width: var(--kd-c-color-picker-input-sizing-width, 230px);
@@ -146,6 +147,9 @@
146
147
  transition: transform 0.2s ease-in-out;
147
148
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
148
149
  }
150
+ .kd-color-picker-pop {
151
+ width: var(--kd-c-color-picker-panel-sizing-width, 304px);
152
+ }
149
153
  .kd-color-picker-pop.topLeft.hidden,
150
154
  .kd-color-picker-pop.bottomLeft.hidden,
151
155
  .kd-color-picker-pop.topRight.hidden,
@@ -255,19 +259,30 @@
255
259
  vertical-align: middle;
256
260
  margin-right: 9px;
257
261
  }
258
- .kd-color-picker-pop .kd-color-picker-panel-input {
262
+ .kd-color-picker-pop .kd-color-picker-panel-container {
263
+ display: -webkit-box;
264
+ display: -ms-flexbox;
265
+ display: flex;
266
+ -ms-flex-wrap: nowrap;
267
+ flex-wrap: nowrap;
268
+ margin-top: 10px;
269
+ }
270
+ .kd-color-picker-pop .kd-color-picker-panel-container-input {
271
+ -webkit-box-flex: 1;
272
+ -ms-flex: 1 1 auto;
273
+ flex: 1 1 auto;
259
274
  display: inline-block;
260
275
  position: relative;
261
- margin-top: 12px;
262
276
  font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
263
277
  }
264
- .kd-color-picker-pop .kd-color-picker-panel-input-no-recommend {
265
- margin-bottom: 0;
278
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel {
279
+ margin: 0 !important;
266
280
  }
267
- .kd-color-picker-pop .kd-color-picker-panel-input .kd-select.bottomLeft,
268
- .kd-color-picker-pop .kd-color-picker-panel-input .kd-select.topLeft {
281
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.bottomLeft,
282
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.topLeft {
269
283
  position: absolute;
270
284
  width: 60px !important;
285
+ min-width: unset !important;
271
286
  background: #FFFFFF;
272
287
  right: 0;
273
288
  left: unset !important;
@@ -275,7 +290,7 @@
275
290
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
276
291
  border-radius: 2px;
277
292
  }
278
- .kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown .kd-select-item-option {
293
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item-option {
279
294
  display: -webkit-box;
280
295
  display: -ms-flexbox;
281
296
  display: flex;
@@ -284,21 +299,23 @@
284
299
  justify-content: center;
285
300
  min-width: unset;
286
301
  }
287
- .kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
302
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered {
288
303
  border-radius: 2px;
289
304
  width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
290
305
  height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
291
306
  min-height: 28px;
292
- margin-top: -2px;
307
+ padding: 0 28px 0 0;
293
308
  }
294
- .kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered .kd-select-placeholder {
309
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered .kd-select-placeholder {
295
310
  left: 8px;
296
311
  }
297
- .kd-color-picker-pop .kd-color-picker-panel-input .active-option {
312
+ .kd-color-picker-pop .kd-color-picker-panel-container-input .active-option {
298
313
  background-color: var(--kd-c-color-picker-panel-option-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
299
314
  }
300
- .kd-color-picker-pop .kd-color-picker-panel-transparent {
301
- width: 60px;
315
+ .kd-color-picker-pop .kd-color-picker-panel-container-transparent {
316
+ -webkit-box-flex: 0;
317
+ -ms-flex: 0 0 60px;
318
+ flex: 0 0 60px;
302
319
  height: 28px;
303
320
  margin-left: 8px;
304
321
  text-align: center;
@@ -6,6 +6,7 @@
6
6
 
7
7
  .@{color-picker-prefix-cls}-container {
8
8
  position: relative;
9
+ width: @color-picker-input-sizing-width;
9
10
 
10
11
  .@{color-picker-prefix-cls}-input {
11
12
  width: @color-picker-input-sizing-width;
@@ -52,6 +53,7 @@
52
53
  }
53
54
 
54
55
  .@{color-picker-prefix-cls}-pop {
56
+ width: @color-picker-panel-sizing-width;
55
57
 
56
58
  &.topLeft.hidden,
57
59
  &.bottomLeft.hidden,
@@ -202,63 +204,67 @@
202
204
  }
203
205
  }
204
206
 
205
- &-input {
206
- display: inline-block;
207
- position: relative;
208
- margin-top: 12px;
209
- font-size: @color-picker-panel-select-font-size;
207
+ &-container {
208
+ display: flex;
209
+ flex-wrap: nowrap;
210
+ margin-top: 10px;
210
211
 
211
- &-no-recommend {
212
- margin-bottom: 0;
213
- }
212
+ &-input {
213
+ flex: 1 1 auto;
214
+ display: inline-block;
215
+ position: relative;
216
+ font-size: @color-picker-panel-select-font-size;
217
+
218
+ .@{kd-prefix}-select-dropdown-panel {
219
+ margin: 0 !important;
220
+
221
+ &.bottomLeft,
222
+ &.topLeft {
223
+ position: absolute;
224
+ width: 60px !important;
225
+ min-width: unset !important;
226
+ background: #FFFFFF;
227
+ right: 0;
228
+ left: unset !important;
229
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
230
+ border-radius: 2px;
231
+ }
214
232
 
215
- .@{kd-prefix}-select {
233
+ .@{kd-prefix}-select-dropdown {
234
+ .@{kd-prefix}-select-item-option {
235
+ display: flex;
236
+ justify-content: center;
237
+ min-width: unset;
238
+ }
239
+ }
240
+ }
216
241
 
217
- &.bottomLeft,
218
- &.topLeft {
219
- position: absolute;
220
- width: 60px !important;
221
- background: #FFFFFF;
222
- right: 0;
223
- left: unset !important;
224
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
242
+ .@{kd-prefix}-select-bordered {
225
243
  border-radius: 2px;
226
- }
244
+ width: @color-picker-panel-select-sizing-width;
245
+ height: @color-picker-panel-select-sizing-height;
246
+ min-height: 28px;
247
+ padding: 0 28px 0 0;
227
248
 
228
- .@{kd-prefix}-select-dropdown {
229
- .@{kd-prefix}-select-item-option {
230
- display: flex;
231
- justify-content: center;
232
- min-width: unset;
249
+ .@{kd-prefix}-select-placeholder {
250
+ left: 8px;
233
251
  }
234
252
  }
235
- }
236
-
237
- .@{kd-prefix}-select-bordered {
238
- border-radius: 2px;
239
- width: @color-picker-panel-select-sizing-width;
240
- height: @color-picker-panel-select-sizing-height;
241
- min-height: 28px;
242
- margin-top: -2px;
243
253
 
244
- .@{kd-prefix}-select-placeholder {
245
- left: 8px;
254
+ .active-option {
255
+ background-color: @color-picker-panel-option-color-background;
246
256
  }
247
257
  }
248
258
 
249
- .active-option {
250
- background-color: @color-picker-panel-option-color-background;
259
+ &-transparent {
260
+ flex: 0 0 60px;
261
+ height: 28px;
262
+ margin-left: 8px;
263
+ text-align: center;
264
+ font-size: @color-picker-panel-alpha-font-size;
251
265
  }
252
266
  }
253
267
 
254
- &-transparent {
255
- width: 60px;
256
- height: 28px;
257
- margin-left: 8px;
258
- text-align: center;
259
- font-size: @color-picker-panel-alpha-font-size;
260
- }
261
-
262
268
  &-colorDivContainer {
263
269
  display: grid;
264
270
  grid-template-columns: repeat(12, 1fr);
@@ -462,5 +462,10 @@ declare const compDefaultProps: {
462
462
  optionHighlightProps: string;
463
463
  allowClear: boolean;
464
464
  };
465
+ Clipboard: {
466
+ action: string;
467
+ disabled: boolean;
468
+ size: string;
469
+ };
465
470
  };
466
471
  export default compDefaultProps;
@@ -479,6 +479,11 @@ var compDefaultProps = {
479
479
  showDescription: true,
480
480
  optionHighlightProps: 'highlightText',
481
481
  allowClear: true
482
+ },
483
+ Clipboard: {
484
+ action: 'copy',
485
+ disabled: false,
486
+ size: 'middle'
482
487
  }
483
488
  };
484
489
  export default compDefaultProps;
package/es/index.d.ts CHANGED
@@ -55,3 +55,4 @@ export { default as BaseData } from './base-data';
55
55
  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
+ export { default as Clipboard } from './clipboard';
package/es/index.js CHANGED
@@ -54,4 +54,5 @@ export { default as Stepper } from './stepper';
54
54
  export { default as BaseData } from './base-data';
55
55
  export { default as Link } from './link';
56
56
  export { default as TreeSelect } from './tree-select';
57
- export { default as ColorPicker } from './color-picker';
57
+ export { default as ColorPicker } from './color-picker';
58
+ export { default as Clipboard } from './clipboard';
@@ -98,6 +98,8 @@ declare class LocaleCache {
98
98
  'Table.notIsNull': string;
99
99
  'Table.resetFilter': string;
100
100
  'Table.confirmFilter': string;
101
+ 'Select.selectAll': string;
102
+ 'Select.seleted': string;
101
103
  'DatePicker.placeholder': string;
102
104
  'DatePicker.yearPlaceholder': string;
103
105
  'DatePicker.quarterPlaceholder': string;
@@ -72,6 +72,8 @@ declare const locale: {
72
72
  'Table.notIsNull': string;
73
73
  'Table.resetFilter': string;
74
74
  'Table.confirmFilter': string;
75
+ 'Select.selectAll': string;
76
+ 'Select.seleted': string;
75
77
  'DatePicker.placeholder': string;
76
78
  'DatePicker.yearPlaceholder': string;
77
79
  'DatePicker.quarterPlaceholder': string;
@@ -75,6 +75,8 @@ var locale = _extends(_extends({
75
75
  'Table.isNull': '为空',
76
76
  'Table.notIsNull': '不为空',
77
77
  'Table.resetFilter': '重置',
78
- 'Table.confirmFilter': '确定'
78
+ 'Table.confirmFilter': '确定',
79
+ 'Select.selectAll': '全选',
80
+ 'Select.seleted': '已选{size}项'
79
81
  });
80
82
  export default locale;
@@ -58,16 +58,13 @@ var Content = function Content(args) {
58
58
  }));
59
59
  };
60
60
  var getMainElement = function getMainElement() {
61
- if (typeof content === 'string') {
61
+ if (typeof content === 'string' || /*#__PURE__*/React.isValidElement(content)) {
62
62
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
63
63
  className: "".concat(classPrefix, "-main")
64
64
  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
65
65
  className: "".concat(classPrefix, "-text")
66
66
  }, content)), renderCloseIcon());
67
67
  }
68
- if ( /*#__PURE__*/React.isValidElement(content)) {
69
- return content;
70
- }
71
68
  return null;
72
69
  };
73
70
  return /*#__PURE__*/React.createElement(React.Fragment, null, getMainElement());
@@ -53,6 +53,7 @@ export interface ISelectProps<T extends SelectValue> extends AbstractSelectProps
53
53
  defaultValue?: T;
54
54
  mode?: Mode;
55
55
  autoFocus?: boolean;
56
+ status?: 'error';
56
57
  onChange?: (value?: T, option?: React.ReactElement<any> | React.ReactElement<any>[]) => void;
57
58
  onSelect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;
58
59
  onDeselect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;