@kdcloudjs/kdesign 1.7.35 → 1.7.39

package/es/cascader/cascader.js

@@ -70,6 +70,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
   var mergeRef = useRef();
   var inputRef = useRef();
+  var suffixRef = useRef(null);
   var wrapperRef = useRef();
   var _useState = useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -199,10 +200,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   React.useEffect(function () {
     var _a;
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
+    ;
+    (_a = (isMultiple ? suffixRef : wrapperRef).current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
     return function () {
       var _a;
-      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
+      ;
+      (_a = (isMultiple ? suffixRef : wrapperRef).current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
     };
   }, []);
   var labels = useMemo(function () {
@@ -304,9 +307,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "".concat(prefixCls, "-tag-describe-content")
     }, "\u5171", currentOptions.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-placeholder")
-    }, !currentOptions.length && placeholder), /*#__PURE__*/React.createElement("span", {
+    }, !currentOptions.length && placeholder)), /*#__PURE__*/React.createElement("span", {
+      ref: suffixRef,
       className: "".concat(prefixCls, "-suffix")
-    }, renderSuffix())));
+    }, renderSuffix()));
   };
   var renderSingle = function renderSingle() {
     var _classNames5;

package/es/cascader/style/index.css

@@ -276,9 +276,11 @@
 }
 .kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
   right: 9px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
 .kd-cascader-multiple {
-  padding: 1px 28px 1px 0;
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   width: 100%;
@@ -291,7 +293,6 @@
   cursor: pointer;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  overflow-y: auto;
   overflow-x: hidden;
   position: relative;
   border-bottom: 1px solid #d9d9d9;
@@ -311,6 +312,8 @@
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   width: 100%;
+  padding: 1px 28px 1px 0;
+  overflow-y: auto;
 }
 .kd-cascader-placeholder {
   position: absolute;

package/es/cascader/style/index.less

@@ -180,11 +180,12 @@
 
     .@{kd-prefix}-cascader-suffix {
       right: 9px;
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
 
   &-multiple {
-    padding: 1px 28px 1px 0;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     width: 100%;
     min-height: 30px;
@@ -193,7 +194,6 @@
     display: flex;
     cursor: pointer;
     box-sizing: border-box;
-    overflow-y: auto;
     overflow-x: hidden;
     position: relative;
     border-bottom: 1px solid #d9d9d9;
@@ -210,6 +210,8 @@
     align-items: center;
     flex-wrap: wrap;
     width: 100%;
+    padding: 1px 28px 1px 0;
+    overflow-y: auto;
   }
 
   &-placeholder {

package/es/city-picker/city-picker.js

@@ -189,7 +189,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (disabled) return null;
     var suffixIcon = selectProps.suffixIcon;
     var arrowIconCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
-    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    var iconShow = allowClear && !disabled && (initValue !== null && initValue !== void 0 ? initValue : '') !== '';
     return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
       onClick: handleReset,
       onMouseDown: function onMouseDown(e) {

package/es/clipboard/clipboard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const ClipboardActions: ["copy", "cut"];
+export declare type ClipboardAction = typeof ClipboardActions[number];
+export declare const ClipboardSizes: ["large", "middle", "small"];
+export declare type ClipboardSize = typeof ClipboardSizes[number];
+export interface IClipboardProps {
+    action?: ClipboardAction;
+    content?: string;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: React.ReactNode | false;
+    prefixCls?: string;
+    size?: ClipboardSize;
+    style?: Record<string, unknown>;
+    target?: () => HTMLElement | string;
+    onError?: (error: Error) => void;
+    onSuccess?: (content: string) => void;
+}
+declare const Clipboard: React.ForwardRefExoticComponent<IClipboardProps & React.RefAttributes<unknown>>;
+export default Clipboard;

package/es/clipboard/clipboard.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import classNames from 'classnames';
+import React, { useCallback, useContext } from 'react';
+import { getCompProps } from '../_utils';
+import devWarning from '../_utils/devwarning';
+import { tuple } from '../_utils/type';
+import ConfigContext from '../config-provider/ConfigContext';
+import Icon from '../icon';
+import { onClipboardCopy, onClipboardCut } from './util';
+export var ClipboardActions = tuple('copy', 'cut');
+export var ClipboardSizes = tuple('large', 'middle', 'small');
+var InternalClipboard = function InternalClipboard(props, ref) {
+  var _context, _classNames;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  // 剪贴板参数，合并了系统默认参数、用户定义组件统一参数及组件传参
+  var clipboardProps = getCompProps('Clipboard', userDefaultProps, props);
+  var className = clipboardProps.className,
+    customPrefixcls = clipboardProps.prefixCls,
+    action = clipboardProps.action,
+    content = clipboardProps.content,
+    children = clipboardProps.children,
+    disabled = clipboardProps.disabled,
+    icon = clipboardProps.icon,
+    size = clipboardProps.size,
+    target = clipboardProps.target,
+    onError = clipboardProps.onError,
+    onSuccess = clipboardProps.onSuccess,
+    others = __rest(clipboardProps, ["className", "prefixCls", "action", "content", "children", "disabled", "icon", "size", "target", "onError", "onSuccess"]);
+  devWarning(ClipboardActions.indexOf(action) === -1, 'clipboard', "cannot found clipboard action '".concat(action, "'"));
+  devWarning(ClipboardSizes.indexOf(size) === -1, 'clipboard', "cannot found clipboard size '".concat(size, "'"));
+  // 剪贴板样式前缀
+  var clipboardPrefixCls = getPrefixCls(prefixCls, 'clipboard', customPrefixcls);
+  var clipboardClass = classNames(clipboardPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(clipboardPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(clipboardPrefixCls, "-icon-only"), !children && children !== 0 && icon !== null), _classNames));
+  // ref
+  var clipboardRef = ref || /*#__PURE__*/React.createRef();
+  // 如果没有传 icon，则使用默认图标
+  // 如果 icon 传 null，则不使用图标
+  var iconNode = icon || (icon === undefined ? /*#__PURE__*/React.createElement(Icon, {
+    type: "copy-code"
+  }) : null);
+  // 如果传的 children 为 string，则将 children 包装成块标签
+  var childrenNode = typeof children === 'string' ? /*#__PURE__*/React.createElement("span", null, children) : children;
+  /**
+   * 剪贴板 click 事件处理
+   */
+  var handleClick = useCallback(function () {
+    if (disabled) {
+      // 禁用状态不触发点击事件
+      return;
+    }
+    var selectedText;
+    try {
+      if (content) {
+        // 如果传了 content，则直接复制 content
+        selectedText = onClipboardCopy(content);
+      } else {
+        var targetElement = typeof target === 'string' ? document.querySelector(target) : target();
+        if (!targetElement) {
+          // 没有获取到元素，抛出异常
+          throw new Error("target element '".concat(target, "' does not exist"));
+        } else {
+          if (action === 'copy' && targetElement.hasAttribute('disabled')) {
+            // 复制被置为 disabled 的元素，抛出异常
+            throw new Error("invalid \"target\" attribute of element '".concat(targetElement, "'. Please use \"readonly\" instead of \"disabled\" attribute"));
+          }
+          if (action === 'cut' && (targetElement.hasAttribute('readonly') || targetElement.hasAttribute('disabled'))) {
+            // 剪切被置为 readonly 或 disabled 的元素，抛出异常
+            throw new Error("invalid \"target\" attribute of element '".concat(targetElement, "'. You can't cut text from elements with \"readonly\" or \"disabled\" attributes"));
+          }
+        }
+        // 对 targetElement 的值进行复制或剪切
+        selectedText = action === 'copy' ? onClipboardCopy(targetElement) : onClipboardCut(targetElement);
+      }
+    } catch (error) {
+      // 触发失败的回调
+      onError === null || onError === void 0 ? void 0 : onError(error);
+      // 退出处理器
+      return;
+    }
+    // 触发成功的回调
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(selectedText);
+  }, [action, content, disabled, onError, onSuccess, target]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clipboardClass,
+    disabled: disabled,
+    onClick: handleClick,
+    ref: clipboardRef
+  }, others), iconNode, childrenNode);
+};
+var Clipboard = /*#__PURE__*/React.forwardRef(InternalClipboard);
+Clipboard.displayName = 'Clipboard';
+export default Clipboard;

package/es/clipboard/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Clipboard: import("react").ForwardRefExoticComponent<import("./clipboard").IClipboardProps & import("react").RefAttributes<unknown>>;
+export { ClipboardAction, IClipboardProps } from './clipboard';
+export default Clipboard;

package/es/clipboard/index.js

@@ -0,0 +1,3 @@
+import InternalClipboard from './clipboard';
+var Clipboard = InternalClipboard;
+export default Clipboard;

package/es/clipboard/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';

package/es/clipboard/style/index.css

@@ -0,0 +1,190 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-clipboard {
+  padding: 0;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-weight: var(--kd-c-clipboard-font-weight, var(--kd-g-font-weight, 400));
+  color: #bbbbbb;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-clipboard:hover {
+  color: #5582f3;
+}
+.kd-clipboard:disabled,
+.kd-clipboard[disabled] {
+  color: #bbbbbb;
+  cursor: not-allowed;
+}
+.kd-clipboard-size-small {
+  height: var(--kd-c-clipboard-sizing-height-small, 24px);
+  padding: var(--kd-c-clipboard-spacing-padding-vertical-small, 3px) var(--kd-c-clipboard-spacing-padding-horizontal-small, 8px);
+  font-size: var(--kd-c-clipboard-font-size-small, var(--kd-g-font-size-small, 12px));
+  line-height: calc(var(--kd-c-clipboard-sizing-height-small, 24px) - (var(--kd-c-clipboard-spacing-padding-vertical-small, 3px)) * 2);
+}
+.kd-clipboard-size-small.kd-clipboard-icon-only {
+  font-size: var(--kd-c-clipboard-icon-font-size-small, 14px);
+  padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-clipboard-size-middle {
+  height: var(--kd-c-clipboard-sizing-height-middle, 28px);
+  padding: var(--kd-c-clipboard-spacing-padding-vertical-middle, 5px) var(--kd-c-clipboard-spacing-padding-horizontal-middle, 8px);
+  font-size: var(--kd-c-clipboard-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  line-height: calc(var(--kd-c-clipboard-sizing-height-middle, 28px) - (var(--kd-c-clipboard-spacing-padding-vertical-middle, 5px)) * 2);
+}
+.kd-clipboard-size-middle.kd-clipboard-icon-only {
+  font-size: var(--kd-c-clipboard-icon-font-size-middle, 16px);
+  padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-clipboard-size-large {
+  height: var(--kd-c-clipboard-sizing-height-large, 32px);
+  padding: var(--kd-c-clipboard-spacing-padding-vertical-large, 6px) var(--kd-c-clipboard-spacing-padding-horizontal-large, 8px);
+  font-size: var(--kd-c-clipboard-font-size-large, var(--kd-g-font-size-large, 16px));
+  line-height: calc(var(--kd-c-clipboard-sizing-height-large, 32px) - (var(--kd-c-clipboard-spacing-padding-vertical-large, 6px)) * 2);
+}
+.kd-clipboard-size-large.kd-clipboard-icon-only {
+  font-size: var(--kd-c-clipboard-icon-font-size-large, 18px);
+  padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-clipboard:not(.kd-clipboard-icon-only) > i:not(:last-child) {
+  margin-right: 2px;
+}

package/es/clipboard/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/clipboard/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/clipboard/style/index.less

@@ -0,0 +1,32 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@clipboard-prefix-cls: ~'@{kd-prefix}-clipboard';
+
+.@{clipboard-prefix-cls} {
+  .clipboard;
+
+  &-size-small {
+    .clipboard-size(@clipboard-small-height, @clipboard-small-font-size, @clipboard-small-padding-vertical, @clipboard-small-padding-horizontal);
+    &.@{clipboard-prefix-cls}-icon-only {
+      .clipboard-icon-only(@clipboard-icon-small-font-size, @clipboard-icon-padding-horizontal);
+    }
+  }
+
+  &-size-middle {
+    .clipboard-size(@clipboard-middle-height, @clipboard-middle-font-size, @clipboard-middle-padding-vertical, @clipboard-middle-padding-horizontal);
+    &.@{clipboard-prefix-cls}-icon-only {
+      .clipboard-icon-only(@clipboard-icon-middle-font-size, @clipboard-icon-padding-horizontal);
+    }
+  }
+
+  &-size-large {
+    .clipboard-size(@clipboard-large-height, @clipboard-large-font-size, @clipboard-large-padding-vertical, @clipboard-large-padding-horizontal);
+    &.@{clipboard-prefix-cls}-icon-only {
+      .clipboard-icon-only(@clipboard-icon-large-font-size, @clipboard-icon-padding-horizontal);
+    }
+  }
+
+  &:not(.@{clipboard-prefix-cls}-icon-only) > i:not(:last-child) {
+    margin-right: 2px;
+  }
+}

package/es/clipboard/style/mixin.less

@@ -0,0 +1,39 @@
+@import './token.less';
+
+.clipboard() {
+  padding: 0;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  font-weight: @clipboard-g-font-weight;
+  color: #bbbbbb;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+
+  &:hover {
+    color: #5582f3;
+  }
+  &:disabled,
+  &[disabled] {
+    color: #bbbbbb;
+    cursor: not-allowed;
+  }
+}
+
+.clipboard-size(@height, @font-size, @padding-vertical, @padding-horizontal) {
+  height: @height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: calc(@height - (@padding-vertical) * 2);
+}
+
+.clipboard-icon-only(@font-size, @padding-horizontal) {
+  font-size: @font-size;
+  padding: 0 @padding-horizontal;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}

package/es/clipboard/style/token.less

@@ -0,0 +1,52 @@
+@import '../../style/themes/token.less';
+
+@clipboard-custom-prefix: ~'--@{kd-prefix}-c-clipboard';
+
+// color
+@clipboard-font-color: var(~'@{clipboard-custom-prefix}-color-text', @color-theme); // color-theme为全局token
+
+// font
+@clipboard-g-font-weight: var(~'@{clipboard-custom-prefix}-font-weight', @font-weight-light); // 字体粗细
+@clipboard-small-font-size: var(~'@{clipboard-custom-prefix}-font-size-small', @font-size-small); // 小号 文字大小
+@clipboard-middle-font-size: var(~'@{clipboard-custom-prefix}-font-size-middle', @font-size-middle); // 中号 文字大小
+@clipboard-large-font-size: var(~'@{clipboard-custom-prefix}-font-size-large', @font-size-large); // 大号 文字大小
+
+@clipboard-icon-small-font-size: var(~'@{clipboard-custom-prefix}-icon-font-size-small', 14px); // 小号 图标大小
+@clipboard-icon-middle-font-size: var(~'@{clipboard-custom-prefix}-icon-font-size-middle', 16px); // 中号 图标大小
+@clipboard-icon-large-font-size: var(~'@{clipboard-custom-prefix}-icon-font-size-large', 18px); // 大号 图标大小
+
+// motion
+@clipboard-duration-fade: var(~'@{clipboard-custom-prefix}-motion-duration-fade', @duration-slowly);
+@clipboard-duration-wave: var(~'@{clipboard-custom-prefix}-motion-duration-wave', @duration-quickly);
+
+// sizing
+@clipboard-small-height: var(~'@{clipboard-custom-prefix}-sizing-height-small', 24px); // 小号 高度
+@clipboard-middle-height: var(~'@{clipboard-custom-prefix}-sizing-height-middle', 28px); // 中号 高度
+@clipboard-large-height: var(~'@{clipboard-custom-prefix}-sizing-height-large', 32px); // 大号 高度
+
+// spacing
+@clipboard-small-padding-vertical: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-vertical-small',
+  3px
+); // 小号 内间距 纵向
+@clipboard-small-padding-horizontal: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-horizontal-small',
+  8px
+); // 小号 内间距 横向
+@clipboard-middle-padding-vertical: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-vertical-middle',
+  5px
+); // 中号 内间距 纵向
+@clipboard-middle-padding-horizontal: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-horizontal-middle',
+  8px
+); // 中号 内间距 横向
+@clipboard-large-padding-vertical: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-vertical-large',
+  6px
+); // 大号 内间距 纵向
+@clipboard-large-padding-horizontal: var(
+  ~'@{clipboard-custom-prefix}-spacing-padding-horizontal-large',
+  8px
+); // 大号 内间距 横向
+@clipboard-icon-padding-horizontal: var(~'@{clipboard-custom-prefix}-icon-spacing-padding-horizontal', 4px);

package/es/clipboard/util.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 剪贴板复制操作
+ * @param {string | HTMLElement} target
+ * @return {string}
+ */
+declare const onClipboardCopy: (target: string | HTMLElement) => string;
+/**
+ * 剪贴板剪切操作
+ * @param {HTMLElement} target
+ * @return {string}
+ */
+declare const onClipboardCut: (target: HTMLElement) => string;
+export { onClipboardCopy, onClipboardCut };