@element-plus/nightly 0.0.20220202 → 0.0.20220203

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220202 */
+/*! Element Plus v0.0.20220203 */
 
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -3019,6 +3019,66 @@
 	  return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false);
 	};
 
+	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);
+	    }
+	  };
+	  vue.onMounted(() => {
+	    vue.watchEffect(() => {
+	      if (draggable.value) {
+	        onDraggable();
+	      } else {
+	        offDraggable();
+	      }
+	    });
+	  });
+	  vue.onBeforeUnmount(() => {
+	    offDraggable();
+	  });
+	};
+
 	const useFocus = (el) => {
 	  return {
 	    focus: () => {
@@ -4544,7 +4604,7 @@
 	  });
 	}
 
-	const version$1 = "0.0.20220202";
+	const version$1 = "0.0.20220203";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -22480,6 +22540,10 @@
 	    type: Boolean,
 	    default: false
 	  },
+	  draggable: {
+	    type: Boolean,
+	    default: false
+	  },
 	  lockScroll: {
 	    type: Boolean,
 	    default: true
@@ -22670,17 +22734,24 @@
 	  emits: dialogEmits,
 	  setup(props, ctx) {
 	    const dialogRef = vue.ref();
+	    const headerRef = vue.ref();
 	    const dialog = useDialog(props, ctx, dialogRef);
 	    const overlayEvent = useSameTarget(dialog.onModalClick);
+	    const draggable = vue.computed(() => props.draggable && !props.fullscreen);
+	    useDraggable(dialogRef, headerRef, draggable);
 	    return {
 	      dialogRef,
+	      headerRef,
 	      overlayEvent,
 	      ...dialog
 	    };
 	  }
 	});
 	const _hoisted_1$I = ["aria-label"];
-	const _hoisted_2$u = { class: "el-dialog__header" };
+	const _hoisted_2$u = {
+	  ref: "headerRef",
+	  class: "el-dialog__header"
+	};
 	const _hoisted_3$l = { class: "el-dialog__title" };
 	const _hoisted_4$c = {
 	  key: 0,
@@ -22724,6 +22795,7 @@
 	                  "el-dialog",
 	                  {
 	                    "is-fullscreen": _ctx.fullscreen,
+	                    "is-draggable": _ctx.draggable,
 	                    "el-dialog--center": _ctx.center
 	                  },
 	                  _ctx.customClass
@@ -22753,7 +22825,7 @@
 	                      _: 1
 	                    })
 	                  ])) : vue.createCommentVNode("v-if", true)
-	                ]),
+	                ], 512),
 	                _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
 	                  vue.renderSlot(_ctx.$slots, "default")
 	                ])) : vue.createCommentVNode("v-if", true),
@@ -47428,6 +47500,7 @@
 	      default: true
 	    },
 	    center: Boolean,
+	    draggable: Boolean,
 	    roundButton: {
 	      default: false,
 	      type: Boolean
@@ -47486,8 +47559,10 @@
 	    const btnSize = useSize(vue.computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
 	    const iconComponent = vue.computed(() => state.icon || TypeComponentsMap[state.type] || "");
 	    const hasMessage = vue.computed(() => !!state.message);
-	    const inputRef = vue.ref(null);
-	    const confirmRef = vue.ref(null);
+	    const rootRef = vue.ref();
+	    const headerRef = vue.ref();
+	    const inputRef = vue.ref();
+	    const confirmRef = vue.ref();
 	    const confirmButtonClasses = vue.computed(() => state.confirmButtonClass);
 	    vue.watch(() => state.inputValue, async (val) => {
 	      await vue.nextTick();
@@ -47518,6 +47593,8 @@
 	        state.validateError = false;
 	      }
 	    });
+	    const draggable = vue.computed(() => props.draggable);
+	    useDraggable(rootRef, headerRef, draggable);
 	    vue.onMounted(async () => {
 	      await vue.nextTick();
 	      if (props.closeOnHashChange) {
@@ -47543,6 +47620,7 @@
 	        handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
 	      }
 	    };
+	    const overlayEvent = useSameTarget(handleWrapperClick);
 	    const handleInputEnter = () => {
 	      if (state.inputType !== "textarea") {
 	        return handleAction("confirm");
@@ -47607,12 +47685,15 @@
 	    useRestoreActive(visible);
 	    return {
 	      ...vue.toRefs(state),
+	      overlayEvent,
 	      visible,
 	      hasMessage,
 	      typeClass,
 	      btnSize,
 	      iconComponent,
 	      confirmButtonClasses,
+	      rootRef,
+	      headerRef,
 	      inputRef,
 	      confirmRef,
 	      doClose,
@@ -47627,6 +47708,7 @@
 	const _hoisted_1$1 = ["aria-label"];
 	const _hoisted_2$1 = {
 	  key: 0,
+	  ref: "headerRef",
 	  class: "el-message-box__header"
 	};
 	const _hoisted_3$1 = { class: "el-message-box__title" };
@@ -47649,137 +47731,145 @@
 	  const _directive_trap_focus = vue.resolveDirective("trap-focus");
 	  return vue.openBlock(), vue.createBlock(vue.Transition, {
 	    name: "fade-in-linear",
-	    onAfterLeave: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("vanish"))
+	    onAfterLeave: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("vanish"))
 	  }, {
 	    default: vue.withCtx(() => [
 	      vue.withDirectives(vue.createVNode(_component_el_overlay, {
 	        "z-index": _ctx.zIndex,
 	        "overlay-class": ["is-message-box", _ctx.modalClass],
-	        mask: _ctx.modal,
-	        onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
+	        mask: _ctx.modal
 	      }, {
 	        default: vue.withCtx(() => [
-	          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-	            ref: "root",
-	            role: "dialog",
-	            "aria-label": _ctx.title || "dialog",
-	            "aria-modal": "true",
-	            class: vue.normalizeClass([
-	              "el-message-box",
-	              _ctx.customClass,
-	              { "el-message-box--center": _ctx.center }
-	            ]),
-	            style: vue.normalizeStyle(_ctx.customStyle)
+	          vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
-	              vue.createElementVNode("div", _hoisted_3$1, [
-	                _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+	            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+	              ref: "rootRef",
+	              role: "dialog",
+	              "aria-label": _ctx.title || "dialog",
+	              "aria-modal": "true",
+	              class: vue.normalizeClass([
+	                "el-message-box",
+	                _ctx.customClass,
+	                { "el-message-box--center": _ctx.center, "is-draggable": _ctx.draggable }
+	              ]),
+	              style: vue.normalizeStyle(_ctx.customStyle),
+	              onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => {
+	              }, ["stop"]))
+	            }, [
+	              _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+	                vue.createElementVNode("div", _hoisted_3$1, [
+	                  _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+	                    key: 0,
+	                    class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+	                  }, {
+	                    default: vue.withCtx(() => [
+	                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+	                    ]),
+	                    _: 1
+	                  }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+	                  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+	                ]),
+	                _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
 	                  key: 0,
-	                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
-	                }, {
-	                  default: vue.withCtx(() => [
-	                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
-	                  ]),
-	                  _: 1
-	                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-	                vue.createElementVNode("span", null, vue.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] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
+	                }, [
+	                  vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+	                    default: vue.withCtx(() => [
+	                      vue.createVNode(_component_close)
+	                    ]),
+	                    _: 1
+	                  })
+	                ], 32)) : vue.createCommentVNode("v-if", true)
+	              ], 512)) : vue.createCommentVNode("v-if", true),
+	              vue.createElementVNode("div", _hoisted_4$1, [
+	                vue.createElementVNode("div", _hoisted_5$1, [
+	                  _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+	                    key: 0,
+	                    class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+	                  }, {
+	                    default: vue.withCtx(() => [
+	                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+	                    ]),
+	                    _: 1
+	                  }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+	                  _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+	                    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+	                      !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", {
+	                        key: 1,
+	                        innerHTML: _ctx.message
+	                      }, null, 8, _hoisted_8))
+	                    ])
+	                  ])) : vue.createCommentVNode("v-if", true)
+	                ]),
+	                vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
+	                  vue.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: vue.normalizeClass({ invalid: _ctx.validateError }),
+	                    onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
+	                  }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
+	                  vue.createElementVNode("div", {
+	                    class: "el-message-box__errormsg",
+	                    style: vue.normalizeStyle({
+	                      visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
+	                    })
+	                  }, vue.toDisplayString(_ctx.editorErrorMessage), 5)
+	                ], 512), [
+	                  [vue.vShow, _ctx.showInput]
+	                ])
 	              ]),
-	              _ctx.showClose ? (vue.openBlock(), vue.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] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
-	              }, [
-	                vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+	              vue.createElementVNode("div", _hoisted_10, [
+	                _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+	                  key: 0,
+	                  loading: _ctx.cancelButtonLoading,
+	                  class: vue.normalizeClass([_ctx.cancelButtonClass]),
+	                  round: _ctx.roundButton,
+	                  size: _ctx.btnSize,
+	                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
+	                  onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
+	                }, {
 	                  default: vue.withCtx(() => [
-	                    vue.createVNode(_component_close)
+	                    vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
 	                  ]),
 	                  _: 1
-	                })
-	              ], 32)) : vue.createCommentVNode("v-if", true)
-	            ])) : vue.createCommentVNode("v-if", true),
-	            vue.createElementVNode("div", _hoisted_4$1, [
-	              vue.createElementVNode("div", _hoisted_5$1, [
-	                _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-	                  key: 0,
-	                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+	                }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
+	                vue.withDirectives(vue.createVNode(_component_el_button, {
+	                  ref: "confirmRef",
+	                  type: "primary",
+	                  loading: _ctx.confirmButtonLoading,
+	                  class: vue.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] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
 	                }, {
 	                  default: vue.withCtx(() => [
-	                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+	                    vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
 	                  ]),
 	                  _: 1
-	                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-	                _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-	                  vue.renderSlot(_ctx.$slots, "default", {}, () => [
-	                    !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", {
-	                      key: 1,
-	                      innerHTML: _ctx.message
-	                    }, null, 8, _hoisted_8))
-	                  ])
-	                ])) : vue.createCommentVNode("v-if", true)
-	              ]),
-	              vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
-	                vue.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: vue.normalizeClass({ invalid: _ctx.validateError }),
-	                  onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
-	                }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
-	                vue.createElementVNode("div", {
-	                  class: "el-message-box__errormsg",
-	                  style: vue.normalizeStyle({
-	                    visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
-	                  })
-	                }, vue.toDisplayString(_ctx.editorErrorMessage), 5)
-	              ], 512), [
-	                [vue.vShow, _ctx.showInput]
-	              ])
-	            ]),
-	            vue.createElementVNode("div", _hoisted_10, [
-	              _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-	                key: 0,
-	                loading: _ctx.cancelButtonLoading,
-	                class: vue.normalizeClass([_ctx.cancelButtonClass]),
-	                round: _ctx.roundButton,
-	                size: _ctx.btnSize,
-	                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
-	                onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
-	              }, {
-	                default: vue.withCtx(() => [
-	                  vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
-	                ]),
-	                _: 1
-	              }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
-	              vue.withDirectives(vue.createVNode(_component_el_button, {
-	                ref: "confirmRef",
-	                type: "primary",
-	                loading: _ctx.confirmButtonLoading,
-	                class: vue.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] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
-	              }, {
-	                default: vue.withCtx(() => [
-	                  vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
-	                ]),
-	                _: 1
-	              }, 8, ["loading", "class", "round", "disabled", "size"]), [
-	                [vue.vShow, _ctx.showConfirmButton]
+	                }, 8, ["loading", "class", "round", "disabled", "size"]), [
+	                  [vue.vShow, _ctx.showConfirmButton]
+	                ])
 	              ])
+	            ], 14, _hoisted_1$1)), [
+	              [_directive_trap_focus]
 	            ])
-	          ], 14, _hoisted_1$1)), [
-	            [_directive_trap_focus]
-	          ])
+	          ], 32)
 	        ]),
 	        _: 3
-	      }, 8, ["z-index", "overlay-class", "mask", "onClick"]), [
+	      }, 8, ["z-index", "overlay-class", "mask"]), [
 	        [vue.vShow, _ctx.visible]
 	      ])
 	    ]),
@@ -48515,6 +48605,7 @@
 	exports.useDelayedToggleProps = useDelayedToggleProps;
 	exports.useDialog = useDialog;
 	exports.useDisabled = useDisabled$1;
+	exports.useDraggable = useDraggable;
 	exports.useEscapeKeydown = useEscapeKeydown;
 	exports.useFocus = useFocus;
 	exports.useFormItem = useFormItem;