yuang-framework-ui-pc 1.1.44 → 1.1.46

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

@@ -0,0 +1,1010 @@
+"use strict";
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const icons = require("../icons");
+const hook = require("../utils/hook");
+const core = require("../utils/core");
+const ProIframe = require("./components/pro-iframe");
+const util = require("./util");
+const props = require("./props");
+const EleAdminLayout = require("../ele-admin-layout/index");
+const _sfc_main = vue.defineComponent({
+  name: "EleProLayout",
+  components: { EleAdminLayout, ProIframe },
+  props: props.proLayoutProps,
+  emits: props.proLayoutEmits,
+  setup(props$1, { emit }) {
+    const { currentRoute, push } = vueRouter.useRouter();
+    const [startTimer, stopTimer] = hook.useTimer(() => props$1.menuHoverTimeout);
+    const state = { navData: [], sideData: [], boxData: [] };
+    const mobileQuery = "(max-width: 768px)";
+    const layoutRef = vue.ref(null);
+    const menuData = vue.shallowRef([]);
+    const navData = vue.shallowRef([]);
+    const navActive = vue.ref();
+    const sideData = vue.shallowRef([]);
+    const sideActive = vue.ref();
+    const boxData = vue.shallowRef([]);
+    const boxActive = vue.ref();
+    const tabData = vue.shallowRef([]);
+    const tabActive = vue.ref();
+    const levelData = vue.shallowRef([]);
+    const mobile = vue.ref(false);
+    const homeMenuPath = vue.ref();
+    const isHome = vue.ref(false);
+    const hideHeader = vue.ref(false);
+    const hideSidebar = vue.ref(false);
+    const hideSidebox = vue.ref(false);
+    const hideTabs = vue.ref(false);
+    const hideFooter = vue.ref(false);
+    const computedNavigation = () => {
+      let nav = "default";
+      if (hideHeader.value) {
+        nav = "side";
+      } else if (hideSidebar.value && hideSidebox.value) {
+        nav = "top";
+      } else if (props$1.layout === "top" || props$1.layout === "mix") {
+        nav = props$1.layout;
+      }
+      if (mobile.value && (nav === "top" || nav === "mix")) {
+        nav = "default";
+      }
+      return nav;
+    };
+    const computedSideNavigation = () => {
+      if (!hideSidebox.value && hideSidebar.value) {
+        return "box";
+      }
+      return props$1.sidebarLayout === "mix" ? "mix" : "default";
+    };
+    const navigation = vue.ref(computedNavigation());
+    const sideNavigation = vue.ref(computedSideNavigation());
+    const layoutHeaders = vue.computed(() => {
+      const navRoute = props$1.navTrigger !== "click" && props$1.navTrigger !== "hover";
+      return util.getMenuItems(navData.value, navRoute);
+    });
+    const layoutSidebars = vue.computed(() => {
+      const menuRoute = props$1.itemTrigger !== "click" && props$1.itemTrigger !== "hover";
+      return util.getMenuItems(sideData.value, menuRoute);
+    });
+    const layoutSideboxs = vue.computed(() => {
+      const boxRoute = props$1.boxTrigger !== "click" && props$1.boxTrigger !== "hover";
+      return util.getMenuItems(boxData.value, boxRoute);
+    });
+    const layoutTabs = vue.computed(() => {
+      const data = props$1.fixedHome ? tabData.value.filter((t) => !t.home) : tabData.value;
+      const onlyOne = !props$1.fixedHome && data.length === 1;
+      return data.map((d) => {
+        return {
+          name: d.key,
+          label: d.title,
+          closable: onlyOne && d.home ? false : d.closable,
+          meta: d.meta
+        };
+      });
+    });
+    const layoutLevels = vue.computed(() => {
+      const data = [];
+      if (!isHome.value) {
+        const to = homeMenuPath.value;
+        const is = { transform: "scale(1.13)", transformOrigin: "8px -2px" };
+        data.push({
+          key: to,
+          to,
+          icon: vue.markRaw(icons.HomeOutlined),
+          iconStyle: is
+        });
+      }
+      levelData.value.forEach((d) => {
+        data.push({ key: d.path, title: d.title });
+      });
+      return data;
+    });
+    const routeLayout = vue.computed(() => {
+      if (navigation.value !== "top" && navigation.value !== "side" && !layoutSidebars.value.length && !layoutSideboxs.value.length) {
+        return "top";
+      }
+      return navigation.value;
+    });
+    const routeSideType = vue.computed(() => {
+      if (sideNavigation.value === "mix" && !layoutSidebars.value.length) {
+        return "box";
+      }
+      return sideNavigation.value;
+    });
+    const isBoxSide = vue.computed(() => routeSideType.value === "box");
+    const routeTabBar = vue.computed(() => {
+      return hideTabs.value ? false : props$1.tabBar;
+    });
+    const routeMaximized = vue.computed(() => {
+      const max = props$1.maximized;
+      if (hideHeader.value && hideSidebar.value && hideSidebox.value && !max) {
+        return true;
+      }
+      return max === true && props$1.expanded ? "expanded" : max;
+    });
+    const sidebar = vue.computed(() => {
+      return routeLayout.value !== "top" && !isBoxSide.value || mobile.value;
+    });
+    const breadcrumbProps = vue.computed(() => {
+      if (!props$1.breadcrumb || props$1.breadcrumbSeparator == null) {
+        return props$1.breadcrumb;
+      }
+      if (props$1.breadcrumb === true) {
+        return { separator: props$1.breadcrumbSeparator };
+      }
+      return { separator: props$1.breadcrumbSeparator, ...props$1.breadcrumb };
+    });
+    const backTopProps = vue.computed(() => {
+      const backTop = props$1.backTop;
+      const r = props$1.backTopRight;
+      const b = props$1.backTopBottom;
+      const vh = props$1.backTopVisibilityHeight;
+      const t = props$1.backTopTarget;
+      if (!backTop || vh == null && r == null && b == null && t == null) {
+        return backTop;
+      }
+      const prop = backTop === true ? {} : { ...backTop };
+      if (vh != null && prop.visibilityHeight == null) {
+        prop.visibilityHeight = vh;
+      }
+      if (r != null && prop.right == null) {
+        prop.right = r;
+      }
+      if (b != null && prop.bottom == null) {
+        prop.bottom = b;
+      }
+      if (t != null && prop.target == null) {
+        prop.target = t;
+      }
+      return prop;
+    });
+    const navMenuProps = vue.computed(() => {
+      const mProps = props$1.headerMenuProps;
+      const e = props$1.ellipsis;
+      const ep = props$1.ellipsisProps;
+      const mt = props$1.menuTrigger;
+      const mtet = props$1.menuTextEllipsisTooltip;
+      if (e == null && ep == null && mt == null && mtet == null) {
+        return mProps;
+      }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (e != null && prop.ellipsis == null) {
+        prop.ellipsis = e;
+      }
+      if (ep != null && prop.ellipsisProps == null) {
+        prop.ellipsisProps = ep;
+      }
+      if (mt != null && prop.menuTrigger == null) {
+        prop.menuTrigger = mt;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const sideMenuProps = vue.computed(() => {
+      const mProps = props$1.sidebarMenuProps;
+      const s = props$1.sidebarOpeneds;
+      const u = props$1.uniqueOpened;
+      const c = props$1.colorfulIcon;
+      const t = props$1.tooltipEffect;
+      const mtet = props$1.menuTextEllipsisTooltip;
+      if (s == null && u == null && c == null && t == null && mtet == null) {
+        return mProps;
+      }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (s != null && prop.defaultOpeneds == null) {
+        prop.defaultOpeneds = s;
+      }
+      if (u != null && prop.uniqueOpened == null) {
+        prop.uniqueOpened = u;
+      }
+      if (c != null && prop.colorful == null) {
+        prop.colorful = c;
+      }
+      if (t != null && prop.popperEffect == null) {
+        prop.popperEffect = t;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const boxMenuProps = vue.computed(() => {
+      const mProps = props$1.sideboxMenuProps;
+      const ci = props$1.colorfulIcon;
+      const te = props$1.tooltipEffect;
+      const mtet = props$1.menuTextEllipsisTooltip;
+      if (ci == null && te == null && mtet == null) {
+        return mProps;
+      }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (ci != null && prop.popupColorful == null) {
+        prop.popupColorful = ci;
+      }
+      if (te != null && prop.popperEffect == null) {
+        prop.popperEffect = te;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const updateNavigation = () => {
+      const value = computedNavigation();
+      if (navigation.value !== value) {
+        navigation.value = value;
+        return true;
+      }
+    };
+    const updateSideNavigation = () => {
+      const value = computedSideNavigation();
+      if (sideNavigation.value !== value) {
+        sideNavigation.value = value;
+        return true;
+      }
+    };
+    const resetMenuState = () => {
+      if (!state.isHover) {
+        return;
+      }
+      startTimer(() => {
+        state.isHover = false;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        if (navActive.value !== state.navActive) {
+          navActive.value = state.navActive;
+          if (isMixSide) {
+            boxData.value = state.boxData;
+          } else {
+            sideData.value = state.sideData;
+          }
+        }
+        if (isMixSide && boxActive.value !== state.boxActive) {
+          boxActive.value = state.boxActive;
+          sideData.value = state.sideData;
+        }
+      });
+    };
+    const updateCollapse = (collapse) => {
+      if (collapse !== props$1.collapse) {
+        emit("update:collapse", collapse);
+      }
+    };
+    const updateMaximized = (maximized) => {
+      if (maximized !== props$1.maximized) {
+        emit("update:maximized", maximized);
+      }
+    };
+    const handleLogoClick = (e) => {
+      emit("logoClick", isHome.value, e);
+    };
+    const handleHeadMenuOpen = (index2, indexPath) => {
+      emit("headMenuOpen", index2, indexPath);
+    };
+    const handleHeadMenuClose = (index2, indexPath) => {
+      emit("headMenuClose", index2, indexPath);
+    };
+    const handleHeadMenuItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props$1.navTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
+        return;
+      }
+      if (core.isExternalLink(path)) {
+        e.stopPropagation();
+        if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
+        return;
+      }
+      const childMenus = util.getActiveChilds(navData.value, path, "tempChildren");
+      const isChild = !childMenus.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      });
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
+        return;
+      }
+      if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild && path !== vue.unref(currentRoute).fullPath) {
+        push(path);
+        return;
+      }
+      e.stopPropagation();
+      if (navActive.value !== path) {
+        navActive.value = path;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        const isCollapse = sideNavigation.value === "box" || props$1.collapse && !mobile.value;
+        if (!isMixSide) {
+          sideData.value = childMenus;
+          return;
+        }
+        boxData.value = childMenus.map((d) => {
+          return {
+            ...d,
+            children: isCollapse ? d.children : void 0,
+            tempChildren: d.children
+          };
+        });
+      }
+    };
+    const handleHeadMenuItemMouseenter = (item, e) => {
+      if (navigation.value !== "mix") {
+        return;
+      }
+      stopTimer();
+      const path = item.index;
+      const trigger = props$1.navTrigger;
+      if (trigger !== "hover" || !path) {
+        return;
+      }
+      if (!core.isExternalLink(path) && props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+        return;
+      }
+      const temp = util.getActiveChilds(navData.value, path, "tempChildren");
+      if (navActive.value !== path) {
+        state.isHover = true;
+        navActive.value = temp.some((d) => {
+          var _a;
+          return !((_a = d.meta) == null ? void 0 : _a.hide);
+        }) ? path : void 0;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        if (!isMixSide) {
+          sideData.value = temp;
+          return;
+        }
+        boxData.value = temp.map((d) => {
+          return {
+            ...d,
+            children: props$1.collapse ? d.children : void 0,
+            tempChildren: d.children
+          };
+        });
+      }
+    };
+    const handleHeadMouseenter = () => {
+      stopTimer();
+    };
+    const handleHeadMouseleave = () => {
+      resetMenuState();
+    };
+    const handleBoxMenuItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props$1.boxTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
+        return;
+      }
+      if (core.isExternalLink(path)) {
+        e.stopPropagation();
+        if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
+        return;
+      }
+      if (props$1.collapse) {
+        if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+          return;
+        }
+        if (path !== vue.unref(currentRoute).fullPath) {
+          push(path);
+        }
+        return;
+      }
+      const childMenus = util.getActiveChilds(boxData.value, path, "tempChildren");
+      const isChild = !childMenus.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      });
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
+        return;
+      }
+      if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild && path !== vue.unref(currentRoute).fullPath) {
+        push(path);
+        return;
+      }
+      e.stopPropagation();
+      if (boxActive.value !== path) {
+        boxActive.value = path;
+        sideData.value = childMenus;
+      }
+    };
+    const handleBoxMenuItemMouseenter = (item, e) => {
+      if (props$1.collapse) {
+        return;
+      }
+      stopTimer();
+      const path = item.index;
+      const trigger = props$1.boxTrigger;
+      if (trigger !== "hover" || !path) {
+        return;
+      }
+      if (!core.isExternalLink(path) && props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+        return;
+      }
+      const temp = util.getActiveChilds(boxData.value, path, "tempChildren");
+      if (boxActive.value !== path) {
+        state.isHover = true;
+        boxActive.value = temp.some((d) => {
+          var _a;
+          return !((_a = d.meta) == null ? void 0 : _a.hide);
+        }) ? path : void 0;
+        sideData.value = temp;
+      }
+    };
+    const handleBoxMouseEnter = () => {
+      stopTimer();
+    };
+    const handleBoxMouseLeave = () => {
+      resetMenuState();
+    };
+    const handleSideMenuOpen = (index2, indexPath) => {
+      emit("sideMenuOpen", index2, indexPath);
+    };
+    const handleSideMenuClose = (index2, indexPath) => {
+      emit("sideMenuClose", index2, indexPath);
+    };
+    const handleSideMenuItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props$1.itemTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
+        return;
+      }
+      if (props$1.beforeClick && props$1.beforeClick(item, e) === false) {
+        return;
+      }
+      if (core.isExternalLink(path)) {
+        e.stopPropagation();
+        window.open(path);
+        return;
+      }
+      sideActive.value = path;
+      if (path !== vue.unref(currentRoute).fullPath) {
+        push(path);
+      }
+    };
+    const handleSideMouseEnter = () => {
+      stopTimer();
+    };
+    const handleSideMouseLeave = () => {
+      resetMenuState();
+    };
+    const handleTabClick = (option) => {
+      const key = option.name;
+      const item = util.findTabByKey(key, props$1.tabs);
+      const opt = { key, item, active: tabActive.value };
+      emit("tabClick", opt);
+    };
+    const handleTabRemove = (key) => {
+      const item = util.findTabByKey(key, props$1.tabs);
+      const opt = { key, item, active: tabActive.value };
+      emit("tabRemove", opt);
+    };
+    const handleTabContextMenu = (option) => {
+      const opt = {
+        key: option.name,
+        item: util.findTabByKey(option.name, props$1.tabs),
+        active: tabActive.value,
+        command: option.command
+      };
+      emit("tabContextMenu", opt);
+    };
+    const handleTabSortChange = (data) => {
+      const result = data.map((d) => {
+        return util.findTabByKey(d.name, props$1.tabs);
+      });
+      if (props$1.fixedHome && props$1.tabs != null) {
+        const homeTab = props$1.tabs.find((t) => t.home);
+        if (homeTab) {
+          result.unshift(homeTab);
+        }
+      }
+      emit("tabSortChange", result);
+    };
+    const getContentElem = () => {
+      if (!layoutRef.value) {
+        return null;
+      }
+      return layoutRef.value.getContentEl();
+    };
+    const handleRouteChange = (route) => {
+      const { path, meta } = route;
+      hideFooter.value = !!meta.hideFooter;
+      const contentEl = getContentElem();
+      if (props$1.autoScrollTop && contentEl) {
+        contentEl.scrollTop = 0;
+      }
+      if (props$1.redirectPath && path.startsWith(props$1.redirectPath)) {
+        return;
+      }
+      hideSidebar.value = !!meta.hideSidebar;
+      hideSidebox.value = props$1.sidebarLayout === "mix" ? !!meta.hideSidebox : true;
+      hideHeader.value = !!meta.hideHeader;
+      hideTabs.value = !!meta.hideTabs;
+      const navigationIsChanged = updateNavigation();
+      const sideNavigationIsChanged = updateSideNavigation();
+      const { active, title, matched, activeOther } = util.getRouteMatched(route, menuData.value);
+      levelData.value = util.getMatchedLevels(matched, activeOther, route, menuData.value, tabData.value);
+      const t = util.getRouteTab(route, tabData.value, homeMenuPath.value, title);
+      isHome.value = t.home;
+      tabActive.value = t.key;
+      emit("tabAdd", t);
+      if (!navigationIsChanged && !sideNavigationIsChanged) {
+        updateMenuActive(active, matched);
+        if (navigation.value === "mix" || sideNavigation.value === "mix" || sideNavigation.value === "box") {
+          splitMenuData();
+        }
+      }
+      if (mobile.value) {
+        updateCollapse(true);
+      }
+    };
+    const updateMenuActive = (active, matched) => {
+      const [active1, active2] = (matched == null ? void 0 : matched.length) ? [matched[0].path, (matched[1] ?? matched[0]).path] : [];
+      if (navigation.value === "top") {
+        navActive.value = active;
+        boxActive.value = void 0;
+      } else if (navigation.value === "mix") {
+        navActive.value = active1;
+        boxActive.value = active2;
+      } else {
+        navActive.value = void 0;
+        boxActive.value = active1;
+      }
+      sideActive.value = active;
+      state.navActive = navActive.value;
+      state.boxActive = boxActive.value;
+      state.sideActive = sideActive.value;
+    };
+    const splitMenuData = () => {
+      var _a;
+      const isTopNav = navigation.value === "top";
+      const isMixNav = navigation.value === "mix";
+      const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+      const isCollapse = sideNavigation.value === "box" || props$1.collapse && !mobile.value;
+      if (!((_a = menuData.value) == null ? void 0 : _a.length)) {
+        navData.value = [];
+        boxData.value = [];
+        sideData.value = [];
+      } else if (isTopNav) {
+        navData.value = menuData.value;
+        boxData.value = [];
+        sideData.value = [];
+      } else if (isMixNav) {
+        navData.value = menuData.value.map((d) => {
+          return { ...d, children: void 0, tempChildren: d.children };
+        });
+        const childMenus = util.getActiveChilds(menuData.value, navActive.value);
+        if (!childMenus.length) {
+          boxData.value = [];
+          sideData.value = [];
+        } else if (isMixSide) {
+          boxData.value = childMenus.map((d) => {
+            return {
+              ...d,
+              children: isCollapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sideData.value = util.getActiveChilds(childMenus, boxActive.value);
+        } else {
+          boxData.value = [];
+          sideData.value = childMenus;
+        }
+      } else {
+        navData.value = [];
+        if (isMixSide) {
+          boxData.value = menuData.value.map((d) => {
+            return {
+              ...d,
+              children: isCollapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sideData.value = util.getActiveChilds(menuData.value, boxActive.value);
+        } else {
+          boxData.value = [];
+          sideData.value = menuData.value;
+        }
+      }
+      state.navData = navData.value;
+      state.boxData = boxData.value;
+      state.sideData = sideData.value;
+    };
+    const updateMenuData = () => {
+      let home;
+      menuData.value = core.mapTree(props$1.menus, (item) => {
+        var _a, _b;
+        if (!home && !((_a = item.children) == null ? void 0 : _a.length)) {
+          home = item;
+        }
+        const title = routeI18n(item.path, item) || ((_b = item.meta) == null ? void 0 : _b.title);
+        return { ...item, meta: { ...item.meta, title } };
+      });
+      splitMenuData();
+      homeMenuPath.value = props$1.homePath || (home == null ? void 0 : home.path) || "/";
+    };
+    const updateTabData = () => {
+      if (!props$1.tabs) {
+        tabData.value = [];
+        return;
+      }
+      tabData.value = props$1.tabs.map((item) => {
+        const m = util.findMenuByPath(item.path, menuData.value);
+        return {
+          ...item,
+          title: routeI18n(item.path, m, item) || item.title
+        };
+      });
+    };
+    const updateLevelData = () => {
+      levelData.value = levelData.value.map((item) => {
+        var _a;
+        const t = util.findTabByPath(item.path, tabData.value);
+        const m = util.findMenuByPath(item.path, menuData.value);
+        const title = (t == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || routeI18n(item.path, m, t, item);
+        return { ...item, title: title || item.title };
+      });
+    };
+    const routeI18n = (path, menu, tab, level) => {
+      if (props$1.i18n && path) {
+        return props$1.i18n({
+          locale: props$1.locale,
+          path,
+          menu,
+          tab,
+          level
+        });
+      }
+    };
+    vue.watch(
+      () => props$1.menus,
+      () => {
+        updateMenuData();
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props$1.tabs,
+      () => {
+        updateTabData();
+        updateLevelData();
+      },
+      { deep: true }
+    );
+    vue.watch([() => props$1.layout, mobile], () => {
+      updateNavigation();
+    });
+    vue.watch(
+      () => props$1.sidebarLayout,
+      () => {
+        updateSideNavigation();
+      }
+    );
+    vue.watch([navigation, sideNavigation], () => {
+      const route = vue.unref(currentRoute);
+      const { active, matched } = util.getRouteMatched(route, menuData.value);
+      updateMenuActive(active, matched);
+      splitMenuData();
+    });
+    vue.watch(
+      () => props$1.collapse,
+      () => {
+        if (sideNavigation.value === "mix" && !mobile.value) {
+          if (props$1.collapse) {
+            boxData.value = boxData.value.map((d) => {
+              return { ...d, children: d.tempChildren };
+            });
+          } else {
+            boxData.value = boxData.value.map((d) => {
+              return { ...d, children: void 0 };
+            });
+          }
+          state.boxData = boxData.value;
+        }
+      }
+    );
+    vue.watch(
+      () => props$1.locale,
+      () => {
+        updateMenuData();
+        updateTabData();
+        updateLevelData();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      currentRoute,
+      (route) => {
+        handleRouteChange(vue.unref(route));
+      },
+      { immediate: true }
+    );
+    const layoutProvide = vue.shallowReactive({
+      keepAlive: props$1.tabBar && props$1.keepAlive,
+      responsive: props$1.responsive
+    });
+    vue.provide(props.PRO_LAYOUT_KEY, layoutProvide);
+    vue.watch([() => props$1.tabBar, () => props$1.keepAlive], () => {
+      layoutProvide.keepAlive = props$1.tabBar && props$1.keepAlive;
+    });
+    const [media, startMedia, stopMedia] = hook.useMediaQuery(mobileQuery, () => {
+      const isMobile = props$1.responsive ? media.matches : false;
+      if (mobile.value !== isMobile) {
+        mobile.value = isMobile;
+        updateCollapse(mobile.value);
+      }
+    });
+    vue.watch(
+      () => props$1.responsive,
+      () => {
+        layoutProvide.responsive = props$1.responsive;
+        if (props$1.responsive) {
+          startMedia();
+        } else {
+          stopMedia();
+        }
+      },
+      { immediate: true }
+    );
+    hook.useWindowListener("keydown", (e) => {
+      if (e.keyCode === 27 && props$1.compressOnEsc && props$1.maximized) {
+        e.stopPropagation();
+        updateMaximized(false);
+      }
+    });
+    const handleResize = () => {
+      const el = getContentElem();
+      if (el) {
+        const width = el.clientWidth;
+        const height = el.clientHeight;
+        if (width !== state.contentWidth || height !== state.contentHeight) {
+          state.contentWidth = width;
+          state.contentHeight = height;
+          emit("bodySizeChange", { width, height, mobile: mobile.value });
+        }
+      }
+    };
+    hook.useWindowListener(core.debounce(() => handleResize(), 500));
+    const [startBodyResizeTimer] = hook.useTimer(600);
+    vue.watch([() => props$1.collapse, () => props$1.compact], () => {
+      startBodyResizeTimer(() => {
+        handleResize();
+      });
+    });
+    vue.watch([routeLayout, routeSideType, routeTabBar, routeMaximized, () => props$1.fluid], () => {
+      vue.nextTick(() => {
+        handleResize();
+      });
+    });
+    vue.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
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ProIframe = vue.resolveComponent("ProIframe");
+  const _component_EleAdminLayout = vue.resolveComponent("EleAdminLayout");
+  return vue.openBlock(), vue.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: vue.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
+  }, vue.createSlots({
+    body: vue.withCtx(() => [
+      _ctx.tabBar && _ctx.keepAlive ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+    ]),
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default"),
+      !_ctx.hideFooter ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : vue.createCommentVNode("", true)
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.logo ? {
+      name: "logo",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "logo", {
+          collapse: _ctx.collapse,
+          sidebar: _ctx.sidebar
+        })
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.$slots.logoTitle ? {
+      name: "logoTitle",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "logoTitle", {
+          collapse: _ctx.collapse,
+          sidebar: _ctx.sidebar
+        })
+      ]),
+      key: "1"
+    } : void 0,
+    _ctx.$slots.breadcrumb ? {
+      name: "breadcrumb",
+      fn: vue.withCtx(() => [
+        vue.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: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "left", { sidebar: _ctx.sidebar })
+      ]),
+      key: "3"
+    } : void 0,
+    _ctx.$slots.center ? {
+      name: "center",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "center", { sidebar: _ctx.sidebar })
+      ]),
+      key: "4"
+    } : void 0,
+    _ctx.$slots.right ? {
+      name: "right",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "right", { sidebar: _ctx.sidebar })
+      ]),
+      key: "5"
+    } : void 0,
+    vue.renderList(Object.keys(_ctx.$slots).filter((k) => !["default", "logo", "logoTitle", "breadcrumb", "left", "center", "right", "footer", "body"].includes(k)), (name) => {
+      return {
+        name,
+        fn: vue.withCtx((slotProps) => [
+          vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.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]]);
+module.exports = index;