ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/lib/ele-admin-layout/index.cjs

@@ -0,0 +1,666 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const hook = require("../utils/hook");
+const EleMenus = require("../ele-menus/index");
+const EleBreadcrumb = require("../ele-breadcrumb/index");
+const EleBacktop = require("../ele-backtop/index");
+const LayoutSkeleton = require("./components/layout-skeleton");
+const LayoutTabs = require("./components/layout-tabs");
+const props = require("./props");
+const tabSlots = ["tabTitle", "tabContext", "tabExtra", "tabHome"];
+const ownSlots = [
+  "logo",
+  "logoTitle",
+  "left",
+  "right",
+  "center",
+  "breadcrumb",
+  "top",
+  "bottom",
+  "boxTop",
+  "boxBottom",
+  "body",
+  ...tabSlots
+];
+const _sfc_main = vue.defineComponent({
+  name: "EleAdminLayout",
+  components: {
+    ElScrollbar: elementPlus.ElScrollbar,
+    EleMenus,
+    EleBreadcrumb,
+    EleBacktop,
+    LayoutSkeleton,
+    LayoutTabs
+  },
+  props: props.adminLayoutProps,
+  emits: props.adminLayoutEmits,
+  setup(props$1, { emit }) {
+    const [startDisableTransitionTimer] = hook.useTimer(100);
+    const [startSidebarMenuTimer, stopSidebarMenuTimer] = hook.useTimer(420);
+    const [startSideboxMenuTimer, stopSideboxMenuTimer] = hook.useTimer(420);
+    const [startHeaderHoverTimer, stopHeaderHoverTimer] = hook.useTimer(300);
+    let isHeaderhover = false;
+    const sidebarMenuRef = vue.shallowRef(null);
+    const sideboxMenuRef = vue.shallowRef(null);
+    const contentRef = vue.shallowRef(null);
+    const modalsRef = vue.shallowRef(null);
+    const isDisableTransition = vue.shallowRef(false);
+    const layoutHeight = vue.computed(
+      () => typeof props$1.height === "number" ? `${props$1.height}px` : props$1.height
+    );
+    const isFixedHeader = vue.computed(
+      () => !props$1.fixedBody && props$1.fixedHeader
+    );
+    const isFixedSidebar = vue.computed(
+      () => !props$1.fixedBody && props$1.fixedSidebar
+    );
+    const isTopLayout = vue.computed(() => props$1.layout === "top");
+    const isSideLayout = vue.computed(() => props$1.layout === "side");
+    const isBoxSidebar = vue.computed(
+      () => props$1.sidebarLayout === "box"
+    );
+    const isMixSidebar = vue.computed(
+      () => !isTopLayout.value && (props$1.sidebarLayout === "mix" || isBoxSidebar.value)
+    );
+    const isMobile = vue.computed(() => props$1.mobile && !isTopLayout.value);
+    const isHeaderLogo = vue.computed(
+      () => (props$1.logoInHeader || isTopLayout.value) && !isSideLayout.value && !isMobile.value
+    );
+    const showHeaderMenus = vue.computed(
+      () => isTopLayout.value || props$1.layout === "mix"
+    );
+    const showHeaderTabs = vue.computed(() => props$1.tabBar === "header");
+    const isDarkHeader = vue.computed(
+      () => props$1.headerStyle === "dark"
+    );
+    const isPrimaryHeader = vue.computed(
+      () => props$1.headerStyle === "primary"
+    );
+    const isButtonTab = vue.computed(() => props$1.tabStyle === "button");
+    const isDarkSidebar = vue.computed(
+      () => props$1.sidebarStyle === "dark"
+    );
+    const isDarkMixSidebar = vue.computed(
+      () => isMixSidebar.value && !isHeaderLogo.value && isDarkSidebar.value && (isDarkHeader.value || isPrimaryHeader.value)
+    );
+    const isGhostHeader = vue.computed(
+      () => !isDarkHeader.value && !isPrimaryHeader.value && showHeaderTabs.value && isButtonTab.value
+    );
+    const isGhostSidebar = vue.computed(
+      () => isGhostHeader.value && !isDarkSidebar.value
+    );
+    const isCollapseSidebar = vue.computed(
+      () => !isMobile.value && props$1.collapse
+    );
+    const isCollapseMobile = vue.computed(
+      () => isMobile.value && props$1.collapse
+    );
+    const getContentEl = () => {
+      return contentRef.value;
+    };
+    const getModalsEl = () => {
+      return modalsRef.value;
+    };
+    const sidebarScrollToActive = () => {
+      stopSidebarMenuTimer();
+      if (sidebarMenuRef.value == null || isCollapseMobile.value || isMixSidebar.value && isCollapseSidebar.value) {
+        return;
+      }
+      startSidebarMenuTimer(() => {
+        sidebarMenuRef.value && sidebarMenuRef.value.scrollToActive();
+      });
+    };
+    const sideboxScrollToActive = () => {
+      stopSideboxMenuTimer();
+      if (sideboxMenuRef.value == null || isCollapseMobile.value) {
+        return;
+      }
+      startSideboxMenuTimer(() => {
+        sideboxMenuRef.value && sideboxMenuRef.value.scrollToActive();
+      });
+    };
+    const updateCollapse = (value) => {
+      const collapse = typeof value === "boolean" ? value : !props$1.collapse;
+      if (collapse !== props$1.collapse) {
+        emit("update:collapse", collapse);
+      }
+    };
+    const handleLogoClick = (e) => {
+      emit("logoClick", e);
+    };
+    const handleHeadMenuOpen = (index2, indexPath) => {
+      emit("headMenuOpen", index2, indexPath);
+    };
+    const handleHeadMenuClose = (index2, indexPath) => {
+      emit("headMenuClose", index2, indexPath);
+    };
+    const handleHeadMenuItemClick = (item, e) => {
+      emit("headMenuItemClick", item, e);
+    };
+    const handleHeadMenuItemMouseenter = (item, e) => {
+      emit("headMenuItemMouseenter", item, e);
+      handleHeadMouseenter(e);
+    };
+    const handleHeadMenuItemMouseleave = (item, e) => {
+      emit("headMenuItemMouseleave", item, e);
+      handleHeadMouseleave(e);
+    };
+    const handleHeadMouseenter = (e) => {
+      stopHeaderHoverTimer();
+      if (!isHeaderhover) {
+        isHeaderhover = true;
+        emit("headMouseenter", e);
+      }
+    };
+    const handleHeadMouseleave = (e) => {
+      startHeaderHoverTimer(() => {
+        isHeaderhover = false;
+        emit("headMouseleave", e);
+      });
+    };
+    const handleBoxMenuItemClick = (item, e) => {
+      emit("boxMenuItemClick", item, e);
+    };
+    const handleBoxMenuItemMouseenter = (item, e) => {
+      emit("boxMenuItemMouseenter", item, e);
+    };
+    const handleBoxMenuItemMouseleave = (item, e) => {
+      emit("boxMenuItemMouseleave", item, e);
+    };
+    const handleBoxMouseEnter = (e) => {
+      emit("boxMouseenter", e);
+    };
+    const handleBoxMouseLeave = (e) => {
+      emit("boxMouseleave", e);
+    };
+    const handleSideMenuOpen = (index2, indexPath) => {
+      emit("sideMenuOpen", index2, indexPath);
+    };
+    const handleSideMenuClose = (index2, indexPath) => {
+      emit("sideMenuClose", index2, indexPath);
+    };
+    const handleSideMenuItemClick = (item, e) => {
+      emit("sideMenuItemClick", item, e);
+    };
+    const handleSideMouseEnter = (e) => {
+      emit("sideMouseenter", e);
+    };
+    const handleSideMouseLeave = (e) => {
+      emit("sideMouseleave", e);
+    };
+    const handleTabClick = (option) => {
+      emit("tabClick", option);
+    };
+    const handleTabRemove = (name) => {
+      emit("tabRemove", name);
+    };
+    const handleTabContextMenu = (option) => {
+      emit("tabContextMenu", option);
+    };
+    const handleTabSortChange = (data) => {
+      emit("tabSortChange", data);
+    };
+    const layoutProvide = vue.shallowReactive({
+      layout: props$1.layout,
+      maximized: props$1.maximized,
+      fixedHeader: isFixedHeader.value,
+      fixedBody: props$1.fixedBody,
+      modalsEl: null,
+      getModalsEl
+    });
+    vue.provide(props.LAYOUT_KEY, layoutProvide);
+    vue.watch(
+      [
+        () => props$1.layout,
+        () => props$1.sidebarLayout,
+        () => props$1.fixedSidebar,
+        () => props$1.fixedBody,
+        () => props$1.logoInHeader,
+        () => props$1.maximized,
+        isFixedHeader,
+        isMobile
+      ],
+      () => {
+        isDisableTransition.value = true;
+        startDisableTransitionTimer(() => {
+          isDisableTransition.value = false;
+        });
+        if (layoutProvide.layout !== props$1.layout) {
+          layoutProvide.layout = props$1.layout;
+        }
+        if (layoutProvide.maximized !== props$1.maximized) {
+          layoutProvide.maximized = props$1.maximized;
+        }
+        if (layoutProvide.fixedHeader !== isFixedHeader.value) {
+          layoutProvide.fixedHeader = isFixedHeader.value;
+        }
+        if (layoutProvide.fixedBody !== props$1.fixedBody) {
+          layoutProvide.fixedBody = props$1.fixedBody;
+        }
+      }
+    );
+    vue.watch([() => props$1.sidebarActive, () => props$1.collapse], () => {
+      vue.nextTick(() => {
+        sidebarScrollToActive();
+      });
+    });
+    vue.watch([() => props$1.sideboxActive, () => props$1.compact], () => {
+      vue.nextTick(() => {
+        sideboxScrollToActive();
+      });
+    });
+    vue.onMounted(() => {
+      sideboxScrollToActive();
+      sidebarScrollToActive();
+      const modalsEl = getModalsEl();
+      layoutProvide.modalsEl = modalsEl;
+      const contentEl = getContentEl();
+      if (contentEl != null && modalsEl != null) {
+        emit("contentMounted", contentEl, modalsEl);
+      }
+    });
+    return {
+      ownSlots,
+      tabSlots,
+      sidebarMenuRef,
+      sideboxMenuRef,
+      contentRef,
+      modalsRef,
+      isDisableTransition,
+      layoutHeight,
+      isFixedHeader,
+      isFixedSidebar,
+      isTopLayout,
+      isSideLayout,
+      isBoxSidebar,
+      isMixSidebar,
+      isMobile,
+      isHeaderLogo,
+      showHeaderMenus,
+      showHeaderTabs,
+      isDarkHeader,
+      isPrimaryHeader,
+      isButtonTab,
+      isDarkSidebar,
+      isDarkMixSidebar,
+      isGhostHeader,
+      isGhostSidebar,
+      isCollapseSidebar,
+      isCollapseMobile,
+      getContentEl,
+      getModalsEl,
+      updateCollapse,
+      handleLogoClick,
+      handleHeadMenuOpen,
+      handleHeadMenuClose,
+      handleHeadMenuItemClick,
+      handleHeadMenuItemMouseenter,
+      handleHeadMenuItemMouseleave,
+      handleHeadMouseenter,
+      handleHeadMouseleave,
+      handleBoxMenuItemClick,
+      handleBoxMenuItemMouseenter,
+      handleBoxMenuItemMouseleave,
+      handleBoxMouseEnter,
+      handleBoxMouseLeave,
+      handleSideMenuOpen,
+      handleSideMenuClose,
+      handleSideMenuItemClick,
+      handleSideMouseEnter,
+      handleSideMouseLeave,
+      handleTabClick,
+      handleTabRemove,
+      handleTabContextMenu,
+      handleTabSortChange
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-admin-logo"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-admin-tools"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "ele-admin-breadcrumb"
+};
+const _hoisted_4 = {
+  key: 3,
+  class: "ele-admin-menus"
+};
+const _hoisted_5 = {
+  key: 5,
+  class: "ele-admin-tools"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "ele-admin-logo"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "ele-admin-logo-title"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "ele-admin-logo"
+};
+const _hoisted_9 = {
+  ref: "modalsRef",
+  class: "ele-admin-modals"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleBreadcrumb = vue.resolveComponent("EleBreadcrumb");
+  const _component_EleMenus = vue.resolveComponent("EleMenus");
+  const _component_LayoutTabs = vue.resolveComponent("LayoutTabs");
+  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
+  const _component_EleBacktop = vue.resolveComponent("EleBacktop");
+  const _component_LayoutSkeleton = vue.resolveComponent("LayoutSkeleton");
+  return vue.openBlock(), vue.createBlock(_component_LayoutSkeleton, {
+    isHeaderLogo: _ctx.isHeaderLogo,
+    class: vue.normalizeClass([
+      { "is-fixed-body": _ctx.fixedBody },
+      { "is-transition-disabled": _ctx.isDisableTransition },
+      { "is-maximized": _ctx.maximized },
+      { "is-expanded": _ctx.maximized === "expanded" },
+      { "is-mobile": _ctx.isMobile },
+      { "is-collapse": _ctx.isCollapseMobile }
+    ]),
+    style: vue.normalizeStyle({
+      minHeight: _ctx.layoutHeight,
+      height: _ctx.fixedBody ? _ctx.layoutHeight : void 0
+    })
+  }, {
+    head: vue.withCtx(() => [
+      !_ctx.isSideLayout ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass([
+          "ele-admin-header",
+          { "is-dark": _ctx.isDarkHeader },
+          { "is-primary": _ctx.isPrimaryHeader },
+          { "is-ghost": _ctx.isGhostHeader },
+          { "show-divider": _ctx.tabBar && !_ctx.showHeaderTabs && !_ctx.isButtonTab },
+          { "is-fixed": _ctx.isFixedHeader }
+        ]),
+        style: vue.normalizeStyle(_ctx.headerCustomStyle),
+        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.handleHeadMouseenter && _ctx.handleHeadMouseenter(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleHeadMouseleave && _ctx.handleHeadMouseleave(...args))
+      }, [
+        _ctx.isHeaderLogo && (_ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.renderSlot(_ctx.$slots, "logo"),
+          vue.renderSlot(_ctx.$slots, "logoTitle")
+        ])) : vue.createCommentVNode("", true),
+        _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "left")
+        ])) : vue.createCommentVNode("", true),
+        _ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "breadcrumb", {}, () => [
+            _ctx.levels && _ctx.levels.length ? (vue.openBlock(), vue.createBlock(_component_EleBreadcrumb, vue.mergeProps({ key: 0 }, _ctx.breadcrumb === true ? {} : _ctx.breadcrumb, { items: _ctx.levels }), null, 16, ["items"])) : vue.createCommentVNode("", true)
+          ])
+        ])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "center"),
+        !_ctx.showHeaderTabs || _ctx.showHeaderMenus ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          _ctx.showHeaderMenus && _ctx.headerMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
+            key: 0,
+            mode: "horizontal",
+            theme: _ctx.isDarkHeader || _ctx.isPrimaryHeader ? "dark" : "light",
+            popupTheme: _ctx.isDarkHeader ? "dark" : "light"
+          }, _ctx.headerMenuProps || {}, {
+            items: _ctx.headerMenus,
+            defaultActive: _ctx.headerActive,
+            onOpen: _ctx.handleHeadMenuOpen,
+            onClose: _ctx.handleHeadMenuClose,
+            onItemClick: _ctx.handleHeadMenuItemClick,
+            onItemMouseenter: _ctx.handleHeadMenuItemMouseenter,
+            onItemMouseleave: _ctx.handleHeadMenuItemMouseleave
+          }), vue.createSlots({ _: 2 }, [
+            _ctx.headerIconSlot && !_ctx.ownSlots.includes(_ctx.headerIconSlot) && _ctx.$slots[_ctx.headerIconSlot] ? {
+              name: "icon",
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, _ctx.headerIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.headerTitleSlot && !_ctx.ownSlots.includes(_ctx.headerTitleSlot) && _ctx.$slots[_ctx.headerTitleSlot] ? {
+              name: "title",
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, _ctx.headerTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["theme", "popupTheme", "items", "defaultActive", "onOpen", "onClose", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true),
+        _ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
+          key: 4,
+          tabs: _ctx.tabs,
+          active: _ctx.tabActive,
+          fixedHome: _ctx.fixedHome,
+          homePath: _ctx.homePath,
+          isHome: _ctx.isHome,
+          tabStyle: _ctx.tabStyle,
+          tabContextMenu: _ctx.tabContextMenu,
+          tabContextMenus: _ctx.tabContextMenus,
+          tabSortable: _ctx.tabSortable,
+          class: vue.normalizeClass([{ "is-fixed-home": _ctx.fixedHome }]),
+          style: vue.normalizeStyle(_ctx.tabsCustomStyle),
+          onTabClick: _ctx.handleTabClick,
+          onTabRemove: _ctx.handleTabRemove,
+          onTabContextMenu: _ctx.handleTabContextMenu,
+          onTabSortChange: _ctx.handleTabSortChange
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots).filter(
+            (k) => _ctx.tabSlots.includes(k)
+          ), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
+        _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.renderSlot(_ctx.$slots, "right")
+        ])) : vue.createCommentVNode("", true)
+      ], 38)) : vue.createCommentVNode("", true)
+    ]),
+    side: vue.withCtx(() => [
+      !_ctx.isTopLayout ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass([
+          "ele-admin-side",
+          { "is-fixed": _ctx.isFixedSidebar },
+          { "show-placeholder": _ctx.isFixedSidebar && _ctx.isHeaderLogo },
+          { "is-collapse": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isCollapseSidebar },
+          { "is-mix": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isMixSidebar },
+          { "is-compact": !_ctx.isMobile && _ctx.compact },
+          { "is-box": !_ctx.isMobile && _ctx.isBoxSidebar }
+        ]),
+        style: vue.normalizeStyle({ height: _ctx.isFixedSidebar ? _ctx.layoutHeight : void 0 })
+      }, [
+        _ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass([
+            "ele-admin-sidebox",
+            { "is-dark": _ctx.isDarkSidebar },
+            { "is-ghost": _ctx.isGhostSidebar },
+            { "show-divider": !_ctx.isCollapseSidebar && !_ctx.isBoxSidebar },
+            { "is-compact": _ctx.compact }
+          ]),
+          style: vue.normalizeStyle(_ctx.sideboxCustomStyle),
+          onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleBoxMouseEnter && _ctx.handleBoxMouseEnter(...args)),
+          onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.handleBoxMouseLeave && _ctx.handleBoxMouseLeave(...args))
+        }, [
+          !_ctx.isHeaderLogo && _ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.renderSlot(_ctx.$slots, "logo")
+          ])) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "boxTop"),
+          vue.createVNode(_component_ElScrollbar, { class: "ele-admin-menus" }, {
+            default: vue.withCtx(() => [
+              _ctx.sideboxMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
+                key: 0,
+                ref: "sideboxMenuRef",
+                mode: "compact",
+                uniqueOpened: true,
+                collapseTransition: false,
+                theme: _ctx.sidebarStyle
+              }, _ctx.sideboxMenuProps || {}, {
+                items: _ctx.sideboxMenus,
+                defaultActive: _ctx.sideboxActive,
+                collapse: _ctx.compact,
+                onItemClick: _ctx.handleBoxMenuItemClick,
+                onItemMouseenter: _ctx.handleBoxMenuItemMouseenter,
+                onItemMouseleave: _ctx.handleBoxMenuItemMouseleave
+              }), vue.createSlots({ _: 2 }, [
+                _ctx.sideboxIconSlot && !_ctx.ownSlots.includes(_ctx.sideboxIconSlot) && _ctx.$slots[_ctx.sideboxIconSlot] ? {
+                  name: "icon",
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, _ctx.sideboxIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.sideboxTitleSlot && !_ctx.ownSlots.includes(_ctx.sideboxTitleSlot) && _ctx.$slots[_ctx.sideboxTitleSlot] ? {
+                  name: "title",
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, _ctx.sideboxTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ]),
+                  key: "1"
+                } : void 0
+              ]), 1040, ["theme", "items", "defaultActive", "collapse", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }),
+          vue.renderSlot(_ctx.$slots, "boxBottom")
+        ], 38)) : vue.createCommentVNode("", true),
+        !_ctx.isBoxSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass([
+            "ele-admin-sidebar",
+            { "is-dark": _ctx.isMixSidebar ? _ctx.isDarkMixSidebar : _ctx.isDarkSidebar },
+            { "is-ghost": _ctx.isGhostSidebar },
+            { "is-mix": _ctx.isMixSidebar },
+            { "is-collapse": _ctx.isCollapseSidebar }
+          ]),
+          style: vue.normalizeStyle(_ctx.sidebarCustomStyle),
+          onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleSideMouseEnter && _ctx.handleSideMouseEnter(...args)),
+          onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleSideMouseLeave && _ctx.handleSideMouseLeave(...args))
+        }, [
+          _ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            !_ctx.isHeaderLogo && _ctx.$slots.logoTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+              vue.renderSlot(_ctx.$slots, "logoTitle")
+            ])) : vue.createCommentVNode("", true)
+          ], 64)) : !_ctx.isHeaderLogo && (_ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+            vue.renderSlot(_ctx.$slots, "logo"),
+            vue.renderSlot(_ctx.$slots, "logoTitle")
+          ])) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "top"),
+          vue.createVNode(_component_ElScrollbar, { class: "ele-admin-menus" }, {
+            default: vue.withCtx(() => [
+              _ctx.sidebarMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
+                key: 0,
+                ref: "sidebarMenuRef",
+                uniqueOpened: true,
+                collapseTransition: false,
+                theme: _ctx.isMixSidebar && !_ctx.isDarkMixSidebar ? void 0 : _ctx.sidebarStyle
+              }, _ctx.sidebarMenuProps || {}, {
+                items: _ctx.sidebarMenus,
+                defaultActive: _ctx.sidebarActive,
+                collapse: _ctx.isMixSidebar ? false : _ctx.isCollapseSidebar,
+                onOpen: _ctx.handleSideMenuOpen,
+                onClose: _ctx.handleSideMenuClose,
+                onItemClick: _ctx.handleSideMenuItemClick
+              }), vue.createSlots({ _: 2 }, [
+                _ctx.sidebarIconSlot && !_ctx.ownSlots.includes(_ctx.sidebarIconSlot) && _ctx.$slots[_ctx.sidebarIconSlot] ? {
+                  name: "icon",
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, _ctx.sidebarIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.sidebarTitleSlot && !_ctx.ownSlots.includes(_ctx.sidebarTitleSlot) && _ctx.$slots[_ctx.sidebarTitleSlot] ? {
+                  name: "title",
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, _ctx.sidebarTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ]),
+                  key: "1"
+                } : void 0
+              ]), 1040, ["theme", "items", "defaultActive", "collapse", "onOpen", "onClose", "onItemClick"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }),
+          vue.renderSlot(_ctx.$slots, "bottom")
+        ], 38)) : vue.createCommentVNode("", true)
+      ], 6)) : vue.createCommentVNode("", true)
+    ]),
+    tabs: vue.withCtx(() => [
+      _ctx.tabBar && !_ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
+        key: 0,
+        tabs: _ctx.tabs,
+        active: _ctx.tabActive,
+        fixedHome: _ctx.fixedHome,
+        homePath: _ctx.homePath,
+        isHome: _ctx.isHome,
+        tabStyle: _ctx.tabStyle,
+        tabContextMenu: _ctx.tabContextMenu,
+        tabContextMenus: _ctx.tabContextMenus,
+        tabSortable: _ctx.tabSortable,
+        class: vue.normalizeClass([
+          { "is-fixed-home": _ctx.fixedHome },
+          { "is-fixed": _ctx.isFixedHeader },
+          { "is-fixed-top": _ctx.isFixedHeader && (_ctx.isSideLayout || _ctx.maximized) }
+        ]),
+        style: vue.normalizeStyle(_ctx.tabsCustomStyle),
+        onTabClick: _ctx.handleTabClick,
+        onTabRemove: _ctx.handleTabRemove,
+        onTabContextMenu: _ctx.handleTabContextMenu,
+        onTabSortChange: _ctx.handleTabSortChange
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter(
+          (k) => _ctx.tabSlots.includes(k)
+        ), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true)
+    ]),
+    body: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        ref: "contentRef",
+        class: "ele-admin-content",
+        style: vue.normalizeStyle(_ctx.contentCustomStyle)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4),
+      vue.renderSlot(_ctx.$slots, "body"),
+      _ctx.backTop ? (vue.openBlock(), vue.createBlock(_component_EleBacktop, vue.mergeProps({
+        key: 0,
+        target: _ctx.fixedBody && _ctx.contentRef ? _ctx.contentRef : void 0,
+        style: _ctx.fixedBody ? { position: "absolute" } : void 0
+      }, _ctx.backTop === true ? {} : _ctx.backTop), null, 16, ["target", "style"])) : vue.createCommentVNode("", true),
+      vue.createElementVNode("div", _hoisted_9, null, 512)
+    ]),
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        class: "ele-admin-mask",
+        onClick: _cache[6] || (_cache[6] = ($event) => _ctx.updateCollapse())
+      })
+    ]),
+    _: 3
+  }, 8, ["isHeaderLogo", "class", "style"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;