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

package/es/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;

package/es/ele-split-panel/index.js

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