@element-plus/nightly 0.0.20220227 → 0.0.20220302

package/es/components/dialog/src/dialog.vue.d.ts

@@ -1,7 +1,6 @@
-import type { Ref } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     readonly appendToBody: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+    readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<import("./dialog").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
     readonly destroyOnClose: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeOnClickModal: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -14,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly modalClass: StringConstructor;
     readonly width: import("../../../utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
     readonly zIndex: import("../../../utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly trapFocus: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly center: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeIcon: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
     readonly customClass: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly appendToBody: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-        readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+        readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<import("./dialog").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
         readonly destroyOnClose: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly closeOnClickModal: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly closeOnPressEscape: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -37,6 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly modalClass: StringConstructor;
         readonly width: import("../../../utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
         readonly zIndex: import("../../../utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+        readonly trapFocus: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly center: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly closeIcon: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
         readonly customClass: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -46,14 +47,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly title: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
-        onOpen?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        onOpen?: (() => any) | undefined;
         onOpened?: (() => any) | undefined;
         onClosed?: (() => any) | undefined;
         onOpenAutoFocus?: (() => any) | undefined;
         onCloseAutoFocus?: (() => any) | undefined;
     }>>;
-    emit: ((event: "update:modelValue", value: boolean) => void) & ((event: "close") => void) & ((event: "open") => void) & ((event: "opened") => void) & ((event: "closed") => void) & ((event: "openAutoFocus") => void) & ((event: "closeAutoFocus") => void);
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
@@ -68,29 +68,17 @@ declare const _default: import("vue").DefineComponent<{
             (name: string): string;
         };
     };
-    dialogRef: Ref<HTMLElement | null>;
-    headerRef: Ref<HTMLElement | null>;
-    dialog: {
-        afterEnter: () => void;
-        afterLeave: () => void;
-        beforeLeave: () => void;
-        handleClose: () => void;
-        onModalClick: () => void;
-        close: () => void;
-        doClose: () => void;
-        closed: Ref<boolean>;
-        style: import("vue").ComputedRef<import("vue").CSSProperties>;
-        rendered: Ref<boolean>;
-        visible: Ref<boolean>;
-        zIndex: Ref<number>;
-    };
-    visible: Ref<boolean>;
+    dialogRef: import("vue").Ref<HTMLElement | undefined>;
+    headerRef: import("vue").Ref<HTMLElement | undefined>;
+    visible: import("vue").Ref<boolean>;
+    style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    rendered: import("vue").Ref<boolean>;
+    zIndex: import("vue").Ref<number>;
     afterEnter: () => void;
     afterLeave: () => void;
     beforeLeave: () => void;
-    style: import("vue").ComputedRef<import("vue").CSSProperties>;
     handleClose: () => void;
-    rendered: Ref<boolean>;
+    onModalClick: () => void;
     overlayEvent: {
         onClick: (e: MouseEvent) => void;
         onMousedown: (e: MouseEvent) => void;
@@ -119,23 +107,6 @@ declare const _default: import("vue").DefineComponent<{
         customMaskEvent: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         overlayClass: import("../../../utils").BuildPropType<import("../../../utils").PropWrapper<string | string[] | Record<string, boolean>>, unknown, unknown>;
     }>;
-    ElFocusTrap: import("vue").DefineComponent<{
-        loop: BooleanConstructor;
-        trapped: BooleanConstructor;
-    }, {
-        focusTrapRef: Ref<HTMLElement | null | undefined>;
-        forwardRef: Ref<HTMLElement | null>;
-        onKeydown: (e: KeyboardEvent) => void;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mountOnFocus" | "unmountOnFocus")[], "mountOnFocus" | "unmountOnFocus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        loop: BooleanConstructor;
-        trapped: BooleanConstructor;
-    }>> & {
-        onMountOnFocus?: ((...args: any[]) => any) | undefined;
-        onUnmountOnFocus?: ((...args: any[]) => any) | undefined;
-    }, {
-        loop: boolean;
-        trapped: boolean;
-    }>;
     ElDialogContent: import("vue").DefineComponent<{
         readonly center: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly closeIcon: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
@@ -146,8 +117,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly title: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     }, {
         Close: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-        dialogRef: Ref<HTMLElement | null>;
-        headerRef: Ref<HTMLElement | null>;
+        dialogRef: import("vue").Ref<HTMLElement | undefined>;
+        headerRef: import("vue").Ref<HTMLElement | undefined>;
         ns: {
             namespace: import("vue").ComputedRef<string>;
             b: (blockSuffix?: string) => string;
@@ -163,9 +134,6 @@ declare const _default: import("vue").DefineComponent<{
             };
         };
         style: import("vue").ComputedRef<import("vue").CSSProperties>;
-        focusTrapRef: Ref<HTMLElement | null>;
-        onKeydown: (e: KeyboardEvent) => void;
-        composedDialogRef: (el: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | Element | null) => void;
         ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{
             readonly size: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
             readonly color: import("../../../utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
@@ -229,7 +197,7 @@ declare const _default: import("vue").DefineComponent<{
     closeAutoFocus: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly appendToBody: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+    readonly beforeClose: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<import("./dialog").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
     readonly destroyOnClose: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeOnClickModal: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -242,6 +210,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly modalClass: StringConstructor;
     readonly width: import("../../../utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
     readonly zIndex: import("../../../utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly trapFocus: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly center: import("../../../utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeIcon: import("../../../utils").BuildPropReturn<import("../../../utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
     readonly customClass: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -251,8 +220,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly title: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
@@ -260,9 +229,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     zIndex: number;
     top: string;
+    width: import("../../../utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     title: string;
     center: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    width: import("../../../utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     draggable: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     showClose: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -270,12 +239,13 @@ declare const _default: import("vue").DefineComponent<{
     customClass: string;
     fullscreen: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    beforeClose: (...args: any[]) => void;
+    beforeClose: import("./dialog").DialogBeforeCloseFn;
     destroyOnClose: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeOnClickModal: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeDelay: number;
+    trapFocus: import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>;
 export default _default;

package/es/components/dialog/src/dialog2.mjs

@@ -1,15 +1,14 @@
 import { defineComponent, ref, provide, computed, openBlock, createBlock, Teleport, createVNode, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, vShow } from 'vue';
 import { ElOverlay } from '../../overlay/index.mjs';
-import '../../focus-trap/index.mjs';
 import '../../../hooks/index.mjs';
+import '../../../tokens/index.mjs';
 import _sfc_main$1 from './dialog-content2.mjs';
 import { dialogProps, dialogEmits } from './dialog.mjs';
-import { elDialogInjectionKey } from './token.mjs';
 import { useDialog } from './use-dialog.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { dialogInjectionKey } from '../../../tokens/dialog.mjs';
 import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
 import { useDraggable } from '../../../hooks/use-draggable/index.mjs';
-import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
 
 const __default__ = {
   name: "ElDialog"
@@ -18,31 +17,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: dialogProps,
   emits: dialogEmits,
-  setup(__props, { emit }) {
+  setup(__props, { expose }) {
     const props = __props;
     const ns = useNamespace("dialog");
-    const dialogRef = ref(null);
-    const headerRef = ref(null);
-    const dialog = useDialog(props, { emit }, dialogRef);
+    const dialogRef = ref();
+    const headerRef = ref();
     const {
       visible,
+      style,
+      rendered,
+      zIndex,
       afterEnter,
       afterLeave,
       beforeLeave,
-      style,
       handleClose,
-      rendered
-    } = dialog;
-    provide(elDialogInjectionKey, {
+      onModalClick
+    } = useDialog(props, dialogRef);
+    provide(dialogInjectionKey, {
       dialogRef,
       headerRef,
       ns,
       rendered,
       style
     });
-    const overlayEvent = useSameTarget(dialog.onModalClick);
+    const overlayEvent = useSameTarget(onModalClick);
     const draggable = computed(() => props.draggable && !props.fullscreen);
     useDraggable(dialogRef, headerRef, draggable);
+    expose({
+      visible
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, {
         to: "body",
@@ -59,48 +62,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "custom-mask-event": "",
               mask: _ctx.modal,
               "overlay-class": _ctx.modalClass,
-              "z-index": _ctx.zIndex
+              "z-index": unref(zIndex)
             }, {
               default: withCtx(() => [
                 createElementVNode("div", {
                   class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
-                  onClick: _cache[2] || (_cache[2] = (...args) => unref(overlayEvent).onClick && unref(overlayEvent).onClick(...args)),
-                  onMousedown: _cache[3] || (_cache[3] = (...args) => unref(overlayEvent).onMousedown && unref(overlayEvent).onMousedown(...args)),
-                  onMouseup: _cache[4] || (_cache[4] = (...args) => unref(overlayEvent).onMouseup && unref(overlayEvent).onMouseup(...args))
+                  onClick: _cache[0] || (_cache[0] = (...args) => unref(overlayEvent).onClick && unref(overlayEvent).onClick(...args)),
+                  onMousedown: _cache[1] || (_cache[1] = (...args) => unref(overlayEvent).onMousedown && unref(overlayEvent).onMousedown(...args)),
+                  onMouseup: _cache[2] || (_cache[2] = (...args) => unref(overlayEvent).onMouseup && unref(overlayEvent).onMouseup(...args))
                 }, [
-                  unref(rendered) ? (openBlock(), createBlock(unref(ElFocusTrap), {
+                  unref(rendered) ? (openBlock(), createBlock(_sfc_main$1, {
                     key: 0,
-                    loop: "",
-                    trapped: "",
-                    onMountOnFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openAutoFocus")),
-                    onUnmountOnFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("closeAutoFocus"))
+                    "custom-class": _ctx.customClass,
+                    center: _ctx.center,
+                    "close-icon": _ctx.closeIcon,
+                    draggable: unref(draggable),
+                    fullscreen: _ctx.fullscreen,
+                    "show-close": _ctx.showClose,
+                    style: normalizeStyle(unref(style)),
+                    title: _ctx.title,
+                    onClose: unref(handleClose)
                   }, {
+                    title: withCtx(() => [
+                      renderSlot(_ctx.$slots, "title")
+                    ]),
+                    footer: withCtx(() => [
+                      renderSlot(_ctx.$slots, "footer")
+                    ]),
                     default: withCtx(() => [
-                      createVNode(_sfc_main$1, {
-                        "custom-class": _ctx.customClass,
-                        center: _ctx.center,
-                        "close-icon": _ctx.closeIcon,
-                        draggable: unref(draggable),
-                        fullscreen: _ctx.fullscreen,
-                        "show-close": _ctx.showClose,
-                        style: normalizeStyle(unref(style)),
-                        title: _ctx.title,
-                        onClose: unref(handleClose)
-                      }, {
-                        title: withCtx(() => [
-                          renderSlot(_ctx.$slots, "title")
-                        ]),
-                        footer: withCtx(() => [
-                          renderSlot(_ctx.$slots, "footer")
-                        ]),
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "default")
-                        ]),
-                        _: 3
-                      }, 8, ["custom-class", "center", "close-icon", "draggable", "fullscreen", "show-close", "style", "title", "onClose"])
+                      renderSlot(_ctx.$slots, "default")
                     ]),
                     _: 3
-                  })) : createCommentVNode("v-if", true)
+                  }, 8, ["custom-class", "center", "close-icon", "draggable", "fullscreen", "show-close", "style", "title", "onClose"])) : createCommentVNode("v-if", true)
                 ], 34)
               ]),
               _: 3

package/es/components/dialog/src/dialog2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!appendToBody\">\n    <transition\n      name=\"dialog-fade\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"modalClass\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          :class=\"`${ns.namespace.value}-overlay-dialog`\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            v-if=\"rendered\"\n            loop\n            trapped\n            @mount-on-focus=\"$emit('openAutoFocus')\"\n            @unmount-on-focus=\"$emit('closeAutoFocus')\"\n          >\n            <el-dialog-content\n              :custom-class=\"customClass\"\n              :center=\"center\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"draggable\"\n              :fullscreen=\"fullscreen\"\n              :show-close=\"showClose\"\n              :style=\"style\"\n              :title=\"title\"\n              @close=\"handleClose\"\n            >\n              <template #title>\n                <slot name=\"title\" />\n              </template>\n              <slot />\n              <template #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, provide } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { ElFocusTrap } from '@element-plus/components/focus-trap'\nimport { useNamespace, useDraggable, useSameTarget } from '@element-plus/hooks'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogProps, dialogEmits } from './dialog'\nimport { elDialogInjectionKey } from './token'\nimport { useDialog } from './use-dialog'\n\nimport type { SetupContext, Ref } from 'vue'\nimport type { DialogEmits } from './dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n})\n\nconst props = defineProps(dialogProps)\nconst emit = defineEmits(dialogEmits)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement | null>(null)\nconst headerRef = ref<HTMLElement | null>(null)\n\nconst dialog = useDialog(\n  props,\n  { emit } as SetupContext<DialogEmits>,\n  dialogRef as Ref<HTMLElement>\n)\nconst {\n  visible,\n  afterEnter,\n  afterLeave,\n  beforeLeave,\n  style,\n  handleClose,\n  rendered,\n} = dialog\n\nprovide(elDialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(dialog.onModalClick)\n\nconst draggable = computed(() => props.draggable && !props.fullscreen)\n\nuseDraggable(\n  dialogRef as Ref<HTMLElement>,\n  headerRef as Ref<HTMLElement>,\n  draggable\n)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0EA;AACA;AACA;AAEA;AAKA;;;;;;;;;AAUA;;;;;;;AAQA;AAEA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog2.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!appendToBody\">\n    <transition\n      name=\"dialog-fade\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"modalClass\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          :class=\"`${ns.namespace.value}-overlay-dialog`\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-dialog-content\n            v-if=\"rendered\"\n            :custom-class=\"customClass\"\n            :center=\"center\"\n            :close-icon=\"closeIcon\"\n            :draggable=\"draggable\"\n            :fullscreen=\"fullscreen\"\n            :show-close=\"showClose\"\n            :style=\"style\"\n            :title=\"title\"\n            @close=\"handleClose\"\n          >\n            <template #title>\n              <slot name=\"title\" />\n            </template>\n            <slot />\n            <template #footer>\n              <slot name=\"footer\" />\n            </template>\n          </el-dialog-content>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, provide } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useNamespace, useDraggable, useSameTarget } from '@element-plus/hooks'\nimport { dialogInjectionKey } from '@element-plus/tokens'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogProps, dialogEmits } from './dialog'\nimport { useDialog } from './use-dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n})\n\nconst props = defineProps(dialogProps)\ndefineEmits(dialogEmits)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\n\nconst {\n  visible,\n  style,\n  rendered,\n  zIndex,\n  afterEnter,\n  afterLeave,\n  beforeLeave,\n  handleClose,\n  onModalClick,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst draggable = computed(() => props.draggable && !props.fullscreen)\n\nuseDraggable(dialogRef, headerRef, draggable)\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+DA;AACA;AACA;AAEA;;;;;;;;;;;AAYA;;;;;;;AAQA;AAEA;AAEA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/dialog/src/use-dialog.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties, Ref, SetupContext } from 'vue';
-import type { DialogEmits, DialogProps } from './dialog';
-export declare const useDialog: (props: DialogProps, { emit }: SetupContext<DialogEmits>, targetRef: Ref<HTMLElement | undefined>) => {
+import type { CSSProperties, Ref } from 'vue';
+import type { DialogProps } from './dialog';
+export declare const useDialog: (props: DialogProps, targetRef: Ref<HTMLElement | undefined>) => {
     afterEnter: () => void;
     afterLeave: () => void;
     beforeLeave: () => void;

package/es/components/dialog/src/use-dialog.mjs

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import { getCurrentInstance, ref, computed, watch, nextTick, onMounted } from 'vue';
 import { isNumber, useTimeoutFn, isClient } from '@vueuse/core';
 import '../../../hooks/index.mjs';
 import '../../../constants/index.mjs';
@@ -9,12 +9,14 @@ import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
 import { useModal } from '../../../hooks/use-modal/index.mjs';
 import { useRestoreActive } from '../../../hooks/use-restore-active/index.mjs';
 
-const useDialog = (props, { emit }, targetRef) => {
+const useDialog = (props, targetRef) => {
+  const instance = getCurrentInstance();
+  const emit = instance.emit;
+  const { nextZIndex } = useZIndex();
   let lastPosition = "";
   const visible = ref(false);
   const closed = ref(false);
   const rendered = ref(false);
-  const { nextZIndex } = useZIndex();
   const zIndex = ref(props.zIndex || nextZIndex());
   let openTimer = void 0;
   let closeTimer = void 0;
@@ -65,13 +67,13 @@ const useDialog = (props, { emit }, targetRef) => {
       doClose();
     }
   }
-  function hide(shouldCancel) {
-    if (shouldCancel)
-      return;
-    closed.value = true;
-    visible.value = false;
-  }
   function handleClose() {
+    function hide(shouldCancel) {
+      if (shouldCancel)
+        return;
+      closed.value = true;
+      visible.value = false;
+    }
     if (props.beforeClose) {
       props.beforeClose(hide);
     } else {
@@ -84,9 +86,8 @@ const useDialog = (props, { emit }, targetRef) => {
     }
   }
   function doOpen() {
-    if (!isClient) {
+    if (!isClient)
       return;
-    }
     visible.value = true;
   }
   function doClose() {

package/es/components/dialog/src/use-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import { computed, ref, watch, nextTick, onMounted } from 'vue'\nimport { useTimeoutFn, isClient } from '@vueuse/core'\n\nimport {\n  useLockscreen,\n  useRestoreActive,\n  useModal,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { isNumber } from '@element-plus/utils'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  { emit }: SetupContext<DialogEmits>,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  let lastPosition = ''\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n  const { nextZIndex } = useZIndex()\n  const zIndex = ref(props.zIndex || nextZIndex())\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const normalizeWidth = computed(() =>\n    isNumber(props.width) ? `${props.width}px` : props.width\n  )\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--el-dialog`\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      if (props.width) {\n        style[`${varPrefix}-width`] = normalizeWidth.value\n      }\n    }\n    return style\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n  }\n\n  function beforeLeave() {\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    // if (this.willClose && !this.willClose()) return;\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function hide(shouldCancel: boolean) {\n    if (shouldCancel) return\n    closed.value = true\n    visible.value = false\n  }\n\n  function handleClose() {\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) {\n      return\n    }\n\n    // if (props.willOpen?.()) {\n    //  return\n    // }\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  if (props.closeOnPressEscape) {\n    useModal(\n      {\n        handleClose,\n      },\n      visible\n    )\n  }\n\n  useRestoreActive(visible)\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        emit('open')\n        zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          if (targetRef.value) {\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    closed,\n    style,\n    rendered,\n    visible,\n    zIndex,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n  computed,\n  ref,\n  watch,\n  nextTick,\n  onMounted,\n  getCurrentInstance,\n} from 'vue'\nimport { useTimeoutFn, isClient } from '@vueuse/core'\n\nimport {\n  useLockscreen,\n  useRestoreActive,\n  useModal,\n  useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { isNumber } from '@element-plus/utils'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n  props: DialogProps,\n  targetRef: Ref<HTMLElement | undefined>\n) => {\n  const instance = getCurrentInstance()!\n  const emit = instance.emit as SetupContext<DialogEmits>['emit']\n  const { nextZIndex } = useZIndex()\n\n  let lastPosition = ''\n  const visible = ref(false)\n  const closed = ref(false)\n  const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n  const zIndex = ref(props.zIndex || nextZIndex())\n\n  let openTimer: (() => void) | undefined = undefined\n  let closeTimer: (() => void) | undefined = undefined\n\n  const normalizeWidth = computed(() =>\n    isNumber(props.width) ? `${props.width}px` : props.width\n  )\n\n  const style = computed<CSSProperties>(() => {\n    const style: CSSProperties = {}\n    const varPrefix = `--el-dialog`\n    if (!props.fullscreen) {\n      if (props.top) {\n        style[`${varPrefix}-margin-top`] = props.top\n      }\n      if (props.width) {\n        style[`${varPrefix}-width`] = normalizeWidth.value\n      }\n    }\n    return style\n  })\n\n  function afterEnter() {\n    emit('opened')\n  }\n\n  function afterLeave() {\n    emit('closed')\n    emit(UPDATE_MODEL_EVENT, false)\n    if (props.destroyOnClose) {\n      rendered.value = false\n    }\n  }\n\n  function beforeLeave() {\n    emit('close')\n  }\n\n  function open() {\n    closeTimer?.()\n    openTimer?.()\n\n    if (props.openDelay && props.openDelay > 0) {\n      ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n    } else {\n      doOpen()\n    }\n  }\n\n  function close() {\n    openTimer?.()\n    closeTimer?.()\n\n    if (props.closeDelay && props.closeDelay > 0) {\n      ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n    } else {\n      doClose()\n    }\n  }\n\n  function handleClose() {\n    function hide(shouldCancel: boolean) {\n      if (shouldCancel) return\n      closed.value = true\n      visible.value = false\n    }\n\n    if (props.beforeClose) {\n      props.beforeClose(hide)\n    } else {\n      close()\n    }\n  }\n\n  function onModalClick() {\n    if (props.closeOnClickModal) {\n      handleClose()\n    }\n  }\n\n  function doOpen() {\n    if (!isClient) return\n    visible.value = true\n  }\n\n  function doClose() {\n    visible.value = false\n  }\n\n  if (props.lockScroll) {\n    useLockscreen(visible)\n  }\n\n  if (props.closeOnPressEscape) {\n    useModal(\n      {\n        handleClose,\n      },\n      visible\n    )\n  }\n\n  useRestoreActive(visible)\n\n  watch(\n    () => props.modelValue,\n    (val) => {\n      if (val) {\n        closed.value = false\n        open()\n        rendered.value = true // enables lazy rendering\n        emit('open')\n        zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex()\n        // this.$el.addEventListener('scroll', this.updatePopper)\n        nextTick(() => {\n          if (targetRef.value) {\n            targetRef.value.scrollTop = 0\n          }\n        })\n      } else {\n        // this.$el.removeEventListener('scroll', this.updatePopper\n        if (visible.value) {\n          close()\n        }\n      }\n    }\n  )\n\n  watch(\n    () => props.fullscreen,\n    (val) => {\n      if (!targetRef.value) return\n      if (val) {\n        lastPosition = targetRef.value.style.transform\n        targetRef.value.style.transform = ''\n      } else {\n        targetRef.value.style.transform = lastPosition\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (props.modelValue) {\n      visible.value = true\n      rendered.value = true // enables lazy rendering\n      open()\n    }\n  })\n\n  return {\n    afterEnter,\n    afterLeave,\n    beforeLeave,\n    handleClose,\n    onModalClick,\n    close,\n    doClose,\n    closed,\n    style,\n    rendered,\n    visible,\n    zIndex,\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/components/drawer/index.d.ts

@@ -4,7 +4,7 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     readonly withHeader: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modalFade: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly appendToBody: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("..").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
     readonly destroyOnClose: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -17,6 +17,7 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     readonly modalClass: StringConstructor;
     readonly width: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly trapFocus: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly center: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeIcon: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
     readonly customClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -68,7 +69,7 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     readonly withHeader: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modalFade: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly appendToBody: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("..").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
     readonly destroyOnClose: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -81,6 +82,7 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     readonly modalClass: StringConstructor;
     readonly width: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly trapFocus: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly center: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeIcon: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
     readonly customClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
@@ -90,8 +92,8 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     readonly title: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
@@ -100,9 +102,9 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     size: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     zIndex: number;
     top: string;
+    width: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     title: string;
     center: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    width: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     direction: import("element-plus/es/utils").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
     draggable: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
@@ -111,13 +113,14 @@ export declare const ElDrawer: import("element-plus/es/utils").SFCWithInstall<im
     customClass: string;
     fullscreen: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    beforeClose: (...args: any[]) => void;
+    beforeClose: import("..").DialogBeforeCloseFn;
     destroyOnClose: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeOnClickModal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     closeDelay: number;
+    trapFocus: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     withHeader: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     modalFade: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>> & Record<string, any>;

package/es/components/drawer/src/drawer.d.ts

@@ -5,7 +5,7 @@ export declare const drawerProps: {
     readonly withHeader: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modalFade: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly appendToBody: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(...args: any[]) => void>, unknown, unknown, unknown, unknown>;
+    readonly beforeClose: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("element-plus/es/components/dialog").DialogBeforeCloseFn>, unknown, unknown, unknown, unknown>;
     readonly destroyOnClose: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeOnClickModal: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -18,6 +18,7 @@ export declare const drawerProps: {
     readonly modalClass: StringConstructor;
     readonly width: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], unknown, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly trapFocus: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly center: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly closeIcon: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
     readonly customClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;