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

package/datePicker/foundation.ts

@@ -114,7 +114,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'> {

package/hotKeys/foundation.ts

@@ -3,7 +3,8 @@ import { keyToCode, Keys } from './constants';
 
 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> {
@@ -13,8 +14,7 @@ export default class HotKeysFoundation<P = Record<string, any>, S = Record<strin
 
     init(): void {
         // init Listener
-        const target = this._adapter.getListenerTarget();
-        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');
@@ -75,7 +75,6 @@ export default class HotKeysFoundation<P = Record<string, any>, S = Record<strin
 
     destroy(): void {
         // remove Listener
-        const target = this._adapter.getListenerTarget();
-        target?.removeEventListener('keydown', this.handleKeyDown);
+        this._adapter.unregisterEvent();
     }
 }

package/lib/cjs/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/cjs/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/cjs/hotKeys/foundation.js

@@ -63,8 +63,7 @@ class HotKeysFoundation extends _foundation.default {
   }
   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');
@@ -72,8 +71,7 @@ class HotKeysFoundation extends _foundation.default {
   }
   destroy() {
     // remove Listener
-    const target = this._adapter.getListenerTarget();
-    target === null || target === void 0 ? void 0 : target.removeEventListener('keydown', this.handleKeyDown);
+    this._adapter.unregisterEvent();
   }
 }
 exports.default = HotKeysFoundation;

package/lib/cjs/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/cjs/resizable/constants.d.ts

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

package/lib/cjs/resizable/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-resizable`
+};
+const strings = exports.strings = {};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResizableFoundation", {
+  enumerable: true,
+  get: function () {
+    return _single.ResizableFoundation;
+  }
+});
+Object.defineProperty(exports, "ResizableHandlerFoundation", {
+  enumerable: true,
+  get: function () {
+    return _single.ResizableHandlerFoundation;
+  }
+});
+Object.defineProperty(exports, "ResizeGroupFoundation", {
+  enumerable: true,
+  get: function () {
+    return _group.ResizeGroupFoundation;
+  }
+});
+Object.defineProperty(exports, "ResizeHandlerFoundation", {
+  enumerable: true,
+  get: function () {
+    return _group.ResizeHandlerFoundation;
+  }
+});
+Object.defineProperty(exports, "ResizeItemFoundation", {
+  enumerable: true,
+  get: function () {
+    return _group.ResizeItemFoundation;
+  }
+});
+var _single = require("./single");
+var _group = require("./group");

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

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizeItemFoundation = exports.ResizeHandlerFoundation = exports.ResizeGroupFoundation = void 0;
+var _utils = require("../utils");
+var _foundation = _interopRequireDefault(require("../../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ResizeHandlerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  init() {
+    this._adapter.registerEvents();
+  }
+  destroy() {
+    this._adapter.unregisterEvents();
+  }
+}
+exports.ResizeHandlerFoundation = ResizeHandlerFoundation;
+class ResizeItemFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  init() {}
+  destroy() {}
+}
+exports.ResizeItemFoundation = ResizeItemFoundation;
+class ResizeGroupFoundation extends _foundation.default {
+  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 = (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: 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] = (0, _utils.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 = (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), availableSize, lastOffset);
+        nextNewSize = lastItemSize + nextItemSize - lastNewSize;
+      }
+      if (nextFlag) {
+        nextNewSize = (0, _utils.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] = (0, _utils.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] = (0, _utils.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 ? (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');
+        }
+        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() {}
+}
+exports.ResizeGroupFoundation = ResizeGroupFoundation;

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

@@ -0,0 +1,34 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-resizable-resizable {
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.semi-resizable-resizableHandler {
+  position: absolute;
+  user-select: none;
+  z-index: 2000;
+}
+.semi-resizable-group {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+.semi-resizable-item {
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.semi-resizable-handler {
+  user-select: none;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--semi-color-fill-0);
+  opacity: 1;
+}

package/lib/cjs/resizable/resizable.scss

@@ -0,0 +1,39 @@
+$module: #{$prefix}-resizable;
+
+.#{$module} {
+    &-resizable {
+        position: relative;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    }
+
+    &-resizableHandler {
+        position: absolute;
+        user-select: none;
+        z-index: $z-resizable_handler;
+    }
+    
+    &-group {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
+    }
+
+    &-item {
+        position: relative;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    }
+
+    &-handler {
+        user-select: none;
+        z-index: $z-resizable_handler;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--semi-color-fill-0);
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,70 @@
+import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
+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;
+}
+export declare class ResizableHandlerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizableHandlerAdapter<P, S>, P, S> {
+    constructor(adapter: ResizableHandlerAdapter<P, S>);
+    init(): void;
+    onMouseDown: (e: MouseEvent) => void;
+    destroy(): void;
+}
+export interface ResizableAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getResizable: () => HTMLDivElement | null;
+    registerEvent: () => void;
+    unregisterEvent: () => void;
+}
+export declare class ResizableFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizableAdapter<P, S>, P, S> {
+    constructor(adapter: ResizableAdapter<P, S>);
+    init(): void;
+    flexDirection?: 'row' | 'column';
+    lockAspectRatio: number;
+    resizable: HTMLElement | null;
+    parentLeft: number;
+    parentTop: number;
+    boundaryLeft: number;
+    boundaryRight: number;
+    boundaryTop: number;
+    boundaryBottom: number;
+    targetLeft: number;
+    targetTop: number;
+    get parent(): HTMLElement | null;
+    get window(): Window | null;
+    get propSize(): Size;
+    get size(): NumberSize;
+    get sizeStyle(): {
+        width: string;
+        height: string;
+    };
+    getParentSize(): {
+        width: number;
+        height: number;
+    };
+    registerEvents(): void;
+    unregisterEvents(): void;
+    getCssPropertySize(newSize: number | string, property: 'width' | 'height'): number | string;
+    calBoundaryMax(maxWidth?: number, maxHeight?: number): {
+        maxWidth: number;
+        maxHeight: number;
+    };
+    calDirectionSize(clientX: number, clientY: number): {
+        newWidth: any;
+        newHeight: any;
+    };
+    calAspectRatioSize(newWidth: number, newHeight: number, max: {
+        width?: number;
+        height?: number;
+    }, min: {
+        width?: number;
+        height?: number;
+    }): {
+        newWidth: number;
+        newHeight: number;
+    };
+    setBoundary(): void;
+    onResizeStart: (e: MouseEvent, direction: Direction) => void;
+    onMouseMove: (event: MouseEvent) => void;
+    onMouseUp: (event: MouseEvent) => void;
+    destroy(): void;
+}