yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/utils/message-box.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-pro-layout/util");
+const MessageBoxIcon = require("../ele-app/components/message-box-icon");
+const core = require("./core");
+function getWrapEl(bodyEl) {
+  const parent = bodyEl || document.body;
+  const className = "ele-message-box-wrapper";
+  const elem = document.createElement("div");
+  elem.classList.add(className);
+  parent.appendChild(elem);
+  return elem;
+}
+function useMessageBox(globalOpt) {
+  var _a, _b;
+  const layoutState = util.useLayoutState();
+  const globalProps = receiver.useGlobalProps("messageBox");
+  const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
+  const state = { wrapEl: null, isActivated: true, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  const hideClass = "is-hide";
+  vue.onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  vue.onDeactivated(() => {
+    state.isActivated = false;
+    state.wrapEl && state.wrapEl.classList.add(hideClass);
+  });
+  vue.onBeforeUnmount(() => {
+    for (const [_key, insDoClose] of instances) {
+      insDoClose && insDoClose();
+    }
+    instances.clear();
+  });
+  const getOption = (options) => {
+    state.id++;
+    const msgId = `m_${state.id}`;
+    const opt = {
+      ...globalProps.value || {},
+      ...globalOpt || {},
+      ...options || {}
+    };
+    if (opt.inner) {
+      if (opt.appendTo == null && layoutState.modalsEl != null) {
+        if (state.wrapEl == null) {
+          state.wrapEl = getWrapEl(layoutState.modalsEl);
+        }
+        opt.appendTo = state.wrapEl;
+      } else if (opt.appendTo != null) {
+        opt.appendTo = vue.unref(opt.appendTo);
+      }
+      opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = vue.unref(opt.appendTo);
+    }
+    const classes = ["ele-message-box"];
+    if (opt.customClass) {
+      classes.push(opt.customClass);
+    }
+    opt.customClass = classes.join(" ");
+    opt.icon = vue.h(MessageBoxIcon, {
+      type: opt.type,
+      icon: opt.icon,
+      boxId: msgId,
+      onBoxDestroy: (boxId) => {
+        boxId && instances.delete(boxId);
+      },
+      onBoxMounted: ({ boxId, doClose }) => {
+        boxId && instances.set(boxId, doClose);
+      }
+    });
+    return core.omit(opt, ["inner"]);
+  };
+  const messageBox = function(options) {
+    return elementPlus.ElMessageBox(getOption(options), appContext);
+  };
+  messageBox.alert = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return elementPlus.ElMessageBox.alert(message, title, getOption(options), ctx);
+  };
+  messageBox.confirm = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return elementPlus.ElMessageBox.confirm(message, title, getOption(options), ctx);
+  };
+  messageBox.prompt = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return elementPlus.ElMessageBox.prompt(message, title, getOption(options), ctx);
+  };
+  messageBox.close = function() {
+    return elementPlus.ElMessageBox.close();
+  };
+  return messageBox;
+}
+exports.useMessageBox = useMessageBox;

package/lib/utils/message-box.d.ts

@@ -0,0 +1,25 @@
+import { AppContext } from 'vue';
+import { ElMessageBoxOptions, MessageBoxData as ElMessageBoxData } from 'element-plus';
+
+/**
+ * 消息弹窗配置
+ */
+export interface MessageBoxOptions extends ElMessageBoxOptions {
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+}
+/**
+ * 消息弹窗方法
+ */
+export type MessageBoxMethod = (message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options?: MessageBoxOptions, context?: AppContext | null) => Promise<ElMessageBoxData>;
+/**
+ * 消息弹窗
+ */
+export interface MessageBox {
+    (options?: MessageBoxOptions, context?: AppContext | null): Promise<ElMessageBoxData>;
+    alert: MessageBoxMethod;
+    confirm: MessageBoxMethod;
+    prompt: MessageBoxMethod;
+    close: () => void;
+}
+export declare function useMessageBox(globalOpt?: MessageBoxOptions): MessageBox;

package/lib/utils/message.cjs

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-pro-layout/util");
+const MessageBody = require("../ele-app/components/message-body");
+const core = require("./core");
+function blurCurrentFocus() {
+  var _a;
+  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, messageId, onMessageDestroy) {
+  const opt = { ...globalOpt || {} };
+  if (isObjOpt(params)) {
+    Object.assign(opt, params);
+  } else {
+    opt.message = params;
+  }
+  opt.type = type ?? opt.type;
+  opt.appendTo = (opt.appendTo == null ? void 0 : vue.unref(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("is-loading");
+    opt.duration = opt.duration ?? 0;
+    if (opt.mask) {
+      classes.push("is-show-mask");
+    }
+    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(" ");
+  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,
+      messageId,
+      onClose,
+      onMessageDestroy
+    },
+    { 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(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(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(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(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(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 = util.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, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  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);
+  });
+  vue.onBeforeUnmount(() => {
+    for (const [_key, ins] of instances) {
+      ins && ins.close && ins.close();
+    }
+    instances.clear();
+  });
+  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 getOpt = function(params, onClose, type, loading) {
+    state.id++;
+    const msgId = `m_${state.id}`;
+    const opt = normalizeOption(
+      params,
+      { ...globalProps.value || {}, ...globalOpt || {} },
+      onClose,
+      type,
+      loading,
+      getWrap,
+      groupKey,
+      msgId,
+      (messageId) => {
+        messageId && instances.delete(messageId);
+      }
+    );
+    return { opt, msgId };
+  };
+  const message = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close());
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.success = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "success", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.warning = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "warning", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.error = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "error", false);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.info = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close());
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.loading = function(params) {
+    blurCurrentFocus();
+    const { opt, msgId } = getOpt(params, () => ins.close(), void 0, true);
+    const ins = elementPlus.ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.closeAll = function(type) {
+    instances.clear();
+    return elementPlus.ElMessage.closeAll(type);
+  };
+  return message;
+}
+exports.EleMessage = EleMessage;
+exports.MESSAGE_KEY = MESSAGE_KEY;
+exports.useMessage = useMessage;

package/lib/utils/message.d.ts

@@ -0,0 +1,66 @@
+import { AppContext, InjectionKey } from 'vue';
+import { MessageHandler as ElMessageHandler, MessageOptions as ElMessageOptions, MessageFn as ElMessageFn } from 'element-plus/es/components/message';
+
+/**
+ * 消息提示配置
+ */
+export interface MessageOptions extends ElMessageOptions {
+    /** 是否为原始风格 */
+    original?: boolean | 'plain';
+    /** 是否显示遮罩层 */
+    mask?: boolean;
+    /** 是否居中显示 */
+    centered?: boolean;
+    /** 是否限制在主体内部 */
+    inner?: boolean;
+    /** 限制在主体内部的分组标识 */
+    groupKey?: string;
+}
+/**
+ * 消息提示方法参数
+ */
+export type MessageParams = MessageOptions | ElMessageOptions['message'];
+/**
+ * 消息提示方法
+ */
+export type MessageFn = (options?: MessageParams, context?: null | AppContext) => ElMessageHandler;
+/**
+ * 消息提示
+ */
+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: Message;
+export { EleMessage };
+/**
+ * 消息提示依赖注入key
+ */
+export declare const MESSAGE_KEY: MessageKey;
+/**
+ * 带当前上下文的消息提示
+ * @param options 参数
+ */
+export declare function useMessage(globalOpt?: MessageOptions): Message;

package/lib/utils/resolvers.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getSideEffects(path, options) {
+  const importStyle = options == null ? void 0 : options.importStyle;
+  if (!importStyle) {
+    return;
+  }
+  if (importStyle === "css") {
+    return `${path}/style/css`;
+  }
+  return `${path}/style/index`;
+}
+function getStylePath(namePath, packageName, path) {
+  if (!path) {
+    return `${packageName}/es/${namePath}`;
+  }
+  if (path === "/es/core") {
+    return `${packageName}/es/${namePath}`;
+  }
+  if (path === "/lib/core") {
+    return `${packageName}/lib/${namePath}`;
+  }
+  return `${packageName}${path}/${namePath}`;
+}
+function EleAdminResolver(options) {
+  return {
+    type: "component",
+    resolve: (name) => {
+      var _a;
+      const { path, exclude } = options || {};
+      if ((name.match(/^Ele[A-Z]/) || name.match(/^Yu[A-Z]/)) && !((_a = exclude == null ? void 0 : exclude.includes) == null ? void 0 : _a.call(exclude, name))) {
+        const packageName = "yuang-framework-ui-pc";
+        const namePath = name.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+        const stylePath = getStylePath(namePath, packageName, path);
+        if (!path || path === "/es/core" || path === "/lib/core") {
+          return {
+            name,
+            from: `${packageName}${path ?? "/es"}`,
+            sideEffects: getSideEffects(stylePath, options)
+          };
+        }
+        return {
+          from: `${packageName}${path}/${namePath}/index`,
+          sideEffects: getSideEffects(stylePath, options)
+        };
+      }
+    }
+  };
+}
+exports.EleAdminResolver = EleAdminResolver;

package/lib/utils/resolvers.d.ts

@@ -0,0 +1,18 @@
+import { ComponentResolver } from 'unplugin-vue-components/types';
+
+/**
+ * 参数类型
+ */
+export interface EleAdminResolverOptions {
+    /** 包路径 */
+    path?: string | '' | '/es' | '/lib' | '/es/core' | '/lib/core';
+    /** 排除的组件名称 */
+    exclude?: string[];
+    /** 是否导入样式 */
+    importStyle?: boolean | 'css' | 'sass';
+}
+/**
+ * 按需加载插件，这里控制打包后的组件按需加载，如果匹配不上，会出现：开发环境组件正常显示，但是生产环境无法解析组件的情况
+ * @param options 参数
+ */
+export declare function EleAdminResolver(options?: EleAdminResolverOptions): ComponentResolver;

package/lib/utils/theme-util.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const colors = require("@ant-design/colors");
+function changeColor(color, dark) {
+  const $html = document.documentElement;
+  if (!$html) {
+    return;
+  }
+  const id = "ele-theme-var";
+  const elem = document.getElementById(id);
+  if (elem == null ? void 0 : elem.parentNode) {
+    elem.parentNode.removeChild(elem);
+  }
+  if (color) {
+    const colors$1 = colors.generate(color, dark ? { theme: "dark" } : {});
+    const selector = dark ? "html.dark" : ":root";
+    const elem2 = document.createElement("style");
+    elem2.id = id;
+    elem2.setAttribute("type", "text/css");
+    elem2.innerHTML = [
+      `${selector}{`,
+      `--el-color-primary:${color};`,
+      `--el-color-primary-light-3:${colors$1[4]};`,
+      `--el-color-primary-light-5:${colors$1[3]};`,
+      `--el-color-primary-light-7:${colors$1[2]};`,
+      `--el-color-primary-light-8:${colors$1[1]};`,
+      `--el-color-primary-light-9:${colors$1[0]};`,
+      `--el-color-primary-dark-2:${colors$1[6]};`,
+      "}"
+    ].join("");
+    document.head.appendChild(elem2);
+    $html.dataset.color = color;
+  } else {
+    $html.removeAttribute("data-color");
+  }
+  if (dark) {
+    $html.classList.add("dark");
+  } else {
+    $html.classList.remove("dark");
+  }
+}
+exports.changeColor = changeColor;

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

@@ -0,0 +1,6 @@
+/**
+ * 切换主题色
+ * @param color 颜色值
+ * @param dark 是否暗黑模式
+ */
+export declare function changeColor(color?: string | null, dark?: boolean): void;