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

package/es/style/themes/default.scss

@@ -34,21 +34,17 @@ $ele: map.deep-merge(
       'bg': elVar('bg-color'),
       'shadow': 0 1px 4px rgba(0, 21, 41, 0.08),
       'line-color': elVar('border-color', 'extra-light'),
-      'menu-height': 54px,
-      'tool-height': 100%,
+      'menu-height': eleVar('header', 'height'),
+      'tools-padding': 12px,
+      'tool-padding': 12px,
+      'tool-height': eleVar('header', 'height'),
       'tool-radius': 0,
-      'tool-hover-bg': rgba(0, 0, 0, 0.025),
-      'dark-tool-hover-bg': rgba(255, 255, 255, 0.05)
-    ),
-    'header-dark': (
-      // 暗色顶栏
-      'bg': #001529,
-      'shadow': 0 1px 4px rgba(0, 0, 0, 0.1)
-    ),
-    'header-primary': (
-      // 主色顶栏
-      'hover-bg': transparent,
-      'active-bg': transparent
+      'tool-hover-bg': rgba(0, 0, 0, 0.04),
+      'dark-tool-hover-bg': rgba(255, 255, 255, 0.12),
+      'dark-color': #fff,
+      'dark-bg': #001529,
+      'dark-shadow': 0 1px 4px rgba(0, 0, 0, 0.1),
+      'primary-active-bg': transparent
     ),
     'logo': (
       // Logo
@@ -127,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'),
@@ -139,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': (
       // 底部工具栏
@@ -206,8 +200,7 @@ $ele: map.deep-merge(
       'icon-radius': elVar('border-radius', 'small'),
       'body-padding': 20px,
       'footer-padding': 10px 16px,
-      'footer-border': 1px solid elVar('border-color', 'light'),
-      'inner-shadow': 0 0.8px 0 elVar('border-color', 'light') inset
+      'footer-border': 1px solid elVar('border-color', 'light')
     ),
     'dropdown': (
       // 下拉菜单
@@ -441,18 +434,6 @@ $ele: map.deep-merge(
       'form-body-padding': 24px 22px 12px 20px,
       'footer-padding': 10px 20px,
       'footer-border': 1px solid elVar('border-color', 'light'),
-      'resize-bg':
-        linear-gradient(
-          135deg,
-          transparent 45%,
-          hsla(0, 0%, 60%, 0.88) 0,
-          hsla(0, 0%, 60%, 0.88) 55%,
-          transparent 0,
-          transparent 75%,
-          hsla(0, 0%, 60%, 0.88) 0,
-          hsla(0, 0%, 60%, 0.88) 85%,
-          transparent 0
-        ),
       'fullscreen-border': 1px solid elVar('border-color', 'light'),
       'mobile-space': 16px
     ),
@@ -576,6 +557,9 @@ $ele: map.deep-merge(
       'close-radius': 50%,
       'close-hover-color': #fff,
       'close-hover-bg': elVar('color-error'),
+      'active-close-color': elVar('text-color', 'secondary'),
+      'active-close-hover-color': #fff,
+      'active-close-hover-bg': elVar('color-error'),
       'icon-font-size': 15px,
       'tool-color': elVar('text-color', 'secondary'),
       'tool-font-size': elVar('font-size', 'base'),
@@ -584,58 +568,48 @@ $ele: map.deep-merge(
       'active-index': 3,
       'transition': (color, background-color, border-color, box-shadow),
       'scroll-left-shadow': inset 10px 0 10px -10px rgba(0, 0, 0, 0.15),
-      'scroll-right-shadow': inset -10px 0 10px -10px rgba(0, 0, 0, 0.15)
-    ),
-    'tab-sm': (
-      // 标签页小号
-      'height': 32px,
-      'padding': 12px,
-      'font-size': elVar('font-size', 'small'),
-      'close-size': elVar('font-size', 'small'),
-      'close-font-size': elVar('font-size', 'small'),
-      'icon-font-size': 14px,
-      'tool-font-size': elVar('font-size', 'small')
-    ),
-    'tab-lg': (
-      // 标签页大号
-      'height': 52px,
-      'padding': 22px,
-      'font-size': elVar('font-size', 'medium'),
-      'close-size': elVar('font-size', 'medium'),
-      'close-font-size': elVar('font-size', 'medium'),
-      'icon-font-size': 17px,
-      'tool-font-size': elVar('font-size', 'medium')
-    ),
-    'tab-simple': (
-      // 标签页简约风格
-      'radius': 0,
-      'hover-color': elVar('text-color', 'primary'),
-      'hover-bg': rgba(0, 0, 0, 0.025),
-      'active-color': elVar('color-primary'),
-      'active-bg': elVar('color-primary', 'light-9'),
-      'active-weight': normal,
-      'active-line': 2px,
-      'line-display': block,
-      'angle-size': 0px,
-      'angle-display': none,
-      'tool-hover-bg': eleVar('tab-simple', 'hover-bg')
-    ),
-    'tab-indicator': (
-      // 标签页指示器风格
-      'size': 8px,
-      'color': #d9d9d9,
-      'hover-color': #d9d9d9,
-      'margin': 6px
-    ),
-    'tab-button': (
-      // 标签页按钮风格
-      'space': 8px,
-      'radius': 4px,
-      'bg': hsla(0, 0%, 100%, 0.68),
-      'hover-bg': elVar('bg-color'),
-      'active-bg': elVar('bg-color', 'overlay'),
-      'active-shadow': none,
-      'active-weight': normal
+      'scroll-right-shadow': inset -10px 0 10px -10px rgba(0, 0, 0, 0.15),
+      'sm-height': 32px,
+      'sm-padding': 12px,
+      'sm-font-size': elVar('font-size', 'small'),
+      'sm-close-size': elVar('font-size', 'small'),
+      'sm-close-font-size': elVar('font-size', 'small'),
+      'sm-icon-font-size': 14px,
+      'sm-tool-font-size': elVar('font-size', 'small'),
+      'lg-height': 52px,
+      'lg-padding': 22px,
+      'lg-font-size': elVar('font-size', 'medium'),
+      'lg-close-size': elVar('font-size', 'medium'),
+      'lg-close-font-size': elVar('font-size', 'medium'),
+      'lg-icon-font-size': 17px,
+      'lg-tool-font-size': elVar('font-size', 'medium'),
+      'simple-radius': 0,
+      'simple-hover-color': elVar('text-color', 'primary'),
+      'simple-hover-bg': rgba(0, 0, 0, 0.025),
+      'simple-active-color': elVar('color-primary'),
+      'simple-active-bg': elVar('color-primary', 'light-9'),
+      'simple-active-weight': normal,
+      'simple-active-line': 2px,
+      'simple-line-display': block,
+      'simple-angle-size': 0px,
+      'simple-angle-display': none,
+      'simple-tool-hover-bg': eleVar('tab', 'simple-hover-bg'),
+      'indicator-dot-size': 8px,
+      'indicator-dot-color': #d9d9d9,
+      'indicator-dot-hover-color': #c8c8c8,
+      'indicator-dot-active-color': elVar('color-primary'),
+      'indicator-margin': 6px,
+      'tag-space': 4px,
+      'tag-radius': elVar('border-radius', 'base'),
+      'button-space': 8px,
+      'button-radius': 4px,
+      'button-bg': hsla(0, 0%, 100%, 0.66),
+      'button-hover-color': elVar('color-primary'),
+      'button-hover-bg': elVar('bg-color'),
+      'button-active-color': elVar('color-primary'),
+      'button-active-bg': elVar('bg-color', 'overlay'),
+      'button-active-shadow': none,
+      'button-active-weight': normal
     ),
     'text': (
       // 文本
@@ -995,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': (
       // 树
@@ -1135,7 +1108,8 @@ $ele: map.deep-merge(
       'year-width': 58px,
       'year-height': 26px,
       'year-radius': 16px,
-      'year-padding': 26px 0,
+      'year-padding': 22px 0,
+      'year-space': 4px 0,
       'month-padding': 22px 0,
       'month-space': 4px 0,
       'end-margin': 3.5px,

package/es/style/themes/rounded.scss

@@ -10,12 +10,7 @@ $ele-rounded: map.deep-merge(
       'menu-height': 38px,
       'tool-height': 38px,
       'tool-radius': elVar('border-radius', 'base'),
-      'tool-hover-bg': elVar('fill-color', 'light'),
-      'dark-tool-hover-bg': rgba(255, 255, 255, 0.12)
-    ),
-    'header-primary': (
-      'hover-bg': rgba(255, 255, 255, 0.12),
-      'active-bg': rgba(255, 255, 255, 0.24)
+      'primary-active-bg': rgba(255, 255, 255, 0.24)
     ),
     'sidebar': (
       'tool-height': 38px
@@ -135,30 +130,21 @@ $ele-rounded: map.deep-merge(
       'close-radius': elVar('border-radius', 'small'),
       'close-hover-color': elVar('text-color', 'primary'),
       'close-hover-bg': hsla(0, 0%, 60%, 0.15),
-      'transition': (color, border-color, box-shadow)
-    ),
-    'tab-sm': (
-      'close-size': 14px
-    ),
-    'tab-lg': (
-      'close-size': 20px
-    ),
-    'tab-simple': (
-      'radius': 8px 8px 0px 0px,
-      'active-weight': bold,
-      'active-line': 0px,
-      'line-display': none,
-      'angle-size': 10px,
-      'angle-display': block,
-      'tool-hover-bg': transparent
-    ),
-    'tab-indicator': (
-      'hover-color': elVar('color-primary')
-    ),
-    'tab-button': (
-      'radius': $radius-large,
-      'active-shadow': 0 0 4px 2px rgba(0, 0, 0, 0.04),
-      'active-weight': bold
+      'active-close-hover-color': elVar('text-color', 'primary'),
+      'active-close-hover-bg': hsla(0, 0%, 60%, 0.15),
+      'transition': (color, box-shadow),
+      'sm-close-size': 14px,
+      'lg-close-size': 20px,
+      'simple-radius': 8px 8px 0px 0px,
+      'simple-active-weight': bold,
+      'simple-active-line': 0px,
+      'simple-line-display': none,
+      'simple-angle-size': 10px,
+      'simple-angle-display': block,
+      'simple-tool-hover-bg': transparent,
+      'button-radius': $radius-large,
+      'button-active-shadow': 0 0 4px 2px rgba(0, 0, 0, 0.04),
+      'button-active-weight': bold
     ),
     'text': (
       'heading-weight': bold
@@ -232,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/menu-util.d.ts

@@ -1,5 +1,6 @@
-import type { RouteRecordRaw, _RouteRecordBase, RouteComponent } from 'vue-router';
-import type { MenuItem } from '../ele-pro-layout/types';
+import { MenuItem } from '../ele-pro-layout/types';
+import { RouteRecordRaw, _RouteRecordBase, RouteComponent } from 'vue-router';
+
 /**
  * 获取路由组件方法
  */

package/es/utils/menu-util.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, unref, h } from "vue";
+import { defineComponent, computed, h } from "vue";
 import { useLayoutState } from "../ele-config-provider/receiver";
 import { isExternalLink, eachTree } from "./core";
 function camelCase(str) {
@@ -33,10 +33,7 @@ function getRouteComponent(menu, name, func) {
         const src = menu.component;
         const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
         const layoutProvide = useLayoutState();
-        const keepAlive = computed(() => {
-          var _a2;
-          return !!((_a2 = unref(layoutProvide)) == null ? void 0 : _a2.keepAlive);
-        });
+        const keepAlive = computed(() => !!layoutProvide.keepAlive);
         return () => {
           if (!isAlive || !keepAlive.value) {
             return h("iframe", { src, class: "ele-admin-iframe" });

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
+};