@element-plus/nightly 0.0.20220202 → 0.0.20220203

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]
       ])
     ]),

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        role=\"dialog\"\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"btnSize\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            type=\"primary\"\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"btnSize\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockscreen,\n  useLocale,\n  useRestoreActive,\n  usePreventGlobal,\n  useSize,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocale()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const btnSize = useSize(\n      computed(() => props.buttonSize),\n      { prop: true, form: true, formItem: true }\n    )\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockscreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      btnSize,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n    >\n      <div\n        class=\"el-overlay-message-box\"\n        @click=\"overlayEvent.onClick\"\n        @mousedown=\"overlayEvent.onMousedown\"\n        @mouseup=\"overlayEvent.onMouseup\"\n      >\n        <div\n          ref=\"rootRef\"\n          v-trap-focus\n          role=\"dialog\"\n          :aria-label=\"title || 'dialog'\"\n          aria-modal=\"true\"\n          :class=\"[\n            'el-message-box',\n            customClass,\n            { 'el-message-box--center': center, 'is-draggable': draggable },\n          ]\"\n          :style=\"customStyle\"\n          @click.stop=\"\"\n        >\n          <div\n            v-if=\"title !== null && title !== undefined\"\n            ref=\"headerRef\"\n            class=\"el-message-box__header\"\n          >\n            <div class=\"el-message-box__title\">\n              <el-icon\n                v-if=\"iconComponent && center\"\n                class=\"el-message-box__status\"\n                :class=\"typeClass\"\n              >\n                <component :is=\"iconComponent\" />\n              </el-icon>\n              <span>{{ title }}</span>\n            </div>\n            <button\n              v-if=\"showClose\"\n              type=\"button\"\n              class=\"el-message-box__headerbtn\"\n              aria-label=\"Close\"\n              @click=\"\n                handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n              \"\n              @keydown.prevent.enter=\"\n                handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n              \"\n            >\n              <el-icon class=\"el-message-box__close\">\n                <close />\n              </el-icon>\n            </button>\n          </div>\n          <div class=\"el-message-box__content\">\n            <div class=\"el-message-box__container\">\n              <el-icon\n                v-if=\"iconComponent && !center && hasMessage\"\n                class=\"el-message-box__status\"\n                :class=\"typeClass\"\n              >\n                <component :is=\"iconComponent\" />\n              </el-icon>\n              <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n                <slot>\n                  <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                  <p v-else v-html=\"message\"></p>\n                </slot>\n              </div>\n            </div>\n            <div v-show=\"showInput\" class=\"el-message-box__input\">\n              <el-input\n                ref=\"inputRef\"\n                v-model=\"inputValue\"\n                :type=\"inputType\"\n                :placeholder=\"inputPlaceholder\"\n                :class=\"{ invalid: validateError }\"\n                @keydown.prevent.enter=\"handleInputEnter\"\n              />\n              <div\n                class=\"el-message-box__errormsg\"\n                :style=\"{\n                  visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n                }\"\n              >\n                {{ editorErrorMessage }}\n              </div>\n            </div>\n          </div>\n          <div class=\"el-message-box__btns\">\n            <el-button\n              v-if=\"showCancelButton\"\n              :loading=\"cancelButtonLoading\"\n              :class=\"[cancelButtonClass]\"\n              :round=\"roundButton\"\n              :size=\"btnSize\"\n              @click=\"handleAction('cancel')\"\n              @keydown.prevent.enter=\"handleAction('cancel')\"\n            >\n              {{ cancelButtonText || t('el.messagebox.cancel') }}\n            </el-button>\n            <el-button\n              v-show=\"showConfirmButton\"\n              ref=\"confirmRef\"\n              type=\"primary\"\n              :loading=\"confirmButtonLoading\"\n              :class=\"[confirmButtonClasses]\"\n              :round=\"roundButton\"\n              :disabled=\"confirmButtonDisabled\"\n              :size=\"btnSize\"\n              @click=\"handleAction('confirm')\"\n              @keydown.prevent.enter=\"handleAction('confirm')\"\n            >\n              {{ confirmButtonText || t('el.messagebox.confirm') }}\n            </el-button>\n          </div>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockscreen,\n  useLocale,\n  useRestoreActive,\n  usePreventGlobal,\n  useSize,\n  useDraggable,\n  useSameTarget,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    draggable: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocale()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const btnSize = useSize(\n      computed(() => props.buttonSize),\n      { prop: true, form: true, formItem: true }\n    )\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const rootRef = ref<HTMLElement>()\n    const headerRef = ref<HTMLElement>()\n    const inputRef = ref<HTMLElement>()\n    const confirmRef = ref<HTMLElement>()\n\n    const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    const draggable = computed(() => props.draggable)\n    useDraggable(rootRef, headerRef, draggable)\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const overlayEvent = useSameTarget(handleWrapperClick)\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockscreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      overlayEvent,\n      visible,\n      hasMessage,\n      typeClass,\n      btnSize,\n      iconComponent,\n      confirmButtonClasses,\n      rootRef,\n      headerRef,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/message-box/src/index.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, PropType } from 'vue';
+import type { PropType } from 'vue';
 import type { ComponentSize } from 'element-plus/es/utils/types';
 import type { Action, MessageBoxState, MessageBoxType } from './message-box.type';
 declare const _default: import("vue").DefineComponent<{
@@ -31,6 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     center: BooleanConstructor;
+    draggable: BooleanConstructor;
     roundButton: {
         default: boolean;
         type: BooleanConstructor;
@@ -44,14 +45,21 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    overlayEvent: {
+        onClick: (e: MouseEvent) => void;
+        onMousedown: (e: MouseEvent) => void;
+        onMouseup: (e: MouseEvent) => void;
+    };
     visible: import("vue").Ref<boolean>;
     hasMessage: import("vue").ComputedRef<boolean>;
     typeClass: import("vue").ComputedRef<string>;
     btnSize: import("vue").ComputedRef<ComponentSize>;
     iconComponent: import("vue").ComputedRef<any>;
     confirmButtonClasses: import("vue").ComputedRef<string>;
-    inputRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>>;
-    confirmRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>>;
+    rootRef: import("vue").Ref<HTMLElement | undefined>;
+    headerRef: import("vue").Ref<HTMLElement | undefined>;
+    inputRef: import("vue").Ref<HTMLElement | undefined>;
+    confirmRef: import("vue").Ref<HTMLElement | undefined>;
     doClose: () => void;
     handleClose: () => void;
     handleWrapperClick: () => void;
@@ -220,7 +228,7 @@ declare const _default: import("vue").DefineComponent<{
         unmounted?: (() => void) | undefined;
         renderTracked?: ((e: import("vue").DebuggerEvent) => void) | undefined;
         renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | undefined;
-        errorCaptured?: ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | undefined;
+        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | undefined;
         delimiters?: [string, string] | undefined;
         __differentiator?: string | number | symbol | undefined;
         __isBuiltIn?: boolean | undefined;
@@ -1825,6 +1833,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     center: BooleanConstructor;
+    draggable: BooleanConstructor;
     roundButton: {
         default: boolean;
         type: BooleanConstructor;
@@ -1842,6 +1851,7 @@ declare const _default: import("vue").DefineComponent<{
     onAction?: ((...args: any[]) => any) | undefined;
 }, {
     center: boolean;
+    draggable: boolean;
     showClose: boolean;
     closeOnClickModal: boolean;
     closeOnPressEscape: boolean;

package/es/components/message-box/src/message-box.type.d.ts

@@ -65,6 +65,8 @@ export interface ElMessageBoxOptions {
     confirmButtonClass?: string;
     /** Whether to align the content in center */
     center?: boolean;
+    /** Whether MessageBox can be drag */
+    draggable?: boolean;
     /** Content of the MessageBox */
     message?: string | VNode;
     /** Title of the MessageBox */

package/es/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './use-attrs';
 export * from './use-common-props';
+export * from './use-draggable';
 export * from './use-focus';
 export * from './use-form-item';
 export * from './use-global-config';

package/es/hooks/index.mjs

@@ -1,5 +1,6 @@
 export { useAttrs } from './use-attrs/index.mjs';
 export { useDisabled, useSize, useSizeProp } from './use-common-props/index.mjs';
+export { useDraggable } from './use-draggable/index.mjs';
 export { useFocus } from './use-focus/index.mjs';
 export { useFormItem } from './use-form-item/index.mjs';
 export { provideGlobalConfig, useGlobalConfig } from './use-global-config/index.mjs';

package/es/hooks/index.mjs.map

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

package/es/hooks/use-draggable/index.d.ts

@@ -0,0 +1,2 @@
+import type { Ref, ComputedRef } from 'vue';
+export declare const useDraggable: (targetRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>, draggable: ComputedRef<boolean>) => void;

package/es/hooks/use-draggable/index.mjs

@@ -0,0 +1,65 @@
+import { onMounted, watchEffect, onBeforeUnmount } from 'vue';
+import { addUnit } from '../../utils/util.mjs';
+
+const useDraggable = (targetRef, dragRef, draggable) => {
+  let transform = {
+    offsetX: 0,
+    offsetY: 0
+  };
+  const onMousedown = (e) => {
+    const downX = e.clientX;
+    const downY = e.clientY;
+    const { offsetX, offsetY } = transform;
+    const targetRect = targetRef.value.getBoundingClientRect();
+    const targetLeft = targetRect.left;
+    const targetTop = targetRect.top;
+    const targetWidth = targetRect.width;
+    const targetHeight = targetRect.height;
+    const clientWidth = document.documentElement.clientWidth;
+    const clientHeight = document.documentElement.clientHeight;
+    const minLeft = -targetLeft + offsetX;
+    const minTop = -targetTop + offsetY;
+    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+    const maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    const onMousemove = (e2) => {
+      const moveX = Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft);
+      const moveY = Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop);
+      transform = {
+        offsetX: moveX,
+        offsetY: moveY
+      };
+      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
+    };
+    const onMouseup = () => {
+      document.removeEventListener("mousemove", onMousemove);
+      document.removeEventListener("mouseup", onMouseup);
+    };
+    document.addEventListener("mousemove", onMousemove);
+    document.addEventListener("mouseup", onMouseup);
+  };
+  const onDraggable = () => {
+    if (dragRef.value && targetRef.value) {
+      dragRef.value.addEventListener("mousedown", onMousedown);
+    }
+  };
+  const offDraggable = () => {
+    if (dragRef.value && targetRef.value) {
+      dragRef.value.removeEventListener("mousedown", onMousedown);
+    }
+  };
+  onMounted(() => {
+    watchEffect(() => {
+      if (draggable.value) {
+        onDraggable();
+      } else {
+        offDraggable();
+      }
+    });
+  });
+  onBeforeUnmount(() => {
+    offDraggable();
+  });
+};
+
+export { useDraggable };
+//# sourceMappingURL=index.mjs.map

package/es/hooks/use-draggable/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils/util'\nimport type { Ref, ComputedRef } from 'vue'\n\nexport const useDraggable = (\n  targetRef: Ref<HTMLElement | undefined>,\n  dragRef: Ref<HTMLElement | undefined>,\n  draggable: ComputedRef<boolean>\n) => {\n  let transform = {\n    offsetX: 0,\n    offsetY: 0,\n  }\n\n  const onMousedown = (e: MouseEvent) => {\n    const downX = e.clientX\n    const downY = e.clientY\n    const { offsetX, offsetY } = transform\n\n    const targetRect = targetRef.value.getBoundingClientRect()\n    const targetLeft = targetRect.left\n    const targetTop = targetRect.top\n    const targetWidth = targetRect.width\n    const targetHeight = targetRect.height\n\n    const clientWidth = document.documentElement.clientWidth\n    const clientHeight = document.documentElement.clientHeight\n\n    const minLeft = -targetLeft + offsetX\n    const minTop = -targetTop + offsetY\n    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\n    const maxTop = clientHeight - targetTop - targetHeight + offsetY\n\n    const onMousemove = (e: MouseEvent) => {\n      const moveX = Math.min(\n        Math.max(offsetX + e.clientX - downX, minLeft),\n        maxLeft\n      )\n      const moveY = Math.min(\n        Math.max(offsetY + e.clientY - downY, minTop),\n        maxTop\n      )\n\n      transform = {\n        offsetX: moveX,\n        offsetY: moveY,\n      }\n      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\n        moveY\n      )})`\n    }\n\n    const onMouseup = () => {\n      document.removeEventListener('mousemove', onMousemove)\n      document.removeEventListener('mouseup', onMouseup)\n    }\n\n    document.addEventListener('mousemove', onMousemove)\n    document.addEventListener('mouseup', onMouseup)\n  }\n\n  const onDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.addEventListener('mousedown', onMousedown)\n    }\n  }\n\n  const offDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.removeEventListener('mousedown', onMousedown)\n    }\n  }\n\n  onMounted(() => {\n    watchEffect(() => {\n      if (draggable.value) {\n        onDraggable()\n      } else {\n        offDraggable()\n      }\n    })\n  })\n\n  onBeforeUnmount(() => {\n    offDraggable()\n  })\n}\n"],"names":[],"mappings":"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"}

package/es/index.mjs

@@ -161,6 +161,7 @@ export { default as Mousewheel } from './directives/mousewheel/index.mjs';
 export { default as Resize } from './directives/resize/index.mjs';
 export { useAttrs } from './hooks/use-attrs/index.mjs';
 export { useDisabled, useSize, useSizeProp } from './hooks/use-common-props/index.mjs';
+export { useDraggable } from './hooks/use-draggable/index.mjs';
 export { useFocus } from './hooks/use-focus/index.mjs';
 export { useFormItem } from './hooks/use-form-item/index.mjs';
 export { provideGlobalConfig, useGlobalConfig } from './hooks/use-global-config/index.mjs';

package/es/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\nexport * from '@element-plus/utils/popup-manager'\nexport { makeInstaller } from './make-installer'\n\nexport const install = installer.install\nexport const version = installer.version\nexport default installer\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,MAAC,OAAO,GAAG,SAAS,CAAC,QAAQ;AAC7B,MAAC,OAAO,GAAG,SAAS,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../packages/element-plus/index.ts"],"sourcesContent":["import installer from './defaults'\nexport * from '@element-plus/components'\nexport * from '@element-plus/directives'\nexport * from '@element-plus/hooks'\nexport * from '@element-plus/tokens'\nexport * from '@element-plus/utils/popup-manager'\nexport { makeInstaller } from './make-installer'\n\nexport const install = installer.install\nexport const version = installer.version\nexport default installer\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,MAAC,OAAO,GAAG,SAAS,CAAC,QAAQ;AAC7B,MAAC,OAAO,GAAG,SAAS,CAAC;;;;"}

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20220202";
+export declare const version = "0.0.20220203";

package/es/version.mjs

@@ -1,4 +1,4 @@
-const version = "0.0.20220202";
+const version = "0.0.20220203";
 
 export { version };
 //# sourceMappingURL=version.mjs.map