@douyinfe/semi-foundation 2.69.1-alpha.0 → 2.69.2

package/datePicker/yearAndMonthFoundation.ts

@@ -105,9 +105,9 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
         const month = copy(currentMonth);
         month[panelType] = item.month;
 
-        // make sure the right panel time is always less than the left panel time
+        // Make sure the time on the right panel is always greater than or equal to the time on the left panel
         if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
-            month[right] = item.month + 1;
+            month[right] = item.month ;
         } 
 
         this._adapter.setCurrentMonth(month);
@@ -121,8 +121,19 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
         const { disabledDate, locale } = this._adapter.getProps();
         const { months, currentMonth } = this._adapter.getStates();
 
+        const oppositeType = panelType === strings.PANEL_TYPE_LEFT ? 'right' : 'left';
+
         const currentDate = setYear(Date.now(), item.year);
         const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
+        // whether the date on the opposite is legal
+        const isOppositeMonthDisabled = disabledDate(setMonth(setYear(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));
+
+        if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
+            // all panel Date is legal
+            return;
+        }
+        let finalYear = year;
+        let finalMonth = currentMonth;
         if (isCurrentMonthDisabled) {
             const currentIndex = months.findIndex(({ month }) => month === currentMonth[panelType]);
             let validMonth: typeof months[number];
@@ -131,15 +142,24 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
             if (!validMonth) {
                 validMonth = months.slice(0, currentIndex).find(({ month }) => !disabledDate(setMonth(currentDate, month - 1)));
             }
-            if (validMonth) {
-                const month = copy(currentMonth);
-                month[panelType] = validMonth.month;
-
-                // change year and month same time
-                this._adapter.setCurrentYearAndMonth(year, month);
-                this._adapter.notifySelectYearAndMonth(year, month);
+            if (validMonth && !isOppositeMonthDisabled) {
+                // only currentPanel Date is illegal
+                // just need to modify the month of the current panel
+                finalMonth[panelType] = validMonth.month; 
+            } else if (validMonth && isOppositeMonthDisabled) {
+                // all panel Date is illegal
+                // change the value to the legal value calculated by the current panel
+                finalYear = { 'left': item.year, 'right': item.year };
+                finalMonth = { 'left': validMonth.month, 'right': validMonth.month };
             }
+        } else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
+            // only opposite panel Date is illegal
+            // change the value to the legal value in the current panel
+            finalYear = { 'left': item.year, 'right': item.year };
+            finalMonth = { 'left': currentMonth[panelType], 'right': currentMonth[panelType] };
         }
+        this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
+        this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
     }
 
     backToMain() {

package/lib/cjs/datePicker/yearAndMonthFoundation.js

@@ -55,9 +55,9 @@ class YearAndMonthFoundation extends _foundation.default {
     const right = _constants.strings.PANEL_TYPE_RIGHT;
     const month = (0, _fastCopy.default)(currentMonth);
     month[panelType] = item.month;
-    // make sure the right panel time is always less than the left panel time
+    // Make sure the time on the right panel is always greater than or equal to the time on the left panel
     if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
-      month[right] = item.month + 1;
+      month[right] = item.month;
     }
     this._adapter.setCurrentMonth(month);
     this._adapter.notifySelectMonth(month);
@@ -74,8 +74,17 @@ class YearAndMonthFoundation extends _foundation.default {
       months,
       currentMonth
     } = this._adapter.getStates();
+    const oppositeType = panelType === _constants.strings.PANEL_TYPE_LEFT ? 'right' : 'left';
     const currentDate = (0, _dateFns.setYear)(Date.now(), item.year);
     const isCurrentMonthDisabled = disabledDate((0, _dateFns.setMonth)(currentDate, currentMonth[panelType] - 1));
+    // whether the date on the opposite is legal
+    const isOppositeMonthDisabled = disabledDate((0, _dateFns.setMonth)((0, _dateFns.setYear)(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));
+    if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
+      // all panel Date is legal
+      return;
+    }
+    let finalYear = year;
+    let finalMonth = currentMonth;
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
@@ -99,14 +108,36 @@ class YearAndMonthFoundation extends _foundation.default {
           return !disabledDate((0, _dateFns.setMonth)(currentDate, month - 1));
         });
       }
-      if (validMonth) {
-        const month = (0, _fastCopy.default)(currentMonth);
-        month[panelType] = validMonth.month;
-        // change year and month same time
-        this._adapter.setCurrentYearAndMonth(year, month);
-        this._adapter.notifySelectYearAndMonth(year, month);
+      if (validMonth && !isOppositeMonthDisabled) {
+        // only currentPanel Date is illegal
+        // just need to modify the month of the current panel
+        finalMonth[panelType] = validMonth.month;
+      } else if (validMonth && isOppositeMonthDisabled) {
+        // all panel Date is illegal
+        // change the value to the legal value calculated by the current panel
+        finalYear = {
+          'left': item.year,
+          'right': item.year
+        };
+        finalMonth = {
+          'left': validMonth.month,
+          'right': validMonth.month
+        };
       }
+    } else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
+      // only opposite panel Date is illegal
+      // change the value to the legal value in the current panel
+      finalYear = {
+        'left': item.year,
+        'right': item.year
+      };
+      finalMonth = {
+        'left': currentMonth[panelType],
+        'right': currentMonth[panelType]
+      };
     }
+    this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
+    this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
   }
   backToMain() {
     this._adapter.notifyBackToMain();

package/lib/cjs/resizable/foundation.d.ts

@@ -1,2 +1,5 @@
-export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
-export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+import { ResizableHandlerFoundation, ResizableFoundation } from './single';
+import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+import type { ResizableHandlerAdapter, ResizableAdapter } from './single';
+import type { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter } from './group';
+export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter, ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };

package/lib/cjs/resizable/group/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../types";
+import { ResizeStartCallback, ResizeCallback } from "../singleConstants";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void;
@@ -35,11 +34,10 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
 export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
     constructor(adapter: ResizeGroupAdapter<P, S>);
     get groupRef(): HTMLDivElement | null;
-    get groupSize(): number;
     direction: 'horizontal' | 'vertical';
     itemMinusMap: Map<number, number>;
     totalMinus: number;
-    itemPercentMap: Map<number, number>;
+    avaliableSize: number;
     init(): void;
     get window(): Window | null;
     registerEvents: () => void;
@@ -47,7 +45,6 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
     onResizing: (e: MouseEvent) => void;
     onResizeEnd: (e: MouseEvent) => void;
-    initSpace: () => void;
-    ensureConstraint: import("lodash").DebouncedFunc<() => void>;
+    calculateSpace: () => void;
     destroy(): void;
 }

package/lib/cjs/resizable/group/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizeItemFoundation = exports.ResizeHandlerFoundation = exports.ResizeGroupFoundation = void 0;
-var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 var _utils = require("../utils");
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -48,18 +47,16 @@ class ResizeGroupFoundation extends _foundation.default {
       // offset caused by padding and border
       const lastStyle = this.window.getComputedStyle(lastItem);
       const nextStyle = this.window.getComputedStyle(nextItem);
-      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction) + this.itemMinusMap.get(handlerIndex);
-      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction) + this.itemMinusMap.get(handlerIndex + 1);
-      let lastItemSize = (this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight) + this.itemMinusMap.get(handlerIndex),
-        nextItemSize = (this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight) + this.itemMinusMap.get(handlerIndex + 1);
+      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction);
+      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction);
       const states = this.getStates();
       this.setState({
         isResizing: true,
         originalPosition: {
           x: clientX,
           y: clientY,
-          lastItemSize,
-          nextItemSize,
+          lastItemSize: this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight,
+          nextItemSize: this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight,
           lastOffset,
           nextOffset
         },
@@ -106,33 +103,28 @@ class ResizeGroupFoundation extends _foundation.default {
       } = props;
       let lastItem = this._adapter.getItem(curHandler),
         nextItem = this._adapter.getItem(curHandler + 1);
-      let parentSize = this.groupSize;
+      let parentSize = this.direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+      let availableSize = parentSize - this.totalMinus;
       let delta = direction === 'horizontal' ? clientX - initX : clientY - initY;
       let lastNewSize = lastItemSize + delta;
       let nextNewSize = nextItemSize - delta;
       // 判断是否超出限制
-      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset),
-        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
+      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset),
+        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
       if (lastFlag) {
-        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset);
+        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset);
         nextNewSize = lastItemSize + nextItemSize - lastNewSize;
       }
       if (nextFlag) {
-        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
+        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
         lastNewSize = lastItemSize + nextItemSize - nextNewSize;
       }
-      let lastItemPercent = this.itemPercentMap.get(curHandler),
-        nextItemPercent = this.itemPercentMap.get(curHandler + 1);
-      let lastNewPercent = lastNewSize / parentSize * 100;
-      let nextNewPercent = lastItemPercent + nextItemPercent - lastNewPercent; // 消除浮点误差
-      this.itemPercentMap.set(curHandler, lastNewPercent);
-      this.itemPercentMap.set(curHandler + 1, nextNewPercent);
       if (direction === 'horizontal') {
-        lastItem.style.width = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
-        nextItem.style.width = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
+        lastItem.style.width = lastNewSize / parentSize * 100 + '%';
+        nextItem.style.width = nextNewSize / parentSize * 100 + '%';
       } else if (direction === 'vertical') {
-        lastItem.style.height = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
-        nextItem.style.height = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
+        lastItem.style.height = lastNewSize / parentSize * 100 + '%';
+        nextItem.style.height = nextNewSize / parentSize * 100 + '%';
       }
       let lastFunc = this._adapter.getItemChange(curHandler),
         nextFunc = this._adapter.getItemChange(curHandler + 1);
@@ -177,14 +169,14 @@ class ResizeGroupFoundation extends _foundation.default {
       });
       this.unregisterEvents();
     };
-    this.initSpace = () => {
+    this.calculateSpace = () => {
       const props = this.getProps();
       const {
         direction
       } = props;
       // calculate accurate space for group item
       let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
-      let parentSize = this.groupSize;
+      let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
       this.totalMinus = 0;
       for (let i = 0; i < this._adapter.getHandlerCount(); i++) {
         let handlerSize = direction === 'horizontal' ? this._adapter.getHandler(i).offsetWidth : this._adapter.getHandler(i).offsetHeight;
@@ -206,8 +198,8 @@ class ResizeGroupFoundation extends _foundation.default {
         const child = this._adapter.getItem(i);
         let minSize = this._adapter.getItemMin(i),
           maxSize = this._adapter.getItemMax(i);
-        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, parentSize) / parentSize * 100 : 0,
-          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, parentSize) / parentSize * 100 : 100;
+        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, groupSize) / groupSize * 100 : 0,
+          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, groupSize) / groupSize * 100 : 100;
         if (minSizePercent > maxSizePercent) {
           console.warn('[Semi ResizableItem]: min size bigger than max size');
         }
@@ -217,17 +209,15 @@ class ResizeGroupFoundation extends _foundation.default {
           if (typeof defaultSize === 'string') {
             if (defaultSize.endsWith('%')) {
               itemSizePercent = parseFloat(defaultSize.slice(0, -1));
-              this.itemPercentMap.set(i, itemSizePercent);
             } else if (defaultSize.endsWith('px')) {
-              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / parentSize * 100;
-              this.itemPercentMap.set(i, itemSizePercent);
+              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / groupSize * 100;
             } else if (/^-?\d+(\.\d+)?$/.test(defaultSize)) {
               // 仅由数字组成，表示按比例分配剩下空间
               undefineLoc.set(i, parseFloat(defaultSize));
               undefinedTotal += parseFloat(defaultSize);
               continue;
             }
-          } else if (typeof defaultSize === 'number') {
+          } else {
             undefineLoc.set(i, defaultSize);
             undefinedTotal += defaultSize;
             continue;
@@ -256,78 +246,21 @@ class ResizeGroupFoundation extends _foundation.default {
       }
       undefineLoc.forEach((value, key) => {
         const child = this._adapter.getItem(key);
-        const percent = value / undefinedTotal * undefineSizePercent;
-        this.itemPercentMap.set(key, percent);
         if (direction === 'horizontal') {
-          child.style.width = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.width = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
         } else {
-          child.style.height = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.height = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
         }
       });
     };
-    this.ensureConstraint = (0, _debounce2.default)(() => {
-      // 浏览器拖拽时保证px值最大最小仍生效
-      const {
-        direction
-      } = this.getProps();
-      const itemCount = this._adapter.getItemCount();
-      let continueFlag = true;
-      for (let i = 0; i < itemCount; i++) {
-        const child = this._adapter.getItem(i);
-        const childSize = direction === 'horizontal' ? child.offsetWidth : child.offsetHeight;
-        // 判断由非鼠标拖拽导致item的size变化过程中是否有超出限制的情况
-        const childFlag = (0, _utils.judgeConstraint)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
-        if (childFlag) {
-          const childNewSize = (0, _utils.adjustNewSize)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
-          for (let j = i + 1; j < itemCount; j++) {
-            // 找到下一个没有超出限制的item
-            const item = this._adapter.getItem(j);
-            const itemSize = direction === 'horizontal' ? item.offsetWidth : item.offsetHeight;
-            const itemFlag = (0, _utils.judgeConstraint)(itemSize, this._adapter.getItemMin(j), this._adapter.getItemMax(j), this.groupSize, this.itemMinusMap.get(j));
-            if (!itemFlag) {
-              let childPercent = this.itemPercentMap.get(i),
-                itemPercent = this.itemPercentMap.get(j);
-              let childNewPercent = childNewSize / this.groupSize * 100;
-              let itemNewPercent = childPercent + itemPercent - childNewPercent;
-              this.itemPercentMap.set(i, childNewPercent);
-              this.itemPercentMap.set(j, itemNewPercent);
-              if (direction === 'horizontal') {
-                child.style.width = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
-                item.style.width = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
-              } else {
-                child.style.height = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
-                item.style.height = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
-              }
-              break;
-            } else {
-              if (j === itemCount - 1) {
-                continueFlag = false;
-                console.warn('[Semi ResizableGroup]: no enough space to adjust min/max size');
-              }
-            }
-          }
-        }
-        if (!continueFlag) {
-          break;
-        }
-      }
-    }, 200);
   }
   get groupRef() {
     return this._adapter.getGroupRef();
   }
-  get groupSize() {
-    const {
-      direction
-    } = this.getProps();
-    let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
-    return groupSize;
-  }
   init() {
     this.direction = this.getProp('direction');
     this.itemMinusMap = new Map();
-    this.itemPercentMap = new Map();
-    this.initSpace();
+    this.calculateSpace();
   }
   get window() {
     var _a;

package/lib/cjs/resizable/groupConstants.d.ts

@@ -0,0 +1,16 @@
+export declare const directionStyles: {
+    readonly horizontal: {
+        readonly width: "8px";
+        readonly flexShrink: 0;
+        readonly height: "100%";
+        readonly margin: "0";
+        readonly cursor: "col-resize";
+    };
+    readonly vertical: {
+        readonly width: "100%";
+        readonly height: "8px";
+        readonly flexShrink: 0;
+        readonly margin: "0";
+        readonly cursor: "row-resize";
+    };
+};

package/lib/cjs/resizable/groupConstants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.directionStyles = void 0;
+// group
+const rowStyleBase = {
+  width: '100%',
+  height: '8px',
+  flexShrink: 0,
+  margin: '0',
+  cursor: 'row-resize'
+};
+const colStyleBase = {
+  width: '8px',
+  flexShrink: 0,
+  height: '100%',
+  margin: '0',
+  cursor: 'col-resize'
+};
+const directionStyles = exports.directionStyles = {
+  horizontal: Object.assign({}, colStyleBase),
+  vertical: Object.assign({}, rowStyleBase)
+};

package/lib/cjs/resizable/resizable.css

@@ -11,72 +11,6 @@
   user-select: none;
   z-index: 2000;
 }
-.semi-resizable-resizableHandler-top {
-  width: 100%;
-  height: 10px;
-  top: 0;
-  left: 0;
-  cursor: row-resize;
-  top: -5px;
-}
-.semi-resizable-resizableHandler-right {
-  width: 10px;
-  height: 100%;
-  top: 0;
-  left: 0;
-  cursor: col-resize;
-  left: auto;
-  right: -5px;
-}
-.semi-resizable-resizableHandler-bottom {
-  width: 100%;
-  height: 10px;
-  top: 0;
-  left: 0;
-  cursor: row-resize;
-  top: auto;
-  bottom: -5px;
-}
-.semi-resizable-resizableHandler-left {
-  width: 10px;
-  height: 100%;
-  top: 0;
-  left: 0;
-  cursor: col-resize;
-  left: -5px;
-}
-.semi-resizable-resizableHandler-topRight {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: -10px;
-  top: -10px;
-  cursor: ne-resize;
-}
-.semi-resizable-resizableHandler-bottomRight {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: -10px;
-  bottom: -10px;
-  cursor: se-resize;
-}
-.semi-resizable-resizableHandler-bottomLeft {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  left: -10px;
-  bottom: -10px;
-  cursor: sw-resize;
-}
-.semi-resizable-resizableHandler-topLeft {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  left: -10px;
-  top: -10px;
-  cursor: nw-resize;
-}
 .semi-resizable-group {
   display: flex;
   position: relative;
@@ -97,24 +31,4 @@
   justify-content: center;
   background-color: var(--semi-color-fill-0);
   opacity: 1;
-}
-.semi-resizable-handler-vertical {
-  width: 100%;
-  height: 10px;
-  flex-shrink: 0;
-  cursor: row-resize;
-}
-.semi-resizable-handler-horizontal {
-  height: 100%;
-  width: 10px;
-  flex-shrink: 0;
-  cursor: col-resize;
-}
-.semi-resizable-background {
-  height: 100%;
-  width: 100%;
-  inset: 0;
-  z-index: 2010;
-  opacity: 0;
-  position: fixed;
 }

package/lib/cjs/resizable/resizable.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+
 $module: #{$prefix}-resizable;
 
 .#{$module} {
@@ -12,83 +13,8 @@ $module: #{$prefix}-resizable;
         position: absolute;
         user-select: none;
         z-index: $z-resizable_handler;
-
-        // 基础样式
-        @mixin row-resize-base {
-            width: 100%;
-            height: $height-row-handler;
-            top: 0;
-            left: 0;
-            cursor: row-resize;
-        }
-
-        @mixin col-resize-base {
-            width: $width-col-handler;
-            height: 100%;
-            top: 0;
-            left: 0;
-            cursor: col-resize;
-        }
-
-        @mixin edge-resize-base {
-            width: $width-edge-handler;
-            height: $height-edge-handler;
-            position: absolute;
-        }
-
-        // 方向样式
-        &-top {
-            @include row-resize-base;
-            top: calc(-1 * $height-row-handler / 2);
-        }
-
-        &-right {
-            @include col-resize-base;
-            left: auto;
-            right: calc(-1 * $width-col-handler / 2);
-        }
-
-        &-bottom {
-            @include row-resize-base;
-            top: auto;
-            bottom: calc(-1 * $height-row-handler / 2);
-        }
-
-        &-left {
-            @include col-resize-base;
-            left: calc(-1 * $width-col-handler / 2);
-        }
-
-        // 边角样式
-        &-topRight {
-            @include edge-resize-base;
-            right: calc(-1 * $width-edge-handler / 2);
-            top: calc(-1 * $height-edge-handler / 2);
-            cursor: ne-resize;
-        }
-
-        &-bottomRight {
-            @include edge-resize-base;
-            right: calc(-1 * $width-edge-handler / 2);
-            bottom: calc(-1 * $height-edge-handler / 2);
-            cursor: se-resize;
-        }
-
-        &-bottomLeft {
-            @include edge-resize-base;
-            left: calc(-1 * $width-edge-handler / 2);
-            bottom: calc(-1 * $height-edge-handler / 2);
-            cursor: sw-resize;
-        }
-
-        &-topLeft {
-            @include edge-resize-base;
-            left: calc(-1 * $width-edge-handler / 2);
-            top: calc(-1 * $height-edge-handler / 2);
-            cursor: nw-resize;
-        }
     }
-
+    
     &-group {
         display: flex;
         position: relative;
@@ -111,28 +37,5 @@ $module: #{$prefix}-resizable;
         justify-content: center;
         background-color: var(--semi-color-fill-0);
         opacity: 1;
-
-        &-vertical {
-            width: 100%;
-            height: $height-vertical-handler;
-            flex-shrink: 0;
-            cursor: row-resize;
-        }
-
-        &-horizontal {
-            height: 100%;
-            width: $width-horizontal-handler;
-            flex-shrink: 0;
-            cursor: col-resize;
-        }
-    }
-
-    &-background {
-        height: 100%;
-        width: 100%;
-        inset: 0;
-        z-index: $z-resizable_background;
-        opacity: 0;
-        position: fixed;
     }
 }

package/lib/cjs/resizable/single/index.d.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../types";
+import { Size, NumberSize, Direction } from "../singleConstants";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;

package/lib/cjs/resizable/single/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResizableHandlerFoundation = exports.ResizableFoundation = void 0;
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
-var _types = require("../types");
+var _singleConstants = require("../singleConstants");
 var _utils = require("../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class ResizableHandlerFoundation extends _foundation.default {
@@ -303,7 +303,7 @@ class ResizableFoundation extends _foundation.default {
   }
   get propSize() {
     const porps = this.getProps();
-    return porps.size || porps.defaultSize || _types.DEFAULT_SIZE;
+    return porps.size || porps.defaultSize || _singleConstants.DEFAULT_SIZE;
   }
   get size() {
     let width = 0;