element-plus 1.3.0-beta.9 → 2.0.0

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v1.3.0-beta.9 */
+/*! Element Plus v2.0.0 */
 
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -2736,7 +2736,7 @@
 	  return stop;
 	}
 
-	const _global = globalThis || undefined;
+	const _global = typeof globalThis === "undefined" ? undefined : globalThis;
 	const globalKey = "__vueuse_ssr_handlers__";
 	_global[globalKey] = _global[globalKey] || {};
 	_global[globalKey];
@@ -3019,6 +3019,73 @@
 	  return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false);
 	};
 
+	const useDeprecated = ({ from, replacement, scope, version, ref }, condition) => {
+	  vue.watch(() => vue.unref(condition), (val) => {
+	  }, {
+	    immediate: true
+	  });
+	};
+
+	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 +4611,7 @@
 	  });
 	}
 
-	const version$1 = "1.3.0-beta.9";
+	const version$1 = "2.0.0";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -4622,7 +4689,7 @@
 	  return target;
 	};
 
-	const _sfc_main$2L = vue.defineComponent({
+	const _sfc_main$2M = vue.defineComponent({
 	  name: "ElAffix",
 	  props: affixProps,
 	  emits: affixEmits,
@@ -4721,7 +4788,7 @@
 	    };
 	  }
 	});
-	function _sfc_render$2G(_ctx, _cache, $props, $setup, $data, $options) {
+	function _sfc_render$2H(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("div", {
 	    ref: "root",
 	    class: vue.normalizeClass(_ctx.ns.b()),
@@ -4735,7 +4802,7 @@
 	    ], 6)
 	  ], 6);
 	}
-	var Affix = /* @__PURE__ */ _export_sfc$1(_sfc_main$2L, [["render", _sfc_render$2G]]);
+	var Affix = /* @__PURE__ */ _export_sfc$1(_sfc_main$2M, [["render", _sfc_render$2H]]);
 
 	const ElAffix = withInstall(Affix);
 
@@ -4748,7 +4815,7 @@
 	  }
 	});
 
-	const _sfc_main$2K = vue.defineComponent({
+	const _sfc_main$2L = vue.defineComponent({
 	  name: "ElIcon",
 	  inheritAttrs: false,
 	  props: iconProps,
@@ -4768,7 +4835,7 @@
 	    };
 	  }
 	});
-	function _sfc_render$2F(_ctx, _cache, $props, $setup, $data, $options) {
+	function _sfc_render$2G(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
 	    class: _ctx.ns.b(),
 	    style: _ctx.style
@@ -4776,7 +4843,7 @@
 	    vue.renderSlot(_ctx.$slots, "default")
 	  ], 16);
 	}
-	var Icon = /* @__PURE__ */ _export_sfc$1(_sfc_main$2K, [["render", _sfc_render$2F]]);
+	var Icon = /* @__PURE__ */ _export_sfc$1(_sfc_main$2L, [["render", _sfc_render$2G]]);
 
 	const ElIcon = withInstall(Icon);
 
@@ -4788,105 +4855,105 @@
 	  return target;
 	};
 
-	const _sfc_main$2J = vue.defineComponent({
+	const _sfc_main$2K = vue.defineComponent({
 	  name: "ArrowDown"
 	});
-	const _hoisted_1$1Q = {
+	const _hoisted_1$1O = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1t = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1s = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
 	}, null, -1);
 	const _hoisted_3$1c = [
-	  _hoisted_2$1t
+	  _hoisted_2$1s
 	];
-	function _sfc_render$2E(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1Q, _hoisted_3$1c);
+	function _sfc_render$2F(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1c);
 	}
-	var arrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$2J, [["render", _sfc_render$2E]]);
+	var arrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$2K, [["render", _sfc_render$2F]]);
 
-	const _sfc_main$2I = vue.defineComponent({
+	const _sfc_main$2J = vue.defineComponent({
 	  name: "ArrowLeft"
 	});
-	const _hoisted_1$1P = {
+	const _hoisted_1$1N = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1s = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1r = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"
 	}, null, -1);
 	const _hoisted_3$1b = [
-	  _hoisted_2$1s
+	  _hoisted_2$1r
 	];
-	function _sfc_render$2D(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1P, _hoisted_3$1b);
+	function _sfc_render$2E(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$1b);
 	}
-	var arrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2I, [["render", _sfc_render$2D]]);
+	var arrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2J, [["render", _sfc_render$2E]]);
 
-	const _sfc_main$2H = vue.defineComponent({
+	const _sfc_main$2I = vue.defineComponent({
 	  name: "ArrowRight"
 	});
-	const _hoisted_1$1O = {
+	const _hoisted_1$1M = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1r = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1q = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"
 	}, null, -1);
 	const _hoisted_3$1a = [
-	  _hoisted_2$1r
+	  _hoisted_2$1q
 	];
-	function _sfc_render$2C(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1a);
+	function _sfc_render$2D(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_3$1a);
 	}
-	var arrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2H, [["render", _sfc_render$2C]]);
+	var arrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2I, [["render", _sfc_render$2D]]);
 
-	const _sfc_main$2G = vue.defineComponent({
+	const _sfc_main$2H = vue.defineComponent({
 	  name: "ArrowUp"
 	});
-	const _hoisted_1$1N = {
+	const _hoisted_1$1L = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1q = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1p = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M488.832 344.32l-339.84 356.672a32 32 0 000 44.16l.384.384a29.44 29.44 0 0042.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0042.688 0l.384-.384a32 32 0 000-44.16L535.168 344.32a32 32 0 00-46.336 0z"
 	}, null, -1);
 	const _hoisted_3$19 = [
-	  _hoisted_2$1q
+	  _hoisted_2$1p
 	];
-	function _sfc_render$2B(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$19);
+	function _sfc_render$2C(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_3$19);
 	}
-	var arrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$2G, [["render", _sfc_render$2B]]);
+	var arrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$2H, [["render", _sfc_render$2C]]);
 
-	const _sfc_main$2F = vue.defineComponent({
+	const _sfc_main$2G = vue.defineComponent({
 	  name: "Back"
 	});
-	const _hoisted_1$1M = {
+	const _hoisted_1$1K = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1p = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1o = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M224 480h640a32 32 0 110 64H224a32 32 0 010-64z"
 	}, null, -1);
@@ -4895,135 +4962,135 @@
 	  d: "M237.248 512l265.408 265.344a32 32 0 01-45.312 45.312l-288-288a32 32 0 010-45.312l288-288a32 32 0 1145.312 45.312L237.248 512z"
 	}, null, -1);
 	const _hoisted_4$q = [
-	  _hoisted_2$1p,
+	  _hoisted_2$1o,
 	  _hoisted_3$18
 	];
-	function _sfc_render$2A(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_4$q);
+	function _sfc_render$2B(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_4$q);
 	}
-	var back = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["render", _sfc_render$2A]]);
+	var back = /* @__PURE__ */ _export_sfc(_sfc_main$2G, [["render", _sfc_render$2B]]);
 
-	const _sfc_main$2E = vue.defineComponent({
+	const _sfc_main$2F = vue.defineComponent({
 	  name: "Calendar"
 	});
-	const _hoisted_1$1L = {
+	const _hoisted_1$1J = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1o = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1n = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M128 384v512h768V192H768v32a32 32 0 11-64 0v-32H320v32a32 32 0 01-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1164 0v32h160a32 32 0 0132 32v768a32 32 0 01-32 32H96a32 32 0 01-32-32V160a32 32 0 0132-32h160V96a32 32 0 0164 0v32zm-32 384h64a32 32 0 010 64h-64a32 32 0 010-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64zm192-192h64a32 32 0 010 64h-64a32 32 0 010-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64zm192-192h64a32 32 0 110 64h-64a32 32 0 110-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64z"
 	}, null, -1);
 	const _hoisted_3$17 = [
-	  _hoisted_2$1o
+	  _hoisted_2$1n
 	];
-	function _sfc_render$2z(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_3$17);
+	function _sfc_render$2A(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$17);
 	}
-	var calendar = /* @__PURE__ */ _export_sfc(_sfc_main$2E, [["render", _sfc_render$2z]]);
+	var calendar = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["render", _sfc_render$2A]]);
 
-	const _sfc_main$2D = vue.defineComponent({
+	const _sfc_main$2E = vue.defineComponent({
 	  name: "CaretRight"
 	});
-	const _hoisted_1$1K = {
+	const _hoisted_1$1I = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1n = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1m = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M384 192v640l384-320.064z"
 	}, null, -1);
 	const _hoisted_3$16 = [
-	  _hoisted_2$1n
+	  _hoisted_2$1m
 	];
-	function _sfc_render$2y(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_3$16);
+	function _sfc_render$2z(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$16);
 	}
-	var caretRight = /* @__PURE__ */ _export_sfc(_sfc_main$2D, [["render", _sfc_render$2y]]);
+	var caretRight = /* @__PURE__ */ _export_sfc(_sfc_main$2E, [["render", _sfc_render$2z]]);
 
-	const _sfc_main$2C = vue.defineComponent({
+	const _sfc_main$2D = vue.defineComponent({
 	  name: "CaretTop"
 	});
-	const _hoisted_1$1J = {
+	const _hoisted_1$1H = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1m = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1l = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 320L192 704h639.936z"
 	}, null, -1);
 	const _hoisted_3$15 = [
-	  _hoisted_2$1m
+	  _hoisted_2$1l
 	];
-	function _sfc_render$2x(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$15);
+	function _sfc_render$2y(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$15);
 	}
-	var caretTop = /* @__PURE__ */ _export_sfc(_sfc_main$2C, [["render", _sfc_render$2x]]);
+	var caretTop = /* @__PURE__ */ _export_sfc(_sfc_main$2D, [["render", _sfc_render$2y]]);
 
-	const _sfc_main$2B = vue.defineComponent({
+	const _sfc_main$2C = vue.defineComponent({
 	  name: "Check"
 	});
-	const _hoisted_1$1I = {
+	const _hoisted_1$1G = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1l = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1k = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z"
 	}, null, -1);
 	const _hoisted_3$14 = [
-	  _hoisted_2$1l
+	  _hoisted_2$1k
 	];
-	function _sfc_render$2w(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$14);
+	function _sfc_render$2x(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$14);
 	}
-	var check = /* @__PURE__ */ _export_sfc(_sfc_main$2B, [["render", _sfc_render$2w]]);
+	var check = /* @__PURE__ */ _export_sfc(_sfc_main$2C, [["render", _sfc_render$2x]]);
 
-	const _sfc_main$2A = vue.defineComponent({
+	const _sfc_main$2B = vue.defineComponent({
 	  name: "CircleCheckFilled"
 	});
-	const _hoisted_1$1H = {
+	const _hoisted_1$1F = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1k = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1j = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 10-54.336 54.336l126.72 126.72a38.272 38.272 0 0054.336 0l262.4-262.464a38.4 38.4 0 10-54.272-54.336L456.192 600.384z"
 	}, null, -1);
 	const _hoisted_3$13 = [
-	  _hoisted_2$1k
+	  _hoisted_2$1j
 	];
-	function _sfc_render$2v(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$13);
+	function _sfc_render$2w(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$13);
 	}
-	var circleCheckFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2A, [["render", _sfc_render$2v]]);
+	var circleCheckFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2B, [["render", _sfc_render$2w]]);
 
-	const _sfc_main$2z = vue.defineComponent({
+	const _sfc_main$2A = vue.defineComponent({
 	  name: "CircleCheck"
 	});
-	const _hoisted_1$1G = {
+	const _hoisted_1$1E = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1j = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1i = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
 	}, null, -1);
@@ -5032,47 +5099,47 @@
 	  d: "M745.344 361.344a32 32 0 0145.312 45.312l-288 288a32 32 0 01-45.312 0l-160-160a32 32 0 1145.312-45.312L480 626.752l265.344-265.408z"
 	}, null, -1);
 	const _hoisted_4$p = [
-	  _hoisted_2$1j,
+	  _hoisted_2$1i,
 	  _hoisted_3$12
 	];
-	function _sfc_render$2u(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_4$p);
+	function _sfc_render$2v(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_4$p);
 	}
-	var circleCheck = /* @__PURE__ */ _export_sfc(_sfc_main$2z, [["render", _sfc_render$2u]]);
+	var circleCheck = /* @__PURE__ */ _export_sfc(_sfc_main$2A, [["render", _sfc_render$2v]]);
 
-	const _sfc_main$2y = vue.defineComponent({
+	const _sfc_main$2z = vue.defineComponent({
 	  name: "CircleCloseFilled"
 	});
-	const _hoisted_1$1F = {
+	const _hoisted_1$1D = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1i = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1h = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm0 393.664L407.936 353.6a38.4 38.4 0 10-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1054.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1054.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 10-54.336-54.336L512 457.664z"
 	}, null, -1);
 	const _hoisted_3$11 = [
-	  _hoisted_2$1i
+	  _hoisted_2$1h
 	];
-	function _sfc_render$2t(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$11);
+	function _sfc_render$2u(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$11);
 	}
-	var circleCloseFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2y, [["render", _sfc_render$2t]]);
+	var circleCloseFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2z, [["render", _sfc_render$2u]]);
 
-	const _sfc_main$2x = vue.defineComponent({
+	const _sfc_main$2y = vue.defineComponent({
 	  name: "CircleClose"
 	});
-	const _hoisted_1$1E = {
+	const _hoisted_1$1C = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1h = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1g = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
 	}, null, -1);
@@ -5081,25 +5148,25 @@
 	  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
 	}, null, -1);
 	const _hoisted_4$o = [
-	  _hoisted_2$1h,
+	  _hoisted_2$1g,
 	  _hoisted_3$10
 	];
-	function _sfc_render$2s(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_4$o);
+	function _sfc_render$2t(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_4$o);
 	}
-	var circleClose = /* @__PURE__ */ _export_sfc(_sfc_main$2x, [["render", _sfc_render$2s]]);
+	var circleClose = /* @__PURE__ */ _export_sfc(_sfc_main$2y, [["render", _sfc_render$2t]]);
 
-	const _sfc_main$2w = vue.defineComponent({
+	const _sfc_main$2x = vue.defineComponent({
 	  name: "Clock"
 	});
-	const _hoisted_1$1D = {
+	const _hoisted_1$1B = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1g = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1f = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
 	}, null, -1);
@@ -5111,543 +5178,543 @@
 	  fill: "currentColor",
 	  d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z"
 	}, null, -1);
-	const _hoisted_5$f = [
-	  _hoisted_2$1g,
+	const _hoisted_5$e = [
+	  _hoisted_2$1f,
 	  _hoisted_3$$,
 	  _hoisted_4$n
 	];
-	function _sfc_render$2r(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_5$f);
+	function _sfc_render$2s(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_5$e);
 	}
-	var clock = /* @__PURE__ */ _export_sfc(_sfc_main$2w, [["render", _sfc_render$2r]]);
+	var clock = /* @__PURE__ */ _export_sfc(_sfc_main$2x, [["render", _sfc_render$2s]]);
 
-	const _sfc_main$2v = vue.defineComponent({
+	const _sfc_main$2w = vue.defineComponent({
 	  name: "Close"
 	});
-	const _hoisted_1$1C = {
+	const _hoisted_1$1A = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1f = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1e = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"
 	}, null, -1);
 	const _hoisted_3$_ = [
-	  _hoisted_2$1f
+	  _hoisted_2$1e
 	];
-	function _sfc_render$2q(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_3$_);
+	function _sfc_render$2r(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$_);
 	}
-	var close$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2v, [["render", _sfc_render$2q]]);
+	var close$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2w, [["render", _sfc_render$2r]]);
 
-	const _sfc_main$2u = vue.defineComponent({
+	const _sfc_main$2v = vue.defineComponent({
 	  name: "DArrowLeft"
 	});
-	const _hoisted_1$1B = {
+	const _hoisted_1$1z = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1e = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1d = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M529.408 149.376a29.12 29.12 0 0141.728 0 30.592 30.592 0 010 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 01-.512 43.264 29.12 29.12 0 01-41.216-.512L197.76 534.272a32 32 0 010-44.672l331.648-340.224zm256 0a29.12 29.12 0 0141.728 0 30.592 30.592 0 010 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 01-.512 43.264 29.12 29.12 0 01-41.216-.512L453.76 534.272a32 32 0 010-44.672l331.648-340.224z"
 	}, null, -1);
 	const _hoisted_3$Z = [
-	  _hoisted_2$1e
+	  _hoisted_2$1d
 	];
-	function _sfc_render$2p(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$Z);
+	function _sfc_render$2q(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$Z);
 	}
-	var dArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["render", _sfc_render$2p]]);
+	var dArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2v, [["render", _sfc_render$2q]]);
 
-	const _sfc_main$2t = vue.defineComponent({
+	const _sfc_main$2u = vue.defineComponent({
 	  name: "DArrowRight"
 	});
-	const _hoisted_1$1A = {
+	const _hoisted_1$1y = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1d = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1c = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M452.864 149.312a29.12 29.12 0 0141.728.064L826.24 489.664a32 32 0 010 44.672L494.592 874.624a29.12 29.12 0 01-41.728 0 30.592 30.592 0 010-42.752L764.736 512 452.864 192a30.592 30.592 0 010-42.688zm-256 0a29.12 29.12 0 0141.728.064L570.24 489.664a32 32 0 010 44.672L238.592 874.624a29.12 29.12 0 01-41.728 0 30.592 30.592 0 010-42.752L508.736 512 196.864 192a30.592 30.592 0 010-42.688z"
 	}, null, -1);
 	const _hoisted_3$Y = [
-	  _hoisted_2$1d
+	  _hoisted_2$1c
 	];
-	function _sfc_render$2o(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$Y);
+	function _sfc_render$2p(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$Y);
 	}
-	var dArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["render", _sfc_render$2o]]);
+	var dArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["render", _sfc_render$2p]]);
 
-	const _sfc_main$2s = vue.defineComponent({
+	const _sfc_main$2t = vue.defineComponent({
 	  name: "Delete"
 	});
-	const _hoisted_1$1z = {
+	const _hoisted_1$1x = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1c = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1b = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"
 	}, null, -1);
 	const _hoisted_3$X = [
-	  _hoisted_2$1c
+	  _hoisted_2$1b
 	];
-	function _sfc_render$2n(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$X);
+	function _sfc_render$2o(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$X);
 	}
-	var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["render", _sfc_render$2n]]);
+	var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["render", _sfc_render$2o]]);
 
-	const _sfc_main$2r = vue.defineComponent({
+	const _sfc_main$2s = vue.defineComponent({
 	  name: "Document"
 	});
-	const _hoisted_1$1y = {
+	const _hoisted_1$1w = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1b = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1a = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
 	}, null, -1);
 	const _hoisted_3$W = [
-	  _hoisted_2$1b
+	  _hoisted_2$1a
 	];
-	function _sfc_render$2m(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$W);
+	function _sfc_render$2n(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$W);
 	}
-	var document$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["render", _sfc_render$2m]]);
+	var document$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["render", _sfc_render$2n]]);
 
-	const _sfc_main$2q = vue.defineComponent({
+	const _sfc_main$2r = vue.defineComponent({
 	  name: "FullScreen"
 	});
-	const _hoisted_1$1x = {
+	const _hoisted_1$1v = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$1a = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$19 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M160 96.064l192 .192a32 32 0 010 64l-192-.192V352a32 32 0 01-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1164 0v191.936l192-.192a32 32 0 110 64l-192 .192zM864 96.064V96h64v256a32 32 0 11-64 0V160.064l-192 .192a32 32 0 110-64l192-.192zm0 831.872l-192-.192a32 32 0 010-64l192 .192V672a32 32 0 1164 0v256h-64v-.064z"
 	}, null, -1);
 	const _hoisted_3$V = [
-	  _hoisted_2$1a
+	  _hoisted_2$19
 	];
-	function _sfc_render$2l(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$V);
+	function _sfc_render$2m(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$V);
 	}
-	var fullScreen = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["render", _sfc_render$2l]]);
+	var fullScreen = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["render", _sfc_render$2m]]);
 
-	const _sfc_main$2p = vue.defineComponent({
+	const _sfc_main$2q = vue.defineComponent({
 	  name: "InfoFilled"
 	});
-	const _hoisted_1$1w = {
+	const _hoisted_1$1u = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$19 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$18 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896.064A448 448 0 01512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 01-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 017.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"
 	}, null, -1);
 	const _hoisted_3$U = [
-	  _hoisted_2$19
+	  _hoisted_2$18
 	];
-	function _sfc_render$2k(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$U);
+	function _sfc_render$2l(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$U);
 	}
-	var infoFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["render", _sfc_render$2k]]);
+	var infoFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["render", _sfc_render$2l]]);
 
-	const _sfc_main$2o = vue.defineComponent({
+	const _sfc_main$2p = vue.defineComponent({
 	  name: "Loading"
 	});
-	const _hoisted_1$1v = {
+	const _hoisted_1$1t = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$18 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$17 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a32 32 0 0132 32v192a32 32 0 01-64 0V96a32 32 0 0132-32zm0 640a32 32 0 0132 32v192a32 32 0 11-64 0V736a32 32 0 0132-32zm448-192a32 32 0 01-32 32H736a32 32 0 110-64h192a32 32 0 0132 32zm-640 0a32 32 0 01-32 32H96a32 32 0 010-64h192a32 32 0 0132 32zM195.2 195.2a32 32 0 0145.248 0L376.32 331.008a32 32 0 01-45.248 45.248L195.2 240.448a32 32 0 010-45.248zm452.544 452.544a32 32 0 0145.248 0L828.8 783.552a32 32 0 01-45.248 45.248L647.744 692.992a32 32 0 010-45.248zM828.8 195.264a32 32 0 010 45.184L692.992 376.32a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0zm-452.544 452.48a32 32 0 010 45.248L240.448 828.8a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0z"
 	}, null, -1);
 	const _hoisted_3$T = [
-	  _hoisted_2$18
+	  _hoisted_2$17
 	];
-	function _sfc_render$2j(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$T);
+	function _sfc_render$2k(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$T);
 	}
-	var loading = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["render", _sfc_render$2j]]);
+	var loading = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["render", _sfc_render$2k]]);
 
-	const _sfc_main$2n = vue.defineComponent({
+	const _sfc_main$2o = vue.defineComponent({
 	  name: "Minus"
 	});
-	const _hoisted_1$1u = {
+	const _hoisted_1$1s = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$17 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$16 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M128 544h768a32 32 0 100-64H128a32 32 0 000 64z"
 	}, null, -1);
 	const _hoisted_3$S = [
-	  _hoisted_2$17
+	  _hoisted_2$16
 	];
-	function _sfc_render$2i(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$S);
+	function _sfc_render$2j(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$S);
 	}
-	var minus = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$2i]]);
+	var minus = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["render", _sfc_render$2j]]);
 
-	const _sfc_main$2m = vue.defineComponent({
+	const _sfc_main$2n = vue.defineComponent({
 	  name: "MoreFilled"
 	});
-	const _hoisted_1$1t = {
+	const _hoisted_1$1r = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$16 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$15 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M176 416a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224z"
 	}, null, -1);
 	const _hoisted_3$R = [
-	  _hoisted_2$16
+	  _hoisted_2$15
 	];
-	function _sfc_render$2h(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$R);
+	function _sfc_render$2i(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$R);
 	}
-	var moreFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["render", _sfc_render$2h]]);
+	var moreFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$2i]]);
 
-	const _sfc_main$2l = vue.defineComponent({
+	const _sfc_main$2m = vue.defineComponent({
 	  name: "More"
 	});
-	const _hoisted_1$1s = {
+	const _hoisted_1$1q = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$15 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$14 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M176 416a112 112 0 100 224 112 112 0 000-224m0 64a48 48 0 110 96 48 48 0 010-96zm336-64a112 112 0 110 224 112 112 0 010-224zm0 64a48 48 0 100 96 48 48 0 000-96zm336-64a112 112 0 110 224 112 112 0 010-224zm0 64a48 48 0 100 96 48 48 0 000-96z"
 	}, null, -1);
 	const _hoisted_3$Q = [
-	  _hoisted_2$15
+	  _hoisted_2$14
 	];
-	function _sfc_render$2g(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$Q);
+	function _sfc_render$2h(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$Q);
 	}
-	var more = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["render", _sfc_render$2g]]);
+	var more = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["render", _sfc_render$2h]]);
 
-	const _sfc_main$2k = vue.defineComponent({
+	const _sfc_main$2l = vue.defineComponent({
 	  name: "Plus"
 	});
-	const _hoisted_1$1r = {
+	const _hoisted_1$1p = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$14 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$13 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M480 480V128a32 32 0 0164 0v352h352a32 32 0 110 64H544v352a32 32 0 11-64 0V544H128a32 32 0 010-64h352z"
 	}, null, -1);
 	const _hoisted_3$P = [
-	  _hoisted_2$14
+	  _hoisted_2$13
 	];
-	function _sfc_render$2f(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$P);
+	function _sfc_render$2g(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$P);
 	}
-	var plus = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["render", _sfc_render$2f]]);
+	var plus = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["render", _sfc_render$2g]]);
 
-	const _sfc_main$2j = vue.defineComponent({
+	const _sfc_main$2k = vue.defineComponent({
 	  name: "QuestionFilled"
 	});
-	const _hoisted_1$1q = {
+	const _hoisted_1$1o = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$13 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$12 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 00-38.72 14.784 49.408 49.408 0 00-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 00523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0016.192-38.72 51.968 51.968 0 00-15.488-38.016 55.936 55.936 0 00-39.424-14.784z"
 	}, null, -1);
 	const _hoisted_3$O = [
-	  _hoisted_2$13
+	  _hoisted_2$12
 	];
-	function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$O);
+	function _sfc_render$2f(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$O);
 	}
-	var questionFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["render", _sfc_render$2e]]);
+	var questionFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["render", _sfc_render$2f]]);
 
-	const _sfc_main$2i = vue.defineComponent({
+	const _sfc_main$2j = vue.defineComponent({
 	  name: "RefreshLeft"
 	});
-	const _hoisted_1$1p = {
+	const _hoisted_1$1n = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$12 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$11 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M289.088 296.704h92.992a32 32 0 010 64H232.96a32 32 0 01-32-32V179.712a32 32 0 0164 0v50.56a384 384 0 01643.84 282.88 384 384 0 01-383.936 384 384 384 0 01-384-384h64a320 320 0 10640 0 320 320 0 00-555.712-216.448z"
 	}, null, -1);
 	const _hoisted_3$N = [
-	  _hoisted_2$12
+	  _hoisted_2$11
 	];
-	function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$N);
+	function _sfc_render$2e(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$N);
 	}
-	var refreshLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$2d]]);
+	var refreshLeft = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["render", _sfc_render$2e]]);
 
-	const _sfc_main$2h = vue.defineComponent({
+	const _sfc_main$2i = vue.defineComponent({
 	  name: "RefreshRight"
 	});
-	const _hoisted_1$1o = {
+	const _hoisted_1$1m = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$11 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$10 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M784.512 230.272v-50.56a32 32 0 1164 0v149.056a32 32 0 01-32 32H667.52a32 32 0 110-64h92.992A320 320 0 10524.8 833.152a320 320 0 00320-320h64a384 384 0 01-384 384 384 384 0 01-384-384 384 384 0 01643.712-282.88z"
 	}, null, -1);
 	const _hoisted_3$M = [
-	  _hoisted_2$11
+	  _hoisted_2$10
 	];
-	function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$M);
+	function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$M);
 	}
-	var refreshRight = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$2c]]);
+	var refreshRight = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$2d]]);
 
-	const _sfc_main$2g = vue.defineComponent({
+	const _sfc_main$2h = vue.defineComponent({
 	  name: "ScaleToOriginal"
 	});
-	const _hoisted_1$1n = {
+	const _hoisted_1$1l = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$10 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$$ = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M813.176 180.706a60.235 60.235 0 0160.236 60.235v481.883a60.235 60.235 0 01-60.236 60.235H210.824a60.235 60.235 0 01-60.236-60.235V240.94a60.235 60.235 0 0160.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0090.353 240.94v481.883a120.47 120.47 0 00120.47 120.47h602.353a120.47 120.47 0 00120.471-120.47V240.94a120.47 120.47 0 00-120.47-120.47zm-120.47 180.705a30.118 30.118 0 00-30.118 30.118v301.177a30.118 30.118 0 0060.236 0V331.294a30.118 30.118 0 00-30.118-30.118zm-361.412 0a30.118 30.118 0 00-30.118 30.118v301.177a30.118 30.118 0 1060.236 0V331.294a30.118 30.118 0 00-30.118-30.118zM512 361.412a30.118 30.118 0 00-30.118 30.117v30.118a30.118 30.118 0 0060.236 0V391.53A30.118 30.118 0 00512 361.412zM512 512a30.118 30.118 0 00-30.118 30.118v30.117a30.118 30.118 0 0060.236 0v-30.117A30.118 30.118 0 00512 512z"
 	}, null, -1);
 	const _hoisted_3$L = [
-	  _hoisted_2$10
+	  _hoisted_2$$
 	];
-	function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$L);
+	function _sfc_render$2c(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$L);
 	}
-	var scaleToOriginal = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2b]]);
+	var scaleToOriginal = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["render", _sfc_render$2c]]);
 
-	const _sfc_main$2f = vue.defineComponent({
+	const _sfc_main$2g = vue.defineComponent({
 	  name: "Search"
 	});
-	const _hoisted_1$1m = {
+	const _hoisted_1$1k = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$$ = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$_ = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704z"
 	}, null, -1);
 	const _hoisted_3$K = [
-	  _hoisted_2$$
+	  _hoisted_2$_
 	];
-	function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$K);
+	function _sfc_render$2b(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$K);
 	}
-	var search = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2a]]);
+	var search = /* @__PURE__ */ _export_sfc(_sfc_main$2g, [["render", _sfc_render$2b]]);
 
-	const _sfc_main$2e = vue.defineComponent({
+	const _sfc_main$2f = vue.defineComponent({
 	  name: "StarFilled"
 	});
-	const _hoisted_1$1l = {
+	const _hoisted_1$1j = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$_ = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$Z = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M283.84 867.84L512 747.776l228.16 119.936a6.4 6.4 0 009.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 00-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 00-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 00-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 009.28 6.72z"
 	}, null, -1);
 	const _hoisted_3$J = [
-	  _hoisted_2$_
+	  _hoisted_2$Z
 	];
-	function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$J);
+	function _sfc_render$2a(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$J);
 	}
-	var starFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$29]]);
+	var starFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["render", _sfc_render$2a]]);
 
-	const _sfc_main$2d = vue.defineComponent({
+	const _sfc_main$2e = vue.defineComponent({
 	  name: "Star"
 	});
-	const _hoisted_1$1k = {
+	const _hoisted_1$1i = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$Z = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$Y = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 747.84l228.16 119.936a6.4 6.4 0 009.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 00-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 00-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 00-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 009.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 01-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 01128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 01126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0139.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 01-102.144 74.24L512 820.096l-198.4 104.32z"
 	}, null, -1);
 	const _hoisted_3$I = [
-	  _hoisted_2$Z
+	  _hoisted_2$Y
 	];
-	function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$I);
+	function _sfc_render$29(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1i, _hoisted_3$I);
 	}
-	var star = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$28]]);
+	var star = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["render", _sfc_render$29]]);
 
-	const _sfc_main$2c = vue.defineComponent({
+	const _sfc_main$2d = vue.defineComponent({
 	  name: "SuccessFilled"
 	});
-	const _hoisted_1$1j = {
+	const _hoisted_1$1h = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$Y = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$X = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 10-54.336 54.336l126.72 126.72a38.272 38.272 0 0054.336 0l262.4-262.464a38.4 38.4 0 10-54.272-54.336L456.192 600.384z"
 	}, null, -1);
 	const _hoisted_3$H = [
-	  _hoisted_2$Y
+	  _hoisted_2$X
 	];
-	function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$H);
+	function _sfc_render$28(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1h, _hoisted_3$H);
 	}
-	var successFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$27]]);
+	var successFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2d, [["render", _sfc_render$28]]);
 
-	const _sfc_main$2b = vue.defineComponent({
+	const _sfc_main$2c = vue.defineComponent({
 	  name: "View"
 	});
-	const _hoisted_1$1i = {
+	const _hoisted_1$1g = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$X = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$W = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
 	}, null, -1);
 	const _hoisted_3$G = [
-	  _hoisted_2$X
+	  _hoisted_2$W
 	];
-	function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1i, _hoisted_3$G);
+	function _sfc_render$27(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1g, _hoisted_3$G);
 	}
-	var view = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$26]]);
+	var view = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$27]]);
 
-	const _sfc_main$2a = vue.defineComponent({
+	const _sfc_main$2b = vue.defineComponent({
 	  name: "WarningFilled"
 	});
-	const _hoisted_1$1h = {
+	const _hoisted_1$1f = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$W = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$V = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm0 192a58.432 58.432 0 00-58.24 63.744l23.36 256.384a35.072 35.072 0 0069.76 0l23.296-256.384A58.432 58.432 0 00512 256zm0 512a51.2 51.2 0 100-102.4 51.2 51.2 0 000 102.4z"
 	}, null, -1);
 	const _hoisted_3$F = [
-	  _hoisted_2$W
+	  _hoisted_2$V
 	];
-	function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1h, _hoisted_3$F);
+	function _sfc_render$26(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1f, _hoisted_3$F);
 	}
-	var warningFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$25]]);
+	var warningFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$26]]);
 
-	const _sfc_main$29 = vue.defineComponent({
+	const _sfc_main$2a = vue.defineComponent({
 	  name: "ZoomIn"
 	});
-	const _hoisted_1$1g = {
+	const _hoisted_1$1e = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$V = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$U = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704zm-32-384v-96a32 32 0 0164 0v96h96a32 32 0 010 64h-96v96a32 32 0 01-64 0v-96h-96a32 32 0 010-64h96z"
 	}, null, -1);
 	const _hoisted_3$E = [
-	  _hoisted_2$V
+	  _hoisted_2$U
 	];
-	function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1g, _hoisted_3$E);
+	function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1e, _hoisted_3$E);
 	}
-	var zoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$24]]);
+	var zoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$25]]);
 
-	const _sfc_main$28 = vue.defineComponent({
+	const _sfc_main$29 = vue.defineComponent({
 	  name: "ZoomOut"
 	});
-	const _hoisted_1$1f = {
+	const _hoisted_1$1d = {
 	  class: "icon",
 	  width: "200",
 	  height: "200",
 	  viewBox: "0 0 1024 1024",
 	  xmlns: "http://www.w3.org/2000/svg"
 	};
-	const _hoisted_2$U = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$T = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704zM352 448h256a32 32 0 010 64H352a32 32 0 010-64z"
 	}, null, -1);
 	const _hoisted_3$D = [
-	  _hoisted_2$U
+	  _hoisted_2$T
 	];
-	function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1f, _hoisted_3$D);
+	function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1d, _hoisted_3$D);
 	}
-	var zoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$23]]);
+	var zoomOut = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render", _sfc_render$24]]);
 
 	const CloseComponents = {
 	  Close: close$2
@@ -5706,7 +5773,7 @@
 	  close: (evt) => evt instanceof MouseEvent
 	};
 
-	const _sfc_main$27 = vue.defineComponent({
+	const _sfc_main$28 = vue.defineComponent({
 	  name: "ElAlert",
 	  components: {
 	    ElIcon,
@@ -5734,7 +5801,7 @@
 	    };
 	  }
 	});
-	function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
+	function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
 	  const _component_close = vue.resolveComponent("close");
 	  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-alert-fade" }, {
@@ -5795,7 +5862,7 @@
 	    _: 3
 	  });
 	}
-	var Alert = /* @__PURE__ */ _export_sfc$1(_sfc_main$27, [["render", _sfc_render$22]]);
+	var Alert = /* @__PURE__ */ _export_sfc$1(_sfc_main$28, [["render", _sfc_render$23]]);
 
 	const ElAlert = withInstall(Alert);
 
@@ -6506,7 +6573,7 @@
 	  suffix: "append",
 	  prefix: "prepend"
 	};
-	const _sfc_main$26 = vue.defineComponent({
+	const _sfc_main$27 = vue.defineComponent({
 	  name: "ElInput",
 	  components: { ElIcon, CircleClose: circleClose, IconView: view },
 	  inheritAttrs: false,
@@ -6730,9 +6797,9 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1e = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
-	const _hoisted_2$T = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
-	function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+	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");
 	  const _component_circle_close = vue.resolveComponent("circle-close");
 	  const _component_icon_view = vue.resolveComponent("icon-view");
@@ -6785,7 +6852,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$1e),
+	      }), null, 16, _hoisted_1$1c),
 	      vue.createCommentVNode(" prefix slot "),
 	      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
 	        key: 1,
@@ -6895,7 +6962,7 @@
 	        onBlur: _cache[14] || (_cache[14] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
 	        onChange: _cache[15] || (_cache[15] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
 	        onKeydown: _cache[16] || (_cache[16] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
-	      }), null, 16, _hoisted_2$T),
+	      }), null, 16, _hoisted_2$S),
 	      _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
 	        key: 0,
 	        class: vue.normalizeClass(_ctx.nsInput.e("count"))
@@ -6905,7 +6972,7 @@
 	    [vue.vShow, _ctx.type !== "hidden"]
 	  ]);
 	}
-	var Input = /* @__PURE__ */ _export_sfc$1(_sfc_main$26, [["render", _sfc_render$21]]);
+	var Input = /* @__PURE__ */ _export_sfc$1(_sfc_main$27, [["render", _sfc_render$22]]);
 
 	const ElInput = withInstall(Input);
 
@@ -6936,7 +7003,7 @@
 	  transform: `translate${bar.axis}(${move}%)`
 	});
 
-	const barProps = buildProps({
+	const thumbProps = buildProps({
 	  vertical: Boolean,
 	  size: String,
 	  move: Number,
@@ -6947,21 +7014,22 @@
 	  always: Boolean
 	});
 
-	const COMPONENT_NAME$9 = "Bar";
-	const _sfc_main$25 = vue.defineComponent({
-	  name: COMPONENT_NAME$9,
-	  props: barProps,
+	const COMPONENT_NAME$f = "Thumb";
+	const _sfc_main$26 = vue.defineComponent({
+	  name: COMPONENT_NAME$f,
+	  props: thumbProps,
 	  setup(props) {
 	    const scrollbar = vue.inject(scrollbarContextKey);
+	    const ns = useNamespace("scrollbar");
 	    if (!scrollbar)
-	      throwError(COMPONENT_NAME$9, "can not inject scrollbar context");
+	      throwError(COMPONENT_NAME$f, "can not inject scrollbar context");
 	    const instance = vue.ref();
 	    const thumb = vue.ref();
-	    const barStore = vue.ref({});
+	    const thumbState = vue.ref({});
 	    const visible = vue.ref(false);
 	    let cursorDown = false;
 	    let cursorLeave = false;
-	    let onselectstartStore = isClient ? document.onselectstart : null;
+	    let originalOnSelectStart = isClient ? document.onselectstart : null;
 	    const bar = vue.computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
 	    const thumbStyle = vue.computed(() => renderThumbStyle$1({
 	      size: props.size,
@@ -6979,7 +7047,7 @@
 	      const el = e.currentTarget;
 	      if (!el)
 	        return;
-	      barStore.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+	      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
 	    };
 	    const clickTrackHandler = (e) => {
 	      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
@@ -6994,7 +7062,7 @@
 	      cursorDown = true;
 	      document.addEventListener("mousemove", mouseMoveDocumentHandler);
 	      document.addEventListener("mouseup", mouseUpDocumentHandler);
-	      onselectstartStore = document.onselectstart;
+	      originalOnSelectStart = document.onselectstart;
 	      document.onselectstart = () => false;
 	    };
 	    const mouseMoveDocumentHandler = (e) => {
@@ -7002,7 +7070,7 @@
 	        return;
 	      if (cursorDown === false)
 	        return;
-	      const prevPage = barStore.value[bar.value.axis];
+	      const prevPage = thumbState.value[bar.value.axis];
 	      if (!prevPage)
 	        return;
 	      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
@@ -7012,7 +7080,7 @@
 	    };
 	    const mouseUpDocumentHandler = () => {
 	      cursorDown = false;
-	      barStore.value[bar.value.axis] = 0;
+	      thumbState.value[bar.value.axis] = 0;
 	      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
 	      document.removeEventListener("mouseup", mouseUpDocumentHandler);
 	      restoreOnselectstart();
@@ -7032,12 +7100,13 @@
 	      document.removeEventListener("mouseup", mouseUpDocumentHandler);
 	    });
 	    const restoreOnselectstart = () => {
-	      if (document.onselectstart !== onselectstartStore)
-	        document.onselectstart = onselectstartStore;
+	      if (document.onselectstart !== originalOnSelectStart)
+	        document.onselectstart = originalOnSelectStart;
 	    };
 	    useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
 	    useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
 	    return {
+	      ns,
 	      instance,
 	      thumb,
 	      bar,
@@ -7048,26 +7117,95 @@
 	    };
 	  }
 	});
-	function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-scrollbar-fade" }, {
+	function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+	  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]]);
+
+	const barProps = buildProps({
+	  always: {
+	    type: Boolean,
+	    default: true
+	  },
+	  width: {
+	    type: String,
+	    default: ""
+	  },
+	  height: {
+	    type: String,
+	    default: ""
+	  },
+	  ratioX: {
+	    type: Number,
+	    default: 1
+	  },
+	  ratioY: {
+	    type: Number,
+	    default: 1
+	  }
+	});
+
+	const _sfc_main$25 = vue.defineComponent({
+	  components: {
+	    Thumb
+	  },
+	  props: barProps,
+	  setup(props) {
+	    const moveX = vue.ref(0);
+	    const moveY = vue.ref(0);
+	    const GAP = 4;
+	    const handleScroll = (wrap) => {
+	      if (wrap) {
+	        const offsetHeight = wrap.offsetHeight - GAP;
+	        const offsetWidth = wrap.offsetWidth - GAP;
+	        moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY;
+	        moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX;
+	      }
+	    };
+	    return {
+	      handleScroll,
+	      moveX,
+	      moveY
+	    };
+	  }
+	});
+	function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
+	  const _component_thumb = vue.resolveComponent("thumb");
+	  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+	    vue.createVNode(_component_thumb, {
+	      move: _ctx.moveX,
+	      ratio: _ctx.ratioX,
+	      size: _ctx.width,
+	      always: _ctx.always
+	    }, null, 8, ["move", "ratio", "size", "always"]),
+	    vue.createVNode(_component_thumb, {
+	      move: _ctx.moveY,
+	      ratio: _ctx.ratioY,
+	      size: _ctx.height,
+	      vertical: "",
+	      always: _ctx.always
+	    }, null, 8, ["move", "ratio", "size", "always"])
+	  ], 64);
 	}
 	var Bar = /* @__PURE__ */ _export_sfc$1(_sfc_main$25, [["render", _sfc_render$20]]);
 
@@ -7129,6 +7267,7 @@
 	  props: scrollbarProps,
 	  emits: scrollbarEmits,
 	  setup(props, { emit }) {
+	    const ns = useNamespace("scrollbar");
 	    let stopResizeObserver = void 0;
 	    let stopResizeListener = void 0;
 	    const scrollbar$ = vue.ref();
@@ -7136,6 +7275,7 @@
 	    const resize$ = vue.ref();
 	    const sizeWidth = vue.ref("0");
 	    const sizeHeight = vue.ref("0");
+	    const barRef = vue.ref();
 	    const moveX = vue.ref(0);
 	    const moveY = vue.ref(0);
 	    const ratioY = vue.ref(1);
@@ -7150,11 +7290,9 @@
 	      return [props.wrapStyle, style2];
 	    });
 	    const handleScroll = () => {
+	      var _a;
 	      if (wrap$.value) {
-	        const offsetHeight = wrap$.value.offsetHeight - GAP;
-	        const offsetWidth = wrap$.value.offsetWidth - GAP;
-	        moveY.value = wrap$.value.scrollTop * 100 / offsetHeight * ratioY.value;
-	        moveX.value = wrap$.value.scrollLeft * 100 / offsetWidth * ratioX.value;
+	        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
 	        emit("scroll", {
 	          scrollTop: wrap$.value.scrollTop,
 	          scrollLeft: wrap$.value.scrollLeft
@@ -7205,9 +7343,11 @@
 	        vue.nextTick(() => update());
 	    });
 	    return {
+	      ns,
 	      scrollbar$,
 	      wrap$,
 	      resize$,
+	      barRef,
 	      moveX,
 	      moveY,
 	      ratioX,
@@ -7222,26 +7362,25 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1d = {
-	  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$1d, [
+	  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(() => [
@@ -7250,22 +7389,16 @@
 	        _: 3
 	      }, 8, ["class", "style"]))
 	    ], 38),
-	    !_ctx.native ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-	      vue.createVNode(_component_bar, {
-	        move: _ctx.moveX,
-	        ratio: _ctx.ratioX,
-	        size: _ctx.sizeWidth,
-	        always: _ctx.always
-	      }, null, 8, ["move", "ratio", "size", "always"]),
-	      vue.createVNode(_component_bar, {
-	        move: _ctx.moveY,
-	        ratio: _ctx.ratioY,
-	        size: _ctx.sizeHeight,
-	        vertical: "",
-	        always: _ctx.always
-	      }, null, 8, ["move", "ratio", "size", "always"])
-	    ], 64)) : vue.createCommentVNode("v-if", true)
-	  ], 512);
+	    !_ctx.native ? (vue.openBlock(), vue.createBlock(_component_bar, {
+	      key: 0,
+	      ref: "barRef",
+	      height: _ctx.sizeHeight,
+	      width: _ctx.sizeWidth,
+	      always: _ctx.always,
+	      "ratio-x": _ctx.ratioX,
+	      "ratio-y": _ctx.ratioY
+	    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
+	  ], 2);
 	}
 	var Scrollbar$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$24, [["render", _sfc_render$1$]]);
 
@@ -9186,19 +9319,19 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1c = {
+	const _hoisted_1$1b = {
 	  ref: "arrowRef",
 	  class: "el-popper__arrow",
 	  "data-popper-arrow": ""
 	};
 	function _sfc_render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1c, null, 512);
+	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1b, null, 512);
 	}
 	var ElPopperArrow = /* @__PURE__ */ _export_sfc$1(_sfc_main$22, [["render", _sfc_render$1Z]]);
 
-	const NAME$1 = "ElOnlyChild";
+	const NAME = "ElOnlyChild";
 	const OnlyChild = vue.defineComponent({
-	  name: NAME$1,
+	  name: NAME,
 	  setup(_, { slots, attrs }) {
 	    var _a;
 	    const forwardRefInjection = vue.inject(FORWARD_REF_INJECTION_KEY, void 0);
@@ -9477,6 +9610,23 @@
 	}
 	var ElPopperContent = /* @__PURE__ */ _export_sfc$1(_sfc_main$20, [["render", _sfc_render$1X]]);
 
+	function useDeprecateAppendToBody(scope, from) {
+	  const vm = vue.getCurrentInstance();
+	  const compatTeleported = vue.computed(() => {
+	    return isBool(vm.props[from]) ? vm.props[from] : vm.props.teleported;
+	  });
+	  useDeprecated({
+	    scope,
+	    from,
+	    replacement: "teleported",
+	    version: "2.1.0",
+	    ref: "https://element-plus.org/en-US/component/tooltip.html#attributes"
+	  }, vue.computed(() => isBool(vm.props[from])));
+	  return {
+	    compatTeleported
+	  };
+	}
+
 	const ElPopper = withInstall(Popper);
 
 	const _sfc_main$1$ = vue.defineComponent({
@@ -9892,8 +10042,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1b = ["innerHTML"];
-	const _hoisted_2$S = { key: 1 };
+	const _hoisted_1$1a = ["innerHTML"];
+	const _hoisted_2$R = { key: 1 };
 	function _sfc_render$1T(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_tooltip_trigger = vue.resolveComponent("el-tooltip-trigger");
 	  const _component_el_popper_arrow = vue.resolveComponent("el-popper-arrow");
@@ -9942,7 +10092,7 @@
 	            _ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("span", {
 	              key: 0,
 	              innerHTML: _ctx.content
-	            }, null, 8, _hoisted_1$1b)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$S, vue.toDisplayString(_ctx.content), 1))
+	            }, null, 8, _hoisted_1$1a)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$R, vue.toDisplayString(_ctx.content), 1))
 	          ]),
 	          _ctx.compatShowArrow ? (vue.openBlock(), vue.createBlock(_component_el_popper_arrow, {
 	            key: 0,
@@ -9959,8 +10109,9 @@
 
 	const ElTooltip = withInstall(Tooltip);
 
+	const COMPONENT_NAME$e = "ElAutocomplete";
 	const _sfc_main$1X = vue.defineComponent({
-	  name: "ElAutocomplete",
+	  name: COMPONENT_NAME$e,
 	  components: {
 	    ElTooltip,
 	    ElInput,
@@ -10021,8 +10172,9 @@
 	    },
 	    popperAppendToBody: {
 	      type: Boolean,
-	      default: true
+	      default: void 0
 	    },
+	    teleported: useTooltipContentProps.teleported,
 	    highlightFirstItem: {
 	      type: Boolean,
 	      default: false
@@ -10039,6 +10191,7 @@
 	  ],
 	  setup(props, ctx) {
 	    const ns = useNamespace("autocomplete");
+	    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$e, "popperAppendToBody");
 	    const attrs = useAttrs();
 	    const suggestions = vue.ref([]);
 	    const highlightedIndex = vue.ref(-1);
@@ -10186,6 +10339,7 @@
 	      id,
 	      suggestionVisible,
 	      suggestionLoading,
+	      compatTeleported,
 	      getData,
 	      handleInput,
 	      handleChange,
@@ -10202,8 +10356,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$1a = ["aria-expanded", "aria-owns"];
-	const _hoisted_2$R = { key: 0 };
+	const _hoisted_1$19 = ["aria-expanded", "aria-owns"];
+	const _hoisted_2$Q = { key: 0 };
 	const _hoisted_3$C = ["id", "aria-selected", "onClick"];
 	function _sfc_render$1S(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_input = vue.resolveComponent("el-input");
@@ -10219,7 +10373,7 @@
 	    placement: _ctx.placement,
 	    "fallback-placements": ["bottom-start", "top-start"],
 	    "popper-class": `${_ctx.ns.e("popper")} ${_ctx.popperClass}`,
-	    "append-to-body": _ctx.popperAppendToBody,
+	    teleported: _ctx.compatTeleported,
 	    "gpu-acceleration": false,
 	    pure: "",
 	    "manual-mode": "",
@@ -10244,7 +10398,7 @@
 	          role: "listbox"
 	        }, {
 	          default: vue.withCtx(() => [
-	            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$R, [
+	            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$Q, [
 	              vue.createVNode(_component_el_icon, { class: "is-loading" }, {
 	                default: vue.withCtx(() => [
 	                  vue.createVNode(_component_loading)
@@ -10318,12 +10472,12 @@
 	            ])
 	          } : void 0
 	        ]), 1040, ["model-value", "onInput", "onChange", "onFocus", "onBlur", "onClear", "onKeydown"])
-	      ], 14, _hoisted_1$1a)), [
+	      ], 14, _hoisted_1$19)), [
 	        [_directive_clickoutside, _ctx.close]
 	      ])
 	    ]),
 	    _: 3
-	  }, 8, ["visible", "placement", "popper-class", "append-to-body", "transition", "onShow"]);
+	  }, 8, ["visible", "placement", "popper-class", "teleported", "transition", "onShow"]);
 	}
 	var Autocomplete = /* @__PURE__ */ _export_sfc$1(_sfc_main$1X, [["render", _sfc_render$1S]]);
 
@@ -10386,9 +10540,9 @@
 	    });
 	    const sizeStyle = vue.computed(() => {
 	      const { size } = props;
-	      return {
-	        "--el-avatar-size": isNumber(size) ? addUnit(size) : void 0
-	      };
+	      return isNumber(size) ? {
+	        "--el-avatar-size": addUnit(size)
+	      } : void 0;
 	    });
 	    const fitStyle = vue.computed(() => ({
 	      objectFit: props.fit
@@ -10407,7 +10561,7 @@
 	    };
 	  }
 	});
-	const _hoisted_1$19 = ["src", "alt", "srcset"];
+	const _hoisted_1$18 = ["src", "alt", "srcset"];
 	function _sfc_render$1R(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
 	  return vue.openBlock(), vue.createElementBlock("span", {
@@ -10421,7 +10575,7 @@
 	      srcset: _ctx.srcSet,
 	      style: vue.normalizeStyle(_ctx.fitStyle),
 	      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-	    }, null, 44, _hoisted_1$19)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+	    }, null, 44, _hoisted_1$18)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
 	      default: vue.withCtx(() => [
 	        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
 	      ]),
@@ -10458,9 +10612,9 @@
 	  click: (evt) => evt instanceof MouseEvent
 	};
 
-	const COMPONENT_NAME$8 = "ElBacktop";
+	const COMPONENT_NAME$d = "ElBacktop";
 	const _sfc_main$1V = vue.defineComponent({
-	  name: COMPONENT_NAME$8,
+	  name: COMPONENT_NAME$d,
 	  components: {
 	    ElIcon,
 	    CaretTop: caretTop
@@ -10506,7 +10660,7 @@
 	      if (props.target) {
 	        el.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
 	        if (!el.value) {
-	          throwError(COMPONENT_NAME$8, `target is not existed: ${props.target}`);
+	          throwError(COMPONENT_NAME$d, `target is not existed: ${props.target}`);
 	        }
 	        container.value = el.value;
 	      }
@@ -10593,7 +10747,7 @@
 	    };
 	  }
 	});
-	const _hoisted_1$18 = ["textContent"];
+	const _hoisted_1$17 = ["textContent"];
 	function _sfc_render$1P(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("div", {
 	    class: vue.normalizeClass(_ctx.ns.b())
@@ -10609,7 +10763,7 @@
 	            _ctx.ns.is("dot", _ctx.isDot)
 	          ]),
 	          textContent: vue.toDisplayString(_ctx.content)
-	        }, null, 10, _hoisted_1$18), [
+	        }, null, 10, _hoisted_1$17), [
 	          [vue.vShow, !_ctx.hidden && (_ctx.content || _ctx.content === "0" || _ctx.isDot)]
 	        ])
 	      ]),
@@ -10674,9 +10828,9 @@
 	  }
 	});
 
-	const COMPONENT_NAME$7 = "ElBreadcrumbItem";
+	const COMPONENT_NAME$c = "ElBreadcrumbItem";
 	const _sfc_main$1S = vue.defineComponent({
-	  name: COMPONENT_NAME$7,
+	  name: COMPONENT_NAME$c,
 	  components: {
 	    ElIcon
 	  },
@@ -11988,7 +12142,7 @@
 	    };
 	  }
 	});
-	const _hoisted_1$17 = ["disabled", "autofocus", "type"];
+	const _hoisted_1$16 = ["disabled", "autofocus", "type"];
 	function _sfc_render$1M(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
 	  return vue.openBlock(), vue.createElementBlock("button", {
@@ -12031,7 +12185,7 @@
 	    }, [
 	      vue.renderSlot(_ctx.$slots, "default")
 	    ], 2)) : vue.createCommentVNode("v-if", true)
-	  ], 14, _hoisted_1$17);
+	  ], 14, _hoisted_1$16);
 	}
 	var Button = /* @__PURE__ */ _export_sfc$1(_sfc_main$1R, [["render", _sfc_render$1M]]);
 
@@ -12678,8 +12832,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$16 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
-	const _hoisted_2$Q = { class: "el-range-separator" };
+	const _hoisted_1$15 = ["id", "name", "placeholder", "value", "disabled", "readonly"];
+	const _hoisted_2$P = { class: "el-range-separator" };
 	const _hoisted_3$B = ["id", "name", "placeholder", "value", "disabled", "readonly"];
 	function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -12790,9 +12944,9 @@
 	          onInput: _cache[1] || (_cache[1] = (...args) => _ctx.handleStartInput && _ctx.handleStartInput(...args)),
 	          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.handleStartChange && _ctx.handleStartChange(...args)),
 	          onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
-	        }, null, 40, _hoisted_1$16),
+	        }, null, 40, _hoisted_1$15),
 	        vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
-	          vue.createElementVNode("span", _hoisted_2$Q, vue.toDisplayString(_ctx.rangeSeparator), 1)
+	          vue.createElementVNode("span", _hoisted_2$P, vue.toDisplayString(_ctx.rangeSeparator), 1)
 	        ]),
 	        vue.createElementVNode("input", {
 	          id: _ctx.id && _ctx.id[1],
@@ -13164,8 +13318,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$15 = ["onClick"];
-	const _hoisted_2$P = ["onMouseenter"];
+	const _hoisted_1$14 = ["onClick"];
+	const _hoisted_2$O = ["onMouseenter"];
 	const _hoisted_3$A = { class: "el-time-spinner__list" };
 	function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
@@ -13201,7 +13355,7 @@
 	              ], 2112)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
 	                vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1)
 	              ], 2112))
-	            ], 10, _hoisted_1$15);
+	            ], 10, _hoisted_1$14);
 	          }), 128))
 	        ]),
 	        _: 2
@@ -13248,7 +13402,7 @@
 	            ], 2);
 	          }), 128))
 	        ])
-	      ], 40, _hoisted_2$P);
+	      ], 40, _hoisted_2$O);
 	    }), 128)) : vue.createCommentVNode("v-if", true)
 	  ], 2);
 	}
@@ -13416,16 +13570,16 @@
 	    };
 	  }
 	});
-	const _hoisted_1$14 = {
+	const _hoisted_1$13 = {
 	  key: 0,
 	  class: "el-time-panel"
 	};
-	const _hoisted_2$O = { class: "el-time-panel__footer" };
+	const _hoisted_2$N = { class: "el-time-panel__footer" };
 	function _sfc_render$1I(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_time_spinner = vue.resolveComponent("time-spinner");
 	  return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
 	    default: vue.withCtx(() => [
-	      _ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$14, [
+	      _ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$13, [
 	        vue.createElementVNode("div", {
 	          class: vue.normalizeClass(["el-time-panel__content", { "has-seconds": _ctx.showSeconds }])
 	        }, [
@@ -13444,7 +13598,7 @@
 	            onSelectRange: _ctx.setSelectionRange
 	          }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
 	        ], 2),
-	        vue.createElementVNode("div", _hoisted_2$O, [
+	        vue.createElementVNode("div", _hoisted_2$N, [
 	          vue.createElementVNode("button", {
 	            type: "button",
 	            class: "el-time-panel__btn cancel",
@@ -14273,21 +14427,21 @@
 	    };
 	  }
 	});
-	const _hoisted_1$13 = {
+	const _hoisted_1$12 = {
 	  key: 0,
 	  class: "el-time-range-picker el-picker-panel"
 	};
-	const _hoisted_2$N = { class: "el-time-range-picker__content" };
+	const _hoisted_2$M = { class: "el-time-range-picker__content" };
 	const _hoisted_3$z = { class: "el-time-range-picker__cell" };
 	const _hoisted_4$m = { class: "el-time-range-picker__header" };
-	const _hoisted_5$e = { class: "el-time-range-picker__cell" };
-	const _hoisted_6$c = { class: "el-time-range-picker__header" };
+	const _hoisted_5$d = { class: "el-time-range-picker__cell" };
+	const _hoisted_6$b = { class: "el-time-range-picker__header" };
 	const _hoisted_7$9 = { class: "el-time-panel__footer" };
 	const _hoisted_8$8 = ["disabled"];
 	function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_time_spinner = vue.resolveComponent("time-spinner");
-	  return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$13, [
-	    vue.createElementVNode("div", _hoisted_2$N, [
+	  return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$12, [
+	    vue.createElementVNode("div", _hoisted_2$M, [
 	      vue.createElementVNode("div", _hoisted_3$z, [
 	        vue.createElementVNode("div", _hoisted_4$m, vue.toDisplayString(_ctx.t("el.datepicker.startTime")), 1),
 	        vue.createElementVNode("div", {
@@ -14309,8 +14463,8 @@
 	          }, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
 	        ], 2)
 	      ]),
-	      vue.createElementVNode("div", _hoisted_5$e, [
-	        vue.createElementVNode("div", _hoisted_6$c, vue.toDisplayString(_ctx.t("el.datepicker.endTime")), 1),
+	      vue.createElementVNode("div", _hoisted_5$d, [
+	        vue.createElementVNode("div", _hoisted_6$b, vue.toDisplayString(_ctx.t("el.datepicker.endTime")), 1),
 	        vue.createElementVNode("div", {
 	          class: vue.normalizeClass([{ "has-seconds": _ctx.showSeconds, "is-arrow": _ctx.arrowControl }, "el-time-range-picker__body el-time-panel__content"])
 	        }, [
@@ -14540,15 +14694,15 @@
 	    };
 	  }
 	});
-	const _hoisted_1$12 = { key: 0 };
-	const _hoisted_2$M = ["onClick"];
+	const _hoisted_1$11 = { key: 0 };
+	const _hoisted_2$L = ["onClick"];
 	function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("table", {
 	    class: vue.normalizeClass([_ctx.nsTable.b(), _ctx.nsTable.is("range", _ctx.isInRange)]),
 	    cellspacing: "0",
 	    cellpadding: "0"
 	  }, [
-	    !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$12, [
+	    !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$11, [
 	      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekDays, (day) => {
 	        return vue.openBlock(), vue.createElementBlock("th", { key: day }, vue.toDisplayString(day), 1);
 	      }), 128))
@@ -14577,7 +14731,7 @@
 	                  vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1)
 	                ])
 	              ], 2)
-	            ], 10, _hoisted_2$M);
+	            ], 10, _hoisted_2$L);
 	          }), 128))
 	        ], 2);
 	      }), 128))
@@ -15214,8 +15368,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$11 = ["onMouseenter", "onClick"];
-	const _hoisted_2$L = { key: 0 };
+	const _hoisted_1$10 = ["onMouseenter", "onClick"];
+	const _hoisted_2$K = { key: 0 };
 	function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_arrow_left = vue.resolveComponent("arrow-left");
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -15304,9 +15458,9 @@
 	          vue.createElementVNode("button", {
 	            class: vue.normalizeClass(_ctx.ns.e("button"))
 	          }, [
-	            _ctx.hasLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$L, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("v-if", true)
+	            _ctx.hasLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$K, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("v-if", true)
 	          ], 2)
-	        ], 42, _hoisted_1$11);
+	        ], 42, _hoisted_1$10);
 	      }), 128))
 	    ], 2)) : vue.createCommentVNode("v-if", true)
 	  ], 34);
@@ -15696,8 +15850,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$10 = ["id", "aria-controls"];
-	const _hoisted_2$K = ["tabindex", "role", "aria-checked"];
+	const _hoisted_1$$ = ["id", "aria-controls"];
+	const _hoisted_2$J = ["tabindex", "role", "aria-checked"];
 	const _hoisted_3$y = ["aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
 	const _hoisted_4$l = ["aria-hidden", "disabled", "value", "name", "tabindex"];
 	function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
@@ -15759,7 +15913,7 @@
 	      }, null, 42, _hoisted_4$l)), [
 	        [vue.vModelCheckbox, _ctx.model]
 	      ])
-	    ], 10, _hoisted_2$K),
+	    ], 10, _hoisted_2$J),
 	    _ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
 	      key: 0,
 	      class: vue.normalizeClass(_ctx.ns.e("label"))
@@ -15769,7 +15923,7 @@
 	        vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
 	      ], 2112)) : vue.createCommentVNode("v-if", true)
 	    ], 2)) : vue.createCommentVNode("v-if", true)
-	  ], 10, _hoisted_1$10);
+	  ], 10, _hoisted_1$$);
 	}
 	var Checkbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$1G, [["render", _sfc_render$1B]]);
 
@@ -15803,8 +15957,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$$ = ["aria-checked", "aria-disabled"];
-	const _hoisted_2$J = ["name", "tabindex", "disabled", "true-value", "false-value"];
+	const _hoisted_1$_ = ["aria-checked", "aria-disabled"];
+	const _hoisted_2$I = ["name", "tabindex", "disabled", "true-value", "false-value"];
 	const _hoisted_3$x = ["name", "tabindex", "disabled", "value"];
 	function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("label", {
@@ -15832,7 +15986,7 @@
 	      onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
 	      onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.focus = true),
 	      onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.focus = false)
-	    }, null, 42, _hoisted_2$J)), [
+	    }, null, 42, _hoisted_2$I)), [
 	      [vue.vModelCheckbox, _ctx.model]
 	    ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
 	      key: 1,
@@ -15858,7 +16012,7 @@
 	        vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
 	      ])
 	    ], 6)) : vue.createCommentVNode("v-if", true)
-	  ], 10, _hoisted_1$$);
+	  ], 10, _hoisted_1$_);
 	}
 	var CheckboxButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$1F, [["render", _sfc_render$1A]]);
 
@@ -16023,8 +16177,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$_ = ["aria-checked", "aria-disabled", "tabindex"];
-	const _hoisted_2$I = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-radio__inner" }, null, -1);
+	const _hoisted_1$Z = ["aria-checked", "aria-disabled", "tabindex"];
+	const _hoisted_2$H = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-radio__inner" }, null, -1);
 	const _hoisted_3$w = ["value", "name", "disabled"];
 	function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("label", {
@@ -16047,7 +16201,7 @@
 	        "is-checked": _ctx.modelValue === _ctx.label
 	      }])
 	    }, [
-	      _hoisted_2$I,
+	      _hoisted_2$H,
 	      vue.withDirectives(vue.createElementVNode("input", {
 	        ref: "radioRef",
 	        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event),
@@ -16074,7 +16228,7 @@
 	        vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
 	      ])
 	    ], 32)
-	  ], 42, _hoisted_1$_);
+	  ], 42, _hoisted_1$Z);
 	}
 	var Radio = /* @__PURE__ */ _export_sfc$1(_sfc_main$1D, [["render", _sfc_render$1z]]);
 
@@ -16120,8 +16274,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$Z = ["aria-checked", "aria-disabled", "tabindex"];
-	const _hoisted_2$H = ["value", "name", "disabled"];
+	const _hoisted_1$Y = ["aria-checked", "aria-disabled", "tabindex"];
+	const _hoisted_2$G = ["value", "name", "disabled"];
 	function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("label", {
 	    class: vue.normalizeClass(["el-radio-button", [
@@ -16149,7 +16303,7 @@
 	      tabindex: "-1",
 	      onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.focus = true),
 	      onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.focus = false)
-	    }, null, 40, _hoisted_2$H), [
+	    }, null, 40, _hoisted_2$G), [
 	      [vue.vModelRadio, _ctx.modelValue]
 	    ]),
 	    vue.createElementVNode("span", {
@@ -16162,7 +16316,7 @@
 	        vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
 	      ])
 	    ], 36)
-	  ], 42, _hoisted_1$Z);
+	  ], 42, _hoisted_1$Y);
 	}
 	var RadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$1C, [["render", _sfc_render$1y]]);
 
@@ -16391,8 +16545,8 @@
 	    };
 	  }
 	});
-	const _hoisted_1$Y = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
-	const _hoisted_2$G = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
+	const _hoisted_1$X = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
+	const _hoisted_2$F = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
 	function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_checkbox = vue.resolveComponent("el-checkbox");
 	  const _component_el_radio = vue.resolveComponent("el-radio");
@@ -16440,7 +16594,7 @@
 	    }, {
 	      default: vue.withCtx(() => [
 	        vue.createCommentVNode("\n        Add an empty element to avoid render label,\n        do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n      "),
-	        _hoisted_2$G
+	        _hoisted_2$F
 	      ]),
 	      _: 1
 	    }, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
@@ -16474,7 +16628,7 @@
 	        _: 1
 	      }))
 	    ], 2112)) : vue.createCommentVNode("v-if", true)
-	  ], 42, _hoisted_1$Y);
+	  ], 42, _hoisted_1$X);
 	}
 	var ElCascaderNode = /* @__PURE__ */ _export_sfc$1(_sfc_main$1A, [["render", _sfc_render$1w]]);
 
@@ -16554,11 +16708,11 @@
 	    };
 	  }
 	});
-	const _hoisted_1$X = {
+	const _hoisted_1$W = {
 	  key: 0,
 	  class: "el-cascader-menu__empty-text"
 	};
-	const _hoisted_2$F = {
+	const _hoisted_2$E = {
 	  key: 1,
 	  class: "el-cascader-menu__empty-text"
 	};
@@ -16593,7 +16747,7 @@
 	            onExpand: _ctx.handleExpand
 	          }, null, 8, ["node", "menu-id", "onExpand"]);
 	        }), 128)),
-	        _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
+	        _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
 	          vue.createVNode(_component_el_icon, {
 	            size: "14",
 	            class: "is-loading"
@@ -16604,7 +16758,7 @@
 	            _: 1
 	          }),
 	          vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("el.cascader.loading")), 1)
-	        ])) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$F, vue.toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_3$v, null, 512)) : vue.createCommentVNode("v-if", true)
+	        ])) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$E, vue.toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_3$v, null, 512)) : vue.createCommentVNode("v-if", true)
 	      ];
 	    }),
 	    _: 1
@@ -17147,15 +17301,16 @@
 	  emits: tagEmits,
 	  setup(props, { emit }) {
 	    const tagSize = useSize();
+	    const ns = useNamespace("tag");
 	    const classes = vue.computed(() => {
 	      const { type, hit, effect, closable } = props;
 	      return [
-	        "el-tag",
-	        closable && "is-closable",
-	        type ? `el-tag--${type}` : "",
-	        tagSize.value ? `el-tag--${tagSize.value}` : "",
-	        effect ? `el-tag--${effect}` : "",
-	        hit && "is-hit"
+	        ns.b(),
+	        ns.is("closable", closable),
+	        ns.m(type),
+	        ns.m(tagSize.value),
+	        ns.m(effect),
+	        ns.is("hit", hit)
 	      ];
 	    });
 	    const handleClose = (event) => {
@@ -17166,14 +17321,13 @@
 	      emit("click", event);
 	    };
 	    return {
+	      ns,
 	      classes,
 	      handleClose,
 	      handleClick
 	    };
 	  }
 	});
-	const _hoisted_1$W = { class: "el-tag__content" };
-	const _hoisted_2$E = { class: "el-tag__content" };
 	function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_close = vue.resolveComponent("close");
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -17183,22 +17337,24 @@
 	    style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
 	    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
 	  }, [
-	    vue.createElementVNode("span", _hoisted_1$W, [
+	    vue.createElementVNode("span", {
+	      class: vue.normalizeClass(_ctx.ns.e("content"))
+	    }, [
 	      vue.renderSlot(_ctx.$slots, "default")
-	    ]),
+	    ], 2),
 	    _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	      key: 0,
-	      class: "el-tag__close",
+	      class: vue.normalizeClass(_ctx.ns.e("close")),
 	      onClick: _ctx.handleClose
 	    }, {
 	      default: vue.withCtx(() => [
 	        vue.createVNode(_component_close)
 	      ]),
 	      _: 1
-	    }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+	    }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
 	  ], 6)) : (vue.openBlock(), vue.createBlock(vue.Transition, {
 	    key: 1,
-	    name: "el-zoom-in-center"
+	    name: `${_ctx.ns.namespace.value}-zoom-in-center`
 	  }, {
 	    default: vue.withCtx(() => [
 	      vue.createElementVNode("span", {
@@ -17206,23 +17362,25 @@
 	        style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
 	        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
 	      }, [
-	        vue.createElementVNode("span", _hoisted_2$E, [
+	        vue.createElementVNode("span", {
+	          class: vue.normalizeClass(_ctx.ns.e("content"))
+	        }, [
 	          vue.renderSlot(_ctx.$slots, "default")
-	        ]),
+	        ], 2),
 	        _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	          key: 0,
-	          class: "el-tag__close",
+	          class: vue.normalizeClass(_ctx.ns.e("close")),
 	          onClick: _ctx.handleClose
 	        }, {
 	          default: vue.withCtx(() => [
 	            vue.createVNode(_component_close)
 	          ]),
 	          _: 1
-	        }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+	        }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
 	      ], 6)
 	    ]),
 	    _: 3
-	  }));
+	  }, 8, ["name"]));
 	}
 	var Tag = /* @__PURE__ */ _export_sfc$1(_sfc_main$1x, [["render", _sfc_render$1t]]);
 
@@ -17250,8 +17408,9 @@
 	    }
 	  ]
 	};
+	const COMPONENT_NAME$b = "ElCascader";
 	const _sfc_main$1w = vue.defineComponent({
-	  name: "ElCascader",
+	  name: COMPONENT_NAME$b,
 	  components: {
 	    ElCascaderPanel: _CascaderPanel,
 	    ElInput,
@@ -17305,8 +17464,9 @@
 	    },
 	    popperAppendToBody: {
 	      type: Boolean,
-	      default: true
-	    }
+	      default: void 0
+	    },
+	    teleported: useTooltipContentProps.teleported
 	  },
 	  emits: [
 	    UPDATE_MODEL_EVENT,
@@ -17320,6 +17480,7 @@
 	  setup(props, { emit }) {
 	    let inputInitialHeight = 0;
 	    let pressDeleteCount = 0;
+	    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$b, "popperAppendToBody");
 	    const { t } = useLocale();
 	    const elForm = vue.inject(elFormKey, {});
 	    const elFormItem = vue.inject(elFormItemKey, {});
@@ -17633,6 +17794,7 @@
 	      multiple,
 	      readonly,
 	      clearBtnVisible,
+	      compatTeleported,
 	      t,
 	      togglePopperVisible,
 	      hideSuggestionPanel,
@@ -17673,7 +17835,7 @@
 	    ref: "tooltipRef",
 	    visible: _ctx.popperVisible,
 	    "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => _ctx.popperVisible = $event),
-	    "append-to-body": _ctx.popperAppendToBody,
+	    teleported: _ctx.compatTeleported,
 	    "popper-class": `el-cascader__dropdown ${_ctx.popperClass}`,
 	    "popper-options": _ctx.popperOptions,
 	    "fallback-placements": [
@@ -17711,7 +17873,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,
@@ -17782,12 +17943,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)), [
@@ -17845,7 +18001,7 @@
 	      ]) : vue.createCommentVNode("v-if", true)
 	    ]),
 	    _: 3
-	  }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "onHide"]);
+	  }, 8, ["visible", "teleported", "popper-class", "popper-options", "onHide"]);
 	}
 	var Cascader = /* @__PURE__ */ _export_sfc$1(_sfc_main$1w, [["render", _sfc_render$1s]]);
 
@@ -20127,8 +20283,8 @@
 	const _hoisted_2$y = { class: "cell" };
 	const _hoisted_3$p = { class: "cell" };
 	const _hoisted_4$g = { class: "cell" };
-	const _hoisted_5$d = { class: "cell" };
-	const _hoisted_6$b = { class: "cell" };
+	const _hoisted_5$c = { class: "cell" };
+	const _hoisted_6$a = { class: "cell" };
 	const _hoisted_7$8 = { class: "cell" };
 	const _hoisted_8$7 = { class: "cell" };
 	const _hoisted_9$6 = { class: "cell" };
@@ -20167,12 +20323,12 @@
 	        vue.createElementVNode("td", {
 	          class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 4)])
 	        }, [
-	          vue.createElementVNode("a", _hoisted_5$d, vue.toDisplayString(_ctx.startYear + 4), 1)
+	          vue.createElementVNode("a", _hoisted_5$c, vue.toDisplayString(_ctx.startYear + 4), 1)
 	        ], 2),
 	        vue.createElementVNode("td", {
 	          class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 5)])
 	        }, [
-	          vue.createElementVNode("a", _hoisted_6$b, vue.toDisplayString(_ctx.startYear + 5), 1)
+	          vue.createElementVNode("a", _hoisted_6$a, vue.toDisplayString(_ctx.startYear + 5), 1)
 	        ], 2),
 	        vue.createElementVNode("td", {
 	          class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 6)])
@@ -20623,11 +20779,11 @@
 	};
 	const _hoisted_3$o = ["onClick"];
 	const _hoisted_4$f = { class: "el-picker-panel__body" };
-	const _hoisted_5$c = {
+	const _hoisted_5$b = {
 	  key: 0,
 	  class: "el-date-picker__time-header"
 	};
-	const _hoisted_6$a = { class: "el-date-picker__editor-wrap" };
+	const _hoisted_6$9 = { class: "el-date-picker__editor-wrap" };
 	const _hoisted_7$7 = { class: "el-date-picker__editor-wrap" };
 	const _hoisted_8$6 = ["aria-label"];
 	const _hoisted_9$5 = ["aria-label"];
@@ -20669,8 +20825,8 @@
 	        }), 128))
 	      ])) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("div", _hoisted_4$f, [
-	        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, [
-	          vue.createElementVNode("span", _hoisted_6$a, [
+	        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$b, [
+	          vue.createElementVNode("span", _hoisted_6$9, [
 	            vue.createVNode(_component_el_input, {
 	              placeholder: _ctx.t("el.datepicker.selectDate"),
 	              "model-value": _ctx.visibleDate,
@@ -21275,11 +21431,11 @@
 	};
 	const _hoisted_3$n = ["onClick"];
 	const _hoisted_4$e = { class: "el-picker-panel__body" };
-	const _hoisted_5$b = {
+	const _hoisted_5$a = {
 	  key: 0,
 	  class: "el-date-range-picker__time-header"
 	};
-	const _hoisted_6$9 = { class: "el-date-range-picker__editors-wrap" };
+	const _hoisted_6$8 = { class: "el-date-range-picker__editors-wrap" };
 	const _hoisted_7$6 = { class: "el-date-range-picker__time-picker-wrap" };
 	const _hoisted_8$5 = { class: "el-date-range-picker__time-picker-wrap" };
 	const _hoisted_9$4 = { class: "el-date-range-picker__editors-wrap is-right" };
@@ -21329,8 +21485,8 @@
 	        }), 128))
 	      ])) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("div", _hoisted_4$e, [
-	        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$b, [
-	          vue.createElementVNode("span", _hoisted_6$9, [
+	        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [
+	          vue.createElementVNode("span", _hoisted_6$8, [
 	            vue.createElementVNode("span", _hoisted_7$6, [
 	              vue.createVNode(_component_el_input, {
 	                size: "small",
@@ -21758,8 +21914,8 @@
 	};
 	const _hoisted_3$m = ["onClick"];
 	const _hoisted_4$d = { class: "el-picker-panel__body" };
-	const _hoisted_5$a = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
-	const _hoisted_6$8 = { class: "el-date-range-picker__header" };
+	const _hoisted_5$9 = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
+	const _hoisted_6$7 = { class: "el-date-range-picker__header" };
 	const _hoisted_7$5 = ["disabled"];
 	const _hoisted_8$4 = { class: "el-picker-panel__content el-date-range-picker__content is-right" };
 	const _hoisted_9$3 = { class: "el-date-range-picker__header" };
@@ -21789,8 +21945,8 @@
 	        }), 128))
 	      ])) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("div", _hoisted_4$d, [
-	        vue.createElementVNode("div", _hoisted_5$a, [
-	          vue.createElementVNode("div", _hoisted_6$8, [
+	        vue.createElementVNode("div", _hoisted_5$9, [
+	          vue.createElementVNode("div", _hoisted_6$7, [
 	            vue.createElementVNode("button", {
 	              type: "button",
 	              class: "el-picker-panel__icon-btn d-arrow-left",
@@ -22416,6 +22572,10 @@
 	    type: Boolean,
 	    default: false
 	  },
+	  draggable: {
+	    type: Boolean,
+	    default: false
+	  },
 	  lockScroll: {
 	    type: Boolean,
 	    default: true
@@ -22606,23 +22766,30 @@
 	  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,
 	  class: "el-dialog__body"
 	};
-	const _hoisted_5$9 = {
+	const _hoisted_5$8 = {
 	  key: 1,
 	  class: "el-dialog__footer"
 	};
@@ -22660,6 +22827,7 @@
 	                  "el-dialog",
 	                  {
 	                    "is-fullscreen": _ctx.fullscreen,
+	                    "is-draggable": _ctx.draggable,
 	                    "el-dialog--center": _ctx.center
 	                  },
 	                  _ctx.customClass
@@ -22689,11 +22857,11 @@
 	                      _: 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),
-	                _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$9, [
+	                _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
 	                  vue.renderSlot(_ctx.$slots, "footer")
 	                ])) : vue.createCommentVNode("v-if", true)
 	              ], 14, _hoisted_1$I)), [
@@ -22800,32 +22968,22 @@
 	  emits: drawerEmits,
 	  setup(props, ctx) {
 	    const drawerRef = vue.ref();
+	    const ns = useNamespace("drawer");
 	    const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
 	    const drawerSize = vue.computed(() => typeof props.size === "number" ? `${props.size}px` : props.size);
 	    return {
 	      ...useDialog(props, ctx, drawerRef),
 	      drawerRef,
 	      isHorizontal,
-	      drawerSize
+	      drawerSize,
+	      ns
 	    };
 	  }
 	});
-	const _hoisted_1$H = ["aria-label"];
-	const _hoisted_2$t = {
-	  key: 0,
-	  id: "el-drawer__title",
-	  class: "el-drawer__header"
-	};
+	const _hoisted_1$H = ["aria-labelledby", "aria-label"];
+	const _hoisted_2$t = ["id"];
 	const _hoisted_3$k = ["title"];
 	const _hoisted_4$b = ["aria-label"];
-	const _hoisted_5$8 = {
-	  key: 1,
-	  class: "el-drawer__body"
-	};
-	const _hoisted_6$7 = {
-	  key: 2,
-	  class: "el-drawer__footer"
-	};
 	function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_close = vue.resolveComponent("close");
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -22836,7 +22994,7 @@
 	    disabled: !_ctx.appendToBody
 	  }, [
 	    vue.createVNode(vue.Transition, {
-	      name: "el-drawer-fade",
+	      name: _ctx.ns.b("fade"),
 	      onAfterEnter: _ctx.afterEnter,
 	      onAfterLeave: _ctx.afterLeave,
 	      onBeforeLeave: _ctx.beforeLeave
@@ -22852,15 +23010,19 @@
 	            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
 	              ref: "drawerRef",
 	              "aria-modal": "true",
-	              "aria-labelledby": "el-drawer__title",
+	              "aria-labelledby": _ctx.ns.e("title"),
 	              "aria-label": _ctx.title,
-	              class: vue.normalizeClass(["el-drawer", _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
+	              class: vue.normalizeClass([_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
 	              style: vue.normalizeStyle(_ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize),
 	              role: "dialog",
 	              onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
 	              }, ["stop"]))
 	            }, [
-	              _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$t, [
+	              _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
+	                key: 0,
+	                id: _ctx.ns.e("title"),
+	                class: vue.normalizeClass(_ctx.ns.e("header"))
+	              }, [
 	                vue.renderSlot(_ctx.$slots, "title", {}, () => [
 	                  vue.createElementVNode("span", {
 	                    role: "heading",
@@ -22870,24 +23032,32 @@
 	                _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
 	                  key: 0,
 	                  "aria-label": "close " + (_ctx.title || "drawer"),
-	                  class: "el-drawer__close-btn",
+	                  class: vue.normalizeClass(_ctx.ns.e("close-btn")),
 	                  type: "button",
 	                  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
 	                }, [
-	                  vue.createVNode(_component_el_icon, { class: "el-drawer__close" }, {
+	                  vue.createVNode(_component_el_icon, {
+	                    class: vue.normalizeClass(_ctx.ns.e("close"))
+	                  }, {
 	                    default: vue.withCtx(() => [
 	                      vue.createVNode(_component_close)
 	                    ]),
 	                    _: 1
-	                  })
-	                ], 8, _hoisted_4$b)) : vue.createCommentVNode("v-if", true)
-	              ])) : vue.createCommentVNode("v-if", true),
-	              _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_5$8, [
+	                  }, 8, ["class"])
+	                ], 10, _hoisted_4$b)) : vue.createCommentVNode("v-if", true)
+	              ], 10, _hoisted_2$t)) : vue.createCommentVNode("v-if", true),
+	              _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", {
+	                key: 1,
+	                class: vue.normalizeClass(_ctx.ns.e("body"))
+	              }, [
 	                vue.renderSlot(_ctx.$slots, "default")
-	              ])) : vue.createCommentVNode("v-if", true),
-	              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$7, [
+	              ], 2)) : vue.createCommentVNode("v-if", true),
+	              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+	                key: 2,
+	                class: vue.normalizeClass(_ctx.ns.e("footer"))
+	              }, [
 	                vue.renderSlot(_ctx.$slots, "footer")
-	              ])) : vue.createCommentVNode("v-if", true)
+	              ], 2)) : vue.createCommentVNode("v-if", true)
 	            ], 14, _hoisted_1$H)), [
 	              [_directive_trap_focus]
 	            ])
@@ -22898,7 +23068,7 @@
 	        ])
 	      ]),
 	      _: 3
-	    }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+	    }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
 	  ], 8, ["disabled"]);
 	}
 	var Drawer = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["render", _sfc_render$13]]);
@@ -24098,11 +24268,11 @@
 	};
 	const _hoisted_2$r = ["id"];
 	const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode("stop", {
-	  "stop-color": "#FCFCFD",
+	  "stop-color": "var(--el-empty-fill-color-1)",
 	  offset: "0%"
 	}, null, -1);
 	const _hoisted_4$a = /* @__PURE__ */ vue.createElementVNode("stop", {
-	  "stop-color": "#EEEFF3",
+	  "stop-color": "var(--el-empty-fill-color-4)",
 	  offset: "100%"
 	}, null, -1);
 	const _hoisted_5$7 = [
@@ -24111,11 +24281,11 @@
 	];
 	const _hoisted_6$6 = ["id"];
 	const _hoisted_7$4 = /* @__PURE__ */ vue.createElementVNode("stop", {
-	  "stop-color": "#FCFCFD",
+	  "stop-color": "var(--el-empty-fill-color-1)",
 	  offset: "0%"
 	}, null, -1);
 	const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("stop", {
-	  "stop-color": "#E9EBEF",
+	  "stop-color": "var(--el-empty-fill-color-6)",
 	  offset: "100%"
 	}, null, -1);
 	const _hoisted_9$2 = [
@@ -24141,11 +24311,11 @@
 	const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  id: "Oval-Copy-2",
 	  d: "M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z",
-	  fill: "#F7F8FC"
+	  fill: "var(--el-empty-fill-color-3)"
 	}, null, -1);
 	const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode("polygon", {
 	  id: "Rectangle-Copy-14",
-	  fill: "#E5E7E9",
+	  fill: "var(--el-empty-fill-color-7)",
 	  transform: "translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ",
 	  points: "13 58 53 58 42 45 2 45"
 	}, null, -1);
@@ -24155,19 +24325,19 @@
 	};
 	const _hoisted_17 = /* @__PURE__ */ vue.createElementVNode("polygon", {
 	  id: "Rectangle-Copy-10",
-	  fill: "#E5E7E9",
+	  fill: "var(--el-empty-fill-color-7)",
 	  transform: "translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ",
 	  points: "2.84078316e-14 3 18 3 23 7 5 7"
 	}, null, -1);
 	const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("polygon", {
 	  id: "Rectangle-Copy-11",
-	  fill: "#EDEEF2",
+	  fill: "var(--el-empty-fill-color-5)",
 	  points: "-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"
 	}, null, -1);
 	const _hoisted_19 = ["fill"];
 	const _hoisted_20 = /* @__PURE__ */ vue.createElementVNode("polygon", {
 	  id: "Rectangle-Copy-13",
-	  fill: "#F8F9FB",
+	  fill: "var(--el-empty-fill-color-2)",
 	  transform: "translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ",
 	  points: "24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
 	}, null, -1);
@@ -24182,7 +24352,7 @@
 	const _hoisted_26 = ["mask"];
 	const _hoisted_27 = /* @__PURE__ */ vue.createElementVNode("polygon", {
 	  id: "Rectangle-Copy-18",
-	  fill: "#F8F9FB",
+	  fill: "var(--el-empty-fill-color-2)",
 	  transform: "translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ",
 	  points: "62 45 79 45 70 58 53 58"
 	}, null, -1);
@@ -24241,7 +24411,7 @@
 	          vue.createElementVNode("g", _hoisted_22, [
 	            vue.createElementVNode("mask", {
 	              id: `mask-4-${_ctx.id}`,
-	              fill: "white"
+	              fill: "var(--el-empty-fill-color-0)"
 	            }, [
 	              vue.createElementVNode("use", {
 	                "xlink:href": `#path-3-${_ctx.id}`
@@ -24249,13 +24419,13 @@
 	            ], 8, _hoisted_23),
 	            vue.createElementVNode("use", {
 	              id: "Mask",
-	              fill: "#E0E3E9",
+	              fill: "var(--el-empty-fill-color-8)",
 	              transform: "translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ",
 	              "xlink:href": `#path-3-${_ctx.id}`
 	            }, null, 8, _hoisted_25),
 	            vue.createElementVNode("polygon", {
 	              id: "Rectangle-Copy",
-	              fill: "#D5D7DE",
+	              fill: "var(--el-empty-fill-color-9)",
 	              mask: `url(#mask-4-${_ctx.id})`,
 	              transform: "translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ",
 	              points: "7 0 24 0 20 18 -1.70530257e-13 16"
@@ -26229,7 +26399,7 @@
 	    const { t } = useLocale();
 	    const ns = useNamespace("image-viewer");
 	    const wrapper = vue.ref();
-	    const img = vue.ref();
+	    const imgRefs = vue.ref([]);
 	    const scopeEventListener = vue.effectScope();
 	    const loading = vue.ref(true);
 	    const index = vue.ref(props.initialIndex);
@@ -26256,11 +26426,25 @@
 	    });
 	    const imgStyle = vue.computed(() => {
 	      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+	      let translateX = offsetX / scale;
+	      let translateY = offsetY / scale;
+	      switch (deg % 360) {
+	        case 90:
+	        case -270:
+	          [translateX, translateY] = [translateY, -translateX];
+	          break;
+	        case 180:
+	        case -180:
+	          [translateX, translateY] = [-translateX, -translateY];
+	          break;
+	        case 270:
+	        case -90:
+	          [translateX, translateY] = [-translateY, translateX];
+	          break;
+	      }
 	      const style = {
-	        transform: `scale(${scale}) rotate(${deg}deg)`,
-	        transition: enableTransition ? "transform .3s" : "",
-	        marginLeft: `${offsetX}px`,
-	        marginTop: `${offsetY}px`
+	        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+	        transition: enableTransition ? "transform .3s" : ""
 	      };
 	      if (mode.value.name === Mode.CONTAIN.name) {
 	        style.maxWidth = style.maxHeight = "100%";
@@ -26298,12 +26482,12 @@
 	        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
 	        if (delta > 0) {
 	          handleActions("zoomIn", {
-	            zoomRate: 0.015,
+	            zoomRate: 1.2,
 	            enableTransition: false
 	          });
 	        } else {
 	          handleActions("zoomOut", {
-	            zoomRate: 0.015,
+	            zoomRate: 1.2,
 	            enableTransition: false
 	          });
 	        }
@@ -26326,13 +26510,10 @@
 	    function handleMouseDown(e) {
 	      if (loading.value || e.button !== 0 || !wrapper.value)
 	        return;
+	      transform.value.enableTransition = false;
 	      const { offsetX, offsetY } = transform.value;
 	      const startX = e.pageX;
 	      const startY = e.pageY;
-	      const divLeft = wrapper.value.clientLeft;
-	      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
-	      const divTop = wrapper.value.clientTop;
-	      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
 	      const dragHandler = rafThrottle((ev) => {
 	        transform.value = {
 	          ...transform.value,
@@ -26341,12 +26522,7 @@
 	        };
 	      });
 	      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
-	      useEventListener(document, "mouseup", (evt) => {
-	        const mouseX = evt.pageX;
-	        const mouseY = evt.pageY;
-	        if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) {
-	          reset();
-	        }
+	      useEventListener(document, "mouseup", () => {
 	        removeMousemove();
 	      });
 	      e.preventDefault();
@@ -26387,7 +26563,7 @@
 	      if (loading.value)
 	        return;
 	      const { zoomRate, rotateDeg, enableTransition } = {
-	        zoomRate: 0.2,
+	        zoomRate: 1.4,
 	        rotateDeg: 90,
 	        enableTransition: true,
 	        ...options
@@ -26395,11 +26571,13 @@
 	      switch (action) {
 	        case "zoomOut":
 	          if (transform.value.scale > 0.2) {
-	            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));
+	            transform.value.scale = parseFloat((transform.value.scale / zoomRate).toFixed(3));
 	          }
 	          break;
 	        case "zoomIn":
-	          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));
+	          if (transform.value.scale < 7) {
+	            transform.value.scale = parseFloat((transform.value.scale * zoomRate).toFixed(3));
+	          }
 	          break;
 	        case "clockwise":
 	          transform.value.deg += rotateDeg;
@@ -26412,7 +26590,7 @@
 	    }
 	    vue.watch(currentImg, () => {
 	      vue.nextTick(() => {
-	        const $img = img.value;
+	        const $img = imgRefs.value[0];
 	        if (!($img == null ? void 0 : $img.complete)) {
 	          loading.value = true;
 	        }
@@ -26430,7 +26608,7 @@
 	    return {
 	      index,
 	      wrapper,
-	      img,
+	      imgRefs,
 	      isSingle,
 	      isFirst,
 	      isLast,
@@ -26576,7 +26754,7 @@
 	          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
 	            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
 	              ref_for: true,
-	              ref: "img",
+	              ref: (el) => _ctx.imgRefs[i] = el,
 	              key: url,
 	              src: url,
 	              style: vue.normalizeStyle(_ctx.imgStyle),
@@ -26679,11 +26857,10 @@
 	      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
 	    });
 	    const imageIndex = vue.computed(() => {
-	      const { src, previewSrcList, initialIndex } = props;
+	      const { previewSrcList, initialIndex } = props;
 	      let previewIndex = initialIndex;
-	      const srcIndex = previewSrcList.indexOf(src);
-	      if (srcIndex >= 0) {
-	        previewIndex = srcIndex;
+	      if (initialIndex > previewSrcList.length - 1) {
+	        previewIndex = 0;
 	      }
 	      return previewIndex;
 	    });
@@ -27548,19 +27725,19 @@
 	    default: void 0
 	  }
 	});
-	const COMPONENT_NAME$6 = "ElSubMenu";
+	const COMPONENT_NAME$a = "ElSubMenu";
 	var SubMenu = vue.defineComponent({
-	  name: COMPONENT_NAME$6,
+	  name: COMPONENT_NAME$a,
 	  props: subMenuProps,
 	  setup(props, { slots, expose }) {
 	    const instance = vue.getCurrentInstance();
 	    const { paddingStyle, indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
 	    const rootMenu = vue.inject("rootMenu");
 	    if (!rootMenu)
-	      throwError(COMPONENT_NAME$6, "can not inject root menu");
+	      throwError(COMPONENT_NAME$a, "can not inject root menu");
 	    const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
 	    if (!subMenu)
-	      throwError(COMPONENT_NAME$6, "can not inject sub menu");
+	      throwError(COMPONENT_NAME$a, "can not inject sub menu");
 	    const items = vue.ref({});
 	    const subMenus = vue.ref({});
 	    let timeout;
@@ -28083,9 +28260,9 @@
 	  click: (item) => isString$1(item.index) && Array.isArray(item.indexPath)
 	};
 
-	const COMPONENT_NAME$5 = "ElMenuItem";
+	const COMPONENT_NAME$9 = "ElMenuItem";
 	const _sfc_main$P = vue.defineComponent({
-	  name: COMPONENT_NAME$5,
+	  name: COMPONENT_NAME$9,
 	  components: {
 	    ElTooltip
 	  },
@@ -28095,11 +28272,11 @@
 	    const instance = vue.getCurrentInstance();
 	    const rootMenu = vue.inject("rootMenu");
 	    if (!rootMenu)
-	      throwError(COMPONENT_NAME$5, "can not inject root menu");
+	      throwError(COMPONENT_NAME$9, "can not inject root menu");
 	    const { parentMenu, paddingStyle, indexPath } = useMenu(instance, vue.toRef(props, "index"));
 	    const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
 	    if (!subMenu)
-	      throwError(COMPONENT_NAME$5, "can not inject sub menu");
+	      throwError(COMPONENT_NAME$9, "can not inject sub menu");
 	    const active = vue.computed(() => props.index === rootMenu.activeIndex);
 	    const item = vue.reactive({
 	      index: props.index,
@@ -28183,15 +28360,15 @@
 	  title: String
 	};
 
-	const COMPONENT_NAME$4 = "ElMenuItemGroup";
+	const COMPONENT_NAME$8 = "ElMenuItemGroup";
 	const _sfc_main$O = vue.defineComponent({
-	  name: COMPONENT_NAME$4,
+	  name: COMPONENT_NAME$8,
 	  props: menuItemGroupProps,
 	  setup() {
 	    const instance = vue.getCurrentInstance();
 	    const menu = vue.inject("rootMenu");
 	    if (!menu)
-	      throwError(COMPONENT_NAME$4, "can not inject root menu");
+	      throwError(COMPONENT_NAME$8, "can not inject root menu");
 	    const levelPadding = vue.computed(() => {
 	      if (menu.props.collapse)
 	        return 20;
@@ -29276,9 +29453,10 @@
 	  };
 	};
 
+	const COMPONENT_NAME$7 = "ElSelect";
 	const _sfc_main$I = vue.defineComponent({
-	  name: "ElSelect",
-	  componentName: "ElSelect",
+	  name: COMPONENT_NAME$7,
+	  componentName: COMPONENT_NAME$7,
 	  components: {
 	    ElInput,
 	    ElSelectMenu: ElSelectMenu$1,
@@ -29340,8 +29518,9 @@
 	    collapseTags: Boolean,
 	    popperAppendToBody: {
 	      type: Boolean,
-	      default: true
+	      default: void 0
 	    },
+	    teleported: useTooltipContentProps.teleported,
 	    clearIcon: {
 	      type: [String, Object],
 	      default: circleClose
@@ -29446,6 +29625,9 @@
 	      if (_selectSize) {
 	        classList.push(`el-select--${_selectSize}`);
 	      }
+	      if (props.disabled) {
+	        classList.push(`el-select--disabled`);
+	      }
 	      return classList;
 	    });
 	    const selectTagsStyle = vue.computed(() => ({
@@ -29518,6 +29700,7 @@
 	      var _a, _b;
 	      return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
 	    });
+	    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$7, "popperAppendToBody");
 	    return {
 	      tagInMultiLine,
 	      prefixWidth,
@@ -29578,7 +29761,8 @@
 	      selectWrapper,
 	      scrollbar,
 	      wrapperKls,
-	      selectTagsStyle
+	      selectTagsStyle,
+	      compatTeleported
 	    };
 	  }
 	});
@@ -29610,7 +29794,7 @@
 	      visible: _ctx.dropMenuVisible,
 	      "onUpdate:visible": _cache[23] || (_cache[23] = ($event) => _ctx.dropMenuVisible = $event),
 	      placement: "bottom-start",
-	      "append-to-body": _ctx.popperAppendToBody,
+	      teleported: _ctx.compatTeleported,
 	      "popper-class": `el-select__popper ${_ctx.popperClass}`,
 	      "fallback-placements": ["bottom-start", "top-start", "right", "left"],
 	      effect: "light",
@@ -29829,7 +30013,7 @@
 	        })
 	      ]),
 	      _: 3
-	    }, 8, ["visible", "append-to-body", "popper-class", "onShow"])
+	    }, 8, ["visible", "teleported", "popper-class", "onShow"])
 	  ], 2)), [
 	    [_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]
 	  ]);
@@ -29919,7 +30103,11 @@
 	    type: String,
 	    default: ""
 	  },
-	  disabled: Boolean
+	  disabled: Boolean,
+	  size: {
+	    type: String,
+	    default: "default"
+	  }
 	});
 	const _sfc_main$G = vue.defineComponent({
 	  name: "ElPaginationSizes",
@@ -29969,7 +30157,7 @@
 	      "model-value": _ctx.innerPageSize,
 	      disabled: _ctx.disabled,
 	      "popper-class": _ctx.popperClass,
-	      size: "small",
+	      size: _ctx.size,
 	      onChange: _ctx.handleChange
 	    }, {
 	      default: vue.withCtx(() => [
@@ -29982,7 +30170,7 @@
 	        }), 128))
 	      ]),
 	      _: 1
-	    }, 8, ["model-value", "disabled", "popper-class", "onChange"])
+	    }, 8, ["model-value", "disabled", "popper-class", "size", "onChange"])
 	  ]);
 	}
 	var Sizes = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["render", _sfc_render$C]]);
@@ -30018,10 +30206,13 @@
 	    };
 	  }
 	});
-	const _hoisted_1$q = { class: "el-pagination__jump" };
+	const _hoisted_1$q = ["disabled"];
 	function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_input = vue.resolveComponent("el-input");
-	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$q, [
+	  return vue.openBlock(), vue.createElementBlock("span", {
+	    class: "el-pagination__jump",
+	    disabled: _ctx.disabled
+	  }, [
 	    vue.createTextVNode(vue.toDisplayString(_ctx.t("el.pagination.goto")) + " ", 1),
 	    vue.createVNode(_component_el_input, {
 	      size: "small",
@@ -30035,7 +30226,7 @@
 	      onChange: _ctx.handleChange
 	    }, null, 8, ["max", "disabled", "model-value", "onUpdate:modelValue", "onChange"]),
 	    vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("el.pagination.pageClassifier")), 1)
-	  ]);
+	  ], 8, _hoisted_1$q);
 	}
 	var Jumper = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["render", _sfc_render$B]]);
 
@@ -30050,16 +30241,21 @@
 	  props: paginationTotalProps,
 	  setup() {
 	    const { t } = useLocale();
+	    const { disabled } = usePagination();
 	    return {
-	      t
+	      t,
+	      disabled
 	    };
 	  }
 	});
-	const _hoisted_1$p = { class: "el-pagination__total" };
+	const _hoisted_1$p = ["disabled"];
 	function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$p, vue.toDisplayString(_ctx.t("el.pagination.total", {
+	  return vue.openBlock(), vue.createElementBlock("span", {
+	    class: "el-pagination__total",
+	    disabled: _ctx.disabled
+	  }, vue.toDisplayString(_ctx.t("el.pagination.total", {
 	    total: _ctx.total
-	  })), 1);
+	  })), 9, _hoisted_1$p);
 	}
 	var Total = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["render", _sfc_render$A]]);
 
@@ -30400,6 +30596,14 @@
 	      currentPageBridge.value += 1;
 	      emit("next-click", currentPageBridge.value);
 	    }
+	    function addClass(element, cls) {
+	      if (element) {
+	        if (!element.props) {
+	          element.props = {};
+	        }
+	        element.props.class = [element.props.class, cls].join(" ");
+	      }
+	    }
 	    vue.provide(elPaginationKey, {
 	      pageCount: pageCountBridge,
 	      disabled: vue.computed(() => props.disabled),
@@ -30446,7 +30650,8 @@
 	          pageSize: pageSizeBridge.value,
 	          pageSizes: props.pageSizes,
 	          popperClass: props.popperClass,
-	          disabled: props.disabled
+	          disabled: props.disabled,
+	          size: props.small ? "small" : "default"
 	        }),
 	        slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
 	        total: vue.h(Total, { total: isAbsent(props.total) ? 0 : props.total })
@@ -30467,6 +30672,8 @@
 	      if (haveRightWrapper && rightWrapperChildren.length > 0) {
 	        rootChildren.unshift(rightWrapperRoot);
 	      }
+	      addClass(rootChildren[0], "is-first");
+	      addClass(rootChildren[rootChildren.length - 1], "is-last");
 	      return vue.h("div", {
 	        role: "pagination",
 	        "aria-label": "pagination",
@@ -30484,52 +30691,56 @@
 
 	const ElPagination = withInstall(Pagination);
 
-	const popconfirmProps = buildProps({
-	  title: {
-	    type: String
-	  },
-	  confirmButtonText: {
-	    type: String
-	  },
-	  cancelButtonText: {
-	    type: String
-	  },
-	  confirmButtonType: {
-	    type: String,
-	    values: buttonType,
-	    default: "primary"
-	  },
-	  cancelButtonType: {
-	    type: String,
-	    values: buttonType,
-	    default: "text"
-	  },
-	  icon: {
-	    type: definePropType([String, Object]),
-	    default: questionFilled
-	  },
-	  iconColor: {
-	    type: String,
-	    default: "#f90"
-	  },
-	  hideIcon: {
-	    type: Boolean,
-	    default: false
-	  },
-	  hideAfter: {
-	    type: Number,
-	    default: 200
-	  },
-	  onConfirm: {
-	    type: definePropType(Function)
-	  },
-	  onCancel: {
-	    type: definePropType(Function)
-	  }
-	});
+	const popconfirmProps = {
+	  ...buildProps({
+	    title: {
+	      type: String
+	    },
+	    confirmButtonText: {
+	      type: String
+	    },
+	    cancelButtonText: {
+	      type: String
+	    },
+	    confirmButtonType: {
+	      type: String,
+	      values: buttonType,
+	      default: "primary"
+	    },
+	    cancelButtonType: {
+	      type: String,
+	      values: buttonType,
+	      default: "text"
+	    },
+	    icon: {
+	      type: definePropType([String, Object]),
+	      default: questionFilled
+	    },
+	    iconColor: {
+	      type: String,
+	      default: "#f90"
+	    },
+	    hideIcon: {
+	      type: Boolean,
+	      default: false
+	    },
+	    hideAfter: {
+	      type: Number,
+	      default: 200
+	    },
+	    onConfirm: {
+	      type: definePropType(Function)
+	    },
+	    onCancel: {
+	      type: definePropType(Function)
+	    }
+	  }),
+	  teleported: useTooltipContentProps.teleported
+	};
 
+	const COMPONENT_NAME$6 = "Elpopperconfirm";
 	const _sfc_main$C = vue.defineComponent({
-	  name: "ElPopconfirm",
+	  name: COMPONENT_NAME$6,
 	  components: {
 	    ElButton,
 	    ElTooltip,
@@ -30537,6 +30748,7 @@
 	  },
 	  props: popconfirmProps,
 	  setup(props) {
+	    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$6, "appendToBody");
 	    const { t } = useLocale();
 	    const tooltipRef = vue.ref();
 	    const hidePopper = () => {
@@ -30562,6 +30774,7 @@
 	      finalConfirmButtonText,
 	      finalCancelButtonText,
 	      tooltipRef,
+	      compatTeleported,
 	      confirm,
 	      cancel
 	    };
@@ -30578,7 +30791,7 @@
 	    trigger: "click",
 	    effect: "light",
 	    "popper-class": "el-popover",
-	    "append-to-body": "",
+	    teleported: _ctx.compatTeleported,
 	    "fallback-placements": ["bottom", "top", "right", "left"],
 	    "hide-after": _ctx.hideAfter,
 	    persistent: ""
@@ -30626,13 +30839,14 @@
 	      _ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true)
 	    ]),
 	    _: 3
-	  }, 16, ["hide-after"]);
+	  }, 16, ["teleported", "hide-after"]);
 	}
 	var Popconfirm = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["render", _sfc_render$y]]);
 
 	const ElPopconfirm = withInstall(Popconfirm);
 
 	const usePopoverProps = {
+	  appendToBody: { type: Boolean, default: void 0 },
 	  content: useTooltipContentProps.content,
 	  popperStyle: useTooltipContentProps.popperStyle,
 	  popperClass: useTooltipContentProps.popperClass,
@@ -30644,6 +30858,7 @@
 	    ...useTooltipContentProps.effect,
 	    default: "light"
 	  },
+	  teleported: useTooltipContentProps.teleported,
 	  ...buildProps({
 	    title: String,
 	    width: {
@@ -30654,15 +30869,15 @@
 	};
 
 	const emits = ["update:visible", "after-enter", "after-leave"];
-	const NAME = "ElPopover";
+	const COMPONENT_NAME$5 = "ElPopover";
 	const _sfc_main$B = vue.defineComponent({
-	  name: NAME,
+	  name: COMPONENT_NAME$5,
 	  components: {
 	    ElTooltip
 	  },
 	  props: usePopoverProps,
 	  emits,
-	  setup(props) {
+	  setup(props, { emit }) {
 	    const tooltipRef = vue.ref(null);
 	    const popperRef = vue.computed(() => {
 	      var _a;
@@ -30689,16 +30904,26 @@
 	        props.popperClass
 	      ];
 	    });
+	    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$5, "appendToBody");
 	    const hide = () => {
 	      var _a;
 	      (_a = tooltipRef.value) == null ? void 0 : _a.hide();
 	    };
+	    const afterEnter = () => {
+	      emit("after-enter");
+	    };
+	    const afterLeave = () => {
+	      emit("after-leave");
+	    };
 	    return {
+	      compatTeleported,
 	      kls,
 	      style,
 	      tooltipRef,
 	      popperRef,
-	      hide
+	      hide,
+	      afterEnter,
+	      afterLeave
 	    };
 	  }
 	});
@@ -30715,7 +30940,10 @@
 	    enterable: _ctx.enterable,
 	    "popper-class": _ctx.kls,
 	    "popper-style": _ctx.style,
-	    persistent: ""
+	    teleported: _ctx.compatTeleported,
+	    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),
@@ -30727,7 +30955,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", "teleported", "onShow", "onHide"]);
 	}
 	var Popover = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["render", _sfc_render$x]]);
 
@@ -31064,15 +31292,19 @@
 	  },
 	  colors: {
 	    type: definePropType([Array, Object]),
-	    default: () => mutable(["#F7BA2A", "#F7BA2A", "#F7BA2A"])
+	    default: () => mutable([
+	      "var(--el-rate-star-color)",
+	      "var(--el-rate-star-color)",
+	      "var(--el-rate-star-color)"
+	    ])
 	  },
 	  voidColor: {
 	    type: String,
-	    default: "#C6D1DE"
+	    default: "var(--el-rate-void-color)"
 	  },
 	  disabledVoidColor: {
 	    type: String,
-	    default: "#EFF2F7"
+	    default: "var(--el-rate-disable-void-color)"
 	  },
 	  icons: {
 	    type: definePropType([Array, Object]),
@@ -31104,7 +31336,7 @@
 	  },
 	  textColor: {
 	    type: String,
-	    default: "#1f2d3d"
+	    default: "var(--el-rate-text-color)"
 	  },
 	  texts: {
 	    type: definePropType(Array),
@@ -33324,8 +33556,9 @@
 	  },
 	  popperAppendToBody: {
 	    type: Boolean,
-	    default: true
+	    default: void 0
 	  },
+	  teleported: useTooltipContentProps.teleported,
 	  popperClass: {
 	    type: String,
 	    default: ""
@@ -33688,9 +33921,11 @@
 	  default: 42,
 	  small: 33
 	};
+	const COMPONENT_NAME$4 = "ElSelectV2";
 	const useSelect = (props, emit) => {
 	  const { t } = useLocale();
 	  const { form: elForm, formItem: elFormItem } = useFormItem();
+	  const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME$4, "popperAppendToBody");
 	  const states = vue.reactive({
 	    inputValue: DEFAULT_INPUT_PLACEHOLDER,
 	    displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -34267,7 +34502,7 @@
 	    popperRef,
 	    validateState,
 	    validateIcon,
-	    Effect,
+	    compatTeleported,
 	    debouncedOnInputChange,
 	    deleteTag,
 	    getLabel,
@@ -34363,7 +34598,7 @@
 	      ref: "popper",
 	      visible: _ctx.dropdownMenuVisible,
 	      "onUpdate:visible": _cache[22] || (_cache[22] = ($event) => _ctx.dropdownMenuVisible = $event),
-	      "append-to-body": _ctx.popperAppendToBody,
+	      teleported: _ctx.compatTeleported,
 	      "popper-class": `el-select-v2__popper ${_ctx.popperClass}`,
 	      "gpu-acceleration": false,
 	      "stop-popper-mouse-event": false,
@@ -34607,7 +34842,7 @@
 	        }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
 	      ]),
 	      _: 3
-	    }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "onShow"])
+	    }, 8, ["visible", "teleported", "popper-class", "popper-options", "onShow"])
 	  ], 34)), [
 	    [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
 	  ]);
@@ -34659,12 +34894,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);
@@ -34700,11 +34941,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
 	    };
 	  }
@@ -34713,22 +34956,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))
@@ -39187,7 +39430,7 @@
 	      }
 	      raf(() => {
 	        var _a;
-	        const rows = (_a = instance == null ? void 0 : instance.vnode.el) == null ? void 0 : _a.querySelectorAll(ns.e("row"));
+	        const rows = (_a = instance == null ? void 0 : instance.vnode.el) == null ? void 0 : _a.querySelectorAll(`.${ns.e("row")}`);
 	        const oldRow = rows[oldVal];
 	        const newRow = rows[newVal];
 	        if (oldRow) {
@@ -39558,6 +39801,8 @@
 	  };
 	  const bindEvents = () => {
 	    var _a;
+	    if (!table.refs.scrollWrapper)
+	      return;
 	    (_a = table.refs.scrollWrapper.wrap$) == null ? void 0 : _a.addEventListener("scroll", syncPostion, {
 	      passive: true
 	    });
@@ -39991,7 +40236,8 @@
 	      }, [
 	        vue.createVNode(_component_el_scrollbar, {
 	          ref: "scrollWrapper",
-	          height: _ctx.height
+	          height: _ctx.maxHeight ? void 0 : _ctx.height,
+	          "max-height": _ctx.maxHeight ? _ctx.height : void 0
 	        }, {
 	          default: vue.withCtx(() => [
 	            vue.createVNode(_component_table_body, {
@@ -40030,7 +40276,7 @@
 	            ], 2)) : vue.createCommentVNode("v-if", true)
 	          ]),
 	          _: 3
-	        }, 8, ["height"])
+	        }, 8, ["height", "max-height"])
 	      ], 6),
 	      _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
 	        key: 1,
@@ -43515,7 +43761,6 @@
 	      store.value.setDefaultCheckedKey(newVal);
 	    });
 	    vue.watch(() => props.defaultExpandedKeys, (newVal) => {
-	      store.value.defaultExpandedKeys = newVal;
 	      store.value.setDefaultExpandedKeys(newVal);
 	    });
 	    vue.watch(() => props.data, (newVal) => {
@@ -47306,6 +47551,7 @@
 	      default: true
 	    },
 	    center: Boolean,
+	    draggable: Boolean,
 	    roundButton: {
 	      default: false,
 	      type: Boolean
@@ -47364,8 +47610,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();
@@ -47396,6 +47644,8 @@
 	        state.validateError = false;
 	      }
 	    });
+	    const draggable = vue.computed(() => props.draggable);
+	    useDraggable(rootRef, headerRef, draggable);
 	    vue.onMounted(async () => {
 	      await vue.nextTick();
 	      if (props.closeOnHashChange) {
@@ -47421,6 +47671,7 @@
 	        handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
 	      }
 	    };
+	    const overlayEvent = useSameTarget(handleWrapperClick);
 	    const handleInputEnter = () => {
 	      if (state.inputType !== "textarea") {
 	        return handleAction("confirm");
@@ -47485,12 +47736,15 @@
 	    useRestoreActive(visible);
 	    return {
 	      ...vue.toRefs(state),
+	      overlayEvent,
 	      visible,
 	      hasMessage,
 	      typeClass,
 	      btnSize,
 	      iconComponent,
 	      confirmButtonClasses,
+	      rootRef,
+	      headerRef,
 	      inputRef,
 	      confirmRef,
 	      doClose,
@@ -47505,6 +47759,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" };
@@ -47527,137 +47782,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]
 	      ])
 	    ]),
@@ -48284,7 +48547,6 @@
 	exports.backtopEmits = backtopEmits;
 	exports.backtopProps = backtopProps;
 	exports.badgeProps = badgeProps;
-	exports.barProps = barProps;
 	exports.breadcrumbItemProps = breadcrumbItemProps;
 	exports.breadcrumbProps = breadcrumbProps;
 	exports.buildLocaleContext = buildLocaleContext;
@@ -48383,6 +48645,7 @@
 	exports.tabsRootContextKey = tabsRootContextKey;
 	exports.tagEmits = tagEmits;
 	exports.tagProps = tagProps;
+	exports.thumbProps = thumbProps;
 	exports.timePickerDefaultProps = timePickerDefaultProps;
 	exports.timelineItemProps = timelineItemProps;
 	exports.translate = translate;
@@ -48391,8 +48654,11 @@
 	exports.useDelayedRender = useDelayedRender;
 	exports.useDelayedToggle = useDelayedToggle;
 	exports.useDelayedToggleProps = useDelayedToggleProps;
+	exports.useDeprecateAppendToBody = useDeprecateAppendToBody;
+	exports.useDeprecated = useDeprecated;
 	exports.useDialog = useDialog;
 	exports.useDisabled = useDisabled$1;
+	exports.useDraggable = useDraggable;
 	exports.useEscapeKeydown = useEscapeKeydown;
 	exports.useFocus = useFocus;
 	exports.useFormItem = useFormItem;