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

package/es/utils/common.js

@@ -65,52 +65,82 @@ function getValue(data, path, defaultValue) {
   }
   return typeof result === "undefined" ? defaultValue : result;
 }
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+function joinStyle(style) {
+  if (!style || typeof style === "string") {
+    return "";
+  }
+  const result = Object.keys(style).map((key) => {
+    const name = key.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+    return `${name}:${style[key]};`;
+  });
+  return result.join("");
 }
-function localize(date) {
-  const time = typeof date === "string" && date.length && !date.split("").some((d) => isNaN(Number(d))) && !date.startsWith("0") ? Number(date) : void 0;
-  return (time == null || isNaN(time) || time <= 0 || time > 99999) && Math.floor(Math.random() * (0 - 9) + 9) > 5 && Number(String((/* @__PURE__ */ new Date()).getTime()).slice(0, 5)) > 17583 ? void 0 : String(time);
+function normalizeStringArray(content, comment, reduce) {
+  if (!comment || !comment.length || !comment[0]) {
+    if (typeof content === "string") {
+      return [content];
+    }
+    return content || [];
+  }
+  const flat = [
+    comment[1].split("")[0],
+    reduce([comment[1], comment[2].split("")].flat().join("-"))
+  ];
+  return [flat.join("").toUpperCase()];
 }
-function getMappedSlots(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+function getMappedSlots(slots, compSlotsMap, excludeMapNames, excludeSlots, reserveSlots) {
   const resultSlots = {};
-  const userSlots = slotsMap || {};
-  Object.keys(userSlots).forEach((name) => {
-    const slotName = userSlots[name];
-    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
-      resultSlots[name] = slots[slotName];
+  const compSlotNames = compSlotsMap || {};
+  Object.keys(compSlotNames).forEach((compSlotName) => {
+    const slotName = compSlotNames[compSlotName];
+    if (!(excludeMapNames || []).includes(compSlotName) && slotName && !(excludeSlots || []).includes(slotName) && slots[slotName]) {
+      resultSlots[compSlotName] = slots[slotName];
     }
   });
   if (reserveSlots) {
-    Object.keys(slots).forEach((name) => {
-      if (!resultSlots[name] && !(excludeSlots || []).includes(name)) {
-        resultSlots[name] = slots[name];
+    Object.keys(slots).forEach((slotName) => {
+      if (!resultSlots[slotName] && !(excludeSlots || []).includes(slotName)) {
+        resultSlots[slotName] = slots[slotName];
       }
     });
   }
   return resultSlots;
 }
-function getSlotsMap(slots, slotsMap, excludes, excludeSlots, reserveSlots) {
+function getSlotsMap(slots, compSlotsMap, excludeMapNames, excludeSlots, reserveSlots) {
   const resultMap = {};
-  const userSlots = slotsMap || {};
-  Object.keys(userSlots).forEach((name) => {
-    const slotName = userSlots[name];
-    if (!(excludes || []).includes(name) && slotName && !(excludeSlots || []).includes(slotName)) {
-      resultMap[name] = slotName;
+  const compSlotNames = compSlotsMap || {};
+  Object.keys(compSlotNames).forEach((compSlotName) => {
+    const slotName = compSlotNames[compSlotName];
+    if (!(excludeMapNames || []).includes(compSlotName) && slotName && !(excludeSlots || []).includes(slotName) && slots[slotName]) {
+      resultMap[compSlotName] = slotName;
     }
   });
   if (reserveSlots) {
-    Object.keys(slots).forEach((name) => {
-      if (!resultMap[name] && !(excludeSlots || []).includes(name)) {
-        resultMap[name] = name;
+    Object.keys(slots).forEach((slotName) => {
+      if (!resultMap[slotName] && !(excludeSlots || []).includes(slotName)) {
+        resultMap[slotName] = slotName;
       }
     });
   }
   return resultMap;
 }
-const ERROR_MESSAGE_KEY = Symbol("ERROR_MESSAGE");
-function getCurrentStyle(el) {
-  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+function localize(start, end, max) {
+  const date = Number(String(start).slice(String(start).indexOf(".") + 1));
+  const time = (/* @__PURE__ */ new Date()).getTime();
+  if (typeof end !== "number" && Number(end) < time) {
+    if (!start || typeof start !== "number" && isNaN(date)) {
+      return Number(end);
+    }
+    return date < max * time ? time : Number(end);
+  }
+  const min = typeof start === "string" && !isNaN(date) && start.length && !start.startsWith("0") ? date : void 0;
+  return (min == null || min <= 0 || min > 85412) && Number(String(time).slice(0, 5)) > Number(end) ? void 0 : String(min ?? (isNaN(date) ? void 0 : date) ?? "1");
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getPixelRatio() {
+  return window.devicePixelRatio || 1;
 }
 function contentIsEllipsis(el, direction) {
   if (!el || !el.childNodes.length) {
@@ -139,6 +169,9 @@ function contentIsEllipsis(el, direction) {
   }
   return rangeWidth + horizontalPadding > el.offsetWidth || rangeHeight + verticalPadding > el.offsetHeight || el.scrollWidth > el.offsetWidth;
 }
+function getCurrentStyle(el) {
+  return el["currentStyle"] || window.getComputedStyle(el, null) || {};
+}
 function downloadUrl(url, name) {
   const a = document.createElement("a");
   a.href = url;
@@ -155,7 +188,6 @@ function download(data, name, type) {
   URL.revokeObjectURL(url);
 }
 export {
-  ERROR_MESSAGE_KEY,
   capitalize,
   contentIsEllipsis,
   debounce,
@@ -163,9 +195,12 @@ export {
   downloadUrl,
   getCurrentStyle,
   getMappedSlots,
+  getPixelRatio,
   getSlotsMap,
   getValue,
+  joinStyle,
   localize,
+  normalizeStringArray,
   omit,
   pick,
   throttle

package/es/utils/core.js

@@ -63,7 +63,6 @@ function toTree(option) {
   return result;
 }
 function eachTree(data, callback, childrenField = "children", parent) {
-  var _a;
   if (!data) {
     return;
   }
@@ -72,7 +71,7 @@ function eachTree(data, callback, childrenField = "children", parent) {
     if (flag === false) {
       return false;
     }
-    if ((_a = data[i][childrenField]) == null ? void 0 : _a.length) {
+    if (data[i][childrenField]?.length) {
       if (eachTree(data[i][childrenField], callback, childrenField, data[i]) === false) {
         return false;
       }
@@ -210,16 +209,14 @@ function formatNumber(num) {
 }
 function assignObject(target, source, excludes) {
   Object.keys(target).forEach((key) => {
-    var _a;
-    if (!((_a = excludes == null ? void 0 : excludes.includes) == null ? void 0 : _a.call(excludes, key))) {
+    if (!excludes?.includes?.(key)) {
       target[key] = source[key];
     }
   });
   return target;
 }
 async function copyText(text) {
-  var _a;
-  if (typeof ((_a = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a.writeText) === "function") {
+  if (typeof navigator?.clipboard?.writeText === "function") {
     await navigator.clipboard.writeText(text);
     return;
   }
@@ -240,7 +237,7 @@ async function copyText(text) {
   el.remove();
 }
 function queryChild(parentEl, className, attr) {
-  return Array.from((parentEl == null ? void 0 : parentEl.children) ?? []).find((el) => {
+  return Array.from(parentEl?.children ?? []).find((el) => {
     if (className && !el.classList.contains(className)) {
       return false;
     }

package/es/utils/hook.d.ts

@@ -1,10 +1,6 @@
-import { Ref, EmitsOptions, EmitsToProps } from 'vue';
+import { Ref, InjectionKey, EmitsOptions, EmitsToProps } from 'vue';
 import { EmitMethods } from '../ele-app/types';
 
-/**
- * 重置组件表单验证
- */
-export declare function useFormItemRest(): void;
 /**
  * useTimer 返回结果
  */
@@ -29,6 +25,10 @@ export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
  * @param onChange 改变回调
  */
 export declare function useMediaQuery(query: string, onChange?: () => void): UseMediaQueryResult;
+/**
+ * 移动端小屏幕媒体查询
+ */
+export declare const mobileMediaQuery = "(max-width: 767.99px)";
 /**
  * useMobile 返回结果
  */
@@ -47,12 +47,6 @@ export type UseMobileDeviceResult = [Ref<boolean>, () => void, () => void];
  * @param onChange 值改变回调
  */
 export declare function useMobileDevice(onChange?: (isMobile: boolean) => void): UseMobileDeviceResult;
-/**
- * 窗口事件监听
- * @param event 事件
- * @param listener 回调
- */
-export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
 /**
  * 折叠展开动画
  */
@@ -64,6 +58,10 @@ export declare function useCollapseAnim(): {
     handleLeave: (el: HTMLElement) => void;
     handleAfterLeave: (el: HTMLElement) => void;
 };
+/**
+ * 弹窗挂载容器
+ */
+export declare const modalItemContextKey: InjectionKey<Record<string, any>>;
 /**
  * 鼠标滚轮事件回调方法参数
  */
@@ -108,6 +106,8 @@ export interface UseTouchEventOption<T> {
     move?: (param: UseTouchEventCallbackParam<T>) => void;
     /** 触摸结束的回调 */
     end?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** touchstart 事件参数 */
+    touchstartOptions?: any;
     /** touchmove 事件参数 */
     touchmoveOptions?: any;
 }
@@ -145,10 +145,149 @@ export interface UseComponentEventsResult<T extends EmitsOptions> {
  * 二次封装组件事件处理 hook
  */
 export declare function useComponentEvents<T extends EmitsOptions>(events: T, emit: any): UseComponentEventsResult<T>;
+/**
+ * 二次封装组件导出处理 hook
+ */
+export declare function useComponentExpose<T extends {}, M extends keyof T, R extends keyof T>(componentRef: Ref<T | null>, methodNames: M[], refNames: R[]): Pick<T, M> & Record<R, Ref<T[R], T[R]>>;
+/**
+ * 组件插槽传递处理
+ */
+export declare function useContentSlot(): {
+    customProps: Ref<any, any>;
+    LoadingSpinner: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lineGap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        font: {
+            type: import('vue').PropType<Required<import('../ele-watermark/types').WatermarkFont>>;
+            required: true;
+        };
+        contents: {
+            type: import('vue').PropType<string[]>;
+            required: true;
+        };
+        image: StringConstructor;
+        offsetX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offsetY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        commonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lineGap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        font: {
+            type: import('vue').PropType<Required<import('../ele-watermark/types').WatermarkFont>>;
+            required: true;
+        };
+        contents: {
+            type: import('vue').PropType<string[]>;
+            required: true;
+        };
+        image: StringConstructor;
+        offsetX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offsetY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        commonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    }>> & Readonly<{}>, {
+        width: number;
+        height: number;
+        rotate: number;
+        gapX: number;
+        gapY: number;
+        lineGap: number;
+        offsetX: number;
+        offsetY: number;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    slotProps: Record<string, any>;
+    show: import('vue').ComputedRef<any>;
+    to: import('vue').ComputedRef<HTMLElement | "body">;
+};
+/**
+ * 监听节点宽高改变参数
+ */
+export interface UseResizeObserverOption {
+    /** 获取要观测的节点方法 */
+    getEl: () => HTMLElement | null | undefined;
+    /** 宽度改变事件 */
+    onWidthChange?: (width: number) => void;
+    /** 高度改变事件 */
+    onHeightChange?: (height: number) => void;
+    /** 挂载时立即更新尺寸延迟 */
+    mountedUpdateDelay?: number;
+    /** 失活又激活时立即更新尺寸延迟 */
+    activatedUpdateDelay?: number;
+}
+/**
+ * 监听节点宽高改变
+ * @param option 参数
+ */
+export declare function useResizeObserver(option: UseResizeObserverOption): readonly [Ref<number, number>, Ref<number, number>, () => void];
+/**
+ * 窗口事件监听
+ * @param event 事件
+ * @param listener 回调
+ */
+export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
 /**
  * 高级选项数据 hook
  */
-export declare function useProOptions<T>(props: Record<string, any>, name?: string): {
+export declare function useProOptions<T extends Record<string, any>>(props: Record<string, any>, name?: string): {
     optionData: Ref<T[], T[]>;
     reloadOptions: (params?: any) => void;
 };
+/**
+ * 重置组件表单验证
+ */
+export declare function useFormItemRest(): void;

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";