ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/es/utils/lib-export.js

@@ -0,0 +1,233 @@
+import { debugWarn } from "element-plus/es/utils/error";
+import tableProps from "element-plus/es/components/table/src/table/defaults";
+const tablePropsType = {
+  /**
+   * @description table data
+   */
+  data: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description size of Table
+   */
+  size: {
+    type: String
+  },
+  width: [String, Number],
+  /**
+   * @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
+   */
+  height: [String, Number],
+  /**
+   * @description table's max-height. The legal value is a number or the height in px
+   */
+  maxHeight: [String, Number],
+  /**
+   * @description whether width of column automatically fits its container
+   */
+  fit: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description whether Table is striped
+   */
+  stripe: Boolean,
+  /**
+   * @description whether Table has vertical border
+   */
+  border: Boolean,
+  /**
+   * @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used
+   */
+  rowKey: [String, Function],
+  /**
+   * @description whether Table header is visible
+   */
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description whether to display a summary row
+   */
+  showSummary: Boolean,
+  /**
+   * @description displayed text for the first column of summary row
+   */
+  sumText: String,
+  /**
+   * @description custom summary method
+   */
+  summaryMethod: Function,
+  /**
+   * @description function that returns custom class names for a row, or a string assigning class names for every row
+   */
+  rowClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a row, or an object assigning custom style for every row
+   */
+  rowStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a cell, or a string assigning class names for every cell
+   */
+  cellClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a cell, or an object assigning custom style for every cell
+   */
+  cellStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a row in table header, or a string assigning class names for every row in table header
+   */
+  headerRowClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a row in table header, or an object assigning custom style for every row in table header
+   */
+  headerRowStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header
+   */
+  headerCellClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header
+   */
+  headerCellStyle: [Object, Function],
+  /**
+   * @description whether current row is highlighted
+   */
+  highlightCurrentRow: Boolean,
+  /**
+   * @description key of current row, a set only prop
+   */
+  currentRowKey: [String, Number],
+  /**
+   * @description displayed text when data is empty. You can customize this area with `#empty`
+   */
+  emptyText: String,
+  /**
+   * @description set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop
+   */
+  expandRowKeys: Array,
+  /**
+   * @description whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data
+   */
+  defaultExpandAll: Boolean,
+  /**
+   * @description enable expandable rows, works when the table has a column type="expand"
+   */
+  rowExpandable: {
+    type: Function
+  },
+  /**
+   * @description set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order
+   */
+  defaultSort: Object,
+  /**
+   * @description the `effect` of the overflow tooltip
+   */
+  tooltipEffect: String,
+  /**
+   * @description the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes)
+   */
+  tooltipOptions: Object,
+  /**
+   * @description method that returns rowspan and colspan
+   */
+  spanMethod: Function,
+  /**
+   * @description controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected
+   */
+  selectOnIndeterminate: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description horizontal indentation of tree data
+   */
+  indent: {
+    type: Number,
+    default: 16
+  },
+  /**
+   * @description configuration for rendering nested data
+   */
+  treeProps: {
+    type: Object,
+    default: () => {
+      return {
+        hasChildren: "hasChildren",
+        children: "children",
+        checkStrictly: false
+      };
+    }
+  },
+  /**
+   * @description whether to lazy loading data
+   */
+  lazy: Boolean,
+  /**
+   * @description method for loading child row data, only works when `lazy` is true
+   */
+  load: Function,
+  style: {
+    type: [String, Object, Array, Boolean],
+    default: () => ({})
+  },
+  className: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description sets the algorithm used to lay out table cells, rows, and columns
+   */
+  tableLayout: {
+    type: String,
+    default: "fixed"
+  },
+  /**
+   * @description always show scrollbar
+   */
+  scrollbarAlwaysOn: Boolean,
+  /**
+   * @description ensure main axis minimum-size doesn't follow the content
+   */
+  flexible: Boolean,
+  /**
+   * @description whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns
+   */
+  showOverflowTooltip: {
+    type: [Boolean, Object],
+    default: void 0
+  },
+  /**
+   * @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
+   */
+  tooltipFormatter: Function,
+  appendFilterPanelTo: String,
+  scrollbarTabindex: {
+    type: [Number, String],
+    default: void 0
+  },
+  /**
+   * @description whether to allow drag the last column
+   */
+  allowDragLastColumn: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description whether to preserve expanded row content in DOM when collapsed
+   */
+  preserveExpandedContent: Boolean,
+  /**
+   * @description whether to use native scrollbars
+   */
+  nativeScrollbar: Boolean
+};
+const elTableProps = tableProps;
+export {
+  debugWarn,
+  elTableProps,
+  tablePropsType
+};

package/es/utils/menu-util.d.ts

@@ -18,5 +18,7 @@ export declare function getIframeRouteComponent(menu: MenuItem, name: string): i
  * @param menus 菜单数据
  * @param getComponent 加载组件的方法
  * @param added 已添加的路由
+ * @param iframePageUrl 内嵌组件的路由地址拼接
+ * @param iframePageName 内嵌组件的路由名称拼接
  */
-export declare function menuToRoutes(menus: MenuItem[] | undefined, getComponent: GetComponent, added?: _RouteRecordBase[]): RouteRecordRaw[] | undefined;
+export declare function menuToRoutes(menus: MenuItem[] | undefined, getComponent: GetComponent, added?: _RouteRecordBase[], iframePageUrl?: string, iframePageName?: string): RouteRecordRaw[] | undefined;

package/es/utils/menu-util.js

@@ -1,23 +1,18 @@
-import { defineComponent, ref, computed, h } from "vue";
-import { useRoute } from "vue-router";
-import { useProLayoutState, getIframeSrc } from "../ele-pro-layout/util";
+import { defineComponent, computed, h } from "vue";
+import { useProLayoutState } from "../ele-pro-layout/util";
+import IframeItem from "../ele-pro-layout/components/iframe-item";
 import { isExternalLink, findTree } from "./common";
 function getIframeRouteComponent(menu, name) {
+  const menuComponent = menu.component;
+  const menuKeepAlive = menu.meta?.keepAlive !== false;
   return defineComponent({
     name,
     setup() {
       const proLayoutState = useProLayoutState();
-      const route = useRoute();
-      const { fullPath } = route;
-      const iframeSrc = ref(getIframeSrc(fullPath, menu.component));
-      const isAlive = menu.meta?.keepAlive !== false;
       const keepAlive = computed(() => !!proLayoutState.keepAlive);
       return () => {
-        if (!isAlive || !keepAlive.value) {
-          return h("iframe", {
-            src: iframeSrc.value,
-            class: "ele-admin-iframe"
-          });
+        if (!menuKeepAlive || !keepAlive.value) {
+          return h(IframeItem, { menuComponent });
         }
         return h("div", { class: "ele-none", style: { display: "none" } });
       };
@@ -37,13 +32,7 @@ function getRoutePath(path) {
   }
   return path.substring(0, path.indexOf("?"));
 }
-function getRouteComponent(menu, name, func) {
-  if (!menu.component || !isExternalLink(menu.component)) {
-    return { component: func(menu.component, menu, name) };
-  }
-  return { component: getIframeRouteComponent(menu, name), link: true };
-}
-function menuToRoutes(menus, getComponent, added) {
+function menuToRoutes(menus, getComponent, added, iframePageUrl, iframePageName) {
   if (!menus?.length) {
     return;
   }
@@ -51,25 +40,72 @@ function menuToRoutes(menus, getComponent, added) {
   const addedRoutes = added ? [...added] : [];
   menus.forEach((item) => {
     const meta = { ...item.meta };
-    const path = meta.routePath || getRoutePath(item.path);
-    if (path && !isExternalLink(path) && !pathIsAdd(path, addedRoutes)) {
-      const name = item.name || camelCase(path);
-      const { component, link } = getRouteComponent(item, name, getComponent);
-      if (link) {
+    const itemPath = getRoutePath(item.path);
+    const path = meta.routePath || itemPath;
+    if (!path || isExternalLink(path) || meta.openType === "external" || pathIsAdd(path, addedRoutes)) {
+      const childs = menuToRoutes(
+        item.children,
+        getComponent,
+        addedRoutes,
+        iframePageUrl,
+        iframePageName
+      );
+      if (childs) {
+        childs.forEach((child) => {
+          routes.push(child);
+        });
+      }
+      return;
+    }
+    const name = item.name || camelCase(path);
+    let component;
+    if (meta.openType === "iframe" || isExternalLink(item.component)) {
+      if (item.component && item.component.startsWith("c://")) {
+        const link = `${itemPath || ""}${iframePageUrl || "/page"}`;
+        const linkName = `${name}${iframePageName || "Page"}`;
+        component = getIframeRouteComponent({ ...item, component: link }, name);
+        meta.iframe = link;
+        if (meta.hideFooter == null) {
+          meta.hideFooter = true;
+        }
+        if (!pathIsAdd(link, addedRoutes)) {
+          const pageComponent = item.component.slice(3);
+          addedRoutes.push({ path: link });
+          routes.push({
+            name: linkName,
+            path: link,
+            component: getComponent(pageComponent, item, linkName),
+            redirect: void 0,
+            props: item.props,
+            meta: { ...meta, iframe: void 0, layout: false }
+          });
+        }
+      } else {
+        component = getIframeRouteComponent(item, name);
         meta.iframe = item.component;
-        meta.hideFooter = true;
+        if (meta.hideFooter == null) {
+          meta.hideFooter = true;
+        }
       }
-      addedRoutes.push({ path });
-      routes.push({
-        name,
-        path,
-        component,
-        redirect: item.redirect,
-        props: item.props,
-        meta,
-        children: menuToRoutes(item.children, getComponent, addedRoutes)
-      });
+    } else {
+      component = getComponent(item.component, item, name);
     }
+    addedRoutes.push({ path });
+    routes.push({
+      name,
+      path,
+      component,
+      redirect: item.redirect,
+      props: item.props,
+      meta,
+      children: menuToRoutes(
+        item.children,
+        getComponent,
+        addedRoutes,
+        iframePageUrl,
+        iframePageName
+      )
+    });
   });
   return routes;
 }

package/es/utils/message.js

@@ -155,7 +155,7 @@ EleMessage.loading = function(params, context) {
 EleMessage.closeAll = function(type) {
   return ElMessage.closeAll(type);
 };
-const MESSAGE_KEY = Symbol("message");
+const MESSAGE_KEY = /* @__PURE__ */ Symbol("message");
 function useMessage(globalOpt) {
   const layoutState = useLayoutState();
   const globalProps = useGlobalProps("message");

package/es/utils/modal-hook.d.ts

@@ -7,18 +7,19 @@ export interface UseModalOptions {
     messageBox?: MessageBoxOptions;
 }
 /**
- * 弹窗, 抽屉, 消息, 弹出框, 消息通知等组件操作
+ * 弹窗, 抽屉, 图片预览, 消息, 弹出框, 消息通知等组件操作
  */
 export declare function useModal<T extends ModalItemType>(options?: UseModalOptions): {
+    imageViewer: import('../ele-image-viewer-provider/types').ImageViewerProvider | null;
     message: import('./message').Message;
     messageBox: import('./message-box').MessageBox;
-    notification: (import('element-plus').Notify & import('vue').Plugin) & {
-        _context: import('vue').AppContext | null;
-    };
+    notification: import('element-plus/es/utils/vue/typescript').SFCInstallWithContext<import('element-plus').Notify>;
     ModalHolder: import('vue').Component;
     modalProps?: import('vue').Ref<import('../ele-modal-render/types').ModalItemProps<T>, import('../ele-modal-render/types').ModalItemProps<T>> | undefined;
     openModal: <T_1 extends ModalItemType, P extends Record<string, any>>(option: import('../ele-modal-render/types').ModalItem<T_1, P>) => import('../ele-modal-render/types').ModalItemId;
     closeAllModal: (current?: boolean) => void;
     closeModal: (modalId?: import('../ele-modal-render/types').ModalItemId) => void;
     setModalProps: <T_1 extends ModalItemType>(modalId?: import('../ele-modal-render/types').ModalItemId | import('../ele-modal-render/types').ModalItemProps<T_1>, options?: import('../ele-modal-render/types').ModalItemProps<T_1>) => void;
+    removeAllModal: (current?: boolean) => void;
+    removeModal: (modalId?: import('../ele-modal-render/types').ModalItemId) => void;
 };

package/es/utils/modal-hook.js

@@ -2,12 +2,15 @@ import { ElNotification } from "element-plus";
 import { useModal as useModal$1 } from "../ele-modal-render/use-modal";
 import { useMessage } from "./message";
 import { useMessageBox } from "./message-box";
+import { useImageViewer } from "../ele-image-viewer-provider/util";
 function useModal(options) {
   const modal = useModal$1();
   const message = useMessage(options?.message);
   const messageBox = useMessageBox(options?.messageBox);
+  const imageViewer = useImageViewer();
   return {
     ...modal,
+    imageViewer,
     message,
     messageBox,
     notification: ElNotification

package/es/utils/theme-util.d.ts

@@ -1,3 +1,4 @@
+import { RGB } from '@ant-design/fast-color';
 import { UserComponent } from '../ele-app/types';
 
 /**
@@ -6,6 +7,8 @@ import { UserComponent } from '../ele-app/types';
 export interface PredefinedLayout {
     /** 布局名称 */
     name: string;
+    /** 布局展示名称 */
+    title?: string;
     /** 缩略图 */
     cover: UserComponent;
     /** 布局配置 */
@@ -19,6 +22,8 @@ export interface PredefinedLayout {
 export interface SkinConfig {
     /** 主题皮肤名称 */
     name?: string;
+    /** 主题展示名称 */
+    title?: string;
     /** 主题皮肤缩略图 */
     cover?: string;
     /** 自定义主题皮肤基于的默认主题皮肤名称 */
@@ -47,12 +52,41 @@ export interface SkinConfig {
     themeClass?: string;
     /** 预设常用布局 */
     layouts?: PredefinedLayout[];
+    /** 默认使用的预设布局名称 */
+    defaultLayout?: string;
+}
+/**
+ * 色阶
+ */
+export interface ColorLevels {
+    /** 主色 */
+    color: string;
+    /** 亮 */
+    colorL: string;
+    /** 很亮 */
+    colorXL: string;
+    /** 特亮 */
+    colorXXL: string;
+    /** 超亮 */
+    colorXXXL: string;
+    /** 极亮 */
+    colorXXXXL: string;
+    /** 暗 */
+    colorD: string;
+    /** 是否是透明模式 */
+    isTransparent: boolean;
 }
 /**
  * 判断是否是颜色值
  * @param value 颜色
  */
 export declare function isColorValue(value?: string): boolean;
+/**
+ * 增加颜色透明度
+ * @param rgb 颜色
+ * @param minus 增加的透明度
+ */
+export declare function getColorLevel(rgb: RGB, minus: number): string;
 /**
  * 切换主题色
  * @param color 颜色值
@@ -62,8 +96,9 @@ export declare function isColorValue(value?: string): boolean;
  * @param themeSelector 主题变量选择器
  * @param darkClass 暗黑主题节点类名
  * @param darkSelector 暗黑主题变量选择器
+ * @returns 主题色对应的色阶
  */
-export declare function changeColor(color?: string | null, dark?: boolean, isTransparent?: boolean, themeEl?: HTMLElement, themeSelector?: string, darkClass?: string, darkSelector?: string): void;
+export declare function changeColor(color?: string | null, dark?: boolean, isTransparent?: boolean, themeEl?: HTMLElement, themeSelector?: string, darkClass?: string, darkSelector?: string): ColorLevels | undefined;
 /**
  * 切换主题皮肤
  * @param skinConfig 主题皮肤配置

package/es/utils/theme-util.js

@@ -58,8 +58,9 @@ function generateColors(color, dark, isTransparent) {
     // 超亮
     colorXXXXL: levels[0],
     // 极亮
-    colorD: dark ? levels[5] : levels[6]
+    colorD: dark ? levels[5] : levels[6],
     // 暗
+    isTransparent
   };
   if (!isTransparent) {
     return colors;
@@ -78,21 +79,25 @@ function generateColors(color, dark, isTransparent) {
     // 超亮
     colorXXXXL: getColorLevel(rgb, 86),
     // 极亮
-    colorD: colors.colorD
+    colorD: colors.colorD,
     // 暗
+    isTransparent
   };
 }
 function generateCssVar(color, dark, isTransparent, varName = "primary") {
   const colors = generateColors(color, !!dark, !!isTransparent);
-  return [
-    `--el-color-${varName}:${colors.color};`,
-    `--el-color-${varName}-light-3:${colors.colorL};`,
-    `--el-color-${varName}-light-5:${colors.colorXL};`,
-    `--el-color-${varName}-light-7:${colors.colorXXL};`,
-    `--el-color-${varName}-light-8:${colors.colorXXXL};`,
-    `--el-color-${varName}-light-9:${colors.colorXXXXL};`,
-    `--el-color-${varName}-dark-2:${colors.colorD};`
-  ];
+  return {
+    cssVars: [
+      `--el-color-${varName}:${colors.color};`,
+      `--el-color-${varName}-light-3:${colors.colorL};`,
+      `--el-color-${varName}-light-5:${colors.colorXL};`,
+      `--el-color-${varName}-light-7:${colors.colorXXL};`,
+      `--el-color-${varName}-light-8:${colors.colorXXXL};`,
+      `--el-color-${varName}-light-9:${colors.colorXXXXL};`,
+      `--el-color-${varName}-dark-2:${colors.colorD};`
+    ],
+    colors
+  };
 }
 function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkClass, darkSelector) {
   const $el = themeEl ?? document.documentElement;
@@ -104,9 +109,15 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
   if (el?.parentNode) {
     el.parentNode.removeChild(el);
   }
+  let colorLevels;
   if (color) {
     const selector = dark ? getDarkSelector(darkSelector) : getThemeSelector(themeSelector);
-    const colorCssVar = generateCssVar(color, dark, isTransparent);
+    const { colors, cssVars: colorCssVar } = generateCssVar(
+      color,
+      dark,
+      isTransparent
+    );
+    colorLevels = colors;
     if (isTransparent) {
       colorCssVar.push(
         generateCssVar(
@@ -114,7 +125,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
           dark,
           isTransparent,
           "success"
-        ).join("")
+        ).cssVars.join("")
       );
       colorCssVar.push(
         generateCssVar(
@@ -122,7 +133,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
           dark,
           isTransparent,
           "warning"
-        ).join("")
+        ).cssVars.join("")
       );
       colorCssVar.push(
         generateCssVar(
@@ -130,7 +141,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
           dark,
           isTransparent,
           "danger"
-        ).join("")
+        ).cssVars.join("")
       );
       colorCssVar.push(
         generateCssVar(
@@ -138,7 +149,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
           dark,
           isTransparent,
           "error"
-        ).join("")
+        ).cssVars.join("")
       );
       colorCssVar.push(
         generateCssVar(
@@ -146,7 +157,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
           dark,
           isTransparent,
           "info"
-        ).join("")
+        ).cssVars.join("")
       );
     }
     const elem = document.createElement("style");
@@ -162,6 +173,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
   } else {
     $el.classList.remove(darkClassName);
   }
+  return colorLevels;
 }
 function changeSkin(skinConfig, dark, themeEl, themeSelector, themeClass) {
   const $el = themeEl ?? document.documentElement;
@@ -216,5 +228,6 @@ function changeSkin(skinConfig, dark, themeEl, themeSelector, themeClass) {
 export {
   changeColor,
   changeSkin,
+  getColorLevel,
   isColorValue
 };