@kdcloudjs/kdesign 1.7.59 → 1.7.60

package/es/signature/signature.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+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 React, { useContext, useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import SignaturePad from './utils/signature_pad';
+import Modal from '../modal';
+import Icon from '../icon';
+import Image from '../image';
+import Button from '../button';
+import DrawingBoard from './drawingBoard';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { useResizeObserver } from '../_utils/hooks';
+import { tuple } from '../_utils/type';
+export var DataUrlTypes = tuple('png', 'jpeg', 'svg');
+var typeMapping = {
+  png: 'image/png',
+  jpeg: 'image/jpeg',
+  svg: 'image/svg+xml'
+};
+var Signature = function Signature(props) {
+  var _classNames2;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps,
+    locale = _useContext.locale;
+  var signatureProps = getCompProps('Signature', userDefaultProps, props);
+  var signatureLangMsg = locale.getCompLangMsg({
+    componentName: 'Signature'
+  });
+  var className = signatureProps.className,
+    style = signatureProps.style,
+    customPrefixcls = signatureProps.prefixCls,
+    containerWidth = signatureProps.containerWidth,
+    containerHeight = signatureProps.containerHeight,
+    getSignatureData = signatureProps.getSignatureData,
+    onStart = signatureProps.onStart,
+    onEnd = signatureProps.onEnd,
+    onClear = signatureProps.onClear,
+    undo = signatureProps.undo,
+    redo = signatureProps.redo,
+    penColor = signatureProps.penColor,
+    backgroundColor = signatureProps.backgroundColor,
+    _signatureProps$dataU = signatureProps.dataUrlType,
+    dataUrlType = _signatureProps$dataU === void 0 ? 'png' : _signatureProps$dataU,
+    title = signatureProps.title,
+    onClose = signatureProps.onClose,
+    disabled = signatureProps.disabled,
+    preview = signatureProps.preview,
+    canFullScreen = signatureProps.canFullScreen,
+    restProps = __rest(signatureProps, ["className", "style", "prefixCls", "containerWidth", "containerHeight", "getSignatureData", "onStart", "onEnd", "onClear", "undo", "redo", "penColor", "backgroundColor", "dataUrlType", "title", "onClose", "disabled", "preview", "canFullScreen"]);
+  var signaturePrefixCls = getPrefixCls(prefixCls, 'signature', customPrefixcls);
+  var signatureClass = classNames(signaturePrefixCls, className, _defineProperty({}, "".concat(signaturePrefixCls, "-disabled"), disabled));
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalVisible = _useState2[0],
+    setModalVisible = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dataUrl = _useState4[0],
+    setDataUrl = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isEmpty = _useState6[0],
+    setIsEmpty = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFullScreen = _useState8[0],
+    setIsFullScreen = _useState8[1];
+  var modalRef = useRef();
+  var modalBodyRef = useRef();
+  var triggerRef = useRef();
+  var signaturePadRef = useRef();
+  var handleOnClick = function handleOnClick() {
+    if (disabled) return;
+    setModalVisible(true);
+  };
+  var setJpegBgColor = function setJpegBgColor() {
+    var canvas = modalBodyRef.current.getCanvasRef();
+    var ctx = canvas.getContext('2d');
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  };
+  var handleModalOk = function handleModalOk() {
+    var _a, _b;
+    var type = typeMapping[dataUrlType] || '';
+    if (type === 'image/jpeg') setJpegBgColor();
+    var result = (_a = signaturePadRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL(type);
+    result && setDataUrl(result);
+    getSignatureData && getSignatureData(result);
+    (_b = signaturePadRef.current) === null || _b === void 0 ? void 0 : _b.clear();
+    setModalVisible(false);
+  };
+  var handleDelete = function handleDelete() {
+    if (disabled) return;
+    setDataUrl('');
+  };
+  var handleModalCancel = function handleModalCancel() {
+    onClose && onClose();
+    setModalVisible(false);
+  };
+  var handleFullScreen = function handleFullScreen(type) {
+    setIsFullScreen(true);
+    type === 'open' ? setIsFullScreen(true) : setIsFullScreen(false);
+  };
+  useResizeObserver(modalRef.current, function (rect) {
+    var width = rect.width,
+      height = rect.height;
+    var canvas = modalBodyRef.current.getCanvasRef();
+    canvas.width = width - 40;
+    canvas.height = height - 142;
+  });
+  useEffect(function () {
+    if (modalBodyRef.current) {
+      var canvas = modalBodyRef.current.getCanvasRef();
+      signaturePadRef.current = new SignaturePad(canvas, {
+        penColor: penColor
+      });
+      signaturePadRef.current.addEventListener('beginStroke', function () {
+        setIsEmpty(false);
+        onStart && onStart();
+      });
+      signaturePadRef.current.addEventListener('endStroke', function () {
+        modalBodyRef.current.saveSignatureToHistory();
+        onEnd && onEnd();
+      });
+    }
+    return function () {
+      if (signaturePadRef.current) {
+        signaturePadRef.current.off();
+      }
+    };
+  }, []);
+  useEffect(function () {
+    var _a, _b;
+    if (modalVisible) {
+      (_a = signaturePadRef.current) === null || _a === void 0 ? void 0 : _a.on();
+      modalBodyRef.current.saveSignatureToHistory();
+    } else {
+      (_b = signaturePadRef.current) === null || _b === void 0 ? void 0 : _b.off();
+      modalBodyRef.current.setSignatureHistory([]);
+      modalBodyRef.current.setCurrentHistoryIndex(-1);
+    }
+  }, [modalVisible]);
+  useEffect(function () {
+    signaturePadRef.current && (signaturePadRef.current.penColor = penColor);
+  }, [penColor]);
+  var DrawingBoardProps = {
+    prefixCls: signaturePrefixCls,
+    signatureLangMsg: signatureLangMsg,
+    undo: undo,
+    redo: redo,
+    isEmpty: isEmpty,
+    onClear: onClear,
+    setDataUrl: setDataUrl,
+    setIsEmpty: setIsEmpty,
+    signaturePad: function signaturePad() {
+      return signaturePadRef.current;
+    }
+  };
+  var modalClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(signaturePrefixCls, "-modal"), true), _defineProperty(_classNames2, "".concat(signaturePrefixCls, "-modal-fullscreen"), isFullScreen), _classNames2));
+  var footer = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(signaturePrefixCls, "-modal-footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleModalCancel
+  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.cancelText), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: handleModalOk,
+    disabled: isEmpty
+  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.okText));
+  var titleIcon = /*#__PURE__*/React.createElement(React.Fragment, null, !isFullScreen ? /*#__PURE__*/React.createElement("span", {
+    className: "kd-modal-expand-icon",
+    onClick: function onClick() {
+      return handleFullScreen('open');
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "977.\u5168\u5C4F",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 2.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1.07692308,17.4339622 C1.67169125,17.4339622 2.15384615,17.9161171 2.15384615,18.5108853 L2.15169231,24.8518084 L8.50424095,18.2911144 C8.91128276,17.8706218 9.58213195,17.8597178 10.0026246,18.2667596 L10.0077312,18.2717362 C10.4291221,18.6851765 10.4378354,19.3612143 10.0272402,19.7853779 L4.12030769,25.8856545 L10.2510885,25.8867924 C10.8346347,25.8867924 11.3076923,26.35985 11.3076923,26.9433963 C11.3076923,27.5269424 10.8346347,28 10.2510885,28 L1.0566038,28 C0.473057639,28 0,27.5269424 0,26.9433963 L0,18.5108853 C0,17.9161171 0.4821549,17.4339622 1.07692308,17.4339622 Z M26.9230769,16.9056604 C27.5178452,16.9056604 28,17.3878153 28,17.9825835 L28,17.9825835 L28,26.4150942 C28,26.9986405 27.5269424,27.4716981 26.9433963,27.4716981 L26.9433963,27.4716981 L17.7489115,27.4716981 C17.1653653,27.4716981 16.6923077,26.9986405 16.6923077,26.4150942 C16.6923077,25.8315482 17.1653653,25.3584905 17.7489115,25.3584905 L17.7489115,25.3584905 L25.8461538,25.3573527 L25.8461538,17.9825835 C25.8461538,17.3878153 26.3283087,16.9056604 26.9230769,16.9056604 Z M26.9433963,0 C27.5269424,0 28,0.473057639 28,1.0566038 L28,9.48911467 C28,10.0838829 27.5178452,10.5660378 26.9230769,10.5660378 C26.3283087,10.5660378 25.8461538,10.0838829 25.8461538,9.48911467 L25.8483077,3.1481916 L19.495759,9.70888562 C19.0887172,10.1293782 18.417868,10.1402822 17.9973754,9.73324042 L17.9922688,9.72826376 C17.5708779,9.31482358 17.5621646,8.63878569 17.9727599,8.21462222 L23.8796923,2.11434544 L17.7489115,2.11320756 C17.1653653,2.11320756 16.6923077,1.64014992 16.6923077,1.0566038 C16.6923077,0.473057639 17.1653653,0 17.7489115,0 L26.9433963,0 Z M10.2510885,0 C10.8346347,0 11.3076923,0.473057639 11.3076923,1.0566038 C11.3076923,1.64014992 10.8346347,2.11320756 10.2510885,2.11320756 L10.2510885,2.11320756 L2.15384615,2.11434544 L2.15384615,9.48911467 C2.15384615,10.0838829 1.67169125,10.5660378 1.07692308,10.5660378 C0.4821549,10.5660378 0,10.0838829 0,9.48911467 L0,9.48911467 L0,1.0566038 C0,0.473057639 0.473057639,0 1.0566038,0 L1.0566038,0 L10.2510885,0 Z",
+    id: "\u5F62\u72B6",
+    fill: "#666666"
+  }))))) : /*#__PURE__*/React.createElement("span", {
+    className: "kd-modal-expand-icon",
+    onClick: function onClick() {
+      return handleFullScreen('close');
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "1226-\u5173\u95ED\u5168\u5C4F",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(4.000000, 4.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.9569224,17.3691573 L15.9569224,22.6490507 C15.9569224,23.385811 16.0714999,23.9626957 15.336072,23.9626957 C14.6019762,23.9626957 14.6566004,23.385811 14.6566004,22.6490507 L14.6566004,15.9875652 C14.6566004,15.5932053 14.8191407,15.2747863 15.076274,15.0549573 C15.3252286,14.7994658 15.66681,14.6553386 16.0235372,14.6552681 L22.6370601,14.6552681 C23.3711558,14.6552681 23.9520373,14.6073054 23.9520373,15.3427334 C23.9520373,16.0794937 23.3711558,15.9022982 22.6370601,15.9022982 L17.2545798,15.9022982 L15.9569224,17.367825 L15.9569224,17.3691573 Z M8.00977019,17.4064616 L6.7107805,15.9382702 L1.32963251,15.9382702 C0.595536804,15.9382702 0.0146552671,16.116798 0.0146552671,15.3800378 C0.0146552671,14.6446098 0.595536804,14.6939048 1.32963251,14.6939048 L7.94315534,14.6939048 C8.31486623,14.6939048 8.6492728,14.8471189 8.88908626,15.0935939 C9.16260631,15.3252747 9.31724071,15.6678192 9.31009215,16.0262018 L9.31009215,22.6876874 C9.31009215,23.4231154 9.36471634,24 8.63062063,24 C7.89519263,24 8.00977017,23.4231153 8.00977019,22.6863551 L8.00977019,17.4064616 L8.00977019,17.4064616 Z M15.9569224,6.59487065 L17.2559121,8.06172976 L22.6370601,8.06172976 C23.3711558,8.06172976 23.9520373,7.88453425 23.9520373,8.62129455 C23.9520373,9.35539026 23.3711558,9.30742755 22.6370601,9.30742755 L16.0235372,9.30742755 C15.66681,9.30735708 15.3252286,9.16322991 15.076274,8.90773844 C14.8032501,8.675801 14.649122,8.33329396 14.6566004,7.97513047 L14.6566004,1.31364494 C14.6552817,0.578216941 14.6019762,0 15.3347396,0 C16.0701676,0 15.9555901,0.578216941 15.9555901,1.31364494 L15.9555901,6.59487065 L15.9569224,6.59487065 Z M7.9951149,6.59487065 L7.9951149,1.31364494 C7.99378262,0.578216941 7.88053736,0 8.61596536,0 C9.34872876,0 9.29543688,0.578216941 9.29543688,1.31364494 L9.29543688,7.97513047 C9.30291535,8.33329396 9.14878718,8.675801 8.87576331,8.90773844 C8.62648612,9.16356115 8.2843572,9.30771659 7.92716776,9.30742755 L1.31497725,9.30742755 C0.579549251,9.30742755 0,9.35539026 0,8.61996227 C0,7.88453427 0.579549251,8.06172978 1.31497725,8.06172976 L6.69612523,8.06172976 L7.99378262,6.59487065 L7.9951149,6.59487065 Z",
+    id: "\u5F62\u72B6",
+    fill: "#666666"
+  }))))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dataUrl ? /*#__PURE__*/React.createElement(Image, {
+    preview: preview,
+    src: dataUrl,
+    title: "\u5220\u9664",
+    operations: !disabled ? [/*#__PURE__*/React.createElement(Icon, {
+      type: "delete",
+      key: "delete",
+      onClick: function onClick() {
+        return handleDelete();
+      }
+    })] : undefined
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: signatureClass,
+    ref: triggerRef,
+    onClick: handleOnClick,
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "edit"
+  }), /*#__PURE__*/React.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign)), /*#__PURE__*/React.createElement(Modal, _extends({
+    width: containerWidth,
+    height: containerHeight,
+    ref: modalRef,
+    className: modalClasses,
+    visible: modalVisible,
+    onOk: handleModalOk,
+    onCancel: handleModalCancel,
+    resizable: true,
+    title: title || (signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.handwrittenSignature),
+    titleIcon: canFullScreen && titleIcon,
+    body: /*#__PURE__*/React.createElement(DrawingBoard, _extends({}, DrawingBoardProps, {
+      ref: modalBodyRef
+    })),
+    footer: footer
+  }, restProps)));
+};
+Signature.displayName = 'Signature';
+export default Signature;

package/es/signature/style/css.js

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

package/es/signature/style/index.css

@@ -0,0 +1,210 @@
+/* -----------  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-signature {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border: 1px dashed #e5e5e5;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: var(--kd-c-signature-bg-color, #fafafa);
+  color: var(--kd-c-signature-color-text, #999999);
+  font-size: var(--kd-c-signature-font-size, 12px);
+  cursor: pointer;
+  border-radius: var(--kd-c-signature-border-radius, var(--kd-g-radius-border, 2px));
+  -webkit-transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.kd-signature:hover {
+  border-color: var(--kd-c-signature-border-color-hover, var(--kd-g-color-theme-5, #87adff));
+  background-color: var(--kd-c-signature-bg-color-hover, var(--kd-g-color-theme-1, #f2f8ff));
+}
+.kd-signature.kd-signature-disabled {
+  cursor: not-allowed;
+  border: 1px solid var(--kd-g-color-border-disabled, #ccc);
+  background: var(--kd-c-signature-bg-color, #fafafa);
+  color: var(--kd-c-signature-color-text, #999999);
+}
+.kd-signature-drawing-board {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e5e5;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background: var(--kd-c-signature-drawing-board-bg-color, #fafafa);
+  position: relative;
+}
+.kd-signature-drawing-board-operation {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  color: #b2b2b2;
+  z-index: 9999;
+}
+.kd-signature-drawing-board-operation > * {
+  cursor: pointer;
+}
+.kd-signature-drawing-board-operation > *:not(:last-child) {
+  margin-right: 13px;
+}
+.kd-signature-drawing-board-operation span:nth-of-type(2) {
+  -webkit-transform: scaleX(-1) !important;
+          transform: scaleX(-1) !important;
+}
+.kd-signature-drawing-board-operation.enabled {
+  color: #666666;
+}
+.kd-signature-drawing-board-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  color: var(--kd-c-signature-board-tip-color, #b2b2b2);
+  font-size: 12px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-signature-modal .kd-modal-header {
+  position: relative;
+}
+.kd-signature-modal-footer .kd-btn:not(:last-child) {
+  margin-right: 12px;
+}
+.kd-signature-modal .kd-modal-expand-icon {
+  position: absolute;
+  right: 43.5px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.kd-signature-modal.kd-signature-modal-fullscreen .kd-modal-container-box {
+  width: 90vw !important;
+  height: 90vh !important;
+  top: 5vh;
+  left: 5vw;
+  -webkit-transform: none !important;
+          transform: none !important;
+}

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

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

package/es/signature/style/index.js

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

package/es/signature/style/index.less

@@ -0,0 +1,95 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@signature-prefix-cls: ~'@{kd-prefix}-signature';
+@signature-board-prefix-cls: ~'@{kd-prefix}-signature-drawing-board';
+
+.@{signature-prefix-cls} {
+  box-sizing: border-box;
+  border: 1px dashed #e5e5e5;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: @signature-bg-color;
+  color: @signature-color-text;
+  font-size: @signature-font-size;
+  cursor: pointer;
+  border-radius: @signature-border-radius;
+  transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
+  &:hover {
+    border-color: @signature-border-color-hover;
+    background-color: @signature-bg-color-hover;
+  }
+}
+.@{signature-prefix-cls}.@{signature-prefix-cls}-disabled {
+  cursor: not-allowed;
+  border: 1px solid @color-border-disabled;
+  background: @signature-bg-color;
+  color: @signature-color-text;
+}
+
+.@{signature-board-prefix-cls} {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e5e5;
+  box-sizing: border-box;
+  background: @signature-drawing-board-bg-color;
+  position: relative;
+  &-operation {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    color: #b2b2b2;
+    z-index: 9999;
+    & > * {
+      cursor: pointer;
+    }
+    & > *:not(:last-child) {
+      margin-right: 13px;
+    }
+    span:nth-of-type(2) {
+      transform: scaleX(-1) !important;
+    }
+  }
+  &-operation.enabled {
+    color: #666666;
+  }
+  &-tip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: @signature-board-tip-color;
+    font-size: 12px;
+    user-select: none;
+  }
+}
+.@{signature-prefix-cls}-modal {
+  .kd-modal-header {
+    position: relative;
+  }
+  &-footer {
+    .kd-btn:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
+  .kd-modal-expand-icon {
+    position: absolute;
+    right: 43.5px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+.@{signature-prefix-cls}-modal.@{signature-prefix-cls}-modal-fullscreen {
+  .kd-modal-container-box {
+    width: 90vw !important;
+    height: 90vh !important;
+    top: 5vh;
+    left: 5vw;
+    transform: none !important;
+  }
+}

package/es/signature/style/mixin.less

@@ -0,0 +1,6 @@
+@import './token.less';
+
+.signature() {
+  color: @signature-color-text;
+  font-size: @signature-font-size;
+}

package/es/signature/style/token.less

@@ -0,0 +1,22 @@
+@import '../../style/themes/token.less';
+
+@signature-custom-prefix: ~'--@{kd-prefix}-c-signature';
+
+// color
+@signature-color-text: var(~'@{signature-custom-prefix}-color-text', #999999);
+@signature-bg-color: var(~'@{signature-custom-prefix}-bg-color', #fafafa);
+@signature-border-color: var(~'@{signature-custom-prefix}-border-color-hover', @color-theme-hover);
+@signature-border-color-hover: var(~'@{signature-custom-prefix}-border-color-hover', @color-theme-hover);
+@signature-border-color-disabled: var(~'@{signature-custom-prefix}-border-color-disabled', @color-border-disabled);
+@signature-bg-color-hover: var(~'@{signature-custom-prefix}-bg-color-hover', @color-theme-1);
+@signature-drawing-board-bg-color:var(~'@{signature-custom-prefix}-drawing-board-bg-color', #fafafa);
+@signature-board-tip-color: var(~'@{signature-custom-prefix}-board-tip-color', #b2b2b2);
+// font
+@signature-font-size: var(~'@{signature-custom-prefix}-font-size', 12px);
+
+// motion
+@signature-transition-duration: var(~'@{signature-custom-prefix}-motion-duration', @duration-promptly);
+
+// radius
+@signature-border-radius: var(~'@{signature-custom-prefix}-border-radius', @radius-border);
+