@douyinfe/semi-foundation 2.67.3-alpha.0 → 2.68.0

package/lib/cjs/resizable/singleConstants.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.directions = exports.directionStyles = exports.DEFAULT_SIZE = void 0;
+// 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'
+};
+const directions = exports.directions = ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'];
+const directionStyles = exports.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'
+  })
+};
+const DEFAULT_SIZE = exports.DEFAULT_SIZE = {
+  width: 'auto',
+  height: 'auto'
+};

package/lib/cjs/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/cjs/resizable/utils.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.snap = exports.judgeConstraint = exports.has = exports.getStringSize = exports.getPixelSize = exports.getOffset = exports.getNumberSize = exports.getItemDirection = exports.findNextSnap = exports.clamp = exports.calculateNewMax = exports.adjustNewSize = void 0;
+const clamp = (n, min, max) => Math.max(Math.min(n, max), min);
+exports.clamp = clamp;
+const snap = (n, size) => Math.round(n / size) * size;
+exports.snap = snap;
+const has = (dir, target) => new RegExp(dir, 'i').test(target);
+exports.has = has;
+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;
+};
+exports.findNextSnap = findNextSnap;
+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`;
+};
+exports.getStringSize = getStringSize;
+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);
+};
+exports.getNumberSize = getNumberSize;
+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
+  };
+};
+exports.calculateNewMax = calculateNewMax;
+const getItemDirection = dir => {
+  if (dir === 'vertical') {
+    return ['bottom', 'top'];
+  } else {
+    return ['right', 'left'];
+  }
+};
+exports.getItemDirection = getItemDirection;
+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);
+};
+exports.getPixelSize = getPixelSize;
+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;
+};
+exports.judgeConstraint = judgeConstraint;
+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;
+};
+exports.adjustNewSize = adjustNewSize;
+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;
+  }
+};
+exports.getOffset = getOffset;

package/lib/cjs/tree/treeUtil.d.ts

@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
 export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/es/datePicker/foundation.d.ts

@@ -85,7 +85,7 @@ export interface EventHandlerProps {
     onClear?: (e: any) => void;
     onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
-    onClickOutSide?: () => void;
+    onClickOutSide?: (e: any) => void;
 }
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps, Pick<MonthsGridFoundationProps, 'startYear' | 'endYear'> {
     autoAdjustOverflow?: boolean;

package/lib/es/hotKeys/foundation.d.ts

@@ -1,7 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface HotKeysAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyHotKey: (e: KeyboardEvent) => void;
-    getListenerTarget: () => HTMLElement;
+    registerEvent: () => void;
+    unregisterEvent: () => void;
 }
 export default class HotKeysFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<HotKeysAdapter<P, S>, P, S> {
     constructor(adapter: HotKeysAdapter<P, S>);

package/lib/es/hotKeys/foundation.js

@@ -56,8 +56,7 @@ export default class HotKeysFoundation extends BaseFoundation {
   }
   init() {
     // init Listener
-    const target = this._adapter.getListenerTarget();
-    target === null || target === void 0 ? void 0 : target.addEventListener('keydown', this.handleKeyDown);
+    this._adapter.registerEvent();
     const hotKeys = this.getProps().hotKeys;
     if (!this.isValidHotKeys(hotKeys)) {
       throw new Error('HotKeys must have one common key and 0/some modifier key');
@@ -65,7 +64,6 @@ export default class HotKeysFoundation extends BaseFoundation {
   }
   destroy() {
     // remove Listener
-    const target = this._adapter.getListenerTarget();
-    target === null || target === void 0 ? void 0 : target.removeEventListener('keydown', this.handleKeyDown);
+    this._adapter.unregisterEvent();
   }
 }

package/lib/es/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("start" | "end")[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

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

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-resizable";
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/es/resizable/constants.js

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

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

@@ -0,0 +1,4 @@
+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/lib/es/resizable/foundation.js

@@ -0,0 +1,4 @@
+import { ResizableHandlerFoundation, ResizableFoundation } from './single';
+export { ResizableHandlerFoundation, ResizableFoundation };
+import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+export { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };

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

@@ -0,0 +1,50 @@
+import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
+import { ResizeStartCallback, ResizeCallback } from "../singleConstants";
+export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    registerEvents: () => void;
+    unregisterEvents: () => void;
+}
+export declare class ResizeHandlerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeHandlerAdapter<P, S>, P, S> {
+    constructor(adapter: ResizeHandlerAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+}
+export interface ResizeItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+}
+export declare class ResizeItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeItemAdapter<P, S>, P, S> {
+    constructor(adapter: ResizeItemAdapter<P, S>);
+    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 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;
+    direction: 'horizontal' | 'vertical';
+    itemMinusMap: Map<number, number>;
+    totalMinus: number;
+    avaliableSize: number;
+    init(): void;
+    get window(): Window | null;
+    registerEvents: () => void;
+    unregisterEvents: () => void;
+    onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
+    onResizing: (e: MouseEvent) => void;
+    onResizeEnd: (e: MouseEvent) => void;
+    calculateSpace: () => void;
+    destroy(): void;
+}

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

@@ -0,0 +1,262 @@
+import { getItemDirection, getPixelSize } from "../utils";
+import BaseFoundation from '../../base/foundation';
+import { adjustNewSize, judgeConstraint, getOffset } from "../utils";
+export class ResizeHandlerFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  init() {
+    this._adapter.registerEvents();
+  }
+  destroy() {
+    this._adapter.unregisterEvents();
+  }
+}
+export class ResizeItemFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  init() {}
+  destroy() {}
+}
+export class ResizeGroupFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.registerEvents = () => {
+      this._adapter.registerEvents();
+    };
+    this.unregisterEvents = () => {
+      this._adapter.unregisterEvents();
+    };
+    this.onResizeStart = (handlerIndex, e) => {
+      let {
+        clientX,
+        clientY
+      } = e;
+      let lastItem = this._adapter.getItem(handlerIndex),
+        nextItem = this._adapter.getItem(handlerIndex + 1);
+      let lastOffset, nextOffset;
+      // 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: Object.assign(Object.assign({}, states.backgroundStyle), {
+          cursor: this.window.getComputedStyle(e.target).cursor || 'auto'
+        }),
+        curHandler: handlerIndex
+      });
+      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);
+      }
+      if (nextStart) {
+        nextStart(e, nextDir);
+      }
+    };
+    this.onResizing = e => {
+      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);
+      }
+      if (nextFunc) {
+        nextFunc({
+          width: nextItem.offsetWidth,
+          height: nextItem.offsetHeight
+        }, e, nextDir);
+      }
+    };
+    this.onResizeEnd = e => {
+      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);
+      }
+      if (nextFunc) {
+        nextFunc({
+          width: nextItem.offsetWidth,
+          height: nextItem.offsetHeight
+        }, e, nextDir);
+      }
+      this.setState({
+        isResizing: false,
+        curHandler: null
+      });
+      this.unregisterEvents();
+    };
+    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 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 = 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;
+          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)`;
+        }
+      });
+    };
+  }
+  get groupRef() {
+    return this._adapter.getGroupRef();
+  }
+  init() {
+    this.direction = this.getProp('direction');
+    this.itemMinusMap = new Map();
+    this.calculateSpace();
+  }
+  get window() {
+    var _a;
+    return (_a = this.groupRef.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : null;
+  }
+  destroy() {}
+}

package/lib/es/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/es/resizable/groupConstants.js

@@ -0,0 +1,19 @@
+// 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'
+};
+export const directionStyles = {
+  horizontal: Object.assign({}, colStyleBase),
+  vertical: Object.assign({}, rowStyleBase)
+};