@kdcloudjs/kdesign 1.7.40 → 1.7.41

package/es/select/index.d.ts

@@ -5,4 +5,5 @@ interface CompoundedComponent extends React.ForwardRefExoticComponent<ISelectPro
     Option: typeof Option;
 }
 declare const Select: CompoundedComponent;
+export * from './interface';
 export default Select;

package/es/select/index.js

@@ -2,4 +2,5 @@ import InternalSelect from './select';
 import Option from './option';
 var Select = InternalSelect;
 Select.Option = Option;
+export * from './interface';
 export default Select;

package/lib/button/index.d.ts

@@ -3,5 +3,6 @@ import Dropdown from './group';
 declare const Button: import("react").ForwardRefExoticComponent<import("./button").IButtonProps & import("react").RefAttributes<unknown>> & {
     Dropdown: typeof Dropdown;
 };
-export { ButtonType, IButtonProps } from './button';
+export { ButtonType, IButtonProps, ButtonSize, ButtonShape, ButtonIconPlace, ButtonHTMLType } from './button';
+export { OverlayType, ButtonGroupType } from './group';
 export default Button;

package/lib/carousel/index.d.ts

@@ -1,7 +1,7 @@
-import Carousel, { CarouselProps } from './carousel';
+import Carousel, { CarouselProps, DotPositionType, EffectType } from './carousel';
 import { Slidebar } from './slidebar';
 import { SlideList } from './slideList';
 import { FadeList } from './fadeList';
 export * from './carousel';
-export { CarouselProps, Slidebar, FadeList, SlideList };
+export { CarouselProps, DotPositionType, EffectType, Slidebar, FadeList, SlideList };
 export default Carousel;

package/lib/city-picker/index.d.ts

@@ -1,3 +1,5 @@
 import CityPicker from './city-picker';
+import { City, BorderType, Size, Type, CityList, CityPickerProps, ICityPickerOptionProps } from './interface';
+export { City, BorderType, Size, Type, CityList, CityPickerProps, ICityPickerOptionProps };
 export * from './city-picker';
 export default CityPicker;

package/lib/collapse/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { CollapseProps } from './collapse';
+import { CollapseProps, IconPositionType } from './collapse';
 import Panel from './panel';
 export { PanelProps } from './panel';
 interface CompoundedComponent extends React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>> {
     Panel: typeof Panel;
 }
 declare const Collapse: CompoundedComponent;
-export { Panel };
+export { Panel, IconPositionType };
 export default Collapse;

package/lib/config-provider/compDefaultProps.d.ts

@@ -192,6 +192,7 @@ declare const compDefaultProps: {
         okButtonProps: {};
         showline: boolean;
         overroll: boolean;
+        resizable: boolean;
     };
     Menu: {
         mode: string;

package/lib/config-provider/compDefaultProps.js

@@ -207,7 +207,8 @@ var compDefaultProps = {
     cancelButtonProps: {},
     okButtonProps: {},
     showline: true,
-    overroll: false
+    overroll: false,
+    resizable: false
   },
   Menu: {
     mode: 'vertical',

package/lib/input/TextArea.js

@@ -82,6 +82,10 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     showNumberMark = _useState6[0],
     setShowNumberMark = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    numberMarkError = _useState8[0],
+    setNumberMarkError = _useState8[1];
   var resizeTextarea = (0, _react.useCallback)(function () {
     if (!autoSize || !textareaRef.current) {
       return;
@@ -129,21 +133,25 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     onChange && onChange(event);
   };
   var renderNumberMark = function renderNumberMark() {
-    var enteredLength = value ? value.length : 0;
-    if (enteredLength >= maxLength) {
-      enteredLength = maxLength;
-    }
-    if (count && showNumberMark && !disabled && maxLength !== '' && maxLength >= 0) {
-      var countClass = (0, _classnames.default)("".concat(textAreaPrefixCls, "-textarea-mark"), (0, _defineProperty2.default)({}, "".concat(textAreaPrefixCls, "-textarea-mark-inner"), countPosition === 'inner'));
+    if (count && (showNumberMark || numberMarkError) && !disabled && maxLength !== '' && maxLength >= 0) {
+      var _classNames;
+      var countClass = (0, _classnames.default)("".concat(textAreaPrefixCls, "-textarea-mark"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(textAreaPrefixCls, "-textarea-mark-inner"), countPosition === 'inner'), (0, _defineProperty2.default)(_classNames, "".concat(textAreaPrefixCls, "-textarea-mark-error"), numberMarkError), _classNames));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: countClass
-      }, enteredLength, "/", maxLength);
+      }, value ? value.length : 0, "/", maxLength);
     }
     return null;
   };
   (0, _react.useEffect)(function () {
     resizeTextarea();
   }, [value, resizeTextarea]);
+  (0, _react.useEffect)(function () {
+    if (value && maxLength && value.length > maxLength) {
+      setNumberMarkError(true);
+    } else {
+      setNumberMarkError(false);
+    }
+  }, [value]);
   (0, _react.useEffect)(function () {
     if (propsValue !== undefined) {
       setValue(propsValue);
@@ -185,7 +193,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
+      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error' || numberMarkError), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/lib/input/style/index.css

@@ -215,6 +215,9 @@ textarea {
   bottom: 5px;
   right: 8px;
 }
+.kd-input-textarea-mark-error {
+  color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
+}
 .kd-input-no-resize {
   resize: none;
 }

package/lib/input/style/index.less

@@ -43,12 +43,16 @@ textarea {
       font-size: @input-small-font-size-inner;
       line-height: 18px;
       background-color: #fff;
-    }
 
-    &-mark-inner {
-      top: auto;
-      bottom: 5px;
-      right: 8px;
+      &-inner {
+        top: auto;
+        bottom: 5px;
+        right: 8px;
+      }
+
+      &-error {
+        color: @input-error-color;
+      }
     }
   }
 

package/lib/modal/modal.d.ts

@@ -44,6 +44,10 @@ export interface IModalProps {
     showline?: boolean;
     bounds?: DraggableBounds | string | false;
     overroll?: boolean;
+    resizable?: boolean;
+    onResizeStart?: (event: MouseEvent) => void;
+    onResize?: (event: MouseEvent) => void;
+    onResizeStop?: (event: MouseEvent) => void;
     onDragStart?: DraggableEventHandler;
     onDrag?: DraggableEventHandler;
     onDragStop?: DraggableEventHandler;

package/lib/modal/modal.js

@@ -40,8 +40,30 @@ var ConfirmModalTypes = ['confirm', 'normal'];
 exports.ConfirmModalTypes = ConfirmModalTypes;
 var ModalTypes = (0, _type.tuple)('confirm', 'warning', 'error', 'normal');
 exports.ModalTypes = ModalTypes;
+var DragDirection;
+(function (DragDirection) {
+  DragDirection["N"] = "n";
+  DragDirection["E"] = "e";
+  DragDirection["S"] = "s";
+  DragDirection["W"] = "w";
+  DragDirection["NE"] = "ne";
+  DragDirection["NW"] = "nw";
+  DragDirection["SE"] = "se";
+  DragDirection["SW"] = "sw";
+})(DragDirection || (DragDirection = {}));
+var initPosition = {
+  initialX: 0,
+  initialY: 0,
+  initialWidth: 0,
+  initialHeight: 0,
+  top: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  type: null
+};
 var InternalModal = function InternalModal(props, ref) {
-  var _classNames3, _classNames4, _context2, _context3, _context4;
+  var _classNames3, _classNames4, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -85,7 +107,8 @@ var InternalModal = function InternalModal(props, ref) {
     onDragStop = modalProps.onDragStop,
     bounds = modalProps.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"]);
+    resizable = modalProps.resizable,
+    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", "resizable"]);
   var isForceController = visible !== undefined;
   var _useState = (0, _react.useState)(isForceController ? visible : true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -106,6 +129,16 @@ var InternalModal = function InternalModal(props, ref) {
     }
     modalContainer = document.body;
   }
+  var _useState3 = (0, _react.useState)(modalContainer && !overroll ? {
+      x: -(width / 2),
+      y: -(height / 2)
+    } : {
+      x: 0,
+      y: 0
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
   (0, _hooks.useHideDocumentScrollBar)(isForceController ? !!visible : !!innerVisible, modalContainer === document.body, !!mask);
   var closeModal = (0, _react.useCallback)(function () {
     setInnerVisible(false);
@@ -196,6 +229,153 @@ var InternalModal = function InternalModal(props, ref) {
       document.body.removeEventListener('keydown', escapeToCloseModal);
     };
   }, [keyboard, escapeToCloseModal, proxyCloseModal, onCancel]);
+  var isResizing = false;
+  var initPositionRef = (0, _react.useRef)(initPosition);
+  var startResize = (0, _react.useCallback)(function (event) {
+    var targetElement = event.target;
+    if (!targetElement.classList.contains("".concat(modalPrefixCls, "-resise-handle")) || !containerRef.current) {
+      return;
+    }
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+      initialWidth = _containerRef$current.width,
+      initialHeight = _containerRef$current.height,
+      top = _containerRef$current.top,
+      left = _containerRef$current.left;
+    initPositionRef.current = {
+      initialX: event.clientX,
+      initialY: event.clientY,
+      initialWidth: initialWidth,
+      initialHeight: initialHeight,
+      top: top,
+      left: left,
+      x: position.x,
+      y: position.y,
+      type: targetElement.dataset.type
+    };
+    event.preventDefault();
+    isResizing = true;
+    if (overroll && wrapperRef.current) {
+      wrapperRef.current.classList.add("".concat(modalPrefixCls, "-wrapper-resizable"));
+      setPosition({
+        x: left,
+        y: top
+      });
+      initPositionRef.current.x = left;
+      initPositionRef.current.y = top;
+    }
+    document.addEventListener('mousemove', resize);
+    document.addEventListener('mouseup', stopResize);
+  }, [position]);
+  (0, _react.useEffect)(function () {
+    if (containerRef.current && visible) {
+      containerRef.current.addEventListener('mousedown', startResize);
+    }
+    return function () {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener('mousedown', startResize);
+      }
+    };
+  }, [containerRef, startResize, visible]);
+  var resize = function resize(event) {
+    if (!containerRef.current) return;
+    if (!isResizing || !containerRef.current) return;
+    var _initPositionRef$curr = initPositionRef.current,
+      initialX = _initPositionRef$curr.initialX,
+      initialY = _initPositionRef$curr.initialY,
+      initialHeight = _initPositionRef$curr.initialHeight,
+      initialWidth = _initPositionRef$curr.initialWidth,
+      y = _initPositionRef$curr.y,
+      x = _initPositionRef$curr.x,
+      type = _initPositionRef$curr.type;
+    var curNHeight = initialY - event.clientY;
+    var curSHeight = -curNHeight;
+    var curEWidth = event.clientX - initialX;
+    var curWWidth = -curEWidth;
+    switch (type) {
+      case DragDirection.N:
+        {
+          containerRef.current.style.height = "".concat(curNHeight + initialHeight, "px");
+          setPosition(function (pre) {
+            return {
+              y: y - curNHeight,
+              x: pre.x
+            };
+          });
+          break;
+        }
+      case DragDirection.E:
+        {
+          containerRef.current.style.width = "".concat(curEWidth + initialWidth, "px");
+          break;
+        }
+      case DragDirection.S:
+        {
+          containerRef.current.style.height = "".concat(curSHeight + initialHeight, "px");
+          break;
+        }
+      case DragDirection.W:
+        {
+          containerRef.current.style.width = "".concat(curWWidth + initialWidth, "px");
+          setPosition(function (pre) {
+            return {
+              y: pre.y,
+              x: x - curWWidth
+            };
+          });
+          break;
+        }
+      case DragDirection.NE:
+        {
+          containerRef.current.style.height = "".concat(curNHeight + initialHeight, "px");
+          containerRef.current.style.width = "".concat(curEWidth + initialWidth, "px");
+          setPosition(function (pre) {
+            return {
+              y: y - curNHeight,
+              x: pre.x
+            };
+          });
+          break;
+        }
+      case DragDirection.NW:
+        {
+          containerRef.current.style.height = "".concat(curNHeight + initialHeight, "px");
+          containerRef.current.style.width = "".concat(curWWidth + initialWidth, "px");
+          setPosition({
+            y: y - curNHeight,
+            x: x - curWWidth
+          });
+          break;
+        }
+      case DragDirection.SE:
+        {
+          containerRef.current.style.height = "".concat(curSHeight + initialHeight, "px");
+          containerRef.current.style.width = "".concat(curEWidth + initialWidth, "px");
+          break;
+        }
+      case DragDirection.SW:
+        {
+          containerRef.current.style.width = "".concat(curWWidth + initialWidth, "px");
+          containerRef.current.style.height = "".concat(curSHeight + initialHeight, "px");
+          setPosition(function (pre) {
+            return {
+              y: pre.y,
+              x: x - curWWidth
+            };
+          });
+          break;
+        }
+      default:
+        {
+          break;
+        }
+    }
+  };
+  var stopResize = function stopResize() {
+    isResizing = false;
+    initPositionRef.current = initPosition;
+    document.removeEventListener('mousemove', resize);
+    document.removeEventListener('mouseup', stopResize);
+  };
   var handleMaskClick = (0, _react.useCallback)(function () {
     if (maskClosable) {
       proxyCloseModal(onCancel);
@@ -218,7 +398,31 @@ var InternalModal = function InternalModal(props, ref) {
     ref: containerRef,
     tabIndex: -1,
     onKeyDown: enterToCloseModal
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, resizable && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "n",
+    className: (0, _concat.default)(_context2 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context2, modalPrefixCls, "-resise-n")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "e",
+    className: (0, _concat.default)(_context3 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context3, modalPrefixCls, "-resise-e")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "s",
+    className: (0, _concat.default)(_context4 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context4, modalPrefixCls, "-resise-s")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "w",
+    className: (0, _concat.default)(_context5 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context5, modalPrefixCls, "-resise-w")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "ne",
+    className: (0, _concat.default)(_context6 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context6, modalPrefixCls, "-resise-ne")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "se",
+    className: (0, _concat.default)(_context7 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context7, modalPrefixCls, "-resise-se")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "sw",
+    className: (0, _concat.default)(_context8 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context8, modalPrefixCls, "-resise-sw")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-type": "nw",
+    className: (0, _concat.default)(_context9 = "".concat(modalPrefixCls, "-resise-handle ")).call(_context9, modalPrefixCls, "-resise-nw")
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: headerClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(modalPrefixCls, "-title-container")
@@ -237,7 +441,7 @@ var InternalModal = function InternalModal(props, ref) {
     className: (0, _classnames.default)("".concat(modalPrefixCls, "-body"), bodyClassName),
     style: bodyStyle
   }, body), footer !== null && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(modalPrefixCls, "-footer"), (0, _concat.default)(_context2 = "".concat(modalPrefixCls, "-")).call(_context2, type, "-footer"), footerClassName),
+    className: (0, _classnames.default)("".concat(modalPrefixCls, "-footer"), (0, _concat.default)(_context10 = "".concat(modalPrefixCls, "-")).call(_context10, type, "-footer"), footerClassName),
     style: (0, _extends2.default)({
       flexDirection: !footer && (!footerBtnOrder || footerBtnOrder === 'normal') ? 'row' : 'row-reverse'
     }, footerStyle || {})
@@ -247,12 +451,12 @@ var InternalModal = function InternalModal(props, ref) {
   var handleDragStart = function handleDragStart(e, data) {
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e, data);
   };
-  var defaultPosition = modalContainer ? {
-    x: -(width / 2),
-    y: -(height / 2)
-  } : {
-    x: 0,
-    y: 0
+  var handleDrag = function handleDrag(e, ui) {
+    setPosition({
+      x: ui.x,
+      y: ui.y
+    });
+    onDrag === null || onDrag === void 0 ? void 0 : onDrag(e, ui);
   };
   var comp = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: modalClasses
@@ -264,30 +468,27 @@ var InternalModal = function InternalModal(props, ref) {
     tabIndex: -1,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(modalPrefixCls, "-wrapper"), modalContainer && ((isForceController ? visible : innerVisible) || !destroyOnClose))),
     ref: wrapperRef,
-    onClick: handleWrapperClick
+    onMouseDown: handleWrapperClick
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(modalPrefixCls, "-dialog")
   }, /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
-    defaultPosition: {
-      x: 0,
-      y: 0
-    },
+    position: position,
     handle: ".".concat(headerClass),
     disabled: !draggable,
     onStart: handleDragStart,
-    onDrag: onDrag,
+    onDrag: handleDrag,
     onStop: onDragStop,
     bounds: bounds,
-    cancel: (0, _concat.default)(_context3 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context3, modalPrefixCls, "-close-icon")
+    cancel: (0, _concat.default)(_context11 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context11, modalPrefixCls, "-close-icon")
   }, container))) : /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
-    defaultPosition: defaultPosition,
     handle: ".".concat(headerClass),
     disabled: !draggable,
+    position: position,
     onStart: handleDragStart,
-    onDrag: onDrag,
+    onDrag: handleDrag,
     onStop: onDragStop,
     bounds: bounds,
-    cancel: (0, _concat.default)(_context4 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context4, modalPrefixCls, "-close-icon")
+    cancel: (0, _concat.default)(_context12 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context12, modalPrefixCls, "-close-icon")
   }, container));
   var renderComp = ((isForceController ? visible : innerVisible) || !destroyOnClose) && comp;
   if (modalContainer && renderComp) return /*#__PURE__*/_reactDom.default.createPortal(renderComp, modalContainer);

package/lib/modal/style/index.css

@@ -249,6 +249,65 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+.kd-modal-container-box .kd-modal-resise-handle {
+  position: absolute;
+}
+.kd-modal-container-box .kd-modal-resise-n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  cursor: ns-resize;
+}
+.kd-modal-container-box .kd-modal-resise-e {
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 6px;
+  cursor: ew-resize;
+}
+.kd-modal-container-box .kd-modal-resise-s {
+  bottom: 0;
+  left: 0;
+  height: 6px;
+  width: 100%;
+  cursor: ns-resize;
+}
+.kd-modal-container-box .kd-modal-resise-w {
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 6px;
+  cursor: ew-resize;
+}
+.kd-modal-container-box .kd-modal-resise-ne {
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 6px;
+  cursor: nesw-resize;
+}
+.kd-modal-container-box .kd-modal-resise-se {
+  bottom: 0;
+  right: 0;
+  width: 6px;
+  height: 6px;
+  cursor: nwse-resize;
+}
+.kd-modal-container-box .kd-modal-resise-sw {
+  bottom: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  cursor: nesw-resize;
+}
+.kd-modal-container-box .kd-modal-resise-nw {
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  cursor: nwse-resize;
+}
 .kd-modal-margin-btn {
   margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
 }
@@ -268,6 +327,12 @@
   vertical-align: middle;
   content: '';
 }
+.kd-modal-wrapper-resizable {
+  text-align: unset;
+}
+.kd-modal-wrapper-resizable::before {
+  height: 0;
+}
 .kd-modal-dialog {
   display: inline-block;
   vertical-align: middle;

package/lib/modal/style/index.less

@@ -114,6 +114,69 @@
       color: @modal-footer-font-color;
       flex-shrink: 0;
     }
+
+    .@{modal-prefix-cls}-resise {
+      &-handle {
+        position: absolute;
+      }
+
+      &-n {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        cursor: ns-resize;
+      }
+      &-e {
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 6px;
+        cursor: ew-resize;
+      }
+      &-s {
+        bottom: 0;
+        left: 0;
+        height: 6px;
+        width: 100%;
+        cursor: ns-resize;
+      }
+      &-w {
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 6px;
+        cursor: ew-resize;
+      }
+      &-ne {
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 6px;
+        cursor: nesw-resize;
+      }
+      &-se {
+        bottom: 0;
+        right: 0;
+        width: 6px;
+        height: 6px;
+        cursor: nwse-resize;
+      }
+      &-sw {
+        bottom: 0;
+        left: 0;
+        width: 6px;
+        height: 6px;
+        cursor: nesw-resize;
+      }
+      &-nw {
+        top: 0;
+        left: 0;
+        width: 6px;
+        height: 6px;
+        cursor: nwse-resize;
+      }
+    }
   }
 
   &-margin-btn {
@@ -136,6 +199,13 @@
       vertical-align: middle;
       content: '';
     }
+
+    &-resizable {
+      text-align: unset;
+      &::before {
+        height: 0;
+      }
+    }
   }
   &-dialog {
     display: inline-block;