@element-plus/nightly 0.0.20220130 → 0.0.20220203

package/es/components/cascader/src/index.vue.d.ts

@@ -1505,6 +1505,17 @@ declare const _default: import("vue").DefineComponent<{
                 scrollLeft: number;
             }) => any) | undefined;
         }, {
+            ns: {
+                namespace: ComputedRef<string>;
+                b: (blockSuffix?: string) => string;
+                e: (element?: string | undefined) => string;
+                m: (modifier?: string | undefined) => string;
+                be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+                em: (element?: string | undefined, modifier?: string | undefined) => string;
+                bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+                bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+                is: (name: string, state?: boolean) => string;
+            };
             scrollbar$: Ref<HTMLDivElement | undefined>;
             wrap$: Ref<HTMLDivElement | undefined>;
             resize$: Ref<HTMLElement | undefined>;
@@ -1575,6 +1586,17 @@ declare const _default: import("vue").DefineComponent<{
             scrollLeft: number;
         }) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
+        ns: {
+            namespace: ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
         scrollbar$: Ref<HTMLDivElement | undefined>;
         wrap$: Ref<HTMLDivElement | undefined>;
         resize$: Ref<HTMLElement | undefined>;

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

@@ -8,6 +8,7 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     readonly closeOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -33,6 +34,7 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     visible: import("vue").Ref<boolean>;
     zIndex: import("vue").Ref<number>;
     dialogRef: import("vue").Ref<HTMLElement | undefined>;
+    headerRef: import("vue").Ref<HTMLElement | undefined>;
     overlayEvent: {
         onClick: (e: MouseEvent) => void;
         onMousedown: (e: MouseEvent) => void;
@@ -54,6 +56,7 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     readonly closeOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -77,6 +80,7 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     title: string;
     width: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    draggable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -9,6 +9,7 @@ export declare const dialogProps: {
     readonly closeOnClickModal: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;

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

@@ -37,6 +37,10 @@ const dialogProps = buildProps({
     type: Boolean,
     default: false
   },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
   lockScroll: {
     type: Boolean,
     default: true

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\n\nimport type { ExtractPropTypes, Component } from 'vue'\n\nexport const dialogProps = buildProps({\n  appendToBody: {\n    type: Boolean,\n    default: false,\n  },\n  beforeClose: {\n    type: definePropType<(...args: any[]) => void>(Function),\n  },\n  destroyOnClose: {\n    type: Boolean,\n    default: false,\n  },\n  center: {\n    type: Boolean,\n    default: false,\n  },\n  customClass: {\n    type: String,\n    default: '',\n  },\n  closeIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  closeOnClickModal: {\n    type: Boolean,\n    default: true,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  fullscreen: {\n    type: Boolean,\n    default: false,\n  },\n  lockScroll: {\n    type: Boolean,\n    default: true,\n  },\n  modal: {\n    type: Boolean,\n    default: true,\n  },\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  title: {\n    type: String,\n    default: '',\n  },\n  openDelay: {\n    type: Number,\n    default: 0,\n  },\n  closeDelay: {\n    type: Number,\n    default: 0,\n  },\n  top: {\n    type: String,\n  },\n  modelValue: {\n    type: Boolean,\n    required: true,\n  },\n  modalClass: String,\n  width: {\n    type: [String, Number],\n  },\n  zIndex: {\n    type: Number,\n  },\n} as const)\nexport type DialogProps = ExtractPropTypes<typeof dialogProps>\n\nexport const dialogEmits = {\n  open: () => true,\n  opened: () => true,\n  close: () => true,\n  closed: () => true,\n  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',\n}\nexport type DialogEmits = typeof dialogEmits\n"],"names":[],"mappings":";;;AAEY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC7D;;;;"}
+{"version":3,"file":"dialog.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\n\nimport type { ExtractPropTypes, Component } from 'vue'\n\nexport const dialogProps = buildProps({\n  appendToBody: {\n    type: Boolean,\n    default: false,\n  },\n  beforeClose: {\n    type: definePropType<(...args: any[]) => void>(Function),\n  },\n  destroyOnClose: {\n    type: Boolean,\n    default: false,\n  },\n  center: {\n    type: Boolean,\n    default: false,\n  },\n  customClass: {\n    type: String,\n    default: '',\n  },\n  closeIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  closeOnClickModal: {\n    type: Boolean,\n    default: true,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  fullscreen: {\n    type: Boolean,\n    default: false,\n  },\n  draggable: {\n    type: Boolean,\n    default: false,\n  },\n  lockScroll: {\n    type: Boolean,\n    default: true,\n  },\n  modal: {\n    type: Boolean,\n    default: true,\n  },\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  title: {\n    type: String,\n    default: '',\n  },\n  openDelay: {\n    type: Number,\n    default: 0,\n  },\n  closeDelay: {\n    type: Number,\n    default: 0,\n  },\n  top: {\n    type: String,\n  },\n  modelValue: {\n    type: Boolean,\n    required: true,\n  },\n  modalClass: String,\n  width: {\n    type: [String, Number],\n  },\n  zIndex: {\n    type: Number,\n  },\n} as const)\nexport type DialogProps = ExtractPropTypes<typeof dialogProps>\n\nexport const dialogEmits = {\n  open: () => true,\n  opened: () => true,\n  close: () => true,\n  closed: () => true,\n  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',\n}\nexport type DialogEmits = typeof dialogEmits\n"],"names":[],"mappings":";;;AAEY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC7D;;;;"}

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

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnClickModal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -33,6 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     visible: import("vue").Ref<boolean>;
     zIndex: import("vue").Ref<number>;
     dialogRef: import("vue").Ref<HTMLElement | undefined>;
+    headerRef: import("vue").Ref<HTMLElement | undefined>;
     overlayEvent: {
         onClick: (e: MouseEvent) => void;
         onMousedown: (e: MouseEvent) => void;
@@ -54,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnClickModal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -77,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     width: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    draggable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, resolveComponent, resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, toDisplayString, resolveDynamicComponent, createCommentVNode, vShow } from 'vue';
+import { defineComponent, ref, computed, resolveComponent, resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, toDisplayString, resolveDynamicComponent, createCommentVNode, vShow } from 'vue';
 import '../../../directives/index.mjs';
 import { ElOverlay } from '../../overlay/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
@@ -9,6 +9,7 @@ import { useDialog } from './use-dialog.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import TrapFocus from '../../../directives/trap-focus/index.mjs';
 import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
+import { useDraggable } from '../../../hooks/use-draggable/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElDialog",
@@ -24,17 +25,24 @@ const _sfc_main = defineComponent({
   emits: dialogEmits,
   setup(props, ctx) {
     const dialogRef = ref();
+    const headerRef = ref();
     const dialog = useDialog(props, ctx, dialogRef);
     const overlayEvent = useSameTarget(dialog.onModalClick);
+    const draggable = computed(() => props.draggable && !props.fullscreen);
+    useDraggable(dialogRef, headerRef, draggable);
     return {
       dialogRef,
+      headerRef,
       overlayEvent,
       ...dialog
     };
   }
 });
 const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = { class: "el-dialog__header" };
+const _hoisted_2 = {
+  ref: "headerRef",
+  class: "el-dialog__header"
+};
 const _hoisted_3 = { class: "el-dialog__title" };
 const _hoisted_4 = {
   key: 0,
@@ -78,6 +86,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   "el-dialog",
                   {
                     "is-fullscreen": _ctx.fullscreen,
+                    "is-draggable": _ctx.draggable,
                     "el-dialog--center": _ctx.center
                   },
                   _ctx.customClass
@@ -107,7 +116,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       _: 1
                     })
                   ])) : createCommentVNode("v-if", true)
-                ]),
+                ], 512),
                 _ctx.rendered ? (openBlock(), createElementBlock("div", _hoisted_4, [
                   renderSlot(_ctx.$slots, "default")
                 ])) : createCommentVNode("v-if", true),

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=\"el-overlay-dialog\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <div\n            ref=\"dialogRef\"\n            v-trap-focus\n            :class=\"[\n              'el-dialog',\n              {\n                'is-fullscreen': fullscreen,\n                'el-dialog--center': center,\n              },\n              customClass,\n            ]\"\n            aria-modal=\"true\"\n            role=\"dialog\"\n            :aria-label=\"title || 'dialog'\"\n            :style=\"style\"\n            @click.stop=\"\"\n          >\n            <div class=\"el-dialog__header\">\n              <slot name=\"title\">\n                <span class=\"el-dialog__title\">\n                  {{ title }}\n                </span>\n              </slot>\n              <button\n                v-if=\"showClose\"\n                aria-label=\"close\"\n                class=\"el-dialog__headerbtn\"\n                type=\"button\"\n                @click=\"handleClose\"\n              >\n                <el-icon class=\"el-dialog__close\">\n                  <component :is=\"closeIcon || 'close'\" />\n                </el-icon>\n              </button>\n            </div>\n            <template v-if=\"rendered\">\n              <div class=\"el-dialog__body\">\n                <slot></slot>\n              </div>\n            </template>\n            <div v-if=\"$slots.footer\" class=\"el-dialog__footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          </div>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport { TrapFocus } from '@element-plus/directives'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents } from '@element-plus/utils/icon'\nimport { useSameTarget } from '@element-plus/hooks'\nimport { dialogProps, dialogEmits } from './dialog'\nimport { useDialog } from './use-dialog'\n\nexport default defineComponent({\n  name: 'ElDialog',\n  components: {\n    ElOverlay,\n    ElIcon,\n    ...CloseComponents,\n  },\n  directives: {\n    TrapFocus,\n  },\n\n  props: dialogProps,\n  emits: dialogEmits,\n\n  setup(props, ctx) {\n    const dialogRef = ref<HTMLElement>()\n    const dialog = useDialog(props, ctx, dialogRef)\n    const overlayEvent = useSameTarget(dialog.onModalClick)\n\n    return {\n      dialogRef,\n      overlayEvent,\n      ...dialog,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_createVNode","_withCtx","_createElementBlock","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;;;;;;AAiFA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,OACG;AAAA;AAAA,EAEL,YAAY;AAAA,IACV;AAAA;AAAA,EAGF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,YAAY;AAClB,UAAM,SAAS,UAAU,OAAO,KAAK;AACrC,UAAM,eAAe,cAAc,OAAO;AAE1C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,SACG;AAAA;AAAA;AAAA;;qBA/Da,OAAM;;;EAiBT,KAAK;AAAA;;;EAIc,KAAK;AAAA;;;;;;SA5D5BA,aAAMC;AAAA,IAAE;AAAA;KACnB;AAAA,gBACOC,YAAa;AAAA,MACjB;AAAA,MACA,cAAa;AAAA,MACb,cAAY,KAAE;AAAA;;uBAEf;AAAA,uBAEEC,YAAiB;AAAA,UAChB,qBAAW;AAAA,UACX;AAAA,UACA,iBAAS,KAAM;AAAA;;mBAEhBC,cAkDM;AAAA,+BAjDE;AAAA,cACL,OAAK;AAAA,cACL,gBAAS,qCAAE,wBAAa,KAAW,aAAxB,QAAa;AAAA,cACxB,aAAO,uCAAE,kBAAa,eAAb,kBAAa,YAAS;AAAA;;2CAGfC;AAAA,gBAEd,KAAK;AAAA;;;0CAAiI;AAAA;;;;gBASvI,cAAa;AAAA,gBACZ;AAAA,gBACA,cAAK,cAAE;AAAA,gBACP,OAAKC;AAAA;;iBAEN;AAAA,mCAKS;AAAA,6BAHL,aAEO,SAFP,UAEO;AAAA;;;oBAIP;AAAA,oBACA,cAAM;AAAA,oBACN,OAAK;AAAA,oBACJ;AAAA;qBAED;AAAA,oDAC0C;AAAA,uCAAxC;AAAA;;;;;;8CAMWD;AAAA;sBAGNE,mBAAa;AAAA,mDACKF;AAAA;;;;;;;;cArDzB,SAAO;AAAA;;;;;;;;;;;"}
+{"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=\"el-overlay-dialog\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <div\n            ref=\"dialogRef\"\n            v-trap-focus\n            :class=\"[\n              'el-dialog',\n              {\n                'is-fullscreen': fullscreen,\n                'is-draggable': draggable,\n                'el-dialog--center': center,\n              },\n              customClass,\n            ]\"\n            aria-modal=\"true\"\n            role=\"dialog\"\n            :aria-label=\"title || 'dialog'\"\n            :style=\"style\"\n            @click.stop=\"\"\n          >\n            <div ref=\"headerRef\" class=\"el-dialog__header\">\n              <slot name=\"title\">\n                <span class=\"el-dialog__title\">\n                  {{ title }}\n                </span>\n              </slot>\n              <button\n                v-if=\"showClose\"\n                aria-label=\"close\"\n                class=\"el-dialog__headerbtn\"\n                type=\"button\"\n                @click=\"handleClose\"\n              >\n                <el-icon class=\"el-dialog__close\">\n                  <component :is=\"closeIcon || 'close'\" />\n                </el-icon>\n              </button>\n            </div>\n            <template v-if=\"rendered\">\n              <div class=\"el-dialog__body\">\n                <slot></slot>\n              </div>\n            </template>\n            <div v-if=\"$slots.footer\" class=\"el-dialog__footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          </div>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport { TrapFocus } from '@element-plus/directives'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CloseComponents } from '@element-plus/utils/icon'\nimport { useDraggable, useSameTarget } from '@element-plus/hooks'\nimport { dialogProps, dialogEmits } from './dialog'\nimport { useDialog } from './use-dialog'\n\nexport default defineComponent({\n  name: 'ElDialog',\n  components: {\n    ElOverlay,\n    ElIcon,\n    ...CloseComponents,\n  },\n  directives: {\n    TrapFocus,\n  },\n\n  props: dialogProps,\n  emits: dialogEmits,\n\n  setup(props, ctx) {\n    const dialogRef = ref<HTMLElement>()\n    const headerRef = ref<HTMLElement>()\n    const dialog = useDialog(props, ctx, dialogRef)\n    const overlayEvent = useSameTarget(dialog.onModalClick)\n\n    const draggable = computed(() => props.draggable && !props.fullscreen)\n    useDraggable(dialogRef, headerRef, draggable)\n\n    return {\n      dialogRef,\n      headerRef,\n      overlayEvent,\n      ...dialog,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_createVNode","_withCtx","_createElementBlock","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;;;;;;;AAkFA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,OACG;AAAA;AAAA,EAEL,YAAY;AAAA,IACV;AAAA;AAAA,EAGF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,YAAY;AAClB,UAAM,YAAY;AAClB,UAAM,SAAS,UAAU,OAAO,KAAK;AACrC,UAAM,eAAe,cAAc,OAAO;AAE1C,UAAM,YAAY,SAAS,MAAM,MAAM,aAAa,CAAC,MAAM;AAC3D,iBAAa,WAAW,WAAW;AAEnC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA;AAAA;AAAA;;MAtEW,aAAY;AAAA,EAAC,KAAK;AAAA;;;;EAmBnB,KAAK;AAAA;;;EAIc,KAAK;AAAA;;;;;;SA7D5BA,aAAMC;AAAA,IAAE;AAAA;KACnB;AAAA,gBACOC,YAAa;AAAA,MACjB;AAAA,MACA,cAAa;AAAA,MACb,cAAY,KAAE;AAAA;;uBAEf;AAAA,uBAEEC,YAAiB;AAAA,UAChB,qBAAW;AAAA,UACX;AAAA,UACA,iBAAS,KAAM;AAAA;;mBAEhBC,cAmDM;AAAA,+BAlDE;AAAA,cACL,OAAK;AAAA,cACL,gBAAS,qCAAE,wBAAa,KAAW,aAAxB,QAAa;AAAA,cACxB,aAAO,uCAAE,kBAAa,eAAb,kBAAa,YAAS;AAAA;;2CAGfC;AAAA,gBAEd,KAAK;AAAA;;;qCAA4H;AAAA,yCAAgD;AAAA;;;;gBAUlL,cAAa;AAAA,gBACZ;AAAA,gBACA,cAAK,cAAE;AAAA,gBACP,OAAKC;AAAA;;iBAEN;AAAA,mCAKS;AAAA,6BAHL,aAEO,SAFP,UAEO;AAAA;;;oBAIP;AAAA,oBACA,cAAM;AAAA,oBACN,OAAK;AAAA,oBACJ;AAAA;qBAED;AAAA,oDAC0C;AAAA,uCAAxC;AAAA;;;;;mBAIU;AAAA,8CAECD;AAAA;sBAGNE,mBAAa;AAAA,mDACKF;AAAA;;;;;;;;cAtDzB,SAAO;AAAA;;;;;;;;;;;"}

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

@@ -12,6 +12,7 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     readonly closeOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -70,6 +71,7 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     readonly closeOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -95,6 +97,7 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     width: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    draggable: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -13,6 +13,7 @@ export declare const drawerProps: {
     readonly closeOnClickModal: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;

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

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnClickModal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -70,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnClickModal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly closeOnPressEscape: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly fullscreen: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly draggable: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly lockScroll: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly modal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
@@ -95,6 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     width: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    draggable: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/message-box/src/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount, toRefs, resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createVNode, withModifiers, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, resolveDynamicComponent, createCommentVNode, toDisplayString, withKeys, renderSlot, vShow, createTextVNode } from 'vue';
+import { defineComponent, ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount, toRefs, resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createVNode, createElementVNode, createElementBlock, normalizeClass, normalizeStyle, withModifiers, resolveDynamicComponent, createCommentVNode, toDisplayString, withKeys, renderSlot, vShow, createTextVNode } from 'vue';
 import { ElButton } from '../../button/index.mjs';
 import '../../../directives/index.mjs';
 import '../../../hooks/index.mjs';
@@ -14,6 +14,8 @@ import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import TrapFocus from '../../../directives/trap-focus/index.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
+import { useDraggable } from '../../../hooks/use-draggable/index.mjs';
+import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
 import { useModal } from '../../../hooks/use-modal/index.mjs';
 import { usePreventGlobal } from '../../../hooks/use-prevent-global/index.mjs';
 import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
@@ -62,6 +64,7 @@ const _sfc_main = defineComponent({
       default: true
     },
     center: Boolean,
+    draggable: Boolean,
     roundButton: {
       default: false,
       type: Boolean
@@ -120,8 +123,10 @@ const _sfc_main = defineComponent({
     const btnSize = useSize(computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
     const iconComponent = computed(() => state.icon || TypeComponentsMap[state.type] || "");
     const hasMessage = computed(() => !!state.message);
-    const inputRef = ref(null);
-    const confirmRef = ref(null);
+    const rootRef = ref();
+    const headerRef = ref();
+    const inputRef = ref();
+    const confirmRef = ref();
     const confirmButtonClasses = computed(() => state.confirmButtonClass);
     watch(() => state.inputValue, async (val) => {
       await nextTick();
@@ -152,6 +157,8 @@ const _sfc_main = defineComponent({
         state.validateError = false;
       }
     });
+    const draggable = computed(() => props.draggable);
+    useDraggable(rootRef, headerRef, draggable);
     onMounted(async () => {
       await nextTick();
       if (props.closeOnHashChange) {
@@ -177,6 +184,7 @@ const _sfc_main = defineComponent({
         handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
       }
     };
+    const overlayEvent = useSameTarget(handleWrapperClick);
     const handleInputEnter = () => {
       if (state.inputType !== "textarea") {
         return handleAction("confirm");
@@ -241,12 +249,15 @@ const _sfc_main = defineComponent({
     useRestoreActive(visible);
     return {
       ...toRefs(state),
+      overlayEvent,
       visible,
       hasMessage,
       typeClass,
       btnSize,
       iconComponent,
       confirmButtonClasses,
+      rootRef,
+      headerRef,
       inputRef,
       confirmRef,
       doClose,
@@ -261,6 +272,7 @@ const _sfc_main = defineComponent({
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 0,
+  ref: "headerRef",
   class: "el-message-box__header"
 };
 const _hoisted_3 = { class: "el-message-box__title" };
@@ -283,137 +295,145 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_trap_focus = resolveDirective("trap-focus");
   return openBlock(), createBlock(Transition, {
     name: "fade-in-linear",
-    onAfterLeave: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("vanish"))
+    onAfterLeave: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("vanish"))
   }, {
     default: withCtx(() => [
       withDirectives(createVNode(_component_el_overlay, {
         "z-index": _ctx.zIndex,
         "overlay-class": ["is-message-box", _ctx.modalClass],
-        mask: _ctx.modal,
-        onClick: withModifiers(_ctx.handleWrapperClick, ["self"])
+        mask: _ctx.modal
       }, {
         default: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", {
-            ref: "root",
-            role: "dialog",
-            "aria-label": _ctx.title || "dialog",
-            "aria-modal": "true",
-            class: normalizeClass([
-              "el-message-box",
-              _ctx.customClass,
-              { "el-message-box--center": _ctx.center }
-            ]),
-            style: normalizeStyle(_ctx.customStyle)
+          createElementVNode("div", {
+            class: "el-overlay-message-box",
+            onClick: _cache[8] || (_cache[8] = (...args) => _ctx.overlayEvent.onClick && _ctx.overlayEvent.onClick(...args)),
+            onMousedown: _cache[9] || (_cache[9] = (...args) => _ctx.overlayEvent.onMousedown && _ctx.overlayEvent.onMousedown(...args)),
+            onMouseup: _cache[10] || (_cache[10] = (...args) => _ctx.overlayEvent.onMouseup && _ctx.overlayEvent.onMouseup(...args))
           }, [
-            _ctx.title !== null && _ctx.title !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                _ctx.iconComponent && _ctx.center ? (openBlock(), createBlock(_component_el_icon, {
+            withDirectives((openBlock(), createElementBlock("div", {
+              ref: "rootRef",
+              role: "dialog",
+              "aria-label": _ctx.title || "dialog",
+              "aria-modal": "true",
+              class: normalizeClass([
+                "el-message-box",
+                _ctx.customClass,
+                { "el-message-box--center": _ctx.center, "is-draggable": _ctx.draggable }
+              ]),
+              style: normalizeStyle(_ctx.customStyle),
+              onClick: _cache[7] || (_cache[7] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              _ctx.title !== null && _ctx.title !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                createElementVNode("div", _hoisted_3, [
+                  _ctx.iconComponent && _ctx.center ? (openBlock(), createBlock(_component_el_icon, {
+                    key: 0,
+                    class: normalizeClass(["el-message-box__status", _ctx.typeClass])
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : createCommentVNode("v-if", true),
+                  createElementVNode("span", null, toDisplayString(_ctx.title), 1)
+                ]),
+                _ctx.showClose ? (openBlock(), createElementBlock("button", {
                   key: 0,
-                  class: normalizeClass(["el-message-box__status", _ctx.typeClass])
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
-                  ]),
-                  _: 1
-                }, 8, ["class"])) : createCommentVNode("v-if", true),
-                createElementVNode("span", null, toDisplayString(_ctx.title), 1)
+                  type: "button",
+                  class: "el-message-box__headerbtn",
+                  "aria-label": "Close",
+                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
+                  onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
+                }, [
+                  createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_close)
+                    ]),
+                    _: 1
+                  })
+                ], 32)) : createCommentVNode("v-if", true)
+              ], 512)) : createCommentVNode("v-if", true),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, [
+                  _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (openBlock(), createBlock(_component_el_icon, {
+                    key: 0,
+                    class: normalizeClass(["el-message-box__status", _ctx.typeClass])
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : createCommentVNode("v-if", true),
+                  _ctx.hasMessage ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    renderSlot(_ctx.$slots, "default", {}, () => [
+                      !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock("p", {
+                        key: 1,
+                        innerHTML: _ctx.message
+                      }, null, 8, _hoisted_8))
+                    ])
+                  ])) : createCommentVNode("v-if", true)
+                ]),
+                withDirectives(createElementVNode("div", _hoisted_9, [
+                  createVNode(_component_el_input, {
+                    ref: "inputRef",
+                    modelValue: _ctx.inputValue,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
+                    type: _ctx.inputType,
+                    placeholder: _ctx.inputPlaceholder,
+                    class: normalizeClass({ invalid: _ctx.validateError }),
+                    onKeydown: withKeys(withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
+                  }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
+                  createElementVNode("div", {
+                    class: "el-message-box__errormsg",
+                    style: normalizeStyle({
+                      visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
+                    })
+                  }, toDisplayString(_ctx.editorErrorMessage), 5)
+                ], 512), [
+                  [vShow, _ctx.showInput]
+                ])
               ]),
-              _ctx.showClose ? (openBlock(), createElementBlock("button", {
-                key: 0,
-                type: "button",
-                class: "el-message-box__headerbtn",
-                "aria-label": "Close",
-                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
-                onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
-              }, [
-                createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+              createElementVNode("div", _hoisted_10, [
+                _ctx.showCancelButton ? (openBlock(), createBlock(_component_el_button, {
+                  key: 0,
+                  loading: _ctx.cancelButtonLoading,
+                  class: normalizeClass([_ctx.cancelButtonClass]),
+                  round: _ctx.roundButton,
+                  size: _ctx.btnSize,
+                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
+                  onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
+                }, {
                   default: withCtx(() => [
-                    createVNode(_component_close)
+                    createTextVNode(toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
                   ]),
                   _: 1
-                })
-              ], 32)) : createCommentVNode("v-if", true)
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode("div", _hoisted_4, [
-              createElementVNode("div", _hoisted_5, [
-                _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (openBlock(), createBlock(_component_el_icon, {
-                  key: 0,
-                  class: normalizeClass(["el-message-box__status", _ctx.typeClass])
+                }, 8, ["loading", "class", "round", "size"])) : createCommentVNode("v-if", true),
+                withDirectives(createVNode(_component_el_button, {
+                  ref: "confirmRef",
+                  type: "primary",
+                  loading: _ctx.confirmButtonLoading,
+                  class: normalizeClass([_ctx.confirmButtonClasses]),
+                  round: _ctx.roundButton,
+                  disabled: _ctx.confirmButtonDisabled,
+                  size: _ctx.btnSize,
+                  onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
+                  onKeydown: _cache[6] || (_cache[6] = withKeys(withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
                 }, {
                   default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+                    createTextVNode(toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
                   ]),
                   _: 1
-                }, 8, ["class"])) : createCommentVNode("v-if", true),
-                _ctx.hasMessage ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                  renderSlot(_ctx.$slots, "default", {}, () => [
-                    !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock("p", {
-                      key: 1,
-                      innerHTML: _ctx.message
-                    }, null, 8, _hoisted_8))
-                  ])
-                ])) : createCommentVNode("v-if", true)
-              ]),
-              withDirectives(createElementVNode("div", _hoisted_9, [
-                createVNode(_component_el_input, {
-                  ref: "inputRef",
-                  modelValue: _ctx.inputValue,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
-                  type: _ctx.inputType,
-                  placeholder: _ctx.inputPlaceholder,
-                  class: normalizeClass({ invalid: _ctx.validateError }),
-                  onKeydown: withKeys(withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
-                }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
-                createElementVNode("div", {
-                  class: "el-message-box__errormsg",
-                  style: normalizeStyle({
-                    visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
-                  })
-                }, toDisplayString(_ctx.editorErrorMessage), 5)
-              ], 512), [
-                [vShow, _ctx.showInput]
-              ])
-            ]),
-            createElementVNode("div", _hoisted_10, [
-              _ctx.showCancelButton ? (openBlock(), createBlock(_component_el_button, {
-                key: 0,
-                loading: _ctx.cancelButtonLoading,
-                class: normalizeClass([_ctx.cancelButtonClass]),
-                round: _ctx.roundButton,
-                size: _ctx.btnSize,
-                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
-                onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
-                ]),
-                _: 1
-              }, 8, ["loading", "class", "round", "size"])) : createCommentVNode("v-if", true),
-              withDirectives(createVNode(_component_el_button, {
-                ref: "confirmRef",
-                type: "primary",
-                loading: _ctx.confirmButtonLoading,
-                class: normalizeClass([_ctx.confirmButtonClasses]),
-                round: _ctx.roundButton,
-                disabled: _ctx.confirmButtonDisabled,
-                size: _ctx.btnSize,
-                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
-                onKeydown: _cache[6] || (_cache[6] = withKeys(withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
-                ]),
-                _: 1
-              }, 8, ["loading", "class", "round", "disabled", "size"]), [
-                [vShow, _ctx.showConfirmButton]
+                }, 8, ["loading", "class", "round", "disabled", "size"]), [
+                  [vShow, _ctx.showConfirmButton]
+                ])
               ])
+            ], 14, _hoisted_1)), [
+              [_directive_trap_focus]
             ])
-          ], 14, _hoisted_1)), [
-            [_directive_trap_focus]
-          ])
+          ], 32)
         ]),
         _: 3
-      }, 8, ["z-index", "overlay-class", "mask", "onClick"]), [
+      }, 8, ["z-index", "overlay-class", "mask"]), [
         [vShow, _ctx.visible]
       ])
     ]),