ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/utils/hook.js

@@ -1,9 +1,7 @@
-import { provide, ref, onBeforeUnmount, computed, watch } from "vue";
+import { ref, onBeforeUnmount, computed, unref, onMounted, onActivated, onDeactivated, watch, provide, nextTick } from "vue";
 import { formItemContextKey } from "element-plus";
-import { capitalize, getValue } from "./common";
-function useFormItemRest() {
-  provide(formItemContextKey, null);
-}
+import { useContentRatio } from "../ele-viewer/util";
+import { capitalize, debounce, getValue } from "./common";
 function useTimer(ms, cb) {
   let timer = null;
   const waiting = ref(false);
@@ -55,18 +53,16 @@ function useMediaQuery(query, onChange) {
   });
   return [mediaQuery, startWatch, stopWatch];
 }
+const mobileMediaQuery = "(max-width: 767.99px)";
 function useMobile(onChange) {
   const mobile = ref(false);
-  const [media, startMedia, stopMedia] = useMediaQuery(
-    "(max-width: 768px)",
-    () => {
-      const isMobile = media.matches;
-      if (mobile.value !== isMobile) {
-        mobile.value = isMobile;
-        onChange && onChange(isMobile);
-      }
+  const [media, startMedia, stopMedia] = useMediaQuery(mobileMediaQuery, () => {
+    const isMobile = media.matches;
+    if (mobile.value !== isMobile) {
+      mobile.value = isMobile;
+      onChange && onChange(isMobile);
     }
-  );
+  });
   startMedia();
   return [mobile, startMedia, stopMedia];
 }
@@ -85,18 +81,6 @@ function useMobileDevice(onChange) {
   startMedia();
   return [mobileDevice, startMedia, stopMedia];
 }
-function useWindowListener(event, listener) {
-  const eventName = typeof event === "string" ? event : "resize";
-  const callback = typeof event === "function" ? event : listener;
-  if (callback != null) {
-    window.addEventListener(eventName, callback);
-  }
-  onBeforeUnmount(() => {
-    if (callback != null) {
-      window.removeEventListener(eventName, callback);
-    }
-  });
-}
 function useCollapseAnim() {
   let enterHeight = 0;
   const getHeight = (el, isEnter) => {
@@ -151,6 +135,9 @@ function useCollapseAnim() {
     handleAfterLeave
   };
 }
+const modalItemContextKey = Symbol(
+  "modalItemContextKey"
+);
 function useMousewheel(cb) {
   const handleMousewheel = (e) => {
     const delta = e.wheelDelta || e.detail;
@@ -208,8 +195,12 @@ function useTouchEvent(option) {
     distanceY = null;
   };
   const bindTouchEvent = (el) => {
-    el.addEventListener("touchstart", handleTouchStart);
-    el.addEventListener("touchmove", handleTouchMove);
+    el.addEventListener(
+      "touchstart",
+      handleTouchStart,
+      option?.touchstartOptions
+    );
+    el.addEventListener("touchmove", handleTouchMove, option?.touchmoveOptions);
     el.addEventListener("touchend", handleTouchEnd);
   };
   const unbindTouchEvent = (el) => {
@@ -287,17 +278,14 @@ function useMoveEvent(option) {
     document.addEventListener(
       "touchmove",
       touchmoveFn,
-      option == null ? void 0 : option.touchmoveOptions
+      option?.touchmoveOptions
     );
     document.addEventListener("touchend", touchendFn);
   };
   onBeforeUnmount(() => {
     unbindEvent();
   });
-  return {
-    handleMousedown,
-    handleTouchstart
-  };
+  return { handleMousedown, handleTouchstart };
 }
 function useComponentEvents(events, emit) {
   const emitMethods = {};
@@ -315,6 +303,108 @@ function useComponentEvents(events, emit) {
     emitProps
   };
 }
+function useComponentExpose(componentRef, methodNames, refNames) {
+  const exposeValues = {};
+  methodNames.forEach((name) => {
+    exposeValues[name] = ((...args) => {
+      if (!componentRef.value) {
+        throw new Error("componentRef is null");
+      }
+      return componentRef.value[name](...args);
+    });
+  });
+  refNames.forEach((name) => {
+    exposeValues[name] = computed(() => {
+      const val = componentRef.value?.[name];
+      return val == null ? val : unref(val);
+    });
+  });
+  return exposeValues;
+}
+function useContentSlot() {
+  const customProps = ref();
+  const contentRatio = useContentRatio((merged) => {
+    customProps.value = merged;
+  });
+  return { ...contentRatio, customProps };
+}
+function useResizeObserver(option) {
+  const width = ref(0);
+  const height = ref(0);
+  const updateWrapSize = () => {
+    const el = option.getEl();
+    if (el) {
+      const w = Math.floor(el.clientWidth);
+      if (width.value !== w) {
+        width.value = w;
+        option.onWidthChange && option.onWidthChange(w);
+      }
+      const h = Math.floor(el.clientHeight);
+      if (height.value !== h) {
+        height.value = h;
+        option.onHeightChange && option.onHeightChange(h);
+      }
+    }
+  };
+  const observer = new ResizeObserver(
+    debounce(() => {
+      updateWrapSize();
+    }, 400)
+  );
+  const observe = () => {
+    unobserve();
+    const el = option.getEl();
+    if (el) {
+      observer.observe(el);
+    }
+  };
+  const unobserve = () => {
+    const el = option.getEl();
+    if (el) {
+      observer.unobserve(el);
+    }
+  };
+  const delayUpdateWrapSize = (delay) => {
+    if (delay == null) {
+      updateWrapSize();
+    } else if (delay === 0) {
+      nextTick(() => {
+        updateWrapSize();
+      });
+    } else if (delay > 0) {
+      setTimeout(() => {
+        updateWrapSize();
+      }, delay);
+    }
+  };
+  onMounted(() => {
+    delayUpdateWrapSize(option.mountedUpdateDelay);
+    observe();
+  });
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+  onActivated(() => {
+    delayUpdateWrapSize(option.activatedUpdateDelay);
+    observe();
+  });
+  onDeactivated(() => {
+    unobserve();
+  });
+  return [width, height, updateWrapSize];
+}
+function useWindowListener(event, listener) {
+  const eventName = typeof event === "string" ? event : "resize";
+  const callback = typeof event === "function" ? event : listener;
+  if (callback != null) {
+    window.addEventListener(eventName, callback);
+  }
+  onBeforeUnmount(() => {
+    if (callback != null) {
+      window.removeEventListener(eventName, callback);
+    }
+  });
+}
 function useProOptions(props, name = "options") {
   const optionData = ref([]);
   const optionsProp = computed(() => getValue(props, name));
@@ -349,9 +439,16 @@ function useProOptions(props, name = "options") {
     reloadOptions
   };
 }
+function useFormItemRest() {
+  provide(formItemContextKey, null);
+}
 export {
+  mobileMediaQuery,
+  modalItemContextKey,
   useCollapseAnim,
   useComponentEvents,
+  useComponentExpose,
+  useContentSlot,
   useFormItemRest,
   useMediaQuery,
   useMobile,
@@ -359,6 +456,7 @@ export {
   useMousewheel,
   useMoveEvent,
   useProOptions,
+  useResizeObserver,
   useTimer,
   useTouchEvent,
   useWindowListener

package/es/utils/menu-util.js

@@ -6,12 +6,11 @@ function getIframeRouteComponent(menu, name) {
   return defineComponent({
     name,
     setup() {
-      var _a;
       const proLayoutState = useProLayoutState();
       const route = useRoute();
       const { fullPath } = route;
       const iframeSrc = ref(getIframeSrc(fullPath, menu.component));
-      const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
+      const isAlive = menu.meta?.keepAlive !== false;
       const keepAlive = computed(() => !!proLayoutState.keepAlive);
       return () => {
         if (!isAlive || !keepAlive.value) {
@@ -45,7 +44,7 @@ function getRouteComponent(menu, name, func) {
   return { component: getIframeRouteComponent(menu, name), link: true };
 }
 function menuToRoutes(menus, getComponent, added) {
-  if (!(menus == null ? void 0 : menus.length)) {
+  if (!menus?.length) {
     return;
   }
   const routes = [];

package/es/utils/message-box.js

@@ -13,10 +13,9 @@ function getWrapEl(bodyEl) {
   return elem;
 }
 function useMessageBox(globalOpt) {
-  var _a, _b;
   const layoutState = useLayoutState();
   const globalProps = useGlobalProps("messageBox");
-  const appContext = (_b = (_a = getCurrentInstance) == null ? void 0 : _a()) == null ? void 0 : _b.appContext;
+  const appContext = getCurrentInstance?.()?.appContext;
   const state = { wrapEl: null, isActivated: true, id: 0 };
   const instances = /* @__PURE__ */ new Map();
   const hideClass = "is-hide";

package/es/utils/message.js

@@ -5,10 +5,9 @@ import { useLayoutState } from "../ele-pro-layout/util";
 import MessageBody from "../ele-app/components/message-body";
 import { omit, queryChild } from "./common";
 function blurCurrentFocus() {
-  var _a;
-  if (typeof ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.querySelector) === "function") {
+  if (typeof document?.body?.querySelector === "function") {
     const el = document.body.querySelector(":focus");
-    typeof (el == null ? void 0 : el.blur) === "function" && el.blur();
+    typeof el?.blur === "function" && el.blur();
   }
 }
 function getWrapEl(bodyEl, force, groupKey) {
@@ -29,7 +28,7 @@ function getWrapEl(bodyEl, force, groupKey) {
   return elem;
 }
 function getDefaultGroupKey() {
-  const url = location == null ? void 0 : location.href;
+  const url = location?.href;
   const pi = url.indexOf("?");
   return url.substring(0, pi < 0 ? void 0 : pi);
 }
@@ -48,7 +47,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     opt.message = params;
   }
   opt.type = type ?? opt.type;
-  opt.appendTo = (opt.appendTo == null ? void 0 : unref(opt.appendTo)) ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  opt.appendTo = (opt.appendTo == null ? void 0 : unref(opt.appendTo)) ?? getWrapEl2?.(opt.inner);
   const classes = ["ele-message"];
   if (opt.original === "plain") {
     classes.push("is-plain-alert");
@@ -96,7 +95,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     { default: isFn ? content : isStr ? void 0 : () => content }
   );
   const key = (opt.inner ? groupKey : void 0) ?? "";
-  opt.message = isStr ? `${key}_${content ?? ""}` : void 0;
+  opt.message = isStr ? `${key}_${opt.type || "info"}_${content ?? ""}` : void 0;
   opt.grouping = isStr ? opt.grouping : false;
   return omit(opt, [
     "showClose",
@@ -158,11 +157,10 @@ EleMessage.closeAll = function(type) {
 };
 const MESSAGE_KEY = Symbol("message");
 function useMessage(globalOpt) {
-  var _a, _b;
   const layoutState = useLayoutState();
   const globalProps = useGlobalProps("message");
-  const appContext = (_b = (_a = getCurrentInstance) == null ? void 0 : _a()) == null ? void 0 : _b.appContext;
-  const groupKey = (globalOpt == null ? void 0 : globalOpt.groupKey) || getDefaultGroupKey();
+  const appContext = getCurrentInstance?.()?.appContext;
+  const groupKey = globalOpt?.groupKey || getDefaultGroupKey();
   const state = { wrapEl: null, isActivated: true, id: 0 };
   const instances = /* @__PURE__ */ new Map();
   const hideClass = "is-hide";

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

@@ -0,0 +1,23 @@
+import { MessageOptions } from './message';
+import { MessageBoxOptions } from './message-box';
+
+export interface UseModalOptions {
+    message: MessageOptions;
+    messageBox?: MessageBoxOptions;
+}
+/**
+ * 弹窗, 抽屉, 消息, 弹出框, 消息通知等组件操作
+ */
+export declare function useModal(options?: UseModalOptions): {
+    message: import('./message').Message;
+    messageBox: import('./message-box').MessageBox;
+    notification: (import('element-plus').Notify & import('vue').Plugin) & {
+        _context: import('vue').AppContext | null;
+    };
+    ModalHolder: import('vue').DefineComponent<{}, () => any[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    modalProps: import('vue').Ref<import('../ele-app/plus').EleDrawerPropsAndEmits | import('../ele-app/plus').EleModalPropsAndEmits, import('../ele-app/plus').EleDrawerPropsAndEmits | import('../ele-app/plus').EleModalPropsAndEmits> | undefined;
+    openModal: (option: import('../ele-modal-render/types').ModalItem) => import('../ele-modal-render/types').ModalItemId;
+    closeAllModal: (current?: boolean) => void;
+    closeModal: (modalId?: import('../ele-modal-render/types').ModalItemId) => void;
+    setModalProps: (modalId?: import('../ele-modal-render/types').ModalItemId | Record<string, any>, options?: Record<string, any>) => void;
+};

package/es/utils/modal-hook.js

@@ -0,0 +1,18 @@
+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";
+function useModal(options) {
+  const modal = useModal$1();
+  const message = useMessage(options?.message);
+  const messageBox = useMessageBox(options?.messageBox);
+  return {
+    ...modal,
+    message,
+    messageBox,
+    notification: ElNotification
+  };
+}
+export {
+  useModal
+};

package/es/utils/resolvers.js

@@ -1,5 +1,5 @@
 function getSideEffects(path, options) {
-  const importStyle = options == null ? void 0 : options.importStyle;
+  const importStyle = options?.importStyle;
   if (!importStyle) {
     return;
   }
@@ -24,9 +24,8 @@ function EleAdminResolver(options) {
   return {
     type: "component",
     resolve: (name) => {
-      var _a;
       const { path, exclude } = options || {};
-      if (name.match(/^Ele[A-Z]/) && !((_a = exclude == null ? void 0 : exclude.includes) == null ? void 0 : _a.call(exclude, name))) {
+      if (name.match(/^Ele[A-Z]/) && !exclude?.includes?.(name)) {
         const packageName = "ele-admin-plus";
         const namePath = name.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
         const stylePath = getStylePath(namePath, packageName, path);

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

@@ -1,3 +1,18 @@
+import { UserComponent } from '../ele-app/types';
+
+/**
+ * 预设常用布局
+ */
+export interface PredefinedLayout {
+    /** 布局名称 */
+    name: string;
+    /** 缩略图 */
+    cover: UserComponent;
+    /** 布局配置 */
+    config: Record<string, any>;
+    /** 非圆角主题下需要调整的布局配置 */
+    traditionalThemeConfig?: Record<string, any>;
+}
 /**
  * 主题皮肤配置
  */
@@ -25,7 +40,13 @@ export interface SkinConfig {
     /** 弹层背景蒙层 */
     overlayMaskColor?: string;
     /** 暗黑主题配置 */
-    darkConfig: Omit<SkinConfig, 'name' | 'darkConfig'>;
+    darkConfig: Omit<SkinConfig, 'name' | 'darkConfig' | 'layouts'>;
+    /** 主题样式 */
+    themeCss?: string;
+    /** 主题类名 */
+    themeClass?: string;
+    /** 预设常用布局 */
+    layouts?: PredefinedLayout[];
 }
 /**
  * 判断是否是颜色值

package/es/utils/theme-util.js

@@ -101,7 +101,7 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
   }
   const id = "ele-theme-var";
   const el = document.getElementById(id);
-  if (el == null ? void 0 : el.parentNode) {
+  if (el?.parentNode) {
     el.parentNode.removeChild(el);
   }
   if (color) {
@@ -164,29 +164,37 @@ function changeColor(color, dark, isTransparent, themeEl, themeSelector, darkCla
   }
 }
 function changeSkin(skinConfig, dark, themeEl, themeSelector, themeClass) {
-  var _a, _b;
   const $el = themeEl ?? document.documentElement;
   if (!$el) {
     return;
   }
   const id = "ele-skin-var";
   const el = document.getElementById(id);
-  if (el == null ? void 0 : el.parentNode) {
+  if (el?.parentNode) {
     el.parentNode.removeChild(el);
   }
   const className = themeClass ?? "is-transparent";
-  if (!skinConfig) {
+  const skinCfg = dark ? skinConfig?.darkConfig : skinConfig;
+  const isTransparent = !(!skinCfg || !skinCfg.wallpaper && !skinCfg.maskColor && !skinCfg.headerBg && !skinCfg.sidebarBg && !skinCfg.cardBg && !skinCfg.overlayBg && !skinCfg.overlayMaskColor);
+  if (!isTransparent) {
     $el.classList.remove(className);
+    if (skinCfg?.themeCss) {
+      const elem2 = document.createElement("style");
+      elem2.id = id;
+      elem2.setAttribute("type", "text/css");
+      elem2.innerHTML = skinCfg.themeCss;
+      document.head.appendChild(elem2);
+    }
     return;
   }
-  const selector = themeSelector ?? "html.is-transparent";
-  const skin = dark ? skinConfig.darkConfig || {} : skinConfig;
+  const skin = skinCfg || {};
   const wallpaper = getBgValue(skin.wallpaper, skin.maskColor);
   const overlayBg = getBgValue(skin.overlayBg, skin.overlayMaskColor);
   const tooltipBg = getBgValue(
-    (_a = skinConfig.darkConfig) == null ? void 0 : _a.overlayBg,
-    (_b = skinConfig.darkConfig) == null ? void 0 : _b.overlayMaskColor
+    skinConfig?.darkConfig?.overlayBg,
+    skinConfig?.darkConfig?.overlayMaskColor
   );
+  const selector = themeSelector ?? "html.is-transparent";
   const cssVar = [
     `${selector}{`,
     wallpaper ? `--ele-skin-bg-wallpaper:${wallpaper};` : void 0,
@@ -195,7 +203,8 @@ function changeSkin(skinConfig, dark, themeEl, themeSelector, themeClass) {
     skin.cardBg ? `--ele-skin-bg-card:${skin.cardBg};` : void 0,
     overlayBg ? `--ele-skin-bg-overlay:${overlayBg};` : void 0,
     tooltipBg ? `--ele-skin-bg-tooltip:${tooltipBg};` : void 0,
-    "}"
+    "}",
+    skin.themeCss
   ];
   const elem = document.createElement("style");
   elem.id = id;

package/es/utils/validate.js

@@ -92,9 +92,9 @@ function isIdentityStrong(value) {
   if (!isIdentity(value)) {
     return "身份证号码格式错误";
   }
-  const ai = value.length === 18 ? value.substring(0, 17) : value.substring(0, 6) + "19" + value.substring(6, 15);
+  const ai = value.length === 18 ? value.substring(0, 17) : `${value.substring(0, 6)}19${value.substring(6, 15)}`;
   const year = ai.substring(6, 10);
-  const birthday = year + "/" + ai.substring(10, 12) + "/" + ai.substring(12, 14);
+  const birthday = `${year}/${ai.substring(10, 12)}/${ai.substring(12, 14)}`;
   if (!isDate(birthday)) {
     return "身份证号码出生日期无效";
   }