yuang-framework-ui-pc 1.0.20 → 1.2.1

package/es/utils/menu-util.js

@@ -0,0 +1,78 @@
+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() : "");
+  return val.charAt(0).toUpperCase() + val.slice(1);
+}
+function pathIsAdd(path, data) {
+  return findTree(data, (d) => path === d.path) != null;
+}
+function getRoutePath(path) {
+  if (!path || !path.includes("?")) {
+    return path;
+  }
+  return path.substring(0, path.indexOf("?"));
+}
+function getRouteComponent(menu, name, func) {
+  if (!menu.component || !isExternalLink(menu.component)) {
+    return { component: func(menu.component, menu, name) };
+  }
+  return {
+    component: 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 keepAlive = computed(() => !!proLayoutState.keepAlive);
+        return () => {
+          if (!isAlive || !keepAlive.value) {
+            return h("iframe", {
+              src: iframeSrc.value,
+              class: "ele-admin-iframe"
+            });
+          }
+          return h("div", { class: "ele-none", style: { display: "none" } });
+        };
+      }
+    }),
+    link: true
+  };
+}
+function menuToRoutes(menus, getComponent, added) {
+  if (!(menus == null ? void 0 : menus.length)) {
+    return;
+  }
+  const routes = [];
+  const addedRoutes = added ? [...added] : [];
+  menus.forEach((item) => {
+    const meta = { ...item.meta };
+    const path = getRoutePath(meta.routePath || item.path);
+    if (path && !isExternalLink(path) && !pathIsAdd(path, addedRoutes)) {
+      const name = item.name || camelCase(path);
+      const { component, link } = getRouteComponent(item, name, getComponent);
+      if (link) {
+        meta.iframe = item.component;
+        meta.hideFooter = true;
+      }
+      addedRoutes.push({ path });
+      routes.push({
+        name,
+        path,
+        component,
+        redirect: item.redirect,
+        meta,
+        children: menuToRoutes(item.children, getComponent, addedRoutes)
+      });
+    }
+  });
+  return routes;
+}
+export {
+  menuToRoutes
+};

package/es/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/es/utils/message-box.js

@@ -0,0 +1,98 @@
+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";
+import MessageBoxIcon from "../ele-app/components/message-box-icon";
+import { omit } from "./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 = useLayoutState();
+  const globalProps = useGlobalProps("messageBox");
+  const appContext = (_b = (_a = getCurrentInstance) == null ? void 0 : _a()) == null ? void 0 : _b.appContext;
+  const state = { wrapEl: null, isActivated: true, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  const hideClass = "is-hide";
+  onActivated(() => {
+    state.isActivated = true;
+    state.wrapEl && state.wrapEl.classList.remove(hideClass);
+  });
+  onDeactivated(() => {
+    state.isActivated = false;
+    state.wrapEl && state.wrapEl.classList.add(hideClass);
+  });
+  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 = unref(opt.appendTo);
+      }
+      opt.lockScroll = false;
+    } else if (opt.appendTo != null) {
+      opt.appendTo = unref(opt.appendTo);
+    }
+    const classes = ["ele-message-box"];
+    if (opt.customClass) {
+      classes.push(opt.customClass);
+    }
+    opt.customClass = classes.join(" ");
+    opt.icon = 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 omit(opt, ["inner"]);
+  };
+  const messageBox = function(options) {
+    return ElMessageBox(getOption(options), appContext);
+  };
+  messageBox.alert = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.alert(message, title, getOption(options), ctx);
+  };
+  messageBox.confirm = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.confirm(message, title, getOption(options), ctx);
+  };
+  messageBox.prompt = function(message, title, options, context) {
+    const ctx = context ?? appContext;
+    return ElMessageBox.prompt(message, title, getOption(options), ctx);
+  };
+  messageBox.close = function() {
+    return ElMessageBox.close();
+  };
+  return messageBox;
+}
+export {
+  useMessageBox
+};

package/es/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/es/utils/message.js

@@ -0,0 +1,267 @@
+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";
+import MessageBody from "../ele-app/components/message-body";
+import { queryChild, omit } from "./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 : 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, 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 : 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 || 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,
+      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 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(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(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(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(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(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, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
+  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);
+  });
+  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 = ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.success = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "success", false);
+    const ins = ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.warning = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "warning", false);
+    const ins = ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.error = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close(), "error", false);
+    const ins = ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.info = function(params) {
+    const { opt, msgId } = getOpt(params, () => ins.close());
+    const ins = 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 = ElMessage(opt, appContext);
+    instances.set(msgId, ins);
+    return ins;
+  };
+  message.closeAll = function(type) {
+    instances.clear();
+    return ElMessage.closeAll(type);
+  };
+  return message;
+}
+export {
+  EleMessage,
+  MESSAGE_KEY,
+  useMessage
+};

package/es/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/es/utils/resolvers.js

@@ -0,0 +1,50 @@
+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]/) && !((_a = exclude == null ? void 0 : exclude.includes) == null ? void 0 : _a.call(exclude, name))) {
+        const packageName = "ele-admin-plus";
+        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)
+        };
+      }
+    }
+  };
+}
+export {
+  EleAdminResolver
+};

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

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

package/es/utils/theme-util.js

@@ -0,0 +1,42 @@
+import { generate } from "@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 = 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[4]};`,
+      `--el-color-primary-light-5:${colors[3]};`,
+      `--el-color-primary-light-7:${colors[2]};`,
+      `--el-color-primary-light-8:${colors[1]};`,
+      `--el-color-primary-light-9:${colors[0]};`,
+      `--el-color-primary-dark-2:${colors[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");
+  }
+}
+export {
+  changeColor
+};