ele-admin-plus 1.1.9-beta.10 → 1.1.9-beta.12

package/es/ele-drawer/index.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, unref, onActivated, onDeactivated, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, onActivated, onDeactivated, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode } from "vue";
 import { ElDrawer, ElIcon, drawerEmits } from "element-plus";
 import { CloseOutlined } from "../icons";
-import ReceiverView from "../ele-config-provider/components/receiver-view";
 import { useLayoutState } from "../ele-config-provider/receiver";
-import { collapseClass, compactClass, maximizedClass, hasTabClass, mixSidebarClass, singleSidebarClass, topLayoutClass, expandedClass, mobileClass } from "../ele-modal/util";
+import ReceiverView from "../ele-config-provider/components/receiver-view";
+import { getModalContainer } from "../ele-modal/util";
 import { drawerProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleDrawer",
@@ -15,7 +15,6 @@ const _sfc_main = defineComponent({
     const drawerRef = ref(null);
     const isActivated = ref(true);
     const drawerClass = computed(() => {
-      const layoutState = unref(layoutProvide);
       const classes = ["ele-drawer"];
       if (!props.modelValue) {
         classes.push("ele-drawer-closed");
@@ -25,41 +24,20 @@ const _sfc_main = defineComponent({
       }
       if (props.inner) {
         classes.push("ele-drawer-inner");
-        if (layoutState && layoutState.sidebar != null) {
-          if (layoutState.collapse && !layoutState.topLayout) {
-            classes.push(collapseClass);
-          }
-          if (layoutState.compact && layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(compactClass);
-          }
-          if (layoutState.maximized) {
-            classes.push(maximizedClass);
-          }
-          if (layoutState.tabBar) {
-            classes.push(hasTabClass);
-          }
-          if (layoutState.mixSidebar && !layoutState.topLayout) {
-            classes.push(mixSidebarClass);
-            if (!layoutState.sidebar) {
-              classes.push(singleSidebarClass);
-            }
-          }
-          if (layoutState.topLayout) {
-            classes.push(topLayoutClass);
-          }
-          if (layoutState.maximized && layoutState.expanded) {
-            classes.push(expandedClass);
-          }
-          if (layoutState.mobile) {
-            classes.push(mobileClass);
-          }
-        }
       }
       if (props.modalClass) {
         classes.push(props.modalClass);
       }
       return classes.join(" ");
     });
+    const teleportTo = computed(() => {
+      return getModalContainer(
+        props.inner,
+        false,
+        void 0,
+        layoutProvide.modalsEl
+      );
+    });
     const handleClose = () => {
       if (drawerRef.value && drawerRef.value.handleClose) {
         drawerRef.value.handleClose();
@@ -80,6 +58,12 @@ const _sfc_main = defineComponent({
     const onClosed = () => {
       emit("closed");
     };
+    const onOpenAutoFocus = () => {
+      emit("openAutoFocus");
+    };
+    const onCloseAutoFocus = () => {
+      emit("closeAutoFocus");
+    };
     onActivated(() => {
       isActivated.value = true;
     });
@@ -89,12 +73,15 @@ const _sfc_main = defineComponent({
     return {
       drawerRef,
       drawerClass,
+      teleportTo,
       handleClose,
       updateModelValue,
       onOpen,
       onOpened,
       onClose,
-      onClosed
+      onClosed,
+      onOpenAutoFocus,
+      onCloseAutoFocus
     };
   }
 });
@@ -111,90 +98,97 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ReceiverView = resolveComponent("ReceiverView");
   const _component_ElDrawer = resolveComponent("ElDrawer");
-  return openBlock(), createBlock(_component_ElDrawer, {
-    ref: "drawerRef",
-    modelValue: _ctx.modelValue,
-    appendToBody: _ctx.appendToBody,
-    lockScroll: _ctx.lockScroll,
-    beforeClose: _ctx.beforeClose,
-    closeOnClickModal: _ctx.closeOnClickModal,
-    closeOnPressEscape: _ctx.closeOnPressEscape,
-    openDelay: _ctx.openDelay,
-    closeDelay: _ctx.closeDelay,
-    destroyOnClose: _ctx.destroyOnClose,
-    modal: _ctx.modal,
-    direction: _ctx.direction,
-    showClose: false,
-    size: _ctx.size,
-    title: _ctx.title,
-    withHeader: _ctx.withHeader,
-    modalClass: _ctx.drawerClass,
-    zIndex: _ctx.zIndex,
-    headerAriaLevel: _ctx.headerAriaLevel,
-    onOpen: _ctx.onOpen,
-    onOpened: _ctx.onOpened,
-    onClose: _ctx.onClose,
-    onClosed: _ctx.onClosed,
-    "onUpdate:modelValue": _ctx.updateModelValue
-  }, createSlots({
-    header: withCtx(({ close }) => [
-      createElementVNode("div", {
-        class: "ele-drawer-header",
-        style: normalizeStyle(_ctx.headerStyle)
-      }, [
-        createElementVNode("div", {
-          role: "heading",
-          class: "ele-drawer-title",
-          style: normalizeStyle(_ctx.titleStyle)
-        }, [
-          renderSlot(_ctx.$slots, "header", {}, () => [
-            createTextVNode(toDisplayString(_ctx.title), 1)
-          ])
-        ], 4),
-        _ctx.showClose ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "ele-drawer-close",
-          style: normalizeStyle(_ctx.closeBtnStyle),
-          onClick: close
-        }, [
-          renderSlot(_ctx.$slots, "closeBtn", {}, () => [
-            createVNode(_component_ElIcon, null, {
-              default: withCtx(() => [
-                createVNode(_component_CloseOutlined)
-              ]),
-              _: 1
-            })
-          ])
-        ], 12, _hoisted_1)) : createCommentVNode("", true)
-      ], 4)
-    ]),
-    default: withCtx(() => [
-      createVNode(_component_ReceiverView, {
-        wrapPosition: false,
-        class: "ele-drawer-body",
-        style: normalizeStyle(_ctx.bodyStyle)
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["style"])
-    ]),
-    _: 2
+  return openBlock(), createBlock(Teleport, {
+    to: _ctx.teleportTo,
+    disabled: _ctx.inner ? false : !_ctx.appendToBody
   }, [
-    _ctx.$slots.footer ? {
-      name: "footer",
-      fn: withCtx(() => [
+    createVNode(_component_ElDrawer, mergeProps(_ctx.$attrs, {
+      ref: "drawerRef",
+      modelValue: _ctx.modelValue,
+      appendToBody: false,
+      lockScroll: _ctx.inner ? false : _ctx.lockScroll,
+      beforeClose: _ctx.beforeClose,
+      closeOnClickModal: _ctx.closeOnClickModal,
+      closeOnPressEscape: _ctx.closeOnPressEscape,
+      openDelay: _ctx.openDelay,
+      closeDelay: _ctx.closeDelay,
+      destroyOnClose: _ctx.destroyOnClose,
+      modal: _ctx.modal,
+      direction: _ctx.direction,
+      showClose: false,
+      size: _ctx.size,
+      title: _ctx.title,
+      withHeader: _ctx.withHeader,
+      modalClass: _ctx.drawerClass,
+      zIndex: _ctx.zIndex,
+      headerAriaLevel: _ctx.headerAriaLevel,
+      onOpen: _ctx.onOpen,
+      onOpened: _ctx.onOpened,
+      onClose: _ctx.onClose,
+      onClosed: _ctx.onClosed,
+      onOpenAutoFocus: _ctx.onOpenAutoFocus,
+      onCloseAutoFocus: _ctx.onCloseAutoFocus,
+      "onUpdate:modelValue": _ctx.updateModelValue
+    }), createSlots({
+      header: withCtx(({ close }) => [
         createElementVNode("div", {
-          class: "ele-drawer-footer",
-          style: normalizeStyle(_ctx.footerStyle)
+          class: "ele-drawer-header",
+          style: normalizeStyle(_ctx.headerStyle)
         }, [
-          renderSlot(_ctx.$slots, "footer")
+          createElementVNode("div", {
+            role: "heading",
+            class: "ele-drawer-title",
+            style: normalizeStyle(_ctx.titleStyle)
+          }, [
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ])
+          ], 4),
+          _ctx.showClose ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-drawer-close",
+            style: normalizeStyle(_ctx.closeBtnStyle),
+            onClick: close
+          }, [
+            renderSlot(_ctx.$slots, "closeBtn", {}, () => [
+              createVNode(_component_ElIcon, null, {
+                default: withCtx(() => [
+                  createVNode(_component_CloseOutlined)
+                ]),
+                _: 1
+              })
+            ])
+          ], 12, _hoisted_1)) : createCommentVNode("", true)
         ], 4)
       ]),
-      key: "0"
-    } : void 0
-  ]), 1032, ["modelValue", "appendToBody", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onUpdate:modelValue"]);
+      default: withCtx(() => [
+        createVNode(_component_ReceiverView, {
+          wrapPosition: false,
+          class: "ele-drawer-body",
+          style: normalizeStyle(_ctx.bodyStyle)
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["style"])
+      ]),
+      _: 2
+    }, [
+      _ctx.$slots.footer ? {
+        name: "footer",
+        fn: withCtx(() => [
+          createElementVNode("div", {
+            class: "ele-drawer-footer",
+            style: normalizeStyle(_ctx.footerStyle)
+          }, [
+            renderSlot(_ctx.$slots, "footer")
+          ], 4)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["modelValue", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus", "onUpdate:modelValue"])
+  ], 8, ["to", "disabled"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/es/ele-drawer/props.d.ts

@@ -60,7 +60,7 @@ export declare const drawerProps: {
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/es/ele-drawer/style/index.scss

@@ -28,55 +28,55 @@
       border: none;
     }
   }
+}
 
-  .ele-drawer-header {
-    display: flex;
-    align-items: center;
-    padding: eleVar('drawer', 'header-padding');
-    border-bottom: eleVar('drawer', 'header-border');
-    box-sizing: border-box;
-  }
-
-  .ele-drawer-title {
-    flex: 1;
-    color: eleVar('drawer', 'header-color');
-    font-size: eleVar('drawer', 'header-font-size');
-    line-height: eleVar('drawer', 'header-line-height');
-    font-weight: eleVar('drawer', 'header-font-weight');
-    box-sizing: border-box;
-  }
+.ele-drawer-header {
+  display: flex;
+  align-items: center;
+  padding: eleVar('drawer', 'header-padding');
+  border-bottom: eleVar('drawer', 'header-border');
+  box-sizing: border-box;
+}
 
-  .ele-drawer-close {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: eleVar('drawer', 'icon-size');
-    height: eleVar('drawer', 'icon-size');
-    line-height: eleVar('drawer', 'icon-size');
-    color: eleVar('drawer', 'icon-color');
-    font-size: eleVar('drawer', 'icon-font-size');
-    border-radius: eleVar('drawer', 'icon-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
-    box-sizing: border-box;
-    cursor: pointer;
+.ele-drawer-title {
+  flex: 1;
+  color: eleVar('drawer', 'header-color');
+  font-size: eleVar('drawer', 'header-font-size');
+  line-height: eleVar('drawer', 'header-line-height');
+  font-weight: eleVar('drawer', 'header-font-weight');
+  box-sizing: border-box;
+}
 
-    &:hover {
-      color: eleVar('drawer', 'icon-hover-color');
-      background: eleVar('drawer', 'icon-hover-bg');
-    }
+.ele-drawer-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('drawer', 'icon-size');
+  height: eleVar('drawer', 'icon-size');
+  line-height: eleVar('drawer', 'icon-size');
+  color: eleVar('drawer', 'icon-color');
+  font-size: eleVar('drawer', 'icon-font-size');
+  border-radius: eleVar('drawer', 'icon-radius');
+  transition: (color $ele-transition, background-color $ele-transition);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('drawer', 'icon-hover-color');
+    background: eleVar('drawer', 'icon-hover-bg');
   }
+}
 
-  .ele-drawer-body {
-    padding: eleVar('drawer', 'body-padding');
-    box-sizing: border-box;
-  }
+.ele-drawer-body {
+  padding: eleVar('drawer', 'body-padding');
+  box-sizing: border-box;
+}
 
-  .ele-drawer-footer {
-    padding: eleVar('drawer', 'footer-padding');
-    border-top: eleVar('drawer', 'footer-border');
-    box-sizing: border-box;
-  }
+.ele-drawer-footer {
+  padding: eleVar('drawer', 'footer-padding');
+  border-top: eleVar('drawer', 'footer-border');
+  box-sizing: border-box;
 }
 
 /* 失活状态 */
@@ -84,70 +84,13 @@
   display: none !important;
 }
 
-/* 限制在内部并适配布局状态 */
-.ele-drawer-inner {
-  & > .el-drawer {
-    box-shadow: eleVar('drawer', 'inner-shadow');
-  }
-
-  &.ele-drawer {
-    top: eleVar('header', 'height', 0);
-    left: eleVar('sidebar', 'width', 0);
-    height: auto;
-  }
+/* 限制在主体区域 */
+.ele-admin-modals > .ele-drawer {
+  height: auto;
+  pointer-events: auto;
+  position: absolute !important;
 
   &:not(.el-drawer-fade-leave-active):not(.el-drawer-fade-enter-active) {
     transition: (width $ele-transition, left $ele-transition);
   }
-
-  &.ele-state-has-tab {
-    top: calc(#{eleVar('header', 'height')} + #{eleVar('tab', 'height')});
-  }
-
-  &.ele-state-collapse {
-    left: eleVar('sidebar', 'collapse-width');
-  }
-
-  &.ele-state-mix-sidebar {
-    $box-width: eleVar('sidebox', 'width');
-    left: calc(#{$box-width} + #{eleVar('sidebar', 'mix-width')});
-
-    &.ele-state-collapse {
-      left: $box-width;
-    }
-
-    &.ele-state-single-sidebar {
-      left: $box-width;
-    }
-  }
-
-  &.ele-state-compact {
-    $collapse-width: eleVar('sidebar', 'collapse-width');
-    left: calc(#{$collapse-width} + #{eleVar('sidebar', 'mix-width')});
-
-    &.ele-state-single-sidebar {
-      left: $collapse-width;
-    }
-
-    &.ele-state-collapse {
-      left: $collapse-width;
-    }
-  }
-
-  &.ele-state-top-layout {
-    left: 0;
-  }
-
-  &.ele-state-maximized {
-    top: eleVar('tab', 'height');
-    left: 0 !important;
-  }
-
-  &.ele-state-expanded {
-    top: 0 !important;
-  }
-
-  &.ele-state-mobile {
-    left: 0 !important;
-  }
 }