element-plus 1.3.0-beta.6 → 2.0.0

package/lib/components/dialog/src/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../../../../packages/components/dialog/src/dialog.ts"],"sourcesContent":["import { isValidWidthUnit } from '@element-plus/utils/validators'\nimport { 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    validator: isValidWidthUnit,\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":["buildProps","definePropType","isValidWidthUnit","UPDATE_MODEL_EVENT"],"mappings":";;;;;;;;AAGY,MAAC,WAAW,GAAGA,gBAAU,CAAC;AACtC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEC,oBAAc,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,EAAEA,oBAAc,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,IAAI,SAAS,EAAEC,2BAAgB;AAC/B,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,CAACC,4BAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC7D;;;;;"}
+{"version":3,"file":"dialog.js","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":["buildProps","definePropType","UPDATE_MODEL_EVENT"],"mappings":";;;;;;;AAEY,MAAC,WAAW,GAAGA,gBAAU,CAAC;AACtC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEC,oBAAc,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,EAAEA,oBAAc,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,CAACC,4BAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,SAAS;AAC7D;;;;;"}

package/lib/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/lib/components/dialog/src/dialog2.js

@@ -3,26 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-require('../../../directives/click-outside/index.js');
-require('@vueuse/core');
-require('@vue/shared');
-require('lodash/isEqualWith');
-var index$2 = require('../../../directives/trap-focus/index.js');
-require('normalize-wheel-es');
+require('../../../directives/index.js');
 var index = require('../../overlay/index.js');
 var index$1 = require('../../icon/index.js');
 var icon = require('../../../utils/icon.js');
-require('lodash/fromPairs');
-require('../../../hooks/use-common-props/index.js');
-require('../../../hooks/use-global-config/index.js');
-require('lodash/get');
-require('../../../hooks/use-modal/index.js');
-require('../../../hooks/use-model-toggle/index.js');
-var index$3 = require('../../../hooks/use-same-target/index.js');
-require('../../../hooks/use-delayed-toggle/index.js');
+require('../../../hooks/index.js');
 var dialog = require('./dialog.js');
 var useDialog = require('./use-dialog.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$2 = require('../../../directives/trap-focus/index.js');
+var index$3 = require('../../../hooks/use-same-target/index.js');
+var index$4 = require('../../../hooks/use-draggable/index.js');
 
 const _sfc_main = vue.defineComponent({
   name: "ElDialog",
@@ -38,17 +29,24 @@ const _sfc_main = vue.defineComponent({
   emits: dialog.dialogEmits,
   setup(props, ctx) {
     const dialogRef = vue.ref();
+    const headerRef = vue.ref();
     const dialog = useDialog.useDialog(props, ctx, dialogRef);
     const overlayEvent = index$3.useSameTarget(dialog.onModalClick);
+    const draggable = vue.computed(() => props.draggable && !props.fullscreen);
+    index$4.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,
@@ -92,6 +90,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
@@ -121,7 +120,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       _: 1
                     })
                   ])) : vue.createCommentVNode("v-if", true)
-                ]),
+                ], 512),
                 _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ])) : vue.createCommentVNode("v-if", true),

package/lib/components/dialog/src/dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.js","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":["defineComponent","ElOverlay","ElIcon","CloseComponents","TrapFocus","dialogProps","dialogEmits","ref","useDialog","useSameTarget","_openBlock","_createBlock","_Transition","_createVNode","_withCtx","_createElementBlock","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,eACVC;AAAA,YACAC;AAAA,OACGC;AAAA;AAAA,EAEL,YAAY;AAAA,eACVC;AAAA;AAAA,EAGF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,YAAYC;AAClB,UAAM,SAASC,oBAAU,OAAO,KAAK;AACrC,UAAM,eAAeC,sBAAc,OAAO;AAE1C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,SACG;AAAA;AAAA;AAAA;;qBA/Da,OAAM;;;EAiBT,KAAK;AAAA;;;EAIc,KAAK;AAAA;;;;;;SA5D5BC,iBAAMC;AAAA,IAAE;AAAA;KACnB;AAAA,oBACOC,gBAAa;AAAA,MACjB;AAAA,MACA,cAAa;AAAA,MACb,cAAY,KAAE;AAAA;;2BAEf;AAAA,2BAEEC,gBAAiB;AAAA,UAChB,qBAAW;AAAA,UACX;AAAA,UACA,iBAAS,KAAM;AAAA;;mBAEhBC,kBAkDM;AAAA,mCAjDE;AAAA,cACL,OAAK;AAAA,cACL,gBAAS,qCAAE,wBAAa,KAAW,aAAxB,QAAa;AAAA,cACxB,aAAO,uCAAE,kBAAa,eAAb,kBAAa,YAAS;AAAA;;mDAGfC;AAAA,gBAEd,KAAK;AAAA;;;0CAAiI;AAAA;;;;gBASvI,cAAa;AAAA,gBACZ;AAAA,gBACA,cAAK,cAAE;AAAA,gBACP,OAAKC;AAAA;;iBAEN;AAAA,uCAKS;AAAA,iCAHL,aAEO,SAFP,UAEO;AAAA;;;oBAIP;AAAA,oBACA,cAAM;AAAA,oBACN,OAAK;AAAA,oBACJ;AAAA;qBAED;AAAA,wDAC0C;AAAA,2CAAxC;AAAA;;;;;;kDAMWD;AAAA;sBAGNE,uBAAa;AAAA,uDACKF;AAAA;;;;;;;;cArDzB,SAAO;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"dialog2.js","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":["defineComponent","ElOverlay","ElIcon","CloseComponents","TrapFocus","dialogProps","dialogEmits","ref","useDialog","useSameTarget","computed","_openBlock","_createBlock","_Transition","_createVNode","_withCtx","_createElementBlock","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;;;;;;;;;;;AAkFA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,eACVC;AAAA,YACAC;AAAA,OACGC;AAAA;AAAA,EAEL,YAAY;AAAA,eACVC;AAAA;AAAA,EAGF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,YAAYC;AAClB,UAAM,YAAYA;AAClB,UAAM,SAASC,oBAAU,OAAO,KAAK;AACrC,UAAM,eAAeC,sBAAc,OAAO;AAE1C,UAAM,YAAYC,aAAS,MAAM,MAAM,aAAa,CAAC,MAAM;AAC3D,yBAAa,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;;;;;;SA7D5BC,iBAAMC;AAAA,IAAE;AAAA;KACnB;AAAA,oBACOC,gBAAa;AAAA,MACjB;AAAA,MACA,cAAa;AAAA,MACb,cAAY,KAAE;AAAA;;2BAEf;AAAA,2BAEEC,gBAAiB;AAAA,UAChB,qBAAW;AAAA,UACX;AAAA,UACA,iBAAS,KAAM;AAAA;;mBAEhBC,kBAmDM;AAAA,mCAlDE;AAAA,cACL,OAAK;AAAA,cACL,gBAAS,qCAAE,wBAAa,KAAW,aAAxB,QAAa;AAAA,cACxB,aAAO,uCAAE,kBAAa,eAAb,kBAAa,YAAS;AAAA;;mDAGfC;AAAA,gBAEd,KAAK;AAAA;;;qCAA4H;AAAA,yCAAgD;AAAA;;;;gBAUlL,cAAa;AAAA,gBACZ;AAAA,gBACA,cAAK,cAAE;AAAA,gBACP,OAAKC;AAAA;;iBAEN;AAAA,uCAKS;AAAA,iCAHL,aAEO,SAFP,UAEO;AAAA;;;oBAIP;AAAA,oBACA,cAAM;AAAA,oBACN,OAAK;AAAA,oBACJ;AAAA;qBAED;AAAA,wDAC0C;AAAA,2CAAxC;AAAA;;;;;mBAIU;AAAA,kDAECD;AAAA;sBAGNE,uBAAa;AAAA,uDACKF;AAAA;;;;;;;;cAtDzB,SAAO;AAAA;;;;;;;;;;;"}

package/lib/components/dialog/src/use-dialog.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var core = require('@vueuse/core');
-require('lodash/fromPairs');
-require('../../../hooks/use-common-props/index.js');
-require('../../../hooks/use-global-config/index.js');
-require('lodash/get');
+require('../../../hooks/index.js');
+var constants = require('../../../utils/constants.js');
+var popupManager = require('../../../utils/popup-manager.js');
+var util = require('../../../utils/util.js');
 var index = require('../../../hooks/use-lockscreen/index.js');
 var index$1 = require('../../../hooks/use-modal/index.js');
-require('../../../hooks/use-model-toggle/index.js');
 var index$2 = require('../../../hooks/use-restore-active/index.js');
-require('@vue/shared');
-var util = require('../../../utils/util.js');
-require('../../../hooks/use-delayed-toggle/index.js');
-var constants = require('../../../utils/constants.js');
-var popupManager = require('../../../utils/popup-manager.js');
 
 const useDialog = (props, { emit }, targetRef) => {
   const visible = vue.ref(false);
@@ -56,6 +50,7 @@ const useDialog = (props, { emit }, targetRef) => {
     closeTimer == null ? void 0 : closeTimer();
     openTimer == null ? void 0 : openTimer();
     if (props.openDelay && props.openDelay > 0) {
+      ;
       ({ stop: openTimer } = core.useTimeoutFn(() => doOpen(), props.openDelay));
     } else {
       doOpen();
@@ -65,6 +60,7 @@ const useDialog = (props, { emit }, targetRef) => {
     openTimer == null ? void 0 : openTimer();
     closeTimer == null ? void 0 : closeTimer();
     if (props.closeDelay && props.closeDelay > 0) {
+      ;
       ({ stop: closeTimer } = core.useTimeoutFn(() => doClose(), props.closeDelay));
     } else {
       doClose();

package/lib/components/dialog/src/use-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog.js","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 { useLockscreen, useRestoreActive, useModal } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { isNumber } from '@element-plus/utils/util'\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  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 || PopupManager.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++ : PopupManager.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  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":["ref","PopupManager","computed","isNumber","UPDATE_MODEL_EVENT","useTimeoutFn","isClient","useLockscreen","useModal","useRestoreActive","watch","nextTick","onMounted"],"mappings":"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"}
+{"version":3,"file":"use-dialog.js","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 { useLockscreen, useRestoreActive, useModal } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { isNumber } from '@element-plus/utils/util'\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  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 || PopupManager.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++ : PopupManager.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  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":["ref","PopupManager","computed","isNumber","UPDATE_MODEL_EVENT","useTimeoutFn","isClient","useLockscreen","useModal","useRestoreActive","watch","nextTick","onMounted"],"mappings":"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"}

package/lib/components/dialog/style/css.js

@@ -1,5 +1,7 @@
 'use strict';
 
+require('../../base/style/css.js');
 require('element-plus/theme-chalk/el-dialog.css');
+require('../../overlay/style/css.js');
 
 //# sourceMappingURL=css.js.map

package/lib/components/dialog/style/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/lib/components/dialog/style/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+require('../../base/style/index.js');
 require('element-plus/theme-chalk/src/dialog.scss');
+require('../../overlay/style/index.js');
 
 //# sourceMappingURL=index.js.map

package/lib/components/dialog/style/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/lib/components/divider/src/divider2.js

@@ -3,19 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-require('lodash/fromPairs');
-require('../../../hooks/use-common-props/index.js');
-require('../../../hooks/use-global-config/index.js');
-require('lodash/get');
-require('@vueuse/core');
-require('@vue/shared');
-require('lodash/isEqualWith');
-require('../../../hooks/use-modal/index.js');
-require('../../../hooks/use-model-toggle/index.js');
-require('../../../hooks/use-delayed-toggle/index.js');
-var index = require('../../../hooks/use-namespace/index.js');
+require('../../../hooks/index.js');
 var divider = require('./divider.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 const _sfc_main = vue.defineComponent({
   name: "ElDivider",

package/lib/components/divider/src/divider2.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider2.js","sources":["../../../../../../packages/components/divider/src/divider.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.m(direction)]\" :style=\"dividerStyle\">\n    <div\n      v-if=\"$slots.default && direction !== 'vertical'\"\n      :class=\"[ns.e('text'), ns.is(contentPosition)]\"\n    >\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport { dividerProps } from './divider'\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDivider',\n  props: dividerProps,\n\n  setup(props) {\n    const ns = useNamespace('divider')\n\n    const dividerStyle = computed(() => {\n      return {\n        '--el-border-style': props.borderStyle,\n      } as CSSProperties\n    })\n\n    return {\n      ns,\n      dividerStyle,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","dividerProps","useNamespace","computed","_openBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAKC,mBAAa;AAExB,UAAM,eAAeC,aAAS,MAAM;AAClC,aAAO;AAAA,QACL,qBAAqB,MAAM;AAAA;AAAA;AAI/B,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;2BAhCJ,wBAOM;SAPKC,wCAAW,OAAK;AAAA,IAAc,OAAKC,mBAAE,mBAAY;AAAA;KAElD;AAAA,2BADR,mBAKM;MAHH,KAAK;AAAA;OAEN;AAAA;;;;;;;;"}
+{"version":3,"file":"divider2.js","sources":["../../../../../../packages/components/divider/src/divider.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.m(direction)]\" :style=\"dividerStyle\">\n    <div\n      v-if=\"$slots.default && direction !== 'vertical'\"\n      :class=\"[ns.e('text'), ns.is(contentPosition)]\"\n    >\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport { dividerProps } from './divider'\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDivider',\n  props: dividerProps,\n\n  setup(props) {\n    const ns = useNamespace('divider')\n\n    const dividerStyle = computed(() => {\n      return {\n        '--el-border-style': props.borderStyle,\n      } as CSSProperties\n    })\n\n    return {\n      ns,\n      dividerStyle,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","dividerProps","useNamespace","computed","_openBlock","_normalizeClass"],"mappings":";;;;;;;;;;AAkBA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAKC,mBAAa;AAExB,UAAM,eAAeC,aAAS,MAAM;AAClC,aAAO;AAAA,QACL,qBAAqB,MAAM;AAAA;AAAA;AAI/B,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;2BAhCJ,wBAOM;SAPKC,wCAAW,OAAK;AAAA,IAAc,OAAKC,mBAAE,mBAAY;AAAA;KAElD;AAAA,2BADR,mBAKM;MAHH,KAAK;AAAA;OAEN;AAAA;;;;;;;;"}

package/lib/components/divider/style/css.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('../../base/style/css.js');
 require('element-plus/theme-chalk/el-divider.css');
 
 //# sourceMappingURL=css.js.map

package/lib/components/divider/style/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/lib/components/divider/style/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('../../base/style/index.js');
 require('element-plus/theme-chalk/src/divider.scss');
 
 //# sourceMappingURL=index.js.map

package/lib/components/divider/style/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/lib/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>;
@@ -27,6 +28,17 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     drawerRef: import("vue").Ref<HTMLElement | undefined>;
     isHorizontal: import("vue").ComputedRef<boolean>;
     drawerSize: import("vue").ComputedRef<string>;
+    ns: {
+        namespace: import("vue").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;
+    };
     afterEnter: () => void;
     afterLeave: () => void;
     beforeLeave: () => void;
@@ -59,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>;
@@ -84,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/lib/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/lib/components/drawer/src/drawer.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var props = require('../../../utils/props.js');
+require('../../dialog/index.js');
 var dialog = require('../../dialog/src/dialog.js');
 
 const drawerProps = props.buildProps({

package/lib/components/drawer/src/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport { dialogProps, dialogEmits } from '@element-plus/components/dialog'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n  ...dialogProps,\n  direction: {\n    type: String,\n    default: 'rtl',\n    values: ['ltr', 'rtl', 'ttb', 'btt'],\n  },\n  size: {\n    type: [String, Number],\n    default: '30%',\n  },\n  withHeader: {\n    type: Boolean,\n    default: true,\n  },\n  modalFade: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\n\nexport const drawerEmits = dialogEmits\n"],"names":["buildProps","dialogProps","dialogEmits"],"mappings":";;;;;;;AAEY,MAAC,WAAW,GAAGA,gBAAU,CAAC;AACtC,EAAE,GAAGC,kBAAW;AAChB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACxC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,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,CAAC,EAAE;AACS,MAAC,WAAW,GAAGC;;;;;"}
+{"version":3,"file":"drawer.js","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport { dialogProps, dialogEmits } from '@element-plus/components/dialog'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n  ...dialogProps,\n  direction: {\n    type: String,\n    default: 'rtl',\n    values: ['ltr', 'rtl', 'ttb', 'btt'],\n  },\n  size: {\n    type: [String, Number],\n    default: '30%',\n  },\n  withHeader: {\n    type: Boolean,\n    default: true,\n  },\n  modalFade: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\n\nexport const drawerEmits = dialogEmits\n"],"names":["buildProps","dialogProps","dialogEmits"],"mappings":";;;;;;;;AAEY,MAAC,WAAW,GAAGA,gBAAU,CAAC;AACtC,EAAE,GAAGC,kBAAW;AAChB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACxC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,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,CAAC,EAAE;AACS,MAAC,WAAW,GAAGC;;;;;"}

package/lib/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>;
@@ -27,6 +28,17 @@ declare const _default: import("vue").DefineComponent<{
     drawerRef: import("vue").Ref<HTMLElement | undefined>;
     isHorizontal: import("vue").ComputedRef<boolean>;
     drawerSize: import("vue").ComputedRef<string>;
+    ns: {
+        namespace: import("vue").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;
+    };
     afterEnter: () => void;
     afterLeave: () => void;
     beforeLeave: () => void;
@@ -59,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>;
@@ -84,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/lib/components/drawer/src/drawer2.js

@@ -5,15 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var iconsVue = require('@element-plus/icons-vue');
 var index = require('../../overlay/index.js');
+require('../../dialog/index.js');
 var index$1 = require('../../icon/index.js');
-require('../../../directives/click-outside/index.js');
-require('@vueuse/core');
-require('@vue/shared');
-require('lodash/isEqualWith');
-var index$2 = require('../../../directives/trap-focus/index.js');
-require('normalize-wheel-es');
+require('../../../directives/index.js');
+require('../../../hooks/index.js');
 var drawer = require('./drawer.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$2 = require('../../../directives/trap-focus/index.js');
+var index$3 = require('../../../hooks/use-namespace/index.js');
 var useDialog = require('../../dialog/src/use-dialog.js');
 
 const _sfc_main = vue.defineComponent({
@@ -30,32 +29,22 @@ const _sfc_main = vue.defineComponent({
   emits: drawer.drawerEmits,
   setup(props, ctx) {
     const drawerRef = vue.ref();
+    const ns = index$3.useNamespace("drawer");
     const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
     const drawerSize = vue.computed(() => typeof props.size === "number" ? `${props.size}px` : props.size);
     return {
       ...useDialog.useDialog(props, ctx, drawerRef),
       drawerRef,
       isHorizontal,
-      drawerSize
+      drawerSize,
+      ns
     };
   }
 });
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
-  key: 0,
-  id: "el-drawer__title",
-  class: "el-drawer__header"
-};
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = ["id"];
 const _hoisted_3 = ["title"];
 const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = {
-  key: 1,
-  class: "el-drawer__body"
-};
-const _hoisted_6 = {
-  key: 2,
-  class: "el-drawer__footer"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_close = vue.resolveComponent("close");
   const _component_el_icon = vue.resolveComponent("el-icon");
@@ -66,7 +55,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: !_ctx.appendToBody
   }, [
     vue.createVNode(vue.Transition, {
-      name: "el-drawer-fade",
+      name: _ctx.ns.b("fade"),
       onAfterEnter: _ctx.afterEnter,
       onAfterLeave: _ctx.afterLeave,
       onBeforeLeave: _ctx.beforeLeave
@@ -82,15 +71,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
               ref: "drawerRef",
               "aria-modal": "true",
-              "aria-labelledby": "el-drawer__title",
+              "aria-labelledby": _ctx.ns.e("title"),
               "aria-label": _ctx.title,
-              class: vue.normalizeClass(["el-drawer", _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
+              class: vue.normalizeClass([_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
               style: vue.normalizeStyle(_ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize),
               role: "dialog",
               onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
               }, ["stop"]))
             }, [
-              _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2, [
+              _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
+                key: 0,
+                id: _ctx.ns.e("title"),
+                class: vue.normalizeClass(_ctx.ns.e("header"))
+              }, [
                 vue.renderSlot(_ctx.$slots, "title", {}, () => [
                   vue.createElementVNode("span", {
                     role: "heading",
@@ -100,24 +93,32 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
                   "aria-label": "close " + (_ctx.title || "drawer"),
-                  class: "el-drawer__close-btn",
+                  class: vue.normalizeClass(_ctx.ns.e("close-btn")),
                   type: "button",
                   onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
                 }, [
-                  vue.createVNode(_component_el_icon, { class: "el-drawer__close" }, {
+                  vue.createVNode(_component_el_icon, {
+                    class: vue.normalizeClass(_ctx.ns.e("close"))
+                  }, {
                     default: vue.withCtx(() => [
                       vue.createVNode(_component_close)
                     ]),
                     _: 1
-                  })
-                ], 8, _hoisted_4)) : vue.createCommentVNode("v-if", true)
-              ])) : vue.createCommentVNode("v-if", true),
-              _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_5, [
+                  }, 8, ["class"])
+                ], 10, _hoisted_4)) : vue.createCommentVNode("v-if", true)
+              ], 10, _hoisted_2)) : vue.createCommentVNode("v-if", true),
+              _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", {
+                key: 1,
+                class: vue.normalizeClass(_ctx.ns.e("body"))
+              }, [
                 vue.renderSlot(_ctx.$slots, "default")
-              ])) : vue.createCommentVNode("v-if", true),
-              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+              ], 2)) : vue.createCommentVNode("v-if", true),
+              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 2,
+                class: vue.normalizeClass(_ctx.ns.e("footer"))
+              }, [
                 vue.renderSlot(_ctx.$slots, "footer")
-              ])) : vue.createCommentVNode("v-if", true)
+              ], 2)) : vue.createCommentVNode("v-if", true)
             ], 14, _hoisted_1)), [
               [_directive_trap_focus]
             ])
@@ -128,7 +129,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ]),
       _: 3
-    }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+    }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
   ], 8, ["disabled"]);
 }
 var Drawer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);