ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.3

package/lib/ele-pro-layout/style/tabs.scss

@@ -5,7 +5,7 @@
   flex-shrink: 0;
   background: eleVar('header', 'bg');
   box-shadow: eleVar('header', 'shadow');
-  z-index: eleVar('layout', 'index');
+  z-index: calc(#{eleVar('layout', 'index')} + 1);
 
   &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
     padding-left: eleVar('page', 'padding');
@@ -19,31 +19,8 @@
 
 /* 顶栏阴影改分割线 */
 .ele-admin-open-tab:not(.ele-admin-tab-card) {
-  $line: eleVar('header', 'line-color');
-
-  &:not(.ele-admin-logo-auto) {
-    .ele-admin-header {
-      box-shadow: eleVar('sidebar', 'width') -1px 0 $line inset;
-      transition: padding-left $ele-transition, box-shadow $ele-transition;
-    }
-
-    &.ele-admin-collapse .ele-admin-header {
-      box-shadow: eleVar('sidebar', 'collapse-width') -1px 0 $line inset;
-    }
-
-    &.ele-admin-mix-sidebar {
-      .ele-admin-header {
-        box-shadow: eleVar('sidebox', 'width') -1px 0 $line inset;
-      }
-
-      &.ele-admin-compact:not(.ele-admin-logo-auto) .ele-admin-header {
-        box-shadow: eleVar('sidebar', 'collapse-width') -1px 0 $line inset;
-      }
-    }
-  }
-
-  &.ele-admin-logo-auto .ele-admin-header {
-    box-shadow: 0 -1px 0 $line inset;
+  .ele-admin-header:not(.is-dark, .is-primary) {
+    box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset;
   }
 }
 

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

@@ -1,6 +1,8 @@
 import type { RouteMeta, RouteLocationMatched } from 'vue-router';
 import type { MenuProps, BreadcrumbProps } from 'element-plus';
 import type { MenuItem as MenuItemProps } from '../../ele-menus/types';
+import type TabTitle from "../../ele-tabs/components/tab-title";
+import type EleTabs from "../../ele-tabs/index";
 /**
  * 菜单元数据
  */
@@ -29,6 +31,8 @@ export interface MenuMeta extends RouteMeta {
     breadcrumb?: boolean;
     /** 菜单组件其它属性 */
     props?: Partial<MenuItemProps>;
+    /** 是否需要外层布局 */
+    layout?: boolean;
     /** 路由地址 */
     routePath?: string;
     /** 内链地址, 内部属性 */
@@ -40,7 +44,7 @@ export interface MenuMeta extends RouteMeta {
 export interface MenuItem {
     /** 路由名称 */
     name?: string;
-    /** 路由地址 */
+    /** 菜单地址 */
     path: string;
     /** 路由组件 */
     component?: string;
@@ -71,6 +75,8 @@ export interface TabItem {
     home?: boolean;
     /** 组件名称 */
     components?: string[];
+    /** 是否为刷新状态 */
+    refresh?: boolean;
     /** 路由元数据 */
     meta?: MenuMeta;
 }
@@ -157,28 +163,21 @@ export interface MixActiveResult {
  * 主体区尺寸改变事件参数
  */
 export interface BodySizeChangeOption {
+    /** 主体区宽度 */
+    width?: number;
     /** 是否是移动设备 */
     mobile?: boolean;
-    /** 是否是窗口尺寸改变触发 */
-    window?: boolean;
 }
 /**
  * 窗口事件参数
  */
 export interface WindowListenerOption {
-    /** 屏幕尺寸改变回调 */
-    onResize: () => void;
     /** 返回键按下回调 */
     onEscKeydown: (e: KeyboardEvent) => void;
-}
-/**
- * 定时器实例
- */
-export interface LayoutTimers {
-    /** 过渡动画禁用定时器 */
-    transition: number | null;
-    /** 内容区尺寸变化定时器 */
-    resize: number | null;
+    /** 设备类型改变 */
+    onMobileChange: (isMobile: boolean) => void;
+    /** 主体区尺寸改变 */
+    onBodySizeChange: () => void;
 }
 /**
  * 当前路由
@@ -206,10 +205,16 @@ export type MenuTrigger = MenuProps['menuTrigger'];
  */
 export type BreadcrumbSeparator = BreadcrumbProps['separatorIcon'];
 /**
- * 类名类型
+ * 内链数据
  */
-export type ClassSingleValue = string | Record<string, boolean | undefined>;
+export interface IframeItem {
+    /** id */
+    id: string;
+    /** 地址 */
+    src: string;
+}
 /**
- * 类名数组类型
+ * 组件实例
  */
-export type ClassValue = Array<ClassSingleValue>;
+export type TabTitleInstance = InstanceType<typeof TabTitle> | null;
+export type EleTabsInstance = InstanceType<typeof EleTabs> | null;

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

@@ -1,5 +1,6 @@
 import type { RouteLocationMatched } from 'vue-router';
 import type { MenuItem as MenuItemProps } from '../ele-menus/types';
+import type { ProLayoutProps } from './props';
 import type { MenuMeta, MenuItem, TabItem, LevelItem, CurrentRoute, WindowListenerOption, MatchedResult, MixActiveResult } from './types';
 /**
  * 判断路由是否是主页
@@ -61,7 +62,7 @@ export declare function getMatchedComponents(matched: RouteLocationMatched[]): s
  * @param repeatableTabs 可重复打开的页签
  * @param routeTitle 路由对应的标题
  */
-export declare function getRouteTab(current: CurrentRoute, tabs: TabItem[], homePath: string, fixedHome?: boolean, repeatableTabs?: string[], routeTitle?: string): TabItem;
+export declare function getRouteTab(current: CurrentRoute, tabs: TabItem[], homePath: string, fixedHome?: boolean, routeTitle?: string): TabItem;
 /**
  * 获取混合导航布局选中
  * @param matched 路由匹配的菜单层级数据
@@ -74,24 +75,19 @@ export declare function getMixActive(matched?: MenuItem[]): MixActiveResult;
  */
 export declare function getActiveChilds(menus: MenuItem[], active?: string): MenuItem[];
 /**
- * 是否是移动端
- * @param responsive 是否开启响应式
+ * 绑定窗口事件监听
  */
-export declare function isMobile(responsive?: boolean): boolean;
+export declare function useWindowListener(option: WindowListenerOption, props: ProLayoutProps): void;
 /**
- * 绑定窗口事件监听
+ * 菜单滚动到选中位置
  */
-export declare function useWindowListener(option: WindowListenerOption): void;
+export declare function useMenuScroll(func: () => HTMLDivElement | null): {
+    scrollIntoView: () => void;
+};
 /**
  * 禁用过渡动画
  */
 export declare function disableTransition(): number;
-/**
- * 判断数组是否包含某个值
- * @param array 数组
- * @param value 值
- */
-export declare function includes<T>(array?: T[], value?: T): boolean;
 /**
  * 菜单数据转换
  * @param menus 菜单数据

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

@@ -109,10 +109,9 @@ function getMatchedComponents(matched) {
   });
   return components;
 }
-function getRouteTab(current, tabs, homePath, fixedHome, repeatableTabs, routeTitle) {
+function getRouteTab(current, tabs, homePath, fixedHome, routeTitle) {
   const { path, fullPath, meta, matched } = current;
-  const unique = meta.tabUnique === false || includes(repeatableTabs, path);
-  const key = unique ? fullPath : path;
+  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);
@@ -148,25 +147,85 @@ function getActiveChilds(menus, active) {
   }
   return temp.children || [];
 }
-function isMobile(responsive) {
-  return responsive ? core.screenWidth() < 768 : false;
-}
-function useWindowListener(option) {
-  const onResizeListener = core.debounce(() => {
-    option.onResize();
-  }, 500);
+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);
     }
   };
-  window.addEventListener("resize", onResizeListener);
+  const onResizeListener = core.debounce(() => {
+    option.onBodySizeChange();
+  }, 500);
+  media.addEventListener("change", onMediaChangeListener);
   window.addEventListener("keydown", onKeydownListener);
+  window.addEventListener("resize", onResizeListener);
   vue.onBeforeUnmount(() => {
-    window.removeEventListener("resize", onResizeListener);
+    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(func) {
+  const state = { timer: null };
+  const scrollIntoView = () => {
+    state.timer && clearTimeout(state.timer);
+    const menuEl = func();
+    if (menuEl) {
+      const el = menuEl.querySelector(".el-menu-item.is-active");
+      if (el) {
+        state.timer = setTimeout(() => {
+          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
+            el.scrollIntoViewIfNeeded(true);
+          } else {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }, 320);
+      }
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    state.timer && clearTimeout(state.timer);
+  });
+  return { scrollIntoView };
+}
 function disableTransition() {
   const classes = "ele-transition-disabled";
   document.body.classList.add(classes);
@@ -174,12 +233,6 @@ function disableTransition() {
     document.body.classList.remove(classes);
   }, 100);
 }
-function includes(array, value) {
-  if (array == null || value == null) {
-    return false;
-  }
-  return array.includes(value);
-}
 function getMenuItems(menus) {
   return core.mapTree(menus, (m) => {
     const { path, meta } = m;
@@ -210,7 +263,6 @@ exports.getMenuItems = getMenuItems;
 exports.getMixActive = getMixActive;
 exports.getRouteMatched = getRouteMatched;
 exports.getRouteTab = getRouteTab;
-exports.includes = includes;
 exports.isHomeRoute = isHomeRoute;
-exports.isMobile = isMobile;
+exports.useMenuScroll = useMenuScroll;
 exports.useWindowListener = useWindowListener;

package/lib/ele-pro-table/components/table-tools.d.ts

@@ -3,7 +3,7 @@ import type { Columns, TableTool, TableSize, TableLocale } from '../types';
 declare const _sfc_main: import("vue").DefineComponent<{
     size: StringConstructor;
     columns: PropType<Columns>;
-    tools: PropType<TableTool[]>;
+    tools: PropType<TableTool[] | null>;
     columnSortable: BooleanConstructor;
     columnFixed: BooleanConstructor;
     maximized: BooleanConstructor;
@@ -24,7 +24,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: StringConstructor;
     columns: PropType<Columns>;
-    tools: PropType<TableTool[]>;
+    tools: PropType<TableTool[] | null>;
     columnSortable: BooleanConstructor;
     columnFixed: BooleanConstructor;
     maximized: BooleanConstructor;

package/lib/ele-pro-table/components/table-tools.js

@@ -3,7 +3,7 @@ const vue = require("vue");
 const elementPlus = require("element-plus");
 const iconsVue = require("@element-plus/icons-vue");
 const icons = require("../../icons");
-const useReceiver = require("../../ele-config-provider/use-receiver");
+const receiver = require("../../ele-config-provider/receiver");
 const EleTool = require("../../ele-tool/index");
 const ToolColumn = require("./tool-column");
 const util = require("../util");
@@ -46,7 +46,7 @@ const _sfc_main = vue.defineComponent({
     "update:maximized": (_maximized) => true
   },
   setup(props, { emit }) {
-    const { lang } = useReceiver.useLocale("table", props);
+    const { lang } = receiver.useLocale("table", props);
     const placement = vue.computed(() => {
       return props.maximized ? "bottom" : "top";
     });