ele-admin-plus 1.3.1-beta.1 → 1.4.0-beta.1

package/es/ele-pro-layout/index.js

@@ -1,22 +1,24 @@
-import { defineComponent, ref, shallowRef, computed, markRaw, watch, unref, shallowReactive, provide, nextTick, onMounted, resolveComponent, openBlock, createBlock, normalizeClass, createSlots, withCtx, createCommentVNode, renderSlot, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, shallowRef, computed, markRaw, watch, unref, shallowReactive, provide, nextTick, onMounted, createBlock, openBlock, normalizeClass, createSlots, withCtx, renderSlot, createCommentVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { useRouter } from "vue-router";
-import { HomeOutlined } from "../icons";
+import { HomeOutlined } from "../icons/index";
 import { useTimer, useMediaQuery, useWindowListener } from "../utils/hook";
-import { debounce, isExternalLink, mapTree } from "../utils/core";
+import { debounce, isExternalLink, mapTree } from "../utils/common";
 import ProIframe from "./components/pro-iframe";
 import { getMenuItems, getRouteMatched, getActiveChilds, findTabByKey, getMatchedLevels, getRouteTab, findMenuByPath, findTabByPath } from "./util";
-import { proLayoutProps, proLayoutEmits, PRO_LAYOUT_KEY } from "./props";
+import { proLayoutEmits, proLayoutProps, PRO_LAYOUT_KEY } from "./props";
 import EleAdminLayout from "../ele-admin-layout/index";
-const _sfc_main = defineComponent({
-  name: "EleProLayout",
-  components: { EleAdminLayout, ProIframe },
+const mobileQuery = "(max-width: 768px)";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleProLayout" },
+  __name: "index",
   props: proLayoutProps,
   emits: proLayoutEmits,
-  setup(props, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
     const { currentRoute, push } = useRouter();
     const [startTimer, stopTimer] = useTimer(() => props.menuHoverTimeout);
     const state = { navData: [], sideData: [], boxData: [] };
-    const mobileQuery = "(max-width: 768px)";
     const layoutRef = ref(null);
     const menuData = shallowRef([]);
     const navData = shallowRef([]);
@@ -278,11 +280,11 @@ const _sfc_main = defineComponent({
     const handleLogoClick = (e) => {
       emit("logoClick", isHome.value, e);
     };
-    const handleHeadMenuOpen = (index2, indexPath) => {
-      emit("headMenuOpen", index2, indexPath);
+    const handleHeadMenuOpen = (index, indexPath) => {
+      emit("headMenuOpen", index, indexPath);
     };
-    const handleHeadMenuClose = (index2, indexPath) => {
-      emit("headMenuClose", index2, indexPath);
+    const handleHeadMenuClose = (index, indexPath) => {
+      emit("headMenuClose", index, indexPath);
     };
     const handleHeadMenuItemClick = (item, e) => {
       const path = item.index;
@@ -446,11 +448,11 @@ const _sfc_main = defineComponent({
     const handleBoxMouseLeave = () => {
       resetMenuState();
     };
-    const handleSideMenuOpen = (index2, indexPath) => {
-      emit("sideMenuOpen", index2, indexPath);
+    const handleSideMenuOpen = (index, indexPath) => {
+      emit("sideMenuOpen", index, indexPath);
     };
-    const handleSideMenuClose = (index2, indexPath) => {
-      emit("sideMenuClose", index2, indexPath);
+    const handleSideMenuClose = (index, indexPath) => {
+      emit("sideMenuClose", index, indexPath);
     };
     const handleSideMenuItemClick = (item, e) => {
       const path = item.index;
@@ -773,7 +775,10 @@ const _sfc_main = defineComponent({
     const handleResize = () => {
       const el = getContentElem();
       if (el) {
-        const width = el.clientWidth;
+        const clientWidth = el.clientWidth || 0;
+        const limitedWidth = 1120;
+        const maxWidth = clientWidth > limitedWidth ? limitedWidth : clientWidth;
+        const width = props.fluid ? clientWidth : maxWidth;
         const height = el.clientHeight;
         if (width !== state.contentWidth || height !== state.contentHeight) {
           state.contentWidth = width;
@@ -806,236 +811,185 @@ const _sfc_main = defineComponent({
     onMounted(() => {
       handleResize();
     });
-    return {
-      layoutRef,
-      navActive,
-      sideActive,
-      boxActive,
-      tabData,
-      tabActive,
-      levelData,
-      mobile,
-      homeMenuPath,
-      isHome,
-      hideFooter,
-      layoutHeaders,
-      layoutSidebars,
-      layoutSideboxs,
-      layoutTabs,
-      layoutLevels,
-      routeLayout,
-      routeSideType,
-      isBoxSide,
-      routeTabBar,
-      routeMaximized,
-      sidebar,
-      breadcrumbProps,
-      backTopProps,
-      navMenuProps,
-      sideMenuProps,
-      boxMenuProps,
-      updateCollapse,
-      handleLogoClick,
-      handleHeadMenuOpen,
-      handleHeadMenuClose,
-      handleHeadMenuItemClick,
-      handleHeadMenuItemMouseenter,
-      handleHeadMouseenter,
-      handleHeadMouseleave,
-      handleBoxMenuItemClick,
-      handleBoxMenuItemMouseenter,
-      handleBoxMouseEnter,
-      handleBoxMouseLeave,
-      handleSideMenuOpen,
-      handleSideMenuClose,
-      handleSideMenuItemClick,
-      handleSideMouseEnter,
-      handleSideMouseLeave,
-      handleTabClick,
-      handleTabRemove,
-      handleTabContextMenu,
-      handleTabSortChange
+    __expose({
+      layoutRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(EleAdminLayout, {
+        ref_key: "layoutRef",
+        ref: layoutRef,
+        height: _ctx.height,
+        headerMenus: layoutHeaders.value,
+        headerActive: navActive.value,
+        sidebarMenus: layoutSidebars.value,
+        sidebarActive: sideActive.value,
+        sideboxMenus: layoutSideboxs.value,
+        sideboxActive: isBoxSide.value || _ctx.collapse && !mobile.value ? sideActive.value : boxActive.value,
+        tabs: layoutTabs.value,
+        tabActive: tabActive.value,
+        levels: layoutLevels.value,
+        collapse: _ctx.collapse,
+        compact: _ctx.compact,
+        maximized: routeMaximized.value,
+        tabBar: routeTabBar.value,
+        breadcrumb: breadcrumbProps.value,
+        backTop: backTopProps.value,
+        headerMenuProps: navMenuProps.value,
+        sidebarMenuProps: sideMenuProps.value,
+        sideboxMenuProps: boxMenuProps.value,
+        layout: routeLayout.value,
+        sidebarLayout: routeSideType.value,
+        headerStyle: _ctx.headerStyle,
+        sidebarStyle: _ctx.sidebarStyle,
+        mixSidebarStyle: _ctx.mixSidebarStyle,
+        tabStyle: _ctx.tabStyle,
+        fixedHeader: _ctx.fixedHeader,
+        fixedSidebar: _ctx.fixedSidebar,
+        fixedBody: _ctx.fixedBody,
+        logoInHeader: _ctx.logoInHeader,
+        fixedHome: _ctx.fixedHome,
+        homePath: homeMenuPath.value,
+        isHome: isHome.value,
+        tabContextMenu: _ctx.tabContextMenu,
+        tabContextMenus: _ctx.tabContextMenus,
+        tabSortable: _ctx.tabSortable,
+        headerTitleSlot: _ctx.headerTitleSlot,
+        headerIconSlot: _ctx.headerIconSlot,
+        sidebarTitleSlot: _ctx.sidebarTitleSlot,
+        sidebarIconSlot: _ctx.sidebarIconSlot,
+        sideboxTitleSlot: _ctx.sideboxTitleSlot,
+        sideboxIconSlot: _ctx.sideboxIconSlot,
+        headerCustomStyle: _ctx.headerCustomStyle,
+        sidebarCustomStyle: _ctx.sidebarCustomStyle,
+        sideboxCustomStyle: _ctx.sideboxCustomStyle,
+        sideCustomStyle: _ctx.sideCustomStyle,
+        tabsCustomStyle: _ctx.tabsCustomStyle,
+        contentCustomStyle: _ctx.contentCustomStyle,
+        logoStyle: _ctx.logoStyle,
+        logoTitleStyle: _ctx.logoTitleStyle,
+        headerMenusStyle: _ctx.headerMenusStyle,
+        sidebarMenusStyle: _ctx.sidebarMenusStyle,
+        sideboxMenusStyle: _ctx.sideboxMenusStyle,
+        logoSrc: _ctx.logoSrc,
+        logoTitle: _ctx.logoTitle,
+        menuScrollToActive: _ctx.menuScrollToActive,
+        mobile: mobile.value,
+        class: normalizeClass(["ele-pro-layout", { "ele-admin-limited": !_ctx.fluid }]),
+        "onUpdate:collapse": updateCollapse,
+        onLogoClick: handleLogoClick,
+        onHeadMenuOpen: handleHeadMenuOpen,
+        onHeadMenuClose: handleHeadMenuClose,
+        onHeadMenuItemClick: handleHeadMenuItemClick,
+        onHeadMenuItemMouseenter: handleHeadMenuItemMouseenter,
+        onHeadMouseenter: handleHeadMouseenter,
+        onHeadMouseleave: handleHeadMouseleave,
+        onBoxMenuItemClick: handleBoxMenuItemClick,
+        onBoxMenuItemMouseenter: handleBoxMenuItemMouseenter,
+        onBoxMouseenter: handleBoxMouseEnter,
+        onBoxMouseleave: handleBoxMouseLeave,
+        onSideMenuOpen: handleSideMenuOpen,
+        onSideMenuClose: handleSideMenuClose,
+        onSideMenuItemClick: handleSideMenuItemClick,
+        onSideMouseenter: handleSideMouseEnter,
+        onSideMouseleave: handleSideMouseLeave,
+        onTabClick: handleTabClick,
+        onTabRemove: handleTabRemove,
+        onTabContextMenu: handleTabContextMenu,
+        onTabSortChange: handleTabSortChange
+      }, createSlots({
+        body: withCtx(() => [
+          _ctx.tabBar && _ctx.keepAlive ? (openBlock(), createBlock(ProIframe, {
+            key: 0,
+            keepAlive: _ctx.keepAlive,
+            transitionName: _ctx.transitionName,
+            transitionDelay: _ctx.transitionDelay,
+            tabData: tabData.value,
+            tabActive: tabActive.value
+          }, null, 8, ["keepAlive", "transitionName", "transitionDelay", "tabData", "tabActive"])) : createCommentVNode("", true)
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          !hideFooter.value ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.logo ? {
+          name: "logo",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "logo", {
+              collapse: _ctx.collapse,
+              sidebar: sidebar.value
+            })
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.logoTitle ? {
+          name: "logoTitle",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "logoTitle", {
+              collapse: _ctx.collapse,
+              sidebar: sidebar.value
+            })
+          ]),
+          key: "1"
+        } : void 0,
+        _ctx.$slots.breadcrumb ? {
+          name: "breadcrumb",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "breadcrumb", {
+              levels: levelData.value,
+              isHome: isHome.value,
+              homePath: homeMenuPath.value,
+              sidebar: sidebar.value
+            })
+          ]),
+          key: "2"
+        } : void 0,
+        _ctx.$slots.left ? {
+          name: "left",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "left", { sidebar: sidebar.value })
+          ]),
+          key: "3"
+        } : void 0,
+        _ctx.$slots.center ? {
+          name: "center",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "center", { sidebar: sidebar.value })
+          ]),
+          key: "4"
+        } : void 0,
+        _ctx.$slots.right ? {
+          name: "right",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "right", { sidebar: sidebar.value })
+          ]),
+          key: "5"
+        } : void 0,
+        renderList(Object.keys(_ctx.$slots).filter(
+          (k) => ![
+            "default",
+            "logo",
+            "logoTitle",
+            "breadcrumb",
+            "left",
+            "center",
+            "right",
+            "footer",
+            "body"
+          ].includes(k)
+        ), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["height", "headerMenus", "headerActive", "sidebarMenus", "sidebarActive", "sideboxMenus", "sideboxActive", "tabs", "tabActive", "levels", "collapse", "compact", "maximized", "tabBar", "breadcrumb", "backTop", "headerMenuProps", "sidebarMenuProps", "sideboxMenuProps", "layout", "sidebarLayout", "headerStyle", "sidebarStyle", "mixSidebarStyle", "tabStyle", "fixedHeader", "fixedSidebar", "fixedBody", "logoInHeader", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabContextMenus", "tabSortable", "headerTitleSlot", "headerIconSlot", "sidebarTitleSlot", "sidebarIconSlot", "sideboxTitleSlot", "sideboxIconSlot", "headerCustomStyle", "sidebarCustomStyle", "sideboxCustomStyle", "sideCustomStyle", "tabsCustomStyle", "contentCustomStyle", "logoStyle", "logoTitleStyle", "headerMenusStyle", "sidebarMenusStyle", "sideboxMenusStyle", "logoSrc", "logoTitle", "menuScrollToActive", "mobile", "class"]);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ProIframe = resolveComponent("ProIframe");
-  const _component_EleAdminLayout = resolveComponent("EleAdminLayout");
-  return openBlock(), createBlock(_component_EleAdminLayout, {
-    ref: "layoutRef",
-    height: _ctx.height,
-    headerMenus: _ctx.layoutHeaders,
-    headerActive: _ctx.navActive,
-    sidebarMenus: _ctx.layoutSidebars,
-    sidebarActive: _ctx.sideActive,
-    sideboxMenus: _ctx.layoutSideboxs,
-    sideboxActive: _ctx.isBoxSide || _ctx.collapse && !_ctx.mobile ? _ctx.sideActive : _ctx.boxActive,
-    tabs: _ctx.layoutTabs,
-    tabActive: _ctx.tabActive,
-    levels: _ctx.layoutLevels,
-    collapse: _ctx.collapse,
-    compact: _ctx.compact,
-    maximized: _ctx.routeMaximized,
-    tabBar: _ctx.routeTabBar,
-    breadcrumb: _ctx.breadcrumbProps,
-    backTop: _ctx.backTopProps,
-    headerMenuProps: _ctx.navMenuProps,
-    sidebarMenuProps: _ctx.sideMenuProps,
-    sideboxMenuProps: _ctx.boxMenuProps,
-    layout: _ctx.routeLayout,
-    sidebarLayout: _ctx.routeSideType,
-    headerStyle: _ctx.headerStyle,
-    sidebarStyle: _ctx.sidebarStyle,
-    tabStyle: _ctx.tabStyle,
-    fixedHeader: _ctx.fixedHeader,
-    fixedSidebar: _ctx.fixedSidebar,
-    fixedBody: _ctx.fixedBody,
-    logoInHeader: _ctx.logoInHeader,
-    fixedHome: _ctx.fixedHome,
-    homePath: _ctx.homeMenuPath,
-    isHome: _ctx.isHome,
-    tabContextMenu: _ctx.tabContextMenu,
-    tabContextMenus: _ctx.tabContextMenus,
-    tabSortable: _ctx.tabSortable,
-    headerTitleSlot: _ctx.headerTitleSlot,
-    headerIconSlot: _ctx.headerIconSlot,
-    sidebarTitleSlot: _ctx.sidebarTitleSlot,
-    sidebarIconSlot: _ctx.sidebarIconSlot,
-    sideboxTitleSlot: _ctx.sideboxTitleSlot,
-    sideboxIconSlot: _ctx.sideboxIconSlot,
-    headerCustomStyle: _ctx.headerCustomStyle,
-    sidebarCustomStyle: _ctx.sidebarCustomStyle,
-    sideboxCustomStyle: _ctx.sideboxCustomStyle,
-    tabsCustomStyle: _ctx.tabsCustomStyle,
-    contentCustomStyle: _ctx.contentCustomStyle,
-    logoStyle: _ctx.logoStyle,
-    logoTitleStyle: _ctx.logoTitleStyle,
-    headerMenusStyle: _ctx.headerMenusStyle,
-    sidebarMenusStyle: _ctx.sidebarMenusStyle,
-    sideboxMenusStyle: _ctx.sideboxMenusStyle,
-    mobile: _ctx.mobile,
-    class: normalizeClass(["ele-pro-layout", { "ele-admin-limited": !_ctx.fluid }]),
-    "onUpdate:collapse": _ctx.updateCollapse,
-    onLogoClick: _ctx.handleLogoClick,
-    onHeadMenuOpen: _ctx.handleHeadMenuOpen,
-    onHeadMenuClose: _ctx.handleHeadMenuClose,
-    onHeadMenuItemClick: _ctx.handleHeadMenuItemClick,
-    onHeadMenuItemMouseenter: _ctx.handleHeadMenuItemMouseenter,
-    onHeadMouseenter: _ctx.handleHeadMouseenter,
-    onHeadMouseleave: _ctx.handleHeadMouseleave,
-    onBoxMenuItemClick: _ctx.handleBoxMenuItemClick,
-    onBoxMenuItemMouseenter: _ctx.handleBoxMenuItemMouseenter,
-    onBoxMouseenter: _ctx.handleBoxMouseEnter,
-    onBoxMouseleave: _ctx.handleBoxMouseLeave,
-    onSideMenuOpen: _ctx.handleSideMenuOpen,
-    onSideMenuClose: _ctx.handleSideMenuClose,
-    onSideMenuItemClick: _ctx.handleSideMenuItemClick,
-    onSideMouseenter: _ctx.handleSideMouseEnter,
-    onSideMouseleave: _ctx.handleSideMouseLeave,
-    onTabClick: _ctx.handleTabClick,
-    onTabRemove: _ctx.handleTabRemove,
-    onTabContextMenu: _ctx.handleTabContextMenu,
-    onTabSortChange: _ctx.handleTabSortChange
-  }, createSlots({
-    body: withCtx(() => [
-      _ctx.tabBar && _ctx.keepAlive ? (openBlock(), createBlock(_component_ProIframe, {
-        key: 0,
-        keepAlive: _ctx.keepAlive,
-        transitionName: _ctx.transitionName,
-        transitionDelay: _ctx.transitionDelay,
-        tabData: _ctx.tabData,
-        tabActive: _ctx.tabActive
-      }, null, 8, ["keepAlive", "transitionName", "transitionDelay", "tabData", "tabActive"])) : createCommentVNode("", true)
-    ]),
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "default"),
-      !_ctx.hideFooter ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : createCommentVNode("", true)
-    ]),
-    _: 2
-  }, [
-    _ctx.$slots.logo ? {
-      name: "logo",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "logo", {
-          collapse: _ctx.collapse,
-          sidebar: _ctx.sidebar
-        })
-      ]),
-      key: "0"
-    } : void 0,
-    _ctx.$slots.logoTitle ? {
-      name: "logoTitle",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "logoTitle", {
-          collapse: _ctx.collapse,
-          sidebar: _ctx.sidebar
-        })
-      ]),
-      key: "1"
-    } : void 0,
-    _ctx.$slots.breadcrumb ? {
-      name: "breadcrumb",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "breadcrumb", {
-          levels: _ctx.levelData,
-          isHome: _ctx.isHome,
-          homePath: _ctx.homeMenuPath,
-          sidebar: _ctx.sidebar
-        })
-      ]),
-      key: "2"
-    } : void 0,
-    _ctx.$slots.left ? {
-      name: "left",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "left", { sidebar: _ctx.sidebar })
-      ]),
-      key: "3"
-    } : void 0,
-    _ctx.$slots.center ? {
-      name: "center",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "center", { sidebar: _ctx.sidebar })
-      ]),
-      key: "4"
-    } : void 0,
-    _ctx.$slots.right ? {
-      name: "right",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "right", { sidebar: _ctx.sidebar })
-      ]),
-      key: "5"
-    } : void 0,
-    renderList(Object.keys(_ctx.$slots).filter(
-      (k) => ![
-        "default",
-        "logo",
-        "logoTitle",
-        "breadcrumb",
-        "left",
-        "center",
-        "right",
-        "footer",
-        "body"
-      ].includes(k)
-    ), (name) => {
-      return {
-        name,
-        fn: withCtx((slotProps) => [
-          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-        ])
-      };
-    })
-  ]), 1032, ["height", "headerMenus", "headerActive", "sidebarMenus", "sidebarActive", "sideboxMenus", "sideboxActive", "tabs", "tabActive", "levels", "collapse", "compact", "maximized", "tabBar", "breadcrumb", "backTop", "headerMenuProps", "sidebarMenuProps", "sideboxMenuProps", "layout", "sidebarLayout", "headerStyle", "sidebarStyle", "tabStyle", "fixedHeader", "fixedSidebar", "fixedBody", "logoInHeader", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabContextMenus", "tabSortable", "headerTitleSlot", "headerIconSlot", "sidebarTitleSlot", "sidebarIconSlot", "sideboxTitleSlot", "sideboxIconSlot", "headerCustomStyle", "sidebarCustomStyle", "sideboxCustomStyle", "tabsCustomStyle", "contentCustomStyle", "logoStyle", "logoTitleStyle", "headerMenusStyle", "sidebarMenusStyle", "sideboxMenusStyle", "mobile", "class", "onUpdate:collapse", "onLogoClick", "onHeadMenuOpen", "onHeadMenuClose", "onHeadMenuItemClick", "onHeadMenuItemMouseenter", "onHeadMouseenter", "onHeadMouseleave", "onBoxMenuItemClick", "onBoxMenuItemMouseenter", "onBoxMouseenter", "onBoxMouseleave", "onSideMenuOpen", "onSideMenuClose", "onSideMenuItemClick", "onSideMouseenter", "onSideMouseleave", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"]);
-}
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  index as default
+  _sfc_main as default
 };