@douyinfe/semi-foundation 2.67.2 → 2.68.0-beta.0

package/lib/es/resizable/singleConstants.d.ts

@@ -0,0 +1,105 @@
+export declare const directions: readonly ["top", "right", "bottom", "left", "topRight", "bottomRight", "bottomLeft", "topLeft"];
+export declare const directionStyles: {
+    readonly top: {
+        readonly top: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly right: {
+        readonly left: any;
+        readonly right: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly bottom: {
+        readonly top: any;
+        readonly bottom: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly left: {
+        readonly left: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly topRight: {
+        readonly right: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "ne-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomRight: {
+        readonly right: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "se-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomLeft: {
+        readonly left: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "sw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly topLeft: {
+        readonly left: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "nw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+};
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+export interface HandleClassName {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    topRight?: string;
+    bottomRight?: string;
+    bottomLeft?: string;
+    topLeft?: string;
+}
+export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export interface Enable {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    topRight?: boolean;
+    bottomRight?: boolean;
+    bottomLeft?: boolean;
+    topLeft?: boolean;
+}
+export interface Size {
+    width?: string | number;
+    height?: string | number;
+}
+export interface NumberSize {
+    width: number;
+    height: number;
+}
+export interface NewSize {
+    newHeight: number | string;
+    newWidth: number | string;
+}
+export declare const DEFAULT_SIZE: {
+    width: string;
+    height: string;
+};
+export type ResizeCallback = (size: Size, event: MouseEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent, dir: Direction) => void | boolean;

package/lib/es/resizable/singleConstants.js

@@ -0,0 +1,61 @@
+// single
+const rowStyleBase = {
+  width: '100%',
+  height: '10px',
+  top: '0px',
+  left: '0px',
+  cursor: 'row-resize'
+};
+const colStyleBase = {
+  width: '10px',
+  height: '100%',
+  top: '0px',
+  left: '0px',
+  cursor: 'col-resize'
+};
+const edgeStyleBase = {
+  width: '20px',
+  height: '20px',
+  position: 'absolute'
+};
+export const directions = ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'];
+export const directionStyles = {
+  top: Object.assign(Object.assign({}, rowStyleBase), {
+    top: '-5px'
+  }),
+  right: Object.assign(Object.assign({}, colStyleBase), {
+    left: undefined,
+    right: '-5px'
+  }),
+  bottom: Object.assign(Object.assign({}, rowStyleBase), {
+    top: undefined,
+    bottom: '-5px'
+  }),
+  left: Object.assign(Object.assign({}, colStyleBase), {
+    left: '-5px'
+  }),
+  topRight: Object.assign(Object.assign({}, edgeStyleBase), {
+    right: '-10px',
+    top: '-10px',
+    cursor: 'ne-resize'
+  }),
+  bottomRight: Object.assign(Object.assign({}, edgeStyleBase), {
+    right: '-10px',
+    bottom: '-10px',
+    cursor: 'se-resize'
+  }),
+  bottomLeft: Object.assign(Object.assign({}, edgeStyleBase), {
+    left: '-10px',
+    bottom: '-10px',
+    cursor: 'sw-resize'
+  }),
+  topLeft: Object.assign(Object.assign({}, edgeStyleBase), {
+    left: '-10px',
+    top: '-10px',
+    cursor: 'nw-resize'
+  })
+};
+export const DEFAULT_SIZE = {
+  width: 'auto',
+  height: 'auto'
+};

package/lib/es/resizable/utils.d.ts

@@ -0,0 +1,20 @@
+export declare const clamp: (n: number, min: number, max: number) => number;
+export declare const snap: (n: number, size: number) => number;
+export declare const has: (dir: 'top' | 'right' | 'bottom' | 'left', target: string) => boolean;
+export declare const findNextSnap: (n: number, snapArray: number[], snapGap?: number) => number;
+export declare const getStringSize: (n: number | string) => string;
+export declare const getNumberSize: (size: undefined | string | number, parentSize: number, innerWidth: number, innerHeight: number) => number;
+export declare const calculateNewMax: (parentSize: {
+    width: number;
+    height: number;
+}, innerWidth: number, innerHeight: number, maxWidth?: string | number, maxHeight?: string | number, minWidth?: string | number, minHeight?: string | number) => {
+    maxWidth: number;
+    maxHeight: number;
+    minWidth: number;
+    minHeight: number;
+};
+export declare const getItemDirection: (dir: 'vertical' | 'horizontal') => string[];
+export declare const getPixelSize: (size: string, parentSize: number) => number;
+export declare const judgeConstraint: (newSize: number, min: string, max: string, parentSize: number, offset?: number) => boolean;
+export declare const adjustNewSize: (newSize: number, min: string, max: string, parentSize: number, offset: number) => number;
+export declare const getOffset: (style: CSSStyleDeclaration, direction: 'horizontal' | 'vertical') => number;

package/lib/es/resizable/utils.js

@@ -0,0 +1,124 @@
+export const clamp = (n, min, max) => Math.max(Math.min(n, max), min);
+export const snap = (n, size) => Math.round(n / size) * size;
+export const has = (dir, target) => new RegExp(dir, 'i').test(target);
+export const findNextSnap = function (n, snapArray) {
+  let snapGap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const closestGapIndex = snapArray.reduce((prev, curr, index) => Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev, 0);
+  const gap = Math.abs(snapArray[closestGapIndex] - n);
+  return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
+};
+export const getStringSize = n => {
+  n = n.toString();
+  if (n === 'auto') {
+    return n;
+  }
+  if (n.endsWith('px')) {
+    return n;
+  }
+  if (n.endsWith('%')) {
+    return n;
+  }
+  if (n.endsWith('vh')) {
+    return n;
+  }
+  if (n.endsWith('vw')) {
+    return n;
+  }
+  if (n.endsWith('vmax')) {
+    return n;
+  }
+  if (n.endsWith('vmin')) {
+    return n;
+  }
+  return `${n}px`;
+};
+export const getNumberSize = (size, parentSize, innerWidth, innerHeight) => {
+  if (size && typeof size === 'string') {
+    if (size.endsWith('px')) {
+      return Number(size.replace('px', ''));
+    }
+    if (size.endsWith('%')) {
+      const ratio = Number(size.replace('%', '')) / 100;
+      return parentSize * ratio;
+    }
+    if (size.endsWith('vw')) {
+      const ratio = Number(size.replace('vw', '')) / 100;
+      return innerWidth * ratio;
+    }
+    if (size.endsWith('vh')) {
+      const ratio = Number(size.replace('vh', '')) / 100;
+      return innerHeight * ratio;
+    }
+  }
+  return typeof size === 'undefined' ? size : Number(size);
+};
+export const calculateNewMax = (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) => {
+  maxWidth = getNumberSize(maxWidth, parentSize.width, innerWidth, innerHeight);
+  maxHeight = getNumberSize(maxHeight, parentSize.height, innerWidth, innerHeight);
+  minWidth = getNumberSize(minWidth, parentSize.width, innerWidth, innerHeight);
+  minHeight = getNumberSize(minHeight, parentSize.height, innerWidth, innerHeight);
+  return {
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight
+  };
+};
+export const getItemDirection = dir => {
+  if (dir === 'vertical') {
+    return ['bottom', 'top'];
+  } else {
+    return ['right', 'left'];
+  }
+};
+export const getPixelSize = (size, parentSize) => {
+  if (size.endsWith('px')) {
+    return Number(size.replace('px', ''));
+  }
+  if (size.endsWith('%')) {
+    return Number(size.replace('%', '')) / 100 * parentSize;
+  }
+  return typeof size === 'undefined' ? size : Number(size);
+};
+export const judgeConstraint = function (newSize, min, max, parentSize) {
+  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  min = min !== null && min !== void 0 ? min : "0%";
+  max = max !== null && max !== void 0 ? max : "100%";
+  const minSize = getPixelSize(min, parentSize);
+  const maxSize = getPixelSize(max, parentSize);
+  if (newSize <= minSize + offset) {
+    return true;
+  }
+  if (newSize >= maxSize - offset) {
+    return true;
+  }
+  return false;
+};
+export const adjustNewSize = (newSize, min, max, parentSize, offset) => {
+  min = min !== null && min !== void 0 ? min : "0%";
+  max = max !== null && max !== void 0 ? max : "100%";
+  const minSize = getPixelSize(min, parentSize);
+  const maxSize = getPixelSize(max, parentSize);
+  if (newSize <= minSize + offset) {
+    return minSize + offset;
+  }
+  if (newSize >= maxSize - offset) {
+    return maxSize - offset;
+  }
+  return newSize;
+};
+export const getOffset = (style, direction) => {
+  if (direction === 'horizontal') {
+    const paddingLeft = parseFloat(style.paddingLeft);
+    const paddingRight = parseFloat(style.paddingRight);
+    const borderLeftWidth = parseFloat(style.borderLeftWidth);
+    const borderRightWidth = parseFloat(style.borderRightWidth);
+    return paddingLeft + paddingRight + borderLeftWidth + borderRightWidth;
+  } else {
+    const paddingTop = parseFloat(style.paddingTop);
+    const paddingBottom = parseFloat(style.paddingBottom);
+    const borderTopWidth = parseFloat(style.borderTopWidth);
+    const borderBottomWidth = parseFloat(style.borderBottomWidth);
+    return paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+  }
+};

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.67.2",
+    "version": "2.68.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.67.2",
+        "@douyinfe/semi-animation": "2.68.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "2ff1f1c65aa51266782304dfd1dea055d20ee028",
+    "gitHead": "14e3f82adfde5d9ac0de952b74b3e2cee2e5fd33",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/resizable/constants.ts

@@ -0,0 +1,13 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-resizable`,
+} as const;
+
+const strings = {
+};
+
+export { cssClasses, strings };
+
+
+

package/resizable/foundation.ts

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

package/resizable/group/index.ts

@@ -0,0 +1,293 @@
+import { getItemDirection, getPixelSize } from "../utils";
+import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
+import { ResizeStartCallback, ResizeCallback } from "../singleConstants";
+import { adjustNewSize, judgeConstraint, getOffset } from "../utils";
+export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    registerEvents: () => void;
+    unregisterEvents: () => void
+}
+
+export class ResizeHandlerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeHandlerAdapter<P, S>, P, S> {
+    constructor(adapter: ResizeHandlerAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init(): void {
+        this._adapter.registerEvents();
+    }
+
+    destroy(): void {
+        this._adapter.unregisterEvents();
+    }
+}
+
+export interface ResizeItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+}
+
+export class ResizeItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeItemAdapter<P, S>, P, S> {
+    constructor(adapter: ResizeItemAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init(): void {
+    }
+
+    destroy(): void {
+    }
+}
+
+export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getGroupRef: () => HTMLDivElement | null;
+    getItem: (index: number) => HTMLDivElement;
+    getItemCount: () => number;
+    getHandler: (index: number) => HTMLDivElement;
+    getHandlerCount: () => number;
+    getItemMin: (index: number) => string;
+    getItemMax: (index: number) => string;
+    getItemStart: (index: number) => ResizeStartCallback;
+    getItemChange: (index: number) => ResizeCallback;
+    getItemEnd: (index: number) => ResizeCallback;
+    getItemDefaultSize: (index: number) => string | number;
+    registerEvents: () => void;
+    unregisterEvents: () => void
+}
+
+export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
+    constructor(adapter: ResizeGroupAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    get groupRef(): HTMLDivElement | null {
+        return this._adapter.getGroupRef();
+    }
+
+    direction: 'horizontal' | 'vertical'
+    itemMinusMap: Map<number, number>;
+    totalMinus: number;
+    avaliableSize: number;
+
+
+    init(): void {
+        this.direction = this.getProp('direction');
+        this.itemMinusMap = new Map();
+        this.calculateSpace();
+    }
+    get window(): Window | null {
+        return this.groupRef.ownerDocument.defaultView as Window ?? null;
+    }
+
+    
+    registerEvents = () => {
+        this._adapter.registerEvents();
+    }
+
+    unregisterEvents = () => {
+        this._adapter.unregisterEvents();
+    }
+
+    onResizeStart = (handlerIndex: number, e: MouseEvent) => { // handler ref
+        let { clientX, clientY } = e;
+        let lastItem = this._adapter.getItem(handlerIndex), nextItem = this._adapter.getItem(handlerIndex + 1);
+        let lastOffset: number, nextOffset: number;
+        // offset caused by padding and border
+        const lastStyle = this.window.getComputedStyle(lastItem);
+        const nextStyle = this.window.getComputedStyle(nextItem);
+
+        lastOffset = getOffset(lastStyle, this.direction);
+        nextOffset = getOffset(nextStyle, this.direction);
+        const states = this.getStates();
+        this.setState({
+            isResizing: true,
+            originalPosition: {
+                x: clientX,
+                y: clientY,
+                lastItemSize: (this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight),
+                nextItemSize: (this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight),
+                lastOffset,
+                nextOffset,
+            },
+            backgroundStyle: {
+                ...states.backgroundStyle,
+                cursor: this.window.getComputedStyle(e.target as HTMLElement).cursor || 'auto',
+            },
+            curHandler: handlerIndex
+        } as any);
+        this.registerEvents();
+
+        let lastStart = this._adapter.getItemStart(handlerIndex), 
+            nextStart = this._adapter.getItemStart(handlerIndex + 1);
+        let [lastDir, nextDir] = getItemDirection(this.direction);
+        if (lastStart) {
+            lastStart(e, lastDir as any);
+        }
+        if (nextStart) {
+            nextStart(e, nextDir as any);
+        }
+    }
+
+
+    onResizing = (e: MouseEvent) => {
+        const state = this.getStates();
+        if (!state.isResizing) {
+            return;
+        }
+        const { curHandler, originalPosition } = state;
+        let { x: initX, y: initY, lastItemSize, nextItemSize, lastOffset, nextOffset } = originalPosition;
+        let { clientX, clientY } = e;
+
+        const props = this.getProps();
+        const { direction } = props;
+        let lastItem = this._adapter.getItem(curHandler), nextItem = this._adapter.getItem(curHandler + 1);
+        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 = judgeConstraint(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset),
+            nextFlag = judgeConstraint(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+
+        if (lastFlag) {
+            lastNewSize = adjustNewSize(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset);
+            nextNewSize = lastItemSize + nextItemSize - lastNewSize;
+        }
+
+        if (nextFlag) {
+            nextNewSize = adjustNewSize(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+            lastNewSize = lastItemSize + nextItemSize - nextNewSize;
+        }
+
+        if (direction === 'horizontal') {     
+            lastItem.style.width = (lastNewSize) / parentSize * 100 + '%';
+            nextItem.style.width = (nextNewSize) / parentSize * 100 + '%';
+        } else if (direction === 'vertical') {
+            lastItem.style.height = (lastNewSize) / parentSize * 100 + '%';
+            nextItem.style.height = (nextNewSize) / parentSize * 100 + '%';
+        }
+
+        let lastFunc = this._adapter.getItemChange(curHandler),
+            nextFunc = this._adapter.getItemChange(curHandler + 1);
+        let [lastDir, nextDir] = getItemDirection(this.direction);
+        if (lastFunc) {
+            lastFunc( { width: lastItem.offsetWidth, height: lastItem.offsetHeight }, e, lastDir as any);
+        }
+        if (nextFunc) {
+            nextFunc( { width: nextItem.offsetWidth, height: nextItem.offsetHeight }, e, nextDir as any);
+        }
+    }
+
+    onResizeEnd = (e: MouseEvent) => {
+        const { curHandler } = this.getStates();
+        let lastItem = this._adapter.getItem(curHandler), nextItem = this._adapter.getItem(curHandler + 1);
+        let lastFunc = this._adapter.getItemEnd(curHandler),
+            nextFunc = this._adapter.getItemEnd(curHandler + 1);
+        let [lastDir, nextDir] = getItemDirection(this.direction);
+        if (lastFunc) {
+            lastFunc( { width: lastItem.offsetWidth, height: lastItem.offsetHeight }, e, lastDir as any);
+        }
+        if (nextFunc) {
+            nextFunc( { width: nextItem.offsetWidth, height: nextItem.offsetHeight }, e, nextDir as any);
+        }
+        this.setState({
+            isResizing: false,
+            curHandler: null
+        } as any);
+        this.unregisterEvents();
+    }
+
+    calculateSpace = () => {
+        const props = this.getProps();
+        const { direction } = props;
+
+        // calculate accurate space for group item
+        let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
+        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;
+            handlerSizes[i] = handlerSize;
+            this.totalMinus += handlerSize;
+        }
+        
+        // allocate size for items which don't have default size
+        let totalSizePercent = 0;
+        let undefineLoc: Map<number, number> = new Map(), undefinedTotal = 0; // proportion
+
+        for (let i = 0; i < this._adapter.getItemCount(); i++) {
+            if (i === 0) {
+                this.itemMinusMap.set(i, handlerSizes[i] / 2);
+            } else if (i === this._adapter.getItemCount() - 1) {
+                this.itemMinusMap.set(i, handlerSizes[i - 1] / 2);
+            } else {
+                this.itemMinusMap.set(i, handlerSizes[i - 1] / 2 + handlerSizes[i] / 2);
+            }
+            const child = this._adapter.getItem(i);
+            let minSize = this._adapter.getItemMin(i), maxSize = this._adapter.getItemMax(i);
+            let minSizePercent = minSize ? getPixelSize(minSize, groupSize) / groupSize * 100 : 0,
+                maxSizePercent = maxSize ? getPixelSize(maxSize, groupSize) / groupSize * 100 : 100;
+            if (minSizePercent > maxSizePercent) {
+                console.warn('[Semi ResizableItem]: min size bigger than max size');
+            }    
+
+            let defaultSize = this._adapter.getItemDefaultSize(i);
+            if (defaultSize) {
+                let itemSizePercent: number;
+                if (typeof defaultSize === 'string') {
+                    if (defaultSize.endsWith('%')) {
+                        itemSizePercent = parseFloat(defaultSize.slice(0, -1));
+                    } else if (defaultSize.endsWith('px')) {
+                        itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / groupSize * 100;
+                    } else if (/^-?\d+(\.\d+)?$/.test(defaultSize)) {
+                        // 仅由数字组成，表示按比例分配剩下空间
+                        undefineLoc.set(i, parseFloat(defaultSize));
+                        undefinedTotal += parseFloat(defaultSize);
+                        continue;
+                    }
+                } else {
+                    undefineLoc.set(i, defaultSize);
+                    undefinedTotal += defaultSize;
+                    continue;
+                }
+                
+
+                totalSizePercent += itemSizePercent;
+                
+                if (direction === 'horizontal') {
+                    child.style.width = `calc(${itemSizePercent}% - ${this.itemMinusMap.get(i)}px)`;
+                } else {
+                    child.style.height = `calc(${itemSizePercent}% - ${this.itemMinusMap.get(i)}px)`;
+                }
+                
+                if (itemSizePercent < minSizePercent) {
+                    console.warn('[Semi ResizableGroup]: item size smaller than min size');
+                } 
+                if (itemSizePercent > maxSizePercent) {
+                    console.warn('[Semi ResizableGroup]: item size bigger than max size');
+                }
+            } else {
+                undefineLoc.set(i, 1);
+                undefinedTotal += 1;
+            }
+        }
+        let undefineSizePercent = 100 - totalSizePercent;
+        if (totalSizePercent > 100) {
+            console.warn('[Semi ResizableGroup]: total Size bigger than 100%');
+            undefineSizePercent = 10; // 如果总和超过100%，则保留10%的空间均分给未定义的item
+        }
+    
+        undefineLoc.forEach((value, key) => {
+            const child = this._adapter.getItem(key);
+            if (direction === 'horizontal') {
+                child.style.width = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+            } else {
+                child.style.height = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+            }
+        });
+    }
+
+    destroy(): void {
+        
+    }
+}