ele-admin-plus 1.1.9 → 1.2.0-beta.1

package/lib/utils/message.cjs

@@ -2,59 +2,242 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementPlus = require("element-plus");
-const icons = require("../icons");
+const receiver = require("../ele-config-provider/receiver");
+const MessageBody = require("../ele-app/components/message-body");
 const core = require("./core");
-const normalizeOptions = function(options, loading) {
+function blurCurrentFocus() {
   var _a;
-  const isObj = typeof options === "object" && options != null && !vue.isVNode(options);
-  const opt = isObj ? { ...options } : { message: options };
-  const classes = [];
-  if (!opt.original) {
-    classes.push("ele-message");
-    if (opt.plain) {
-      classes.push("is-plain");
-    }
+  if (typeof ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.querySelector) === "function") {
+    const el = document.body.querySelector(":focus");
+    typeof (el == null ? void 0 : el.blur) === "function" && el.blur();
+  }
+}
+function getWrapEl(bodyEl, force, groupKey) {
+  const parent = bodyEl || document.body;
+  const className = "ele-message-wrapper";
+  const attr = "data-group";
+  const attrSelector = groupKey == null ? void 0 : [attr, groupKey];
+  const el = force ? void 0 : core.queryChild(parent, className, attrSelector);
+  if (el != null) {
+    return el;
+  }
+  const elem = document.createElement("div");
+  elem.classList.add(className);
+  if (groupKey) {
+    elem.setAttribute(attr, groupKey);
+  }
+  parent.appendChild(elem);
+  return elem;
+}
+function getDefaultGroupKey() {
+  const url = location == null ? void 0 : location.href;
+  const pi = url.indexOf("?");
+  return url.substring(0, pi < 0 ? void 0 : pi);
+}
+function getOffsetStyle(offset, userStyle) {
+  const mt = typeof offset === "number" ? `${offset}px` : offset;
+  return vue.mergeProps({ style: { marginTop: mt } }, { style: userStyle }).style;
+}
+function isObjOpt(params) {
+  return params != null && typeof params === "object" && !vue.isVNode(params);
+}
+function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2, groupKey) {
+  const opt = { ...globalOpt || {} };
+  if (isObjOpt(params)) {
+    Object.assign(opt, params);
+  } else {
+    opt.message = params;
+  }
+  opt.type = type ?? opt.type;
+  opt.appendTo = opt.appendTo ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  const classes = ["ele-message"];
+  if (opt.original === "plain") {
+    classes.push("is-plain-alert");
+  } else if (opt.original) {
+    classes.push("is-alert");
+  } else if (opt.plain) {
+    classes.push("is-plain");
   }
   if (loading) {
-    classes.push("ele-message-loading");
+    classes.push("is-loading");
+    opt.duration = opt.duration ?? 0;
     if (opt.mask) {
-      classes.push("ele-message-mask");
+      classes.push("is-show-mask");
     }
-    opt.duration = opt.duration ?? 0;
-    opt.icon = opt.icon ?? vue.h(elementPlus.ElIcon, () => vue.h(icons.LoadingOutlined));
-    if (typeof ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.querySelector) === "function") {
-      const el = document.body.querySelector(":focus");
-      typeof (el == null ? void 0 : el.blur) === "function" && el.blur();
+    if (opt.centered) {
+      classes.push("is-centered");
     }
   }
-  if (opt.centered) {
-    classes.push("is-centered");
+  if (opt.inner) {
+    classes.push("is-inner");
   }
   if (opt.customClass) {
     classes.push(opt.customClass);
   }
   opt.customClass = classes.join(" ");
-  return core.omit(opt, ["original", "plain", "mask", "centered"]);
-};
-const EleMessage = function(options, context) {
-  return elementPlus.ElMessage(normalizeOptions(options), context);
+  if (opt.offset != null && opt.offset !== "") {
+    opt.style = getOffsetStyle(opt.offset, opt.style);
+  }
+  const content = opt.message;
+  const isFn = typeof content === "function";
+  const isStr = !(isFn || vue.isVNode(content));
+  opt.icon = vue.h(
+    MessageBody,
+    {
+      message: isStr && content != null ? String(content) : void 0,
+      type: opt.type,
+      icon: opt.icon,
+      showClose: opt.showClose,
+      dangerouslyUseHTMLString: opt.dangerouslyUseHTMLString,
+      loading,
+      onClose
+    },
+    { default: isFn ? content : isStr ? void 0 : () => content }
+  );
+  const key = (opt.inner ? groupKey : void 0) ?? "";
+  opt.message = isStr ? `${key}_${content ?? ""}` : void 0;
+  opt.grouping = isStr ? opt.grouping : false;
+  return core.omit(opt, [
+    "showClose",
+    "dangerouslyUseHTMLString",
+    "offset",
+    "original",
+    "plain",
+    "mask",
+    "centered",
+    "inner",
+    "groupKey"
+  ]);
+}
+const EleMessage = function(params, context) {
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, null, null, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
-EleMessage.success = function(options, context) {
-  return elementPlus.ElMessage.success(normalizeOptions(options), context);
+EleMessage.success = function(params, context) {
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, "success", null, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
-EleMessage.warning = function(options, context) {
-  return elementPlus.ElMessage.warning(normalizeOptions(options), context);
+EleMessage.warning = function(params, context) {
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, "warning", null, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
-EleMessage.error = function(options, context) {
-  return elementPlus.ElMessage.error(normalizeOptions(options), context);
+EleMessage.error = function(params, context) {
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, "error", null, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
-EleMessage.info = function(options, context) {
-  return elementPlus.ElMessage.info(normalizeOptions(options), context);
+EleMessage.info = function(params, context) {
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, null, null, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
-EleMessage.loading = function(options, context) {
-  return elementPlus.ElMessage.info(normalizeOptions(options, true), context);
+EleMessage.loading = function(params, context) {
+  blurCurrentFocus();
+  const onClose = () => ins.close();
+  const getWrap = () => getWrapEl();
+  const opt = normalizeOption(params, null, onClose, null, true, getWrap);
+  const ins = elementPlus.ElMessage(opt, context);
+  return ins;
 };
 EleMessage.closeAll = function(type) {
   return elementPlus.ElMessage.closeAll(type);
 };
+const MESSAGE_KEY = Symbol("message");
+function useMessage(globalOpt) {
+  var _a, _b;
+  const layoutState = receiver.useLayoutState();
+  const globalProps = receiver.useGlobalProps("message");
+  const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
+  const groupKey = (globalOpt == null ? void 0 : globalOpt.groupKey) || getDefaultGroupKey();
+  const state = { wrapEl: null, isActivated: true };
+  const hideClass = "is-hide";
+  vue.provide(MESSAGE_KEY, { groupKey, getInnerWrap: () => getWrap(true) });
+  const parentMsg = vue.inject(MESSAGE_KEY, null);
+  vue.onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  vue.onDeactivated(() => {
+    state.isActivated = false;
+    state.wrapEl && state.wrapEl.classList.add(hideClass);
+  });
+  const getWrap = (inner) => {
+    if (inner) {
+      if (parentMsg != null && parentMsg.groupKey === groupKey) {
+        return parentMsg.getInnerWrap();
+      }
+      if (state.wrapEl == null && layoutState.modalsEl != null) {
+        state.wrapEl = getWrapEl(layoutState.modalsEl, false, groupKey);
+        if (!state.isActivated) {
+          state.wrapEl.classList.add(hideClass);
+        }
+      }
+      if (state.wrapEl != null) {
+        return state.wrapEl;
+      }
+    }
+    return getWrapEl();
+  };
+  const getOption = function(params, onClose, type, loading) {
+    return normalizeOption(
+      params,
+      { ...globalProps.value || {}, ...globalOpt || {} },
+      onClose,
+      type,
+      loading,
+      getWrap,
+      groupKey
+    );
+  };
+  const message = function(params) {
+    const opt = getOption(params, () => ins.close());
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.success = function(params) {
+    const opt = getOption(params, () => ins.close(), "success", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.warning = function(params) {
+    const opt = getOption(params, () => ins.close(), "warning", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.error = function(params) {
+    const opt = getOption(params, () => ins.close(), "error", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.info = function(params) {
+    const opt = getOption(params, () => ins.close());
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.loading = function(params) {
+    blurCurrentFocus();
+    const opt = getOption(params, () => ins.close(), void 0, true);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    return ins;
+  };
+  message.closeAll = function(type) {
+    return elementPlus.ElMessage.closeAll(type);
+  };
+  return message;
+}
 exports.EleMessage = EleMessage;
+exports.MESSAGE_KEY = MESSAGE_KEY;
+exports.useMessage = useMessage;

package/lib/utils/message.d.ts

@@ -1,42 +1,66 @@
-import { MessageHandler, MessageOptions, MessageParams, MessageFn } from 'element-plus/es/components/message';
-import { AppContext } from 'vue';
+import { MessageHandler as ElMessageHandler, MessageOptions as ElMessageOptions, MessageFn as ElMessageFn } from 'element-plus/es/components/message';
+import { AppContext, InjectionKey } from 'vue';
 
 /**
- * 消息提示对象型参数
+ * 消息提示配置
  */
-export interface ProMessageOptions extends Omit<MessageOptions, 'plain'> {
+export interface MessageOptions extends ElMessageOptions {
     /** 是否为原始风格 */
-    original?: boolean | null;
-    /** 是否为简约风格 */
-    plain?: boolean | null;
+    original?: boolean | 'plain';
     /** 是否显示遮罩层 */
-    mask?: boolean | null;
+    mask?: boolean;
     /** 是否居中显示 */
-    centered?: boolean | null;
+    centered?: boolean;
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+    /** 限制在主体内部的分组标识 */
+    groupKey?: string;
 }
 /**
- * 消息提示参数
+ * 消息提示方法参数
  */
-export type ProMessageParams = ProMessageOptions | MessageParams;
+export type MessageParams = MessageOptions | ElMessageOptions['message'];
 /**
  * 消息提示方法
  */
-export type ProMessageFn = (options?: ProMessageParams, context?: null | AppContext) => MessageHandler;
+export type MessageFn = (options?: MessageParams, context?: null | AppContext) => ElMessageHandler;
 /**
  * 消息提示
  */
-export interface ProMessage extends ProMessageFn {
-    closeAll: MessageFn['closeAll'];
-    success: ProMessageFn;
-    warning: ProMessageFn;
-    error: ProMessageFn;
-    info: ProMessageFn;
-    loading: ProMessageFn;
+export interface Message extends MessageFn {
+    closeAll: ElMessageFn['closeAll'];
+    success: MessageFn;
+    warning: MessageFn;
+    error: MessageFn;
+    info: MessageFn;
+    loading: MessageFn;
 }
+/**
+ * 消息提示依赖注入
+ */
+interface MessageProvide {
+    /** 限制在主体内部的分组标识 */
+    groupKey: string;
+    /** 获取限制在主体内部的容器 */
+    getInnerWrap: () => HTMLElement;
+}
+/**
+ * 消息提示依赖注入key
+ */
+type MessageKey = InjectionKey<MessageProvide>;
 /**
  * 提供各种调用方法
  * @param options 参数
  * @param context 上下文
  */
-declare const EleMessage: ProMessage;
+declare const EleMessage: Message;
 export { EleMessage };
+/**
+ * 消息提示依赖注入key
+ */
+export declare const MESSAGE_KEY: MessageKey;
+/**
+ * 带当前上下文的消息提示
+ * @param options 参数
+ */
+export declare function useMessage(globalOpt?: MessageOptions): Message;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ele-admin-plus",
-  "version": "1.1.9",
+  "version": "1.2.0-beta.1",
   "type": "module",
   "scripts": {
     "dev": "vite --host --config vite.global.ts",
@@ -27,24 +27,24 @@
     "@types/node": "^20.12.7",
     "@types/nprogress": "^0.2.3",
     "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.23",
     "axios": "^1.6.8",
     "bytemd": "^1.21.0",
     "chalk": "^5.3.0",
     "countup.js": "^2.8.0",
-    "cropperjs": "^1.6.1",
+    "cropperjs": "^1.6.2",
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.7.0",
+    "element-plus": "^2.7.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.24.1",
+    "eslint-plugin-vue": "^9.25.0",
     "esno": "^4.7.0",
     "execa": "^8.0.1",
     "github-markdown-css": "^5.5.1",
@@ -61,14 +61,14 @@
     "tinymce": "^5.10.9",
     "typescript": "^5.4.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.8",
-    "vite-plugin-dts": "^3.8.2",
-    "vue": "^3.4.21",
-    "vue-echarts": "^6.6.9",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.8.3",
+    "vue": "^3.4.23",
+    "vue-echarts": "^6.6.10",
     "vue-eslint-parser": "^9.4.2",
-    "vue-i18n": "^9.12.0",
-    "vue-router": "^4.3.0",
-    "vue-tsc": "^2.0.13",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.0.14",
     "vuedraggable": "^4.1.0",
     "xgplayer": "^3.0.16",
     "xgplayer-hls": "^3.0.16",