@element-plus/nightly 0.0.20220118 → 0.0.20220119

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220118 */
+/*! Element Plus v0.0.20220119 */
 
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -2736,6 +2736,9 @@
 	  return stop;
 	}
 
+	const globalKey = "__vueuse_ssr_handlers__";
+	globalThis[globalKey] = globalThis[globalKey] || {};
+
 	function useCssVar(prop, target, { window = defaultWindow } = {}) {
 	  const variable = vue.ref("");
 	  const elRef = vue.computed(() => {
@@ -2807,15 +2810,6 @@
 	  };
 	}
 
-	var SwipeDirection;
-	(function(SwipeDirection2) {
-	  SwipeDirection2["UP"] = "UP";
-	  SwipeDirection2["RIGHT"] = "RIGHT";
-	  SwipeDirection2["DOWN"] = "DOWN";
-	  SwipeDirection2["LEFT"] = "LEFT";
-	  SwipeDirection2["NONE"] = "NONE";
-	})(SwipeDirection || (SwipeDirection = {}));
-
 	var _a, _b;
 	isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
 
@@ -3566,7 +3560,7 @@
 	};
 
 	let scrollBarWidth;
-	function scrollbarWidth() {
+	function getScrollBarWidth() {
 	  var _a;
 	  if (!isClient)
 	    return 0;
@@ -3788,7 +3782,7 @@
 	      bodyPaddingRight = document.body.style.paddingRight;
 	      computedBodyPaddingRight = parseInt(getStyle(document.body, "paddingRight"), 10);
 	    }
-	    scrollBarWidth = scrollbarWidth();
+	    scrollBarWidth = getScrollBarWidth();
 	    const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
 	    const bodyOverflowY = getStyle(document.body, "overflowY");
 	    if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
@@ -4548,7 +4542,7 @@
 	  });
 	}
 
-	const version$1 = "0.0.20220118";
+	const version$1 = "0.0.20220119";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -4623,6 +4617,7 @@
 	  props: affixProps,
 	  emits: affixEmits,
 	  setup(props, { emit }) {
+	    const ns = useNamespace("affix");
 	    const target = vue.shallowRef();
 	    const root = vue.shallowRef();
 	    const scrollContainer = vue.shallowRef();
@@ -4707,6 +4702,7 @@
 	    useResizeObserver(root, () => update());
 	    useResizeObserver(target, () => update());
 	    return {
+	      ns,
 	      root,
 	      state,
 	      rootStyle,
@@ -4719,16 +4715,16 @@
 	function render$24(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("div", {
 	    ref: "root",
-	    class: "el-affix",
+	    class: vue.normalizeClass(_ctx.ns.b()),
 	    style: vue.normalizeStyle(_ctx.rootStyle)
 	  }, [
 	    vue.createElementVNode("div", {
-	      class: vue.normalizeClass({ "el-affix--fixed": _ctx.state.fixed }),
+	      class: vue.normalizeClass({ [_ctx.ns.m("fixed")]: _ctx.state.fixed }),
 	      style: vue.normalizeStyle(_ctx.affixStyle)
 	    }, [
 	      vue.renderSlot(_ctx.$slots, "default")
 	    ], 6)
-	  ], 4);
+	  ], 6);
 	}
 
 	script$29.render = render$24;
@@ -4792,861 +4788,861 @@
 	const _sfc_main$B = vue.defineComponent({
 	  name: "ArrowDown"
 	});
-	const _hoisted_1$1X = {
+	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$1z = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1w = /* @__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$1k = [
-	  _hoisted_2$1z
+	const _hoisted_3$1j = [
+	  _hoisted_2$1w
 	];
 	function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1X, _hoisted_3$1k);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1U, _hoisted_3$1j);
 	}
 	var arrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B]]);
 
 	const _sfc_main$A = vue.defineComponent({
 	  name: "ArrowLeft"
 	});
-	const _hoisted_1$1W = {
+	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$1y = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1v = /* @__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$1j = [
-	  _hoisted_2$1y
+	const _hoisted_3$1i = [
+	  _hoisted_2$1v
 	];
 	function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1W, _hoisted_3$1j);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1T, _hoisted_3$1i);
 	}
 	var arrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A]]);
 
 	const _sfc_main$z = vue.defineComponent({
 	  name: "ArrowRight"
 	});
-	const _hoisted_1$1V = {
+	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$1x = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1u = /* @__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$1i = [
-	  _hoisted_2$1x
+	const _hoisted_3$1h = [
+	  _hoisted_2$1u
 	];
 	function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1V, _hoisted_3$1i);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1S, _hoisted_3$1h);
 	}
 	var arrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z]]);
 
 	const _sfc_main$y = vue.defineComponent({
 	  name: "ArrowUp"
 	});
-	const _hoisted_1$1U = {
+	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$1w = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1t = /* @__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$1h = [
-	  _hoisted_2$1w
+	const _hoisted_3$1g = [
+	  _hoisted_2$1t
 	];
 	function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1U, _hoisted_3$1h);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1R, _hoisted_3$1g);
 	}
 	var arrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y]]);
 
 	const _sfc_main$x = vue.defineComponent({
 	  name: "Back"
 	});
-	const _hoisted_1$1T = {
+	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$1v = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1s = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M224 480h640a32 32 0 110 64H224a32 32 0 010-64z"
 	}, null, -1);
-	const _hoisted_3$1g = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_3$1f = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  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$x = [
-	  _hoisted_2$1v,
-	  _hoisted_3$1g
+	const _hoisted_4$w = [
+	  _hoisted_2$1s,
+	  _hoisted_3$1f
 	];
 	function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1T, _hoisted_4$x);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1Q, _hoisted_4$w);
 	}
 	var back = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x]]);
 
 	const _sfc_main$w = vue.defineComponent({
 	  name: "Calendar"
 	});
-	const _hoisted_1$1S = {
+	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$1u = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_2$1r = /* @__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$1f = [
-	  _hoisted_2$1u
+	const _hoisted_3$1e = [
+	  _hoisted_2$1r
 	];
 	function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1S, _hoisted_3$1f);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1P, _hoisted_3$1e);
 	}
 	var calendar = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w]]);
 
 	const _sfc_main$v = vue.defineComponent({
 	  name: "CaretRight"
 	});
-	const _hoisted_1$1R = {
+	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$1q = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M384 192v640l384-320.064z"
 	}, null, -1);
-	const _hoisted_3$1e = [
-	  _hoisted_2$1t
+	const _hoisted_3$1d = [
+	  _hoisted_2$1q
 	];
 	function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1R, _hoisted_3$1e);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1d);
 	}
 	var caretRight = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v]]);
 
 	const _sfc_main$u = vue.defineComponent({
 	  name: "CaretTop"
 	});
-	const _hoisted_1$1Q = {
+	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$1p = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M512 320L192 704h639.936z"
 	}, null, -1);
-	const _hoisted_3$1d = [
-	  _hoisted_2$1s
+	const _hoisted_3$1c = [
+	  _hoisted_2$1p
 	];
 	function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1Q, _hoisted_3$1d);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$1c);
 	}
 	var caretTop = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u]]);
 
 	const _sfc_main$t = vue.defineComponent({
 	  name: "Check"
 	});
-	const _hoisted_1$1P = {
+	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$1o = /* @__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$1c = [
-	  _hoisted_2$1r
+	const _hoisted_3$1b = [
+	  _hoisted_2$1o
 	];
 	function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1P, _hoisted_3$1c);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_3$1b);
 	}
 	var check = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t]]);
 
 	const _sfc_main$s = vue.defineComponent({
 	  name: "CircleCheckFilled"
 	});
-	const _hoisted_1$1O = {
+	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$1n = /* @__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$1b = [
-	  _hoisted_2$1q
+	const _hoisted_3$1a = [
+	  _hoisted_2$1n
 	];
 	function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_3$1b);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_3$1a);
 	}
 	var circleCheckFilled = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s]]);
 
 	const _sfc_main$r = vue.defineComponent({
 	  name: "CircleCheck"
 	});
-	const _hoisted_1$1N = {
+	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$1m = /* @__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);
-	const _hoisted_3$1a = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_3$19 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  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$w = [
-	  _hoisted_2$1p,
-	  _hoisted_3$1a
+	const _hoisted_4$v = [
+	  _hoisted_2$1m,
+	  _hoisted_3$19
 	];
 	function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_4$w);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_4$v);
 	}
 	var circleCheck = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r]]);
 
 	const _sfc_main$q = vue.defineComponent({
 	  name: "CircleCloseFilled"
 	});
-	const _hoisted_1$1M = {
+	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$1l = /* @__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$19 = [
-	  _hoisted_2$1o
+	const _hoisted_3$18 = [
+	  _hoisted_2$1l
 	];
 	function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_3$19);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$18);
 	}
 	var circleCloseFilled = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q]]);
 
 	const _sfc_main$p = vue.defineComponent({
 	  name: "CircleClose"
 	});
-	const _hoisted_1$1L = {
+	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$1k = /* @__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);
-	const _hoisted_3$18 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_3$17 = /* @__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);
-	const _hoisted_4$v = [
-	  _hoisted_2$1n,
-	  _hoisted_3$18
+	const _hoisted_4$u = [
+	  _hoisted_2$1k,
+	  _hoisted_3$17
 	];
 	function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_4$v);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_4$u);
 	}
 	var circleClose = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p]]);
 
 	const _sfc_main$o = vue.defineComponent({
 	  name: "Clock"
 	});
-	const _hoisted_1$1K = {
+	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$1j = /* @__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);
-	const _hoisted_3$17 = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_3$16 = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M480 256a32 32 0 0132 32v256a32 32 0 01-64 0V288a32 32 0 0132-32z"
 	}, null, -1);
-	const _hoisted_4$u = /* @__PURE__ */ vue.createElementVNode("path", {
+	const _hoisted_4$t = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z"
 	}, null, -1);
-	const _hoisted_5$l = [
-	  _hoisted_2$1m,
-	  _hoisted_3$17,
-	  _hoisted_4$u
+	const _hoisted_5$k = [
+	  _hoisted_2$1j,
+	  _hoisted_3$16,
+	  _hoisted_4$t
 	];
 	function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_5$l);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_5$k);
 	}
 	var clock = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]]);
 
 	const _sfc_main$n = vue.defineComponent({
 	  name: "Close"
 	});
-	const _hoisted_1$1J = {
+	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$1i = /* @__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$16 = [
-	  _hoisted_2$1l
+	const _hoisted_3$15 = [
+	  _hoisted_2$1i
 	];
 	function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$16);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$15);
 	}
 	var close$2 = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
 
 	const _sfc_main$m = vue.defineComponent({
 	  name: "DArrowLeft"
 	});
-	const _hoisted_1$1I = {
+	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$1h = /* @__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$15 = [
-	  _hoisted_2$1k
+	const _hoisted_3$14 = [
+	  _hoisted_2$1h
 	];
 	function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$15);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$14);
 	}
 	var dArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 
 	const _sfc_main$l = vue.defineComponent({
 	  name: "DArrowRight"
 	});
-	const _hoisted_1$1H = {
+	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$1g = /* @__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$14 = [
-	  _hoisted_2$1j
+	const _hoisted_3$13 = [
+	  _hoisted_2$1g
 	];
 	function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$14);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_3$13);
 	}
 	var dArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
 	const _sfc_main$k = vue.defineComponent({
 	  name: "Delete"
 	});
-	const _hoisted_1$1G = {
+	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$1f = /* @__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$13 = [
-	  _hoisted_2$1i
+	const _hoisted_3$12 = [
+	  _hoisted_2$1f
 	];
 	function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$13);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$12);
 	}
 	var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
 	const _sfc_main$j = vue.defineComponent({
 	  name: "Document"
 	});
-	const _hoisted_1$1F = {
+	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$1e = /* @__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$12 = [
-	  _hoisted_2$1h
+	const _hoisted_3$11 = [
+	  _hoisted_2$1e
 	];
 	function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$12);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_3$11);
 	}
 	var document$1 = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
 	const _sfc_main$i = vue.defineComponent({
 	  name: "FullScreen"
 	});
-	const _hoisted_1$1E = {
+	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$1d = /* @__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$11 = [
-	  _hoisted_2$1g
+	const _hoisted_3$10 = [
+	  _hoisted_2$1d
 	];
 	function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_3$11);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$10);
 	}
 	var fullScreen = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
 	const _sfc_main$h = vue.defineComponent({
 	  name: "InfoFilled"
 	});
-	const _hoisted_1$1D = {
+	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$1c = /* @__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$10 = [
-	  _hoisted_2$1f
+	const _hoisted_3$$ = [
+	  _hoisted_2$1c
 	];
 	function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$10);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$$);
 	}
 	var infoFilled = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
 	const _sfc_main$g = vue.defineComponent({
 	  name: "Loading"
 	});
-	const _hoisted_1$1C = {
+	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$1b = /* @__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$$ = [
-	  _hoisted_2$1e
+	const _hoisted_3$_ = [
+	  _hoisted_2$1b
 	];
 	function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_3$$);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$_);
 	}
 	var loading = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
 	const _sfc_main$f = vue.defineComponent({
 	  name: "Minus"
 	});
-	const _hoisted_1$1B = {
+	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$1a = /* @__PURE__ */ vue.createElementVNode("path", {
 	  fill: "currentColor",
 	  d: "M128 544h768a32 32 0 100-64H128a32 32 0 000 64z"
 	}, null, -1);
-	const _hoisted_3$_ = [
-	  _hoisted_2$1d
+	const _hoisted_3$Z = [
+	  _hoisted_2$1a
 	];
 	function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$_);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$Z);
 	}
 	var minus = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
 	const _sfc_main$e = vue.defineComponent({
 	  name: "MoreFilled"
 	});
-	const _hoisted_1$1A = {
+	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$19 = /* @__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$Z = [
-	  _hoisted_2$1c
+	const _hoisted_3$Y = [
+	  _hoisted_2$19
 	];
 	function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$Z);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$Y);
 	}
 	var moreFilled = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
 	const _sfc_main$d = vue.defineComponent({
 	  name: "More"
 	});
-	const _hoisted_1$1z = {
+	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$18 = /* @__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$Y = [
-	  _hoisted_2$1b
+	const _hoisted_3$X = [
+	  _hoisted_2$18
 	];
 	function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$Y);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$X);
 	}
 	var more = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
 	const _sfc_main$c = vue.defineComponent({
 	  name: "Plus"
 	});
-	const _hoisted_1$1y = {
+	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$17 = /* @__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$X = [
-	  _hoisted_2$1a
+	const _hoisted_3$W = [
+	  _hoisted_2$17
 	];
 	function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$X);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$W);
 	}
 	var plus = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
 	const _sfc_main$b = vue.defineComponent({
 	  name: "QuestionFilled"
 	});
-	const _hoisted_1$1x = {
+	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$16 = /* @__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$W = [
-	  _hoisted_2$19
+	const _hoisted_3$V = [
+	  _hoisted_2$16
 	];
 	function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$W);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$V);
 	}
 	var questionFilled = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
 	const _sfc_main$a = vue.defineComponent({
 	  name: "RefreshLeft"
 	});
-	const _hoisted_1$1w = {
+	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$15 = /* @__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$V = [
-	  _hoisted_2$18
+	const _hoisted_3$U = [
+	  _hoisted_2$15
 	];
 	function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$V);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$U);
 	}
 	var refreshLeft = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
 	const _sfc_main$9 = vue.defineComponent({
 	  name: "RefreshRight"
 	});
-	const _hoisted_1$1v = {
+	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$14 = /* @__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$U = [
-	  _hoisted_2$17
+	const _hoisted_3$T = [
+	  _hoisted_2$14
 	];
 	function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$U);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$T);
 	}
 	var refreshRight = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
 	const _sfc_main$8 = vue.defineComponent({
 	  name: "ScaleToOriginal"
 	});
-	const _hoisted_1$1u = {
+	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$13 = /* @__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$T = [
-	  _hoisted_2$16
+	const _hoisted_3$S = [
+	  _hoisted_2$13
 	];
 	function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$T);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$S);
 	}
 	var scaleToOriginal = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
 	const _sfc_main$7 = vue.defineComponent({
 	  name: "Search"
 	});
-	const _hoisted_1$1t = {
+	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$12 = /* @__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$S = [
-	  _hoisted_2$15
+	const _hoisted_3$R = [
+	  _hoisted_2$12
 	];
 	function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$S);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$R);
 	}
 	var search = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 
 	const _sfc_main$6 = vue.defineComponent({
 	  name: "StarFilled"
 	});
-	const _hoisted_1$1s = {
+	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$11 = /* @__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$R = [
-	  _hoisted_2$14
+	const _hoisted_3$Q = [
+	  _hoisted_2$11
 	];
 	function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$R);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$Q);
 	}
 	var starFilled = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 
 	const _sfc_main$5 = vue.defineComponent({
 	  name: "Star"
 	});
-	const _hoisted_1$1r = {
+	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$10 = /* @__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$Q = [
-	  _hoisted_2$13
+	const _hoisted_3$P = [
+	  _hoisted_2$10
 	];
 	function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$Q);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$P);
 	}
 	var star = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 
 	const _sfc_main$4 = vue.defineComponent({
 	  name: "SuccessFilled"
 	});
-	const _hoisted_1$1q = {
+	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$$ = /* @__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$P = [
-	  _hoisted_2$12
+	const _hoisted_3$O = [
+	  _hoisted_2$$
 	];
 	function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$P);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$O);
 	}
 	var successFilled = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
 	const _sfc_main$3 = vue.defineComponent({
 	  name: "View"
 	});
-	const _hoisted_1$1p = {
+	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$_ = /* @__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$O = [
-	  _hoisted_2$11
+	const _hoisted_3$N = [
+	  _hoisted_2$_
 	];
 	function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$O);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$N);
 	}
 	var view = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
 	const _sfc_main$2 = vue.defineComponent({
 	  name: "WarningFilled"
 	});
-	const _hoisted_1$1o = {
+	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$Z = /* @__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$N = [
-	  _hoisted_2$10
+	const _hoisted_3$M = [
+	  _hoisted_2$Z
 	];
 	function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$N);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$M);
 	}
 	var warningFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
 	const _sfc_main$1 = vue.defineComponent({
 	  name: "ZoomIn"
 	});
-	const _hoisted_1$1n = {
+	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$Y = /* @__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$M = [
-	  _hoisted_2$$
+	const _hoisted_3$L = [
+	  _hoisted_2$Y
 	];
 	function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$M);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$L);
 	}
 	var zoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
 	const _sfc_main = vue.defineComponent({
 	  name: "ZoomOut"
 	});
-	const _hoisted_1$1m = {
+	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$X = /* @__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$L = [
-	  _hoisted_2$_
+	const _hoisted_3$K = [
+	  _hoisted_2$X
 	];
 	function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$L);
+	  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$K);
 	}
 	var zoomOut = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
@@ -5672,6 +5668,7 @@
 	  error: circleClose
 	};
 
+	const alertEffects = ["light", "dark"];
 	const alertProps = buildProps({
 	  title: {
 	    type: String,
@@ -5698,7 +5695,7 @@
 	  center: Boolean,
 	  effect: {
 	    type: String,
-	    values: ["light", "dark"],
+	    values: alertEffects,
 	    default: "light"
 	  }
 	});
@@ -5715,18 +5712,18 @@
 	  props: alertProps,
 	  emits: alertEmits,
 	  setup(props, { emit, slots }) {
+	    const ns = useNamespace("alert");
 	    const visible = vue.ref(true);
-	    const typeClass = vue.computed(() => `el-alert--${props.type}`);
 	    const iconComponent = vue.computed(() => TypeComponentsMap[props.type] || TypeComponentsMap["info"]);
-	    const isBigIcon = vue.computed(() => props.description || slots.default ? "is-big" : "");
-	    const isBoldTitle = vue.computed(() => props.description || slots.default ? "is-bold" : "");
+	    const isBigIcon = vue.computed(() => props.description || slots.default ? ns.is("big") : "");
+	    const isBoldTitle = vue.computed(() => props.description || slots.default ? ns.is("bold") : "");
 	    const close = (evt) => {
 	      visible.value = false;
 	      emit("close", evt);
 	    };
 	    return {
+	      ns,
 	      visible,
-	      typeClass,
 	      iconComponent,
 	      isBigIcon,
 	      isBoldTitle,
@@ -5735,60 +5732,60 @@
 	  }
 	});
 
-	const _hoisted_1$1l = { class: "el-alert__content" };
-	const _hoisted_2$Z = {
-	  key: 1,
-	  class: "el-alert__description"
-	};
 	function render$22(_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" }, {
 	    default: vue.withCtx(() => [
 	      vue.withDirectives(vue.createElementVNode("div", {
-	        class: vue.normalizeClass(["el-alert", [_ctx.typeClass, _ctx.center ? "is-center" : "", "is-" + _ctx.effect]]),
+	        class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.m(_ctx.type), _ctx.ns.is("center", _ctx.center), _ctx.ns.is(_ctx.effect)]),
 	        role: "alert"
 	      }, [
 	        _ctx.showIcon && _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	          key: 0,
-	          class: vue.normalizeClass(["el-alert__icon", _ctx.isBigIcon])
+	          class: vue.normalizeClass([_ctx.ns.e("icon"), _ctx.isBigIcon])
 	        }, {
 	          default: vue.withCtx(() => [
 	            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
 	          ]),
 	          _: 1
 	        }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-	        vue.createElementVNode("div", _hoisted_1$1l, [
+	        vue.createElementVNode("div", {
+	          class: vue.normalizeClass(_ctx.ns.e("content"))
+	        }, [
 	          _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
 	            key: 0,
-	            class: vue.normalizeClass(["el-alert__title", [_ctx.isBoldTitle]])
+	            class: vue.normalizeClass([_ctx.ns.e("title"), _ctx.isBoldTitle])
 	          }, [
 	            vue.renderSlot(_ctx.$slots, "title", {}, () => [
 	              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
 	            ])
 	          ], 2)) : vue.createCommentVNode("v-if", true),
-	          _ctx.$slots.default || _ctx.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$Z, [
+	          _ctx.$slots.default || _ctx.description ? (vue.openBlock(), vue.createElementBlock("p", {
+	            key: 1,
+	            class: vue.normalizeClass(_ctx.ns.e("description"))
+	          }, [
 	            vue.renderSlot(_ctx.$slots, "default", {}, () => [
 	              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
 	            ])
-	          ])) : vue.createCommentVNode("v-if", true),
+	          ], 2)) : vue.createCommentVNode("v-if", true),
 	          _ctx.closable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
 	            _ctx.closeText ? (vue.openBlock(), vue.createElementBlock("div", {
 	              key: 0,
-	              class: "el-alert__closebtn is-customed",
+	              class: vue.normalizeClass([_ctx.ns.e("closebtn"), _ctx.ns.is("customed")]),
 	              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
-	            }, vue.toDisplayString(_ctx.closeText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+	            }, vue.toDisplayString(_ctx.closeText), 3)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	              key: 1,
-	              class: "el-alert__closebtn",
+	              class: vue.normalizeClass(_ctx.ns.e("closebtn")),
 	              onClick: _ctx.close
 	            }, {
 	              default: vue.withCtx(() => [
 	                vue.createVNode(_component_close)
 	              ]),
 	              _: 1
-	            }, 8, ["onClick"]))
+	            }, 8, ["class", "onClick"]))
 	          ], 2112)) : vue.createCommentVNode("v-if", true)
-	        ])
+	        ], 2)
 	      ], 2), [
 	        [vue.vShow, _ctx.visible]
 	      ])
@@ -6523,6 +6520,8 @@
 	    const { form, formItem } = useFormItem();
 	    const inputSize = useSize();
 	    const inputDisabled = useDisabled$1();
+	    const nsInput = useNamespace("input");
+	    const nsTextarea = useNamespace("textarea");
 	    const input = vue.ref();
 	    const textarea = vue.ref();
 	    const focused = vue.ref(false);
@@ -6575,13 +6574,13 @@
 	      const { el } = instance.vnode;
 	      if (!el)
 	        return;
-	      const elList = Array.from(el.querySelectorAll(`.el-input__${place}`));
+	      const elList = Array.from(el.querySelectorAll(`.${nsInput.e(place)}`));
 	      const target = elList.find((item) => item.parentNode === el);
 	      if (!target)
 	        return;
 	      const pendant = PENDANT_MAP[place];
 	      if (slots[pendant]) {
-	        target.style.transform = `translateX(${place === "suffix" ? "-" : ""}${el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
+	        target.style.transform = `translateX(${place === "suffix" ? "-" : ""}${el.querySelector(`.${nsInput.be("group", pendant)}`).offsetWidth}px)`;
 	      } else {
 	        target.removeAttribute("style");
 	      }
@@ -6727,57 +6726,32 @@
 	      blur,
 	      onMouseLeave,
 	      onMouseEnter,
-	      handleKeydown
+	      handleKeydown,
+	      nsInput,
+	      nsTextarea
 	    };
 	  }
 	});
 
-	const _hoisted_1$1k = {
-	  key: 0,
-	  class: "el-input-group__prepend"
-	};
-	const _hoisted_2$Y = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
-	const _hoisted_3$K = {
-	  key: 1,
-	  class: "el-input__prefix"
-	};
-	const _hoisted_4$t = { class: "el-input__prefix-inner" };
-	const _hoisted_5$k = {
-	  key: 2,
-	  class: "el-input__suffix"
-	};
-	const _hoisted_6$i = { class: "el-input__suffix-inner" };
-	const _hoisted_7$b = {
-	  key: 3,
-	  class: "el-input__count"
-	};
-	const _hoisted_8$a = { class: "el-input__count-inner" };
-	const _hoisted_9$7 = {
-	  key: 3,
-	  class: "el-input-group__append"
-	};
-	const _hoisted_10$7 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
-	const _hoisted_11$4 = {
-	  key: 0,
-	  class: "el-input__count"
-	};
+	const _hoisted_1$1i = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
+	const _hoisted_2$W = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
 	function render$21(_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");
 	  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
 	    class: vue.normalizeClass([
-	      _ctx.type === "textarea" ? "el-textarea" : "el-input",
-	      _ctx.inputSize ? "el-input--" + _ctx.inputSize : "",
+	      _ctx.type === "textarea" ? _ctx.nsTextarea.b() : _ctx.nsInput.b(),
+	      _ctx.nsInput.m(_ctx.inputSize),
+	      _ctx.nsInput.is("disabled", _ctx.inputDisabled),
+	      _ctx.nsInput.is("exceed", _ctx.inputExceed),
 	      {
-	        "is-disabled": _ctx.inputDisabled,
-	        "is-exceed": _ctx.inputExceed,
-	        "el-input-group": _ctx.$slots.prepend || _ctx.$slots.append,
-	        "el-input-group--append": _ctx.$slots.append,
-	        "el-input-group--prepend": _ctx.$slots.prepend,
-	        "el-input--prefix": _ctx.$slots.prefix || _ctx.prefixIcon,
-	        "el-input--suffix": _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
-	        "el-input--suffix--password-clear": _ctx.clearable && _ctx.showPassword
+	        [_ctx.nsInput.b("group")]: _ctx.$slots.prepend || _ctx.$slots.append,
+	        [_ctx.nsInput.bm("group", "append")]: _ctx.$slots.append,
+	        [_ctx.nsInput.bm("group", "prepend")]: _ctx.$slots.prepend,
+	        [_ctx.nsInput.m("prefix")]: _ctx.$slots.prefix || _ctx.prefixIcon,
+	        [_ctx.nsInput.m("suffix")]: _ctx.$slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
+	        [_ctx.nsInput.m("suffix--password-clear")]: _ctx.clearable && _ctx.showPassword
 	      },
 	      _ctx.$attrs.class
 	    ]),
@@ -6788,12 +6762,15 @@
 	    vue.createCommentVNode(" input "),
 	    _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
 	      vue.createCommentVNode(" prepend slot "),
-	      _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1k, [
+	      _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", {
+	        key: 0,
+	        class: vue.normalizeClass(_ctx.nsInput.be("group", "prepend"))
+	      }, [
 	        vue.renderSlot(_ctx.$slots, "prepend")
-	      ])) : vue.createCommentVNode("v-if", true),
+	      ], 2)) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("input", vue.mergeProps({
 	        ref: "input",
-	        class: "el-input__inner"
+	        class: _ctx.nsInput.e("inner")
 	      }, _ctx.attrs, {
 	        type: _ctx.showPassword ? _ctx.passwordVisible ? "text" : "password" : _ctx.type,
 	        disabled: _ctx.inputDisabled,
@@ -6811,40 +6788,50 @@
 	        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_2$Y),
+	      }), null, 16, _hoisted_1$1i),
 	      vue.createCommentVNode(" prefix slot "),
-	      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$K, [
-	        vue.createElementVNode("span", _hoisted_4$t, [
+	      _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
+	        key: 1,
+	        class: vue.normalizeClass(_ctx.nsInput.e("prefix"))
+	      }, [
+	        vue.createElementVNode("span", {
+	          class: vue.normalizeClass(_ctx.nsInput.e("prefix-inner"))
+	        }, [
 	          vue.renderSlot(_ctx.$slots, "prefix"),
 	          _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	            key: 0,
-	            class: "el-input__icon"
+	            class: vue.normalizeClass(_ctx.nsInput.e("icon"))
 	          }, {
 	            default: vue.withCtx(() => [
 	              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon)))
 	            ]),
 	            _: 1
-	          })) : vue.createCommentVNode("v-if", true)
-	        ])
-	      ])) : vue.createCommentVNode("v-if", true),
+	          }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+	        ], 2)
+	      ], 2)) : vue.createCommentVNode("v-if", true),
 	      vue.createCommentVNode(" suffix slot "),
-	      _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$k, [
-	        vue.createElementVNode("span", _hoisted_6$i, [
+	      _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+	        key: 2,
+	        class: vue.normalizeClass(_ctx.nsInput.e("suffix"))
+	      }, [
+	        vue.createElementVNode("span", {
+	          class: vue.normalizeClass(_ctx.nsInput.e("suffix-inner"))
+	        }, [
 	          !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
 	            vue.renderSlot(_ctx.$slots, "suffix"),
 	            _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	              key: 0,
-	              class: "el-input__icon"
+	              class: vue.normalizeClass(_ctx.nsInput.e("icon"))
 	            }, {
 	              default: vue.withCtx(() => [
 	                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.suffixIcon)))
 	              ]),
 	              _: 1
-	            })) : vue.createCommentVNode("v-if", true)
+	            }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
 	          ], 64)) : vue.createCommentVNode("v-if", true),
 	          _ctx.showClear ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	            key: 1,
-	            class: "el-input__icon el-input__clear",
+	            class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("clear")]),
 	            onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(() => {
 	            }, ["prevent"])),
 	            onClick: _ctx.clear
@@ -6853,40 +6840,48 @@
 	              vue.createVNode(_component_circle_close)
 	            ]),
 	            _: 1
-	          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+	          }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
 	          _ctx.showPwdVisible ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	            key: 2,
-	            class: "el-input__icon el-input__clear",
+	            class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("clear")]),
 	            onClick: _ctx.handlePasswordVisible
 	          }, {
 	            default: vue.withCtx(() => [
 	              vue.createVNode(_component_icon_view)
 	            ]),
 	            _: 1
-	          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
-	          _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$b, [
-	            vue.createElementVNode("span", _hoisted_8$a, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)
-	          ])) : vue.createCommentVNode("v-if", true)
-	        ]),
+	          }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
+	          _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+	            key: 3,
+	            class: vue.normalizeClass(_ctx.nsInput.e("count"))
+	          }, [
+	            vue.createElementVNode("span", {
+	              class: vue.normalizeClass(_ctx.nsInput.e("count-inner"))
+	            }, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 3)
+	          ], 2)) : vue.createCommentVNode("v-if", true)
+	        ], 2),
 	        _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	          key: 0,
-	          class: "el-input__icon el-input__validateIcon"
+	          class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")])
 	        }, {
 	          default: vue.withCtx(() => [
 	            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon)))
 	          ]),
 	          _: 1
-	        })) : vue.createCommentVNode("v-if", true)
-	      ])) : vue.createCommentVNode("v-if", true),
+	        }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+	      ], 2)) : vue.createCommentVNode("v-if", true),
 	      vue.createCommentVNode(" append slot "),
-	      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$7, [
+	      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
+	        key: 3,
+	        class: vue.normalizeClass(_ctx.nsInput.be("group", "append"))
+	      }, [
 	        vue.renderSlot(_ctx.$slots, "append")
-	      ])) : vue.createCommentVNode("v-if", true)
+	      ], 2)) : vue.createCommentVNode("v-if", true)
 	    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
 	      vue.createCommentVNode(" textarea "),
 	      vue.createElementVNode("textarea", vue.mergeProps({
 	        ref: "textarea",
-	        class: "el-textarea__inner"
+	        class: _ctx.nsTextarea.e("inner")
 	      }, _ctx.attrs, {
 	        tabindex: _ctx.tabindex,
 	        disabled: _ctx.inputDisabled,
@@ -6903,8 +6898,11 @@
 	        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_10$7),
-	      _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$4, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true)
+	      }), null, 16, _hoisted_2$W),
+	      _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
+	        key: 0,
+	        class: vue.normalizeClass(_ctx.nsInput.e("count"))
+	      }, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 3)) : vue.createCommentVNode("v-if", true)
 	    ], 64))
 	  ], 38)), [
 	    [vue.vShow, _ctx.type !== "hidden"]
@@ -7234,13 +7232,13 @@
 	  }
 	});
 
-	const _hoisted_1$1j = {
+	const _hoisted_1$1h = {
 	  ref: "scrollbar$",
 	  class: "el-scrollbar"
 	};
 	function render$1$(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_bar = vue.resolveComponent("bar");
-	  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1j, [
+	  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1h, [
 	    vue.createElementVNode("div", {
 	      ref: "wrap$",
 	      class: vue.normalizeClass([
@@ -7466,29 +7464,32 @@
 	  return placement.split('-')[0];
 	}
 
-	// import { isHTMLElement } from './instanceOf';
-	function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
-	includeScale) {
+	var max$1 = Math.max;
+	var min$1 = Math.min;
+	var round = Math.round;
+
+	function getBoundingClientRect(element, includeScale) {
+	  if (includeScale === void 0) {
+	    includeScale = false;
+	  }
 
 	  var rect = element.getBoundingClientRect();
 	  var scaleX = 1;
-	  var scaleY = 1; // FIXME:
-	  // `offsetWidth` returns an integer while `getBoundingClientRect`
-	  // returns a float. This results in `scaleX` or `scaleY` being
-	  // non-1 when it should be for elements that aren't a full pixel in
-	  // width or height.
-	  // if (isHTMLElement(element) && includeScale) {
-	  //   const offsetHeight = element.offsetHeight;
-	  //   const offsetWidth = element.offsetWidth;
-	  //   // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-	  //   // Fallback to 1 in case both values are `0`
-	  //   if (offsetWidth > 0) {
-	  //     scaleX = rect.width / offsetWidth || 1;
-	  //   }
-	  //   if (offsetHeight > 0) {
-	  //     scaleY = rect.height / offsetHeight || 1;
-	  //   }
-	  // }
+	  var scaleY = 1;
+
+	  if (isHTMLElement(element) && includeScale) {
+	    var offsetHeight = element.offsetHeight;
+	    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+	    // Fallback to 1 in case both values are `0`
+
+	    if (offsetWidth > 0) {
+	      scaleX = round(rect.width) / offsetWidth || 1;
+	    }
+
+	    if (offsetHeight > 0) {
+	      scaleY = round(rect.height) / offsetHeight || 1;
+	    }
+	  }
 
 	  return {
 	    width: rect.width / scaleX,
@@ -7643,13 +7644,13 @@
 	  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 	}
 
-	var max$1 = Math.max;
-	var min$1 = Math.min;
-	var round = Math.round;
-
 	function within(min, value, max) {
 	  return max$1(min, min$1(value, max));
 	}
+	function withinMaxClamp(min, value, max) {
+	  var v = within(min, value, max);
+	  return v > max ? max : v;
+	}
 
 	function getFreshSideObject() {
 	  return {
@@ -7772,8 +7773,8 @@
 	  var win = window;
 	  var dpr = win.devicePixelRatio || 1;
 	  return {
-	    x: round(round(x * dpr) / dpr) || 0,
-	    y: round(round(y * dpr) / dpr) || 0
+	    x: round(x * dpr) / dpr || 0,
+	    y: round(y * dpr) / dpr || 0
 	  };
 	}
 
@@ -7788,14 +7789,23 @@
 	      position = _ref2.position,
 	      gpuAcceleration = _ref2.gpuAcceleration,
 	      adaptive = _ref2.adaptive,
-	      roundOffsets = _ref2.roundOffsets;
-
-	  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-	      _ref3$x = _ref3.x,
-	      x = _ref3$x === void 0 ? 0 : _ref3$x,
-	      _ref3$y = _ref3.y,
-	      y = _ref3$y === void 0 ? 0 : _ref3$y;
+	      roundOffsets = _ref2.roundOffsets,
+	      isFixed = _ref2.isFixed;
+	  var _offsets$x = offsets.x,
+	      x = _offsets$x === void 0 ? 0 : _offsets$x,
+	      _offsets$y = offsets.y,
+	      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+	  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+	    x: x,
+	    y: y
+	  }) : {
+	    x: x,
+	    y: y
+	  };
 
+	  x = _ref3.x;
+	  y = _ref3.y;
 	  var hasX = offsets.hasOwnProperty('x');
 	  var hasY = offsets.hasOwnProperty('y');
 	  var sideX = left;
@@ -7820,16 +7830,18 @@
 	    offsetParent = offsetParent;
 
 	    if (placement === top || (placement === left || placement === right) && variation === end) {
-	      sideY = bottom; // $FlowFixMe[prop-missing]
-
-	      y -= offsetParent[heightProp] - popperRect.height;
+	      sideY = bottom;
+	      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+	      offsetParent[heightProp];
+	      y -= offsetY - popperRect.height;
 	      y *= gpuAcceleration ? 1 : -1;
 	    }
 
 	    if (placement === left || (placement === top || placement === bottom) && variation === end) {
-	      sideX = right; // $FlowFixMe[prop-missing]
-
-	      x -= offsetParent[widthProp] - popperRect.width;
+	      sideX = right;
+	      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+	      offsetParent[widthProp];
+	      x -= offsetX - popperRect.width;
 	      x *= gpuAcceleration ? 1 : -1;
 	    }
 	  }
@@ -7838,6 +7850,17 @@
 	    position: position
 	  }, adaptive && unsetSides);
 
+	  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+	    x: x,
+	    y: y
+	  }) : {
+	    x: x,
+	    y: y
+	  };
+
+	  x = _ref4.x;
+	  y = _ref4.y;
+
 	  if (gpuAcceleration) {
 	    var _Object$assign;
 
@@ -7847,9 +7870,9 @@
 	  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 	}
 
-	function computeStyles(_ref4) {
-	  var state = _ref4.state,
-	      options = _ref4.options;
+	function computeStyles(_ref5) {
+	  var state = _ref5.state,
+	      options = _ref5.options;
 	  var _options$gpuAccelerat = options.gpuAcceleration,
 	      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
 	      _options$adaptive = options.adaptive,
@@ -7862,7 +7885,8 @@
 	    variation: getVariation(state.placement),
 	    popper: state.elements.popper,
 	    popperRect: state.rects.popper,
-	    gpuAcceleration: gpuAcceleration
+	    gpuAcceleration: gpuAcceleration,
+	    isFixed: state.options.strategy === 'fixed'
 	  };
 
 	  if (state.modifiersData.popperOffsets != null) {
@@ -8120,7 +8144,7 @@
 	}
 
 	function getClientRectFromMixedType(element, clippingParent) {
-	  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+	  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 	} // A "clipping parent" is an overflowable container with the characteristic of
 	// clipping (or hiding) overflowing elements with a position different from
 	// `initial`
@@ -8633,6 +8657,14 @@
 	  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
 	    placement: state.placement
 	  })) : tetherOffset;
+	  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+	    mainAxis: tetherOffsetValue,
+	    altAxis: tetherOffsetValue
+	  } : Object.assign({
+	    mainAxis: 0,
+	    altAxis: 0
+	  }, tetherOffsetValue);
+	  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
 	  var data = {
 	    x: 0,
 	    y: 0
@@ -8642,13 +8674,15 @@
 	    return;
 	  }
 
-	  if (checkMainAxis || checkAltAxis) {
+	  if (checkMainAxis) {
+	    var _offsetModifierState$;
+
 	    var mainSide = mainAxis === 'y' ? top : left;
 	    var altSide = mainAxis === 'y' ? bottom : right;
 	    var len = mainAxis === 'y' ? 'height' : 'width';
 	    var offset = popperOffsets[mainAxis];
-	    var min = popperOffsets[mainAxis] + overflow[mainSide];
-	    var max = popperOffsets[mainAxis] - overflow[altSide];
+	    var min = offset + overflow[mainSide];
+	    var max = offset - overflow[altSide];
 	    var additive = tether ? -popperRect[len] / 2 : 0;
 	    var minLen = variation === start ? referenceRect[len] : popperRect[len];
 	    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -8668,36 +8702,45 @@
 	    // width or height)
 
 	    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-	    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-	    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+	    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+	    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
 	    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
 	    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-	    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-	    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-	    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+	    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+	    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+	    var tetherMax = offset + maxOffset - offsetModifierValue;
+	    var preventedOffset = within(tether ? min$1(min, tetherMin) : min, offset, tether ? max$1(max, tetherMax) : max);
+	    popperOffsets[mainAxis] = preventedOffset;
+	    data[mainAxis] = preventedOffset - offset;
+	  }
 
-	    if (checkMainAxis) {
-	      var preventedOffset = within(tether ? min$1(min, tetherMin) : min, offset, tether ? max$1(max, tetherMax) : max);
-	      popperOffsets[mainAxis] = preventedOffset;
-	      data[mainAxis] = preventedOffset - offset;
-	    }
+	  if (checkAltAxis) {
+	    var _offsetModifierState$2;
 
-	    if (checkAltAxis) {
-	      var _mainSide = mainAxis === 'x' ? top : left;
+	    var _mainSide = mainAxis === 'x' ? top : left;
 
-	      var _altSide = mainAxis === 'x' ? bottom : right;
+	    var _altSide = mainAxis === 'x' ? bottom : right;
 
-	      var _offset = popperOffsets[altAxis];
+	    var _offset = popperOffsets[altAxis];
 
-	      var _min = _offset + overflow[_mainSide];
+	    var _len = altAxis === 'y' ? 'height' : 'width';
 
-	      var _max = _offset - overflow[_altSide];
+	    var _min = _offset + overflow[_mainSide];
 
-	      var _preventedOffset = within(tether ? min$1(_min, tetherMin) : _min, _offset, tether ? max$1(_max, tetherMax) : _max);
+	    var _max = _offset - overflow[_altSide];
 
-	      popperOffsets[altAxis] = _preventedOffset;
-	      data[altAxis] = _preventedOffset - _offset;
-	    }
+	    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+	    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+	    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+	    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+	    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+	    popperOffsets[altAxis] = _preventedOffset;
+	    data[altAxis] = _preventedOffset - _offset;
 	  }
 
 	  state.modifiersData[name] = data;
@@ -8729,8 +8772,8 @@
 
 	function isElementScaled(element) {
 	  var rect = element.getBoundingClientRect();
-	  var scaleX = rect.width / element.offsetWidth || 1;
-	  var scaleY = rect.height / element.offsetHeight || 1;
+	  var scaleX = round(rect.width) / element.offsetWidth || 1;
+	  var scaleY = round(rect.height) / element.offsetHeight || 1;
 	  return scaleX !== 1 || scaleY !== 1;
 	} // Returns the composite rect of an element relative to its offsetParent.
 	// Composite means it takes into account transforms as well as layout.
@@ -8742,9 +8785,9 @@
 	  }
 
 	  var isOffsetParentAnElement = isHTMLElement(offsetParent);
-	  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+	  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
 	  var documentElement = getDocumentElement(offsetParent);
-	  var rect = getBoundingClientRect(elementOrVirtualElement);
+	  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
 	  var scroll = {
 	    scrollLeft: 0,
 	    scrollTop: 0
@@ -8761,7 +8804,7 @@
 	    }
 
 	    if (isHTMLElement(offsetParent)) {
-	      offsets = getBoundingClientRect(offsetParent);
+	      offsets = getBoundingClientRect(offsetParent, true);
 	      offsets.x += offsetParent.clientLeft;
 	      offsets.y += offsetParent.clientTop;
 	    } else if (documentElement) {
@@ -9160,13 +9203,13 @@
 	  }
 	});
 
-	const _hoisted_1$1i = {
+	const _hoisted_1$1g = {
 	  ref: "arrowRef",
 	  class: "el-popper__arrow",
 	  "data-popper-arrow": ""
 	};
 	function render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1i, null, 512);
+	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1g, null, 512);
 	}
 
 	script$22.render = render$1Z;
@@ -9884,8 +9927,8 @@
 	  }
 	});
 
-	const _hoisted_1$1h = ["innerHTML"];
-	const _hoisted_2$X = { key: 1 };
+	const _hoisted_1$1f = ["innerHTML"];
+	const _hoisted_2$V = { key: 1 };
 	function 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");
@@ -9934,7 +9977,7 @@
 	            _ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("span", {
 	              key: 0,
 	              innerHTML: _ctx.content
-	            }, null, 8, _hoisted_1$1h)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$X, vue.toDisplayString(_ctx.content), 1))
+	            }, null, 8, _hoisted_1$1f)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$V, vue.toDisplayString(_ctx.content), 1))
 	          ]),
 	          _ctx.compatShowArrow ? (vue.openBlock(), vue.createBlock(_component_el_popper_arrow, {
 	            key: 0,
@@ -10196,8 +10239,8 @@
 	  }
 	});
 
-	const _hoisted_1$1g = ["aria-expanded", "aria-owns"];
-	const _hoisted_2$W = { key: 0 };
+	const _hoisted_1$1e = ["aria-expanded", "aria-owns"];
+	const _hoisted_2$U = { key: 0 };
 	const _hoisted_3$J = ["id", "aria-selected", "onClick"];
 	function render$1S(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_input = vue.resolveComponent("el-input");
@@ -10241,7 +10284,7 @@
 	          role: "listbox"
 	        }, {
 	          default: vue.withCtx(() => [
-	            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$W, [
+	            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$U, [
 	              vue.createVNode(_component_el_icon, { class: "is-loading" }, {
 	                default: vue.withCtx(() => [
 	                  vue.createVNode(_component_loading)
@@ -10315,7 +10358,7 @@
 	            ])
 	          } : void 0
 	        ]), 1040, ["model-value", "onInput", "onChange", "onFocus", "onBlur", "onClear", "onKeydown"])
-	      ], 14, _hoisted_1$1g)), [
+	      ], 14, _hoisted_1$1e)), [
 	        [_directive_clickoutside, _ctx.close]
 	      ])
 	    ]),
@@ -10407,7 +10450,7 @@
 	  }
 	});
 
-	const _hoisted_1$1f = ["src", "alt", "srcset"];
+	const _hoisted_1$1d = ["src", "alt", "srcset"];
 	function render$1R(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
 	  return vue.openBlock(), vue.createElementBlock("span", {
@@ -10421,7 +10464,7 @@
 	      srcset: _ctx.srcSet,
 	      style: vue.normalizeStyle(_ctx.fitStyle),
 	      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-	    }, null, 44, _hoisted_1$1f)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+	    }, null, 44, _hoisted_1$1d)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
 	      default: vue.withCtx(() => [
 	        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
 	      ]),
@@ -10577,6 +10620,7 @@
 	  name: "ElBadge",
 	  props: badgeProps,
 	  setup(props) {
+	    const ns = useNamespace("badge");
 	    const content = vue.computed(() => {
 	      if (props.isDot)
 	        return "";
@@ -10586,34 +10630,35 @@
 	      return `${props.value}`;
 	    });
 	    return {
+	      ns,
 	      content
 	    };
 	  }
 	});
 
-	const _hoisted_1$1e = { class: "el-badge" };
-	const _hoisted_2$V = ["textContent"];
+	const _hoisted_1$1c = ["textContent"];
 	function render$1P(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1e, [
+	  return vue.openBlock(), vue.createElementBlock("div", {
+	    class: vue.normalizeClass(_ctx.ns.b())
+	  }, [
 	    vue.renderSlot(_ctx.$slots, "default"),
 	    vue.createVNode(vue.Transition, { name: "el-zoom-in-center" }, {
 	      default: vue.withCtx(() => [
 	        vue.withDirectives(vue.createElementVNode("sup", {
-	          class: vue.normalizeClass(["el-badge__content", [
-	            "el-badge__content--" + _ctx.type,
-	            {
-	              "is-fixed": _ctx.$slots.default,
-	              "is-dot": _ctx.isDot
-	            }
-	          ]]),
+	          class: vue.normalizeClass([
+	            _ctx.ns.e("content"),
+	            _ctx.ns.em("content", _ctx.type),
+	            _ctx.ns.is("fixed", !!_ctx.$slots.default),
+	            _ctx.ns.is("dot", _ctx.isDot)
+	          ]),
 	          textContent: vue.toDisplayString(_ctx.content)
-	        }, null, 10, _hoisted_2$V), [
+	        }, null, 10, _hoisted_1$1c), [
 	          [vue.vShow, !_ctx.hidden && (_ctx.content || _ctx.content === "0" || _ctx.isDot)]
 	        ])
 	      ]),
 	      _: 1
 	    })
-	  ]);
+	  ], 2);
 	}
 
 	script$1U.render = render$1P;
@@ -10636,30 +10681,31 @@
 	  name: "ElBreadcrumb",
 	  props: breadcrumbProps,
 	  setup(props) {
+	    const ns = useNamespace("breadcrumb");
 	    const breadcrumb = vue.ref();
 	    vue.provide(elBreadcrumbKey, props);
 	    vue.onMounted(() => {
-	      const items = breadcrumb.value.querySelectorAll(".el-breadcrumb__item");
+	      const items = breadcrumb.value.querySelectorAll(`.${ns.e("item")}`);
 	      if (items.length) {
 	        items[items.length - 1].setAttribute("aria-current", "page");
 	      }
 	    });
 	    return {
+	      ns,
 	      breadcrumb
 	    };
 	  }
 	});
 
-	const _hoisted_1$1d = {
-	  ref: "breadcrumb",
-	  class: "el-breadcrumb",
-	  "aria-label": "Breadcrumb",
-	  role: "navigation"
-	};
 	function render$1O(_ctx, _cache, $props, $setup, $data, $options) {
-	  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1d, [
+	  return vue.openBlock(), vue.createElementBlock("div", {
+	    ref: "breadcrumb",
+	    class: vue.normalizeClass(_ctx.ns.b()),
+	    "aria-label": "Breadcrumb",
+	    role: "navigation"
+	  }, [
 	    vue.renderSlot(_ctx.$slots, "default")
-	  ], 512);
+	  ], 2);
 	}
 
 	script$1T.render = render$1O;
@@ -10687,6 +10733,7 @@
 	    const instance = vue.getCurrentInstance();
 	    const router = instance.appContext.config.globalProperties.$router;
 	    const parent = vue.inject(elBreadcrumbKey, void 0);
+	    const ns = useNamespace("breadcrumb");
 	    const link = vue.ref();
 	    vue.onMounted(() => {
 	      link.value.setAttribute("role", "link");
@@ -10697,6 +10744,7 @@
 	      });
 	    });
 	    return {
+	      ns,
 	      link,
 	      separator: parent == null ? void 0 : parent.separator,
 	      separatorIcon: parent == null ? void 0 : parent.separatorIcon
@@ -10704,32 +10752,32 @@
 	  }
 	});
 
-	const _hoisted_1$1c = { class: "el-breadcrumb__item" };
-	const _hoisted_2$U = {
-	  key: 1,
-	  class: "el-breadcrumb__separator",
-	  role: "presentation"
-	};
 	function render$1N(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_el_icon = vue.resolveComponent("el-icon");
-	  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1c, [
+	  return vue.openBlock(), vue.createElementBlock("span", {
+	    class: vue.normalizeClass(_ctx.ns.e("item"))
+	  }, [
 	    vue.createElementVNode("span", {
 	      ref: "link",
-	      class: vue.normalizeClass(["el-breadcrumb__inner", _ctx.to ? "is-link" : ""]),
+	      class: vue.normalizeClass([_ctx.ns.e("inner"), _ctx.ns.is("link", !!_ctx.to)]),
 	      role: "link"
 	    }, [
 	      vue.renderSlot(_ctx.$slots, "default")
 	    ], 2),
 	    _ctx.separatorIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	      key: 0,
-	      class: "el-breadcrumb__separator"
+	      class: vue.normalizeClass(_ctx.ns.e("separator"))
 	    }, {
 	      default: vue.withCtx(() => [
 	        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.separatorIcon)))
 	      ]),
 	      _: 1
-	    })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$U, vue.toDisplayString(_ctx.separator), 1))
-	  ]);
+	    }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock("span", {
+	      key: 1,
+	      class: vue.normalizeClass(_ctx.ns.e("separator")),
+	      role: "presentation"
+	    }, vue.toDisplayString(_ctx.separator), 3))
+	  ], 2);
 	}
 
 	script$1S.render = render$1N;
@@ -11995,16 +12043,14 @@
 	  return vue.openBlock(), vue.createElementBlock("button", {
 	    ref: "buttonRef",
 	    class: vue.normalizeClass([
-	      `${_ctx.ns.b()}`,
-	      `${_ctx.ns.m(_ctx.buttonType)}`,
-	      `${_ctx.ns.m(_ctx.buttonSize)}`,
-	      {
-	        "is-disabled": _ctx.buttonDisabled,
-	        "is-loading": _ctx.loading,
-	        "is-plain": _ctx.plain,
-	        "is-round": _ctx.round,
-	        "is-circle": _ctx.circle
-	      }
+	      _ctx.ns.b(),
+	      _ctx.ns.m(_ctx.buttonType),
+	      _ctx.ns.m(_ctx.buttonSize),
+	      _ctx.ns.is("disabled", _ctx.buttonDisabled),
+	      _ctx.ns.is("loading", _ctx.loading),
+	      _ctx.ns.is("plain", _ctx.plain),
+	      _ctx.ns.is("round", _ctx.round),
+	      _ctx.ns.is("circle", _ctx.circle)
 	    ]),
 	    disabled: _ctx.buttonDisabled || _ctx.loading,
 	    autofocus: _ctx.autofocus,
@@ -12014,13 +12060,13 @@
 	  }, [
 	    _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	      key: 0,
-	      class: "is-loading"
+	      class: vue.normalizeClass(_ctx.ns.is("loading"))
 	    }, {
 	      default: vue.withCtx(() => [
 	        vue.createVNode(_component_loading)
 	      ]),
 	      _: 1
-	    })) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+	    }, 8, ["class"])) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
 	      default: vue.withCtx(() => [
 	        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
 	      ]),
@@ -14881,7 +14927,7 @@
 	  },
 	  shadow: {
 	    type: String,
-	    default: ""
+	    default: "always"
 	  }
 	});
 
@@ -14898,7 +14944,7 @@
 
 	function render$1E(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("div", {
-	    class: vue.normalizeClass([_ctx.ns.b(), _ctx.shadow ? `is-${_ctx.shadow}-shadow` : "is-always-shadow"])
+	    class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is(`${_ctx.shadow}-shadow`)])
 	  }, [
 	    _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
 	      key: 0,
@@ -17288,7 +17334,7 @@
 	      phase: "main",
 	      fn: ({ state }) => {
 	        const { modifiersData, placement } = state;
-	        if (["right", "left"].includes(placement))
+	        if (["right", "left", "bottom", "top"].includes(placement))
 	          return;
 	        modifiersData.arrow.x = 35;
 	      },
@@ -17723,7 +17769,14 @@
 	    "append-to-body": _ctx.popperAppendToBody,
 	    "popper-class": `el-cascader__dropdown ${_ctx.popperClass}`,
 	    "popper-options": _ctx.popperOptions,
-	    "fallback-placements": ["bottom-start", "top-start", "right", "left"],
+	    "fallback-placements": [
+	      "bottom-start",
+	      "bottom",
+	      "top-start",
+	      "top",
+	      "right",
+	      "left"
+	    ],
 	    "stop-popper-mouse-event": false,
 	    "gpu-acceleration": false,
 	    placement: "bottom-start",
@@ -17928,7 +17981,7 @@
 
 	function render$1r(_ctx, _cache, $props, $setup, $data, $options) {
 	  return vue.openBlock(), vue.createElementBlock("span", {
-	    class: vue.normalizeClass([_ctx.ns.b(), { "is-checked": _ctx.checked }]),
+	    class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("checked", _ctx.checked)]),
 	    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
 	  }, [
 	    vue.renderSlot(_ctx.$slots, "default")
@@ -18067,6 +18120,8 @@
 	    };
 	    vue.watch(() => props.modelValue, () => {
 	      activeNames.value = [].concat(props.modelValue);
+	    }, {
+	      deep: true
 	    });
 	    vue.provide("collapse", {
 	      activeNames,
@@ -18716,7 +18771,11 @@
 	        this[option] = options[option];
 	      }
 	    }
-	    this.doOnChange();
+	    if (options.value) {
+	      this.fromString(options.value);
+	    } else {
+	      this.doOnChange();
+	    }
 	  }
 	  set(prop, value) {
 	    if (arguments.length === 1 && typeof prop === "object") {
@@ -19059,7 +19118,8 @@
 	    const popper = vue.ref(null);
 	    const color = vue.reactive(new Color({
 	      enableAlpha: props.showAlpha,
-	      format: props.colorFormat
+	      format: props.colorFormat,
+	      value: props.modelValue
 	    }));
 	    const showPicker = vue.ref(false);
 	    const showPanelColor = vue.ref(false);
@@ -19135,9 +19195,9 @@
 	      vue.nextTick(() => {
 	        const newColor = new Color({
 	          enableAlpha: props.showAlpha,
-	          format: props.colorFormat
+	          format: props.colorFormat,
+	          value: props.modelValue
 	        });
-	        newColor.fromString(props.modelValue);
 	        if (!color.compare(newColor)) {
 	          resetColor();
 	        }
@@ -19155,7 +19215,6 @@
 	    }
 	    vue.onMounted(() => {
 	      if (props.modelValue) {
-	        color.fromString(props.modelValue);
 	        customInput.value = currentColor.value;
 	      }
 	    });
@@ -20320,9 +20379,9 @@
 	      disabledDate,
 	      cellClassName,
 	      defaultTime,
-	      defaultValue,
 	      arrowControl
 	    } = pickerBase.props;
+	    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
 	    const innerDate = vue.ref(dayjs().locale(lang.value));
 	    const defaultTimeD = vue.computed(() => {
 	      return dayjs(defaultTime).locale(lang.value);
@@ -20496,14 +20555,14 @@
 	    const visibleTime = vue.computed(() => {
 	      if (userInputTime.value)
 	        return userInputTime.value;
-	      if (!props.parsedValue && !defaultValue)
+	      if (!props.parsedValue && !defaultValue.value)
 	        return;
 	      return (props.parsedValue || innerDate.value).format(timeFormat.value);
 	    });
 	    const visibleDate = vue.computed(() => {
 	      if (userInputDate.value)
 	        return userInputDate.value;
-	      if (!props.parsedValue && !defaultValue)
+	      if (!props.parsedValue && !defaultValue.value)
 	        return;
 	      return (props.parsedValue || innerDate.value).format(dateFormat.value);
 	    });
@@ -20555,8 +20614,8 @@
 	      return dayjs(value, props.format).locale(lang.value);
 	    };
 	    const getDefaultValue = () => {
-	      const parseDate = dayjs(defaultValue).locale(lang.value);
-	      if (!defaultValue) {
+	      const parseDate = dayjs(defaultValue.value).locale(lang.value);
+	      if (!defaultValue.value) {
 	        const defaultTimeDValue = defaultTimeD.value;
 	        return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
 	      }
@@ -20632,6 +20691,11 @@
 	    ctx.emit("set-picker-option", ["formatToString", formatToString]);
 	    ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
 	    ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
+	    vue.watch(() => defaultValue.value, (val) => {
+	      if (val) {
+	        innerDate.value = getDefaultValue();
+	      }
+	    }, { immediate: true });
 	    vue.watch(() => props.parsedValue, (val) => {
 	      if (val) {
 	        if (selectionMode.value === "dates")
@@ -21223,15 +21287,15 @@
 	    };
 	    const getDefaultValue = () => {
 	      let start;
-	      if (Array.isArray(defaultValue)) {
-	        const left = dayjs(defaultValue[0]);
-	        let right = dayjs(defaultValue[1]);
+	      if (Array.isArray(defaultValue.value)) {
+	        const left = dayjs(defaultValue.value[0]);
+	        let right = dayjs(defaultValue.value[1]);
 	        if (!props.unlinkPanels) {
 	          right = left.add(1, "month");
 	        }
 	        return [left, right];
-	      } else if (defaultValue) {
-	        start = dayjs(defaultValue);
+	      } else if (defaultValue.value) {
+	        start = dayjs(defaultValue.value);
 	      } else {
 	        start = dayjs();
 	      }
@@ -21249,10 +21313,19 @@
 	      cellClassName,
 	      format,
 	      defaultTime,
-	      defaultValue,
 	      arrowControl,
 	      clearable
 	    } = pickerBase.props;
+	    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+	    vue.watch(() => defaultValue.value, (val) => {
+	      if (val) {
+	        const defaultArr = getDefaultValue();
+	        minDate.value = null;
+	        maxDate.value = null;
+	        leftDate.value = defaultArr[0];
+	        rightDate.value = defaultArr[1];
+	      }
+	    }, { immediate: true });
 	    vue.watch(() => props.parsedValue, (newVal) => {
 	      if (newVal && newVal.length === 2) {
 	        minDate.value = newVal[0];
@@ -21745,15 +21818,15 @@
 	    };
 	    const getDefaultValue = () => {
 	      let start;
-	      if (Array.isArray(defaultValue)) {
-	        const left = dayjs(defaultValue[0]);
-	        let right = dayjs(defaultValue[1]);
+	      if (Array.isArray(defaultValue.value)) {
+	        const left = dayjs(defaultValue.value[0]);
+	        let right = dayjs(defaultValue.value[1]);
 	        if (!props.unlinkPanels) {
 	          right = left.add(1, "year");
 	        }
 	        return [left, right];
-	      } else if (defaultValue) {
-	        start = dayjs(defaultValue);
+	      } else if (defaultValue.value) {
+	        start = dayjs(defaultValue.value);
 	      } else {
 	        start = dayjs();
 	      }
@@ -21762,7 +21835,15 @@
 	    };
 	    ctx.emit("set-picker-option", ["formatToString", formatToString]);
 	    const pickerBase = vue.inject("EP_PICKER_BASE");
-	    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props;
+	    const { shortcuts, disabledDate, format } = pickerBase.props;
+	    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+	    vue.watch(() => defaultValue.value, (val) => {
+	      if (val) {
+	        const defaultArr = getDefaultValue();
+	        leftDate.value = defaultArr[0];
+	        rightDate.value = defaultArr[1];
+	      }
+	    }, { immediate: true });
 	    vue.watch(() => props.parsedValue, (newVal) => {
 	      if (newVal && newVal.length === 2) {
 	        minDate.value = newVal[0];
@@ -22824,7 +22905,7 @@
 	  }, [
 	    _ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", {
 	      key: 0,
-	      class: vue.normalizeClass([_ctx.ns.e("text"), `is-${_ctx.contentPosition}`])
+	      class: vue.normalizeClass([_ctx.ns.e("text"), _ctx.ns.is(_ctx.contentPosition)])
 	    }, [
 	      vue.renderSlot(_ctx.$slots, "default")
 	    ], 2)) : vue.createCommentVNode("v-if", true)
@@ -23706,7 +23787,6 @@
 	    const referenceElementRef = vue.ref();
 	    const popperRef = vue.ref(null);
 	    const contentRef = vue.ref(null);
-	    const visible = vue.ref(false);
 	    const scrollbar = vue.ref(null);
 	    const currentTabId = vue.ref(null);
 	    const isUsingKeyboard = vue.ref(false);
@@ -23717,9 +23797,16 @@
 	      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ""]
 	    ]);
 	    function handleClick() {
+	      handleClose();
+	    }
+	    function handleClose() {
 	      var _a;
 	      (_a = popperRef.value) == null ? void 0 : _a.onClose();
 	    }
+	    function handleOpen() {
+	      var _a;
+	      (_a = popperRef.value) == null ? void 0 : _a.onOpen();
+	    }
 	    const dropdownSize = useSize();
 	    function commandHandler(...args) {
 	      emit("command", ...args);
@@ -23749,7 +23836,6 @@
 	    vue.provide("elDropdown", {
 	      instance: _instance,
 	      dropdownSize,
-	      visible,
 	      handleClick,
 	      commandHandler,
 	      trigger: vue.toRef(props, "trigger"),
@@ -23766,7 +23852,6 @@
 	      emit("click", event);
 	    };
 	    return {
-	      visible,
 	      scrollbar,
 	      wrapStyle,
 	      dropdownTriggerKls,
@@ -23775,6 +23860,8 @@
 	      handleCurrentTabIdChange,
 	      handlerMainButtonClick,
 	      handleEntryFocus,
+	      handleClose,
+	      handleOpen,
 	      onMountOnFocus,
 	      popperRef,
 	      triggeringElementRef,
@@ -27025,7 +27112,7 @@
 	  blur: (e) => e instanceof FocusEvent,
 	  focus: (e) => e instanceof FocusEvent,
 	  input: (val) => isNumber(val),
-	  "update:modelValue": (val) => isNumber(val)
+	  "update:modelValue": (val) => isNumber(val) || val === void 0
 	};
 
 	var script$S = vue.defineComponent({
@@ -27050,6 +27137,7 @@
 	      userInput: null
 	    });
 	    const { formItem } = useFormItem();
+	    const ns = useNamespace("input-number");
 	    const minDisabled = vue.computed(() => _decrease(props.modelValue) < props.min);
 	    const maxDisabled = vue.computed(() => _increase(props.modelValue) > props.max);
 	    const numPrecision = vue.computed(() => {
@@ -27137,7 +27225,7 @@
 	      if (oldVal === newVal)
 	        return;
 	      if (!isNumber(newVal)) {
-	        newVal = NaN;
+	        newVal = void 0;
 	      }
 	      data.userInput = null;
 	      emit("update:modelValue", newVal);
@@ -27174,6 +27262,9 @@
 	    };
 	    vue.watch(() => props.modelValue, (value) => {
 	      let newVal = Number(value);
+	      if (value === null) {
+	        newVal = Number.NaN;
+	      }
 	      if (!isNaN(newVal)) {
 	        if (props.stepStrictly) {
 	          const stepPrecision = getPrecision(props.step);
@@ -27204,7 +27295,11 @@
 	      innerInput.setAttribute("aria-valuenow", String(data.currentValue));
 	      innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value));
 	      if (!isNumber(props.modelValue)) {
-	        emit("update:modelValue", Number(props.modelValue));
+	        let val = Number(props.modelValue);
+	        if (isNaN(val)) {
+	          val = void 0;
+	        }
+	        emit("update:modelValue", val);
 	      }
 	    });
 	    vue.onUpdated(() => {
@@ -27227,7 +27322,8 @@
 	      focus,
 	      blur,
 	      handleFocus,
-	      handleBlur
+	      handleBlur,
+	      ns
 	    };
 	  }
 	});
@@ -27242,19 +27338,19 @@
 	  const _directive_repeat_click = vue.resolveDirective("repeat-click");
 	  return vue.openBlock(), vue.createElementBlock("div", {
 	    class: vue.normalizeClass([
-	      "el-input-number",
-	      _ctx.inputNumberSize ? "el-input-number--" + _ctx.inputNumberSize : "",
-	      { "is-disabled": _ctx.inputNumberDisabled },
-	      { "is-without-controls": !_ctx.controls },
-	      { "is-controls-right": _ctx.controlsAtRight }
+	      _ctx.ns.b(),
+	      _ctx.ns.m(_ctx.inputNumberSize),
+	      _ctx.ns.is("disabled", _ctx.inputNumberDisabled),
+	      _ctx.ns.is("without-controls", !_ctx.controls),
+	      _ctx.ns.is("controls-right", _ctx.controlsAtRight)
 	    ]),
 	    onDragstart: _cache[2] || (_cache[2] = vue.withModifiers(() => {
 	    }, ["prevent"]))
 	  }, [
 	    _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
 	      key: 0,
-	      class: vue.normalizeClass(["el-input-number__decrease", { "is-disabled": _ctx.minDisabled }]),
 	      role: "button",
+	      class: vue.normalizeClass([_ctx.ns.e("decrease"), _ctx.ns.is("disabled", _ctx.minDisabled)]),
 	      onKeydown: _cache[0] || (_cache[0] = vue.withKeys((...args) => _ctx.decrease && _ctx.decrease(...args), ["enter"]))
 	    }, [
 	      vue.createVNode(_component_el_icon, null, {
@@ -27268,8 +27364,8 @@
 	    ]) : vue.createCommentVNode("v-if", true),
 	    _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
 	      key: 1,
-	      class: vue.normalizeClass(["el-input-number__increase", { "is-disabled": _ctx.maxDisabled }]),
 	      role: "button",
+	      class: vue.normalizeClass([_ctx.ns.e("increase"), _ctx.ns.is("disabled", _ctx.maxDisabled)]),
 	      onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => _ctx.increase && _ctx.increase(...args), ["enter"]))
 	    }, [
 	      vue.createVNode(_component_el_icon, null, {
@@ -27357,8 +27453,8 @@
 	    class: vue.normalizeClass([
 	      _ctx.ns.b(),
 	      _ctx.type ? _ctx.ns.m(_ctx.type) : "",
-	      _ctx.disabled && "is-disabled",
-	      _ctx.underline && !_ctx.disabled && "is-underline"
+	      _ctx.ns.is("disabled", _ctx.disabled),
+	      _ctx.ns.is("underline", _ctx.underline && !_ctx.disabled)
 	    ]),
 	    href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
 	    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
@@ -28583,7 +28679,7 @@
 	  };
 	  const hoverItem = () => {
 	    if (!props.disabled && !selectGroup.disabled) {
-	      select.hoverIndex = select.optionsArray.indexOf(instance);
+	      select.hoverIndex = select.optionsArray.indexOf(instance.proxy);
 	    }
 	  };
 	  vue.watch(() => currentLabel.value, () => {
@@ -29453,7 +29549,10 @@
 	      type: String
 	    },
 	    defaultFirstOption: Boolean,
-	    reserveKeyword: Boolean,
+	    reserveKeyword: {
+	      type: Boolean,
+	      default: true
+	    },
 	    valueKey: {
 	      type: String,
 	      default: "value"
@@ -31661,8 +31760,8 @@
 	      return vue.h(props.tag, {
 	        class: [
 	          ns.b(),
-	          props.justify !== "start" ? `is-justify-${props.justify}` : "",
-	          props.align !== "top" ? `is-align-${props.align}` : ""
+	          ns.is(`justify-${props.justify}`, props.justify !== "start"),
+	          ns.is(`align-${props.align}`, props.align !== "top")
 	        ],
 	        style: style.value
 	      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
@@ -32896,7 +32995,7 @@
 	        const _states = vue.unref(states);
 	        columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
 	        rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
-	        const scrollBarWidth = scrollbarWidth();
+	        const scrollBarWidth = getScrollBarWidth();
 	        const _cache = vue.unref(cache);
 	        const estimatedHeight = getEstimatedTotalHeight(props, _cache);
 	        const estimatedWidth = getEstimatedTotalWidth(props, _cache);
@@ -36347,8 +36446,8 @@
 	    const switchKls = vue.computed(() => [
 	      ns.b(),
 	      ns.m(switchSize.value),
-	      switchDisabled.value ? "is-disabled" : "",
-	      checked.value ? "is-checked" : ""
+	      ns.is("disabled", switchDisabled.value),
+	      ns.is("checked", checked.value)
 	    ]);
 	    vue.watch(() => props.modelValue, () => {
 	      isModelValue.value = true;
@@ -36475,7 +36574,7 @@
 	      class: vue.normalizeClass([
 	        _ctx.ns.e("label"),
 	        _ctx.ns.em("label", "left"),
-	        !_ctx.checked ? "is-active" : ""
+	        _ctx.ns.is("active", !_ctx.checked)
 	      ])
 	    }, [
 	      _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -36501,7 +36600,7 @@
 	        _ctx.activeIcon || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
 	          _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	            key: 0,
-	            class: vue.normalizeClass(["is-icon", _ctx.checked ? "is-show" : "is-hide"])
+	            class: vue.normalizeClass([_ctx.ns.is("icon"), _ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")])
 	          }, {
 	            default: vue.withCtx(() => [
 	              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon)))
@@ -36510,7 +36609,7 @@
 	          }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
 	          _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	            key: 1,
-	            class: vue.normalizeClass(["is-icon", !_ctx.checked ? "is-show" : "is-hide"])
+	            class: vue.normalizeClass([_ctx.ns.is("icon"), !_ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")])
 	          }, {
 	            default: vue.withCtx(() => [
 	              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon)))
@@ -36520,12 +36619,12 @@
 	        ], 64)) : _ctx.activeText || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
 	          _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", {
 	            key: 0,
-	            class: vue.normalizeClass(["is-text", _ctx.checked ? "is-show" : "is-hide"]),
+	            class: vue.normalizeClass([_ctx.ns.is("text"), _ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")]),
 	            "aria-hidden": !_ctx.checked
 	          }, vue.toDisplayString(_ctx.activeText.substr(0, 1)), 11, _hoisted_4$6)) : vue.createCommentVNode("v-if", true),
 	          _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
 	            key: 1,
-	            class: vue.normalizeClass(["is-text", !_ctx.checked ? "is-show" : "is-hide"]),
+	            class: vue.normalizeClass([_ctx.ns.is("text"), !_ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")]),
 	            "aria-hidden": _ctx.checked
 	          }, vue.toDisplayString(_ctx.inactiveText.substr(0, 1)), 11, _hoisted_5$5)) : vue.createCommentVNode("v-if", true)
 	        ], 64)) : vue.createCommentVNode("v-if", true)
@@ -36535,13 +36634,13 @@
 	      }, [
 	        _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
 	          key: 0,
-	          class: "is-loading"
+	          class: vue.normalizeClass(_ctx.ns.is("loading"))
 	        }, {
 	          default: vue.withCtx(() => [
 	            vue.createVNode(_component_loading)
 	          ]),
 	          _: 1
-	        })) : vue.createCommentVNode("v-if", true)
+	        }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
 	      ], 2)
 	    ], 6),
 	    !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -36549,7 +36648,7 @@
 	      class: vue.normalizeClass([
 	        _ctx.ns.e("label"),
 	        _ctx.ns.em("label", "right"),
-	        _ctx.checked ? "is-active" : ""
+	        _ctx.ns.is("active", _ctx.checked)
 	      ])
 	    }, [
 	      _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -36927,11 +37026,6 @@
 	  }
 	  return styles;
 	};
-	const ensureRightFixedStyle = (style, hasGutter) => {
-	  if (hasGutter && style && !Number.isNaN(style.right)) {
-	    style.right += scrollbarWidth();
-	  }
-	};
 	const ensurePosition = (style, key) => {
 	  if (!style)
 	    return;
@@ -37921,7 +38015,7 @@
 	    this.bodyHeight = vue.ref(null);
 	    this.bodyScrollHeight = vue.ref(0);
 	    this.fixedBodyHeight = vue.ref(null);
-	    this.gutterWidth = scrollbarWidth();
+	    this.gutterWidth = 0;
 	    for (const name in options) {
 	      if (hasOwn(options, name)) {
 	        if (vue.isRef(this[name])) {
@@ -38422,12 +38516,13 @@
 	    }
 	  };
 	  const onScrollableChange = (layout) => {
-	    const cols = root.vnode.el.querySelectorAll("colgroup > col[name=gutter]");
+	    var _a, _b;
+	    const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col[name=gutter]")) || [];
 	    for (let i = 0, j = cols.length; i < j; i++) {
 	      const col = cols[i];
 	      col.setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0");
 	    }
-	    const ths = root.vnode.el.querySelectorAll("th.gutter");
+	    const ths = ((_b = root.vnode.el) == null ? void 0 : _b.querySelectorAll("th.gutter")) || [];
 	    for (let i = 0, j = ths.length; i < j; i++) {
 	      const th = ths[i];
 	      th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0";
@@ -38441,18 +38536,12 @@
 	  };
 	}
 
-	function hGutter() {
-	  return vue.h("col", {
-	    name: "gutter"
-	  });
-	}
-	function hColgroup(columns, hasGutter = false) {
+	function hColgroup(columns) {
 	  return vue.h("colgroup", {}, [
 	    ...columns.map((column) => vue.h("col", {
 	      name: column.id,
 	      key: column.id
-	    })),
-	    hasGutter && hGutter()
+	    }))
 	  ]);
 	}
 
@@ -38643,7 +38732,7 @@
 	    }
 	    return classes.join(" ");
 	  };
-	  const getHeaderCellStyle = (rowIndex, columnIndex, row, column, hasGutter) => {
+	  const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
 	    var _a;
 	    let headerCellStyles = (_a = parent.props.headerCellStyle) != null ? _a : {};
 	    if (typeof headerCellStyles === "function") {
@@ -38655,7 +38744,6 @@
 	      });
 	    }
 	    const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
-	    ensureRightFixedStyle(fixedStyle, hasGutter);
 	    ensurePosition(fixedStyle, "left");
 	    ensurePosition(fixedStyle, "right");
 	    return Object.assign({}, headerCellStyles, fixedStyle);
@@ -38803,13 +38891,7 @@
 	    const parent = instance.parent;
 	    const storeData = parent.store.states;
 	    const filterPanels = vue.ref({});
-	    const { tableLayout, onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
-	    const hasGutter = vue.computed(() => {
-	      return !props.fixed && tableLayout.gutterWidth > 0 && tableLayout.bodyScrollHeight.value > tableLayout.bodyHeight.value;
-	    });
-	    const gutterWidth = vue.computed(() => {
-	      return tableLayout.gutterWidth;
-	    });
+	    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
 	    vue.onMounted(() => {
 	      vue.nextTick(() => {
 	        const { prop, order } = props.defaultSort;
@@ -38841,8 +38923,6 @@
 	    return {
 	      columns: storeData.columns,
 	      filterPanels,
-	      hasGutter,
-	      gutterWidth,
 	      onColumnsChange,
 	      onScrollableChange,
 	      columnRows,
@@ -38865,9 +38945,7 @@
 	    const {
 	      columns,
 	      isGroup,
-	      hasGutter,
 	      columnRows,
-	      gutterWidth,
 	      getHeaderCellStyle,
 	      getHeaderCellClass,
 	      getHeaderRowClass,
@@ -38888,9 +38966,9 @@
 	      cellspacing: "0",
 	      class: "el-table__header"
 	    }, [
-	      hColgroup(columns, hasGutter),
+	      hColgroup(columns),
 	      vue.h("thead", {
-	        class: { "is-group": isGroup, "has-gutter": hasGutter }
+	        class: { "is-group": isGroup }
 	      }, columnRows.map((subColumns, rowIndex) => vue.h("tr", {
 	        class: getHeaderRowClass(rowIndex),
 	        key: rowIndex,
@@ -38904,7 +38982,7 @@
 	          colspan: column.colSpan,
 	          key: `${column.id}-thead`,
 	          rowSpan: column.rowSpan,
-	          style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column, hasGutter),
+	          style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
 	          onClick: ($event) => handleHeaderClick($event, column),
 	          onContextmenu: ($event) => handleHeaderContextMenu($event, column),
 	          onMousedown: ($event) => handleMouseDown($event, column),
@@ -38947,23 +39025,15 @@
 	            })
 	          ])
 	        ]);
-	      }).concat(hasGutter && rowIndex === 0 ? [
-	        vue.h("th", {
-	          class: "el-table__fixed-right-patch el-table__cell",
-	          key: `el-table--scrollbar`,
-	          rowSpan,
-	          style: {
-	            width: `${gutterWidth}px`
-	          }
-	        }, [])
-	      ] : []))))
+	      }))))
 	    ]);
 	  }
 	});
 
+	const TABLE_INJECTION_KEY = Symbol("ElTable");
+
 	function useEvents(props) {
-	  const instance = vue.getCurrentInstance();
-	  const parent = instance.parent;
+	  const parent = vue.inject(TABLE_INJECTION_KEY);
 	  const tooltipContent = vue.ref("");
 	  const tooltipTrigger = vue.ref(vue.h("div"));
 	  const handleEvent = (event, row, name) => {
@@ -39043,8 +39113,7 @@
 	}
 
 	function useStyles(props) {
-	  const instance = vue.getCurrentInstance();
-	  const parent = instance.parent;
+	  const parent = vue.inject(TABLE_INJECTION_KEY);
 	  const getRowStyle = (row, rowIndex) => {
 	    const rowStyle = parent.props.rowStyle;
 	    if (typeof rowStyle === "function") {
@@ -39149,8 +39218,7 @@
 	}
 
 	function useRender$1(props) {
-	  const instance = vue.getCurrentInstance();
-	  const parent = instance.parent;
+	  const parent = vue.inject(TABLE_INJECTION_KEY);
 	  const {
 	    handleDoubleClick,
 	    handleClick,
@@ -39370,7 +39438,7 @@
 	  props: defaultProps$3,
 	  setup(props) {
 	    const instance = vue.getCurrentInstance();
-	    const parent = instance.parent;
+	    const parent = vue.inject(TABLE_INJECTION_KEY);
 	    const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender$1(props);
 	    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
 	    vue.watch(props.store.states.hoverRow, (newVal, oldVal) => {
@@ -39458,16 +39526,8 @@
 	}
 
 	function useStyle$1(props) {
-	  const instance = vue.getCurrentInstance();
-	  const table = instance.parent;
 	  const { columns } = useMapState();
-	  const hasGutter = vue.computed(() => {
-	    return !props.fixed && table.layout.gutterWidth > 0 && table.layout.height.value && table.layout.bodyScrollHeight.value > table.layout.bodyHeight.value;
-	  });
-	  const gutterWidth = vue.computed(() => {
-	    return table.layout.gutterWidth;
-	  });
-	  const getCellClasses = (columns2, cellIndex, hasGutter2) => {
+	  const getCellClasses = (columns2, cellIndex) => {
 	    const column = columns2[cellIndex];
 	    const classes = [
 	      "el-table__cell",
@@ -39482,21 +39542,15 @@
 	    if (!column.children) {
 	      classes.push("is-leaf");
 	    }
-	    if (hasGutter2 && cellIndex === columns2.length - 1) {
-	      classes.push("last");
-	    }
 	    return classes;
 	  };
-	  const getCellStyles = (column, cellIndex, hasGutter2) => {
+	  const getCellStyles = (column, cellIndex) => {
 	    const fixedStyle = getFixedColumnOffset(cellIndex, column.fixed, props.store);
-	    ensureRightFixedStyle(fixedStyle, hasGutter2);
 	    ensurePosition(fixedStyle, "left");
 	    ensurePosition(fixedStyle, "right");
 	    return fixedStyle;
 	  };
 	  return {
-	    hasGutter,
-	    gutterWidth,
 	    getCellClasses,
 	    getCellStyles,
 	    columns
@@ -39528,25 +39582,15 @@
 	    }
 	  },
 	  setup(props) {
-	    const { hasGutter, getCellClasses, getCellStyles, columns, gutterWidth } = useStyle$1(props);
+	    const { getCellClasses, getCellStyles, columns } = useStyle$1(props);
 	    return {
 	      getCellClasses,
 	      getCellStyles,
-	      hasGutter,
-	      gutterWidth,
 	      columns
 	    };
 	  },
 	  render() {
-	    const {
-	      hasGutter,
-	      gutterWidth,
-	      columns,
-	      getCellStyles,
-	      getCellClasses,
-	      summaryMethod,
-	      sumText
-	    } = this;
+	    const { columns, getCellStyles, getCellClasses, summaryMethod, sumText } = this;
 	    const data = this.store.states.data.value;
 	    let sums = [];
 	    if (summaryMethod) {
@@ -39591,28 +39635,20 @@
 	      cellpadding: "0",
 	      border: "0"
 	    }, [
-	      hColgroup(columns, hasGutter),
-	      vue.h("tbody", {
-	        class: [{ "has-gutter": hasGutter }]
-	      }, [
+	      hColgroup(columns),
+	      vue.h("tbody", [
 	        vue.h("tr", {}, [
 	          ...columns.map((column, cellIndex) => vue.h("td", {
 	            key: cellIndex,
 	            colspan: column.colSpan,
 	            rowspan: column.rowSpan,
-	            class: getCellClasses(columns, cellIndex, hasGutter),
-	            style: getCellStyles(column, cellIndex, hasGutter)
+	            class: getCellClasses(columns, cellIndex),
+	            style: getCellStyles(column, cellIndex)
 	          }, [
 	            vue.h("div", {
 	              class: ["cell", column.labelClassName]
 	            }, [sums[cellIndex]])
-	          ])),
-	          hasGutter && vue.h("td", {
-	            class: "el-table__fixed-right-patch el-table__cell",
-	            style: {
-	              width: `${gutterWidth}px`
-	            }
-	          })
+	          ]))
 	        ])
 	      ])
 	    ]);
@@ -39712,12 +39748,6 @@
 	      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
 	    };
 	  });
-	  const borderBottomPatchStyles = vue.computed(() => {
-	    return {
-	      bottom: `${layout.gutterWidth}px`,
-	      right: `${layout.gutterWidth}px`
-	    };
-	  });
 	  const doLayout = () => {
 	    if (shouldUpdateHeight.value) {
 	      layout.updateElsHeight();
@@ -39758,9 +39788,12 @@
 	    setScrollClassByEl(tableWrapper, className);
 	  };
 	  const syncPostion = function() {
-	    if (!table.refs.bodyWrapper)
+	    if (!table.refs.scrollWrapper)
 	      return;
-	    const { scrollLeft, offsetWidth, scrollWidth } = table.refs.bodyWrapper;
+	    const scrollContainer = table.refs.scrollWrapper.wrap$;
+	    if (!scrollContainer)
+	      return;
+	    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer;
 	    const { headerWrapper, footerWrapper } = table.refs;
 	    if (headerWrapper)
 	      headerWrapper.scrollLeft = scrollLeft;
@@ -39776,7 +39809,8 @@
 	    }
 	  };
 	  const bindEvents = () => {
-	    table.refs.bodyWrapper.addEventListener("scroll", syncPostion, {
+	    var _a;
+	    (_a = table.refs.scrollWrapper.wrap$) == null ? void 0 : _a.addEventListener("scroll", syncPostion, {
 	      passive: true
 	    });
 	    if (props.fit) {
@@ -39785,12 +39819,12 @@
 	      on(window, "resize", doLayout);
 	    }
 	  };
-	  vue.onUnmounted(() => {
+	  vue.onBeforeUnmount(() => {
 	    unbindEvents();
 	  });
 	  const unbindEvents = () => {
 	    var _a;
-	    (_a = table.refs.bodyWrapper) == null ? void 0 : _a.removeEventListener("scroll", syncPostion, true);
+	    (_a = table.refs.scrollWrapper.wrap$) == null ? void 0 : _a.removeEventListener("scroll", syncPostion, true);
 	    if (props.fit) {
 	      removeResizeListener(table.vnode.el, resizeListener);
 	    } else {
@@ -39807,14 +39841,14 @@
 	    if (oldWidth !== width) {
 	      shouldUpdateLayout = true;
 	    }
-	    const height = el.offsetHeight;
-	    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
+	    const height2 = el.offsetHeight;
+	    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height2) {
 	      shouldUpdateLayout = true;
 	    }
 	    if (shouldUpdateLayout) {
 	      resizeState.value = {
 	        width,
-	        height
+	        height: height2
 	      };
 	      doLayout();
 	    }
@@ -39824,6 +39858,18 @@
 	    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
 	    return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
 	  });
+	  const height = vue.computed(() => {
+	    const headerHeight = layout.headerHeight.value || 0;
+	    const bodyHeight2 = layout.bodyHeight.value;
+	    const footerHeight = layout.footerHeight.value || 0;
+	    if (props.height) {
+	      return bodyHeight2 ? bodyHeight2 : void 0;
+	    } else if (props.maxHeight) {
+	      const maxHeight = parseHeight(props.maxHeight);
+	      return maxHeight - footerHeight - (props.showHeader ? headerHeight : 0);
+	    }
+	    return void 0;
+	  });
 	  const bodyHeight = vue.computed(() => {
 	    const headerHeight = layout.headerHeight.value || 0;
 	    const bodyHeight2 = layout.bodyHeight.value;
@@ -39845,13 +39891,13 @@
 	  const emptyBlockStyle = vue.computed(() => {
 	    if (props.data && props.data.length)
 	      return null;
-	    let height = "100%";
+	    let height2 = "100%";
 	    if (layout.appendHeight.value) {
-	      height = `calc(100% - ${layout.appendHeight.value}px)`;
+	      height2 = `calc(100% - ${layout.appendHeight.value}px)`;
 	    }
 	    return {
 	      width: bodyWidth.value,
-	      height
+	      height: height2
 	    };
 	  });
 	  const handleFixedMousewheel = (event, data) => {
@@ -39919,6 +39965,7 @@
 	    handleHeaderFooterMousewheel,
 	    tableSize,
 	    bodyHeight,
+	    height,
 	    emptyBlockStyle,
 	    handleFixedMousewheel,
 	    fixedHeight,
@@ -39927,8 +39974,7 @@
 	    bodyWidth,
 	    resizeState,
 	    doLayout,
-	    tableBodyStyles,
-	    borderBottomPatchStyles
+	    tableBodyStyles
 	  };
 	}
 
@@ -40011,7 +40057,8 @@
 	  components: {
 	    TableHeader,
 	    TableBody,
-	    TableFooter
+	    TableFooter,
+	    ElScrollbar: ElScrollbar$1
 	  },
 	  props: defaultProps$1,
 	  emits: [
@@ -40037,6 +40084,7 @@
 	  setup(props) {
 	    const { t } = useLocale();
 	    const table = vue.getCurrentInstance();
+	    vue.provide(TABLE_INJECTION_KEY, table);
 	    const store = createStore(table, props);
 	    table.store = store;
 	    const layout = new TableLayout$1({
@@ -40066,6 +40114,7 @@
 	      handleHeaderFooterMousewheel,
 	      tableSize,
 	      bodyHeight,
+	      height,
 	      emptyBlockStyle,
 	      handleFixedMousewheel,
 	      fixedHeight,
@@ -40074,8 +40123,7 @@
 	      bodyWidth,
 	      resizeState,
 	      doLayout,
-	      tableBodyStyles,
-	      borderBottomPatchStyles
+	      tableBodyStyles
 	    } = useStyle(props, layout, store, table);
 	    const debouncedUpdateLayout = debounce$3(doLayout, 50);
 	    const tableId = `el-table_${tableIdSeed++}`;
@@ -40105,9 +40153,9 @@
 	      isGroup,
 	      bodyWidth,
 	      bodyHeight,
+	      height,
 	      tableBodyStyles,
 	      emptyBlockStyle,
-	      borderBottomPatchStyles,
 	      debouncedUpdateLayout,
 	      handleFixedMousewheel,
 	      fixedHeight,
@@ -40162,6 +40210,7 @@
 	function render$g(_ctx, _cache, $props, $setup, $data, $options) {
 	  const _component_table_header = vue.resolveComponent("table-header");
 	  const _component_table_body = vue.resolveComponent("table-body");
+	  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
 	  const _component_table_footer = vue.resolveComponent("table-footer");
 	  const _directive_mousewheel = vue.resolveDirective("mousewheel");
 	  return vue.openBlock(), vue.createElementBlock("div", {
@@ -40177,7 +40226,8 @@
 	        "el-table--scrollable-x": _ctx.layout.scrollX.value,
 	        "el-table--scrollable-y": _ctx.layout.scrollY.value,
 	        "el-table--enable-row-hover": !_ctx.store.states.isComplex.value,
-	        "el-table--enable-row-transition": (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100
+	        "el-table--enable-row-transition": (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
+	        "has-footer": _ctx.showSummary
 	      },
 	      _ctx.tableSize ? `el-table--${_ctx.tableSize}` : "",
 	      _ctx.className,
@@ -40207,40 +40257,43 @@
 	        style: vue.normalizeStyle(_ctx.bodyHeight),
 	        class: "el-table__body-wrapper"
 	      }, [
-	        vue.createVNode(_component_table_body, {
-	          context: _ctx.context,
-	          highlight: _ctx.highlightCurrentRow,
-	          "row-class-name": _ctx.rowClassName,
-	          "tooltip-effect": _ctx.tooltipEffect,
-	          "row-style": _ctx.rowStyle,
-	          store: _ctx.store,
-	          stripe: _ctx.stripe,
-	          style: vue.normalizeStyle({
-	            width: _ctx.bodyWidth
-	          })
-	        }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-	        _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
-	          key: 0,
-	          ref: "emptyBlock",
-	          style: vue.normalizeStyle(_ctx.emptyBlockStyle),
-	          class: "el-table__empty-block"
-	        }, [
-	          vue.createElementVNode("span", _hoisted_4$4, [
-	            vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-	              vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
-	            ])
-	          ])
-	        ], 4)) : vue.createCommentVNode("v-if", true),
-	        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [
-	          vue.renderSlot(_ctx.$slots, "append")
-	        ], 512)) : vue.createCommentVNode("v-if", true)
+	        vue.createVNode(_component_el_scrollbar, {
+	          ref: "scrollWrapper",
+	          height: _ctx.height
+	        }, {
+	          default: vue.withCtx(() => [
+	            vue.createVNode(_component_table_body, {
+	              context: _ctx.context,
+	              highlight: _ctx.highlightCurrentRow,
+	              "row-class-name": _ctx.rowClassName,
+	              "tooltip-effect": _ctx.tooltipEffect,
+	              "row-style": _ctx.rowStyle,
+	              store: _ctx.store,
+	              stripe: _ctx.stripe,
+	              style: vue.normalizeStyle({
+	                width: _ctx.bodyWidth
+	              })
+	            }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
+	            _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
+	              key: 0,
+	              ref: "emptyBlock",
+	              style: vue.normalizeStyle(_ctx.emptyBlockStyle),
+	              class: "el-table__empty-block"
+	            }, [
+	              vue.createElementVNode("span", _hoisted_4$4, [
+	                vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+	                  vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
+	                ])
+	              ])
+	            ], 4)) : vue.createCommentVNode("v-if", true),
+	            _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [
+	              vue.renderSlot(_ctx.$slots, "append")
+	            ], 512)) : vue.createCommentVNode("v-if", true)
+	          ]),
+	          _: 3
+	        }, 8, ["height"])
 	      ], 4),
-	      _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2)) : vue.createCommentVNode("v-if", true),
-	      _ctx.layout.scrollX.value && _ctx.layout.height.value ? (vue.openBlock(), vue.createElementBlock("div", {
-	        key: 2,
-	        class: "el-table__border-bottom-patch",
-	        style: vue.normalizeStyle(_ctx.borderBottomPatchStyles)
-	      }, null, 4)) : vue.createCommentVNode("v-if", true)
+	      _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2)) : vue.createCommentVNode("v-if", true)
 	    ]),
 	    _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
 	      vue.createVNode(_component_table_footer, {
@@ -41703,7 +41756,7 @@
 	        _ctx.ns.e("node"),
 	        _ctx.ns.em("node", _ctx.size || ""),
 	        _ctx.ns.em("node", _ctx.type || ""),
-	        _ctx.hollow ? "is-hollow" : ""
+	        _ctx.ns.is("hollow", _ctx.hollow)
 	      ]),
 	      style: vue.normalizeStyle({
 	        backgroundColor: _ctx.color
@@ -41730,7 +41783,7 @@
 	    }, [
 	      !_ctx.hideTimestamp && _ctx.placement === "top" ? (vue.openBlock(), vue.createElementBlock("div", {
 	        key: 0,
-	        class: vue.normalizeClass([_ctx.ns.e("timestamp"), "is-top"])
+	        class: vue.normalizeClass([_ctx.ns.e("timestamp"), _ctx.ns.is("top")])
 	      }, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("div", {
 	        class: vue.normalizeClass(_ctx.ns.e("content"))
@@ -41739,7 +41792,7 @@
 	      ], 2),
 	      !_ctx.hideTimestamp && _ctx.placement === "bottom" ? (vue.openBlock(), vue.createElementBlock("div", {
 	        key: 1,
-	        class: vue.normalizeClass([_ctx.ns.e("timestamp"), "is-bottom"])
+	        class: vue.normalizeClass([_ctx.ns.e("timestamp"), _ctx.ns.is("bottom")])
 	      }, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true)
 	    ], 2)
 	  ], 2);
@@ -43308,7 +43361,7 @@
 	      oldChecked.value = checked;
 	      oldIndeterminate.value = indeterminate;
 	    };
-	    const handleClick = () => {
+	    const handleClick = (e) => {
 	      const store = tree.store.value;
 	      store.setCurrentNode(props.node);
 	      tree.ctx.emit("current-change", store.currentNode ? store.currentNode.data : null, store.currentNode);
@@ -43321,7 +43374,7 @@
 	          target: { checked: !props.node.checked }
 	        });
 	      }
-	      tree.ctx.emit("node-click", props.node.data, props.node, instance);
+	      tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
 	    };
 	    const handleContextMenu = (event) => {
 	      if (tree.instance.vnode.props["onNodeContextmenu"]) {
@@ -44049,7 +44102,7 @@
 	const NODE_CHECK_CHANGE = "check-change";
 	const NODE_CONTEXTMENU = "node-contextmenu";
 	const treeEmits = {
-	  [NODE_CLICK]: (data, node) => data && node,
+	  [NODE_CLICK]: (data, node, e) => data && node && e,
 	  [NODE_EXPAND]: (data, node) => data && node,
 	  [NODE_COLLAPSE]: (data, node) => data && node,
 	  [CURRENT_CHANGE]: (data, node) => data && node,
@@ -44058,7 +44111,7 @@
 	  [NODE_CONTEXTMENU]: (event, data, node) => event && data && node
 	};
 	const treeNodeEmits = {
-	  click: (node) => !!node,
+	  click: (node, e) => !!(node && e),
 	  toggle: (node) => !!node,
 	  check: (node, checked) => node && typeof checked === "boolean"
 	};
@@ -44453,8 +44506,8 @@
 	      expand(node);
 	    }
 	  }
-	  function handleNodeClick(node) {
-	    emit(NODE_CLICK, node.data, node);
+	  function handleNodeClick(node, e) {
+	    emit(NODE_CLICK, node.data, node, e);
 	    handleCurrentChange(node);
 	    if (props.expandOnClickNode) {
 	      toggleExpand(node);
@@ -44579,8 +44632,8 @@
 	      var _a;
 	      return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : DEFAULT_ICON;
 	    });
-	    const handleClick = () => {
-	      emit("click", props.node);
+	    const handleClick = (e) => {
+	      emit("click", props.node, e);
 	    };
 	    const handleExpandIconClick = () => {
 	      emit("toggle", props.node);
@@ -48496,6 +48549,7 @@
 	exports.TrapFocus = TrapFocus;
 	exports.affixEmits = affixEmits;
 	exports.affixProps = affixProps;
+	exports.alertEffects = alertEffects;
 	exports.alertEmits = alertEmits;
 	exports.alertProps = alertProps;
 	exports.avatarEmits = avatarEmits;