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

package/lib/ele-menus/index.cjs

@@ -19,6 +19,10 @@ const index = vue.defineComponent({
     const tooltipContent = vue.ref("");
     const tooltipVisible = vue.ref(false);
     const isHorizontal = vue.computed(() => props$1.mode === "horizontal");
+    const isCompact = vue.computed(() => props$1.mode === "compact");
+    const collapseTooltipDisabled = vue.computed(
+      () => isCompact.value ? !props$1.collapse : props$1.tooltipDisabled
+    );
     const { observe, unobserve, computedEllipsis } = util.useMenuEllipsis({
       getMenuEl: () => {
         var _a;
@@ -81,6 +85,30 @@ const index = vue.defineComponent({
     const hideTooltip = () => {
       tooltipVisible.value = false;
     };
+    const open = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
+      }
+    };
+    const close = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
+      }
+    };
+    const scrollToActive = () => {
+      var _a;
+      const menuEl = (_a = menuRef.value) == null ? void 0 : _a.$el;
+      if (menuEl) {
+        const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
+        if (el) {
+          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
+            el.scrollIntoViewIfNeeded(true);
+          } else {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }
+      }
+    };
     const onItemClick = (item, e) => {
       emit("itemClick", item, e);
     };
@@ -100,19 +128,7 @@ const index = vue.defineComponent({
       hideTooltip();
       emit("parentMouseleave", item, e);
     };
-    const exposeValue = {
-      menuRef,
-      open: (index2) => {
-        if (menuRef.value) {
-          menuRef.value.open(index2);
-        }
-      },
-      close: (index2) => {
-        if (menuRef.value) {
-          menuRef.value.open(index2);
-        }
-      }
-    };
+    const exposeValue = { menuRef, scrollToActive, open, close };
     expose(exposeValue);
     return () => {
       return vue.h(
@@ -121,12 +137,16 @@ const index = vue.defineComponent({
           ...core.pick(props$1, props.menuPropKeys),
           ref: menuRef,
           ellipsis: false,
+          mode: isCompact.value ? "vertical" : props$1.mode,
+          collapse: isCompact.value ? true : props$1.collapse,
           class: [
             "ele-menu",
             { "ele-menu-dark": props$1.theme === "dark" },
             { "is-night": props$1.theme === "dark" },
             { "ele-menu-colorful": props$1.colorful },
-            { "is-colorful": props$1.colorful }
+            { "is-colorful": props$1.colorful },
+            { "is-compact": isCompact.value },
+            { "is-compact-collapse": isCompact.value && props$1.collapse }
           ],
           onOpen: (index2, indexPath) => {
             emit("open", index2, indexPath);
@@ -148,7 +168,7 @@ const index = vue.defineComponent({
             items,
             slots.icon,
             slots.title,
-            props$1.tooltipDisabled,
+            collapseTooltipDisabled.value,
             props$1.theme,
             props$1.popupTheme,
             props$1.colorful,
@@ -192,7 +212,7 @@ const index = vue.defineComponent({
                       moreItems,
                       slots.icon,
                       slots.title,
-                      props$1.tooltipDisabled,
+                      collapseTooltipDisabled.value,
                       props$1.theme,
                       props$1.popupTheme,
                       props$1.colorful,

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

@@ -3,6 +3,7 @@ import { MenuItemClicked } from 'element-plus';
 import { NavigationFailure } from 'vue-router';
 
 declare const _default: import('vue').DefineComponent<{
+    mode: import('vue').PropType<import('./types').MenuMode>;
     items: {
         type: import('vue').PropType<import('./types').MenuItem[]>;
         required: boolean;
@@ -20,8 +21,7 @@ declare const _default: import('vue').DefineComponent<{
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
     ellipsisProps: import('vue').PropType<import('./types').EllipsisProps>;
-    textEllipsisTooltip: import('vue').PropType<boolean | Partial<import('../ele-tooltip/props').TooltipProps>>;
-    mode: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
+    textEllipsisTooltip: import('vue').PropType<import('./types').TextEllipsisTooltip>;
     defaultActive: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
     uniqueOpened: BooleanConstructor;
@@ -42,11 +42,11 @@ declare const _default: import('vue').DefineComponent<{
     hideTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
 }, {
     menuRef: import('vue').Ref<ElMenuInstance>;
+    scrollToActive: () => void;
     open: (index: string) => void;
     close: (index: string) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    /** 文本溢出提示是否显示 */
-    itemClick: (_item: import('./types').MenuItem, _e: MouseEvent) => boolean; /** 是否是水平菜单 */
+    itemClick: (_item: import('./types').MenuItem, _e: MouseEvent) => boolean;
     itemMouseenter: (_item: import('./types').MenuItem, _e: MouseEvent) => boolean;
     itemMouseleave: (_item: import('./types').MenuItem, _e: MouseEvent) => boolean;
     parentMouseenter: (_item: import('./types').MenuItem, _e: MouseEvent) => boolean;
@@ -55,6 +55,7 @@ declare const _default: import('vue').DefineComponent<{
     open: (index: string, indexPath: string[]) => boolean;
     select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    mode: import('vue').PropType<import('./types').MenuMode>;
     items: {
         type: import('vue').PropType<import('./types').MenuItem[]>;
         required: boolean;
@@ -72,8 +73,7 @@ declare const _default: import('vue').DefineComponent<{
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
     ellipsisProps: import('vue').PropType<import('./types').EllipsisProps>;
-    textEllipsisTooltip: import('vue').PropType<boolean | Partial<import('../ele-tooltip/props').TooltipProps>>;
-    mode: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
+    textEllipsisTooltip: import('vue').PropType<import('./types').TextEllipsisTooltip>;
     defaultActive: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
     uniqueOpened: BooleanConstructor;
@@ -93,8 +93,8 @@ declare const _default: import('vue').DefineComponent<{
     showTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
     hideTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
 }>> & {
-    onClose?: ((index: string, indexPath: string[]) => any) | undefined;
     onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
+    onClose?: ((index: string, indexPath: string[]) => any) | undefined;
     onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
     onItemClick?: ((_item: import('./types').MenuItem, _e: MouseEvent) => any) | undefined;
     onItemMouseenter?: ((_item: import('./types').MenuItem, _e: MouseEvent) => any) | undefined;
@@ -102,7 +102,6 @@ declare const _default: import('vue').DefineComponent<{
     onParentMouseenter?: ((_item: import('./types').MenuItem, _e: MouseEvent) => any) | undefined;
     onParentMouseleave?: ((_item: import('./types').MenuItem, _e: MouseEvent) => any) | undefined;
 }, {
-    mode: import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
     showTimeout: number;
     hideTimeout: number;
     defaultActive: string;

package/lib/ele-menus/props.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const elementPlus = require("element-plus");
 const menusProps = {
   ...elementPlus.menuProps,
+  mode: String,
   /** 菜单数据 */
   items: {
     type: Array,

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

@@ -1,4 +1,4 @@
-import { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps } from './types';
+import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip } from './types';
 import { menuProps } from 'element-plus';
 import { PropType, ExtractPropTypes } from 'vue';
 
@@ -6,6 +6,7 @@ import { PropType, ExtractPropTypes } from 'vue';
  * 属性
  */
 export declare const menusProps: {
+    mode: PropType<MenuMode>;
     /** 菜单数据 */
     items: {
         type: PropType<MenuItem[]>;
@@ -32,8 +33,7 @@ export declare const menusProps: {
     /** 省略菜单的属性 */
     ellipsisProps: PropType<EllipsisProps>;
     /** 是否开启菜单文本溢出提示 */
-    textEllipsisTooltip: PropType<boolean | Partial<import('../ele-tooltip/props').TooltipProps>>;
-    mode: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
+    textEllipsisTooltip: PropType<TextEllipsisTooltip>;
     defaultActive: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
     uniqueOpened: BooleanConstructor;

package/lib/ele-menus/style/css-var.scss

@@ -26,15 +26,11 @@
     @include set-ele-var('menu-dark', $var);
   }
 
-  .ele-menu > .el-menu--popup-container > .el-menu--popup,
-  .ele-admin-sidebar,
-  .ele-admin-sidebox {
+  .ele-menu > .el-menu--popup-container > .el-menu--popup {
     @include set-ele-var('menu-thumb', $var);
   }
 
-  .ele-menu.ele-menu-dark > .el-menu--popup-container > .el-menu--popup,
-  .ele-admin-dark-sidebar .ele-admin-sidebar,
-  .ele-admin-dark-sidebar .ele-admin-sidebox {
+  .ele-menu.ele-menu-dark > .el-menu--popup-container > .el-menu--popup {
     @include set-ele-var('menu-dark-thumb', $var);
   }
 }

package/lib/ele-menus/style/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
-require("element-plus/lib/components/menu/style/index");
-require("element-plus/lib/components/menu-item/style/index");
-require("element-plus/lib/components/menu-item-group/style/index");
-require("element-plus/lib/components/sub-menu/style/index");
-require("element-plus/lib/components/icon/style/index");
-require("element-plus/lib/components/badge/style/index");
+require("element-plus/es/components/menu/style/index");
+require("element-plus/es/components/menu-item/style/index");
+require("element-plus/es/components/menu-item-group/style/index");
+require("element-plus/es/components/sub-menu/style/index");
+require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/badge/style/index");
 require("../../ele-tooltip/style/index");
 require("./index.scss");

package/lib/ele-menus/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-menus/style/index.scss

@@ -18,7 +18,7 @@
     #{elVarName('menu', 'border-color')}: eleVar('menu', 'border-color');
   }
 
-  /* item basic */
+  /* 菜单项 */
   .el-menu-item,
   .el-sub-menu__title,
   .el-menu-item-group__title {
@@ -40,7 +40,7 @@
     }
   }
 
-  /* arrow */
+  /* 箭头 */
   .el-sub-menu__title .el-sub-menu__icon-arrow {
     order: 4;
     width: auto;
@@ -48,7 +48,7 @@
     font-size: eleVar('menu', 'arrow-size');
 
     & > svg.ele-arrow-down path {
-      transition: d $ele-transition;
+      transition: d $transition-base;
       stroke-width: 5;
     }
   }
@@ -59,7 +59,7 @@
     }
   }
 
-  /* disabled */
+  /* 禁用 */
   .el-menu-item.is-disabled,
   .el-sub-menu.is-disabled .el-menu-item,
   .el-sub-menu.is-disabled .el-sub-menu__title {
@@ -83,7 +83,7 @@
       &::after {
         content: '';
         height: eleVar('menu-horizontal', 'line-size');
-        transition: background-color $ele-transition;
+        transition: background-color $transition-base;
         background: transparent;
         pointer-events: none;
         position: absolute;
@@ -100,7 +100,7 @@
       }
 
       &:active {
-        background: eleVar('menu-horizontal', 'active-bg');
+        background: eleVar('menu-horizontal', 'focus-bg');
       }
     }
 
@@ -189,7 +189,7 @@
       }
 
       &:active {
-        background: eleVar('menu', 'item-active-bg');
+        background: eleVar('menu', 'item-focus-bg');
       }
     }
 
@@ -394,8 +394,8 @@
     & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
       .el-badge {
         position: absolute;
-        top: 8px;
-        right: 10px;
+        top: 6px;
+        right: 6px;
         margin: 0;
       }
     }
@@ -421,6 +421,99 @@
     }
   }
 
+  /* 紧凑菜单 */
+  &.is-compact {
+    width: 100%;
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      height: auto;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      padding: eleVar('menu', 'compact-item-padding');
+
+      .el-icon:not(.el-sub-menu__icon-arrow) {
+        margin: 0;
+        font-size: eleVar('menu', 'compact-icon-font-size');
+      }
+
+      & > span {
+        width: 100%;
+        height: auto;
+        line-height: 1;
+        font-size: eleVar('menu', 'compact-font-size');
+        margin-top: eleVar('menu', 'compact-title-margin');
+        box-sizing: border-box;
+        text-align: center;
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        visibility: inherit;
+      }
+    }
+
+    & > .el-menu-item::after,
+    & > .el-menu-item-group > ul > .el-menu-item::after {
+      display: none;
+    }
+
+    & > .el-sub-menu.is-active > .el-sub-menu__title {
+      transition: none;
+    }
+  }
+
+  &.is-compact:not(.is-compact-collapse) {
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      .el-badge {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        margin: 0;
+      }
+    }
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > .el-menu-item-group__title {
+      .el-badge .el-badge__content:not(.is-dot) {
+        width: auto;
+        height: 18px;
+        line-height: 18px;
+        border-radius: 24px;
+        min-width: 20px;
+        font-size: 12px;
+        padding: 0 4px;
+      }
+    }
+  }
+
+  &.is-compact-collapse {
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      padding: eleVar('menu', 'compact-collapse-item-padding');
+
+      .el-icon:not(.el-sub-menu__icon-arrow) {
+        font-size: eleVar('menu', 'collapse-icon-size');
+      }
+
+      & > span {
+        display: none;
+      }
+    }
+  }
+
   /* 彩色图标 */
   &.is-colorful {
     &.el-menu > li,
@@ -521,15 +614,20 @@
         height: eleVar('menu-colorful', 'dot-size');
         margin: eleVar('menu-colorful', 'dot-margin');
         background: eleVar('menu-colorful', 'dot-color');
-        transition: background-color $ele-transition;
+        transition: background-color $transition-base;
         border-radius: 50%;
       }
 
-      .el-menu-item:not(.is-disabled):hover::before,
+      .el-menu-item:not(.is-disabled):not(.is-active),
+      .el-sub-menu:not(.is-disabled):not(.is-active) .el-sub-menu__title {
+        &:hover::before {
+          background: eleVar('menu-colorful', 'dot-hover-color');
+        }
+      }
+
       .el-menu-item.is-active::before,
-      .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
       .el-sub-menu.is-active .el-sub-menu__title::before {
-        background: eleVar('menu-colorful', 'dot-hover-color');
+        background: eleVar('menu-colorful', 'dot-active-color');
       }
     }
 
@@ -561,7 +659,7 @@
         }
 
         &:active {
-          background: eleVar('menu-horizontal', 'dark-active-bg');
+          background: eleVar('menu-horizontal', 'dark-focus-bg');
         }
       }
 
@@ -590,7 +688,7 @@
         }
 
         &:active {
-          background: eleVar('menu-dark', 'active-bg');
+          background: eleVar('menu-dark', 'focus-bg');
         }
       }
 
@@ -630,16 +728,22 @@
           background: eleVar('menu-colorful', 'dark-dot-color');
         }
 
-        .el-menu-item:not(.is-disabled):hover::before,
+        .el-menu-item:not(.is-disabled):not(.is-active),
+        .el-sub-menu:not(.is-disabled):not(.is-active) .el-sub-menu__title {
+          &:hover::before {
+            background: eleVar('menu-colorful', 'dark-dot-hover-color');
+          }
+        }
+
         .el-menu-item.is-active::before,
-        .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
         .el-sub-menu.is-active .el-sub-menu__title::before {
-          background: eleVar('menu-colorful', 'dark-dot-hover-color');
+          background: eleVar('menu-colorful', 'dark-dot-active-color');
         }
       }
     }
   }
 
+  /* 水平菜单溢出省略 */
   .ele-sub-menu-ellipsis > .el-sub-menu__title {
     .el-icon:not(.el-sub-menu__icon-arrow) {
       margin: 0;

package/lib/ele-menus/types.d.ts

@@ -7,6 +7,7 @@ import type {
   ElMenuItemGroupProps,
   ElBadgeProps
 } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
 
 /**
  * 菜单数据
@@ -39,6 +40,11 @@ export interface MenuItem
   overflow?: boolean;
 }
 
+/**
+ * 菜单展示模式
+ */
+export type MenuMode = 'horizontal' | 'vertical' | 'compact';
+
 /**
  * 主题
  */
@@ -73,6 +79,11 @@ export interface EllipsisProps extends ElSubMenuProps {
   iconStyle?: StyleValue;
 }
 
+/**
+ * 菜单文本溢出提示
+ */
+export type TextEllipsisTooltip = boolean | EleTooltipProps;
+
 /**
  * 生成菜单数据返回结果
  */

package/lib/ele-menus/util.cjs

@@ -63,7 +63,7 @@ function getNodes(icons2, titles, badge, trigger) {
   }
   return nodes;
 }
-function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit, onParentMouseenter, onParentMouseleave) {
+function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit, onParentMouseenter, onParentMouseleave, parentIsGroup) {
   const nodes = [];
   if (!items) {
     return nodes;
@@ -124,7 +124,7 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
       onParentMouseenter,
       onParentMouseleave
     );
-    if (item.group === true) {
+    if (item.group === true && !parentIsGroup) {
       nodes.push(
         vue.h(elementPlus.ElMenuItemGroup, { key }, {
           default: () => {
@@ -144,7 +144,8 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
               onItemMouseleave,
               webkit,
               onParentMouseenter,
-              onParentMouseleave
+              onParentMouseleave,
+              true
             );
           },
           title: () => getNodes(iNodes, tNodes, bNode, parentTriggerNode)

package/lib/ele-menus/util.d.ts

@@ -51,8 +51,9 @@ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNod
  * @param webkit 是否是webkit内核
  * @param onParentMouseenter 父级菜单项鼠标进入事件
  * @param onParentMouseleave 父级菜单项鼠标离开事件
+ * @param parentIsGroup 父级是否是分组菜单
  */
-export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean, onParentMouseenter?: MenuItemEvent, onParentMouseleave?: MenuItemEvent): VNode[];
+export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean, onParentMouseenter?: MenuItemEvent, onParentMouseleave?: MenuItemEvent, parentIsGroup?: boolean): VNode[];
 /**
  * 生成气泡菜单的类名
  * @param customerClass 自定义的类名

package/lib/ele-modal/index.cjs

@@ -2,9 +2,9 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const icons = require("../icons");
-const receiver = require("../ele-config-provider/receiver");
 const ReceiverView = require("../ele-config-provider/components/receiver-view");
-const util = require("./util");
+const util = require("../ele-pro-layout/util");
+const util$1 = require("./util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleModal",
@@ -22,13 +22,14 @@ const _sfc_main = vue.defineComponent({
   emits: props.modalEmits,
   setup(props2, { emit }) {
     const state = { isInit: true };
-    const layoutProvide = receiver.useLayoutState();
+    const layoutState = util.useLayoutState();
+    const isResponsive = util.useResponsive(props2);
     const dialogRef = vue.ref(null);
     const isFullscreen = vue.ref(props2.fullscreen ?? false);
     const isActivated = vue.ref(true);
     const dialogClass = vue.computed(() => {
-      const classes = [util.wrapperClass];
-      if (props2.responsive ?? layoutProvide.responsive ?? true) {
+      const classes = [util$1.wrapperClass];
+      if (props2.responsive ?? isResponsive.value ?? true) {
         classes.push("ele-modal-responsive");
       }
       if (props2.alignCenter || props2.position === "center") {
@@ -63,7 +64,7 @@ const _sfc_main = vue.defineComponent({
         classes.push("ele-modal-fullscreen");
       }
       if (!props2.modelValue) {
-        classes.push(util.closedClass);
+        classes.push(util$1.closedClass);
       }
       if (!isActivated.value && props2.modelValue) {
         classes.push("ele-modal-hide");
@@ -77,11 +78,11 @@ const _sfc_main = vue.defineComponent({
       return classes.join(" ");
     });
     const teleportTo = vue.computed(() => {
-      return util.getModalContainer(
+      return util$1.getModalContainer(
         props2.inner,
         props2.multiple,
         props2.appendTo,
-        layoutProvide.modalsEl
+        layoutState.modalsEl
       );
     });
     const teleportDisabled = vue.computed(() => {
@@ -109,7 +110,7 @@ const _sfc_main = vue.defineComponent({
       if (state.isInit) {
         state.isInit = false;
         const modalEl = getModalEl();
-        const margin = util.getPositionMargin(getPosition());
+        const margin = util$1.getPositionMargin(getPosition());
         if (modalEl && margin != null) {
           modalEl.style.margin = margin;
         }
@@ -117,7 +118,7 @@ const _sfc_main = vue.defineComponent({
     };
     const mousedownListener = (event) => {
       if (props2.multiple) {
-        util.topModal(event.currentTarget, getZIndex());
+        util$1.topModal(event.currentTarget, getZIndex());
       }
     };
     const handleHeaderMousedown = (event) => {
@@ -125,14 +126,14 @@ const _sfc_main = vue.defineComponent({
       if (!modalEl || !props2.draggable || isFullscreen.value) {
         return;
       }
-      util.handleMove(modalEl, event, props2);
+      util$1.handleMove(modalEl, event, props2);
     };
     const handleResizeMousedown = (event) => {
       const modalEl = getModalEl();
       if (!modalEl || !props2.resizable || isFullscreen.value) {
         return;
       }
-      util.handleResize(modalEl, event, props2);
+      util$1.handleResize(modalEl, event, props2);
     };
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
@@ -140,7 +141,7 @@ const _sfc_main = vue.defineComponent({
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = fullscreen ?? !isFullscreen.value;
       vue.nextTick(() => {
-        util.topModal(getModalEl(), getZIndex());
+        util$1.topModal(getModalEl(), getZIndex());
       });
       emit("update:fullscreen", isFullscreen.value);
     };
@@ -151,11 +152,11 @@ const _sfc_main = vue.defineComponent({
       vue.nextTick(() => {
         const modalEl = getModalEl();
         if (props2.resetOnClose) {
-          util.resetModalStyle(modalEl, props2.width, getPosition());
+          util$1.resetModalStyle(modalEl, props2.width, getPosition());
         } else {
           setInitPosition();
         }
-        util.topModal(modalEl, getZIndex());
+        util$1.topModal(modalEl, getZIndex());
       });
       emit("open");
     };
@@ -288,7 +289,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 4),
           _ctx.maxable ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: "ele-modal-tool",
+            class: "ele-modal-tool ele-modal-tool-max",
             style: vue.normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {