@element-plus/nightly 0.0.20250512 → 0.0.20250513

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20250512 */
+/*! Element Plus v0.0.20250513 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11722,7 +11722,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20250512";
+  const version$1 = "0.0.20250513";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -28853,6 +28853,94 @@
     };
   };
 
+  const usePanelDateRange = (props, emit, leftDate, rightDate) => {
+    const leftCurrentView = vue.ref("date");
+    const leftCurrentViewRef = vue.ref();
+    const rightCurrentView = vue.ref("date");
+    const rightCurrentViewRef = vue.ref();
+    const pickerBase = vue.inject("EP_PICKER_BASE");
+    const { disabledDate } = pickerBase.props;
+    const { t, lang } = useLocale();
+    const leftYear = vue.computed(() => {
+      return leftDate.value.year();
+    });
+    const leftMonth = vue.computed(() => {
+      return leftDate.value.month();
+    });
+    const rightYear = vue.computed(() => {
+      return rightDate.value.year();
+    });
+    const rightMonth = vue.computed(() => {
+      return rightDate.value.month();
+    });
+    function computedYearLabel(currentView, yearValue) {
+      const yearTranslation = t("el.datepicker.year");
+      if (currentView.value === "year") {
+        const startYear = Math.floor(yearValue.value / 10) * 10;
+        return yearTranslation ? `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}` : `${startYear} - ${startYear + 9}`;
+      }
+      return `${yearValue.value} ${yearTranslation}`;
+    }
+    function focusPicker(currentViewRef) {
+      currentViewRef == null ? void 0 : currentViewRef.focus();
+    }
+    async function showPicker(pickerType, view) {
+      const currentView = pickerType === "left" ? leftCurrentView : rightCurrentView;
+      const currentViewRef = pickerType === "left" ? leftCurrentViewRef : rightCurrentViewRef;
+      currentView.value = view;
+      await vue.nextTick();
+      focusPicker(currentViewRef.value);
+    }
+    async function handlePick(mode, pickerType, value) {
+      const isLeftPicker = pickerType === "left";
+      const startDate = isLeftPicker ? leftDate : rightDate;
+      const endDate = isLeftPicker ? rightDate : leftDate;
+      const currentView = isLeftPicker ? leftCurrentView : rightCurrentView;
+      const currentViewRef = isLeftPicker ? leftCurrentViewRef : rightCurrentViewRef;
+      if (mode === "year") {
+        const data = startDate.value.year(value);
+        startDate.value = getValidDateOfYear(data, lang.value, disabledDate);
+      }
+      if (mode === "month") {
+        startDate.value = getValidDateOfMonth(startDate.value.year(), value, lang.value, disabledDate);
+      }
+      if (!props.unlinkPanels) {
+        endDate.value = pickerType === "left" ? startDate.value.add(1, "month") : startDate.value.subtract(1, "month");
+      }
+      currentView.value = mode === "year" ? "month" : "date";
+      await vue.nextTick();
+      focusPicker(currentViewRef.value);
+      handlePanelChange(mode);
+    }
+    function handlePanelChange(mode) {
+      emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+    }
+    function adjustDateByView(currentView, date, forward) {
+      const action = forward ? "add" : "subtract";
+      return currentView === "year" ? date[action](10, "year") : date[action](1, "year");
+    }
+    return {
+      leftCurrentView,
+      rightCurrentView,
+      leftCurrentViewRef,
+      rightCurrentViewRef,
+      leftYear,
+      rightYear,
+      leftMonth,
+      rightMonth,
+      leftYearLabel: vue.computed(() => computedYearLabel(leftCurrentView, leftYear)),
+      rightYearLabel: vue.computed(() => computedYearLabel(rightCurrentView, rightYear)),
+      showLeftPicker: (view) => showPicker("left", view),
+      showRightPicker: (view) => showPicker("right", view),
+      handleLeftYearPick: (year) => handlePick("year", "left", year),
+      handleRightYearPick: (year) => handlePick("year", "right", year),
+      handleLeftMonthPick: (month) => handlePick("month", "left", month),
+      handleRightMonthPick: (month) => handlePick("month", "right", month),
+      handlePanelChange,
+      adjustDateByView
+    };
+  };
+
   const unit$2 = "month";
   const _sfc_main$1u = /* @__PURE__ */ vue.defineComponent({
     __name: "panel-date-range",
@@ -28908,24 +28996,26 @@
         min: null,
         max: null
       });
-      const leftLabel = vue.computed(() => {
-        return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
-      });
-      const rightLabel = vue.computed(() => {
-        return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
-      });
-      const leftYear = vue.computed(() => {
-        return leftDate.value.year();
-      });
-      const leftMonth = vue.computed(() => {
-        return leftDate.value.month();
-      });
-      const rightYear = vue.computed(() => {
-        return rightDate.value.year();
-      });
-      const rightMonth = vue.computed(() => {
-        return rightDate.value.month();
-      });
+      const {
+        leftCurrentView,
+        rightCurrentView,
+        leftCurrentViewRef,
+        rightCurrentViewRef,
+        leftYear,
+        rightYear,
+        leftMonth,
+        rightMonth,
+        leftYearLabel,
+        rightYearLabel,
+        showLeftPicker,
+        showRightPicker,
+        handleLeftYearPick,
+        handleRightYearPick,
+        handleLeftMonthPick,
+        handleRightMonthPick,
+        handlePanelChange,
+        adjustDateByView
+      } = usePanelDateRange(props, emit, leftDate, rightDate);
       const hasShortcuts = vue.computed(() => !!shortcuts.value.length);
       const minVisibleDate = vue.computed(() => {
         if (dateUserInput.value.min !== null)
@@ -28965,7 +29055,7 @@
         return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
       };
       const leftPrevYear = () => {
-        leftDate.value = leftDate.value.subtract(1, "year");
+        leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, false);
         if (!props.unlinkPanels) {
           rightDate.value = leftDate.value.add(1, "month");
         }
@@ -28980,10 +29070,10 @@
       };
       const rightNextYear = () => {
         if (!props.unlinkPanels) {
-          leftDate.value = leftDate.value.add(1, "year");
+          leftDate.value = adjustDateByView(rightCurrentView.value, leftDate.value, true);
           rightDate.value = leftDate.value.add(1, "month");
         } else {
-          rightDate.value = rightDate.value.add(1, "year");
+          rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, true);
         }
         handlePanelChange("year");
       };
@@ -28997,7 +29087,7 @@
         handlePanelChange("month");
       };
       const leftNextYear = () => {
-        leftDate.value = leftDate.value.add(1, "year");
+        leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, true);
         handlePanelChange("year");
       };
       const leftNextMonth = () => {
@@ -29005,16 +29095,13 @@
         handlePanelChange("month");
       };
       const rightPrevYear = () => {
-        rightDate.value = rightDate.value.subtract(1, "year");
+        rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, false);
         handlePanelChange("year");
       };
       const rightPrevMonth = () => {
         rightDate.value = rightDate.value.subtract(1, "month");
         handlePanelChange("month");
       };
-      const handlePanelChange = (mode) => {
-        emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
-      };
       const enableMonthArrow = vue.computed(() => {
         const nextMonth = (leftMonth.value + 1) % 12;
         const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
@@ -29100,7 +29187,7 @@
           }
         }
       };
-      const handleTimeChange = (value, type) => {
+      const handleTimeChange = (_value, type) => {
         timeUserInput.value[type] = null;
         if (type === "min") {
           leftDate.value = minDate.value;
@@ -29333,7 +29420,7 @@
                       })
                     ])
                   ], 10, ["aria-label"]),
-                  vue.createElementVNode("button", {
+                  vue.withDirectives(vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
                     "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
@@ -29347,7 +29434,9 @@
                         _: 1
                       })
                     ])
-                  ], 10, ["aria-label"]),
+                  ], 10, ["aria-label"]), [
+                    [vue.vShow, vue.unref(leftCurrentView) === "date"]
+                  ]),
                   _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 0,
                     type: "button",
@@ -29365,7 +29454,7 @@
                       })
                     ])
                   ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  _ctx.unlinkPanels && vue.unref(leftCurrentView) === "date" ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 1,
                     type: "button",
                     disabled: !vue.unref(enableMonthArrow),
@@ -29385,9 +29474,34 @@
                       })
                     ])
                   ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
+                  vue.createElementVNode("div", null, [
+                    vue.createElementVNode("span", {
+                      role: "button",
+                      class: vue.normalizeClass(vue.unref(drpNs).e("header-label")),
+                      "aria-live": "polite",
+                      tabindex: "0",
+                      onKeydown: vue.withKeys(($event) => vue.unref(showLeftPicker)("year"), ["enter"]),
+                      onClick: ($event) => vue.unref(showLeftPicker)("year")
+                    }, vue.toDisplayString(vue.unref(leftYearLabel)), 43, ["onKeydown", "onClick"]),
+                    vue.withDirectives(vue.createElementVNode("span", {
+                      role: "button",
+                      "aria-live": "polite",
+                      tabindex: "0",
+                      class: vue.normalizeClass([
+                        vue.unref(drpNs).e("header-label"),
+                        { active: vue.unref(leftCurrentView) === "month" }
+                      ]),
+                      onKeydown: vue.withKeys(($event) => vue.unref(showLeftPicker)("month"), ["enter"]),
+                      onClick: ($event) => vue.unref(showLeftPicker)("month")
+                    }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, ["onKeydown", "onClick"]), [
+                      [vue.vShow, vue.unref(leftCurrentView) === "date"]
+                    ])
+                  ])
                 ], 2),
-                vue.createVNode(DateTable, {
+                vue.unref(leftCurrentView) === "date" ? (vue.openBlock(), vue.createBlock(DateTable, {
+                  key: 0,
+                  ref_key: "leftCurrentViewRef",
+                  ref: leftCurrentViewRef,
                   "selection-mode": "range",
                   date: leftDate.value,
                   "min-date": vue.unref(minDate),
@@ -29398,7 +29512,27 @@
                   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"])
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])) : vue.createCommentVNode("v-if", true),
+                vue.unref(leftCurrentView) === "year" ? (vue.openBlock(), vue.createBlock(YearTable, {
+                  key: 1,
+                  ref_key: "leftCurrentViewRef",
+                  ref: leftCurrentViewRef,
+                  "selection-mode": "year",
+                  date: leftDate.value,
+                  "disabled-date": vue.unref(disabledDate),
+                  "parsed-value": _ctx.parsedValue,
+                  onPick: vue.unref(handleLeftYearPick)
+                }, null, 8, ["date", "disabled-date", "parsed-value", "onPick"])) : vue.createCommentVNode("v-if", true),
+                vue.unref(leftCurrentView) === "month" ? (vue.openBlock(), vue.createBlock(MonthTable, {
+                  key: 2,
+                  ref_key: "leftCurrentViewRef",
+                  ref: leftCurrentViewRef,
+                  "selection-mode": "month",
+                  date: leftDate.value,
+                  "parsed-value": _ctx.parsedValue,
+                  "disabled-date": vue.unref(disabledDate),
+                  onPick: vue.unref(handleLeftMonthPick)
+                }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
               ], 2),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
@@ -29423,7 +29557,7 @@
                       })
                     ])
                   ], 10, ["disabled", "aria-label"])) : vue.createCommentVNode("v-if", true),
-                  _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  _ctx.unlinkPanels && vue.unref(rightCurrentView) === "date" ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 1,
                     type: "button",
                     disabled: !vue.unref(enableMonthArrow),
@@ -29458,7 +29592,7 @@
                       })
                     ])
                   ], 10, ["aria-label"]),
-                  vue.createElementVNode("button", {
+                  vue.withDirectives(vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
                     "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
@@ -29472,10 +29606,37 @@
                         _: 1
                       })
                     ])
-                  ], 10, ["aria-label"]),
-                  vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
+                  ], 10, ["aria-label"]), [
+                    [vue.vShow, vue.unref(rightCurrentView) === "date"]
+                  ]),
+                  vue.createElementVNode("div", null, [
+                    vue.createElementVNode("span", {
+                      role: "button",
+                      class: vue.normalizeClass(vue.unref(drpNs).e("header-label")),
+                      "aria-live": "polite",
+                      tabindex: "0",
+                      onKeydown: vue.withKeys(($event) => vue.unref(showRightPicker)("year"), ["enter"]),
+                      onClick: ($event) => vue.unref(showRightPicker)("year")
+                    }, vue.toDisplayString(vue.unref(rightYearLabel)), 43, ["onKeydown", "onClick"]),
+                    vue.withDirectives(vue.createElementVNode("span", {
+                      role: "button",
+                      "aria-live": "polite",
+                      tabindex: "0",
+                      class: vue.normalizeClass([
+                        vue.unref(drpNs).e("header-label"),
+                        { active: vue.unref(rightCurrentView) === "month" }
+                      ]),
+                      onKeydown: vue.withKeys(($event) => vue.unref(showRightPicker)("month"), ["enter"]),
+                      onClick: ($event) => vue.unref(showRightPicker)("month")
+                    }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, ["onKeydown", "onClick"]), [
+                      [vue.vShow, vue.unref(rightCurrentView) === "date"]
+                    ])
+                  ])
                 ], 2),
-                vue.createVNode(DateTable, {
+                vue.unref(rightCurrentView) === "date" ? (vue.openBlock(), vue.createBlock(DateTable, {
+                  key: 0,
+                  ref_key: "rightCurrentViewRef",
+                  ref: rightCurrentViewRef,
                   "selection-mode": "range",
                   date: rightDate.value,
                   "min-date": vue.unref(minDate),
@@ -29486,7 +29647,27 @@
                   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"])
+                }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])) : vue.createCommentVNode("v-if", true),
+                vue.unref(rightCurrentView) === "year" ? (vue.openBlock(), vue.createBlock(YearTable, {
+                  key: 1,
+                  ref_key: "rightCurrentViewRef",
+                  ref: rightCurrentViewRef,
+                  "selection-mode": "year",
+                  date: rightDate.value,
+                  "disabled-date": vue.unref(disabledDate),
+                  "parsed-value": _ctx.parsedValue,
+                  onPick: vue.unref(handleRightYearPick)
+                }, null, 8, ["date", "disabled-date", "parsed-value", "onPick"])) : vue.createCommentVNode("v-if", true),
+                vue.unref(rightCurrentView) === "month" ? (vue.openBlock(), vue.createBlock(MonthTable, {
+                  key: 2,
+                  ref_key: "rightCurrentViewRef",
+                  ref: rightCurrentViewRef,
+                  "selection-mode": "month",
+                  date: rightDate.value,
+                  "parsed-value": _ctx.parsedValue,
+                  "disabled-date": vue.unref(disabledDate),
+                  onPick: vue.unref(handleRightMonthPick)
+                }, null, 8, ["date", "parsed-value", "disabled-date", "onPick"])) : vue.createCommentVNode("v-if", true)
               ], 2)
             ], 2)
           ], 2),
@@ -45085,6 +45266,7 @@
       updateTreeData(true);
     });
     vue.watch(() => normalizedData.value, () => {
+      isInitTree = true;
       updateTreeData();
     });
     vue.watch(() => normalizedLazyNode.value, () => {