@element-plus/nightly 0.0.20220526 → 0.0.20220527

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220526 */
+/*! Element Plus v0.0.20220527 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -7394,10 +7394,10 @@
   const _hoisted_3$12 = [
     _hoisted_2$1l
   ];
-  function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1I(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$12);
   }
-  var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$2W, [["render", _sfc_render$1K]]);
+  var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$2W, [["render", _sfc_render$1I]]);
 
   vue.defineComponent({
     name: "ArrowLeftBold"
@@ -7417,10 +7417,10 @@
   const _hoisted_3$11 = [
     _hoisted_2$1k
   ];
-  function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$11);
   }
-  var arrowLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2V, [["render", _sfc_render$1J]]);
+  var arrowLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2V, [["render", _sfc_render$1H]]);
 
   vue.defineComponent({
     name: "ArrowRightBold"
@@ -7440,10 +7440,10 @@
   const _hoisted_3$10 = [
     _hoisted_2$1j
   ];
-  function _sfc_render$1I(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$10);
   }
-  var arrowRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2U, [["render", _sfc_render$1I]]);
+  var arrowRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2U, [["render", _sfc_render$1G]]);
 
   vue.defineComponent({
     name: "ArrowUpBold"
@@ -7463,10 +7463,10 @@
   const _hoisted_3$$ = [
     _hoisted_2$1i
   ];
-  function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$$);
   }
-  var arrowUp = /* @__PURE__ */ _export_sfc$1(_sfc_main$2T, [["render", _sfc_render$1H]]);
+  var arrowUp = /* @__PURE__ */ _export_sfc$1(_sfc_main$2T, [["render", _sfc_render$1F]]);
 
   vue.defineComponent({
     name: "Avatar"
@@ -7487,14 +7487,14 @@
     fill: "currentColor",
     d: "m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
   }, null, -1);
-  const _hoisted_4$k = [
+  const _hoisted_4$j = [
     _hoisted_2$1h,
     _hoisted_3$_
   ];
-  function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_4$k);
+  function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_4$j);
   }
-  var back = /* @__PURE__ */ _export_sfc$1(_sfc_main$2S, [["render", _sfc_render$1G]]);
+  var back = /* @__PURE__ */ _export_sfc$1(_sfc_main$2S, [["render", _sfc_render$1E]]);
 
   vue.defineComponent({
     name: "Baseball"
@@ -7566,10 +7566,10 @@
   const _hoisted_3$Z = [
     _hoisted_2$1g
   ];
-  function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$Z);
   }
-  var calendar = /* @__PURE__ */ _export_sfc$1(_sfc_main$2R, [["render", _sfc_render$1F]]);
+  var calendar = /* @__PURE__ */ _export_sfc$1(_sfc_main$2R, [["render", _sfc_render$1D]]);
 
   vue.defineComponent({
     name: "CameraFilled"
@@ -7601,10 +7601,10 @@
   const _hoisted_3$Y = [
     _hoisted_2$1f
   ];
-  function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_3$Y);
   }
-  var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2Q, [["render", _sfc_render$1E]]);
+  var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2Q, [["render", _sfc_render$1C]]);
 
   const _sfc_main$2P = vue.defineComponent({
     name: "CaretTop"
@@ -7620,10 +7620,10 @@
   const _hoisted_3$X = [
     _hoisted_2$1e
   ];
-  function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$X);
   }
-  var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$2P, [["render", _sfc_render$1D]]);
+  var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$2P, [["render", _sfc_render$1B]]);
 
   vue.defineComponent({
     name: "Cellphone"
@@ -7667,10 +7667,10 @@
   const _hoisted_3$W = [
     _hoisted_2$1d
   ];
-  function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$W);
   }
-  var check = /* @__PURE__ */ _export_sfc$1(_sfc_main$2O, [["render", _sfc_render$1C]]);
+  var check = /* @__PURE__ */ _export_sfc$1(_sfc_main$2O, [["render", _sfc_render$1A]]);
 
   vue.defineComponent({
     name: "Checked"
@@ -7698,10 +7698,10 @@
   const _hoisted_3$V = [
     _hoisted_2$1c
   ];
-  function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$V);
   }
-  var circleCheckFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2N, [["render", _sfc_render$1B]]);
+  var circleCheckFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2N, [["render", _sfc_render$1z]]);
 
   const _sfc_main$2M = vue.defineComponent({
     name: "CircleCheck"
@@ -7718,14 +7718,14 @@
     fill: "currentColor",
     d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"
   }, null, -1);
-  const _hoisted_4$j = [
+  const _hoisted_4$i = [
     _hoisted_2$1b,
     _hoisted_3$U
   ];
-  function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_4$j);
+  function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_4$i);
   }
-  var circleCheck = /* @__PURE__ */ _export_sfc$1(_sfc_main$2M, [["render", _sfc_render$1A]]);
+  var circleCheck = /* @__PURE__ */ _export_sfc$1(_sfc_main$2M, [["render", _sfc_render$1y]]);
 
   const _sfc_main$2L = vue.defineComponent({
     name: "CircleCloseFilled"
@@ -7741,10 +7741,10 @@
   const _hoisted_3$T = [
     _hoisted_2$1a
   ];
-  function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$T);
   }
-  var circleCloseFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2L, [["render", _sfc_render$1z]]);
+  var circleCloseFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2L, [["render", _sfc_render$1x]]);
 
   const _sfc_main$2K = vue.defineComponent({
     name: "CircleClose"
@@ -7761,14 +7761,14 @@
     fill: "currentColor",
     d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
   }, null, -1);
-  const _hoisted_4$i = [
+  const _hoisted_4$h = [
     _hoisted_2$19,
     _hoisted_3$S
   ];
-  function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_4$i);
+  function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_4$h);
   }
-  var circleClose = /* @__PURE__ */ _export_sfc$1(_sfc_main$2K, [["render", _sfc_render$1y]]);
+  var circleClose = /* @__PURE__ */ _export_sfc$1(_sfc_main$2K, [["render", _sfc_render$1w]]);
 
   vue.defineComponent({
     name: "CirclePlusFilled"
@@ -7793,19 +7793,19 @@
     fill: "currentColor",
     d: "M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
   }, null, -1);
-  const _hoisted_4$h = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_4$g = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
     d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z"
   }, null, -1);
-  const _hoisted_5$a = [
+  const _hoisted_5$9 = [
     _hoisted_2$18,
     _hoisted_3$R,
-    _hoisted_4$h
+    _hoisted_4$g
   ];
-  function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_5$a);
+  function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_5$9);
   }
-  var clock = /* @__PURE__ */ _export_sfc$1(_sfc_main$2J, [["render", _sfc_render$1x]]);
+  var clock = /* @__PURE__ */ _export_sfc$1(_sfc_main$2J, [["render", _sfc_render$1v]]);
 
   vue.defineComponent({
     name: "CloseBold"
@@ -7825,10 +7825,10 @@
   const _hoisted_3$Q = [
     _hoisted_2$17
   ];
-  function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$Q);
   }
-  var close$2 = /* @__PURE__ */ _export_sfc$1(_sfc_main$2I, [["render", _sfc_render$1w]]);
+  var close$2 = /* @__PURE__ */ _export_sfc$1(_sfc_main$2I, [["render", _sfc_render$1u]]);
 
   vue.defineComponent({
     name: "Cloudy"
@@ -7904,10 +7904,10 @@
   const _hoisted_3$P = [
     _hoisted_2$16
   ];
-  function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$P);
   }
-  var dArrowLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2H, [["render", _sfc_render$1v]]);
+  var dArrowLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2H, [["render", _sfc_render$1t]]);
 
   const _sfc_main$2G = vue.defineComponent({
     name: "DArrowRight"
@@ -7923,10 +7923,10 @@
   const _hoisted_3$O = [
     _hoisted_2$15
   ];
-  function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$O);
   }
-  var dArrowRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2G, [["render", _sfc_render$1u]]);
+  var dArrowRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2G, [["render", _sfc_render$1s]]);
 
   vue.defineComponent({
     name: "DCaret"
@@ -7966,10 +7966,10 @@
   const _hoisted_3$N = [
     _hoisted_2$14
   ];
-  function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$N);
   }
-  var _delete = /* @__PURE__ */ _export_sfc$1(_sfc_main$2F, [["render", _sfc_render$1t]]);
+  var _delete = /* @__PURE__ */ _export_sfc$1(_sfc_main$2F, [["render", _sfc_render$1r]]);
 
   vue.defineComponent({
     name: "Dessert"
@@ -8021,10 +8021,10 @@
   const _hoisted_3$M = [
     _hoisted_2$13
   ];
-  function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$M);
   }
-  var document$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$2E, [["render", _sfc_render$1s]]);
+  var document$1 = /* @__PURE__ */ _export_sfc$1(_sfc_main$2E, [["render", _sfc_render$1q]]);
 
   vue.defineComponent({
     name: "Download"
@@ -8148,10 +8148,10 @@
   const _hoisted_3$L = [
     _hoisted_2$12
   ];
-  function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$L);
   }
-  var fullScreen = /* @__PURE__ */ _export_sfc$1(_sfc_main$2D, [["render", _sfc_render$1r]]);
+  var fullScreen = /* @__PURE__ */ _export_sfc$1(_sfc_main$2D, [["render", _sfc_render$1p]]);
 
   vue.defineComponent({
     name: "GobletFull"
@@ -8216,14 +8216,14 @@
     d: "M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z",
     fill: "currentColor"
   }, null, -1);
-  const _hoisted_4$g = [
+  const _hoisted_4$f = [
     _hoisted_2$11,
     _hoisted_3$K
   ];
-  function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_4$g);
+  function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_4$f);
   }
-  var hide = /* @__PURE__ */ _export_sfc$1(_sfc_main$2C, [["render", _sfc_render$1q]]);
+  var hide = /* @__PURE__ */ _export_sfc$1(_sfc_main$2C, [["render", _sfc_render$1o]]);
 
   vue.defineComponent({
     name: "Histogram"
@@ -8275,10 +8275,10 @@
   const _hoisted_3$J = [
     _hoisted_2$10
   ];
-  function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$J);
   }
-  var infoFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2B, [["render", _sfc_render$1p]]);
+  var infoFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2B, [["render", _sfc_render$1n]]);
 
   vue.defineComponent({
     name: "Iphone"
@@ -8318,10 +8318,10 @@
   const _hoisted_3$I = [
     _hoisted_2$$
   ];
-  function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1m, _hoisted_3$I);
   }
-  var loading = /* @__PURE__ */ _export_sfc$1(_sfc_main$2A, [["render", _sfc_render$1o]]);
+  var loading = /* @__PURE__ */ _export_sfc$1(_sfc_main$2A, [["render", _sfc_render$1m]]);
 
   vue.defineComponent({
     name: "LocationFilled"
@@ -8405,10 +8405,10 @@
   const _hoisted_3$H = [
     _hoisted_2$_
   ];
-  function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1l, _hoisted_3$H);
   }
-  var minus = /* @__PURE__ */ _export_sfc$1(_sfc_main$2z, [["render", _sfc_render$1n]]);
+  var minus = /* @__PURE__ */ _export_sfc$1(_sfc_main$2z, [["render", _sfc_render$1l]]);
 
   vue.defineComponent({
     name: "Money"
@@ -8440,10 +8440,10 @@
   const _hoisted_3$G = [
     _hoisted_2$Z
   ];
-  function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1k, _hoisted_3$G);
   }
-  var moreFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2y, [["render", _sfc_render$1m]]);
+  var moreFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2y, [["render", _sfc_render$1k]]);
 
   const _sfc_main$2x = vue.defineComponent({
     name: "More"
@@ -8459,10 +8459,10 @@
   const _hoisted_3$F = [
     _hoisted_2$Y
   ];
-  function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1j, _hoisted_3$F);
   }
-  var more = /* @__PURE__ */ _export_sfc$1(_sfc_main$2x, [["render", _sfc_render$1l]]);
+  var more = /* @__PURE__ */ _export_sfc$1(_sfc_main$2x, [["render", _sfc_render$1j]]);
 
   vue.defineComponent({
     name: "MostlyCloudy"
@@ -8554,10 +8554,10 @@
   const _hoisted_3$E = [
     _hoisted_2$X
   ];
-  function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1i, _hoisted_3$E);
   }
-  var pictureFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2w, [["render", _sfc_render$1k]]);
+  var pictureFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2w, [["render", _sfc_render$1i]]);
 
   vue.defineComponent({
     name: "PictureRounded"
@@ -8593,10 +8593,10 @@
   const _hoisted_3$D = [
     _hoisted_2$W
   ];
-  function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1h, _hoisted_3$D);
   }
-  var plus = /* @__PURE__ */ _export_sfc$1(_sfc_main$2v, [["render", _sfc_render$1j]]);
+  var plus = /* @__PURE__ */ _export_sfc$1(_sfc_main$2v, [["render", _sfc_render$1h]]);
 
   vue.defineComponent({
     name: "Pointer"
@@ -8644,10 +8644,10 @@
   const _hoisted_3$C = [
     _hoisted_2$V
   ];
-  function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1g, _hoisted_3$C);
   }
-  var questionFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2u, [["render", _sfc_render$1i]]);
+  var questionFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2u, [["render", _sfc_render$1g]]);
 
   vue.defineComponent({
     name: "Rank"
@@ -8675,10 +8675,10 @@
   const _hoisted_3$B = [
     _hoisted_2$U
   ];
-  function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1f, _hoisted_3$B);
   }
-  var refreshLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2t, [["render", _sfc_render$1h]]);
+  var refreshLeft = /* @__PURE__ */ _export_sfc$1(_sfc_main$2t, [["render", _sfc_render$1f]]);
 
   const _sfc_main$2s = vue.defineComponent({
     name: "RefreshRight"
@@ -8694,10 +8694,10 @@
   const _hoisted_3$A = [
     _hoisted_2$T
   ];
-  function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1e, _hoisted_3$A);
   }
-  var refreshRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2s, [["render", _sfc_render$1g]]);
+  var refreshRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$2s, [["render", _sfc_render$1e]]);
 
   vue.defineComponent({
     name: "Refresh"
@@ -8733,10 +8733,10 @@
   const _hoisted_3$z = [
     _hoisted_2$S
   ];
-  function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1d, _hoisted_3$z);
   }
-  var scaleToOriginal = /* @__PURE__ */ _export_sfc$1(_sfc_main$2r, [["render", _sfc_render$1f]]);
+  var scaleToOriginal = /* @__PURE__ */ _export_sfc$1(_sfc_main$2r, [["render", _sfc_render$1d]]);
 
   vue.defineComponent({
     name: "School"
@@ -8760,10 +8760,10 @@
   const _hoisted_3$y = [
     _hoisted_2$R
   ];
-  function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1c, _hoisted_3$y);
   }
-  var search = /* @__PURE__ */ _export_sfc$1(_sfc_main$2q, [["render", _sfc_render$1e]]);
+  var search = /* @__PURE__ */ _export_sfc$1(_sfc_main$2q, [["render", _sfc_render$1c]]);
 
   vue.defineComponent({
     name: "Select"
@@ -8839,10 +8839,10 @@
   const _hoisted_3$x = [
     _hoisted_2$Q
   ];
-  function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1b, _hoisted_3$x);
   }
-  var sortDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$2p, [["render", _sfc_render$1d]]);
+  var sortDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$2p, [["render", _sfc_render$1b]]);
 
   const _sfc_main$2o = vue.defineComponent({
     name: "SortUp"
@@ -8858,10 +8858,10 @@
   const _hoisted_3$w = [
     _hoisted_2$P
   ];
-  function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1a, _hoisted_3$w);
   }
-  var sortUp = /* @__PURE__ */ _export_sfc$1(_sfc_main$2o, [["render", _sfc_render$1c]]);
+  var sortUp = /* @__PURE__ */ _export_sfc$1(_sfc_main$2o, [["render", _sfc_render$1a]]);
 
   vue.defineComponent({
     name: "Sort"
@@ -8885,10 +8885,10 @@
   const _hoisted_3$v = [
     _hoisted_2$O
   ];
-  function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$19, _hoisted_3$v);
   }
-  var starFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2n, [["render", _sfc_render$1b]]);
+  var starFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2n, [["render", _sfc_render$19]]);
 
   const _sfc_main$2m = vue.defineComponent({
     name: "Star"
@@ -8904,10 +8904,10 @@
   const _hoisted_3$u = [
     _hoisted_2$N
   ];
-  function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$18, _hoisted_3$u);
   }
-  var star = /* @__PURE__ */ _export_sfc$1(_sfc_main$2m, [["render", _sfc_render$1a]]);
+  var star = /* @__PURE__ */ _export_sfc$1(_sfc_main$2m, [["render", _sfc_render$18]]);
 
   vue.defineComponent({
     name: "Stopwatch"
@@ -8927,10 +8927,10 @@
   const _hoisted_3$t = [
     _hoisted_2$M
   ];
-  function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$17, _hoisted_3$t);
   }
-  var successFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2l, [["render", _sfc_render$19]]);
+  var successFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2l, [["render", _sfc_render$17]]);
 
   vue.defineComponent({
     name: "Sugar"
@@ -9066,10 +9066,10 @@
   const _hoisted_3$s = [
     _hoisted_2$L
   ];
-  function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$16, _hoisted_3$s);
   }
-  var view = /* @__PURE__ */ _export_sfc$1(_sfc_main$2k, [["render", _sfc_render$18]]);
+  var view = /* @__PURE__ */ _export_sfc$1(_sfc_main$2k, [["render", _sfc_render$16]]);
 
   vue.defineComponent({
     name: "WalletFilled"
@@ -9093,10 +9093,10 @@
   const _hoisted_3$r = [
     _hoisted_2$K
   ];
-  function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$15, _hoisted_3$r);
   }
-  var warningFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2j, [["render", _sfc_render$17]]);
+  var warningFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$2j, [["render", _sfc_render$15]]);
 
   vue.defineComponent({
     name: "Warning"
@@ -9128,10 +9128,10 @@
   const _hoisted_3$q = [
     _hoisted_2$J
   ];
-  function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$14, _hoisted_3$q);
   }
-  var zoomIn = /* @__PURE__ */ _export_sfc$1(_sfc_main$2i, [["render", _sfc_render$16]]);
+  var zoomIn = /* @__PURE__ */ _export_sfc$1(_sfc_main$2i, [["render", _sfc_render$14]]);
 
   const _sfc_main$2h = vue.defineComponent({
     name: "ZoomOut"
@@ -9147,10 +9147,10 @@
   const _hoisted_3$p = [
     _hoisted_2$I
   ];
-  function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$13, _hoisted_3$p);
   }
-  var zoomOut = /* @__PURE__ */ _export_sfc$1(_sfc_main$2h, [["render", _sfc_render$15]]);
+  var zoomOut = /* @__PURE__ */ _export_sfc$1(_sfc_main$2h, [["render", _sfc_render$13]]);
 
   const wrapperKey = Symbol();
   const propKey = "__elPropsReservedKey";
@@ -9435,6 +9435,8 @@
   const tooltipV2ContentKey = Symbol("tooltipV2Content");
   const TOOLTIP_V2_OPEN = "tooltip_v2.open";
 
+  const ROOT_PICKER_INJECTION_KEY = Symbol();
+
   const useProp = (name) => {
     const vm = vue.getCurrentInstance();
     return vue.computed(() => {
@@ -11409,7 +11411,7 @@
     return [recordCursor, setCursor];
   }
 
-  const version$1 = "0.0.20220526";
+  const version$1 = "0.0.20220527";
 
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   const makeInstaller = (components = []) => {
@@ -11459,11 +11461,11 @@
     return target;
   };
 
-  const __default__$17 = {
+  const __default__$18 = {
     name: "ElAffix"
   };
   const _sfc_main$2g = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$17,
+    ...__default__$18,
     props: affixProps,
     emits: affixEmits,
     setup(__props, { expose, emit }) {
@@ -11578,12 +11580,12 @@
     }
   });
 
-  const __default__$16 = {
+  const __default__$17 = {
     name: "ElIcon",
     inheritAttrs: false
   };
   const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$16,
+    ...__default__$17,
     props: iconProps,
     setup(__props) {
       const props = __props;
@@ -11645,11 +11647,11 @@
     close: (evt) => evt instanceof MouseEvent
   };
 
-  const __default__$15 = {
+  const __default__$16 = {
     name: "ElAlert"
   };
   const _sfc_main$2e = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$15,
+    ...__default__$16,
     props: alertProps,
     emits: alertEmits,
     setup(__props, { emit }) {
@@ -11913,12 +11915,12 @@
   const _hoisted_1$12 = ["role"];
   const _hoisted_2$H = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"];
   const _hoisted_3$o = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
-  const __default__$14 = {
+  const __default__$15 = {
     name: "ElInput",
     inheritAttrs: false
   };
   const _sfc_main$2d = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$14,
+    ...__default__$15,
     props: inputProps,
     emits: inputEmits,
     setup(__props, { expose, emit }) {
@@ -12489,7 +12491,7 @@
       };
     }
   });
-  function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createBlock(vue.Transition, {
       name: _ctx.ns.b("fade")
     }, {
@@ -12512,7 +12514,7 @@
       _: 1
     }, 8, ["name"]);
   }
-  var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$14], ["__file", "thumb.vue"]]);
+  var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["render", _sfc_render$12], ["__file", "thumb.vue"]]);
 
   const barProps = buildProps({
     always: {
@@ -12561,7 +12563,7 @@
       };
     }
   });
-  function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_thumb = vue.resolveComponent("thumb");
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
       vue.createVNode(_component_thumb, {
@@ -12579,7 +12581,7 @@
       }, null, 8, ["move", "ratio", "size", "always"])
     ], 64);
   }
-  var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$13], ["__file", "bar.vue"]]);
+  var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$11], ["__file", "bar.vue"]]);
 
   const scrollbarProps = buildProps({
     height: {
@@ -12753,7 +12755,7 @@
       };
     }
   });
-  function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_bar = vue.resolveComponent("bar");
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: "scrollbar$",
@@ -12791,7 +12793,7 @@
       }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
     ], 2);
   }
-  var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$12], ["__file", "scrollbar.vue"]]);
+  var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["render", _sfc_render$10], ["__file", "scrollbar.vue"]]);
 
   const ElScrollbar = withInstall(Scrollbar);
 
@@ -12806,12 +12808,12 @@
     }
   });
 
-  const __default__$13 = {
+  const __default__$14 = {
     name: "ElPopperRoot",
     inheritAttrs: false
   };
   const _sfc_main$29 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$13,
+    ...__default__$14,
     props: usePopperProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -12843,12 +12845,12 @@
     }
   });
 
-  const __default__$12 = {
+  const __default__$13 = {
     name: "ElPopperArrow",
     inheritAttrs: false
   };
   const _sfc_main$28 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$12,
+    ...__default__$13,
     props: usePopperArrowProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -12946,12 +12948,12 @@
     open: Boolean
   });
 
-  const __default__$11 = {
+  const __default__$12 = {
     name: "ElPopperTrigger",
     inheritAttrs: false
   };
   const _sfc_main$27 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$11,
+    ...__default__$12,
     props: usePopperTriggerProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -13249,7 +13251,8 @@
         if (focusLayer.paused || !trapContainer)
           return;
         if (props.trapped) {
-          if (!trapContainer.contains(e.relatedTarget)) {
+          const relatedTarget = e.relatedTarget;
+          if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) {
             tryFocus(lastFocusAfterTrapped, true);
           }
         } else {
@@ -13327,10 +13330,10 @@
       };
     }
   });
-  function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
   }
-  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$11], ["__file", "focus-trap.vue"]]);
+  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["render", _sfc_render$$], ["__file", "focus-trap.vue"]]);
 
   const POSITIONING_STRATEGIES = ["fixed", "absolute"];
   const usePopperCoreConfigProps = buildProps({
@@ -13484,11 +13487,11 @@
   }
 
   const _hoisted_1$11 = ["role", "aria-label", "aria-modal"];
-  const __default__$10 = {
+  const __default__$11 = {
     name: "ElPopperContent"
   };
   const _sfc_main$25 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$10,
+    ...__default__$11,
     props: usePopperContentProps,
     emits: usePopperContentEmits,
     setup(__props, { expose, emit }) {
@@ -13834,7 +13837,7 @@
       };
     }
   });
-  function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_popper_content = vue.resolveComponent("el-popper-content");
     return vue.openBlock(), vue.createBlock(vue.Teleport, {
       disabled: !_ctx.teleported,
@@ -13888,7 +13891,7 @@
       }, 8, ["name", "onAfterLeave", "onBeforeEnter", "onAfterEnter", "onBeforeLeave"])
     ], 8, ["disabled", "to"]);
   }
-  var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$10], ["__file", "content.vue"]]);
+  var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["render", _sfc_render$_], ["__file", "content.vue"]]);
 
   const isTriggerType = (trigger, type) => {
     if (isArray(trigger)) {
@@ -13952,7 +13955,7 @@
       };
     }
   });
-  function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_popper_trigger = vue.resolveComponent("el-popper-trigger");
     return vue.openBlock(), vue.createBlock(_component_el_popper_trigger, {
       id: _ctx.id,
@@ -13974,7 +13977,7 @@
       _: 3
     }, 8, ["id", "virtual-ref", "open", "virtual-triggering", "class", "onBlur", "onClick", "onContextmenu", "onFocus", "onMouseenter", "onMouseleave", "onKeydown"]);
   }
-  var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$$], ["__file", "trigger.vue"]]);
+  var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["render", _sfc_render$Z], ["__file", "trigger.vue"]]);
 
   const { useModelToggleProps, useModelToggle, useModelToggleEmits } = createModelToggleComposable("visible");
   const _sfc_main$22 = vue.defineComponent({
@@ -14091,7 +14094,7 @@
   });
   const _hoisted_1$10 = ["innerHTML"];
   const _hoisted_2$G = { key: 1 };
-  function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$Y(_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");
     const _component_el_tooltip_content = vue.resolveComponent("el-tooltip-content");
@@ -14158,7 +14161,7 @@
       _: 3
     }, 8, ["role"]);
   }
-  var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$_], ["__file", "tooltip.vue"]]);
+  var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["render", _sfc_render$Y], ["__file", "tooltip.vue"]]);
 
   const ElTooltip = withInstall(Tooltip);
 
@@ -14229,12 +14232,12 @@
   const _hoisted_1$$ = ["aria-expanded", "aria-owns"];
   const _hoisted_2$F = { key: 0 };
   const _hoisted_3$n = ["id", "aria-selected", "onClick"];
-  const __default__$$ = {
+  const __default__$10 = {
     name: "ElAutocomplete",
     inheritAttrs: false
   };
   const _sfc_main$21 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$$,
+    ...__default__$10,
     props: autocompleteProps,
     emits: autocompleteEmits,
     setup(__props, { expose, emit }) {
@@ -14572,11 +14575,11 @@
   };
 
   const _hoisted_1$_ = ["src", "alt", "srcset"];
-  const __default__$_ = {
+  const __default__$$ = {
     name: "ElAvatar"
   };
   const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$_,
+    ...__default__$$,
     props: avatarProps,
     emits: avatarEmits,
     setup(__props, { emit }) {
@@ -14657,11 +14660,11 @@
   };
 
   const _hoisted_1$Z = ["onClick"];
-  const __default__$Z = {
+  const __default__$_ = {
     name: "ElBacktop"
   };
   const _sfc_main$1$ = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$Z,
+    ...__default__$_,
     props: backtopProps,
     emits: backtopEmits,
     setup(__props, { emit }) {
@@ -14766,11 +14769,11 @@
   });
 
   const _hoisted_1$Y = ["textContent"];
-  const __default__$Y = {
+  const __default__$Z = {
     name: "ElBadge"
   };
   const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$Y,
+    ...__default__$Z,
     props: badgeProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -14828,11 +14831,11 @@
     }
   });
 
-  const __default__$X = {
+  const __default__$Y = {
     name: "ElBreadcrumb"
   };
   const _sfc_main$1Z = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$X,
+    ...__default__$Y,
     props: breadcrumbProps,
     setup(__props) {
       const props = __props;
@@ -14871,11 +14874,11 @@
     }
   });
 
-  const __default__$W = {
+  const __default__$X = {
     name: "ElBreadcrumbItem"
   };
   const _sfc_main$1Y = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$W,
+    ...__default__$X,
     props: breadcrumbItemProps,
     setup(__props) {
       const props = __props;
@@ -15906,11 +15909,11 @@
   }
 
   const _hoisted_1$X = ["aria-disabled", "disabled", "autofocus", "type"];
-  const __default__$V = {
+  const __default__$W = {
     name: "ElButton"
   };
   const _sfc_main$1X = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$V,
+    ...__default__$W,
     props: buttonProps,
     emits: buttonEmits,
     setup(__props, { expose, emit }) {
@@ -16018,11 +16021,11 @@
     type: buttonProps.type
   };
 
-  const __default__$U = {
+  const __default__$V = {
     name: "ElButtonGroup"
   };
   const _sfc_main$1W = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$U,
+    ...__default__$V,
     props: buttonGroupProps,
     setup(__props) {
       const props = __props;
@@ -16477,6 +16480,7 @@
   const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
   const DEFAULT_FORMATS_DATEPICKER = {
     date: DEFAULT_FORMATS_DATE,
+    dates: DEFAULT_FORMATS_DATE,
     week: "gggg[w]ww",
     year: "YYYY",
     month: "YYYY-MM",
@@ -17083,7 +17087,7 @@
   });
   const _hoisted_1$W = ["id", "name", "placeholder", "value", "disabled", "readonly"];
   const _hoisted_2$E = ["id", "name", "placeholder", "value", "disabled", "readonly"];
-  function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -17268,7 +17272,7 @@
       _: 3
     }, 16, ["visible", "transition", "popper-class", "popper-options", "onBeforeShow", "onShow", "onHide"]);
   }
-  var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$Z], ["__file", "picker.vue"]]);
+  var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["render", _sfc_render$X], ["__file", "picker.vue"]]);
 
   const nodeList = /* @__PURE__ */ new Map();
   let startClick;
@@ -17775,7 +17779,7 @@
   });
   const _hoisted_1$V = ["onClick"];
   const _hoisted_2$D = ["onMouseenter"];
-  function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_arrow_up = vue.resolveComponent("arrow-up");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -17871,7 +17875,7 @@
       }), 128)) : vue.createCommentVNode("v-if", true)
     ], 2);
   }
-  var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$Y], ["__file", "basic-time-spinner.vue"]]);
+  var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["render", _sfc_render$W], ["__file", "basic-time-spinner.vue"]]);
 
   const _sfc_main$1T = vue.defineComponent({
     components: {
@@ -18037,7 +18041,7 @@
       };
     }
   });
-  function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_time_spinner = vue.resolveComponent("time-spinner");
     return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
       default: vue.withCtx(() => [
@@ -18082,7 +18086,7 @@
       _: 1
     }, 8, ["name"]);
   }
-  var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$X], ["__file", "panel-time-pick.vue"]]);
+  var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["render", _sfc_render$V], ["__file", "panel-time-pick.vue"]]);
 
   const makeSelectRange = (start, end) => {
     const result = [];
@@ -18320,7 +18324,7 @@
     }
   });
   const _hoisted_1$U = ["disabled"];
-  function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_time_spinner = vue.resolveComponent("time-spinner");
     return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
@@ -18407,7 +18411,7 @@
       ], 2)
     ], 2)) : vue.createCommentVNode("v-if", true);
   }
-  var TimeRangePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$W], ["__file", "panel-time-range.vue"]]);
+  var TimeRangePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["render", _sfc_render$U], ["__file", "panel-time-range.vue"]]);
 
   dayjs.extend(customParseFormat);
   var TimePicker = vue.defineComponent({
@@ -18501,11 +18505,11 @@
 
   const _hoisted_1$T = { key: 0 };
   const _hoisted_2$C = ["onClick"];
-  const __default__$T = {
+  const __default__$U = {
     name: "DateTable"
   };
   const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$T,
+    ...__default__$U,
     props: dateTableProps,
     emits: dateTableEmits,
     setup(__props, { expose, emit }) {
@@ -18659,11 +18663,11 @@
     input: (value) => value instanceof Date
   };
 
-  const __default__$S = {
+  const __default__$T = {
     name: "ElCalendar"
   };
   const _sfc_main$1Q = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$S,
+    ...__default__$T,
     props: calendarProps,
     emits: calendarEmits,
     setup(__props, { expose, emit }) {
@@ -18901,11 +18905,11 @@
     }
   });
 
-  const __default__$R = {
+  const __default__$S = {
     name: "ElCard"
   };
   const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$R,
+    ...__default__$S,
     props: cardProps,
     setup(__props) {
       const ns = useNamespace("card");
@@ -18986,11 +18990,11 @@
   const _hoisted_1$S = ["onMouseenter", "onMouseleave"];
   const _hoisted_2$B = ["onMouseenter", "onClick"];
   const _hoisted_3$m = { key: 0 };
-  const __default__$Q = {
+  const __default__$R = {
     name: "ElCarousel"
   };
   const _sfc_main$1O = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$Q,
+    ...__default__$R,
     props: carouselProps,
     emits: carouselEmits,
     setup(__props, { expose, emit }) {
@@ -19297,11 +19301,11 @@
     }
   });
 
-  const __default__$P = {
+  const __default__$Q = {
     name: "ElCarouselItem"
   };
   const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$P,
+    ...__default__$Q,
     props: carouselItemProps,
     setup(__props) {
       const props = __props;
@@ -19709,11 +19713,11 @@
   const _hoisted_1$R = ["tabindex", "role", "aria-checked"];
   const _hoisted_2$A = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_3$l = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
-  const __default__$O = {
+  const __default__$P = {
     name: "ElCheckbox"
   };
   const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$O,
+    ...__default__$P,
     props: checkboxProps,
     emits: checkboxEmits,
     setup(__props) {
@@ -19814,11 +19818,11 @@
 
   const _hoisted_1$Q = ["name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_2$z = ["name", "tabindex", "disabled", "value"];
-  const __default__$N = {
+  const __default__$O = {
     name: "ElCheckboxButton"
   };
   const _sfc_main$1L = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$N,
+    ...__default__$O,
     props: checkboxProps,
     emits: checkboxEmits,
     setup(__props) {
@@ -19892,11 +19896,11 @@
   });
   var CheckboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["__file", "checkbox-button.vue"]]);
 
-  const __default__$M = {
+  const __default__$N = {
     name: "ElCheckboxGroup"
   };
   const _sfc_main$1K = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$M,
+    ...__default__$N,
     props: useCheckboxGroupProps,
     emits: checkboxEmits,
     setup(__props, { emit }) {
@@ -20017,11 +20021,11 @@
   };
 
   const _hoisted_1$P = ["value", "name", "disabled"];
-  const __default__$L = {
+  const __default__$M = {
     name: "ElRadio"
   };
   const _sfc_main$1J = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$L,
+    ...__default__$M,
     props: radioProps,
     emits: radioEmits,
     setup(__props, { emit }) {
@@ -20093,11 +20097,11 @@
   });
 
   const _hoisted_1$O = ["value", "name", "disabled"];
-  const __default__$K = {
+  const __default__$L = {
     name: "ElRadioButton"
   };
   const _sfc_main$1I = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$K,
+    ...__default__$L,
     props: radioButtonProps,
     setup(__props) {
       const props = __props;
@@ -20183,11 +20187,11 @@
   const radioGroupEmits = radioEmits;
 
   const _hoisted_1$N = ["id", "aria-label", "aria-labelledby"];
-  const __default__$J = {
+  const __default__$K = {
     name: "ElRadioGroup"
   };
   const _sfc_main$1H = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$J,
+    ...__default__$K,
     props: radioGroupProps,
     emits: radioGroupEmits,
     setup(__props, { emit }) {
@@ -20384,7 +20388,7 @@
   });
   const _hoisted_1$M = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
   const _hoisted_2$y = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
-  function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     const _component_el_radio = vue.resolveComponent("el-radio");
     const _component_check = vue.resolveComponent("check");
@@ -20467,7 +20471,7 @@
       ], 2112)) : vue.createCommentVNode("v-if", true)
     ], 42, _hoisted_1$M);
   }
-  var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$V], ["__file", "node.vue"]]);
+  var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$T], ["__file", "node.vue"]]);
 
   const _sfc_main$1F = vue.defineComponent({
     name: "ElCascaderMenu",
@@ -20547,7 +20551,7 @@
       };
     }
   });
-  function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_cascader_node = vue.resolveComponent("el-cascader-node");
     const _component_loading = vue.resolveComponent("loading");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -20600,7 +20604,7 @@
       _: 1
     }, 8, ["class", "wrap-class", "view-class", "onMousemove", "onMouseleave"]);
   }
-  var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$U], ["__file", "menu.vue"]]);
+  var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$S], ["__file", "menu.vue"]]);
 
   var ExpandTrigger = /* @__PURE__ */ ((ExpandTrigger2) => {
     ExpandTrigger2["CLICK"] = "click";
@@ -21075,7 +21079,7 @@
       };
     }
   });
-  function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_cascader_menu = vue.resolveComponent("el-cascader-menu");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([_ctx.ns.b("panel"), _ctx.ns.is("bordered", _ctx.border)]),
@@ -21092,7 +21096,7 @@
       }), 128))
     ], 34);
   }
-  var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$T], ["__file", "index.vue"]]);
+  var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$R], ["__file", "index.vue"]]);
 
   CascaderPanel.install = (app) => {
     app.component(CascaderPanel.name, CascaderPanel);
@@ -21130,11 +21134,11 @@
     click: (evt) => evt instanceof MouseEvent
   };
 
-  const __default__$I = {
+  const __default__$J = {
     name: "ElTag"
   };
   const _sfc_main$1D = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$I,
+    ...__default__$J,
     props: tagProps,
     emits: tagEmits,
     setup(__props, { emit }) {
@@ -21662,8 +21666,8 @@
   const _hoisted_1$L = { key: 0 };
   const _hoisted_2$x = { class: "el-cascader__collapse-tags" };
   const _hoisted_3$k = ["placeholder"];
-  const _hoisted_4$f = ["onClick"];
-  function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_4$e = ["onClick"];
+  function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_circle_close = vue.resolveComponent("circle-close");
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_arrow_down = vue.resolveComponent("arrow-down");
@@ -21875,7 +21879,7 @@
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("v-if", true)
-              ], 10, _hoisted_4$f);
+              ], 10, _hoisted_4$e);
             }), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
               vue.createElementVNode("li", {
                 class: vue.normalizeClass(_ctx.nsCascader.e("empty-text"))
@@ -21890,7 +21894,7 @@
       _: 3
     }, 8, ["visible", "teleported", "popper-class", "popper-options", "transition", "onHide"]);
   }
-  var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$S], ["__file", "index.vue"]]);
+  var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$Q], ["__file", "index.vue"]]);
 
   Cascader.install = (app) => {
     app.component(Cascader.name, Cascader);
@@ -21909,11 +21913,11 @@
     change: (value) => isBoolean(value)
   };
 
-  const __default__$H = {
+  const __default__$I = {
     name: "ElCheckTag"
   };
   const _sfc_main$1B = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$H,
+    ...__default__$I,
     props: checkTagProps,
     emits: checkTagEmits,
     setup(__props, { emit }) {
@@ -22051,11 +22055,11 @@
     [CHANGE_EVENT]: emitChangeFn
   };
 
-  const __default__$G = {
+  const __default__$H = {
     name: "ElCollapse"
   };
   const _sfc_main$1A = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$G,
+    ...__default__$H,
     props: collapseProps,
     emits: collapseEmits,
     setup(__props, { expose, emit }) {
@@ -22165,7 +22169,7 @@
       };
     }
   });
-  function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({
       name: _ctx.ns.b()
     }, vue.toHandlers(_ctx.on)), {
@@ -22175,7 +22179,7 @@
       _: 3
     }, 16, ["name"]);
   }
-  var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$R], ["__file", "collapse-transition.vue"]]);
+  var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$P], ["__file", "collapse-transition.vue"]]);
 
   CollapseTransition.install = (app) => {
     app.component(CollapseTransition.name, CollapseTransition);
@@ -22198,11 +22202,11 @@
   const _hoisted_1$K = ["aria-expanded", "aria-controls", "aria-describedby"];
   const _hoisted_2$w = ["id", "tabindex", "onKeypress"];
   const _hoisted_3$j = ["id", "aria-hidden", "aria-labelledby"];
-  const __default__$F = {
+  const __default__$G = {
     name: "ElCollapseItem"
   };
   const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$F,
+    ...__default__$G,
     props: collapseItemProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -22444,7 +22448,7 @@
       };
     }
   });
-  function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass(["el-color-alpha-slider", { "is-vertical": _ctx.vertical }])
     }, [
@@ -22466,7 +22470,7 @@
       }, null, 4)
     ], 2);
   }
-  var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$Q], ["__file", "alpha-slider.vue"]]);
+  var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$O], ["__file", "alpha-slider.vue"]]);
 
   const _sfc_main$1w = vue.defineComponent({
     name: "ElColorHueSlider",
@@ -22559,7 +22563,7 @@
       };
     }
   });
-  function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass(["el-color-hue-slider", { "is-vertical": _ctx.vertical }])
     }, [
@@ -22578,7 +22582,7 @@
       }, null, 4)
     ], 2);
   }
-  var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$P], ["__file", "hue-slider.vue"]]);
+  var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$N], ["__file", "hue-slider.vue"]]);
 
   const OPTIONS_KEY = Symbol();
   const useOptions = () => {
@@ -22899,7 +22903,7 @@
   const _hoisted_1$J = { class: "el-color-predefine" };
   const _hoisted_2$v = { class: "el-color-predefine__colors" };
   const _hoisted_3$i = ["onClick"];
-  function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
       vue.createElementVNode("div", _hoisted_2$v, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rgbaColors, (item, index) => {
@@ -22916,7 +22920,7 @@
       ])
     ]);
   }
-  var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$O], ["__file", "predefine.vue"]]);
+  var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$M], ["__file", "predefine.vue"]]);
 
   const _sfc_main$1u = vue.defineComponent({
     name: "ElSlPanel",
@@ -22989,10 +22993,10 @@
   const _hoisted_1$I = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__white" }, null, -1);
   const _hoisted_2$u = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__black" }, null, -1);
   const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
-  const _hoisted_4$e = [
+  const _hoisted_4$d = [
     _hoisted_3$h
   ];
-  function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "el-color-svpanel",
       style: vue.normalizeStyle({
@@ -23007,10 +23011,10 @@
           top: _ctx.cursorTop + "px",
           left: _ctx.cursorLeft + "px"
         })
-      }, _hoisted_4$e, 4)
+      }, _hoisted_4$d, 4)
     ], 4);
   }
-  var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$N], ["__file", "sv-panel.vue"]]);
+  var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$L], ["__file", "sv-panel.vue"]]);
 
   const _sfc_main$1t = vue.defineComponent({
     name: "ElColorPicker",
@@ -23211,7 +23215,7 @@
     }
   });
   const _hoisted_1$H = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex"];
-  function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_hue_slider = vue.resolveComponent("hue-slider");
     const _component_sv_panel = vue.resolveComponent("sv-panel");
     const _component_alpha_slider = vue.resolveComponent("alpha-slider");
@@ -23366,7 +23370,7 @@
       _: 1
     }, 8, ["visible", "popper-class"]);
   }
-  var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$M], ["__file", "index.vue"]]);
+  var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$K], ["__file", "index.vue"]]);
 
   ColorPicker.install = (app) => {
     app.component(ColorPicker.name, ColorPicker);
@@ -23423,11 +23427,11 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const __default__$E = {
+  const __default__$F = {
     name: "ElContainer"
   };
   const _sfc_main$1s = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$E,
+    ...__default__$F,
     props: {
       direction: {
         type: String
@@ -23464,11 +23468,11 @@
   });
   var Container = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__file", "container.vue"]]);
 
-  const __default__$D = {
+  const __default__$E = {
     name: "ElAside"
   };
   const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$D,
+    ...__default__$E,
     props: {
       width: {
         type: String,
@@ -23491,11 +23495,11 @@
   });
   var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__file", "aside.vue"]]);
 
-  const __default__$C = {
+  const __default__$D = {
     name: "ElFooter"
   };
   const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$C,
+    ...__default__$D,
     props: {
       height: {
         type: String,
@@ -23518,11 +23522,11 @@
   });
   var Footer$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__file", "footer.vue"]]);
 
-  const __default__$B = {
+  const __default__$C = {
     name: "ElHeader"
   };
   const _sfc_main$1p = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$B,
+    ...__default__$C,
     props: {
       height: {
         type: String,
@@ -23549,11 +23553,11 @@
   });
   var Header = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__file", "header.vue"]]);
 
-  const __default__$A = {
+  const __default__$B = {
     name: "ElMain"
   };
   const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$A,
+    ...__default__$B,
     setup(__props) {
       const ns = useNamespace("main");
       return (_ctx, _cache) => {
@@ -23723,7 +23727,14 @@
   })(isSameOrBefore$1);
   var isSameOrBefore = isSameOrBefore$1.exports;
 
-  const selectionModes = ["date", "dates", "year", "month", "week"];
+  const datePickerProps = buildProps({
+    type: {
+      type: definePropType(String),
+      default: "date"
+    }
+  });
+
+  const selectionModes = ["date", "dates", "year", "month", "week", "range"];
   const datePickerSharedProps = buildProps({
     disabledDate: {
       type: definePropType(Function)
@@ -23739,8 +23750,7 @@
       type: definePropType(Object)
     },
     parsedValue: {
-      type: definePropType([Object, Array]),
-      required: true
+      type: definePropType([Object, Array])
     },
     rangeState: {
       type: definePropType(Object),
@@ -23794,35 +23804,37 @@
     selectionMode: selectionModeWithDefault("date")
   });
 
-  const ROOT_PICKER_INJECTION_KEY = Symbol();
+  const basicCellProps = buildProps({
+    cell: {
+      type: definePropType(Object)
+    }
+  });
 
   var ElDatePickerCell = vue.defineComponent({
     name: "ElDatePickerCell",
-    props: buildProps({
-      cell: {
-        type: definePropType(Object)
-      }
-    }),
+    props: basicCellProps,
     setup(props) {
       const ns = useNamespace("date-table-cell");
-      const picker = vue.inject(ROOT_PICKER_INJECTION_KEY);
+      const {
+        slots
+      } = vue.inject(ROOT_PICKER_INJECTION_KEY);
       return () => {
-        const cell = props.cell;
-        if (picker == null ? void 0 : picker.ctx.slots.default) {
-          const list = picker.ctx.slots.default(cell).filter((item) => {
+        const {
+          cell
+        } = props;
+        if (slots.default) {
+          const list = slots.default(cell).filter((item) => {
             return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)";
           });
           if (list.length) {
             return list;
           }
         }
-        return vue.h("div", {
-          class: ns.b()
-        }, [
-          vue.h("span", {
-            class: ns.e("text")
-          }, [cell == null ? void 0 : cell.text])
-        ]);
+        return vue.createVNode("div", {
+          "class": ns.b()
+        }, [vue.createVNode("span", {
+          "class": ns.e("text")
+        }, [cell == null ? void 0 : cell.text])]);
       };
     }
   });
@@ -23835,6 +23847,7 @@
     emits: ["changerange", "pick", "select"],
     expose: ["focus"],
     setup(props, ctx) {
+      const ns = useNamespace("date-table");
       const { t, lang } = useLocale();
       const tbodyRef = vue.ref();
       const currentCellRef = vue.ref();
@@ -24093,6 +24106,7 @@
         return false;
       };
       return {
+        ns,
         tbodyRef,
         currentCellRef,
         handleMouseMove,
@@ -24115,16 +24129,16 @@
     key: 0,
     scope: "col"
   };
-  const _hoisted_4$d = ["aria-label"];
-  const _hoisted_5$9 = ["aria-current", "aria-selected", "tabindex"];
-  function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_4$c = ["aria-label"];
+  const _hoisted_5$8 = ["aria-current", "aria-selected", "tabindex"];
+  function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_date_picker_cell = vue.resolveComponent("el-date-picker-cell");
     return vue.openBlock(), vue.createElementBlock("table", {
       role: "grid",
       "aria-label": _ctx.t("el.datepicker.dateTablePrompt"),
       cellspacing: "0",
       cellpadding: "0",
-      class: vue.normalizeClass(["el-date-table", { "is-week-mode": _ctx.selectionMode === "week" }]),
+      class: vue.normalizeClass([_ctx.ns.b(), { "is-week-mode": _ctx.selectionMode === "week" }]),
       onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handlePickDate && _ctx.handlePickDate(...args)),
       onMousemove: _cache[2] || (_cache[2] = (...args) => _ctx.handleMouseMove && _ctx.handleMouseMove(...args))
     }, [
@@ -24136,13 +24150,13 @@
               key,
               scope: "col",
               "aria-label": _ctx.t("el.datepicker.weeksFull." + week)
-            }, vue.toDisplayString(_ctx.t("el.datepicker.weeks." + week)), 9, _hoisted_4$d);
+            }, vue.toDisplayString(_ctx.t("el.datepicker.weeks." + week)), 9, _hoisted_4$c);
           }), 128))
         ]),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
           return vue.openBlock(), vue.createElementBlock("tr", {
             key,
-            class: vue.normalizeClass(["el-date-table__row", { current: _ctx.isWeekActive(row[1]) }])
+            class: vue.normalizeClass([_ctx.ns.e("row"), { current: _ctx.isWeekActive(row[1]) }])
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
               return vue.openBlock(), vue.createElementBlock("td", {
@@ -24156,14 +24170,14 @@
                 onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
               }, [
                 vue.createVNode(_component_el_date_picker_cell, { cell }, null, 8, ["cell"])
-              ], 42, _hoisted_5$9);
+              ], 42, _hoisted_5$8);
             }), 128))
           ], 2);
         }), 128))
       ], 512)
     ], 42, _hoisted_1$G);
   }
-  var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$L], ["__file", "basic-date-table.vue"]]);
+  var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$J], ["__file", "basic-date-table.vue"]]);
 
   const basicMonthTableProps = buildProps({
     ...datePickerSharedProps,
@@ -24180,6 +24194,7 @@
     emits: ["changerange", "pick", "select"],
     expose: ["focus"],
     setup(props, ctx) {
+      const ns = useNamespace("month-table");
       const { t, lang } = useLocale();
       const tbodyRef = vue.ref();
       const currentCellRef = vue.ref();
@@ -24317,6 +24332,7 @@
         }
       };
       return {
+        ns,
         tbodyRef,
         currentCellRef,
         handleMouseMove,
@@ -24333,12 +24349,12 @@
   const _hoisted_1$F = ["aria-label"];
   const _hoisted_2$s = { ref: "tbodyRef" };
   const _hoisted_3$f = ["aria-selected", "aria-label", "tabindex"];
-  const _hoisted_4$c = { class: "cell" };
-  function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_4$b = { class: "cell" };
+  function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("table", {
       role: "grid",
       "aria-label": _ctx.t("el.datepicker.monthTablePrompt"),
-      class: "el-month-table",
+      class: vue.normalizeClass(_ctx.ns.b()),
       onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleMonthTableClick && _ctx.handleMonthTableClick(...args)),
       onMousemove: _cache[3] || (_cache[3] = (...args) => _ctx.handleMouseMove && _ctx.handleMouseMove(...args))
     }, [
@@ -24360,16 +24376,16 @@
                 ]
               }, [
                 vue.createElementVNode("div", null, [
-                  vue.createElementVNode("span", _hoisted_4$c, vue.toDisplayString(_ctx.t("el.datepicker.months." + _ctx.months[cell.text])), 1)
+                  vue.createElementVNode("span", _hoisted_4$b, vue.toDisplayString(_ctx.t("el.datepicker.months." + _ctx.months[cell.text])), 1)
                 ])
               ], 42, _hoisted_3$f);
             }), 128))
           ]);
         }), 128))
       ], 512)
-    ], 40, _hoisted_1$F);
+    ], 42, _hoisted_1$F);
   }
-  var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$K], ["__file", "basic-month-table.vue"]]);
+  var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$I], ["__file", "basic-month-table.vue"]]);
 
   const { date, disabledDate, parsedValue } = datePickerSharedProps;
   const basicYearTableProps = buildProps({
@@ -24389,6 +24405,7 @@
     emits: ["pick"],
     expose: ["focus"],
     setup(props, ctx) {
+      const ns = useNamespace("year-table");
       const { t, lang } = useLocale();
       const tbodyRef = vue.ref();
       const currentCellRef = vue.ref();
@@ -24428,6 +24445,7 @@
         }
       };
       return {
+        ns,
         t,
         tbodyRef,
         currentCellRef,
@@ -24442,13 +24460,13 @@
   const _hoisted_1$E = ["aria-label"];
   const _hoisted_2$r = { ref: "tbodyRef" };
   const _hoisted_3$e = ["aria-selected", "tabindex"];
-  const _hoisted_4$b = { class: "cell" };
-  const _hoisted_5$8 = { key: 1 };
-  function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_4$a = { class: "cell" };
+  const _hoisted_5$7 = { key: 1 };
+  function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("table", {
       role: "grid",
       "aria-label": _ctx.t("el.datepicker.yearTablePrompt"),
-      class: "el-year-table",
+      class: vue.normalizeClass(_ctx.ns.b()),
       onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))
     }, [
       vue.createElementVNode("tbody", _hoisted_2$r, [
@@ -24470,16 +24488,16 @@
                     _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["enter"]))
                   ]
                 }, [
-                  vue.createElementVNode("span", _hoisted_4$b, vue.toDisplayString(_ctx.startYear + i * 4 + j), 1)
-                ], 42, _hoisted_3$e)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$8))
+                  vue.createElementVNode("span", _hoisted_4$a, vue.toDisplayString(_ctx.startYear + i * 4 + j), 1)
+                ], 42, _hoisted_3$e)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$7))
               ], 64);
             }), 64))
           ]);
         }), 64))
       ], 512)
-    ], 8, _hoisted_1$E);
+    ], 10, _hoisted_1$E);
   }
-  var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$J], ["__file", "basic-year-table.vue"]]);
+  var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$H], ["__file", "basic-year-table.vue"]]);
 
   const timeWithinRange = (_, __, ___) => true;
   const _sfc_main$1k = vue.defineComponent({
@@ -24500,6 +24518,8 @@
     props: panelDatePickProps,
     emits: ["pick", "set-picker-option", "panel-change"],
     setup(props, ctx) {
+      const ppNs = useNamespace("picker-panel");
+      const dpNs = useNamespace("date-picker");
       const { t, lang } = useLocale();
       const pickerBase = vue.inject("EP_PICKER_BASE");
       const popper = vue.inject(TOOLTIP_INJECTION_KEY);
@@ -24874,6 +24894,8 @@
         }
       }, { immediate: true });
       return {
+        ppNs,
+        dpNs,
         currentViewRef,
         handleTimePick,
         handleTimePickClose,
@@ -24915,27 +24937,12 @@
       };
     }
   });
-  const _hoisted_1$D = { class: "el-picker-panel__body-wrapper" };
-  const _hoisted_2$q = {
-    key: 0,
-    class: "el-picker-panel__sidebar"
-  };
-  const _hoisted_3$d = ["onClick"];
-  const _hoisted_4$a = { class: "el-picker-panel__body" };
-  const _hoisted_5$7 = {
-    key: 0,
-    class: "el-date-picker__time-header"
-  };
-  const _hoisted_6$3 = { class: "el-date-picker__editor-wrap" };
-  const _hoisted_7$3 = { class: "el-date-picker__editor-wrap" };
-  const _hoisted_8$3 = { class: "el-date-picker__prev-btn" };
-  const _hoisted_9$3 = ["aria-label"];
-  const _hoisted_10$3 = ["aria-label"];
-  const _hoisted_11$2 = { class: "el-date-picker__next-btn" };
-  const _hoisted_12$2 = ["aria-label"];
-  const _hoisted_13$2 = ["aria-label"];
-  const _hoisted_14$2 = { class: "el-picker-panel__footer" };
-  function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$D = ["onClick"];
+  const _hoisted_2$q = ["aria-label"];
+  const _hoisted_3$d = ["aria-label"];
+  const _hoisted_4$9 = ["aria-label"];
+  const _hoisted_5$6 = ["aria-label"];
+  function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
     const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
@@ -24949,28 +24956,44 @@
     const _component_el_button = vue.resolveComponent("el-button");
     const _directive_clickoutside = vue.resolveDirective("clickoutside");
     return vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["el-picker-panel el-date-picker", [
+      class: vue.normalizeClass([
+        _ctx.ppNs.b(),
+        _ctx.dpNs.b(),
         {
           "has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
           "has-time": _ctx.showTime
         }
-      ]])
+      ])
     }, [
-      vue.createElementVNode("div", _hoisted_1$D, [
-        vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-        _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$q, [
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(_ctx.ppNs.e("body-wrapper"))
+      }, [
+        vue.renderSlot(_ctx.$slots, "sidebar", {
+          class: vue.normalizeClass(_ctx.ppNs.e("sidebar"))
+        }),
+        _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(_ctx.ppNs.e("sidebar"))
+        }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
             return vue.openBlock(), vue.createElementBlock("button", {
               key,
               type: "button",
-              class: "el-picker-panel__shortcut",
+              class: vue.normalizeClass(_ctx.ppNs.e("shortcut")),
               onClick: ($event) => _ctx.handleShortcutClick(shortcut)
-            }, vue.toDisplayString(shortcut.text), 9, _hoisted_3$d);
+            }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$D);
           }), 128))
-        ])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_4$a, [
-          _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
-            vue.createElementVNode("span", _hoisted_6$3, [
+        ], 2)) : vue.createCommentVNode("v-if", true),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ppNs.e("body"))
+        }, [
+          _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(_ctx.dpNs.e("time-header"))
+          }, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(_ctx.dpNs.e("editor-wrap"))
+            }, [
               vue.createVNode(_component_el_input, {
                 placeholder: _ctx.t("el.datepicker.selectDate"),
                 "model-value": _ctx.visibleDate,
@@ -24978,8 +25001,10 @@
                 onInput: _cache[0] || (_cache[0] = (val) => _ctx.userInputDate = val),
                 onChange: _ctx.handleVisibleDateChange
               }, null, 8, ["placeholder", "model-value", "onChange"])
-            ]),
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_7$3, [
+            ], 2),
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+              class: vue.normalizeClass(_ctx.dpNs.e("editor-wrap"))
+            }, [
               vue.createVNode(_component_el_input, {
                 placeholder: _ctx.t("el.datepicker.selectTime"),
                 "model-value": _ctx.visibleTime,
@@ -24995,20 +25020,23 @@
                 "parsed-value": _ctx.innerDate,
                 onPick: _ctx.handleTimePick
               }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
-            ])), [
+            ], 2)), [
               [_directive_clickoutside, _ctx.handleTimePickClose]
             ])
-          ])) : vue.createCommentVNode("v-if", true),
+          ], 2)) : vue.createCommentVNode("v-if", true),
           vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass(["el-date-picker__header", {
-              "el-date-picker__header--bordered": _ctx.currentView === "year" || _ctx.currentView === "month"
-            }])
+            class: vue.normalizeClass([
+              _ctx.dpNs.e("header"),
+              (_ctx.currentView === "year" || _ctx.currentView === "month") && _ctx.dpNs.e("header--bordered")
+            ])
           }, [
-            vue.createElementVNode("span", _hoisted_8$3, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(_ctx.dpNs.e("prev-btn"))
+            }, [
               vue.createElementVNode("button", {
                 type: "button",
                 "aria-label": _ctx.t(`el.datepicker.prevYear`),
-                class: "el-picker-panel__icon-btn d-arrow-left",
+                class: vue.normalizeClass(["d-arrow-left", _ctx.ppNs.e("icon-btn")]),
                 onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prevYear_ && _ctx.prevYear_(...args))
               }, [
                 vue.createVNode(_component_el_icon, null, {
@@ -25017,11 +25045,11 @@
                   ]),
                   _: 1
                 })
-              ], 8, _hoisted_9$3),
+              ], 10, _hoisted_2$q),
               vue.withDirectives(vue.createElementVNode("button", {
                 type: "button",
                 "aria-label": _ctx.t(`el.datepicker.prevMonth`),
-                class: "el-picker-panel__icon-btn arrow-left",
+                class: vue.normalizeClass([_ctx.ppNs.e("icon-btn"), "arrow-left"]),
                 onClick: _cache[3] || (_cache[3] = (...args) => _ctx.prevMonth_ && _ctx.prevMonth_(...args))
               }, [
                 vue.createVNode(_component_el_icon, null, {
@@ -25030,33 +25058,38 @@
                   ]),
                   _: 1
                 })
-              ], 8, _hoisted_10$3), [
+              ], 10, _hoisted_3$d), [
                 [vue.vShow, _ctx.currentView === "date"]
               ])
-            ]),
+            ], 2),
             vue.createElementVNode("span", {
               role: "button",
-              class: "el-date-picker__header-label",
+              class: vue.normalizeClass(_ctx.dpNs.e("header-label")),
               "aria-live": "polite",
               tabindex: "0",
               onKeydown: _cache[4] || (_cache[4] = vue.withKeys((...args) => _ctx.showYearPicker && _ctx.showYearPicker(...args), ["enter"])),
               onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showYearPicker && _ctx.showYearPicker(...args))
-            }, vue.toDisplayString(_ctx.yearLabel), 33),
+            }, vue.toDisplayString(_ctx.yearLabel), 35),
             vue.withDirectives(vue.createElementVNode("span", {
               role: "button",
-              class: vue.normalizeClass(["el-date-picker__header-label", { active: _ctx.currentView === "month" }]),
               "aria-live": "polite",
               tabindex: "0",
+              class: vue.normalizeClass([
+                _ctx.dpNs.e("header-label"),
+                { active: _ctx.currentView === "month" }
+              ]),
               onKeydown: _cache[6] || (_cache[6] = vue.withKeys((...args) => _ctx.showMonthPicker && _ctx.showMonthPicker(...args), ["enter"])),
               onClick: _cache[7] || (_cache[7] = (...args) => _ctx.showMonthPicker && _ctx.showMonthPicker(...args))
             }, vue.toDisplayString(_ctx.t(`el.datepicker.month${_ctx.month + 1}`)), 35), [
               [vue.vShow, _ctx.currentView === "date"]
             ]),
-            vue.createElementVNode("span", _hoisted_11$2, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(_ctx.dpNs.e("next-btn"))
+            }, [
               vue.withDirectives(vue.createElementVNode("button", {
                 type: "button",
                 "aria-label": _ctx.t(`el.datepicker.nextMonth`),
-                class: "el-picker-panel__icon-btn arrow-right",
+                class: vue.normalizeClass([_ctx.ppNs.e("icon-btn"), "arrow-right"]),
                 onClick: _cache[8] || (_cache[8] = (...args) => _ctx.nextMonth_ && _ctx.nextMonth_(...args))
               }, [
                 vue.createVNode(_component_el_icon, null, {
@@ -25065,13 +25098,13 @@
                   ]),
                   _: 1
                 })
-              ], 8, _hoisted_12$2), [
+              ], 10, _hoisted_4$9), [
                 [vue.vShow, _ctx.currentView === "date"]
               ]),
               vue.createElementVNode("button", {
                 type: "button",
                 "aria-label": _ctx.t(`el.datepicker.nextYear`),
-                class: "el-picker-panel__icon-btn d-arrow-right",
+                class: vue.normalizeClass([_ctx.ppNs.e("icon-btn"), "d-arrow-right"]),
                 onClick: _cache[9] || (_cache[9] = (...args) => _ctx.nextYear_ && _ctx.nextYear_(...args))
               }, [
                 vue.createVNode(_component_el_icon, null, {
@@ -25080,13 +25113,13 @@
                   ]),
                   _: 1
                 })
-              ], 8, _hoisted_13$2)
-            ])
+              ], 10, _hoisted_5$6)
+            ], 2)
           ], 2), [
             [vue.vShow, _ctx.currentView !== "time"]
           ]),
           vue.createElementVNode("div", {
-            class: "el-picker-panel__content",
+            class: vue.normalizeClass(_ctx.ppNs.e("content")),
             onKeydown: _cache[10] || (_cache[10] = (...args) => _ctx.handleKeydownTable && _ctx.handleKeydownTable(...args))
           }, [
             _ctx.currentView === "date" ? (vue.openBlock(), vue.createBlock(_component_date_table, {
@@ -25115,67 +25148,139 @@
               "disabled-date": _ctx.disabledDate,
               onPick: _ctx.handleMonthPick
             }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
-          ], 32)
-        ])
-      ]),
-      vue.withDirectives(vue.createElementVNode("div", _hoisted_14$2, [
+          ], 34)
+        ], 2)
+      ], 2),
+      vue.withDirectives(vue.createElementVNode("div", {
+        class: vue.normalizeClass(_ctx.ppNs.e("footer"))
+      }, [
         vue.withDirectives(vue.createVNode(_component_el_button, {
           text: "",
           size: "small",
-          class: "el-picker-panel__link-btn",
+          class: vue.normalizeClass(_ctx.ppNs.e("link-btn")),
           onClick: _ctx.changeToNow
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.now")), 1)
           ]),
           _: 1
-        }, 8, ["onClick"]), [
+        }, 8, ["class", "onClick"]), [
           [vue.vShow, _ctx.selectionMode !== "dates"]
         ]),
         vue.createVNode(_component_el_button, {
           plain: "",
           size: "small",
-          class: "el-picker-panel__link-btn",
+          class: vue.normalizeClass(_ctx.ppNs.e("link-btn")),
           onClick: _ctx.onConfirm
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.confirm")), 1)
           ]),
           _: 1
-        }, 8, ["onClick"])
-      ], 512), [
+        }, 8, ["class", "onClick"])
+      ], 2), [
         [vue.vShow, _ctx.footerVisible && _ctx.currentView === "date"]
       ])
     ], 2);
   }
-  var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$I], ["__file", "panel-date-pick.vue"]]);
+  var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$G], ["__file", "panel-date-pick.vue"]]);
 
   const panelDateRangeProps = buildProps({
     ...panelSharedProps,
     ...panelRangeSharedProps
   });
 
-  const _sfc_main$1j = vue.defineComponent({
-    directives: { clickoutside: ClickOutside },
-    components: {
-      TimePickPanel,
-      DateTable,
-      ElInput,
-      ElButton,
-      ElIcon,
-      DArrowLeft: dArrowLeft,
-      ArrowLeft: arrowLeft,
-      DArrowRight: dArrowRight,
-      ArrowRight: arrowRight
-    },
+  const useRangePicker = () => {
+    const { emit } = vue.getCurrentInstance();
+    const attrs = vue.useAttrs();
+    const slots = vue.useSlots();
+    const { pickerNs } = vue.inject(ROOT_PICKER_INJECTION_KEY);
+    const drpNs = useNamespace("date-range-picker");
+    const { t, lang } = useLocale();
+    const minDate = vue.ref();
+    const maxDate = vue.ref();
+    const rangeState = vue.ref({
+      endDate: null,
+      selecting: false
+    });
+    const handleChangeRange = (val) => {
+      rangeState.value = val;
+    };
+    const handleRangeConfirm = (visible = false) => {
+      const _minDate = vue.unref(minDate);
+      const _maxDate = vue.unref(maxDate);
+      if (isValidRange([_minDate, _maxDate])) {
+        emit("pick", [_minDate, _maxDate], visible);
+      }
+    };
+    const onSelect = (selecting) => {
+      rangeState.value.selecting = selecting;
+      if (!selecting) {
+        rangeState.value.endDate = null;
+      }
+    };
+    const handleShortcutClick = (shortcut) => {
+      const shortcutValues = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
+      if (shortcutValues) {
+        emit("pick", [
+          dayjs(shortcutValues[0]).locale(lang.value),
+          dayjs(shortcutValues[1]).locale(lang.value)
+        ]);
+        return;
+      }
+      if (shortcut.onClick) {
+        shortcut.onClick({
+          attrs,
+          slots,
+          emit
+        });
+      }
+    };
+    return {
+      minDate,
+      maxDate,
+      rangeState,
+      lang,
+      ppNs: pickerNs,
+      drpNs,
+      handleChangeRange,
+      handleRangeConfirm,
+      handleShortcutClick,
+      onSelect,
+      t
+    };
+  };
+
+  const _hoisted_1$C = ["onClick"];
+  const _hoisted_2$p = ["disabled"];
+  const _hoisted_3$c = ["disabled"];
+  const _hoisted_4$8 = ["disabled"];
+  const _hoisted_5$5 = ["disabled"];
+  const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     props: panelDateRangeProps,
-    emits: ["pick", "set-picker-option", "calendar-change", "panel-change"],
-    setup(props, ctx) {
-      const { t, lang } = useLocale();
+    emits: [
+      "pick",
+      "set-picker-option",
+      "calendar-change",
+      "panel-change"
+    ],
+    setup(__props, { emit }) {
+      const props = __props;
+      const {
+        minDate,
+        maxDate,
+        rangeState,
+        ppNs,
+        drpNs,
+        lang,
+        handleChangeRange,
+        handleRangeConfirm,
+        handleShortcutClick,
+        onSelect,
+        t
+      } = useRangePicker();
       const leftDate = vue.ref(dayjs().locale(lang.value));
       const rightDate = vue.ref(dayjs().locale(lang.value).add(1, "month"));
-      const minDate = vue.ref(null);
-      const maxDate = vue.ref(null);
       const dateUserInput = vue.ref({
         min: null,
         max: null
@@ -25286,7 +25391,7 @@
         handlePanelChange("month");
       };
       const handlePanelChange = (mode) => {
-        ctx.emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+        emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
       };
       const enableMonthArrow = vue.computed(() => {
         const nextMonth = (leftMonth.value + 1) % 12;
@@ -25296,31 +25401,10 @@
       const enableYearArrow = vue.computed(() => {
         return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
       });
-      const isValidValue = (value) => {
-        return Array.isArray(value) && value[0] && value[1] && value[0].valueOf() <= value[1].valueOf();
-      };
-      const rangeState = vue.ref({
-        endDate: null,
-        selecting: false
-      });
       const btnDisabled = vue.computed(() => {
-        return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidValue([minDate.value, maxDate.value]));
+        return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]));
       });
-      const handleChangeRange = (val) => {
-        rangeState.value = val;
-      };
-      const onSelect = (selecting) => {
-        rangeState.value.selecting = selecting;
-        if (!selecting) {
-          rangeState.value.endDate = null;
-        }
-      };
       const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange");
-      const handleConfirm = (visible = false) => {
-        if (isValidValue([minDate.value, maxDate.value])) {
-          ctx.emit("pick", [minDate.value, maxDate.value], visible);
-        }
-      };
       const formatEmit = (emitDayjs, index) => {
         if (!emitDayjs)
           return;
@@ -25338,25 +25422,12 @@
         if (maxDate.value === maxDate_ && minDate.value === minDate_) {
           return;
         }
-        ctx.emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
+        emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
         maxDate.value = maxDate_;
         minDate.value = minDate_;
         if (!close || showTime.value)
           return;
-        handleConfirm();
-      };
-      const handleShortcutClick = (shortcut) => {
-        const shortcutValues = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-        if (shortcutValues) {
-          ctx.emit("pick", [
-            dayjs(shortcutValues[0]).locale(lang.value),
-            dayjs(shortcutValues[1]).locale(lang.value)
-          ]);
-          return;
-        }
-        if (shortcut.onClick) {
-          shortcut.onClick(ctx);
-        }
+        handleRangeConfirm();
       };
       const minTimePickerVisible = vue.ref(false);
       const maxTimePickerVisible = vue.ref(false);
@@ -25455,13 +25526,13 @@
       const handleClear = () => {
         leftDate.value = getDefaultValue()[0];
         rightDate.value = leftDate.value.add(1, "month");
-        ctx.emit("pick", null);
+        emit("pick", null);
       };
       const formatToString = (value) => {
-        return Array.isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
+        return isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
       };
       const parseUserInput = (value) => {
-        return Array.isArray(value) ? value.map((_) => dayjs(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value);
+        return isArray(value) ? value.map((_) => dayjs(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value);
       };
       const getDefaultValue = () => {
         let start;
@@ -25480,10 +25551,10 @@
         start = start.locale(lang.value);
         return [start, start.add(1, "month")];
       };
-      ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
-      ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
-      ctx.emit("set-picker-option", ["formatToString", formatToString]);
-      ctx.emit("set-picker-option", ["handleClear", handleClear]);
+      emit("set-picker-option", ["isValidRange", isValidRange]);
+      emit("set-picker-option", ["parseUserInput", parseUserInput]);
+      emit("set-picker-option", ["formatToString", formatToString]);
+      emit("set-picker-option", ["handleClear", handleClear]);
       const pickerBase = vue.inject("EP_PICKER_BASE");
       const {
         shortcuts,
@@ -25495,11 +25566,11 @@
         clearable
       } = pickerBase.props;
       const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
-      vue.watch(() => defaultValue.value, (val) => {
+      vue.watch(defaultValue, (val) => {
         if (val) {
           const defaultArr = getDefaultValue();
-          minDate.value = null;
-          maxDate.value = null;
+          minDate.value = void 0;
+          maxDate.value = void 0;
           leftDate.value = defaultArr[0];
           rightDate.value = defaultArr[1];
         }
@@ -25523,400 +25594,371 @@
           }
         } else {
           const defaultArr = getDefaultValue();
-          minDate.value = null;
-          maxDate.value = null;
+          minDate.value = void 0;
+          maxDate.value = void 0;
           leftDate.value = defaultArr[0];
           rightDate.value = defaultArr[1];
         }
       }, { immediate: true });
-      return {
-        shortcuts,
-        disabledDate,
-        cellClassName,
-        minTimePickerVisible,
-        maxTimePickerVisible,
-        handleMinTimeClose,
-        handleMaxTimeClose,
-        handleShortcutClick,
-        rangeState,
-        minDate,
-        maxDate,
-        handleRangePick,
-        onSelect,
-        handleChangeRange,
-        btnDisabled,
-        enableYearArrow,
-        enableMonthArrow,
-        rightPrevMonth,
-        rightPrevYear,
-        rightNextMonth,
-        rightNextYear,
-        leftPrevMonth,
-        leftPrevYear,
-        leftNextMonth,
-        leftNextYear,
-        hasShortcuts,
-        leftLabel,
-        rightLabel,
-        leftDate,
-        rightDate,
-        showTime,
-        t,
-        minVisibleDate,
-        maxVisibleDate,
-        minVisibleTime,
-        maxVisibleTime,
-        arrowControl,
-        handleDateInput,
-        handleDateChange,
-        handleTimeInput,
-        handleTimeChange,
-        handleMinTimePick,
-        handleMaxTimePick,
-        handleClear,
-        handleConfirm,
-        timeFormat,
-        clearable
-      };
-    }
-  });
-  const _hoisted_1$C = { class: "el-picker-panel__body-wrapper" };
-  const _hoisted_2$p = {
-    key: 0,
-    class: "el-picker-panel__sidebar"
-  };
-  const _hoisted_3$c = ["onClick"];
-  const _hoisted_4$9 = { class: "el-picker-panel__body" };
-  const _hoisted_5$6 = {
-    key: 0,
-    class: "el-date-range-picker__time-header"
-  };
-  const _hoisted_6$2 = { class: "el-date-range-picker__editors-wrap" };
-  const _hoisted_7$2 = { class: "el-date-range-picker__time-picker-wrap" };
-  const _hoisted_8$2 = { class: "el-date-range-picker__time-picker-wrap" };
-  const _hoisted_9$2 = { class: "el-date-range-picker__editors-wrap is-right" };
-  const _hoisted_10$2 = { class: "el-date-range-picker__time-picker-wrap" };
-  const _hoisted_11$1 = { class: "el-date-range-picker__time-picker-wrap" };
-  const _hoisted_12$1 = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
-  const _hoisted_13$1 = { class: "el-date-range-picker__header" };
-  const _hoisted_14$1 = ["disabled"];
-  const _hoisted_15$1 = ["disabled"];
-  const _hoisted_16$1 = { class: "el-picker-panel__content el-date-range-picker__content is-right" };
-  const _hoisted_17$1 = { class: "el-date-range-picker__header" };
-  const _hoisted_18$1 = ["disabled"];
-  const _hoisted_19$1 = ["disabled"];
-  const _hoisted_20$1 = {
-    key: 0,
-    class: "el-picker-panel__footer"
-  };
-  function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_el_input = vue.resolveComponent("el-input");
-    const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
-    const _component_arrow_right = vue.resolveComponent("arrow-right");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
-    const _component_arrow_left = vue.resolveComponent("arrow-left");
-    const _component_d_arrow_right = vue.resolveComponent("d-arrow-right");
-    const _component_date_table = vue.resolveComponent("date-table");
-    const _component_el_button = vue.resolveComponent("el-button");
-    const _directive_clickoutside = vue.resolveDirective("clickoutside");
-    return vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["el-picker-panel el-date-range-picker", [
-        {
-          "has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
-          "has-time": _ctx.showTime
-        }
-      ]])
-    }, [
-      vue.createElementVNode("div", _hoisted_1$C, [
-        vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-        _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
-            return vue.openBlock(), vue.createElementBlock("button", {
-              key,
-              type: "button",
-              class: "el-picker-panel__shortcut",
-              onClick: ($event) => _ctx.handleShortcutClick(shortcut)
-            }, vue.toDisplayString(shortcut.text), 9, _hoisted_3$c);
-          }), 128))
-        ])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_4$9, [
-          _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
-            vue.createElementVNode("span", _hoisted_6$2, [
-              vue.createElementVNode("span", _hoisted_7$2, [
-                vue.createVNode(_component_el_input, {
-                  size: "small",
-                  disabled: _ctx.rangeState.selecting,
-                  placeholder: _ctx.t("el.datepicker.startDate"),
-                  class: "el-date-range-picker__editor",
-                  "model-value": _ctx.minVisibleDate,
-                  onInput: _cache[0] || (_cache[0] = (val) => _ctx.handleDateInput(val, "min")),
-                  onChange: _cache[1] || (_cache[1] = (val) => _ctx.handleDateChange(val, "min"))
-                }, null, 8, ["disabled", "placeholder", "model-value"])
-              ]),
-              vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_8$2, [
-                vue.createVNode(_component_el_input, {
-                  size: "small",
-                  class: "el-date-range-picker__editor",
-                  disabled: _ctx.rangeState.selecting,
-                  placeholder: _ctx.t("el.datepicker.startTime"),
-                  "model-value": _ctx.minVisibleTime,
-                  onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.minTimePickerVisible = true),
-                  onInput: _cache[3] || (_cache[3] = (val) => _ctx.handleTimeInput(val, "min")),
-                  onChange: _cache[4] || (_cache[4] = (val) => _ctx.handleTimeChange(val, "min"))
-                }, null, 8, ["disabled", "placeholder", "model-value"]),
-                vue.createVNode(_component_time_pick_panel, {
-                  visible: _ctx.minTimePickerVisible,
-                  format: _ctx.timeFormat,
-                  "datetime-role": "start",
-                  "time-arrow-control": _ctx.arrowControl,
-                  "parsed-value": _ctx.leftDate,
-                  onPick: _ctx.handleMinTimePick
-                }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
-              ])), [
-                [_directive_clickoutside, _ctx.handleMinTimeClose]
-              ])
-            ]),
-            vue.createElementVNode("span", null, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_right)
-                ]),
-                _: 1
-              })
-            ]),
-            vue.createElementVNode("span", _hoisted_9$2, [
-              vue.createElementVNode("span", _hoisted_10$2, [
-                vue.createVNode(_component_el_input, {
-                  size: "small",
-                  class: "el-date-range-picker__editor",
-                  disabled: _ctx.rangeState.selecting,
-                  placeholder: _ctx.t("el.datepicker.endDate"),
-                  "model-value": _ctx.maxVisibleDate,
-                  readonly: !_ctx.minDate,
-                  onInput: _cache[5] || (_cache[5] = (val) => _ctx.handleDateInput(val, "max")),
-                  onChange: _cache[6] || (_cache[6] = (val) => _ctx.handleDateChange(val, "max"))
-                }, null, 8, ["disabled", "placeholder", "model-value", "readonly"])
-              ]),
-              vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, [
-                vue.createVNode(_component_el_input, {
-                  size: "small",
-                  class: "el-date-range-picker__editor",
-                  disabled: _ctx.rangeState.selecting,
-                  placeholder: _ctx.t("el.datepicker.endTime"),
-                  "model-value": _ctx.maxVisibleTime,
-                  readonly: !_ctx.minDate,
-                  onFocus: _cache[7] || (_cache[7] = ($event) => _ctx.minDate && (_ctx.maxTimePickerVisible = true)),
-                  onInput: _cache[8] || (_cache[8] = (val) => _ctx.handleTimeInput(val, "max")),
-                  onChange: _cache[9] || (_cache[9] = (val) => _ctx.handleTimeChange(val, "max"))
-                }, null, 8, ["disabled", "placeholder", "model-value", "readonly"]),
-                vue.createVNode(_component_time_pick_panel, {
-                  "datetime-role": "end",
-                  visible: _ctx.maxTimePickerVisible,
-                  format: _ctx.timeFormat,
-                  "time-arrow-control": _ctx.arrowControl,
-                  "parsed-value": _ctx.rightDate,
-                  onPick: _ctx.handleMaxTimePick
-                }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
-              ])), [
-                [_directive_clickoutside, _ctx.handleMaxTimeClose]
-              ])
-            ])
-          ])) : vue.createCommentVNode("v-if", true),
-          vue.createElementVNode("div", _hoisted_12$1, [
-            vue.createElementVNode("div", _hoisted_13$1, [
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn d-arrow-left",
-                onClick: _cache[10] || (_cache[10] = (...args) => _ctx.leftPrevYear && _ctx.leftPrevYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ]),
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn arrow-left",
-                onClick: _cache[11] || (_cache[11] = (...args) => _ctx.leftPrevMonth && _ctx.leftPrevMonth(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 0,
-                type: "button",
-                disabled: !_ctx.enableYearArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-right"]),
-                onClick: _cache[12] || (_cache[12] = (...args) => _ctx.leftNextYear && _ctx.leftNextYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_right)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_14$1)) : vue.createCommentVNode("v-if", true),
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 1,
-                type: "button",
-                disabled: !_ctx.enableMonthArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableMonthArrow }, "el-picker-panel__icon-btn arrow-right"]),
-                onClick: _cache[13] || (_cache[13] = (...args) => _ctx.leftNextMonth && _ctx.leftNextMonth(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_arrow_right)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_15$1)) : vue.createCommentVNode("v-if", true),
-              vue.createElementVNode("div", null, vue.toDisplayString(_ctx.leftLabel), 1)
-            ]),
-            vue.createVNode(_component_date_table, {
-              "selection-mode": "range",
-              date: _ctx.leftDate,
-              "min-date": _ctx.minDate,
-              "max-date": _ctx.maxDate,
-              "range-state": _ctx.rangeState,
-              "disabled-date": _ctx.disabledDate,
-              "cell-class-name": _ctx.cellClassName,
-              onChangerange: _ctx.handleChangeRange,
-              onPick: _ctx.handleRangePick,
-              onSelect: _ctx.onSelect
-            }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onPick", "onSelect"])
-          ]),
-          vue.createElementVNode("div", _hoisted_16$1, [
-            vue.createElementVNode("div", _hoisted_17$1, [
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass([
+            vue.unref(ppNs).b(),
+            vue.unref(drpNs).b(),
+            {
+              "has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts),
+              "has-time": vue.unref(showTime)
+            }
+          ])
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
+          }, [
+            vue.renderSlot(_ctx.$slots, "sidebar", {
+              class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+            }),
+            vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
+                return vue.openBlock(), vue.createElementBlock("button", {
+                  key,
+                  type: "button",
+                  class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
+                  onClick: ($event) => vue.unref(handleShortcutClick)(shortcut)
+                }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$C);
+              }), 128))
+            ], 2)) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ppNs).e("body"))
+            }, [
+              vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
-                type: "button",
-                disabled: !_ctx.enableYearArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-left"]),
-                onClick: _cache[14] || (_cache[14] = (...args) => _ctx.rightPrevYear && _ctx.rightPrevYear(...args))
+                class: vue.normalizeClass(vue.unref(drpNs).e("time-header"))
               }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_18$1)) : vue.createCommentVNode("v-if", true),
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 1,
-                type: "button",
-                disabled: !_ctx.enableMonthArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableMonthArrow }, "el-picker-panel__icon-btn arrow-left"]),
-                onClick: _cache[15] || (_cache[15] = (...args) => _ctx.rightPrevMonth && _ctx.rightPrevMonth(...args))
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("editors-wrap"))
+                }, [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                  }, [
+                    vue.createVNode(vue.unref(ElInput), {
+                      size: "small",
+                      disabled: vue.unref(rangeState).selecting,
+                      placeholder: vue.unref(t)("el.datepicker.startDate"),
+                      class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                      "model-value": vue.unref(minVisibleDate),
+                      onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
+                      onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
+                    }, null, 8, ["disabled", "placeholder", "class", "model-value"])
+                  ], 2),
+                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                    class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                  }, [
+                    vue.createVNode(vue.unref(ElInput), {
+                      size: "small",
+                      class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                      disabled: vue.unref(rangeState).selecting,
+                      placeholder: vue.unref(t)("el.datepicker.startTime"),
+                      "model-value": vue.unref(minVisibleTime),
+                      onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
+                      onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
+                      onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
+                    }, null, 8, ["class", "disabled", "placeholder", "model-value"]),
+                    vue.createVNode(vue.unref(TimePickPanel), {
+                      visible: minTimePickerVisible.value,
+                      format: vue.unref(timeFormat),
+                      "datetime-role": "start",
+                      "time-arrow-control": vue.unref(arrowControl),
+                      "parsed-value": leftDate.value,
+                      onPick: handleMinTimePick
+                    }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
+                  ], 2)), [
+                    [vue.unref(ClickOutside), handleMinTimeClose]
+                  ])
+                ], 2),
+                vue.createElementVNode("span", null, [
+                  vue.createVNode(vue.unref(ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(arrowRight))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([vue.unref(drpNs).e("editors-wrap"), "is-right"])
+                }, [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                  }, [
+                    vue.createVNode(vue.unref(ElInput), {
+                      size: "small",
+                      class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                      disabled: vue.unref(rangeState).selecting,
+                      placeholder: vue.unref(t)("el.datepicker.endDate"),
+                      "model-value": vue.unref(maxVisibleDate),
+                      readonly: !vue.unref(minDate),
+                      onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
+                      onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
+                    }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])
+                  ], 2),
+                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                    class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                  }, [
+                    vue.createVNode(vue.unref(ElInput), {
+                      size: "small",
+                      class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                      disabled: vue.unref(rangeState).selecting,
+                      placeholder: vue.unref(t)("el.datepicker.endTime"),
+                      "model-value": vue.unref(maxVisibleTime),
+                      readonly: !vue.unref(minDate),
+                      onFocus: _cache[7] || (_cache[7] = ($event) => vue.unref(minDate) && (maxTimePickerVisible.value = true)),
+                      onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
+                      onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
+                    }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
+                    vue.createVNode(vue.unref(TimePickPanel), {
+                      "datetime-role": "end",
+                      visible: maxTimePickerVisible.value,
+                      format: vue.unref(timeFormat),
+                      "time-arrow-control": vue.unref(arrowControl),
+                      "parsed-value": rightDate.value,
+                      onPick: handleMaxTimePick
+                    }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
+                  ], 2)), [
+                    [vue.unref(ClickOutside), handleMaxTimeClose]
+                  ])
+                ], 2)
+              ], 2)) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"])
               }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_19$1)) : vue.createCommentVNode("v-if", true),
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn d-arrow-right",
-                onClick: _cache[16] || (_cache[16] = (...args) => _ctx.rightNextYear && _ctx.rightNextYear(...args))
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+                }, [
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                    onClick: leftPrevYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
+                    onClick: leftPrevMonth
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(arrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    disabled: !vue.unref(enableYearArrow),
+                    class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-right"]),
+                    onClick: leftNextYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_2$p)) : vue.createCommentVNode("v-if", true),
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 1,
+                    type: "button",
+                    disabled: !vue.unref(enableMonthArrow),
+                    class: vue.normalizeClass([[
+                      vue.unref(ppNs).e("icon-btn"),
+                      { "is-disabled": !vue.unref(enableMonthArrow) }
+                    ], "arrow-right"]),
+                    onClick: leftNextMonth
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(arrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_3$c)) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
+                ], 2),
+                vue.createVNode(DateTable, {
+                  "selection-mode": "range",
+                  date: leftDate.value,
+                  "min-date": vue.unref(minDate),
+                  "max-date": vue.unref(maxDate),
+                  "range-state": vue.unref(rangeState),
+                  "disabled-date": vue.unref(disabledDate),
+                  "cell-class-name": vue.unref(cellClassName),
+                  onChangerange: vue.unref(handleChangeRange),
+                  onPick: handleRangePick,
+                  onSelect: vue.unref(onSelect)
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
               }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_right)
-                  ]),
-                  _: 1
-                })
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+                }, [
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    disabled: !vue.unref(enableYearArrow),
+                    class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
+                    onClick: rightPrevYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_4$8)) : vue.createCommentVNode("v-if", true),
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 1,
+                    type: "button",
+                    disabled: !vue.unref(enableMonthArrow),
+                    class: vue.normalizeClass([[
+                      vue.unref(ppNs).e("icon-btn"),
+                      { "is-disabled": !vue.unref(enableMonthArrow) }
+                    ], "arrow-left"]),
+                    onClick: rightPrevMonth
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(arrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_5$5)) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                    onClick: rightNextYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
+                    onClick: rightNextMonth
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(arrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
+                ], 2),
+                vue.createVNode(DateTable, {
+                  "selection-mode": "range",
+                  date: rightDate.value,
+                  "min-date": vue.unref(minDate),
+                  "max-date": vue.unref(maxDate),
+                  "range-state": vue.unref(rangeState),
+                  "disabled-date": vue.unref(disabledDate),
+                  "cell-class-name": vue.unref(cellClassName),
+                  onChangerange: vue.unref(handleChangeRange),
+                  onPick: handleRangePick,
+                  onSelect: vue.unref(onSelect)
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+              ], 2)
+            ], 2)
+          ], 2),
+          vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(vue.unref(ppNs).e("footer"))
+          }, [
+            vue.unref(clearable) ? (vue.openBlock(), vue.createBlock(vue.unref(ElButton), {
+              key: 0,
+              text: "",
+              size: "small",
+              class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
+              onClick: handleClear
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.clear")), 1)
               ]),
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn arrow-right",
-                onClick: _cache[17] || (_cache[17] = (...args) => _ctx.rightNextMonth && _ctx.rightNextMonth(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_arrow_right)
-                  ]),
-                  _: 1
-                })
+              _: 1
+            }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+            vue.createVNode(vue.unref(ElButton), {
+              plain: "",
+              size: "small",
+              class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
+              disabled: vue.unref(btnDisabled),
+              onClick: _cache[10] || (_cache[10] = ($event) => vue.unref(handleRangeConfirm)(false))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1)
               ]),
-              vue.createElementVNode("div", null, vue.toDisplayString(_ctx.rightLabel), 1)
-            ]),
-            vue.createVNode(_component_date_table, {
-              "selection-mode": "range",
-              date: _ctx.rightDate,
-              "min-date": _ctx.minDate,
-              "max-date": _ctx.maxDate,
-              "range-state": _ctx.rangeState,
-              "disabled-date": _ctx.disabledDate,
-              "cell-class-name": _ctx.cellClassName,
-              onChangerange: _ctx.handleChangeRange,
-              onPick: _ctx.handleRangePick,
-              onSelect: _ctx.onSelect
-            }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onPick", "onSelect"])
-          ])
-        ])
-      ]),
-      _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, [
-        _ctx.clearable ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-          key: 0,
-          text: "",
-          size: "small",
-          class: "el-picker-panel__link-btn",
-          onClick: _ctx.handleClear
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.clear")), 1)
-          ]),
-          _: 1
-        }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
-        vue.createVNode(_component_el_button, {
-          plain: "",
-          size: "small",
-          class: "el-picker-panel__link-btn",
-          disabled: _ctx.btnDisabled,
-          onClick: _cache[18] || (_cache[18] = ($event) => _ctx.handleConfirm(false))
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.confirm")), 1)
-          ]),
-          _: 1
-        }, 8, ["disabled"])
-      ])) : vue.createCommentVNode("v-if", true)
-    ], 2);
-  }
-  var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$H], ["__file", "panel-date-range.vue"]]);
+              _: 1
+            }, 8, ["class", "disabled"])
+          ], 2)) : vue.createCommentVNode("v-if", true)
+        ], 2);
+      };
+    }
+  });
+  var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__file", "panel-date-range.vue"]]);
 
   const panelMonthRangeProps = buildProps({
     ...panelRangeSharedProps
   });
+  const panelMonthRangeEmits = ["pick", "set-picker-option"];
 
-  const _sfc_main$1i = vue.defineComponent({
-    components: { MonthTable, ElIcon, DArrowLeft: dArrowLeft, DArrowRight: dArrowRight },
+  const _hoisted_1$B = ["onClick"];
+  const _hoisted_2$o = ["disabled"];
+  const _hoisted_3$b = ["disabled"];
+  const __default__$A = {
+    name: "DatePickerMonthRange"
+  };
+  const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$A,
     props: panelMonthRangeProps,
-    emits: ["pick", "set-picker-option"],
-    setup(props, ctx) {
+    emits: panelMonthRangeEmits,
+    setup(__props, { emit }) {
+      const props = __props;
+      const attrs = vue.useAttrs();
+      const slots = vue.useSlots();
+      const { pickerNs: ppNs } = vue.inject(ROOT_PICKER_INJECTION_KEY);
+      const drpNs = useNamespace("date-range-picker");
       const { t, lang } = useLocale();
       const leftDate = vue.ref(dayjs().locale(lang.value));
       const rightDate = vue.ref(dayjs().locale(lang.value).add(1, "year"));
       const hasShortcuts = vue.computed(() => !!shortcuts.length);
       const handleShortcutClick = (shortcut) => {
-        const shortcutValues = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+        const shortcutValues = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
         if (shortcutValues) {
-          ctx.emit("pick", [
+          emit("pick", [
             dayjs(shortcutValues[0]).locale(lang.value),
             dayjs(shortcutValues[1]).locale(lang.value)
           ]);
           return;
         }
         if (shortcut.onClick) {
-          shortcut.onClick(ctx);
+          shortcut.onClick({
+            attrs,
+            slots,
+            emit
+          });
         }
       };
       const leftPrevYear = () => {
@@ -25952,8 +25994,8 @@
       const enableYearArrow = vue.computed(() => {
         return props.unlinkPanels && rightYear.value > leftYear.value + 1;
       });
-      const minDate = vue.ref(null);
-      const maxDate = vue.ref(null);
+      const minDate = vue.ref();
+      const maxDate = vue.ref();
       const rangeState = vue.ref({
         endDate: null,
         selecting: false
@@ -25974,11 +26016,11 @@
         handleConfirm();
       };
       const isValidValue = (value) => {
-        return Array.isArray(value) && value && value[0] && value[1] && value[0].valueOf() <= value[1].valueOf();
+        return isArray(value) && value && value[0] && value[1] && value[0].valueOf() <= value[1].valueOf();
       };
       const handleConfirm = (visible = false) => {
         if (isValidValue([minDate.value, maxDate.value])) {
-          ctx.emit("pick", [minDate.value, maxDate.value], visible);
+          emit("pick", [minDate.value, maxDate.value], visible);
         }
       };
       const onSelect = (selecting) => {
@@ -25987,12 +26029,12 @@
           rangeState.value.endDate = null;
         }
       };
-      const formatToString = (value) => {
-        return value.map((_) => _.format(format));
+      const formatToString = (days) => {
+        return days.map((day) => day.format(format));
       };
       const getDefaultValue = () => {
         let start;
-        if (Array.isArray(defaultValue.value)) {
+        if (isArray(defaultValue.value)) {
           const left = dayjs(defaultValue.value[0]);
           let right = dayjs(defaultValue.value[1]);
           if (!props.unlinkPanels) {
@@ -26007,7 +26049,7 @@
         start = start.locale(lang.value);
         return [start, start.add(1, "year")];
       };
-      ctx.emit("set-picker-option", ["formatToString", formatToString]);
+      emit("set-picker-option", ["formatToString", formatToString]);
       const pickerBase = vue.inject("EP_PICKER_BASE");
       const { shortcuts, disabledDate, format } = pickerBase.props;
       const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
@@ -26032,163 +26074,167 @@
           }
         } else {
           const defaultArr = getDefaultValue();
-          minDate.value = null;
-          maxDate.value = null;
+          minDate.value = void 0;
+          maxDate.value = void 0;
           leftDate.value = defaultArr[0];
           rightDate.value = defaultArr[1];
         }
       }, { immediate: true });
-      return {
-        shortcuts,
-        disabledDate,
-        onSelect,
-        handleRangePick,
-        rangeState,
-        handleChangeRange,
-        minDate,
-        maxDate,
-        enableYearArrow,
-        leftLabel,
-        rightLabel,
-        leftNextYear,
-        leftPrevYear,
-        rightNextYear,
-        rightPrevYear,
-        t,
-        leftDate,
-        rightDate,
-        hasShortcuts,
-        handleShortcutClick
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass([
+            vue.unref(ppNs).b(),
+            vue.unref(drpNs).b(),
+            {
+              "has-sidebar": Boolean(_ctx.$slots.sidebar) || vue.unref(hasShortcuts)
+            }
+          ])
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
+          }, [
+            vue.renderSlot(_ctx.$slots, "sidebar", {
+              class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+            }),
+            vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
+                return vue.openBlock(), vue.createElementBlock("button", {
+                  key,
+                  type: "button",
+                  class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
+                  onClick: ($event) => handleShortcutClick(shortcut)
+                }, vue.toDisplayString(shortcut.text), 11, _hoisted_1$B);
+              }), 128))
+            ], 2)) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ppNs).e("body"))
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"])
+              }, [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+                }, [
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                    onClick: leftPrevYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    disabled: !vue.unref(enableYearArrow),
+                    class: vue.normalizeClass([[
+                      vue.unref(ppNs).e("icon-btn"),
+                      { [vue.unref(ppNs).is("disabled")]: !vue.unref(enableYearArrow) }
+                    ], "d-arrow-right"]),
+                    onClick: leftNextYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_2$o)) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
+                ], 2),
+                vue.createVNode(MonthTable, {
+                  "selection-mode": "range",
+                  date: leftDate.value,
+                  "min-date": minDate.value,
+                  "max-date": maxDate.value,
+                  "range-state": rangeState.value,
+                  "disabled-date": vue.unref(disabledDate),
+                  onChangerange: handleChangeRange,
+                  onPick: handleRangePick,
+                  onSelect
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
+              }, [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+                }, [
+                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    type: "button",
+                    disabled: !vue.unref(enableYearArrow),
+                    class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
+                    onClick: rightPrevYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowLeft))
+                      ]),
+                      _: 1
+                    })
+                  ], 10, _hoisted_3$b)) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("button", {
+                    type: "button",
+                    class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                    onClick: rightNextYear
+                  }, [
+                    vue.createVNode(vue.unref(ElIcon), null, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(dArrowRight))
+                      ]),
+                      _: 1
+                    })
+                  ], 2),
+                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
+                ], 2),
+                vue.createVNode(MonthTable, {
+                  "selection-mode": "range",
+                  date: rightDate.value,
+                  "min-date": minDate.value,
+                  "max-date": maxDate.value,
+                  "range-state": rangeState.value,
+                  "disabled-date": vue.unref(disabledDate),
+                  onChangerange: handleChangeRange,
+                  onPick: handleRangePick,
+                  onSelect
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
+              ], 2)
+            ], 2)
+          ], 2)
+        ], 2);
       };
     }
   });
-  const _hoisted_1$B = { class: "el-picker-panel__body-wrapper" };
-  const _hoisted_2$o = {
-    key: 0,
-    class: "el-picker-panel__sidebar"
-  };
-  const _hoisted_3$b = ["onClick"];
-  const _hoisted_4$8 = { class: "el-picker-panel__body" };
-  const _hoisted_5$5 = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
-  const _hoisted_6$1 = { class: "el-date-range-picker__header" };
-  const _hoisted_7$1 = ["disabled"];
-  const _hoisted_8$1 = { class: "el-picker-panel__content el-date-range-picker__content is-right" };
-  const _hoisted_9$1 = { class: "el-date-range-picker__header" };
-  const _hoisted_10$1 = ["disabled"];
-  function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    const _component_d_arrow_right = vue.resolveComponent("d-arrow-right");
-    const _component_month_table = vue.resolveComponent("month-table");
-    return vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["el-picker-panel el-date-range-picker", [
-        {
-          "has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts
-        }
-      ]])
-    }, [
-      vue.createElementVNode("div", _hoisted_1$B, [
-        vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-        _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
-            return vue.openBlock(), vue.createElementBlock("button", {
-              key,
-              type: "button",
-              class: "el-picker-panel__shortcut",
-              onClick: ($event) => _ctx.handleShortcutClick(shortcut)
-            }, vue.toDisplayString(shortcut.text), 9, _hoisted_3$b);
-          }), 128))
-        ])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_4$8, [
-          vue.createElementVNode("div", _hoisted_5$5, [
-            vue.createElementVNode("div", _hoisted_6$1, [
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn d-arrow-left",
-                onClick: _cache[0] || (_cache[0] = (...args) => _ctx.leftPrevYear && _ctx.leftPrevYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 0,
-                type: "button",
-                disabled: !_ctx.enableYearArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-right"]),
-                onClick: _cache[1] || (_cache[1] = (...args) => _ctx.leftNextYear && _ctx.leftNextYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_right)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_7$1)) : vue.createCommentVNode("v-if", true),
-              vue.createElementVNode("div", null, vue.toDisplayString(_ctx.leftLabel), 1)
-            ]),
-            vue.createVNode(_component_month_table, {
-              "selection-mode": "range",
-              date: _ctx.leftDate,
-              "min-date": _ctx.minDate,
-              "max-date": _ctx.maxDate,
-              "range-state": _ctx.rangeState,
-              "disabled-date": _ctx.disabledDate,
-              onChangerange: _ctx.handleChangeRange,
-              onPick: _ctx.handleRangePick,
-              onSelect: _ctx.onSelect
-            }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onPick", "onSelect"])
-          ]),
-          vue.createElementVNode("div", _hoisted_8$1, [
-            vue.createElementVNode("div", _hoisted_9$1, [
-              _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-                key: 0,
-                type: "button",
-                disabled: !_ctx.enableYearArrow,
-                class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-left"]),
-                onClick: _cache[2] || (_cache[2] = (...args) => _ctx.rightPrevYear && _ctx.rightPrevYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_left)
-                  ]),
-                  _: 1
-                })
-              ], 10, _hoisted_10$1)) : vue.createCommentVNode("v-if", true),
-              vue.createElementVNode("button", {
-                type: "button",
-                class: "el-picker-panel__icon-btn d-arrow-right",
-                onClick: _cache[3] || (_cache[3] = (...args) => _ctx.rightNextYear && _ctx.rightNextYear(...args))
-              }, [
-                vue.createVNode(_component_el_icon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_d_arrow_right)
-                  ]),
-                  _: 1
-                })
-              ]),
-              vue.createElementVNode("div", null, vue.toDisplayString(_ctx.rightLabel), 1)
-            ]),
-            vue.createVNode(_component_month_table, {
-              "selection-mode": "range",
-              date: _ctx.rightDate,
-              "min-date": _ctx.minDate,
-              "max-date": _ctx.maxDate,
-              "range-state": _ctx.rangeState,
-              "disabled-date": _ctx.disabledDate,
-              onChangerange: _ctx.handleChangeRange,
-              onPick: _ctx.handleRangePick,
-              onSelect: _ctx.onSelect
-            }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onPick", "onSelect"])
-          ])
-        ])
-      ])
-    ], 2);
-  }
-  var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$G], ["__file", "panel-month-range.vue"]]);
+  var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__file", "panel-month-range.vue"]]);
+
+  const getPanel = function(type) {
+    switch (type) {
+      case "daterange":
+      case "datetimerange": {
+        return DateRangePickPanel;
+      }
+      case "monthrange": {
+        return MonthRangePickPanel;
+      }
+      default: {
+        return DatePickPanel;
+      }
+    }
+  };
+  const isValidRange = (range) => {
+    if (!isArray(range))
+      return false;
+    const [left, right] = range;
+    return dayjs_min.exports.isDayjs(left) && dayjs_min.exports.isDayjs(right) && left.isSameOrBefore(right);
+  };
 
   dayjs.extend(localeData);
   dayjs.extend(advancedFormat);
@@ -26198,31 +26244,26 @@
   dayjs.extend(dayOfYear);
   dayjs.extend(isSameOrAfter);
   dayjs.extend(isSameOrBefore);
-  const getPanel = function(type) {
-    if (type === "daterange" || type === "datetimerange") {
-      return DateRangePickPanel;
-    } else if (type === "monthrange") {
-      return MonthRangePickPanel;
-    }
-    return DatePickPanel;
-  };
   var DatePicker = vue.defineComponent({
     name: "ElDatePicker",
     install: null,
     props: {
       ...timePickerDefaultProps,
-      type: {
-        type: String,
-        default: "date"
-      }
+      ...datePickerProps
     },
     emits: ["update:modelValue"],
-    setup(props, ctx) {
-      vue.provide("ElPopperOptions", props.popperOptions);
+    setup(props, {
+      expose,
+      emit,
+      slots
+    }) {
+      const ns = useNamespace("picker-panel");
+      vue.provide("ElPopperOptions", vue.reactive(vue.toRef(props, "popperOptions")));
       vue.provide(ROOT_PICKER_INJECTION_KEY, {
-        ctx
+        slots,
+        pickerNs: ns
       });
-      const commonPicker = vue.ref(null);
+      const commonPicker = vue.ref();
       const refProps = {
         ...props,
         focus: (focusStartInput = true) => {
@@ -26230,19 +26271,22 @@
           (_a = commonPicker.value) == null ? void 0 : _a.focus(focusStartInput);
         }
       };
-      ctx.expose(refProps);
+      expose(refProps);
+      const onModelValueUpdated = (val) => {
+        emit("update:modelValue", val);
+      };
       return () => {
         var _a;
         const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE;
-        return vue.h(CommonPicker, {
-          ...props,
-          format,
-          type: props.type,
-          ref: commonPicker,
-          "onUpdate:modelValue": (value) => ctx.emit("update:modelValue", value)
-        }, {
-          default: (scopedProps) => vue.h(getPanel(props.type), scopedProps),
-          "range-separator": () => vue.renderSlot(ctx.slots, "range-separator")
+        const Component = getPanel(props.type);
+        return vue.createVNode(CommonPicker, vue.mergeProps(props, {
+          "format": format,
+          "type": props.type,
+          "ref": commonPicker,
+          "onUpdate:modelValue": onModelValueUpdated
+        }), {
+          default: (scopedProps) => vue.createVNode(Component, scopedProps, null),
+          "range-separator": slots["range-separator"]
         });
       };
     }
@@ -54789,6 +54833,7 @@
   exports.POPPER_CONTAINER_SELECTOR = POPPER_CONTAINER_SELECTOR;
   exports.POPPER_CONTENT_INJECTION_KEY = POPPER_CONTENT_INJECTION_KEY;
   exports.POPPER_INJECTION_KEY = POPPER_INJECTION_KEY;
+  exports.ROOT_PICKER_INJECTION_KEY = ROOT_PICKER_INJECTION_KEY;
   exports.RepeatClick = RepeatClick;
   exports.Resize = Resize;
   exports.TOOLTIP_INJECTION_KEY = TOOLTIP_INJECTION_KEY;