@element-plus/nightly 0.0.20220601 → 0.0.20220602

package/es/components/date-picker/src/date-picker-com/basic-year-table2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, withModifiers, toDisplayString } from 'vue';
+import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, Fragment, renderList, withKeys, withModifiers, toDisplayString } from 'vue';
 import dayjs from 'dayjs';
 import '../../../../hooks/index2.mjs';
 import '../../../time-picker/index2.mjs';
@@ -11,17 +11,21 @@ import { useLocale } from '../../../../hooks/use-locale/index2.mjs';
 import { castArray } from '../../../../utils/arrays2.mjs';
 import { hasClass } from '../../../../utils/dom/style2.mjs';
 
-const datesInYear = (year, lang) => {
-  const firstDay = dayjs(String(year)).locale(lang).startOf("year");
-  const lastDay = firstDay.endOf("year");
-  const numOfDays = lastDay.dayOfYear();
-  return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
-};
-const _sfc_main = 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__ */ defineComponent({
   props: basicYearTableProps,
   emits: ["pick"],
-  expose: ["focus"],
-  setup(props, ctx) {
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const datesInYear = (year, lang2) => {
+      const firstDay = dayjs(String(year)).locale(lang2).startOf("year");
+      const lastDay = firstDay.endOf("year");
+      const numOfDays = lastDay.dayOfYear();
+      return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
+    };
     const ns = useNamespace("year-table");
     const { t, lang } = useLocale();
     const tbodyRef = ref();
@@ -29,24 +33,17 @@ const _sfc_main = defineComponent({
     const startYear = computed(() => {
       return Math.floor(props.date.year() / 10) * 10;
     });
-    watch(() => props.date, async () => {
-      var _a, _b;
-      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
-        await 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().locale(lang.value);
-      style.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
-      style.current = 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 = 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 || castArray(props.date).findIndex((date) => date.year() === year) >= 0;
@@ -58,63 +55,60 @@ const _sfc_main = defineComponent({
         if (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
+    watch(() => props.date, async () => {
+      var _a, _b;
+      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
+        await nextTick();
+        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+      }
+    });
+    expose({
+      focus
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", {
+        role: "grid",
+        "aria-label": unref(t)("el.datepicker.yearTablePrompt"),
+        class: normalizeClass(unref(ns).b()),
+        onClick: handleYearTableClick
+      }, [
+        createElementVNode("tbody", {
+          ref_key: "tbodyRef",
+          ref: tbodyRef
+        }, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(3, (_, i) => {
+            return createElementVNode("tr", { key: i }, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(4, (__, j) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: i + "_" + j
+                }, [
+                  i * 4 + j < 10 ? (openBlock(), createElementBlock("td", {
+                    key: 0,
+                    ref_for: true,
+                    ref: (el) => isSelectedCell(unref(startYear) + i * 4 + j) && (currentCellRef.value = el),
+                    class: normalizeClass(["available", getCellKls(unref(startYear) + i * 4 + j)]),
+                    "aria-selected": `${isSelectedCell(unref(startYear) + i * 4 + j)}`,
+                    tabindex: isSelectedCell(unref(startYear) + i * 4 + j) ? 0 : -1,
+                    onKeydown: [
+                      withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
+                      withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
+                    ]
+                  }, [
+                    createElementVNode("span", _hoisted_3, toDisplayString(unref(startYear) + i * 4 + j), 1)
+                  ], 42, _hoisted_2)) : (openBlock(), 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 openBlock(), createElementBlock("table", {
-    role: "grid",
-    "aria-label": _ctx.t("el.datepicker.yearTablePrompt"),
-    class: normalizeClass(_ctx.ns.b()),
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))
-  }, [
-    createElementVNode("tbody", _hoisted_2, [
-      (openBlock(), createElementBlock(Fragment, null, renderList(3, (_, i) => {
-        return createElementVNode("tr", { key: i }, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(4, (__, j) => {
-            return openBlock(), createElementBlock(Fragment, {
-              key: i + "_" + j
-            }, [
-              i * 4 + j < 10 ? (openBlock(), createElementBlock("td", {
-                key: 0,
-                ref_for: true,
-                ref: (el) => _ctx.isSelectedCell(_ctx.startYear + i * 4 + j) && (_ctx.currentCellRef = el),
-                class: 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] = withKeys(withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["space"])),
-                  _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["enter"]))
-                ]
-              }, [
-                createElementVNode("span", _hoisted_4, toDisplayString(_ctx.startYear + i * 4 + j), 1)
-              ], 42, _hoisted_3)) : (openBlock(), createElementBlock("td", _hoisted_5))
-            ], 64);
-          }), 64))
-        ]);
-      }), 64))
-    ], 512)
-  ], 10, _hoisted_1);
-}
-var YearTable = /* @__PURE__ */ _export_sfc(_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__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-year-table.vue"]]);
 
 export { YearTable as default };
 //# sourceMappingURL=basic-year-table2.mjs.map

package/es/components/date-picker/src/date-picker-com/basic-year-table2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"basic-year-table2.mjs","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":["_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_withKeys","_withModifiers","_createElementVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"basic-year-table2.mjs","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":[],"mappings":"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"}

package/es/components/date-picker/src/date-picker-com/panel-date-pick2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, useAttrs, useSlots, inject, toRef, ref, computed, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withDirectives, withCtx, vShow, withKeys, createBlock, createTextVNode } from 'vue';
+import { defineComponent, useAttrs, useSlots, inject, toRef, ref, computed, nextTick, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withDirectives, withCtx, vShow, withKeys, createBlock, createTextVNode } from 'vue';
 import dayjs from 'dayjs';
 import { ElButton } from '../../../button/index2.mjs';
 import '../../../../directives/index2.mjs';
@@ -27,10 +27,8 @@ import ClickOutside from '../../../../directives/click-outside/index2.mjs';
 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__ */ defineComponent({
   props: panelDatePickProps,
   emits: ["pick", "set-picker-option", "panel-change"],
@@ -98,28 +96,15 @@ const _sfc_main = /* @__PURE__ */ 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 = ref("date");
@@ -157,16 +142,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const keyboardMode = computed(() => {
       return selectionMode.value === "date" ? currentView.value : selectionMode.value;
     });
-    watch(() => selectionMode.value, (val) => {
-      if (["month", "year"].includes(val)) {
-        currentView.value = val;
-        return;
-      }
-      currentView.value = "date";
-    }, { immediate: true });
-    watch(() => currentView.value, () => {
-      popper == null ? void 0 : popper.updatePopper();
-    });
     const hasShortcuts = computed(() => !!shortcuts.length);
     const handleMonthPick = async (month2) => {
       innerDate.value = innerDate.value.startOf("month").month(month2);
@@ -197,13 +172,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       handlePanelChange("year");
     };
-    const showMonthPicker = async () => {
-      currentView.value = "month";
-      await nextTick();
-      handleFocusPicker();
-    };
-    const showYearPicker = async () => {
-      currentView.value = "year";
+    const showPicker = async (view) => {
+      currentView.value = view;
       await nextTick();
       handleFocusPicker();
     };
@@ -260,8 +230,19 @@ const _sfc_main = /* @__PURE__ */ 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) {
@@ -271,7 +252,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleVisibleTimeChange = (value) => {
       const newDate = dayjs(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);
@@ -283,7 +265,8 @@ const _sfc_main = /* @__PURE__ */ 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);
       }
@@ -311,7 +294,6 @@ const _sfc_main = /* @__PURE__ */ 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(EVENT_CODE.down);
@@ -320,7 +302,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const handleKeydownTable = (event) => {
       const { code } = event;
-      const list = [
+      const validCode = [
         EVENT_CODE.up,
         EVENT_CODE.down,
         EVENT_CODE.left,
@@ -330,7 +312,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         EVENT_CODE.pageUp,
         EVENT_CODE.pageDown
       ];
-      if (list.includes(code)) {
+      if (validCode.includes(code)) {
         handleKeyControl(code);
         event.stopPropagation();
         event.preventDefault();
@@ -395,10 +377,16 @@ const _sfc_main = /* @__PURE__ */ 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]);
+    watch(() => selectionMode.value, (val) => {
+      if (["month", "year"].includes(val)) {
+        currentView.value = val;
+        return;
+      }
+      currentView.value = "date";
+    }, { immediate: true });
+    watch(() => currentView.value, () => {
+      popper == null ? void 0 : popper.updatePopper();
+    });
     watch(() => defaultValue.value, (val) => {
       if (val) {
         innerDate.value = getDefaultValue();
@@ -415,6 +403,10 @@ const _sfc_main = /* @__PURE__ */ 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 openBlock(), createElementBlock("div", {
         class: normalizeClass([
@@ -498,7 +490,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   type: "button",
                   "aria-label": unref(t)(`el.datepicker.prevYear`),
                   class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
-                  onClick: prevYear_
+                  onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
                 }, [
                   createVNode(unref(ElIcon), null, {
                     default: withCtx(() => [
@@ -511,7 +503,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   type: "button",
                   "aria-label": unref(t)(`el.datepicker.prevMonth`),
                   class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
-                  onClick: prevMonth_
+                  onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
                 }, [
                   createVNode(unref(ElIcon), null, {
                     default: withCtx(() => [
@@ -528,9 +520,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(unref(dpNs).e("header-label")),
                 "aria-live": "polite",
                 tabindex: "0",
-                onKeydown: withKeys(showYearPicker, ["enter"]),
-                onClick: showYearPicker
-              }, toDisplayString(unref(yearLabel)), 43, _hoisted_4),
+                onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => showPicker("year"), ["enter"])),
+                onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
+              }, toDisplayString(unref(yearLabel)), 35),
               withDirectives(createElementVNode("span", {
                 role: "button",
                 "aria-live": "polite",
@@ -539,9 +531,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   unref(dpNs).e("header-label"),
                   { active: currentView.value === "month" }
                 ]),
-                onKeydown: withKeys(showMonthPicker, ["enter"]),
-                onClick: showMonthPicker
-              }, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 43, _hoisted_5), [
+                onKeydown: _cache[6] || (_cache[6] = withKeys(($event) => showPicker("month"), ["enter"])),
+                onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
+              }, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 35), [
                 [vShow, currentView.value === "date"]
               ]),
               createElementVNode("span", {
@@ -551,7 +543,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   type: "button",
                   "aria-label": unref(t)(`el.datepicker.nextMonth`),
                   class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
-                  onClick: nextMonth_
+                  onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
                 }, [
                   createVNode(unref(ElIcon), null, {
                     default: withCtx(() => [
@@ -559,14 +551,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_6), [
+                ], 10, _hoisted_4), [
                   [vShow, currentView.value === "date"]
                 ]),
                 createElementVNode("button", {
                   type: "button",
                   "aria-label": unref(t)(`el.datepicker.nextYear`),
                   class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
-                  onClick: nextYear_
+                  onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
                 }, [
                   createVNode(unref(ElIcon), null, {
                     default: withCtx(() => [
@@ -574,7 +566,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_7)
+                ], 10, _hoisted_5)
               ], 2)
             ], 2), [
               [vShow, currentView.value !== "time"]