ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/lib/ele-split-panel/index.cjs

@@ -2,10 +2,11 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const index = require("../icons/index");
-const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const hook = require("../utils/hook");
+const MainContent = require("../ele-loading/components/main-content");
 const util = require("../ele-pro-layout/util");
 const props = require("./props");
-const _hoisted_1 = { class: "ele-split-panel-space" };
+const _hoisted_1 = { class: "ele-split-panel-tools" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleSplitPanel" },
   __name: "index",
@@ -15,21 +16,120 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props2 = __props;
     const emit = __emit;
     const isResponsive = util.useResponsive(props2);
-    const rootRef = vue.ref(null);
-    const wrapRef = vue.ref(null);
-    const sideRef = vue.ref(null);
+    const wrapperRef = vue.ref(null);
+    const sideWrapperRef = vue.ref(null);
     const isCollapse = vue.ref(false);
     const resizedSize = vue.ref(null);
     const resizing = vue.ref(false);
+    const sideSize = vue.computed(() => {
+      const size = resizedSize.value ?? props2.size ?? "20%";
+      if (typeof size === "number") {
+        return `${size}px`;
+      }
+      return size;
+    });
+    const spaceSize = vue.computed(() => {
+      const size = props2.space ?? "16px";
+      if (typeof size === "number") {
+        return `${size}px`;
+      }
+      return size;
+    });
+    const sideWrapStyle = vue.computed(() => {
+      const style = {};
+      if (props2.vertical) {
+        style.height = sideSize.value;
+      } else {
+        style.width = sideSize.value;
+      }
+      if (isCollapse.value === true) {
+        const m = `calc(${sideSize.value} * -1)`;
+        if (props2.vertical) {
+          if (sideSize.value.endsWith("px")) {
+            if (props2.reverse) {
+              style.margin = `0 0 ${m} 0`;
+            } else {
+              style.margin = `${m} 0 0 0`;
+            }
+          } else {
+            style.height = 0;
+          }
+        } else {
+          if (sideSize.value.endsWith("px") || sideSize.value.endsWith("%")) {
+            if (props2.reverse) {
+              style.margin = `0 ${m} 0 0`;
+            } else {
+              style.margin = `0 0 0 ${m}`;
+            }
+          } else {
+            style.width = 0;
+          }
+        }
+      } else {
+        if (props2.vertical) {
+          if (props2.reverse) {
+            style.marginTop = spaceSize.value;
+          } else {
+            style.marginBottom = spaceSize.value;
+          }
+        } else {
+          if (props2.reverse) {
+            style.marginLeft = spaceSize.value;
+          } else {
+            style.marginRight = spaceSize.value;
+          }
+        }
+      }
+      return style;
+    });
+    const btnOffsetStyle = vue.computed(() => {
+      const offset = props2.collapseBtnOffset;
+      if (isCollapse.value !== true || offset == null || offset === "") {
+        return {};
+      }
+      const p = typeof offset === "number" ? `${offset}px` : offset;
+      return props2.vertical ? props2.reverse ? { marginBottom: p } : { marginTop: p } : props2.reverse ? { marginRight: p } : { marginLeft: p };
+    });
+    const btnGroupStyle = vue.computed(() => {
+      const offset = props2.collapseBtnOffset;
+      if (offset == null || offset === "") {
+        return {};
+      }
+      const p = typeof offset === "number" ? `${offset}px` : offset;
+      return { gap: `calc(${p} * 2)` };
+    });
     const toggleCollapse = (collapse) => {
-      isCollapse.value = typeof collapse === "boolean" ? collapse : !isCollapse.value;
-      emit("update:collapse", isCollapse.value);
+      const c = collapse === "body" || typeof collapse === "boolean" ? collapse : !isCollapse.value;
+      if (isCollapse.value !== c) {
+        isCollapse.value = c;
+      }
+      if (props2.collapse !== isCollapse.value) {
+        emit("update:collapse", isCollapse.value);
+      }
     };
     const resetSize = () => {
       resizedSize.value = null;
     };
-    const getMaxSize = (el) => {
-      const size = props2.vertical ? el.clientHeight : el.clientWidth;
+    const getResizedSize = (size) => {
+      const el = wrapperRef.value;
+      if (!props2.percentage || !el) {
+        return `${size}px`;
+      }
+      const sideSize2 = props2.vertical ? el.offsetHeight : el.offsetWidth;
+      return `${size / sideSize2 * 100}%`;
+    };
+    const getMinSize = () => {
+      return !props2.minSize || props2.minSize < 0 ? 0 : props2.minSize;
+    };
+    const getMaxSize = () => {
+      const el = wrapperRef.value;
+      if (!el) {
+        if (props2.maxSize && props2.maxSize > 1) {
+          return props2.maxSize;
+        }
+        return;
+      }
+      const size = props2.vertical ? el.offsetHeight : el.offsetWidth;
       if (!props2.maxSize) {
         return size;
       }
@@ -40,43 +140,48 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return Math.min(props2.maxSize, size);
     };
-    const handleResize = (event) => {
-      var _a;
-      const rootEl = (_a = rootRef.value) == null ? void 0 : _a.$el;
-      const sideEl = sideRef.value;
-      if (!rootEl || !sideEl) {
-        return;
-      }
-      resizing.value = true;
-      const downX = event.clientX;
-      const downY = event.clientY;
-      const downW = sideEl.clientWidth;
-      const downH = sideEl.clientHeight;
-      const min = !props2.minSize || props2.minSize < 0 ? 0 : props2.minSize;
-      const max = getMaxSize(rootEl);
-      const mousemoveFn = (e) => {
-        const size = props2.vertical ? (props2.reverse ? downY - e.clientY : e.clientY - downY) + downH : (props2.reverse ? downX - e.clientX : e.clientX - downX) + downW;
-        resizedSize.value = `${size < min ? min : size > max ? max : size}px`;
-      };
-      const mouseupFn = () => {
-        resizing.value = false;
-        document.removeEventListener("mousemove", mousemoveFn);
-        document.removeEventListener("mouseup", mouseupFn);
-      };
-      document.addEventListener("mousemove", mousemoveFn);
-      document.addEventListener("mouseup", mouseupFn);
-    };
-    vue.watch(
-      [() => props2.collapse, () => props2.allowCollapse],
-      () => {
-        if (!props2.allowCollapse) {
-          isCollapse.value = false;
-        } else {
-          isCollapse.value = props2.collapse;
+    let resizeEventData = null;
+    const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
+      start: () => {
+        const el = sideWrapperRef.value;
+        if (!el) {
+          resizeEventData = null;
+          return;
         }
+        resizing.value = true;
+        resizeEventData = {
+          downW: el.offsetWidth,
+          downH: el.offsetHeight,
+          min: getMinSize(),
+          max: getMaxSize()
+        };
+        emit(
+          "resizeStart",
+          props2.vertical ? resizeEventData.downH : resizeEventData.downW
+        );
       },
-      { immediate: true }
-    );
+      move: ({ distanceX, distanceY, e }) => {
+        if (!resizeEventData) {
+          return;
+        }
+        const dx = distanceX ?? 0;
+        const dy = distanceY ?? 0;
+        const { downW, downH, min, max } = resizeEventData;
+        e.preventDefault();
+        const size = props2.vertical ? (props2.reverse ? -dy : dy) + downH : (props2.reverse ? -dx : dx) + downW;
+        const rSize = Math.max(size, min);
+        resizeEventData.size = max == null ? rSize : Math.min(rSize, max);
+        resizedSize.value = getResizedSize(resizeEventData.size);
+        emit("resize", resizeEventData.size, resizedSize.value);
+      },
+      end: () => {
+        resizing.value = false;
+        const size = resizeEventData?.size;
+        resizeEventData = null;
+        emit("resizeEnd", size, resizedSize.value);
+      },
+      touchmoveOptions: { passive: false }
+    });
     vue.watch(
       () => props2.size,
       () => {
@@ -85,105 +190,196 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     );
     vue.watch(
       () => props2.minSize,
-      (minSize) => {
-        const min = !minSize || minSize < 0 ? 0 : minSize;
-        if (resizedSize.value && Number.parseInt(resizedSize.value) < min) {
-          resizedSize.value = min + "px";
+      () => {
+        if (resizedSize.value) {
+          const min = getMinSize();
+          if (resizedSize.value.endsWith("px")) {
+            if (Number.parseInt(resizedSize.value) < min) {
+              resizedSize.value = getResizedSize(min);
+            }
+          } else if (resizedSize.value.endsWith("%")) {
+            const el = wrapperRef.value;
+            if (el) {
+              const sideSize2 = props2.vertical ? el.offsetHeight : el.offsetWidth;
+              if (Number.parseInt(resizedSize.value) / 100 * sideSize2 < min) {
+                resizedSize.value = getResizedSize(min);
+              }
+            }
+          }
         }
       }
     );
-    vue.watch(
-      () => props2.maxSize,
-      () => {
-        var _a;
-        const rootEl = (_a = rootRef.value) == null ? void 0 : _a.$el;
-        if (resizedSize.value && rootEl) {
-          const max = getMaxSize(rootEl);
-          if (Number.parseInt(resizedSize.value) > max) {
-            resizedSize.value = max + "px";
+    vue.watch([() => props2.maxSize, () => props2.vertical], () => {
+      if (resizedSize.value) {
+        const max = getMaxSize();
+        if (max != null) {
+          if (resizedSize.value.endsWith("px")) {
+            if (Number.parseInt(resizedSize.value) > max) {
+              resizedSize.value = getResizedSize(max);
+            }
+          } else if (resizedSize.value.endsWith("%")) {
+            const el = wrapperRef.value;
+            if (el) {
+              const sideSize2 = props2.vertical ? el.offsetHeight : el.offsetWidth;
+              if (Number.parseInt(resizedSize.value) / 100 * sideSize2 > max) {
+                resizedSize.value = getResizedSize(max);
+              }
+            }
           }
         }
       }
+    });
+    vue.watch(
+      [() => props2.collapse, () => props2.allowCollapse],
+      () => {
+        if (props2.allowCollapse !== true && props2.allowCollapse !== "both") {
+          toggleCollapse(false);
+        } else if (props2.allowCollapse !== "both" && props2.collapse === "body") {
+          toggleCollapse(false);
+        } else {
+          toggleCollapse(
+            props2.collapse === "body" || props2.collapse === true ? props2.collapse : false
+          );
+        }
+      },
+      { immediate: true }
     );
     __expose({
       toggleCollapse,
       resetSize
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(ReceiverView), {
-        ref_key: "rootRef",
-        ref: rootRef,
-        class: vue.normalizeClass([
-          "ele-split-panel",
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        class: vue.normalizeClass(["ele-split-panel", [
           { "is-reverse": _ctx.reverse },
           { "is-vertical": _ctx.vertical },
-          { "is-collapse": isCollapse.value },
+          { "is-collapse": isCollapse.value === true },
+          { "is-maximized": isCollapse.value === "body" },
           { "is-resizing": resizing.value },
           { "is-responsive": vue.unref(isResponsive) },
-          { "is-flex-table": _ctx.flexTable }
-        ]),
-        style: vue.normalizeStyle({
-          "--ele-split-size": resizedSize.value || _ctx.size,
-          "--ele-split-space": _ctx.space
-        })
-      }, {
-        default: vue.withCtx(() => [
+          { "is-flex-table": _ctx.flexTable && _ctx.flexTable !== "auto" },
+          { "is-flex-auto-table": _ctx.flexTable === "auto" }
+        ]])
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "sideWrapperRef",
+          ref: sideWrapperRef,
+          class: "ele-split-panel-wrap",
+          style: vue.normalizeStyle([_ctx.customWrapStyle, sideWrapStyle.value])
+        }, [
           vue.createElementVNode("div", {
-            ref_key: "wrapRef",
-            ref: wrapRef,
-            class: "ele-split-panel-wrap",
-            style: vue.normalizeStyle(_ctx.customWrapStyle)
+            class: "ele-split-panel-side",
+            style: vue.normalizeStyle(_ctx.customStyle)
           }, [
-            vue.createElementVNode("div", {
-              ref_key: "sideRef",
-              ref: sideRef,
-              class: "ele-split-panel-side",
-              style: vue.normalizeStyle(_ctx.customStyle)
+            _ctx.$slots.sideHeader ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "ele-split-panel-side-header",
+              style: vue.normalizeStyle(_ctx.sideHeaderStyle)
             }, [
-              vue.renderSlot(_ctx.$slots, "default")
-            ], 4),
-            vue.createElementVNode("div", _hoisted_1, [
-              _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: "ele-split-resize-line",
-                onMousedown: handleResize
-              }, null, 32)) : vue.createCommentVNode("", true)
-            ])
+              vue.renderSlot(_ctx.$slots, "sideHeader")
+            ], 4)) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          vue.createElementVNode("div", {
-            class: "ele-split-panel-body",
-            style: vue.normalizeStyle(_ctx.bodyStyle)
-          }, [
+          vue.createElementVNode("div", _hoisted_1, [
+            _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "ele-split-panel-resize",
+              onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => vue.unref(handleMousedown) && vue.unref(handleMousedown)(...args)),
+              onTouchstartPassive: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => vue.unref(handleTouchstart) && vue.unref(handleTouchstart)(...args))
+            }, null, 32)) : vue.createCommentVNode("", true),
+            _ctx.allowCollapse === "both" ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 1,
+              class: "ele-split-panel-collapse-btn-group",
+              style: vue.normalizeStyle(btnGroupStyle.value)
+            }, [
+              vue.createElementVNode("div", {
+                style: vue.normalizeStyle(_ctx.collapseStyle),
+                class: "ele-split-panel-collapse-btn is-collapse-btn",
+                onClick: _cache[2] || (_cache[2] = ($event) => toggleCollapse(isCollapse.value === "body" ? false : true))
+              }, [
+                vue.renderSlot(_ctx.$slots, "collapse", { collapse: isCollapse.value }, () => [
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-split-panel-collapse-icon" }, {
+                    default: vue.withCtx(() => [
+                      _ctx.vertical ? (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowUp), {
+                        key: 0,
+                        style: { strokeWidth: 5, marginTop: "-1.25px" }
+                      })) : (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowLeft), {
+                        key: 1,
+                        style: { strokeWidth: 5, marginLeft: "-1.25px" }
+                      }))
+                    ]),
+                    _: 1
+                  })
+                ])
+              ], 4),
+              vue.createElementVNode("div", {
+                style: vue.normalizeStyle(_ctx.collapseStyle),
+                class: "ele-split-panel-collapse-btn is-maximized-btn",
+                onClick: _cache[3] || (_cache[3] = ($event) => toggleCollapse(isCollapse.value === true ? false : "body"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "maximized", { collapse: isCollapse.value }, () => [
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-split-panel-collapse-icon" }, {
+                    default: vue.withCtx(() => [
+                      _ctx.vertical ? (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowUp), {
+                        key: 0,
+                        style: { strokeWidth: 5, marginTop: "-1.25px" }
+                      })) : (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowLeft), {
+                        key: 1,
+                        style: { strokeWidth: 5, marginLeft: "-1.25px" }
+                      }))
+                    ]),
+                    _: 1
+                  })
+                ])
+              ], 4)
+            ], 4)) : _ctx.allowCollapse === true ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 2,
+              style: vue.normalizeStyle([_ctx.collapseStyle, btnOffsetStyle.value]),
+              class: "ele-split-panel-collapse-btn",
+              onClick: _cache[4] || (_cache[4] = ($event) => toggleCollapse())
+            }, [
+              vue.renderSlot(_ctx.$slots, "collapse", { collapse: isCollapse.value }, () => [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-split-panel-collapse-icon" }, {
+                  default: vue.withCtx(() => [
+                    _ctx.vertical ? (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowUp), {
+                      key: 0,
+                      style: { strokeWidth: 5, marginTop: "-1.25px" }
+                    })) : (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowLeft), {
+                      key: 1,
+                      style: { strokeWidth: 5, marginLeft: "-1.25px" }
+                    }))
+                  ]),
+                  _: 1
+                })
+              ])
+            ], 4)) : vue.createCommentVNode("", true)
+          ])
+        ], 4),
+        vue.createVNode(MainContent, {
+          class: "ele-split-panel-body",
+          style: vue.normalizeStyle(_ctx.bodyStyle)
+        }, {
+          default: vue.withCtx(() => [
+            _ctx.$slots.bodyHeader ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "ele-split-panel-body-header",
+              style: vue.normalizeStyle(_ctx.bodyHeaderStyle)
+            }, [
+              vue.renderSlot(_ctx.$slots, "bodyHeader")
+            ], 4)) : vue.createCommentVNode("", true),
             vue.renderSlot(_ctx.$slots, "body", { collapse: isCollapse.value })
-          ], 4),
-          _ctx.allowCollapse ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            style: vue.normalizeStyle(_ctx.collapseStyle),
-            class: "ele-split-collapse-button",
-            onClick: _cache[0] || (_cache[0] = ($event) => toggleCollapse())
-          }, [
-            vue.renderSlot(_ctx.$slots, "collapse", { collapse: isCollapse.value }, () => [
-              vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-split-collapse-icon" }, {
-                default: vue.withCtx(() => [
-                  _ctx.vertical ? (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowUp), {
-                    key: 0,
-                    style: { "margin-top": "-1.25px" }
-                  })) : (vue.openBlock(), vue.createBlock(vue.unref(index.ArrowLeft), {
-                    key: 1,
-                    style: { "margin-left": "-1.25px" }
-                  }))
-                ]),
-                _: 1
-              })
-            ])
-          ], 4)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
-            class: "ele-split-panel-mask",
-            onClick: _cache[1] || (_cache[1] = ($event) => toggleCollapse())
-          })
-        ]),
-        _: 3
-      }, 8, ["class", "style"]);
+          ]),
+          _: 3
+        }, 8, ["style"]),
+        vue.createElementVNode("div", {
+          class: "ele-split-panel-mask",
+          onClick: _cache[5] || (_cache[5] = ($event) => toggleCollapse())
+        })
+      ], 2);
     };
   }
 });

package/lib/ele-split-panel/index.d.ts

@@ -1,65 +1,84 @@
+import { StyleValue } from '../ele-app/types';
+
 declare function __VLS_template(): {
+    sideHeader?(_: {}): any;
     default?(_: {}): any;
-    body?(_: {
-        collapse: boolean;
-    }): any;
     collapse?(_: {
-        collapse: boolean;
+        collapse: boolean | "body";
+    }): any;
+    maximized?(_: {
+        collapse: boolean | "body";
+    }): any;
+    bodyHeader?(_: {}): any;
+    body?(_: {
+        collapse: boolean | "body";
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    size: StringConstructor;
+    size: (StringConstructor | NumberConstructor)[];
     minSize: NumberConstructor;
     maxSize: NumberConstructor;
-    space: StringConstructor;
-    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    allowCollapse: BooleanConstructor;
-    collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    collapse: BooleanConstructor;
+    space: (StringConstructor | NumberConstructor)[];
+    customStyle: import('vue').PropType<StyleValue>;
+    customWrapStyle: import('vue').PropType<StyleValue>;
+    bodyStyle: import('vue').PropType<StyleValue>;
+    allowCollapse: import('vue').PropType<boolean | "both">;
+    collapseStyle: import('vue').PropType<StyleValue>;
+    collapseBtnOffset: (StringConstructor | NumberConstructor)[];
+    collapse: import('vue').PropType<boolean | "body">;
     vertical: BooleanConstructor;
     reverse: BooleanConstructor;
     resizable: BooleanConstructor;
-    flexTable: BooleanConstructor;
+    percentage: BooleanConstructor;
+    sideHeaderStyle: import('vue').PropType<StyleValue>;
+    bodyHeaderStyle: import('vue').PropType<StyleValue>;
+    flexTable: import('vue').PropType<boolean | "auto">;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
 }>, {
-    toggleCollapse: (collapse?: boolean) => void;
+    toggleCollapse: (collapse?: boolean | "body") => void;
     resetSize: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:collapse": (_collapse: boolean) => void;
+    resize: (_size: number | undefined, _strSize: string | null) => void;
+    "update:collapse": (_collapse: boolean | "body") => void;
+    resizeStart: (_size: number) => void;
+    resizeEnd: (_size: number | undefined, _strSize: string | null) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    size: StringConstructor;
+    size: (StringConstructor | NumberConstructor)[];
     minSize: NumberConstructor;
     maxSize: NumberConstructor;
-    space: StringConstructor;
-    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    allowCollapse: BooleanConstructor;
-    collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
-    collapse: BooleanConstructor;
+    space: (StringConstructor | NumberConstructor)[];
+    customStyle: import('vue').PropType<StyleValue>;
+    customWrapStyle: import('vue').PropType<StyleValue>;
+    bodyStyle: import('vue').PropType<StyleValue>;
+    allowCollapse: import('vue').PropType<boolean | "both">;
+    collapseStyle: import('vue').PropType<StyleValue>;
+    collapseBtnOffset: (StringConstructor | NumberConstructor)[];
+    collapse: import('vue').PropType<boolean | "body">;
     vertical: BooleanConstructor;
     reverse: BooleanConstructor;
     resizable: BooleanConstructor;
-    flexTable: BooleanConstructor;
+    percentage: BooleanConstructor;
+    sideHeaderStyle: import('vue').PropType<StyleValue>;
+    bodyHeaderStyle: import('vue').PropType<StyleValue>;
+    flexTable: import('vue').PropType<boolean | "auto">;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
 }>> & Readonly<{
-    "onUpdate:collapse"?: ((_collapse: boolean) => any) | undefined;
+    onResize?: ((_size: number | undefined, _strSize: string | null) => any) | undefined;
+    "onUpdate:collapse"?: ((_collapse: boolean | "body") => any) | undefined;
+    onResizeStart?: ((_size: number) => any) | undefined;
+    onResizeEnd?: ((_size: number | undefined, _strSize: string | null) => any) | undefined;
 }>, {
     reverse: boolean;
     vertical: boolean;
-    collapse: boolean;
     resizable: boolean;
+    percentage: boolean;
     responsive: boolean;
-    flexTable: boolean;
-    allowCollapse: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;