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

package/lib/ele-pro-layout/types.d.ts

@@ -1,8 +1,12 @@
-import type { RouteLocationMatched } from 'vue-router';
-import type { ElMenuProps, ElBreadcrumbProps } from '../ele-app/el';
 import type { EleMenuItemProps } from '../ele-app/plus';
-import type TabTitle from '../ele-tabs/components/tab-title';
-export type MenuItemProps = EleMenuItemProps;
+export type {
+  Layout,
+  SidebarLayout,
+  HeaderStyle,
+  SidebarStyle,
+  TabStyle,
+  TabBar
+} from '../ele-admin-layout/types';
 
 /**
  * 菜单元数据
@@ -18,10 +22,14 @@ export interface MenuMeta extends Record<string, any> {
   active?: string;
   /** 是否隐藏页脚 */
   hideFooter?: boolean;
+  /** 是否隐藏顶栏 */
+  hideHeader?: boolean;
   /** 是否隐藏侧栏 */
   hideSidebar?: boolean;
   /** 是否隐藏双侧栏一级 */
   hideSidebox?: boolean;
+  /** 是否隐藏页签栏 */
+  hideTabs?: boolean;
   /** 页签是否可关闭 */
   closable?: boolean;
   /** 页签不同参数是否合并 */
@@ -94,38 +102,6 @@ export interface LevelItem {
   path: string;
 }
 
-/**
- * 布局类型
- */
-export type Layout = 'side' | 'top' | 'mix';
-
-/**
- * 侧栏布局类型
- */
-export type SidebarLayout = 'default' | 'mix';
-
-/**
- * 顶栏风格
- */
-export type HeaderStyle = 'light' | 'dark' | 'primary';
-
-/**
- * 侧栏风格
- */
-export type SidebarStyle = 'light' | 'dark';
-
-/**
- * 页签风格
- */
-export type TabStyle = 'simple' | 'indicator' | 'button' | 'tag';
-
-/**
- * 菜单标题国际化方法
- */
-export type MenuI18n = (
-  option: MenuI18nOption
-) => string | undefined | null | void;
-
 /**
  * 菜单标题国际化方法参数
  */
@@ -138,6 +114,13 @@ export interface MenuI18nOption {
   locale?: string;
 }
 
+/**
+ * 菜单标题国际化方法
+ */
+export type MenuI18n = (
+  option: MenuI18nOption
+) => string | undefined | null | void;
+
 /**
  * 页签事件参数
  */
@@ -163,72 +146,23 @@ export interface MatchedResult {
   /** 匹配的菜单数据 */
   matched?: MenuItem[];
   /** 是否选中非本身 */
-  activeOther: boolean;
-}
-
-/**
- * 获取混合导航布局选中返回结果
- */
-export interface MixActiveResult {
-  /** 层级一选中 */
-  active1?: string;
-  /** 层级二选中 */
-  active2?: string;
+  activeOther?: boolean;
 }
 
 /**
- * 主体区尺寸改变事件参数
+ * 内容区尺寸改变事件参数
  */
 export interface BodySizeChangeOption {
-  /** 主体区宽度 */
+  /** 内容区宽度 */
   width?: number;
-  /** 是否是移动设备 */
+  /** 内容区高度 */
+  height?: number;
+  /** 是否是移动端小屏幕 */
   mobile?: boolean;
 }
 
 /**
- * 窗口事件参数
- */
-export interface WindowListenerOption {
-  /** 返回键按下回调 */
-  onEscKeydown: (e: KeyboardEvent) => void;
-  /** 设备类型改变 */
-  onMobileChange: (isMobile: boolean) => void;
-  /** 主体区尺寸改变 */
-  onBodySizeChange: () => void;
-}
-
-/**
- * 当前路由
- */
-export interface CurrentRoute {
-  /** 路由地址 */
-  path: string;
-  /** 路由完整地址 */
-  fullPath: string;
-  /** 路由元数据 */
-  meta: MenuMeta;
-  /** 路由匹配数据 */
-  matched: RouteLocationMatched[];
-}
-
-/**
- * 菜单 tooltip 主题
- */
-export type TooltipEffect = ElMenuProps['popperEffect'];
-
-/**
- * 顶栏子菜单触发方式
- */
-export type MenuTrigger = ElMenuProps['menuTrigger'];
-
-/**
- * 面包屑导航分隔符
- */
-export type BreadcrumbSeparator = ElBreadcrumbProps['separatorIcon'];
-
-/**
- * 混合模式菜单切换模式
+ * 混合导航菜单切换模式
  */
 export type MenuItemTrigger = 'route' | 'click' | 'hover';
 
@@ -250,30 +184,34 @@ export interface IframeItem {
 }
 
 /**
- * 标签页标题组件实例
+ * 状态数据
  */
-export type TabTitleInstance = InstanceType<typeof TabTitle> | null;
+export interface LayoutState {
+  navActive?: string;
+  sideActive?: string;
+  boxActive?: string;
+  navData: MenuItem[];
+  sideData: MenuItem[];
+  boxData: MenuItem[];
+  isHover?: boolean;
+  contentWidth?: number;
+  contentHeight?: number;
+}
 
 /**
- * 顶栏状态数据
+ * 共享数据
  */
-export interface HeaderState {
-  /** 是否是鼠标进入状态 */
-  hover: boolean;
-  /** 鼠标离开状态定时器 */
-  timer?: number | null;
+export interface ProLayoutProvide {
+  /** 是否支持内链缓存 */
+  keepAlive?: boolean;
+  /** 是否开启响应式 */
+  responsive?: boolean;
 }
 
 /**
- * 状态数据
+ * 带响应式开关的组件属性
  */
-export interface LayoutState {
-  headerActive?: string;
-  sideboxActive?: string;
-  sidebarActive?: string;
-  headerData: MenuItem[];
-  sideboxData: MenuItem[];
-  sidebarData: MenuItem[];
-  menuTimer?: number | null;
-  isHover: boolean;
+export interface ResponsiveProps extends Record<keyof any, any> {
+  /** 是否开启响应式 */
+  responsive?: boolean;
 }

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

@@ -2,68 +2,62 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const core = require("../utils/core");
-function isHomeRoute(route, homePath) {
-  return route.path === homePath || route.fullPath === homePath;
+const props = require("../ele-admin-layout/props");
+const props$1 = require("./props");
+function findMenuByPath(path, menus) {
+  return path == null ? void 0 : core.findTree(menus, (d) => path === d.path);
 }
-function getHomePath(path) {
-  return path || "/";
+function findTabByPath(path, tabs) {
+  if (path != null && tabs != null) {
+    return tabs.find((d) => path === d.key || path === d.fullPath);
+  }
+}
+function findTabByKey(key, tabs) {
+  if (key != null && tabs != null) {
+    return tabs.find((d) => key === d.key);
+  }
+}
+function getMatchedMenus(path, menus, parents) {
+  var _a;
+  for (const m of menus) {
+    const p = parents ? [...parents, m] : [m];
+    if (m.path === path) {
+      return p;
+    } else if ((_a = m.children) == null ? void 0 : _a.length) {
+      const result = getMatchedMenus(path, m.children, p);
+      if (result) {
+        return result;
+      }
+    }
+  }
 }
-function getRouteMatched(path, fullPath, meta, menus) {
+function getRouteMatched(route, menus) {
   var _a, _b, _c;
+  const { path, fullPath, meta } = route;
   if (meta == null ? void 0 : meta.active) {
-    const t = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
+    const m2 = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
     return {
       active: meta.active,
       activeOther: true,
-      title: ((_a = t == null ? void 0 : t.meta) == null ? void 0 : _a.title) ?? meta.title,
+      title: ((_a = m2 == null ? void 0 : m2.meta) == null ? void 0 : _a.title) ?? meta.title,
       matched: getMatchedMenus(meta.active, menus)
     };
   }
-  const temp = findMenuByPath(fullPath, menus);
-  if (temp) {
+  const fm = findMenuByPath(fullPath, menus);
+  if (fm) {
     return {
       active: fullPath,
-      activeOther: false,
-      title: ((_b = temp.meta) == null ? void 0 : _b.title) ?? meta.title,
+      title: ((_b = fm.meta) == null ? void 0 : _b.title) ?? meta.title,
       matched: getMatchedMenus(fullPath, menus)
     };
   }
   const m = findMenuByPath(path, menus);
   return {
     active: path,
-    activeOther: false,
     title: ((_c = m == null ? void 0 : m.meta) == null ? void 0 : _c.title) ?? meta.title,
     matched: getMatchedMenus(path, menus)
   };
 }
-function findMenuByPath(path, menus) {
-  if (path == null || menus == null) {
-    return;
-  }
-  let data;
-  core.eachTree(menus, (d) => {
-    if (path === d.path) {
-      data = d;
-      return false;
-    }
-  });
-  return data;
-}
-function getMatchedMenus(path, menus, parents) {
-  var _a;
-  for (let i = 0; i < menus.length; i++) {
-    const m = menus[i];
-    const p = parents ? [...parents, m] : [m];
-    if (m.path === path) {
-      return p;
-    } else if ((_a = m.children) == null ? void 0 : _a.length) {
-      const result = getMatchedMenus(path, m.children, p);
-      if (result) {
-        return result;
-      }
-    }
-  }
-}
 function getMatchedLevels(matched, activeOther, route, menus, tabs) {
   var _a;
   const levels = [];
@@ -71,36 +65,23 @@ function getMatchedLevels(matched, activeOther, route, menus, tabs) {
     matched.forEach((m) => {
       var _a2;
       if (m.meta && m.meta.title && m.meta.breadcrumb !== false) {
-        levels.push({
-          path: m.path,
-          title: ((_a2 = findTabByPath(m.path, tabs)) == null ? void 0 : _a2.title) || m.meta.title
-        });
+        const title = ((_a2 = findTabByPath(m.path, tabs)) == null ? void 0 : _a2.title) || m.meta.title;
+        levels.push({ path: m.path, title });
       }
     });
   }
   if (activeOther) {
     const { path, fullPath, meta } = route;
-    if ((!levels.length || fullPath !== levels[levels.length - 1].path) && meta.title) {
+    const notIn = !levels.length || fullPath !== levels[levels.length - 1].path;
+    if (notIn && meta.title) {
       const m = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
       const t = findTabByPath(fullPath, tabs) ?? findTabByPath(path, tabs);
-      levels.push({
-        path: fullPath,
-        title: (t == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || meta.title
-      });
+      const title = (t == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || meta.title;
+      levels.push({ path: fullPath, title });
     }
   }
   return levels;
 }
-function findTabByPath(path, tabs) {
-  if (path == null || tabs == null) {
-    return;
-  }
-  for (let i = 0; i < tabs.length; i++) {
-    if (path === tabs[i].key || path === tabs[i].fullPath) {
-      return tabs[i];
-    }
-  }
-}
 function getMatchedComponents(matched) {
   const components = [];
   matched.forEach((m) => {
@@ -111,145 +92,34 @@ function getMatchedComponents(matched) {
   });
   return components;
 }
-function getRouteTab(current, tabs, homePath, routeTitle) {
-  const { path, fullPath, meta, matched } = current;
+function getRouteTab(route, tabs, homePath, routeTitle) {
+  const { path, fullPath, meta, matched } = route;
   const key = meta.tabUnique === false ? fullPath : path;
   const t = findTabByPath(key, tabs);
   const title = (t == null ? void 0 : t.title) || routeTitle;
-  const home = isHomeRoute(current, homePath);
+  const home = path === homePath || fullPath === homePath;
   const closable = (t == null ? void 0 : t.closable) ?? meta.closable !== false;
   const components = getMatchedComponents(matched);
   return { key, path, fullPath, title, closable, home, components, meta };
 }
-function getMixActive(matched) {
-  if (!(matched == null ? void 0 : matched.length)) {
-    return {
-      active1: void 0,
-      active2: void 0
-    };
-  }
-  const match1 = matched[0];
-  const match2 = matched.length > 1 ? matched[1] : match1;
-  return {
-    active1: match1.path,
-    active2: match2.path
-  };
-}
 function getActiveChilds(menus, active, childrenName) {
-  const key = childrenName || "children";
+  const field = childrenName || "children";
   if (!menus.length) {
     return [];
   }
   if (!active) {
-    return menus[0][key] || [];
+    return menus[0][field] || [];
   }
-  const temp = menus.find((m) => m.path === active);
-  if (temp == null) {
-    return menus[0][key] || [];
+  const m = menus.find((m2) => m2.path === active);
+  if (m == null) {
+    return menus[0][field] || [];
   }
-  return temp[key] || [];
-}
-function useWindowListener(option, props) {
-  const state = { timer: null };
-  const media = window.matchMedia("(max-width: 768px)");
-  const onMediaChangeListener = () => {
-    if (props.responsive) {
-      option.onMobileChange(media.matches);
-    }
-  };
-  const onKeydownListener = (e) => {
-    if (e.keyCode === 27) {
-      option.onEscKeydown(e);
-    }
-  };
-  const onResizeListener = core.debounce(() => {
-    option.onBodySizeChange();
-  }, 500);
-  media.addEventListener("change", onMediaChangeListener);
-  window.addEventListener("keydown", onKeydownListener);
-  window.addEventListener("resize", onResizeListener);
-  vue.onBeforeUnmount(() => {
-    media.removeEventListener("change", onMediaChangeListener);
-    window.removeEventListener("keydown", onKeydownListener);
-    window.removeEventListener("resize", onResizeListener);
-    state.timer && clearTimeout(state.timer);
-  });
-  vue.onMounted(() => {
-    option.onBodySizeChange();
-  });
-  vue.watch(
-    () => props.responsive,
-    () => {
-      option.onMobileChange(props.responsive ? media.matches : false);
-    },
-    { immediate: true }
-  );
-  vue.watch(
-    [
-      () => props.layout,
-      () => props.sidebarLayout,
-      () => props.tabBar,
-      () => props.fluid,
-      () => props.maximized
-    ],
-    () => {
-      vue.nextTick(() => {
-        option.onBodySizeChange();
-      });
-    }
-  );
-  vue.watch([() => props.collapse, () => props.compact], () => {
-    state.timer && clearTimeout(state.timer);
-    state.timer = setTimeout(() => {
-      option.onBodySizeChange();
-    }, 600);
-  });
-}
-function useMenuScroll(getEl) {
-  const state = { timer: null };
-  const scrollIntoView = () => {
-    state.timer && clearTimeout(state.timer);
-    const menuEl = getEl();
-    if (menuEl) {
-      const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
-      if (el) {
-        state.timer = setTimeout(() => {
-          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
-            el.scrollIntoViewIfNeeded(true);
-          } else {
-            el.scrollIntoView({ behavior: "smooth", block: "center" });
-          }
-        }, 420);
-      }
-    }
-  };
-  vue.onMounted(() => {
-    scrollIntoView();
-  });
-  vue.onBeforeUnmount(() => {
-    state.timer && clearTimeout(state.timer);
-  });
-  return { scrollIntoView };
-}
-function useDisableTransition() {
-  const state = { timer: null };
-  const classes = "ele-transition-disabled";
-  const disableTransition = () => {
-    state.timer && clearTimeout(state.timer);
-    document.body.classList.add(classes);
-    state.timer = setTimeout(() => {
-      document.body.classList.remove(classes);
-    }, 100);
-  };
-  vue.onBeforeUnmount(() => {
-    state.timer && clearTimeout(state.timer);
-  });
-  return { disableTransition };
+  return m[field] || [];
 }
 function getMenuItems(menus, link) {
   return core.mapTree(menus, (m) => {
     const { path, meta } = m;
-    const { hide, icon, title, props } = meta ?? {};
+    const { hide, icon, title, props: props2 } = meta ?? {};
     if (hide) {
       return;
     }
@@ -258,24 +128,32 @@ function getMenuItems(menus, link) {
       icon,
       path: link ? path : void 0,
       index: path,
-      ...core.omit(props, ["title", "icon", "path", "index"]),
+      ...core.omit(props2, ["title", "icon", "path", "index"]),
       meta
     };
     return item;
   });
 }
+function useLayoutState() {
+  return vue.inject(props.LAYOUT_KEY, {});
+}
+function useProLayoutState() {
+  return vue.inject(props$1.PRO_LAYOUT_KEY, {});
+}
+function useResponsive(props2) {
+  const state = useProLayoutState();
+  return vue.computed(() => props2.responsive ?? state.responsive ?? true);
+}
 exports.findMenuByPath = findMenuByPath;
+exports.findTabByKey = findTabByKey;
 exports.findTabByPath = findTabByPath;
 exports.getActiveChilds = getActiveChilds;
-exports.getHomePath = getHomePath;
 exports.getMatchedComponents = getMatchedComponents;
 exports.getMatchedLevels = getMatchedLevels;
 exports.getMatchedMenus = getMatchedMenus;
 exports.getMenuItems = getMenuItems;
-exports.getMixActive = getMixActive;
 exports.getRouteMatched = getRouteMatched;
 exports.getRouteTab = getRouteTab;
-exports.isHomeRoute = isHomeRoute;
-exports.useDisableTransition = useDisableTransition;
-exports.useMenuScroll = useMenuScroll;
-exports.useWindowListener = useWindowListener;
+exports.useLayoutState = useLayoutState;
+exports.useProLayoutState = useProLayoutState;
+exports.useResponsive = useResponsive;

package/lib/ele-pro-layout/util.d.ts

@@ -1,38 +1,38 @@
-import { MenuMeta, MenuItem, TabItem, LevelItem, CurrentRoute, WindowListenerOption, MatchedResult, MixActiveResult } from './types';
-import { ProLayoutProps } from './props';
-import { RouteLocationMatched } from 'vue-router';
+import { MenuItem, TabItem, LevelItem, MatchedResult, ProLayoutProvide, ResponsiveProps } from './types';
+import { LayoutProvide } from '../ele-admin-layout/types';
+import { EleMenuItemProps } from '../ele-app/plus';
+import { RouteLocationNormalizedLoaded, RouteLocationMatched } from 'vue-router';
 
 /**
- * 判断路由是否是主页
- * @param route 路由信息
- * @param homePath 主页地址
+ * 根据菜单地址获取菜单
+ * @param path 菜单地址
+ * @param menus 菜单数据
  */
-export declare function isHomeRoute(route: CurrentRoute, homePath: string): boolean;
+export declare function findMenuByPath(path?: string, menus?: MenuItem[]): MenuItem | undefined;
 /**
- * 获取主页路由地址
+ * 根据路由地址获取页签
  * @param path 路由地址
+ * @param tabs 页签数据
  */
-export declare function getHomePath(path?: string | null): string;
+export declare function findTabByPath(path?: string, tabs?: TabItem[] | null): TabItem | undefined;
 /**
- * 获取路由匹配的菜单数据
- * @param path 路由地址
- * @param fullPath 路由完整地址
- * @param meta 路由元数据
- * @param menus 菜单数据
+ * 根据页签标识获取页签
+ * @param key 页签标识
+ * @param tabs 页签数据
  */
-export declare function getRouteMatched(path: string, fullPath: string, meta: MenuMeta, menus: MenuItem[]): MatchedResult;
+export declare function findTabByKey(key?: string, tabs?: TabItem[] | null): TabItem | undefined;
 /**
- * 根据菜单地址获取菜单
+ * 根据菜单地址获取菜单及所有父级
  * @param path 菜单地址
  * @param menus 菜单数据
  */
-export declare function findMenuByPath(path?: string, menus?: MenuItem[]): MenuItem | undefined;
+export declare function getMatchedMenus(path: string, menus: MenuItem[], parents?: MenuItem[]): MenuItem[] | undefined;
 /**
- * 根据菜单地址获取菜单及所有父级
- * @param path 菜单地址
+ * 获取路由匹配的菜单数据
+ * @param route 路由信息
  * @param menus 菜单数据
  */
-export declare function getMatchedMenus(path: string, menus: MenuItem[], parents?: MenuItem[]): MenuItem[] | undefined;
+export declare function getRouteMatched(route: RouteLocationNormalizedLoaded, menus: MenuItem[]): MatchedResult;
 /**
  * 获取面包屑导航数据
  * @param matched 匹配的菜单数据
@@ -41,13 +41,7 @@ export declare function getMatchedMenus(path: string, menus: MenuItem[], parents
  * @param menus 菜单数据
  * @param tabs 页签数据
  */
-export declare function getMatchedLevels(matched: MenuItem[] | undefined, activeOther: boolean, route: CurrentRoute, menus: MenuItem[], tabs: TabItem[]): LevelItem[];
-/**
- * 根据路由地址获取页签数据
- * @param path 路由地址
- * @param tabs 全部页签数据
- */
-export declare function findTabByPath(path?: string, tabs?: TabItem[]): TabItem | undefined;
+export declare function getMatchedLevels(matched: MenuItem[] | undefined, activeOther: boolean | undefined, route: RouteLocationNormalizedLoaded, menus: MenuItem[], tabs: TabItem[]): LevelItem[];
 /**
  * 获取路由对应的组件名称
  * @param matched 路由匹配数据
@@ -55,18 +49,12 @@ export declare function findTabByPath(path?: string, tabs?: TabItem[]): TabItem
 export declare function getMatchedComponents(matched: RouteLocationMatched[]): string[];
 /**
  * 返回路由对应的页签数据
- * @param current 路由信息
+ * @param route 路由信息
  * @param tabs 当前页签数据
  * @param homePath 主页地址
- * @param repeatableTabs 可重复打开的页签
  * @param routeTitle 路由对应的标题
  */
-export declare function getRouteTab(current: CurrentRoute, tabs: TabItem[], homePath: string, routeTitle?: string): TabItem;
-/**
- * 获取混合导航布局选中
- * @param matched 路由匹配的菜单层级数据
- */
-export declare function getMixActive(matched?: MenuItem[]): MixActiveResult;
+export declare function getRouteTab(route: RouteLocationNormalizedLoaded, tabs: TabItem[], homePath: string | undefined, routeTitle?: string): TabItem;
 /**
  * 获取选中菜单的子级
  * @param menus 菜单数据
@@ -75,24 +63,20 @@ export declare function getMixActive(matched?: MenuItem[]): MixActiveResult;
  */
 export declare function getActiveChilds(menus: MenuItem[], active?: string, childrenName?: string): MenuItem[];
 /**
- * 绑定窗口事件监听
+ * 菜单数据转换
+ * @param menus 菜单数据
+ * @param link 是否使用超链接
  */
-export declare function useWindowListener(option: WindowListenerOption, props: ProLayoutProps): void;
+export declare function getMenuItems(menus: MenuItem[], link: boolean): EleMenuItemProps[];
 /**
- * 菜单滚动到选中位置
+ * 获取布局共享数据
  */
-export declare function useMenuScroll(getEl: () => HTMLDivElement | null): {
-    scrollIntoView: () => void;
-};
+export declare function useLayoutState(): LayoutProvide;
 /**
- * 禁用过渡动画
+ * 获取高级布局共享数据
  */
-export declare function useDisableTransition(): {
-    disableTransition: () => void;
-};
+export declare function useProLayoutState(): ProLayoutProvide;
 /**
- * 菜单数据转换
- * @param menus 菜单数据
- * @param link 是否使用超链接
+ * 获取是否开启布局响应
  */
-export declare function getMenuItems(menus: MenuItem[], link: boolean): Partial<import('../ele-menus/types').MenuItem>[];
+export declare function useResponsive(props: ResponsiveProps): import('vue').ComputedRef<boolean>;