@kdcloudjs/kdesign 1.7.37 → 1.7.40

package/es/input-number/inputNumber.js

@@ -58,6 +58,10 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceUpdate = _useState4[0],
+    setForceUpdate = _useState4[1];
   var inputStatus = useRef({
     isHandleChange: false,
     inputFocused: false
@@ -109,10 +113,11 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   var handleChange = function handleChange(event) {
     inputStatus.current.isHandleChange = true;
     var legalNumber = verifiValue(event.target.value);
+    updateSelectionRangePosition(event);
     if (legalNumber === false) {
+      setForceUpdate(forceUpdate + 1);
       return false;
     }
-    updateSelectionRangePosition(event);
     value === undefined && setInputValue(legalNumber);
     onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
@@ -151,23 +156,23 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       if (decimalValueLength <= decimalLength && integerValueLength <= digitLength - decimalLength) {
         resultNumerical = numerical;
       } else if (integerValueLength > digitLength - decimalLength) {
-        var _context;
-        resultNumerical = _concatInstanceProperty(_context = "".concat(sign)).call(_context, integerValue.substr(0, digitLength - decimalLength));
+        var _context, _context2;
+        resultNumerical = mustInPrecisionScope ? inputValue : _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(sign)).call(_context2, integerValue.substr(0, digitLength - decimalLength))).call(_context, decimalValue ? '.' + decimalValue : '');
       } else if (decimalValueLength > decimalLength) {
-        var _context2, _context3;
-        resultNumerical = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(sign)).call(_context3, integerValue, ".")).call(_context2, decimalValue.substr(0, decimalLength));
+        var _context3, _context4;
+        resultNumerical = mustInPrecisionScope ? inputValue : _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(sign)).call(_context4, integerValue, ".")).call(_context3, decimalValue.substr(0, decimalLength));
       }
     } else if (typeof decimalLength !== 'number' && typeof digitLength === 'number') {
       if (integerValueLength >= digitLength) {
-        var _context4;
-        resultNumerical = _concatInstanceProperty(_context4 = "".concat(sign)).call(_context4, integerValue.substr(0, digitLength));
+        var _context5;
+        resultNumerical = _concatInstanceProperty(_context5 = "".concat(sign)).call(_context5, integerValue.substr(0, digitLength));
       } else {
-        var _context5, _context6, _context7;
-        resultNumerical = decimalValueLength ? _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(sign)).call(_context6, integerValue, ".")).call(_context5, decimalValue.substr(0, digitLength - integerValueLength)) : _concatInstanceProperty(_context7 = "".concat(sign)).call(_context7, integerValue);
+        var _context6, _context7, _context8;
+        resultNumerical = decimalValueLength ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "".concat(sign)).call(_context7, integerValue, ".")).call(_context6, decimalValue.substr(0, digitLength - integerValueLength)) : _concatInstanceProperty(_context8 = "".concat(sign)).call(_context8, integerValue);
       }
     } else if (typeof decimalLength === 'number' && typeof digitLength !== 'number') {
-      var _context8, _context9, _context10;
-      resultNumerical = decimalValueLength ? _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "".concat(sign)).call(_context9, integerValue, ".")).call(_context8, decimalValue.substr(0, decimalLength)) : _concatInstanceProperty(_context10 = "".concat(sign)).call(_context10, integerValue);
+      var _context9, _context10, _context11;
+      resultNumerical = decimalValueLength ? _concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "".concat(sign)).call(_context10, integerValue, ".")).call(_context9, decimalValue.substr(0, decimalLength)) : _concatInstanceProperty(_context11 = "".concat(sign)).call(_context11, integerValue);
     } else {
       resultNumerical = numerical;
     }
@@ -197,13 +202,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     });
   };
   var handleKeyDown = function handleKeyDown(event) {
-    var _context11;
+    var _context12;
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     if (!stepOption || props.disabled || props.readOnly) {
       return;
     }
     var keyCode = event.keyCode;
-    if (_includesInstanceProperty(_context11 = [38, 40]).call(_context11, keyCode)) {
+    if (_includesInstanceProperty(_context12 = [38, 40]).call(_context12, keyCode)) {
       event.preventDefault();
       handleStepChang(keyCode === 38 ? 'plus' : 'minus');
     }
@@ -310,7 +315,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   }, [inputValue, formatter]);
   var updateSelectionRangePosition = useSelectionRange({
     inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
-    inputValue: displayedInputValue
+    inputValue: displayedInputValue,
+    forceUpdate: forceUpdate
   });
   return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
     ref: inputNumberRef,

package/es/input-number/useSelectionRange.d.ts

@@ -1,4 +1,5 @@
-export default function useSelectionRange({ inputElement, inputValue, }: {
+export default function useSelectionRange({ inputElement, inputValue, forceUpdate, }: {
     inputElement: HTMLInputElement;
     inputValue: string;
+    forceUpdate: number;
 }): (event: any) => void;

package/es/input-number/useSelectionRange.js

@@ -2,7 +2,8 @@ import { useRef, useLayoutEffect } from 'react';
 import isNumber from 'lodash/isNumber';
 export default function useSelectionRange(_ref) {
   var inputElement = _ref.inputElement,
-    inputValue = _ref.inputValue;
+    inputValue = _ref.inputValue,
+    forceUpdate = _ref.forceUpdate;
   var refSelectionPosition = useRef();
   useLayoutEffect(function () {
     var position = refSelectionPosition.current;
@@ -10,7 +11,7 @@ export default function useSelectionRange(_ref) {
       var start = Math.max(0, inputValue.length - position);
       inputElement.setSelectionRange(start, start);
     }
-  }, [inputValue]);
+  }, [inputValue, forceUpdate]);
   return function (event) {
     var _event$target = event.target,
       end = _event$target.selectionEnd,

package/es/modal/modal.d.ts

@@ -43,6 +43,7 @@ export interface IModalProps {
     width?: number;
     showline?: boolean;
     bounds?: DraggableBounds | string | false;
+    overroll?: boolean;
     onDragStart?: DraggableEventHandler;
     onDrag?: DraggableEventHandler;
     onDragStop?: DraggableEventHandler;

package/es/modal/modal.js

@@ -27,7 +27,7 @@ import { useHideDocumentScrollBar } from '../_utils/hooks';
 export var ConfirmModalTypes = ['confirm', 'normal'];
 export var ModalTypes = tuple('confirm', 'warning', 'error', 'normal');
 var InternalModal = function InternalModal(props, ref) {
-  var _classNames3, _classNames4, _context2, _context3;
+  var _classNames3, _classNames4, _context2, _context3, _context4;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -70,7 +70,8 @@ var InternalModal = function InternalModal(props, ref) {
     onDrag = modalProps.onDrag,
     onDragStop = modalProps.onDragStop,
     bounds = modalProps.bounds,
-    others = __rest(modalProps, ["body", "bodyClassName", "bodyStyle", "cancelButtonProps", "cancelText", "className", "closable", "closeIcon", "destroyOnClose", "draggable", "focusTriggerAfterClose", "footer", "footerClassName", "footerStyle", "footerBtnOrder", "getContainer", "height", "keyboard", "mask", "maskClosable", "maskStyle", "maskClassName", "okButtonProps", "okText", "onCancel", "onOk", "prefixCls", "title", "titleIcon", "type", "visible", "width", "showline", "onDragStart", "onDrag", "onDragStop", "bounds"]);
+    overroll = modalProps.overroll,
+    others = __rest(modalProps, ["body", "bodyClassName", "bodyStyle", "cancelButtonProps", "cancelText", "className", "closable", "closeIcon", "destroyOnClose", "draggable", "focusTriggerAfterClose", "footer", "footerClassName", "footerStyle", "footerBtnOrder", "getContainer", "height", "keyboard", "mask", "maskClosable", "maskStyle", "maskClassName", "okButtonProps", "okText", "onCancel", "onOk", "prefixCls", "title", "titleIcon", "type", "visible", "width", "showline", "onDragStart", "onDrag", "onDragStop", "bounds", "overroll"]);
   var isForceController = visible !== undefined;
   var _useState = useState(isForceController ? visible : true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -78,6 +79,7 @@ var InternalModal = function InternalModal(props, ref) {
     setInnerVisible = _useState2[1]; // 需要根据visible来判断，不能一开始为true再去设置false
   var previousActiveElement = useRef(null);
   var innerRef = useRef(null);
+  var wrapperRef = useRef(null);
   var containerRef = ref || innerRef;
   var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
   devWarning(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
@@ -185,11 +187,16 @@ var InternalModal = function InternalModal(props, ref) {
       proxyCloseModal(onCancel);
     }
   }, [proxyCloseModal, onCancel, maskClosable]);
+  var handleWrapperClick = function handleWrapperClick(e) {
+    if (wrapperRef.current === e.target) {
+      handleMaskClick();
+    }
+  };
   var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
   var modalClasses = classNames(modalPrefixCls, className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container"), true), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
   var headerClass = "".concat(modalPrefixCls, "-header");
   var container = /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),
+    className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer && !overroll), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),
     style: {
       width: width,
       height: height
@@ -239,8 +246,18 @@ var InternalModal = function InternalModal(props, ref) {
     onClick: handleMaskClick,
     className: classNames(maskClassName, _defineProperty({}, "".concat(modalPrefixCls, "-mask"), true)),
     style: maskStyle
-  }), /*#__PURE__*/React.createElement(Draggable, {
-    defaultPosition: defaultPosition,
+  }), overroll ? /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    className: classNames(_defineProperty({}, "".concat(modalPrefixCls, "-wrapper"), modalContainer && ((isForceController ? visible : innerVisible) || !destroyOnClose))),
+    ref: wrapperRef,
+    onClick: handleWrapperClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(modalPrefixCls, "-dialog")
+  }, /*#__PURE__*/React.createElement(Draggable, {
+    defaultPosition: {
+      x: 0,
+      y: 0
+    },
     handle: ".".concat(headerClass),
     disabled: !draggable,
     onStart: handleDragStart,
@@ -248,6 +265,15 @@ var InternalModal = function InternalModal(props, ref) {
     onStop: onDragStop,
     bounds: bounds,
     cancel: _concatInstanceProperty(_context3 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context3, modalPrefixCls, "-close-icon")
+  }, container))) : /*#__PURE__*/React.createElement(Draggable, {
+    defaultPosition: defaultPosition,
+    handle: ".".concat(headerClass),
+    disabled: !draggable,
+    onStart: handleDragStart,
+    onDrag: onDrag,
+    onStop: onDragStop,
+    bounds: bounds,
+    cancel: _concatInstanceProperty(_context4 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context4, modalPrefixCls, "-close-icon")
   }, container));
   var renderComp = ((isForceController ? visible : innerVisible) || !destroyOnClose) && comp;
   if (modalContainer && renderComp) return /*#__PURE__*/ReactDOM.createPortal(renderComp, modalContainer);

package/es/modal/style/index.css

@@ -252,6 +252,27 @@
 .kd-modal-margin-btn {
   margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
 }
+.kd-modal-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  text-align: center;
+}
+.kd-modal-wrapper::before {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  vertical-align: middle;
+  content: '';
+}
+.kd-modal-dialog {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100vw);
+}
 .kd-modal-showline .kd-modal-header {
   border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }

package/es/modal/style/index.less

@@ -29,15 +29,13 @@
     }
 
     &-hidden {
-      display: none
+      display: none;
     }
   }
   &-mask {
     .overlay(@modal-mask-color-background, 0);
   }
-  // &-mask + &-container-box {
 
-  // }
   &-has-container-box {
     position: fixed;
     left: 50%;
@@ -116,16 +114,34 @@
       color: @modal-footer-font-color;
       flex-shrink: 0;
     }
-    // each(@modal-footer-type-set, {
-    //   .@{modal-prefix-cls}-@{key}-footer {
-    //     justify-content: @value;
-    //   }
-    // });
   }
 
   &-margin-btn {
     margin-right: @modal-footer-button-spacing;
   }
+
+  &-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    text-align: center;
+
+    &::before {
+      display: inline-block;
+      width: 0;
+      height: 100%;
+      vertical-align: middle;
+      content: '';
+    }
+  }
+  &-dialog {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: calc(100vw);
+  }
 }
 
 .@{modal-prefix-cls}-showline {
@@ -135,4 +151,4 @@
   .@{modal-prefix-cls}-footer {
     border-top: @modal-border-width solid @modal-border-color;
   }
-}
+}

package/es/qr-code/index.d.ts

@@ -0,0 +1,3 @@
+import QRCode from './qr-code';
+export * from './qr-code';
+export default QRCode;

package/es/qr-code/index.js

@@ -0,0 +1,3 @@
+import QRCode from './qr-code';
+export * from './qr-code';
+export default QRCode;

package/es/qr-code/qr-code.d.ts

@@ -0,0 +1,42 @@
+import React, { CSSProperties, FunctionComponentElement } from 'react';
+export declare type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
+export declare type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
+export declare const QRCodeTypes: ["canvas", "svg"];
+export declare type QRCodeType = typeof QRCodeTypes[number];
+export declare const QRCodeStatus: ["active", "expired", "loading"];
+export declare type QRCodeStatus = typeof QRCodeStatus[number];
+export declare const QRCodeErrorLevels: ["L", "M", "Q", "H"];
+export declare type QRCodeErrorLevel = typeof QRCodeErrorLevels[number];
+interface ImageSettings {
+    src: string;
+    height: number;
+    width: number;
+    excavate: boolean;
+    x?: number;
+    y?: number;
+}
+export interface QRProps {
+    value: string;
+    type?: QRCodeType;
+    size?: number;
+    style?: CSSProperties;
+    color?: string;
+    bgColor?: string;
+    bordered?: boolean;
+    imageSettings?: ImageSettings;
+}
+export interface QRCodeProps extends QRProps {
+    className?: string;
+    prefixCls?: string;
+    icon?: string;
+    iconSize?: number;
+    status?: QRCodeStatus;
+    errorLevel?: QRCodeErrorLevel;
+    children?: React.ReactNode;
+    onRefresh?: () => void;
+}
+declare const QRCode: {
+    (props: QRCodeProps): FunctionComponentElement<QRCodeProps>;
+    displayName: string;
+};
+export default QRCode;

package/es/qr-code/qr-code.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
+import Spin from '../spin';
+import Button from '../button';
+import Icon from '../icon';
+import devWarning from '../_utils/devwarning';
+import { tuple } from '../_utils/type';
+export var QRCodeTypes = tuple('canvas', 'svg');
+export var QRCodeStatus = tuple('active', 'expired', 'loading');
+export var QRCodeErrorLevels = tuple('L', 'M', 'Q', 'H');
+var QRCode = function QRCode(props) {
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var qrCodeProps = getCompProps('QRCode', userDefaultProps, props);
+  var value = qrCodeProps.value,
+    size = qrCodeProps.size,
+    status = qrCodeProps.status,
+    style = qrCodeProps.style,
+    type = qrCodeProps.type,
+    errorLevel = qrCodeProps.errorLevel,
+    color = qrCodeProps.color,
+    onRefresh = qrCodeProps.onRefresh,
+    icon = qrCodeProps.icon,
+    _qrCodeProps$iconSize = qrCodeProps.iconSize,
+    iconSize = _qrCodeProps$iconSize === void 0 ? 24 : _qrCodeProps$iconSize,
+    bgColor = qrCodeProps.bgColor,
+    _qrCodeProps$bordered = qrCodeProps.bordered,
+    bordered = _qrCodeProps$bordered === void 0 ? true : _qrCodeProps$bordered;
+  var className = qrCodeProps.className,
+    customPrefixcls = qrCodeProps.prefixCls;
+  var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
+  var qrCodeClass = classNames(qrCodePrefixCls, className, _defineProperty({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
+  var gap = 8;
+  var containerSize = size + gap * 2 + 2;
+  devWarning(!value === false, 'QRCode', 'need to receive `value` props');
+  devWarning(icon && errorLevel === 'L', 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
+  var imageSettings = {
+    src: icon,
+    x: undefined,
+    y: undefined,
+    height: iconSize,
+    width: iconSize,
+    excavate: true
+  };
+  var codeProps = {
+    value: value,
+    size: size,
+    level: errorLevel,
+    fgColor: color,
+    imageSettings: icon ? imageSettings : undefined
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: qrCodeClass,
+    style: _extends(_extends({}, style), {
+      width: "".concat(containerSize, "px"),
+      height: "".concat(containerSize, "px"),
+      backgroundColor: bgColor
+    })
+  }, status !== 'active' && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(qrCodePrefixCls, "-mask")
+  }, status === 'loading' && /*#__PURE__*/React.createElement(Spin, null), status === 'expired' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: "".concat(qrCodePrefixCls, "-expired")
+  }, "\u4E8C\u7EF4\u7801\u8FC7\u671F"), onRefresh && /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "refresh"
+    }),
+    type: "text",
+    onClick: onRefresh,
+    size: "middle"
+  }, "\u70B9\u51FB\u5237\u65B0"))), type === 'canvas' ? /*#__PURE__*/React.createElement(QRCodeCanvas, _extends({}, codeProps)) : /*#__PURE__*/React.createElement(QRCodeSVG, _extends({}, codeProps)));
+};
+QRCode.displayName = 'QRCode';
+export default QRCode;

package/es/qr-code/style/css.js

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

package/es/qr-code/style/index.css

@@ -0,0 +1,154 @@
+/* -----------  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-qrcode {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+  border-radius: var(--kd-c-qrcode-border-radius, 2px);
+  border: var(--kd-c-qrcode-size-border, 1px) solid var(--kd-c-qrcode-color-border, rgba(5, 5, 5, 0.06));
+  padding: var(--kd-c-qrcode-spacing-padding-horizontal, 8px);
+  font-size: var(--kd-c-qrcode-font-size, 12px);
+  list-style: none;
+  overflow: hidden;
+}
+.kd-qrcode-expired {
+  margin-bottom: var(--kd-c-qrcode-spacing-margin-vertical, 4px);
+}
+.kd-qrcode-mask {
+  position: absolute;
+  z-index: 10;
+  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;
+  width: 100%;
+  height: 100%;
+  color: var(--kd-c-qrcode-color-text, #111111);
+  background: var(--kd-c-qrcode-color-background, rgba(255, 255, 255, 0.96));
+  text-align: center;
+}
+.kd-qrcode-borderless {
+  border: none;
+}

package/es/qr-code/style/index.d.ts

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

package/es/qr-code/style/index.js

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

package/es/qr-code/style/index.less

@@ -0,0 +1,42 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@qrcode-prefix-cls: ~'@{kd-prefix}-qrcode';
+@qrcode-prefix-icon-cls: ~'@{kd-prefix}-icon';
+@--kd-c-spin-page-dot-spin-sizing-square: 30px;
+
+.@{qrcode-prefix-cls} {
+  .qrcode;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  border-radius: @qrcode-border-radius;
+  border: @qrcode-size-boder solid @qrcode-color-border;
+  padding: @qrcode-spacing-padding-horizontal;
+  font-size: @qrcode-font-size;
+  list-style: none;
+  overflow: hidden;
+
+  &-expired{
+    margin-bottom: @qrcode-spacing-margin-vertical;
+  }
+
+  &-mask{
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: @qrcode-color-text;
+    background: @qrcode-color-background;
+    text-align: center;
+  }
+  &-borderless{
+    border: none;
+  }
+}

package/es/qr-code/style/mixin.less

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