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

package/es/style/themes/default.scss

@@ -123,6 +123,7 @@ $ele: map.deep-merge(
       // 消息提示
       'color': elVar('text-color', 'regular'),
       'size': elVar('font-size', 'base'),
+      'space': 16px,
       'padding': 12px 14px,
       'radius': elVar('border-radius', 'base'),
       'shadow': elVar('box-shadow', 'light'),
@@ -135,12 +136,9 @@ $ele: map.deep-merge(
       'close-color': elVar('text-color', 'placeholder'),
       'close-hover-color': elVar('text-color', 'primary'),
       'close-hover-bg': transparent,
-      'plain-bg': elVar('bg-color', 'overlay')
-    ),
-    'message-mask': (
-      // 消息提示遮罩层
-      'color': elVar('overlay-color', 'lighter'),
-      'size': 1000vw
+      'plain-bg': elVar('bg-color', 'overlay'),
+      'alert-padding': 10px 14px,
+      'mask-color': elVar('overlay-color', 'lighter')
     ),
     'bottom-bar': (
       // 底部工具栏
@@ -971,85 +969,84 @@ $ele: map.deep-merge(
       'danger-border-color': elVar('color-error', 'light-7'),
       'danger-close-color': elVar('color-error'),
       'danger-close-hover-color': elVar('color-error'),
-      'danger-close-hover-bg': transparent
-    ),
-    'tag-sm': (
-      // 标签小尺寸
-      'size': 12px,
-      'height': 20px,
-      'padding': 0 4px,
-      'radius': elVar('border-radius', 'small'),
-      'close-size': 13px,
-      'close-padding': 0,
-      'close-margin': 0 -2px 0 2px,
-      'close-radius': 2px
-    ),
-    'tag-lg': (
-      // 标签大尺寸
-      'size': 14px,
-      'height': 32px,
-      'padding': 0 12px,
-      'radius': elVar('border-radius', 'base'),
-      'close-size': 15px,
-      'close-padding': 2px,
-      'close-margin': 0 -8px 0 4px,
-      'close-radius': 4px
-    ),
-    'tag-dark': (
-      // 标签暗色风格
-      'color': #fff,
-      'bg': elVar('color-primary'),
-      'close-color': #fff,
-      'close-hover-color': #fff,
-      'close-hover-bg': transparent,
-      'info-color': elVar('text-color', 'primary'),
-      'info-bg': elVar('color-info', 'light-7'),
-      'info-close-color': elVar('text-color', 'secondary'),
-      'info-close-hover-color': elVar('text-color', 'primary'),
-      'info-close-hover-bg': transparent,
-      'success-color': #fff,
-      'success-bg': elVar('color-success'),
-      'success-close-color': #fff,
-      'success-close-hover-color': #fff,
-      'success-close-hover-bg': transparent,
-      'warning-color': #fff,
-      'warning-bg': elVar('color-warning'),
-      'warning-close-color': #fff,
-      'warning-close-hover-color': #fff,
-      'warning-close-hover-bg': transparent,
-      'danger-color': #fff,
-      'danger-bg': elVar('color-error'),
-      'danger-close-color': #fff,
-      'danger-close-hover-color': #fff,
-      'danger-close-hover-bg': transparent
-    ),
-    'tag-plain': (
-      // 标签朴素风格
-      'color': elVar('color-primary'),
-      'border-color': elVar('color-primary'),
-      'close-color': elVar('color-primary'),
-      'close-hover-color': elVar('color-primary'),
-      'close-hover-bg': transparent,
-      'info-color': elVar('text-color', 'regular'),
-      'info-border-color': elVar('color-info', 'light-3'),
-      'info-close-color': elVar('text-color', 'secondary'),
-      'info-close-hover-color': elVar('text-color', 'primary'),
-      'info-close-hover-bg': transparent,
-      'success-color': elVar('color-success'),
-      'success-border-color': elVar('color-success'),
-      'success-close-color': elVar('color-success'),
-      'success-close-hover-color': elVar('color-success'),
-      'success-close-hover-bg': transparent,
-      'warning-color': elVar('color-warning'),
-      'warning-border-color': elVar('color-warning'),
-      'warning-close-color': elVar('color-warning'),
-      'warning-close-hover-color': elVar('color-warning'),
-      'warning-close-hover-bg': transparent,
-      'danger-color': elVar('color-error'),
-      'danger-border-color': elVar('color-error'),
-      'danger-close-color': elVar('color-error'),
-      'danger-close-hover-color': elVar('color-error'),
-      'danger-close-hover-bg': transparent
+      'danger-close-hover-bg': transparent,
+      'round-radius': 12px,
+      'round-padding': 0 10px,
+      'sm-size': 12px,
+      'sm-height': 20px,
+      'sm-padding': 0 4px,
+      'sm-radius': elVar('border-radius', 'small'),
+      'sm-close-size': 13px,
+      'sm-close-padding': 0,
+      'sm-close-margin': 0 -2px 0 2px,
+      'sm-close-radius': 2px,
+      'sm-round-radius': 10px,
+      'sm-round-padding': 0 6px,
+      'lg-size': 14px,
+      'lg-height': 32px,
+      'lg-padding': 0 12px,
+      'lg-radius': elVar('border-radius', 'base'),
+      'lg-close-size': 15px,
+      'lg-close-padding': 2px,
+      'lg-close-margin': 0 -8px 0 4px,
+      'lg-close-radius': 4px,
+      'lg-round-radius': 16px,
+      'lg-round-padding': 0 14px,
+      'dark-color': #fff,
+      'dark-bg': elVar('color-primary'),
+      'dark-close-color': #fff,
+      'dark-close-hover-color': #fff,
+      'dark-close-hover-bg': transparent,
+      'dark-info-color': elVar('text-color', 'primary'),
+      'dark-info-bg': elVar('color-info', 'light-7'),
+      'dark-info-close-color': elVar('text-color', 'secondary'),
+      'dark-info-close-hover-color': elVar('text-color', 'primary'),
+      'dark-info-close-hover-bg': transparent,
+      'dark-success-color': #fff,
+      'dark-success-bg': elVar('color-success'),
+      'dark-success-close-color': #fff,
+      'dark-success-close-hover-color': #fff,
+      'dark-success-close-hover-bg': transparent,
+      'dark-warning-color': #fff,
+      'dark-warning-bg': elVar('color-warning'),
+      'dark-warning-close-color': #fff,
+      'dark-warning-close-hover-color': #fff,
+      'dark-warning-close-hover-bg': transparent,
+      'dark-danger-color': #fff,
+      'dark-danger-bg': elVar('color-error'),
+      'dark-danger-close-color': #fff,
+      'dark-danger-close-hover-color': #fff,
+      'dark-danger-close-hover-bg': transparent,
+      'plain-color': elVar('color-primary'),
+      'plain-border-color': elVar('color-primary'),
+      'plain-close-color': elVar('color-primary'),
+      'plain-close-hover-color': elVar('color-primary'),
+      'plain-close-hover-bg': transparent,
+      'plain-info-color': elVar('text-color', 'regular'),
+      'plain-info-border-color': elVar('color-info', 'light-3'),
+      'plain-info-close-color': elVar('text-color', 'secondary'),
+      'plain-info-close-hover-color': elVar('text-color', 'primary'),
+      'plain-info-close-hover-bg': transparent,
+      'plain-success-color': elVar('color-success'),
+      'plain-success-border-color': elVar('color-success'),
+      'plain-success-close-color': elVar('color-success'),
+      'plain-success-close-hover-color': elVar('color-success'),
+      'plain-success-close-hover-bg': transparent,
+      'plain-warning-color': elVar('color-warning'),
+      'plain-warning-border-color': elVar('color-warning'),
+      'plain-warning-close-color': elVar('color-warning'),
+      'plain-warning-close-hover-color': elVar('color-warning'),
+      'plain-warning-close-hover-bg': transparent,
+      'plain-danger-color': elVar('color-error'),
+      'plain-danger-border-color': elVar('color-error'),
+      'plain-danger-close-color': elVar('color-error'),
+      'plain-danger-close-hover-color': elVar('color-error'),
+      'plain-danger-close-hover-bg': transparent,
+      'hit-border-color': elVar('color-primary'),
+      'hit-info-border-color': elVar('color-info', 'light-3'),
+      'hit-success-border-color': elVar('color-success'),
+      'hit-warning-border-color': elVar('color-warning'),
+      'hit-danger-border-color': elVar('color-error')
     ),
     'tree': (
       // 树

package/es/style/themes/rounded.scss

@@ -218,21 +218,17 @@ $ele-rounded: map.deep-merge(
       'info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
       'success-close-hover-bg': elVar('color-success', 'light-8'),
       'warning-close-hover-bg': elVar('color-warning', 'light-8'),
-      'danger-close-hover-bg': elVar('color-error', 'light-8')
-    ),
-    'tag-dark': (
-      'close-hover-bg': rgba(255, 255, 255, 0.2),
-      'info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
-      'success-close-hover-bg': rgba(255, 255, 255, 0.2),
-      'warning-close-hover-bg': rgba(255, 255, 255, 0.2),
-      'danger-close-hover-bg': rgba(255, 255, 255, 0.2)
-    ),
-    'tag-plain': (
-      'close-hover-bg': elVar('color-primary', 'light-8'),
-      'info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
-      'success-close-hover-bg': elVar('color-success', 'light-8'),
-      'warning-close-hover-bg': elVar('color-warning', 'light-8'),
-      'danger-close-hover-bg': elVar('color-error', 'light-8')
+      'danger-close-hover-bg': elVar('color-error', 'light-8'),
+      'dark-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
+      'dark-success-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-warning-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'dark-danger-close-hover-bg': rgba(255, 255, 255, 0.2),
+      'plain-close-hover-bg': elVar('color-primary', 'light-8'),
+      'plain-info-close-hover-bg': hsla(0, 0%, 60%, 0.25),
+      'plain-success-close-hover-bg': elVar('color-success', 'light-8'),
+      'plain-warning-close-hover-bg': elVar('color-warning', 'light-8'),
+      'plain-danger-close-hover-bg': elVar('color-error', 'light-8')
     ),
     'tree': (
       'item-margin': 2px,

package/es/utils/core.d.ts

@@ -142,3 +142,10 @@ export declare function pick<T extends object, K extends keyof T>(obj: T, fields
  * @param el 元素节点
  */
 export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
+/**
+ * 查找子元素
+ * @param parentEl 父元素
+ * @param className 类名
+ * @param attr 属性
+ */
+export declare function queryChild(parentEl: Element, className?: string, attr?: string[]): Element | undefined;

package/es/utils/core.js

@@ -221,9 +221,9 @@ function contentIsEllipsis(el, direction) {
   range.setEnd(el, el.childNodes.length);
   const { width, height } = range.getBoundingClientRect();
   const floorW = Math.floor(width);
-  const rangeWidth = width - floorW < 1e-3 ? floorW : width;
+  const rangeWidth = width - floorW < 8e-3 ? floorW : width;
   const floorH = Math.floor(height);
-  const rangeHeight = height - floorH < 1e-3 ? floorH : height;
+  const rangeHeight = height - floorH < 8e-3 ? floorH : height;
   const style = getCurrentStyle(el);
   const top = Number.parseInt(style.paddingTop) || 0;
   const left = Number.parseInt(style.paddingLeft) || 0;
@@ -239,6 +239,19 @@ function contentIsEllipsis(el, direction) {
   }
   return rangeWidth + horizontalPadding > el.offsetWidth || rangeHeight + verticalPadding > el.offsetHeight || el.scrollWidth > el.offsetWidth;
 }
+function queryChild(parentEl, className, attr) {
+  return Array.from(parentEl.children).find((el) => {
+    if (className && !el.classList.contains(className)) {
+      return false;
+    }
+    if (attr != null && attr[0] != null) {
+      if (el.getAttribute(attr[0]) != attr[1]) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
 export {
   assignObject,
   bd09ToGcj02,
@@ -255,6 +268,7 @@ export {
   mapTree,
   omit,
   pick,
+  queryChild,
   random,
   requestFullscreen,
   throttle,

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

@@ -0,0 +1,25 @@
+import { ElMessageBoxOptions, MessageBoxData as ElMessageBoxData } from 'element-plus';
+import { AppContext } from 'vue';
+
+/**
+ * 消息弹窗配置
+ */
+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,71 @@
+import { getCurrentInstance, onActivated, onDeactivated } from "vue";
+import { ElMessageBox } from "element-plus";
+import { useLayoutState, useGlobalProps } from "../ele-config-provider/receiver";
+import { omit, queryChild } from "./core";
+function getWrapEl(bodyEl) {
+  const parent = bodyEl || document.body;
+  const className = "ele-message-box-wrapper";
+  const el = queryChild(parent, className);
+  if (el != null) {
+    return el;
+  }
+  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 };
+  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);
+  });
+  const getOption = (options) => {
+    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;
+      }
+      opt.lockScroll = false;
+    }
+    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

@@ -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;