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

package/es/utils/message.js

@@ -1,60 +1,243 @@
-import { isVNode, h } from "vue";
-import { ElMessage, ElIcon } from "element-plus";
-import { LoadingOutlined } from "../icons";
-import { omit } from "./core";
-const normalizeOptions = function(options, loading) {
+import { getCurrentInstance, provide, inject, onActivated, onDeactivated, isVNode, h, mergeProps } from "vue";
+import { ElMessage } from "element-plus";
+import { useLayoutState, useGlobalProps } from "../ele-config-provider/receiver";
+import MessageBody from "../ele-app/components/message-body";
+import { queryChild, omit } from "./core";
+function blurCurrentFocus() {
   var _a;
-  const isObj = typeof options === "object" && options != null && !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 : 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 mergeProps({ style: { marginTop: mt } }, { style: userStyle }).style;
+}
+function isObjOpt(params) {
+  return params != null && typeof params === "object" && !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 ?? h(ElIcon, () => h(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 omit(opt, ["original", "plain", "mask", "centered"]);
-};
-const EleMessage = function(options, context) {
-  return 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 || isVNode(content));
+  opt.icon = 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 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 = ElMessage(opt, context);
+  return ins;
 };
-EleMessage.success = function(options, context) {
-  return 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 = ElMessage(opt, context);
+  return ins;
 };
-EleMessage.warning = function(options, context) {
-  return 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 = ElMessage(opt, context);
+  return ins;
 };
-EleMessage.error = function(options, context) {
-  return 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 = ElMessage(opt, context);
+  return ins;
 };
-EleMessage.info = function(options, context) {
-  return 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 = ElMessage(opt, context);
+  return ins;
 };
-EleMessage.loading = function(options, context) {
-  return 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 = ElMessage(opt, context);
+  return ins;
 };
 EleMessage.closeAll = function(type) {
   return ElMessage.closeAll(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 state = { wrapEl: null, isActivated: true };
+  const hideClass = "is-hide";
+  provide(MESSAGE_KEY, { groupKey, getInnerWrap: () => getWrap(true) });
+  const parentMsg = inject(MESSAGE_KEY, null);
+  onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  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 = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.success = function(params) {
+    const opt = getOption(params, () => ins.close(), "success", false);
+    const ins = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.warning = function(params) {
+    const opt = getOption(params, () => ins.close(), "warning", false);
+    const ins = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.error = function(params) {
+    const opt = getOption(params, () => ins.close(), "error", false);
+    const ins = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.info = function(params) {
+    const opt = getOption(params, () => ins.close());
+    const ins = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.loading = function(params) {
+    blurCurrentFocus();
+    const opt = getOption(params, () => ins.close(), void 0, true);
+    const ins = ElMessage(opt, appContext);
+    return ins;
+  };
+  message.closeAll = function(type) {
+    return ElMessage.closeAll(type);
+  };
+  return message;
+}
 export {
-  EleMessage
+  EleMessage,
+  MESSAGE_KEY,
+  useMessage
 };

package/lib/core-export.cjs

@@ -5,6 +5,7 @@ const chartTheme = require("./utils/chart-theme");
 const core = require("./utils/core");
 const menuUtil = require("./utils/menu-util");
 const message = require("./utils/message");
+const messageBox = require("./utils/message-box");
 const validate = require("./utils/validate");
 const headerTool = require("./ele-pro-layout/components/header-tool");
 const sidebarTool = require("./ele-pro-layout/components/sidebar-tool");
@@ -47,6 +48,13 @@ Object.keys(message).forEach((k) => {
       get: () => message[k]
     });
 });
+Object.keys(messageBox).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => messageBox[k]
+    });
+});
 Object.keys(validate).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
     Object.defineProperty(exports, k, {

package/lib/core-export.d.ts

@@ -3,6 +3,7 @@ export * from './utils/chart-theme';
 export * from './utils/core';
 export * from './utils/menu-util';
 export * from './utils/message';
+export * from './utils/message-box';
 export * from './utils/validate';
 export { default as HeaderTool } from "./ele-pro-layout/components/header-tool";
 export { default as SidebarTool } from "./ele-pro-layout/components/sidebar-tool";

package/lib/ele-alert/index.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import('vue').DefineComponent<{
     title: StringConstructor;
-    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     description: StringConstructor;
     closable: {
         type: BooleanConstructor;
@@ -30,7 +30,7 @@ declare const _default: import('vue').DefineComponent<{
     close: (_e: MouseEvent) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: StringConstructor;
-    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     description: StringConstructor;
     closable: {
         type: BooleanConstructor;

package/lib/ele-alert/props.d.ts

@@ -8,7 +8,7 @@ export declare const alertProps: {
     /** 标题 */
     title: StringConstructor;
     /** 类型 */
-    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "error", unknown> | undefined>;
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
     /** 描述 */
     description: StringConstructor;
     /** 是否可关闭 */

package/lib/ele-app/components/message-body.cjs

@@ -0,0 +1,91 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "MessageBody",
+  components: {
+    ElIcon: elementPlus.ElIcon,
+    CloseOutlined: icons.CloseOutlined,
+    InfoCircleFilled: icons.InfoCircleFilled,
+    CheckCircleFilled: icons.CheckCircleFilled,
+    ExclamationCircleFilled: icons.ExclamationCircleFilled,
+    CloseCircleFilled: icons.CloseCircleFilled,
+    LoadingOutlined: icons.LoadingOutlined
+  },
+  props: {
+    /** 内容 */
+    message: String,
+    /** 类型 */
+    type: String,
+    /** 图标 */
+    icon: [String, Object, Function],
+    /** 是否显示关闭按钮 */
+    showClose: Boolean,
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: Boolean,
+    /** 是否是加载框 */
+    loading: Boolean
+  },
+  emits: {
+    close: () => true
+  },
+  setup(_props, { emit }) {
+    return { onClose: () => emit("close") };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-message-icon" };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = {
+  key: 1,
+  class: "ele-message-content"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_LoadingOutlined = vue.resolveComponent("LoadingOutlined");
+  const _component_CheckCircleFilled = vue.resolveComponent("CheckCircleFilled");
+  const _component_ExclamationCircleFilled = vue.resolveComponent("ExclamationCircleFilled");
+  const _component_CloseCircleFilled = vue.resolveComponent("CloseCircleFilled");
+  const _component_InfoCircleFilled = vue.resolveComponent("InfoCircleFilled");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
+  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createVNode(_component_ElIcon, {
+        class: vue.normalizeClass({ "is-loading": _ctx.loading })
+      }, {
+        default: vue.withCtx(() => [
+          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), { key: 0 })) : _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_LoadingOutlined, { key: 1 })) : _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(_component_CheckCircleFilled, { key: 2 })) : _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(_component_ExclamationCircleFilled, { key: 3 })) : _ctx.type === "error" ? (vue.openBlock(), vue.createBlock(_component_CloseCircleFilled, { key: 4 })) : (vue.openBlock(), vue.createBlock(_component_InfoCircleFilled, { key: 5 }))
+        ]),
+        _: 1
+      }, 8, ["class"])
+    ]),
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+      _ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        innerHTML: _ctx.message,
+        class: "ele-message-content"
+      }, null, 8, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(_ctx.message), 1))
+    ]),
+    _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "ele-message-close",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+    }, [
+      vue.createVNode(_component_ElIcon, null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_CloseOutlined)
+        ]),
+        _: 1
+      })
+    ])) : vue.createCommentVNode("", true)
+  ], 64);
+}
+const messageBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = messageBody;

package/lib/ele-app/components/message-body.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 内容 */
+    message: StringConstructor;
+    /** 类型 */
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
+    /** 图标 */
+    icon: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
+    /** 是否显示关闭按钮 */
+    showClose: BooleanConstructor;
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: BooleanConstructor;
+    /** 是否是加载框 */
+    loading: PropType<boolean | null>;
+}, {
+    onClose: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 内容 */
+    message: StringConstructor;
+    /** 类型 */
+    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "error" | "info", unknown> | undefined>;
+    /** 图标 */
+    icon: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
+    /** 是否显示关闭按钮 */
+    showClose: BooleanConstructor;
+    /** 内容是否是富文本 */
+    dangerouslyUseHTMLString: BooleanConstructor;
+    /** 是否是加载框 */
+    loading: PropType<boolean | null>;
+}>> & {
+    onClose?: (() => any) | undefined;
+}, {
+    dangerouslyUseHTMLString: boolean;
+    showClose: boolean;
+}, {}>;
+export default _default;

package/lib/ele-app/el.d.ts

@@ -57,9 +57,11 @@ import type { dropdownProps } from 'element-plus';
 import type { dropdownItemProps } from 'element-plus';
 import type columnProps from 'element-plus/es/components/table/src/table-column/defaults';
 import type { TreeProps } from 'element-plus/es/components/tree-v2/src/types';
+import type { MessageOptions } from 'element-plus/es/components/message';
 import type { ComponentProps } from './types';
 
 export type ElFormItemRule = Partial<FormItemRule>;
+export type ElMessageOptions = Partial<MessageOptions>;
 
 /**
  * 组件属性

package/lib/ele-app/style/message/css-var.scss

@@ -5,8 +5,4 @@
   .ele-message {
     @include set-ele-var('message', $var);
   }
-
-  .ele-message-mask {
-    @include set-ele-var('message-mask', $var);
-  }
 }