@element-plus/nightly 0.0.20220601 → 0.0.20220604

package/lib/components/date-picker/src/date-picker-com/basic-year-table2.js

@@ -19,17 +19,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 
-const datesInYear = (year, lang) => {
-  const firstDay = dayjs__default["default"](String(year)).locale(lang).startOf("year");
-  const lastDay = firstDay.endOf("year");
-  const numOfDays = lastDay.dayOfYear();
-  return dateUtils.rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
-};
-const _sfc_main = vue.defineComponent({
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-selected", "tabindex", "onKeydown"];
+const _hoisted_3 = { class: "cell" };
+const _hoisted_4 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: basicYearTable.basicYearTableProps,
   emits: ["pick"],
-  expose: ["focus"],
-  setup(props, ctx) {
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const datesInYear = (year, lang2) => {
+      const firstDay = dayjs__default["default"](String(year)).locale(lang2).startOf("year");
+      const lastDay = firstDay.endOf("year");
+      const numOfDays = lastDay.dayOfYear();
+      return dateUtils.rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
+    };
     const ns = index.useNamespace("year-table");
     const { t, lang } = index$1.useLocale();
     const tbodyRef = vue.ref();
@@ -37,24 +41,17 @@ const _sfc_main = vue.defineComponent({
     const startYear = vue.computed(() => {
       return Math.floor(props.date.year() / 10) * 10;
     });
-    vue.watch(() => props.date, async () => {
-      var _a, _b;
-      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
-        await vue.nextTick();
-        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
-      }
-    });
     const focus = () => {
       var _a;
       (_a = currentCellRef.value) == null ? void 0 : _a.focus();
     };
-    const getCellStyle = (year) => {
-      const style = {};
+    const getCellKls = (year) => {
+      const kls = {};
       const today = dayjs__default["default"]().locale(lang.value);
-      style.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
-      style.current = arrays.castArray(props.parsedValue).findIndex((_) => _.year() === year) >= 0;
-      style.today = today.year() === year;
-      return style;
+      kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
+      kls.current = arrays.castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
+      kls.today = today.year() === year;
+      return kls;
     };
     const isSelectedCell = (year) => {
       return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || arrays.castArray(props.date).findIndex((date) => date.year() === year) >= 0;
@@ -66,63 +63,60 @@ const _sfc_main = vue.defineComponent({
         if (style.hasClass(target.parentNode, "disabled"))
           return;
         const year = target.textContent || target.innerText;
-        ctx.emit("pick", Number(year));
+        emit("pick", Number(year));
       }
     };
-    return {
-      ns,
-      t,
-      tbodyRef,
-      currentCellRef,
-      startYear,
-      focus,
-      isSelectedCell,
-      getCellStyle,
-      handleYearTableClick
+    vue.watch(() => props.date, async () => {
+      var _a, _b;
+      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
+        await vue.nextTick();
+        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+      }
+    });
+    expose({
+      focus
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("table", {
+        role: "grid",
+        "aria-label": vue.unref(t)("el.datepicker.yearTablePrompt"),
+        class: vue.normalizeClass(vue.unref(ns).b()),
+        onClick: handleYearTableClick
+      }, [
+        vue.createElementVNode("tbody", {
+          ref_key: "tbodyRef",
+          ref: tbodyRef
+        }, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (_, i) => {
+            return vue.createElementVNode("tr", { key: i }, [
+              (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(4, (__, j) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                  key: i + "_" + j
+                }, [
+                  i * 4 + j < 10 ? (vue.openBlock(), vue.createElementBlock("td", {
+                    key: 0,
+                    ref_for: true,
+                    ref: (el) => isSelectedCell(vue.unref(startYear) + i * 4 + j) && (currentCellRef.value = el),
+                    class: vue.normalizeClass(["available", getCellKls(vue.unref(startYear) + i * 4 + j)]),
+                    "aria-selected": `${isSelectedCell(vue.unref(startYear) + i * 4 + j)}`,
+                    tabindex: isSelectedCell(vue.unref(startYear) + i * 4 + j) ? 0 : -1,
+                    onKeydown: [
+                      vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
+                      vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
+                    ]
+                  }, [
+                    vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(vue.unref(startYear) + i * 4 + j), 1)
+                  ], 42, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_4))
+                ], 64);
+              }), 64))
+            ]);
+          }), 64))
+        ], 512)
+      ], 10, _hoisted_1);
     };
   }
 });
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = { ref: "tbodyRef" };
-const _hoisted_3 = ["aria-selected", "tabindex"];
-const _hoisted_4 = { class: "cell" };
-const _hoisted_5 = { key: 1 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("table", {
-    role: "grid",
-    "aria-label": _ctx.t("el.datepicker.yearTablePrompt"),
-    class: vue.normalizeClass(_ctx.ns.b()),
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))
-  }, [
-    vue.createElementVNode("tbody", _hoisted_2, [
-      (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (_, i) => {
-        return vue.createElementVNode("tr", { key: i }, [
-          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(4, (__, j) => {
-            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-              key: i + "_" + j
-            }, [
-              i * 4 + j < 10 ? (vue.openBlock(), vue.createElementBlock("td", {
-                key: 0,
-                ref_for: true,
-                ref: (el) => _ctx.isSelectedCell(_ctx.startYear + i * 4 + j) && (_ctx.currentCellRef = el),
-                class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + i * 4 + j)]),
-                "aria-selected": `${_ctx.isSelectedCell(_ctx.startYear + i * 4 + j)}`,
-                tabindex: _ctx.isSelectedCell(_ctx.startYear + i * 4 + j) ? 0 : -1,
-                onKeydown: [
-                  _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["space"])),
-                  _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["enter"]))
-                ]
-              }, [
-                vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(_ctx.startYear + i * 4 + j), 1)
-              ], 42, _hoisted_3)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_5))
-            ], 64);
-          }), 64))
-        ]);
-      }), 64))
-    ], 512)
-  ], 10, _hoisted_1);
-}
-var YearTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-year-table.vue"]]);
+var YearTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-year-table.vue"]]);
 
 exports["default"] = YearTable;
 //# sourceMappingURL=basic-year-table2.js.map

package/lib/components/date-picker/src/date-picker-com/basic-year-table2.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-year-table2.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-year-table.vue"],"sourcesContent":["<template>\n  <table\n    role=\"grid\"\n    :aria-label=\"t('el.datepicker.yearTablePrompt')\"\n    :class=\"ns.b()\"\n    @click=\"handleYearTableClick\"\n  >\n    <tbody ref=\"tbodyRef\">\n      <tr v-for=\"(_, i) in 3\" :key=\"i\">\n        <template v-for=\"(__, j) in 4\" :key=\"i + '_' + j\">\n          <td\n            v-if=\"i * 4 + j < 10\"\n            :ref=\"\n              (el) =>\n                isSelectedCell(startYear + i * 4 + j) && (currentCellRef = el as HTMLElement)\n            \"\n            class=\"available\"\n            :class=\"getCellStyle(startYear + i * 4 + j)\"\n            :aria-selected=\"`${isSelectedCell(startYear + i * 4 + j)}`\"\n            :tabindex=\"isSelectedCell(startYear + i * 4 + j) ? 0 : -1\"\n            @keydown.space.prevent.stop=\"handleYearTableClick\"\n            @keydown.enter.prevent.stop=\"handleYearTableClick\"\n          >\n            <span class=\"cell\">{{ startYear + i * 4 + j }}</span>\n          </td>\n          <td v-else />\n        </template>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, nextTick, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { castArray, hasClass } from '@element-plus/utils'\nimport { basicYearTableProps } from '../props/basic-year-table'\n\nconst datesInYear = (year: number, lang: string) => {\n  const firstDay = dayjs(String(year)).locale(lang).startOf('year')\n  const lastDay = firstDay.endOf('year')\n  const numOfDays = lastDay.dayOfYear()\n  return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())\n}\n\nexport default defineComponent({\n  props: basicYearTableProps,\n\n  emits: ['pick'],\n  expose: ['focus'],\n\n  setup(props, ctx) {\n    const ns = useNamespace('year-table')\n\n    const { t, lang } = useLocale()\n    const tbodyRef = ref<HTMLElement>()\n    const currentCellRef = ref<HTMLElement>()\n    const startYear = computed(() => {\n      return Math.floor(props.date.year() / 10) * 10\n    })\n\n    watch(\n      () => props.date,\n      async () => {\n        if (tbodyRef.value?.contains(document.activeElement)) {\n          await nextTick()\n          currentCellRef.value?.focus()\n        }\n      }\n    )\n\n    const focus = () => {\n      currentCellRef.value?.focus()\n    }\n\n    const getCellStyle = (year: number) => {\n      const style: Record<string, boolean> = {}\n      const today = dayjs().locale(lang.value)\n\n      style.disabled = props.disabledDate\n        ? datesInYear(year, lang.value).every(props.disabledDate)\n        : false\n\n      style.current =\n        castArray(props.parsedValue).findIndex((_) => _.year() === year) >= 0\n\n      style.today = today.year() === year\n\n      return style\n    }\n\n    const isSelectedCell = (year: number) => {\n      return (\n        (year === startYear.value &&\n          props.date.year() < startYear.value &&\n          props.date.year() > startYear.value + 9) ||\n        castArray(props.date).findIndex((date) => date.year() === year) >= 0\n      )\n    }\n\n    const handleYearTableClick = (event: MouseEvent | KeyboardEvent) => {\n      const clickTarget = event.target as HTMLDivElement\n      const target = clickTarget.closest('td')\n      if (target) {\n        if (hasClass((target as any).parentNode, 'disabled')) return\n        const year = target.textContent || target.innerText\n        ctx.emit('pick', Number(year))\n      }\n    }\n    return {\n      ns,\n      t,\n      tbodyRef,\n      currentCellRef,\n      startYear,\n      focus,\n      isSelectedCell,\n      getCellStyle,\n      handleYearTableClick,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","rangeArr","defineComponent","basicYearTableProps","useNamespace","useLocale","ref","computed","watch","nextTick","castArray","hasClass","_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_withKeys","_withModifiers","_createElementVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"basic-year-table2.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-year-table.vue"],"sourcesContent":["<template>\n  <table\n    role=\"grid\"\n    :aria-label=\"t('el.datepicker.yearTablePrompt')\"\n    :class=\"ns.b()\"\n    @click=\"handleYearTableClick\"\n  >\n    <tbody ref=\"tbodyRef\">\n      <tr v-for=\"(_, i) in 3\" :key=\"i\">\n        <template v-for=\"(__, j) in 4\" :key=\"i + '_' + j\">\n          <td\n            v-if=\"i * 4 + j < 10\"\n            :ref=\"\n              (el) =>\n                isSelectedCell(startYear + i * 4 + j) && (currentCellRef = el as HTMLElement)\n            \"\n            class=\"available\"\n            :class=\"getCellKls(startYear + i * 4 + j)\"\n            :aria-selected=\"`${isSelectedCell(startYear + i * 4 + j)}`\"\n            :tabindex=\"isSelectedCell(startYear + i * 4 + j) ? 0 : -1\"\n            @keydown.space.prevent.stop=\"handleYearTableClick\"\n            @keydown.enter.prevent.stop=\"handleYearTableClick\"\n          >\n            <span class=\"cell\">{{ startYear + i * 4 + j }}</span>\n          </td>\n          <td v-else />\n        </template>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { castArray, hasClass } from '@element-plus/utils'\nimport { basicYearTableProps } from '../props/basic-year-table'\n\nconst datesInYear = (year: number, lang: string) => {\n  const firstDay = dayjs(String(year)).locale(lang).startOf('year')\n  const lastDay = firstDay.endOf('year')\n  const numOfDays = lastDay.dayOfYear()\n  return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())\n}\n\nconst props = defineProps(basicYearTableProps)\nconst emit = defineEmits(['pick'])\n\nconst ns = useNamespace('year-table')\n\nconst { t, lang } = useLocale()\nconst tbodyRef = ref<HTMLElement>()\nconst currentCellRef = ref<HTMLElement>()\nconst startYear = computed(() => {\n  return Math.floor(props.date.year() / 10) * 10\n})\n\nconst focus = () => {\n  currentCellRef.value?.focus()\n}\n\nconst getCellKls = (year: number) => {\n  const kls: Record<string, boolean> = {}\n  const today = dayjs().locale(lang.value)\n\n  kls.disabled = props.disabledDate\n    ? datesInYear(year, lang.value).every(props.disabledDate)\n    : false\n\n  kls.current =\n    castArray(props.parsedValue).findIndex((d) => d!.year() === year) >= 0\n\n  kls.today = today.year() === year\n\n  return kls\n}\n\nconst isSelectedCell = (year: number) => {\n  return (\n    (year === startYear.value &&\n      props.date.year() < startYear.value &&\n      props.date.year() > startYear.value + 9) ||\n    castArray(props.date).findIndex((date) => date.year() === year) >= 0\n  )\n}\n\nconst handleYearTableClick = (event: MouseEvent | KeyboardEvent) => {\n  const clickTarget = event.target as HTMLDivElement\n  const target = clickTarget.closest('td')\n  if (target) {\n    if (hasClass((target as any).parentNode, 'disabled')) return\n    const year = target.textContent || target.innerText\n    emit('pick', Number(year))\n  }\n}\n\nwatch(\n  () => props.date,\n  async () => {\n    if (tbodyRef.value?.contains(document.activeElement)) {\n      await nextTick()\n      currentCellRef.value?.focus()\n    }\n  }\n)\n\ndefineExpose({\n  /**\n   * @description focus on the current cell\n   */\n  focus,\n})\n</script>\n"],"names":["dayjs","rangeArr","useNamespace","useLocale","ref","computed","castArray","hasClass","watch","nextTick"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/panel-date-pick2.js

@@ -35,10 +35,8 @@ var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = ["onKeydown"];
-const _hoisted_5 = ["onKeydown"];
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = ["aria-label"];
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: panelDatePick.panelDatePickProps,
   emits: ["pick", "set-picker-option", "panel-change"],
@@ -106,28 +104,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         emit(value, true);
       }
     };
-    const prevMonth_ = () => {
-      innerDate.value = innerDate.value.subtract(1, "month");
+    const moveByMonth = (forward) => {
+      const action = forward ? "add" : "subtract";
+      innerDate.value = innerDate.value[action](1, "month");
       handlePanelChange("month");
     };
-    const nextMonth_ = () => {
-      innerDate.value = innerDate.value.add(1, "month");
-      handlePanelChange("month");
-    };
-    const prevYear_ = () => {
-      if (currentView.value === "year") {
-        innerDate.value = innerDate.value.subtract(10, "year");
-      } else {
-        innerDate.value = innerDate.value.subtract(1, "year");
-      }
-      handlePanelChange("year");
-    };
-    const nextYear_ = () => {
-      if (currentView.value === "year") {
-        innerDate.value = innerDate.value.add(10, "year");
-      } else {
-        innerDate.value = innerDate.value.add(1, "year");
-      }
+    const moveByYear = (forward) => {
+      const currentDate = innerDate.value;
+      const action = forward ? "add" : "subtract";
+      innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
       handlePanelChange("year");
     };
     const currentView = vue.ref("date");
@@ -165,16 +150,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const keyboardMode = vue.computed(() => {
       return selectionMode.value === "date" ? currentView.value : selectionMode.value;
     });
-    vue.watch(() => selectionMode.value, (val) => {
-      if (["month", "year"].includes(val)) {
-        currentView.value = val;
-        return;
-      }
-      currentView.value = "date";
-    }, { immediate: true });
-    vue.watch(() => currentView.value, () => {
-      popper == null ? void 0 : popper.updatePopper();
-    });
     const hasShortcuts = vue.computed(() => !!shortcuts.length);
     const handleMonthPick = async (month2) => {
       innerDate.value = innerDate.value.startOf("month").month(month2);
@@ -205,13 +180,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       handlePanelChange("year");
     };
-    const showMonthPicker = async () => {
-      currentView.value = "month";
-      await vue.nextTick();
-      handleFocusPicker();
-    };
-    const showYearPicker = async () => {
-      currentView.value = "year";
+    const showPicker = async (view) => {
+      currentView.value = view;
       await vue.nextTick();
       handleFocusPicker();
     };
@@ -268,8 +238,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleTimePickClose = () => {
       timePickerVisible.value = false;
     };
+    const getUnits = (date) => {
+      return {
+        hour: date.hour(),
+        minute: date.minute(),
+        second: date.second(),
+        year: date.year(),
+        month: date.month(),
+        date: date.date()
+      };
+    };
     const handleTimePick = (value, visible, first) => {
-      const newDate = props.parsedValue ? props.parsedValue.hour(value.hour()).minute(value.minute()).second(value.second()) : value;
+      const { hour, minute, second } = getUnits(value);
+      const newDate = props.parsedValue ? props.parsedValue.hour(hour).minute(minute).second(second) : value;
       innerDate.value = newDate;
       emit(innerDate.value, true);
       if (!first) {
@@ -279,7 +260,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleVisibleTimeChange = (value) => {
       const newDate = dayjs__default["default"](value, timeFormat.value).locale(lang.value);
       if (newDate.isValid() && checkDateWithinRange(newDate)) {
-        innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date());
+        const { year: year2, month: month2, date } = getUnits(innerDate.value);
+        innerDate.value = newDate.year(year2).month(month2).date(date);
         userInputTime.value = null;
         timePickerVisible.value = false;
         emit(innerDate.value, true);
@@ -291,7 +273,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (disabledDate && disabledDate(newDate.toDate())) {
           return;
         }
-        innerDate.value = newDate.hour(innerDate.value.hour()).minute(innerDate.value.minute()).second(innerDate.value.second());
+        const { hour, minute, second } = getUnits(innerDate.value);
+        innerDate.value = newDate.hour(hour).minute(minute).second(second);
         userInputDate.value = null;
         emit(innerDate.value, true);
       }
@@ -319,7 +302,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleFocusPicker = async () => {
       var _a;
       if (["week", "month", "year", "date"].includes(selectionMode.value)) {
-        ;
         (_a = currentViewRef.value) == null ? void 0 : _a.focus();
         if (selectionMode.value === "week") {
           handleKeyControl(aria.EVENT_CODE.down);
@@ -328,7 +310,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const handleKeydownTable = (event) => {
       const { code } = event;
-      const list = [
+      const validCode = [
         aria.EVENT_CODE.up,
         aria.EVENT_CODE.down,
         aria.EVENT_CODE.left,
@@ -338,7 +320,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         aria.EVENT_CODE.pageUp,
         aria.EVENT_CODE.pageDown
       ];
-      if (list.includes(code)) {
+      if (validCode.includes(code)) {
         handleKeyControl(code);
         event.stopPropagation();
         event.preventDefault();
@@ -403,10 +385,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handlePanelChange = (mode) => {
       contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
     };
-    contextEmit("set-picker-option", ["isValidValue", isValidValue]);
-    contextEmit("set-picker-option", ["formatToString", formatToString]);
-    contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
-    contextEmit("set-picker-option", ["handleFocusPicker", handleFocusPicker]);
+    vue.watch(() => selectionMode.value, (val) => {
+      if (["month", "year"].includes(val)) {
+        currentView.value = val;
+        return;
+      }
+      currentView.value = "date";
+    }, { immediate: true });
+    vue.watch(() => currentView.value, () => {
+      popper == null ? void 0 : popper.updatePopper();
+    });
     vue.watch(() => defaultValue.value, (val) => {
       if (val) {
         innerDate.value = getDefaultValue();
@@ -423,6 +411,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         innerDate.value = getDefaultValue();
       }
     }, { immediate: true });
+    contextEmit("set-picker-option", ["isValidValue", isValidValue]);
+    contextEmit("set-picker-option", ["formatToString", formatToString]);
+    contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
+    contextEmit("set-picker-option", ["handleFocusPicker", handleFocusPicker]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass([
@@ -506,7 +498,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   type: "button",
                   "aria-label": vue.unref(t)(`el.datepicker.prevYear`),
                   class: vue.normalizeClass(["d-arrow-left", vue.unref(ppNs).e("icon-btn")]),
-                  onClick: prevYear_
+                  onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
                 }, [
                   vue.createVNode(vue.unref(index$4.ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -519,7 +511,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   type: "button",
                   "aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
                   class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
-                  onClick: prevMonth_
+                  onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
                 }, [
                   vue.createVNode(vue.unref(index$4.ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -536,9 +528,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 class: vue.normalizeClass(vue.unref(dpNs).e("header-label")),
                 "aria-live": "polite",
                 tabindex: "0",
-                onKeydown: vue.withKeys(showYearPicker, ["enter"]),
-                onClick: showYearPicker
-              }, vue.toDisplayString(vue.unref(yearLabel)), 43, _hoisted_4),
+                onKeydown: _cache[4] || (_cache[4] = vue.withKeys(($event) => showPicker("year"), ["enter"])),
+                onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
+              }, vue.toDisplayString(vue.unref(yearLabel)), 35),
               vue.withDirectives(vue.createElementVNode("span", {
                 role: "button",
                 "aria-live": "polite",
@@ -547,9 +539,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   vue.unref(dpNs).e("header-label"),
                   { active: currentView.value === "month" }
                 ]),
-                onKeydown: vue.withKeys(showMonthPicker, ["enter"]),
-                onClick: showMonthPicker
-              }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${vue.unref(month) + 1}`)), 43, _hoisted_5), [
+                onKeydown: _cache[6] || (_cache[6] = vue.withKeys(($event) => showPicker("month"), ["enter"])),
+                onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
+              }, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${vue.unref(month) + 1}`)), 35), [
                 [vue.vShow, currentView.value === "date"]
               ]),
               vue.createElementVNode("span", {
@@ -559,7 +551,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   type: "button",
                   "aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
                   class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
-                  onClick: nextMonth_
+                  onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
                 }, [
                   vue.createVNode(vue.unref(index$4.ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -567,14 +559,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_6), [
+                ], 10, _hoisted_4), [
                   [vue.vShow, currentView.value === "date"]
                 ]),
                 vue.createElementVNode("button", {
                   type: "button",
                   "aria-label": vue.unref(t)(`el.datepicker.nextYear`),
                   class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
-                  onClick: nextYear_
+                  onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
                 }, [
                   vue.createVNode(vue.unref(index$4.ElIcon), null, {
                     default: vue.withCtx(() => [
@@ -582,7 +574,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_7)
+                ], 10, _hoisted_5)
               ], 2)
             ], 2), [
               [vue.vShow, currentView.value !== "time"]