ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/es/style/util.scss

@@ -27,11 +27,18 @@
   @return eleJoinVar($args);
 }
 
+/* 生成 css 变量 */
+@mixin set-ele-var-value($name, $attribute, $value) {
+  #{eleVarName($name, $attribute)}: #{$value};
+}
+
 /* 生成组件 css 变量 */
 @mixin set-ele-var($name, $variables) {
-  @if map.has-key($variables, $name) {
-    @each $attribute, $value in map.get($variables, $name) {
-      #{eleVarName($name, $attribute)}: #{$value};
+  & {
+    @if map.has-key($variables, $name) {
+      @each $attribute, $value in map.get($variables, $name) {
+        @include set-ele-var-value($name, $attribute, $value);
+      }
     }
   }
 }

package/es/utils/core.d.ts

@@ -1,3 +1,5 @@
+import { Mutable } from '../ele-app/types';
+
 /**
  * toTree 方法参数
  */
@@ -157,10 +159,10 @@ export declare function throttle<T extends (...args: any) => any>(func: T, wait:
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Omit<T, K>;
+export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Mutable<Omit<T, K>>;
 /**
  * 摘选对象属性
  * @param obj 来源对象
  * @param fields 摘选的属性
  */
-export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Pick<T, K>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;

package/es/utils/hook.d.ts

@@ -1,9 +1,12 @@
+import { Ref } from 'vue';
+
 /**
- * useTimer返回结果
+ * useTimer 返回结果
  */
 export type UseTimerResult = [
-    (callback: () => void, timeout?: number) => void,
-    () => void
+    (callback?: () => void, timeout?: number) => void,
+    () => void,
+    Ref<boolean>
 ];
 /**
  * 定时器
@@ -12,7 +15,7 @@ export type UseTimerResult = [
  */
 export declare function useTimer(ms?: number | (() => number), cb?: () => void): UseTimerResult;
 /**
- * useMediaQuery返回结果
+ * useMediaQuery 返回结果
  */
 export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
 /**
@@ -38,3 +41,73 @@ export declare function useCollapseAnim(): {
     handleLeave: (el: HTMLElement) => void;
     handleAfterLeave: (el: HTMLElement) => void;
 };
+/**
+ * 鼠标滚轮事件回调方法参数
+ */
+export interface UseMousewheelCallbackParam {
+    /** 事件对象 */
+    e: MouseEvent;
+    /** 方向 */
+    direction: 'up' | 'down';
+}
+/**
+ * 鼠标滚轮事件
+ * @param cb 回调
+ */
+export declare function useMousewheel(cb?: (p: UseMousewheelCallbackParam) => void): {
+    handleMousewheel: (e: MouseEvent) => void;
+    handleFirefoxMousewheel: (e: MouseEvent) => void;
+    bindMousewheel: (el: HTMLElement) => void;
+    unbindMousewheel: (el: HTMLElement) => void;
+};
+/**
+ * 触摸事件回调参数
+ */
+export interface UseTouchEventCallbackParam<T> {
+    /** 事件对象 */
+    e: T;
+    /** 开始横向位置 */
+    startX: number | null;
+    /** 开始纵向位置 */
+    startY: number | null;
+    /** 横向移动距离 */
+    distanceX?: number | null;
+    /** 纵向移动距离 */
+    distanceY?: number | null;
+}
+/**
+ * 触摸事件参数
+ */
+export interface UseTouchEventOption<T> {
+    /** 触摸开始的回调 */
+    start?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸移动的回调 */
+    move?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** 触摸结束的回调 */
+    end?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** touchmove 事件参数 */
+    touchmoveOptions?: any;
+}
+/**
+ * 触摸事件
+ * @param option 参数
+ */
+export declare function useTouchEvent(option?: UseTouchEventOption<TouchEvent>): {
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleTouchEnd: (e: TouchEvent) => void;
+    bindTouchEvent: (el: HTMLElement) => void;
+    unbindTouchEvent: (el: HTMLElement) => void;
+};
+/**
+ * 移动事件对象
+ */
+export type MoveEvent = MouseEvent | TouchEvent;
+/**
+ * 鼠标移动事件或触摸移动事件
+ * @param option 参数
+ */
+export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
+    handleMousedown: (e: MouseEvent) => void;
+    handleTouchstart: (e: TouchEvent) => void;
+};

package/es/utils/hook.js

@@ -1,23 +1,28 @@
-import { onBeforeUnmount } from "vue";
+import { ref, onBeforeUnmount } from "vue";
 function useTimer(ms, cb) {
   let timer = null;
+  const waiting = ref(false);
   const stopTimer = () => {
     if (timer != null) {
       clearTimeout(timer);
       timer = null;
     }
+    waiting.value = false;
   };
   const startTimer = (callback, timeout) => {
     stopTimer();
-    timer = setTimeout(
-      callback ?? cb,
-      timeout ?? (typeof ms === "function" ? ms() : ms)
-    );
+    waiting.value = true;
+    const to = timeout ?? (typeof ms === "function" ? ms() : ms);
+    timer = setTimeout(() => {
+      const func = callback ?? cb;
+      func && func();
+      waiting.value = false;
+    }, to);
   };
   onBeforeUnmount(() => {
     stopTimer();
   });
-  return [startTimer, stopTimer];
+  return [startTimer, stopTimer, waiting];
 }
 function useMediaQuery(query, onChange) {
   const mediaQuery = window.matchMedia(query);
@@ -103,9 +108,157 @@ function useCollapseAnim() {
     handleAfterLeave
   };
 }
+function useMousewheel(cb) {
+  const handleMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta > 0 ? "up" : "down" });
+  };
+  const handleFirefoxMousewheel = (e) => {
+    const delta = e.wheelDelta || e.detail;
+    cb && cb({ e, direction: delta < 0 ? "up" : "down" });
+  };
+  const bindMousewheel = (el) => {
+    el.addEventListener("mousewheel", handleMousewheel, { passive: false });
+    el.addEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  const unbindMousewheel = (el) => {
+    el.removeEventListener("mousewheel", handleMousewheel);
+    el.removeEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+  };
+  return {
+    handleMousewheel,
+    handleFirefoxMousewheel,
+    bindMousewheel,
+    unbindMousewheel
+  };
+}
+function useTouchEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const handleTouchStart = (e) => {
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const handleTouchMove = (e) => {
+    if (startX != null && startY != null) {
+      const currentX = e.touches[0].clientX;
+      const currentY = e.touches[0].clientY;
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const handleTouchEnd = (e) => {
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const bindTouchEvent = (el) => {
+    el.addEventListener("touchstart", handleTouchStart);
+    el.addEventListener("touchmove", handleTouchMove);
+    el.addEventListener("touchend", handleTouchEnd);
+  };
+  const unbindTouchEvent = (el) => {
+    el.removeEventListener("touchstart", handleTouchStart);
+    el.removeEventListener("touchmove", handleTouchMove);
+    el.removeEventListener("touchend", handleTouchEnd);
+  };
+  return {
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    bindTouchEvent,
+    unbindTouchEvent
+  };
+}
+function useMoveEvent(option) {
+  let startX = null;
+  let startY = null;
+  let distanceX = null;
+  let distanceY = null;
+  const unbindEvent = () => {
+    document.removeEventListener("mousemove", mousemoveFn);
+    document.removeEventListener("mouseup", mouseupFn);
+    document.removeEventListener("touchmove", touchmoveFn);
+    document.removeEventListener("touchend", touchendFn);
+  };
+  const emitStart = (clientX, clientY, e) => {
+    startX = clientX;
+    startY = clientY;
+    if (option && option.start) {
+      option.start({ e, startX, startY });
+    }
+  };
+  const emitMove = (currentX, currentY, e) => {
+    if (startX != null && startY != null) {
+      distanceX = currentX - startX;
+      distanceY = currentY - startY;
+      if (option && option.move) {
+        option.move({ e, startX, startY, distanceX, distanceY });
+      }
+    }
+  };
+  const emitEnd = (e) => {
+    unbindEvent();
+    if (option && option.end) {
+      option.end({ e, startX, startY, distanceX, distanceY });
+    }
+    startX = null;
+    startY = null;
+    distanceX = null;
+    distanceY = null;
+  };
+  const mousemoveFn = function(e) {
+    emitMove(e.clientX, e.clientY, e);
+  };
+  const touchmoveFn = function(e) {
+    emitMove(e.touches[0].clientX, e.touches[0].clientY, e);
+  };
+  const mouseupFn = (e) => {
+    emitEnd(e);
+  };
+  const touchendFn = (e) => {
+    emitEnd(e);
+  };
+  const handleMousedown = (e) => {
+    emitStart(e.clientX, e.clientY, e);
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", mouseupFn);
+  };
+  const handleTouchstart = (e) => {
+    emitStart(e.touches[0].clientX, e.touches[0].clientY, e);
+    document.addEventListener(
+      "touchmove",
+      touchmoveFn,
+      option == null ? void 0 : option.touchmoveOptions
+    );
+    document.addEventListener("touchend", touchendFn);
+  };
+  onBeforeUnmount(() => {
+    unbindEvent();
+  });
+  return {
+    handleMousedown,
+    handleTouchstart
+  };
+}
 export {
   useCollapseAnim,
   useMediaQuery,
+  useMousewheel,
+  useMoveEvent,
   useTimer,
+  useTouchEvent,
   useWindowListener
 };

package/es/utils/menu-util.js

@@ -1,5 +1,6 @@
-import { defineComponent, computed, h } from "vue";
-import { useProLayoutState } from "../ele-pro-layout/util";
+import { defineComponent, ref, computed, h } from "vue";
+import { useRoute } from "vue-router";
+import { useProLayoutState, getIframeSrc } from "../ele-pro-layout/util";
 import { isExternalLink, findTree } from "./core";
 function camelCase(str) {
   const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
@@ -23,13 +24,18 @@ function getRouteComponent(menu, name, func) {
       name,
       setup() {
         var _a;
-        const src = menu.component;
-        const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         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 keepAlive = computed(() => !!proLayoutState.keepAlive);
         return () => {
           if (!isAlive || !keepAlive.value) {
-            return h("iframe", { src, class: "ele-admin-iframe" });
+            return h("iframe", {
+              src: iframeSrc.value,
+              class: "ele-admin-iframe"
+            });
           }
           return h("div", { class: "ele-none", style: { display: "none" } });
         };

package/es/utils/message-box.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, h } from "vue";
+import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, unref, h } from "vue";
 import { ElMessageBox } from "element-plus";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import { useLayoutState } from "../ele-pro-layout/util";
@@ -48,8 +48,12 @@ function useMessageBox(globalOpt) {
           state.wrapEl = getWrapEl(layoutState.modalsEl);
         }
         opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = unref(opt.appendTo);
       }
       opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = unref(opt.appendTo);
     }
     const classes = ["ele-message-box"];
     if (opt.customClass) {

package/es/utils/message.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, provide, inject, onActivated, onDeactivated, onBeforeUnmount, isVNode, h, mergeProps } from "vue";
+import { getCurrentInstance, provide, inject, onActivated, onDeactivated, onBeforeUnmount, unref, isVNode, h, mergeProps } from "vue";
 import { ElMessage } from "element-plus";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import { useLayoutState } from "../ele-pro-layout/util";
@@ -48,7 +48,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     opt.message = params;
   }
   opt.type = type ?? opt.type;
-  opt.appendTo = opt.appendTo ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  opt.appendTo = (opt.appendTo == null ? void 0 : unref(opt.appendTo)) ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
   const classes = ["ele-message"];
   if (opt.original === "plain") {
     classes.push("is-plain-alert");

package/lib/core-components.cjs

@@ -22,35 +22,36 @@ const index$i = require("./ele-ellipsis/index");
 const index$j = require("./ele-file-list/index");
 const index$k = require("./ele-file-list-tool/index");
 const index$l = require("./ele-icon-select/index");
-const index$m = require("./ele-loading/index");
-const index$n = require("./ele-menus/index");
-const index$o = require("./ele-modal/index");
-const index$p = require("./ele-page/index");
-const index$q = require("./ele-pagination/index");
-const index$r = require("./ele-popconfirm/index");
-const index$s = require("./ele-popover/index");
-const index$t = require("./ele-printer/index");
-const index$u = require("./ele-pro-layout/index");
-const index$v = require("./ele-pro-table/index");
-const index$w = require("./ele-qr-code/index");
-const index$x = require("./ele-qr-code-svg/index");
-const index$y = require("./ele-segmented/index");
-const index$z = require("./ele-split-panel/index");
-const index$A = require("./ele-steps/index");
-const index$B = require("./ele-tabs/index");
-const index$C = require("./ele-tab-tool/index");
-const index$D = require("./ele-tab-wrap/index");
-const index$E = require("./ele-table/index");
-const index$F = require("./ele-table-select/index");
-const index$G = require("./ele-text/index");
-const index$H = require("./ele-tool/index");
-const index$I = require("./ele-toolbar/index");
-const index$J = require("./ele-tooltip/index");
-const index$K = require("./ele-tour/index");
-const index$L = require("./ele-tree-select/index");
-const index$M = require("./ele-upload-list/index");
-const index$N = require("./ele-virtual-table/index");
-const index$O = require("./ele-watermark/index");
+const index$m = require("./ele-image-viewer/index");
+const index$n = require("./ele-loading/index");
+const index$o = require("./ele-menus/index");
+const index$p = require("./ele-modal/index");
+const index$q = require("./ele-page/index");
+const index$r = require("./ele-pagination/index");
+const index$s = require("./ele-popconfirm/index");
+const index$t = require("./ele-popover/index");
+const index$u = require("./ele-printer/index");
+const index$v = require("./ele-pro-layout/index");
+const index$w = require("./ele-pro-table/index");
+const index$x = require("./ele-qr-code/index");
+const index$y = require("./ele-qr-code-svg/index");
+const index$z = require("./ele-segmented/index");
+const index$A = require("./ele-split-panel/index");
+const index$B = require("./ele-steps/index");
+const index$C = require("./ele-tabs/index");
+const index$D = require("./ele-tab-tool/index");
+const index$E = require("./ele-tab-wrap/index");
+const index$F = require("./ele-table/index");
+const index$G = require("./ele-table-select/index");
+const index$H = require("./ele-text/index");
+const index$I = require("./ele-tool/index");
+const index$J = require("./ele-toolbar/index");
+const index$K = require("./ele-tooltip/index");
+const index$L = require("./ele-tour/index");
+const index$M = require("./ele-tree-select/index");
+const index$N = require("./ele-upload-list/index");
+const index$O = require("./ele-virtual-table/index");
+const index$P = require("./ele-watermark/index");
 exports.EleAdminLayout = index;
 exports.EleAlert = index$1;
 exports.EleApp = index$2;
@@ -73,32 +74,33 @@ exports.EleEllipsis = index$i;
 exports.EleFileList = index$j;
 exports.EleFileListTool = index$k;
 exports.EleIconSelect = index$l;
-exports.EleLoading = index$m;
-exports.EleMenus = index$n;
-exports.EleModal = index$o;
-exports.ElePage = index$p;
-exports.ElePagination = index$q;
-exports.ElePopconfirm = index$r;
-exports.ElePopover = index$s;
-exports.ElePrinter = index$t;
-exports.EleProLayout = index$u;
-exports.EleProTable = index$v;
-exports.EleQrCode = index$w;
-exports.EleQrCodeSvg = index$x;
-exports.EleSegmented = index$y;
-exports.EleSplitPanel = index$z;
-exports.EleSteps = index$A;
-exports.EleTabs = index$B;
-exports.EleTabTool = index$C;
-exports.EleTabWrap = index$D;
-exports.EleTable = index$E;
-exports.EleTableSelect = index$F;
-exports.EleText = index$G;
-exports.EleTool = index$H;
-exports.EleToolbar = index$I;
-exports.EleTooltip = index$J;
-exports.EleTour = index$K;
-exports.EleTreeSelect = index$L;
-exports.EleUploadList = index$M;
-exports.EleVirtualTable = index$N;
-exports.EleWatermark = index$O;
+exports.EleImageViewer = index$m;
+exports.EleLoading = index$n;
+exports.EleMenus = index$o;
+exports.EleModal = index$p;
+exports.ElePage = index$q;
+exports.ElePagination = index$r;
+exports.ElePopconfirm = index$s;
+exports.ElePopover = index$t;
+exports.ElePrinter = index$u;
+exports.EleProLayout = index$v;
+exports.EleProTable = index$w;
+exports.EleQrCode = index$x;
+exports.EleQrCodeSvg = index$y;
+exports.EleSegmented = index$z;
+exports.EleSplitPanel = index$A;
+exports.EleSteps = index$B;
+exports.EleTabs = index$C;
+exports.EleTabTool = index$D;
+exports.EleTabWrap = index$E;
+exports.EleTable = index$F;
+exports.EleTableSelect = index$G;
+exports.EleText = index$H;
+exports.EleTool = index$I;
+exports.EleToolbar = index$J;
+exports.EleTooltip = index$K;
+exports.EleTour = index$L;
+exports.EleTreeSelect = index$M;
+exports.EleUploadList = index$N;
+exports.EleVirtualTable = index$O;
+exports.EleWatermark = index$P;

package/lib/core-components.d.ts

@@ -20,6 +20,7 @@ export { default as EleEllipsis } from './ele-ellipsis/index';
 export { default as EleFileList } from './ele-file-list/index';
 export { default as EleFileListTool } from './ele-file-list-tool/index';
 export { default as EleIconSelect } from './ele-icon-select/index';
+export { default as EleImageViewer } from './ele-image-viewer/index';
 export { default as EleLoading } from './ele-loading/index';
 export { default as EleMenus } from './ele-menus/index';
 export { default as EleModal } from './ele-modal/index';