@element-plus/nightly 0.0.20220130 → 0.0.20220203

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220130 */
+/*! 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.20220130";
+	const version$1 = "0.0.20220203";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -4791,7 +4851,7 @@
 	const _sfc_main$2K = vue.defineComponent({
 	  name: "ArrowDown"
 	});
-	const _hoisted_1$1P = {
+	const _hoisted_1$1O = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4806,14 +4866,14 @@
 	  _hoisted_2$1s
 	];
 	function _sfc_render$2F(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1P, _hoisted_3$1c);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1c);
 	}
 	var arrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$2K, [["render", _sfc_render$2F]]);
 
 	const _sfc_main$2J = vue.defineComponent({
 	  name: "ArrowLeft"
 	});
-	const _hoisted_1$1O = {
+	const _hoisted_1$1N = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4828,14 +4888,14 @@
 	  _hoisted_2$1r
 	];
 	function _sfc_render$2E(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1b);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$1b);
 	}
 	var arrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2J, [["render", _sfc_render$2E]]);
 
 	const _sfc_main$2I = vue.defineComponent({
 	  name: "ArrowRight"
 	});
-	const _hoisted_1$1N = {
+	const _hoisted_1$1M = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4850,14 +4910,14 @@
 	  _hoisted_2$1q
 	];
 	function _sfc_render$2D(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$1a);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_3$1a);
 	}
 	var arrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2I, [["render", _sfc_render$2D]]);
 
 	const _sfc_main$2H = vue.defineComponent({
 	  name: "ArrowUp"
 	});
-	const _hoisted_1$1M = {
+	const _hoisted_1$1L = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4872,14 +4932,14 @@
 	  _hoisted_2$1p
 	];
 	function _sfc_render$2C(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_3$19);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_3$19);
 	}
 	var arrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$2H, [["render", _sfc_render$2C]]);
 
 	const _sfc_main$2G = vue.defineComponent({
 	  name: "Back"
 	});
-	const _hoisted_1$1L = {
+	const _hoisted_1$1K = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4899,14 +4959,14 @@
 	  _hoisted_3$18
 	];
 	function _sfc_render$2B(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_4$q);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_4$q);
 	}
 	var back = /* @__PURE__ */ _export_sfc(_sfc_main$2G, [["render", _sfc_render$2B]]);
 
 	const _sfc_main$2F = vue.defineComponent({
 	  name: "Calendar"
 	});
-	const _hoisted_1$1K = {
+	const _hoisted_1$1J = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4921,14 +4981,14 @@
 	  _hoisted_2$1n
 	];
 	function _sfc_render$2A(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_3$17);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$17);
 	}
 	var calendar = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["render", _sfc_render$2A]]);
 
 	const _sfc_main$2E = vue.defineComponent({
 	  name: "CaretRight"
 	});
-	const _hoisted_1$1J = {
+	const _hoisted_1$1I = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4943,14 +5003,14 @@
 	  _hoisted_2$1m
 	];
 	function _sfc_render$2z(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$16);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$16);
 	}
 	var caretRight = /* @__PURE__ */ _export_sfc(_sfc_main$2E, [["render", _sfc_render$2z]]);
 
 	const _sfc_main$2D = vue.defineComponent({
 	  name: "CaretTop"
 	});
-	const _hoisted_1$1I = {
+	const _hoisted_1$1H = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4965,14 +5025,14 @@
 	  _hoisted_2$1l
 	];
 	function _sfc_render$2y(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$15);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$15);
 	}
 	var caretTop = /* @__PURE__ */ _export_sfc(_sfc_main$2D, [["render", _sfc_render$2y]]);
 
 	const _sfc_main$2C = vue.defineComponent({
 	  name: "Check"
 	});
-	const _hoisted_1$1H = {
+	const _hoisted_1$1G = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -4987,14 +5047,14 @@
 	  _hoisted_2$1k
 	];
 	function _sfc_render$2x(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$14);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$14);
 	}
 	var check = /* @__PURE__ */ _export_sfc(_sfc_main$2C, [["render", _sfc_render$2x]]);
 
 	const _sfc_main$2B = vue.defineComponent({
 	  name: "CircleCheckFilled"
 	});
-	const _hoisted_1$1G = {
+	const _hoisted_1$1F = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5009,14 +5069,14 @@
 	  _hoisted_2$1j
 	];
 	function _sfc_render$2w(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$13);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$13);
 	}
 	var circleCheckFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2B, [["render", _sfc_render$2w]]);
 
 	const _sfc_main$2A = vue.defineComponent({
 	  name: "CircleCheck"
 	});
-	const _hoisted_1$1F = {
+	const _hoisted_1$1E = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5036,14 +5096,14 @@
 	  _hoisted_3$12
 	];
 	function _sfc_render$2v(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_4$p);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_4$p);
 	}
 	var circleCheck = /* @__PURE__ */ _export_sfc(_sfc_main$2A, [["render", _sfc_render$2v]]);
 
 	const _sfc_main$2z = vue.defineComponent({
 	  name: "CircleCloseFilled"
 	});
-	const _hoisted_1$1E = {
+	const _hoisted_1$1D = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5058,14 +5118,14 @@
 	  _hoisted_2$1h
 	];
 	function _sfc_render$2u(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_3$11);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$11);
 	}
 	var circleCloseFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2z, [["render", _sfc_render$2u]]);
 
 	const _sfc_main$2y = vue.defineComponent({
 	  name: "CircleClose"
 	});
-	const _hoisted_1$1D = {
+	const _hoisted_1$1C = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5085,14 +5145,14 @@
 	  _hoisted_3$10
 	];
 	function _sfc_render$2t(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_4$o);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_4$o);
 	}
 	var circleClose = /* @__PURE__ */ _export_sfc(_sfc_main$2y, [["render", _sfc_render$2t]]);
 
 	const _sfc_main$2x = vue.defineComponent({
 	  name: "Clock"
 	});
-	const _hoisted_1$1C = {
+	const _hoisted_1$1B = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5117,14 +5177,14 @@
 	  _hoisted_4$n
 	];
 	function _sfc_render$2s(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_5$e);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_5$e);
 	}
 	var clock = /* @__PURE__ */ _export_sfc(_sfc_main$2x, [["render", _sfc_render$2s]]);
 
 	const _sfc_main$2w = vue.defineComponent({
 	  name: "Close"
 	});
-	const _hoisted_1$1B = {
+	const _hoisted_1$1A = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5139,14 +5199,14 @@
 	  _hoisted_2$1e
 	];
 	function _sfc_render$2r(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$_);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$_);
 	}
 	var close$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2w, [["render", _sfc_render$2r]]);
 
 	const _sfc_main$2v = vue.defineComponent({
 	  name: "DArrowLeft"
 	});
-	const _hoisted_1$1A = {
+	const _hoisted_1$1z = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5161,14 +5221,14 @@
 	  _hoisted_2$1d
 	];
 	function _sfc_render$2q(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$Z);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$Z);
 	}
 	var dArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2v, [["render", _sfc_render$2q]]);
 
 	const _sfc_main$2u = vue.defineComponent({
 	  name: "DArrowRight"
 	});
-	const _hoisted_1$1z = {
+	const _hoisted_1$1y = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5183,14 +5243,14 @@
 	  _hoisted_2$1c
 	];
 	function _sfc_render$2p(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$Y);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$Y);
 	}
 	var dArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["render", _sfc_render$2p]]);
 
 	const _sfc_main$2t = vue.defineComponent({
 	  name: "Delete"
 	});
-	const _hoisted_1$1y = {
+	const _hoisted_1$1x = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5205,14 +5265,14 @@
 	  _hoisted_2$1b
 	];
 	function _sfc_render$2o(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$X);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$X);
 	}
 	var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["render", _sfc_render$2o]]);
 
 	const _sfc_main$2s = vue.defineComponent({
 	  name: "Document"
 	});
-	const _hoisted_1$1x = {
+	const _hoisted_1$1w = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5227,14 +5287,14 @@
 	  _hoisted_2$1a
 	];
 	function _sfc_render$2n(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$W);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$W);
 	}
 	var document$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["render", _sfc_render$2n]]);
 
 	const _sfc_main$2r = vue.defineComponent({
 	  name: "FullScreen"
 	});
-	const _hoisted_1$1w = {
+	const _hoisted_1$1v = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5249,14 +5309,14 @@
 	  _hoisted_2$19
 	];
 	function _sfc_render$2m(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$V);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$V);
 	}
 	var fullScreen = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["render", _sfc_render$2m]]);
 
 	const _sfc_main$2q = vue.defineComponent({
 	  name: "InfoFilled"
 	});
-	const _hoisted_1$1v = {
+	const _hoisted_1$1u = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5271,14 +5331,14 @@
 	  _hoisted_2$18
 	];
 	function _sfc_render$2l(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$U);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$U);
 	}
 	var infoFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["render", _sfc_render$2l]]);
 
 	const _sfc_main$2p = vue.defineComponent({
 	  name: "Loading"
 	});
-	const _hoisted_1$1u = {
+	const _hoisted_1$1t = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5293,14 +5353,14 @@
 	  _hoisted_2$17
 	];
 	function _sfc_render$2k(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$T);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$T);
 	}
 	var loading = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["render", _sfc_render$2k]]);
 
 	const _sfc_main$2o = vue.defineComponent({
 	  name: "Minus"
 	});
-	const _hoisted_1$1t = {
+	const _hoisted_1$1s = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5315,14 +5375,14 @@
 	  _hoisted_2$16
 	];
 	function _sfc_render$2j(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$S);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$S);
 	}
 	var minus = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["render", _sfc_render$2j]]);
 
 	const _sfc_main$2n = vue.defineComponent({
 	  name: "MoreFilled"
 	});
-	const _hoisted_1$1s = {
+	const _hoisted_1$1r = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5337,14 +5397,14 @@
 	  _hoisted_2$15
 	];
 	function _sfc_render$2i(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$R);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$R);
 	}
 	var moreFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$2i]]);
 
 	const _sfc_main$2m = vue.defineComponent({
 	  name: "More"
 	});
-	const _hoisted_1$1r = {
+	const _hoisted_1$1q = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5359,14 +5419,14 @@
 	  _hoisted_2$14
 	];
 	function _sfc_render$2h(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$Q);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$Q);
 	}
 	var more = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["render", _sfc_render$2h]]);
 
 	const _sfc_main$2l = vue.defineComponent({
 	  name: "Plus"
 	});
-	const _hoisted_1$1q = {
+	const _hoisted_1$1p = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5381,14 +5441,14 @@
 	  _hoisted_2$13
 	];
 	function _sfc_render$2g(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$P);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$P);
 	}
 	var plus = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["render", _sfc_render$2g]]);
 
 	const _sfc_main$2k = vue.defineComponent({
 	  name: "QuestionFilled"
 	});
-	const _hoisted_1$1p = {
+	const _hoisted_1$1o = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5403,14 +5463,14 @@
 	  _hoisted_2$12
 	];
 	function _sfc_render$2f(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$O);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$O);
 	}
 	var questionFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["render", _sfc_render$2f]]);
 
 	const _sfc_main$2j = vue.defineComponent({
 	  name: "RefreshLeft"
 	});
-	const _hoisted_1$1o = {
+	const _hoisted_1$1n = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5425,14 +5485,14 @@
 	  _hoisted_2$11
 	];
 	function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$N);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$N);
 	}
 	var refreshLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["render", _sfc_render$2e]]);
 
 	const _sfc_main$2i = vue.defineComponent({
 	  name: "RefreshRight"
 	});
-	const _hoisted_1$1n = {
+	const _hoisted_1$1m = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5447,14 +5507,14 @@
 	  _hoisted_2$10
 	];
 	function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$M);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$M);
 	}
 	var refreshRight = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$2d]]);
 
 	const _sfc_main$2h = vue.defineComponent({
 	  name: "ScaleToOriginal"
 	});
-	const _hoisted_1$1m = {
+	const _hoisted_1$1l = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5469,14 +5529,14 @@
 	  _hoisted_2$$
 	];
 	function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$L);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$L);
 	}
 	var scaleToOriginal = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$2c]]);
 
 	const _sfc_main$2g = vue.defineComponent({
 	  name: "Search"
 	});
-	const _hoisted_1$1l = {
+	const _hoisted_1$1k = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5491,14 +5551,14 @@
 	  _hoisted_2$_
 	];
 	function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$K);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$K);
 	}
 	var search = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2b]]);
 
 	const _sfc_main$2f = vue.defineComponent({
 	  name: "StarFilled"
 	});
-	const _hoisted_1$1k = {
+	const _hoisted_1$1j = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5513,14 +5573,14 @@
 	  _hoisted_2$Z
 	];
 	function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$J);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$J);
 	}
 	var starFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2a]]);
 
 	const _sfc_main$2e = vue.defineComponent({
 	  name: "Star"
 	});
-	const _hoisted_1$1j = {
+	const _hoisted_1$1i = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5535,14 +5595,14 @@
 	  _hoisted_2$Y
 	];
 	function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$I);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1i, _hoisted_3$I);
 	}
 	var star = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$29]]);
 
 	const _sfc_main$2d = vue.defineComponent({
 	  name: "SuccessFilled"
 	});
-	const _hoisted_1$1i = {
+	const _hoisted_1$1h = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5557,14 +5617,14 @@
 	  _hoisted_2$X
 	];
 	function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1i, _hoisted_3$H);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1h, _hoisted_3$H);
 	}
 	var successFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$28]]);
 
 	const _sfc_main$2c = vue.defineComponent({
 	  name: "View"
 	});
-	const _hoisted_1$1h = {
+	const _hoisted_1$1g = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5579,14 +5639,14 @@
 	  _hoisted_2$W
 	];
 	function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1h, _hoisted_3$G);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1g, _hoisted_3$G);
 	}
 	var view = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$27]]);
 
 	const _sfc_main$2b = vue.defineComponent({
 	  name: "WarningFilled"
 	});
-	const _hoisted_1$1g = {
+	const _hoisted_1$1f = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5601,14 +5661,14 @@
 	  _hoisted_2$V
 	];
 	function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1g, _hoisted_3$F);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1f, _hoisted_3$F);
 	}
 	var warningFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$26]]);
 
 	const _sfc_main$2a = vue.defineComponent({
 	  name: "ZoomIn"
 	});
-	const _hoisted_1$1f = {
+	const _hoisted_1$1e = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5623,14 +5683,14 @@
 	  _hoisted_2$U
 	];
 	function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1f, _hoisted_3$E);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1e, _hoisted_3$E);
 	}
 	var zoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$25]]);
 
 	const _sfc_main$29 = vue.defineComponent({
 	  name: "ZoomOut"
 	});
-	const _hoisted_1$1e = {
+	const _hoisted_1$1d = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
@@ -5645,7 +5705,7 @@
 	  _hoisted_2$T
 	];
 	function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1e, _hoisted_3$D);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1d, _hoisted_3$D);
 	}
 	var zoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$24]]);
 
@@ -6730,7 +6790,7 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1d = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
+	const _hoisted_1$1c = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
 	const _hoisted_2$S = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
 	function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -6785,7 +6845,7 @@
 	        onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
 	        onChange: _cache[6] || (_cache[6] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
 	        onKeydown: _cache[7] || (_cache[7] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
-	      }), null, 16, _hoisted_1$1d),
+	      }), null, 16, _hoisted_1$1c),
 	      vue.createCommentVNode(" prefix slot "),
 	      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
 	        key: 1,
@@ -6953,6 +7013,7 @@
 	  props: thumbProps,
 	  setup(props) {
 	    const scrollbar = vue.inject(scrollbarContextKey);
+	    const ns = useNamespace("scrollbar");
 	    if (!scrollbar)
 	      throwError(COMPONENT_NAME$9, "can not inject scrollbar context");
 	    const instance = vue.ref();
@@ -7038,6 +7099,7 @@
 	    useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
 	    useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
 	    return {
+	      ns,
 	      instance,
 	      thumb,
 	      bar,
@@ -7049,25 +7111,27 @@
 	  }
 	});
 	function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-scrollbar-fade" }, {
+	  return vue.openBlock(), vue.createBlock(vue.Transition, {
+	    name: _ctx.ns.b("fade")
+	  }, {
 	    default: vue.withCtx(() => [
 	      vue.withDirectives(vue.createElementVNode("div", {
 	        ref: "instance",
-	        class: vue.normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
+	        class: vue.normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)]),
 	        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
 	      }, [
 	        vue.createElementVNode("div", {
 	          ref: "thumb",
-	          class: "el-scrollbar__thumb",
+	          class: vue.normalizeClass(_ctx.ns.e("thumb")),
 	          style: vue.normalizeStyle(_ctx.thumbStyle),
 	          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
-	        }, null, 36)
+	        }, null, 38)
 	      ], 34), [
 	        [vue.vShow, _ctx.always || _ctx.visible]
 	      ])
 	    ]),
 	    _: 1
-	  });
+	  }, 8, ["name"]);
 	}
 	var Thumb = /* @__PURE__ */ _export_sfc$1(_sfc_main$26, [["render", _sfc_render$21]]);
 
@@ -7196,6 +7260,7 @@
 	  props: scrollbarProps,
 	  emits: scrollbarEmits,
 	  setup(props, { emit }) {
+	    const ns = useNamespace("scrollbar");
 	    let stopResizeObserver = void 0;
 	    let stopResizeListener = void 0;
 	    const scrollbar$ = vue.ref();
@@ -7271,6 +7336,7 @@
 	        vue.nextTick(() => update());
 	    });
 	    return {
+	      ns,
 	      scrollbar$,
 	      wrap$,
 	      resize$,
@@ -7289,26 +7355,25 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1c = {
-	  ref: "scrollbar$",
-	  class: "el-scrollbar"
-	};
 	function _sfc_render$1$(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_bar = vue.resolveComponent("bar");
-	  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1c, [
+	  return vue.openBlock(), vue.createElementBlock("div", {
+	    ref: "scrollbar$",
+	    class: vue.normalizeClass(_ctx.ns.b())
+	  }, [
 	    vue.createElementVNode("div", {
 	      ref: "wrap$",
 	      class: vue.normalizeClass([
 	        _ctx.wrapClass,
-	        "el-scrollbar__wrap",
-	        _ctx.native ? "" : "el-scrollbar__wrap--hidden-default"
+	        _ctx.ns.e("wrap"),
+	        { [_ctx.ns.em("wrap", "hidden-default")]: !_ctx.native }
 	      ]),
 	      style: vue.normalizeStyle(_ctx.style),
 	      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
 	    }, [
 	      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
 	        ref: "resize$",
-	        class: vue.normalizeClass(["el-scrollbar__view", _ctx.viewClass]),
+	        class: vue.normalizeClass([_ctx.ns.e("view"), _ctx.viewClass]),
 	        style: vue.normalizeStyle(_ctx.viewStyle)
 	      }, {
 	        default: vue.withCtx(() => [
@@ -7326,7 +7391,7 @@
 	      "ratio-x": _ctx.ratioX,
 	      "ratio-y": _ctx.ratioY
 	    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
-	  ], 512);
+	  ], 2);
 	}
 	var Scrollbar$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$24, [["render", _sfc_render$1$]]);
 
@@ -17776,7 +17841,6 @@
 	          ref: "input",
 	          modelValue: _ctx.inputValue,
 	          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.inputValue = $event),
-	          modelModifiers: { trim: true },
 	          placeholder: _ctx.inputPlaceholder,
 	          readonly: _ctx.readonly,
 	          disabled: _ctx.isDisabled,
@@ -17847,12 +17911,7 @@
 	            onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
 	            onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args))
 	          }, null, 40, _hoisted_2$D)), [
-	            [
-	              vue.vModelText,
-	              _ctx.searchInputValue,
-	              void 0,
-	              { trim: true }
-	            ]
+	            [vue.vModelText, _ctx.searchInputValue]
 	          ]) : vue.createCommentVNode("v-if", true)
 	        ], 512)) : vue.createCommentVNode("v-if", true)
 	      ], 38)), [
@@ -22481,6 +22540,10 @@
 	    type: Boolean,
 	    default: false
 	  },
+	  draggable: {
+	    type: Boolean,
+	    default: false
+	  },
 	  lockScroll: {
 	    type: Boolean,
 	    default: true
@@ -22671,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,
@@ -22725,6 +22795,7 @@
 	                  "el-dialog",
 	                  {
 	                    "is-fullscreen": _ctx.fullscreen,
+	                    "is-draggable": _ctx.draggable,
 	                    "el-dialog--center": _ctx.center
 	                  },
 	                  _ctx.customClass
@@ -22754,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),
@@ -30762,7 +30833,7 @@
 	  },
 	  props: usePopoverProps,
 	  emits,
-	  setup(props) {
+	  setup(props, { emit }) {
 	    const tooltipRef = vue.ref(null);
 	    const popperRef = vue.computed(() => {
 	      var _a;
@@ -30793,12 +30864,20 @@
 	      var _a;
 	      (_a = tooltipRef.value) == null ? void 0 : _a.hide();
 	    };
+	    const afterEnter = () => {
+	      emit("after-enter");
+	    };
+	    const afterLeave = () => {
+	      emit("after-leave");
+	    };
 	    return {
 	      kls,
 	      style,
 	      tooltipRef,
 	      popperRef,
-	      hide
+	      hide,
+	      afterEnter,
+	      afterLeave
 	    };
 	  }
 	});
@@ -30815,7 +30894,9 @@
 	    enterable: _ctx.enterable,
 	    "popper-class": _ctx.kls,
 	    "popper-style": _ctx.style,
-	    persistent: ""
+	    persistent: "",
+	    onShow: _ctx.afterEnter,
+	    onHide: _ctx.afterLeave
 	  }), {
 	    content: vue.withCtx(() => [
 	      _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("v-if", true),
@@ -30827,7 +30908,7 @@
 	      _ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true)
 	    ]),
 	    _: 3
-	  }, 16, ["aria-label", "effect", "enterable", "popper-class", "popper-style"]);
+	  }, 16, ["aria-label", "effect", "enterable", "popper-class", "popper-style", "onShow", "onHide"]);
 	}
 	var Popover = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["render", _sfc_render$x]]);
 
@@ -34763,12 +34844,18 @@
 	  components: {
 	    ImgPlaceholder
 	  },
-	  props: skeletonItemProps
+	  props: skeletonItemProps,
+	  setup() {
+	    const ns = useNamespace("skeleton");
+	    return {
+	      ns
+	    };
+	  }
 	});
 	function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_img_placeholder = vue.resolveComponent("img-placeholder");
 	  return vue.openBlock(), vue.createElementBlock("div", {
-	    class: vue.normalizeClass(["el-skeleton__item", `el-skeleton__${_ctx.variant}`])
+	    class: vue.normalizeClass([_ctx.ns.e("item"), _ctx.ns.e(_ctx.variant)])
 	  }, [
 	    _ctx.variant === "image" ? (vue.openBlock(), vue.createBlock(_component_img_placeholder, { key: 0 })) : vue.createCommentVNode("v-if", true)
 	  ], 2);
@@ -34804,11 +34891,13 @@
 	  },
 	  props: skeletonProps,
 	  setup(props) {
+	    const ns = useNamespace("skeleton");
 	    const innerLoading = vue.computed(() => {
 	      return props.loading;
 	    });
 	    const uiLoading = useThrottleRender(innerLoading, props.throttle);
 	    return {
+	      ns,
 	      uiLoading
 	    };
 	  }
@@ -34817,22 +34906,22 @@
 	  const _component_el_skeleton_item = vue.resolveComponent("el-skeleton-item");
 	  return _ctx.uiLoading ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
 	    key: 0,
-	    class: ["el-skeleton", _ctx.animated ? "is-animated" : ""]
+	    class: [_ctx.ns.b(), _ctx.ns.is("animated", _ctx.animated)]
 	  }, _ctx.$attrs), [
 	    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i) => {
 	      return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i }, [
 	        _ctx.loading ? vue.renderSlot(_ctx.$slots, "template", { key: i }, () => [
 	          vue.createVNode(_component_el_skeleton_item, {
-	            class: "is-first",
+	            class: vue.normalizeClass(_ctx.ns.is("first")),
 	            variant: "p"
-	          }),
+	          }, null, 8, ["class"]),
 	          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (item) => {
 	            return vue.openBlock(), vue.createBlock(_component_el_skeleton_item, {
 	              key: item,
-	              class: vue.normalizeClass({
-	                "el-skeleton__paragraph": true,
-	                "is-last": item === _ctx.rows && _ctx.rows > 1
-	              }),
+	              class: vue.normalizeClass([
+	                _ctx.ns.e("paragraph"),
+	                _ctx.ns.is("last", item === _ctx.rows && _ctx.rows > 1)
+	              ]),
 	              variant: "p"
 	            }, null, 8, ["class"]);
 	          }), 128))
@@ -47411,6 +47500,7 @@
 	      default: true
 	    },
 	    center: Boolean,
+	    draggable: Boolean,
 	    roundButton: {
 	      default: false,
 	      type: Boolean
@@ -47469,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();
@@ -47501,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) {
@@ -47526,6 +47620,7 @@
 	        handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
 	      }
 	    };
+	    const overlayEvent = useSameTarget(handleWrapperClick);
 	    const handleInputEnter = () => {
 	      if (state.inputType !== "textarea") {
 	        return handleAction("confirm");
@@ -47590,12 +47685,15 @@
 	    useRestoreActive(visible);
 	    return {
 	      ...vue.toRefs(state),
+	      overlayEvent,
 	      visible,
 	      hasMessage,
 	      typeClass,
 	      btnSize,
 	      iconComponent,
 	      confirmButtonClasses,
+	      rootRef,
+	      headerRef,
 	      inputRef,
 	      confirmRef,
 	      doClose,
@@ -47610,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" };
@@ -47632,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]
 	      ])
 	    ]),
@@ -48498,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;