@varlet/ui 3.18.1 → 3.19.0

package/es/date-picker/DatePicker.mjs

@@ -1,54 +1,42 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { call, doubleRaf, error, isArray, toNumber } from "@varlet/shared";
-import dayjs from "dayjs/esm/index.js";
-import { computed, defineComponent, ref, watch } from "vue";
+import { call, error, isArray, toNumber, uniq } from "@varlet/shared";
+import { computed, defineComponent, reactive, ref, watch } from "vue";
 import { t } from "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
-import { padStart } from "../utils/shared.mjs";
+import { createDayjs, padStart } from "../utils/shared.mjs";
 import {
-  MONTH_LIST,
-  props,
-  WEEK_HEADER
-} from "./props.mjs";
-import DayPickerPanel from "./src/day-picker-panel.mjs";
-import MonthPickerPanel from "./src/month-picker-panel.mjs";
-import YearPickerPanel from "./src/year-picker-panel.mjs";
+  DatePickerFormats,
+  DatePickerTypes,
+  DatePickerUnits,
+  MonthList,
+  ShiftDirections,
+  WeekHeader
+} from "./constants.mjs";
+import DayPickerPanel from "./DayPickerPanel.mjs";
+import MonthPickerPanel from "./MonthPickerPanel.mjs";
+import PanelHeader from "./PanelHeader.mjs";
+import { props } from "./props.mjs";
+import YearPickerPanel from "./YearPickerPanel.mjs";
 const { name, n, classes } = createNamespace("date-picker");
-import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
+const dayjs = createDayjs();
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, withModifiers as _withModifiers } from "vue";
 function __render__(_ctx, _cache) {
-  var _a;
+  const _component_panel_header = _resolveComponent("panel-header");
   const _component_year_picker_panel = _resolveComponent("year-picker-panel");
   const _component_month_picker_panel = _resolveComponent("month-picker-panel");
   const _component_day_picker_panel = _resolveComponent("day-picker-panel");
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.formatElevation(_ctx.elevation, 2)))
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.formatElevation(_ctx.elevation, 2), [!_ctx.showTitle, _ctx.n("--no-title")])),
+      onPointerdownCapture: _cache[4] || (_cache[4] = _withModifiers(() => {
+      }, ["prevent"]))
     },
     [
-      _createElementVNode(
+      _ctx.showTitle ? (_openBlock(), _createElementBlock(
         "div",
         {
+          key: 0,
           class: _normalizeClass(_ctx.n("title")),
           style: _normalizeStyle({ background: _ctx.titleColor || _ctx.color })
         },
@@ -64,29 +52,10 @@ function __render__(_ctx, _cache) {
                 {
                   class: _normalizeClass(_ctx.n("title-hint"))
                 },
-                _toDisplayString((_a = _ctx.hint) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("datePickerHint")),
+                _toDisplayString(_ctx.titleHint),
                 3
                 /* TEXT, CLASS */
-              ),
-              _ctx.type !== "year" ? (_openBlock(), _createElementBlock(
-                "div",
-                {
-                  key: 0,
-                  class: _normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
-                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
-                },
-                [
-                  _renderSlot(_ctx.$slots, "year", { year: _ctx.displayYear }, () => [
-                    _createTextVNode(
-                      _toDisplayString(_ctx.displayYear),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ],
-                2
-                /* CLASS */
-              )) : _createCommentVNode("v-if", true)
+              )
             ],
             2
             /* CLASS */
@@ -97,104 +66,104 @@ function __render__(_ctx, _cache) {
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("title-date"),
-                  [!_ctx.isYearPanel || _ctx.type === "year", _ctx.n("title-date--active")],
+                  [!_ctx.showYearPanel || _ctx.type === _ctx.DatePickerTypes.Year, _ctx.n("title-date--active")],
                   [_ctx.range, _ctx.n("title-date--range")]
                 )
               ),
-              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clickEl("date"))
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.switchPanel(_ctx.DatePickerTypes.Date))
             },
             [
               _createVNode(_Transition, {
                 name: _ctx.multiple ? "" : `${_ctx.n()}${_ctx.reverse ? "-reverse" : ""}-translatey`
               }, {
                 default: _withCtx(() => [
-                  _ctx.type === "year" ? (_openBlock(), _createElementBlock("div", {
-                    key: `${_ctx.chooseYear}`
+                  _ctx.type === _ctx.DatePickerTypes.Year ? (_openBlock(), _createElementBlock("div", {
+                    key: `${_ctx.selectionState.selectedYear}`
                   }, [
                     _ctx.range ? _renderSlot(_ctx.$slots, "range", {
                       key: 0,
-                      choose: _ctx.getChoose.chooseRangeYear
+                      choose: _ctx.selectionState.selectedRangeYears
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getYearTitle),
+                        _toDisplayString(_ctx.yearTitle),
                         1
                         /* TEXT */
                       )
                     ]) : _ctx.multiple ? _renderSlot(_ctx.$slots, "multiple", {
                       key: 1,
-                      choose: _ctx.getChoose.chooseYears
+                      choose: _ctx.selectionState.selectedYears
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getYearTitle),
+                        _toDisplayString(_ctx.yearTitle),
                         1
                         /* TEXT */
                       )
                     ]) : _renderSlot(_ctx.$slots, "year", {
                       key: 2,
-                      year: _ctx.chooseYear
+                      year: _ctx.selectionState.selectedYear
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getYearTitle),
+                        _toDisplayString(_ctx.yearTitle),
                         1
                         /* TEXT */
                       )
                     ])
-                  ])) : _ctx.type === "month" ? (_openBlock(), _createElementBlock("div", {
-                    key: `${_ctx.chooseYear}${_ctx.chooseMonth}`
+                  ])) : _ctx.type === _ctx.DatePickerTypes.Month ? (_openBlock(), _createElementBlock("div", {
+                    key: `${_ctx.selectionState.selectedYear}${_ctx.selectionState.selectedMonth}`
                   }, [
                     _ctx.range ? _renderSlot(_ctx.$slots, "range", {
                       key: 0,
-                      choose: _ctx.getChoose.chooseRangeMonth
+                      choose: _ctx.selectionState.selectedRangeMonths
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getMonthTitle),
+                        _toDisplayString(_ctx.monthTitle),
                         1
                         /* TEXT */
                       )
                     ]) : _ctx.multiple ? _renderSlot(_ctx.$slots, "multiple", {
                       key: 1,
-                      choose: _ctx.getChoose.chooseMonths
+                      choose: _ctx.selectionState.selectedMonths
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getMonthTitle),
+                        _toDisplayString(_ctx.monthTitle),
                         1
                         /* TEXT */
                       )
                     ]) : _renderSlot(_ctx.$slots, "month", {
                       key: 2,
-                      month: _ctx.chooseMonth,
-                      year: _ctx.chooseYear
+                      month: _ctx.selectionState.selectedMonth,
+                      year: _ctx.selectionState.selectedYear
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getMonthTitle),
+                        _toDisplayString(_ctx.monthTitle),
                         1
                         /* TEXT */
                       )
                     ])
                   ])) : (_openBlock(), _createElementBlock("div", {
-                    key: `${_ctx.chooseYear}${_ctx.chooseMonth}${_ctx.chooseDay}`
+                    key: `${_ctx.selectionState.selectedYear}${_ctx.selectionState.selectedMonth}${_ctx.selectionState.selectedDay}`
                   }, [
                     _ctx.range ? _renderSlot(_ctx.$slots, "range", {
                       key: 0,
-                      choose: _ctx.formatRange
+                      choose: _ctx.formattedRangeDays
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getDateTitle),
+                        _toDisplayString(_ctx.dateTitle),
                         1
                         /* TEXT */
                       )
                     ]) : _ctx.multiple ? _renderSlot(_ctx.$slots, "multiple", {
                       key: 1,
-                      choose: _ctx.getChoose.chooseDays
+                      choose: _ctx.selectionState.selectedDays
                     }, () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getDateTitle),
+                        _toDisplayString(_ctx.dateTitle),
                         1
                         /* TEXT */
                       )
-                    ]) : _renderSlot(_ctx.$slots, "date", _normalizeProps(_mergeProps({ key: 2 }, _ctx.slotProps)), () => [
+                    ]) : _renderSlot(_ctx.$slots, "date", _normalizeProps(_mergeProps({ key: 2 }, _ctx.dateSlotProps)), () => [
                       _createTextVNode(
-                        _toDisplayString(_ctx.getDateTitle),
+                        _toDisplayString(_ctx.dateTitle),
                         1
                         /* TEXT */
                       )
@@ -211,61 +180,73 @@ function __render__(_ctx, _cache) {
         ],
         6
         /* CLASS, STYLE */
-      ),
+      )) : _createCommentVNode("v-if", true),
       _createElementVNode(
         "div",
         {
-          class: _normalizeClass(_ctx.n("body")),
-          onTouchstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
-          onTouchmove: _cache[3] || (_cache[3] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
-          onTouchend: _cache[4] || (_cache[4] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+          class: _normalizeClass(_ctx.n("body"))
         },
         [
-          _createVNode(_Transition, {
-            name: `${_ctx.n()}-panel-fade`
-          }, {
-            default: _withCtx(() => [
-              _ctx.getPanelType === "year" ? (_openBlock(), _createBlock(_component_year_picker_panel, {
-                key: 0,
-                ref: "yearPanelEl",
-                choose: _ctx.getChoose,
-                current: _ctx.currentDate,
-                "component-props": _ctx.componentProps,
-                preview: _ctx.previewYear,
-                onChooseYear: _ctx.getChooseYear
-              }, null, 8, ["choose", "current", "component-props", "preview", "onChooseYear"])) : _ctx.getPanelType === "month" ? (_openBlock(), _createBlock(_component_month_picker_panel, {
-                key: 1,
-                ref: "monthPanelEl",
-                current: _ctx.currentDate,
-                choose: _ctx.getChoose,
-                preview: _ctx.getPreview,
-                "click-year": () => _ctx.clickEl("year"),
-                "component-props": _ctx.componentProps,
-                onChooseMonth: _ctx.getChooseMonth,
-                onCheckPreview: _ctx.checkPreview
-              }, null, 8, ["current", "choose", "preview", "click-year", "component-props", "onChooseMonth", "onCheckPreview"])) : _ctx.getPanelType === "date" ? (_openBlock(), _createBlock(_component_day_picker_panel, {
-                key: 2,
-                ref: "dayPanelEl",
-                current: _ctx.currentDate,
-                choose: _ctx.getChoose,
-                preview: _ctx.getPreview,
-                "component-props": _ctx.componentProps,
-                "click-month": () => _ctx.clickEl("month"),
-                onChooseDay: _ctx.getChooseDay,
-                onCheckPreview: _ctx.checkPreview
-              }, null, 8, ["current", "choose", "preview", "component-props", "click-month", "onChooseDay", "onCheckPreview"])) : _createCommentVNode("v-if", true)
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["name"])
+          _ctx.panelType ? (_openBlock(), _createBlock(_component_panel_header, {
+            key: 0,
+            type: _ctx.headerType,
+            date: _ctx.headerPreview,
+            "show-panel-toggle": _ctx.type === _ctx.DatePickerTypes.Date && _ctx.panelType !== _ctx.DatePickerTypes.Date,
+            onOpenDatePanel: _cache[1] || (_cache[1] = ($event) => _ctx.switchPanel(_ctx.DatePickerTypes.Date)),
+            onOpenYearPanel: _cache[2] || (_cache[2] = ($event) => _ctx.switchPanel(_ctx.DatePickerTypes.Year)),
+            onOpenMonthPanel: _cache[3] || (_cache[3] = ($event) => _ctx.switchPanel(_ctx.DatePickerTypes.Month)),
+            onShiftYearPreview: _ctx.shiftDatePanelYearPreview,
+            onShiftPreview: _ctx.shiftCurrentPanelPreview
+          }, null, 8, ["type", "date", "show-panel-toggle", "onShiftYearPreview", "onShiftPreview"])) : _createCommentVNode("v-if", true),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("panel"))
+            },
+            [
+              _createVNode(_Transition, {
+                name: `${_ctx.n()}-panel-fade`
+              }, {
+                default: _withCtx(() => [
+                  _ctx.panelType === _ctx.DatePickerTypes.Year ? (_openBlock(), _createBlock(_component_year_picker_panel, {
+                    key: 0,
+                    ref: "yearPanelEl",
+                    "panel-props": _ctx.panelProps,
+                    selection: _ctx.selectionState,
+                    preview: _ctx.previewYear,
+                    onChooseYear: _ctx.selectYearFromPanel
+                  }, null, 8, ["panel-props", "selection", "preview", "onChooseYear"])) : _ctx.panelType === _ctx.DatePickerTypes.Month ? (_openBlock(), _createBlock(_component_month_picker_panel, {
+                    key: 1,
+                    ref: "monthPanelEl",
+                    selection: _ctx.selectionState,
+                    preview: _ctx.previewState,
+                    "panel-props": _ctx.panelProps,
+                    onChooseMonth: _ctx.selectMonthFromPanel
+                  }, null, 8, ["selection", "preview", "panel-props", "onChooseMonth"])) : _ctx.panelType === _ctx.DatePickerTypes.Date ? (_openBlock(), _createBlock(_component_day_picker_panel, {
+                    key: 2,
+                    ref: "dayPanelEl",
+                    current: _ctx.currentDate,
+                    selection: _ctx.selectionState,
+                    preview: _ctx.previewState,
+                    "panel-props": _ctx.panelProps,
+                    onChooseDay: _ctx.selectDayFromPanel
+                  }, null, 8, ["current", "selection", "preview", "panel-props", "onChooseDay"])) : _createCommentVNode("v-if", true)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["name"])
+            ],
+            2
+            /* CLASS */
+          )
         ],
-        34
-        /* CLASS, NEED_HYDRATION */
+        2
+        /* CLASS */
       ),
       _ctx.$slots.actions ? (_openBlock(), _createElementBlock(
         "div",
         {
-          key: 0,
+          key: 1,
           class: _normalizeClass(_ctx.n("actions"))
         },
         [
@@ -275,8 +256,8 @@ function __render__(_ctx, _cache) {
         /* CLASS */
       )) : _createCommentVNode("v-if", true)
     ],
-    2
-    /* CLASS */
+    34
+    /* CLASS, NEED_HYDRATION */
   );
 }
 const __sfc__ = defineComponent({
@@ -284,33 +265,37 @@ const __sfc__ = defineComponent({
   components: {
     MonthPickerPanel,
     YearPickerPanel,
-    DayPickerPanel
+    DayPickerPanel,
+    PanelHeader
   },
   props,
   setup(props2) {
     const { t: pt } = injectLocaleProvider();
-    const currentDate = dayjs().format("YYYY-MM-D");
+    const currentDate = dayjs().format(DatePickerFormats.Day);
     const [currentYear, currentMonth] = currentDate.split("-");
-    const monthDes = MONTH_LIST.find((month) => month === currentMonth);
-    const isYearPanel = ref(false);
-    const isMonthPanel = ref(false);
-    const rangeDone = ref(true);
-    const chooseMonth = ref();
-    const chooseYear = ref();
-    const chooseDay = ref();
-    const previewMonth = ref(monthDes);
+    const currentMonthValue = MonthList.find((month) => month === currentMonth);
+    const showYearPanel = ref(false);
+    const showMonthPanel = ref(false);
+    const rangeSelectionComplete = ref(true);
+    const rangeSelecting = computed(() => props2.range && !rangeSelectionComplete.value);
+    const previewMonth = ref(currentMonthValue);
     const previewYear = ref(currentYear);
     const reverse = ref(false);
-    const chooseYears = ref([]);
-    const chooseMonths = ref([]);
-    const chooseDays = ref([]);
-    const chooseRangeYear = ref([]);
-    const chooseRangeMonth = ref([]);
-    const chooseRangeDay = ref([]);
     const yearPanelEl = ref(null);
     const monthPanelEl = ref(null);
     const dayPanelEl = ref(null);
-    const componentProps = computed(() => ({
+    const selectionState = reactive({
+      selectedMonth: void 0,
+      selectedYear: void 0,
+      selectedDay: void 0,
+      selectedYears: [],
+      selectedMonths: [],
+      selectedDays: [],
+      selectedRangeYears: [],
+      selectedRangeMonths: [],
+      selectedRangeDays: []
+    });
+    const panelProps = computed(() => ({
       allowedDates: props2.allowedDates,
       type: props2.type,
       color: props2.color,
@@ -322,289 +307,343 @@ const __sfc__ = defineComponent({
       range: props2.range,
       buttonElevation: props2.buttonElevation
     }));
-    const getChoose = computed(() => ({
-      chooseMonth: chooseMonth.value,
-      chooseYear: chooseYear.value,
-      chooseDay: chooseDay.value,
-      chooseYears: chooseYears.value,
-      chooseMonths: chooseMonths.value,
-      chooseDays: chooseDays.value,
-      chooseRangeYear: chooseRangeYear.value,
-      chooseRangeMonth: chooseRangeMonth.value,
-      chooseRangeDay: chooseRangeDay.value
-    }));
-    const getPreview = computed(() => ({
+    const previewState = computed(() => ({
       previewMonth: previewMonth.value,
       previewYear: previewYear.value
     }));
-    const displayYear = computed(() => previewYear.value || chooseYear.value || "");
-    const getYearTitle = computed(() => {
+    const panelType = computed(() => {
+      if (props2.type === DatePickerTypes.Year || showYearPanel.value) {
+        return DatePickerTypes.Year;
+      }
+      if (props2.type === DatePickerTypes.Month || showMonthPanel.value) {
+        return DatePickerTypes.Month;
+      }
+      if (props2.type === DatePickerTypes.Date) {
+        return DatePickerTypes.Date;
+      }
+      return void 0;
+    });
+    const headerType = computed(
+      () => panelType.value === DatePickerTypes.Date ? DatePickerUnits.Day : panelType.value
+    );
+    const headerPreview = computed(
+      () => panelType.value === DatePickerTypes.Year ? {
+        previewYear: previewYear.value
+      } : previewState.value
+    );
+    const titleHint = computed(() => {
+      var _a;
+      return (_a = props2.hint) != null ? _a : getDefaultHint();
+    });
+    const yearTitle = computed(() => {
       var _a;
       const { multiple, range } = props2;
       if (range) {
-        return chooseRangeYear.value.length ? `${chooseRangeYear.value[0]} ~ ${chooseRangeYear.value[1]}` : "";
+        return selectionState.selectedRangeYears.length ? selectionState.selectedRangeYears.join(" ~ ") : "";
       }
-      return multiple ? `${chooseYears.value.length}${(pt || t)("datePickerSelected")}` : (_a = chooseYear.value) != null ? _a : "";
+      return multiple ? `${selectionState.selectedYears.length}${(pt || t)("datePickerSelected")}` : (_a = selectionState.selectedYear) != null ? _a : "";
     });
-    const getMonthTitle = computed(() => {
+    const monthTitle = computed(() => {
       var _a, _b;
       const { multiple, range } = props2;
       if (range) {
-        return chooseRangeMonth.value.length ? `${chooseRangeMonth.value[0]} ~ ${chooseRangeMonth.value[1]}` : "";
+        return selectionState.selectedRangeMonths.length ? selectionState.selectedRangeMonths.join(" ~ ") : "";
       }
       let monthName = "";
-      if (chooseMonth.value) {
-        monthName = (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[chooseMonth.value].name) != null ? _b : "";
+      if (selectionState.selectedMonth) {
+        monthName = (_b = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[selectionState.selectedMonth].name) != null ? _b : "";
       }
-      return multiple ? `${chooseMonths.value.length}${(pt || t)("datePickerSelected")}` : monthName;
+      return multiple ? `${selectionState.selectedMonths.length}${(pt || t)("datePickerSelected")}` : monthName;
     });
-    const getDateTitle = computed(() => {
+    const dateTitle = computed(() => {
       var _a, _b, _c, _d;
       const { multiple, range } = props2;
       if (range) {
-        const formatRangeDays = chooseRangeDay.value.map((date) => dayjs(date).format("YYYY-MM-DD"));
-        return formatRangeDays.length ? `${formatRangeDays[0]} ~ ${formatRangeDays[1]}` : "";
+        const formattedDays = selectionState.selectedRangeDays.map(
+          (date) => dayjs(date).format(DatePickerFormats.DayPadded)
+        );
+        return formattedDays.length ? formattedDays.join(" ~ ") : "";
       }
       if (multiple) {
-        return `${chooseDays.value.length}${(pt || t)("datePickerSelected")}`;
+        return `${selectionState.selectedDays.length}${(pt || t)("datePickerSelected")}`;
       }
-      if (!chooseYear.value || !chooseMonth.value || !chooseDay.value) {
+      if (!selectionState.selectedYear || !selectionState.selectedMonth || !selectionState.selectedDay) {
         return "";
       }
-      const weekIndex = dayjs(`${chooseYear.value}-${chooseMonth.value}-${chooseDay.value}`).day();
-      const week = WEEK_HEADER.find((value) => value === `${weekIndex}`);
+      const weekIndex = dayjs(
+        `${selectionState.selectedYear}-${selectionState.selectedMonth}-${selectionState.selectedDay}`
+      ).day();
+      const week = WeekHeader.find((value) => value === `${weekIndex}`);
       const weekName = (_b = (_a = (pt || t)("datePickerWeekDict")) == null ? void 0 : _a[week].name) != null ? _b : "";
-      const monthName = (_d = (_c = (pt || t)("datePickerMonthDict")) == null ? void 0 : _c[chooseMonth.value].name) != null ? _d : "";
-      const showDay = padStart(chooseDay.value, 2, "0");
+      const monthName = (_d = (_c = (pt || t)("datePickerMonthDict")) == null ? void 0 : _c[selectionState.selectedMonth].name) != null ? _d : "";
+      const showDay = padStart(selectionState.selectedDay, 2, "0");
       if ((pt || t)("lang") === "zh-CN") {
-        return `${chooseMonth.value}-${showDay} ${weekName.slice(0, 3)}`;
+        return `${selectionState.selectedMonth}-${showDay} ${weekName.slice(0, 3)}`;
       }
-      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${chooseDay.value}`;
+      return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${selectionState.selectedDay}`;
     });
-    const getPanelType = computed(() => {
-      if (props2.type === "year" || isYearPanel.value) {
-        return "year";
-      }
-      if (props2.type === "month" || isMonthPanel.value) {
-        return "month";
-      }
-      if (props2.type === "date") {
-        return "date";
-      }
-      return "";
-    });
-    const isUntouchable = computed(() => !props2.touchable || !getPanelType.value);
-    const slotProps = computed(() => {
+    const dateSlotProps = computed(() => {
       var _a, _b;
-      const weekIndex = dayjs(`${chooseYear.value}-${chooseMonth.value}-${chooseDay.value}`).day();
-      const date = chooseDay.value ? padStart(chooseDay.value, 2, "0") : "";
+      const weekIndex = dayjs(
+        `${selectionState.selectedYear}-${selectionState.selectedMonth}-${selectionState.selectedDay}`
+      ).day();
+      const day = selectionState.selectedDay ? padStart(selectionState.selectedDay, 2, "0") : "";
       return {
         week: `${weekIndex}`,
-        year: (_a = chooseYear.value) != null ? _a : "",
-        month: (_b = chooseMonth.value) != null ? _b : "",
-        date
+        year: (_a = selectionState.selectedYear) != null ? _a : "",
+        month: (_b = selectionState.selectedMonth) != null ? _b : "",
+        date: day
       };
     });
-    const formatRange = computed(
-      () => getChoose.value.chooseRangeDay.map((choose) => dayjs(choose).format("YYYY-MM-DD"))
+    const formattedRangeDays = computed(
+      () => selectionState.selectedRangeDays.map((date) => dayjs(date).format(DatePickerFormats.DayPadded))
     );
-    const isSameYear = computed(() => chooseYear.value === previewYear.value);
-    const isSameMonth = computed(() => chooseMonth.value === previewMonth.value);
-    let startX = 0;
-    let startY = 0;
-    let checkType = "";
-    let touchDirection;
+    const selectedYearInPreview = computed(() => selectionState.selectedYear === previewYear.value);
+    const selectedMonthInPreview = computed(() => selectionState.selectedMonth === previewMonth.value);
+    let shouldKeepPreviewOnModelValueChange = false;
     watch(
       () => props2.modelValue,
-      (value) => {
-        if (!checkValue()) {
-          return;
-        }
-        if (props2.range) {
-          if (!isArray(value)) {
-            return;
-          }
-          rangeDone.value = value.length !== 1;
-          rangeInit(value, props2.type);
-        } else if (props2.multiple) {
-          if (!isArray(value)) {
-            return;
-          }
-          multipleInit(value, props2.type);
-        } else {
-          dateInit(getSingleDate(value));
-        }
+      () => {
+        const syncPreview = !shouldKeepPreviewOnModelValueChange;
+        shouldKeepPreviewOnModelValueChange = false;
+        syncFromModelValue(syncPreview);
       },
       { immediate: true }
     );
-    watch(getPanelType, resetState);
-    function clickEl(type) {
-      if (type === "year") {
-        isYearPanel.value = true;
-      } else if (type === "month") {
-        isMonthPanel.value = true;
-      } else {
-        isYearPanel.value = false;
-        isMonthPanel.value = false;
-      }
-    }
-    function handleTouchstart(event) {
-      if (isUntouchable.value) {
+    function syncFromModelValue(syncPreview = true) {
+      if (!checkValue()) {
         return;
       }
-      const { clientX, clientY } = event.touches[0];
-      startX = clientX;
-      startY = clientY;
+      const { modelValue, type: pickerType } = props2;
+      if (props2.range) {
+        if (!isArray(modelValue)) {
+          return;
+        }
+        rangeSelectionComplete.value = modelValue.length !== 1;
+        syncRangeValue(modelValue, pickerType, syncPreview);
+        return;
+      }
+      if (props2.multiple) {
+        if (!isArray(modelValue)) {
+          return;
+        }
+        syncMultipleValue(modelValue, pickerType, syncPreview);
+        return;
+      }
+      syncSingleValue(modelValue, syncPreview);
+    }
+    function switchPanel(targetPanelType) {
+      if (targetPanelType === DatePickerTypes.Year) {
+        showYearPanel.value = true;
+        showMonthPanel.value = false;
+        return;
+      }
+      if (targetPanelType === DatePickerTypes.Month) {
+        showYearPanel.value = false;
+        showMonthPanel.value = true;
+        return;
+      }
+      showYearPanel.value = false;
+      showMonthPanel.value = false;
+    }
+    function getDefaultHint() {
+      if (props2.type === DatePickerTypes.Year) {
+        return (pt || t)("datePickerYearHint");
+      }
+      if (props2.type === DatePickerTypes.Month) {
+        return (pt || t)("datePickerMonthHint");
+      }
+      return (pt || t)("datePickerHint");
     }
-    function getDirection(x, y) {
-      return x >= y && x > 20 ? "x" : "y";
+    function getActivePanelRef() {
+      return panelType.value === DatePickerTypes.Year ? yearPanelEl : panelType.value === DatePickerTypes.Month ? monthPanelEl : dayPanelEl;
+    }
+    function shiftCurrentPanelPreview(direction) {
+      getActivePanelRef().value.shiftPreview(direction);
+      if (panelType.value === DatePickerTypes.Date) {
+        shiftPreview(DatePickerUnits.Month, direction);
+      } else if (panelType.value === DatePickerTypes.Month) {
+        shiftPreview(DatePickerUnits.Year, direction);
+      }
     }
-    function handleTouchmove(event) {
-      if (isUntouchable.value) {
+    function shiftDatePanelYearPreview(direction) {
+      dayPanelEl.value.shiftYearPreview(direction);
+      shiftPreview(DatePickerUnits.Year, direction);
+    }
+    function getFormatByType(pickerType) {
+      return pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.Day;
+    }
+    function getRangeValuesByType(pickerType) {
+      return pickerType === DatePickerTypes.Year ? selectionState.selectedRangeYears : pickerType === DatePickerTypes.Month ? selectionState.selectedRangeMonths : selectionState.selectedRangeDays;
+    }
+    function setRangeValuesByType(pickerType, rangeValues) {
+      if (pickerType === DatePickerTypes.Year) {
+        selectionState.selectedRangeYears = rangeValues;
+        return;
+      }
+      if (pickerType === DatePickerTypes.Month) {
+        selectionState.selectedRangeMonths = rangeValues;
         return;
       }
-      const { clientX, clientY } = event.touches[0];
-      const x = clientX - startX;
-      const y = clientY - startY;
-      touchDirection = getDirection(Math.abs(x), Math.abs(y));
-      checkType = x > 0 ? "prev" : "next";
+      selectionState.selectedRangeDays = rangeValues;
     }
-    function handleTouchend() {
-      return __async(this, null, function* () {
-        if (isUntouchable.value || touchDirection !== "x") {
-          return;
-        }
-        const componentRef = getPanelType.value === "year" ? yearPanelEl : getPanelType.value === "month" ? monthPanelEl : dayPanelEl;
-        yield doubleRaf();
-        componentRef.value.forwardRef(checkType);
-        resetState();
-      });
-    }
-    function updateRange(date, type) {
-      const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
-      rangeDate.value = rangeDone.value ? [date, date] : [rangeDate.value[0], date];
-      rangeDone.value = !rangeDone.value;
-      if (rangeDone.value) {
-        const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1]);
-        const date2 = isChangeOrder ? [rangeDate.value[1], rangeDate.value[0]] : [...rangeDate.value];
-        call(props2["onUpdate:modelValue"], date2);
-        call(props2.onChange, date2);
-      }
-    }
-    function updateMultiple(date, type) {
-      const multipleDates = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
-      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-DD";
-      const formatDates = multipleDates.value.map((date2) => dayjs(date2).format(formatType));
-      const index = formatDates.findIndex((choose) => choose === date);
-      if (index === -1) {
-        formatDates.push(date);
-      } else {
-        formatDates.splice(index, 1);
-      }
-      call(props2["onUpdate:modelValue"], formatDates);
-      call(props2.onChange, formatDates);
-    }
-    function getReverse(dateType, date) {
-      if (!chooseYear.value || !chooseMonth.value) {
+    function getMultipleValuesByType(pickerType) {
+      return pickerType === DatePickerTypes.Year ? selectionState.selectedYears : pickerType === DatePickerTypes.Month ? selectionState.selectedMonths : selectionState.selectedDays;
+    }
+    function setMultipleValuesByType(pickerType, multipleValues) {
+      if (pickerType === DatePickerTypes.Year) {
+        selectionState.selectedYears = multipleValues;
+        return;
+      }
+      if (pickerType === DatePickerTypes.Month) {
+        selectionState.selectedMonths = multipleValues;
+        return;
+      }
+      selectionState.selectedDays = multipleValues;
+    }
+    function emitModelValueChange(modelValue) {
+      call(props2["onUpdate:modelValue"], modelValue);
+      call(props2.onChange, modelValue);
+    }
+    function getPreviewDayOfMonth() {
+      return props2.type === DatePickerTypes.Date && selectionState.selectedDay ? toNumber(selectionState.selectedDay) : void 0;
+    }
+    function emitPreview() {
+      call(props2.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value), getPreviewDayOfMonth());
+    }
+    function updateRange(selectedValue, pickerType) {
+      const selectedRangeValues = getRangeValuesByType(pickerType);
+      const nextRangeValues = rangeSelectionComplete.value ? [selectedValue, selectedValue] : [selectedRangeValues[0], selectedValue];
+      setRangeValuesByType(pickerType, nextRangeValues);
+      rangeSelectionComplete.value = !rangeSelectionComplete.value;
+      if (!rangeSelectionComplete.value) {
+        return;
+      }
+      const shouldSwapRange = dayjs(nextRangeValues[0]).isAfter(nextRangeValues[1]);
+      const nextModelValue = shouldSwapRange ? [nextRangeValues[1], nextRangeValues[0]] : [...nextRangeValues];
+      markPreviewKeep();
+      emitModelValueChange(nextModelValue);
+    }
+    function updateMultiple(selectedValue, pickerType) {
+      const selectedMultipleValues = getMultipleValuesByType(pickerType);
+      const valueFormat = pickerType === DatePickerTypes.Year ? DatePickerFormats.Year : pickerType === DatePickerTypes.Month ? DatePickerFormats.Month : DatePickerFormats.DayPadded;
+      const nextMultipleValues = selectedMultipleValues.map((date) => dayjs(date).format(valueFormat));
+      const index = nextMultipleValues.findIndex((multipleValue) => multipleValue === selectedValue);
+      const alreadySelected = index !== -1;
+      if (alreadySelected) {
+        nextMultipleValues.splice(index, 1);
+      }
+      if (!alreadySelected) {
+        nextMultipleValues.push(selectedValue);
+      }
+      markPreviewKeep();
+      emitModelValueChange(nextMultipleValues);
+    }
+    function selectValue(selectedValue, pickerType) {
+      if (props2.range) {
+        updateRange(selectedValue, pickerType);
+        return;
+      }
+      if (props2.multiple) {
+        updateMultiple(selectedValue, pickerType);
+        return;
+      }
+      markPreviewKeep();
+      emitModelValueChange(selectedValue);
+    }
+    function isSelectableDate(dateValue, unit, checkAllowedDates = true) {
+      const { min, max, allowedDates } = props2;
+      const isBeforeMax = max ? dayjs(dateValue).isSameOrBefore(dayjs(max), unit) : true;
+      const isAfterMin = min ? dayjs(dateValue).isSameOrAfter(dayjs(min), unit) : true;
+      const isAllowed = checkAllowedDates && allowedDates ? allowedDates(dateValue) : true;
+      return isBeforeMax && isAfterMin && isAllowed;
+    }
+    function getReverse(unit, candidate) {
+      if (!selectionState.selectedYear || !selectionState.selectedMonth) {
         return false;
       }
-      if (!isSameYear.value) {
-        return chooseYear.value > previewYear.value;
+      if (!selectedYearInPreview.value) {
+        return selectionState.selectedYear > previewYear.value;
       }
-      if (dateType === "year") {
-        return date < toNumber(chooseYear.value);
+      if (unit === DatePickerUnits.Year) {
+        return candidate < toNumber(selectionState.selectedYear);
       }
-      if (dateType === "month") {
-        return date < chooseMonth.value;
+      if (unit === DatePickerUnits.Month) {
+        return candidate < selectionState.selectedMonth;
       }
-      return isSameMonth.value ? date < toNumber(chooseDay.value) : chooseMonth.value > previewMonth.value;
+      return selectedMonthInPreview.value ? candidate < toNumber(selectionState.selectedDay) : selectionState.selectedMonth > previewMonth.value;
     }
-    function getChooseDay(day) {
-      const { readonly, range, multiple, onChange, "onUpdate:modelValue": updateModelValue } = props2;
-      if (day < 0 || readonly) {
+    function selectDayFromPanel(day, monthOffset = 0) {
+      const { readonly } = props2;
+      if (readonly) {
         return;
       }
-      reverse.value = getReverse("day", day);
-      const date = `${previewYear.value}-${previewMonth.value}-${day}`;
-      const formatDate = dayjs(date).format("YYYY-MM-DD");
-      if (range) {
-        updateRange(formatDate, "day");
-      } else if (multiple) {
-        updateMultiple(formatDate, "day");
-      } else {
-        call(updateModelValue, formatDate);
-        call(onChange, formatDate);
-      }
-    }
-    function getChooseMonth(month) {
-      const { type, readonly, range, multiple, onChange, onPreview, "onUpdate:modelValue": updateModelValue } = props2;
-      reverse.value = getReverse("month", month);
-      if (type === "month" && !readonly) {
-        const date = `${previewYear.value}-${month}`;
-        if (range) {
-          updateRange(date, "month");
-        } else if (multiple) {
-          updateMultiple(date, "month");
-        } else {
-          call(updateModelValue, date);
-          call(onChange, date);
-        }
-      } else {
-        previewMonth.value = month;
-        call(
-          onPreview,
-          toNumber(previewYear.value),
-          toNumber(previewMonth.value),
-          type === "date" ? toNumber(chooseDay.value) : void 0
-        );
+      const targetMonthDayjsObject = dayjs(`${previewYear.value}-${previewMonth.value}-01`).add(
+        monthOffset,
+        DatePickerUnits.Month
+      );
+      const dayValue = `${targetMonthDayjsObject.format(DatePickerFormats.Month)}-${day}`;
+      if (!isSelectableDate(dayValue, DatePickerUnits.Day)) {
+        return;
       }
-      isMonthPanel.value = false;
-    }
-    function getChooseYear(year) {
-      const { type, readonly, range, multiple, onChange, onPreview, "onUpdate:modelValue": updateModelValue } = props2;
-      reverse.value = getReverse("year", year);
-      if (type === "year" && !readonly) {
-        if (range) {
-          updateRange(`${year}`, "year");
-        } else if (multiple) {
-          updateMultiple(`${year}`, "year");
-        } else {
-          call(updateModelValue, `${year}`);
-          call(onChange, `${year}`);
-        }
-      } else {
-        previewYear.value = `${year}`;
-        call(
-          onPreview,
-          toNumber(previewYear.value),
-          toNumber(previewMonth.value),
-          type === "date" ? toNumber(chooseDay.value) : void 0
-        );
+      reverse.value = monthOffset !== 0 ? monthOffset < 0 : getReverse(DatePickerUnits.Day, day);
+      if (monthOffset !== 0) {
+        previewYear.value = targetMonthDayjsObject.format(DatePickerFormats.Year);
+        previewMonth.value = targetMonthDayjsObject.format(DatePickerFormats.Month).split("-")[1];
+        emitPreview();
       }
-      isYearPanel.value = false;
-    }
-    function checkPreview(type, checkType2) {
-      const changeValue = checkType2 === "prev" ? -1 : 1;
-      if (type === "year") {
-        previewYear.value = `${toNumber(previewYear.value) + changeValue}`;
-      } else {
-        let checkIndex = toNumber(previewMonth.value) + changeValue;
-        if (checkIndex < 1) {
-          previewYear.value = `${toNumber(previewYear.value) - 1}`;
-          checkIndex = 12;
-        }
-        if (checkIndex > 12) {
-          previewYear.value = `${toNumber(previewYear.value) + 1}`;
-          checkIndex = 1;
-        }
-        previewMonth.value = MONTH_LIST.find((month) => toNumber(month) === checkIndex);
+      selectValue(dayjs(dayValue).format(DatePickerFormats.DayPadded), DatePickerTypes.Date);
+    }
+    function selectMonthFromPanel(month) {
+      const { type: pickerType, readonly } = props2;
+      const monthValue = `${previewYear.value}-${month}`;
+      if (readonly || !isSelectableDate(monthValue, DatePickerUnits.Month, pickerType === DatePickerTypes.Month)) {
+        return;
       }
-      call(
-        props2.onPreview,
-        toNumber(previewYear.value),
-        toNumber(previewMonth.value),
-        props2.type === "date" ? toNumber(chooseDay.value) : void 0
-      );
+      reverse.value = getReverse(DatePickerUnits.Month, month);
+      if (pickerType === DatePickerTypes.Month) {
+        selectValue(monthValue, DatePickerTypes.Month);
+        showMonthPanel.value = false;
+        return;
+      }
+      previewMonth.value = month;
+      emitPreview();
+      showMonthPanel.value = false;
+    }
+    function selectYearFromPanel(year) {
+      const { type: pickerType, readonly } = props2;
+      const yearValue = `${year}`;
+      if (readonly || !isSelectableDate(yearValue, DatePickerUnits.Year, pickerType === DatePickerTypes.Year)) {
+        return;
+      }
+      reverse.value = getReverse(DatePickerUnits.Year, year);
+      if (pickerType === DatePickerTypes.Year) {
+        selectValue(yearValue, DatePickerTypes.Year);
+        showYearPanel.value = false;
+        return;
+      }
+      previewYear.value = `${year}`;
+      emitPreview();
+      showYearPanel.value = false;
+    }
+    function shiftPreview(unit, direction) {
+      const step = direction === ShiftDirections.Prev ? -1 : 1;
+      if (unit === DatePickerUnits.Year) {
+        previewYear.value = `${toNumber(previewYear.value) + step}`;
+        emitPreview();
+        return;
+      }
+      let nextMonthNumber = toNumber(previewMonth.value) + step;
+      if (nextMonthNumber < 1) {
+        previewYear.value = `${toNumber(previewYear.value) - 1}`;
+        nextMonthNumber = 12;
+      }
+      if (nextMonthNumber > 12) {
+        previewYear.value = `${toNumber(previewYear.value) + 1}`;
+        nextMonthNumber = 1;
+      }
+      previewMonth.value = MonthList.find((month) => toNumber(month) === nextMonthNumber);
+      emitPreview();
     }
     function checkValue() {
       if ((props2.multiple || props2.range) && !isArray(props2.modelValue)) {
@@ -617,11 +656,11 @@ const __sfc__ = defineComponent({
       }
       return true;
     }
-    function invalidFormatDate(date) {
-      if (isArray(date)) {
+    function invalidFormatDate(formattedValue) {
+      if (isArray(formattedValue)) {
         return false;
       }
-      if (date === "Invalid Date") {
+      if (formattedValue === "Invalid Date") {
         error("DatePicker", '"modelValue" is an Invalid Date');
         return true;
       }
@@ -629,72 +668,104 @@ const __sfc__ = defineComponent({
     }
     function getFallbackDate() {
       if (props2.fallbackViewDate) {
-        const formatDate = dayjs(props2.fallbackViewDate).format("YYYY-MM-D");
-        if (formatDate !== "Invalid Date") {
+        const formattedFallbackDate = dayjs(props2.fallbackViewDate).format(DatePickerFormats.Day);
+        if (formattedFallbackDate !== "Invalid Date") {
           return props2.fallbackViewDate;
         }
       }
-      return dayjs().format("YYYY-MM-D");
+      return dayjs().format(DatePickerFormats.Day);
     }
-    function getSingleDate(value) {
-      if (value && !invalidFormatDate(dayjs(value).format("YYYY-MM-D"))) {
-        return value;
+    function getSingleDate(modelValue) {
+      if (modelValue && !invalidFormatDate(dayjs(modelValue).format(DatePickerFormats.Day))) {
+        return modelValue;
       }
       return getFallbackDate();
     }
-    function getFirstValidDate(value, type) {
-      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
-      return value.find((choose) => !invalidFormatDate(dayjs(choose).format(formatType)));
+    function getFirstValidDate(modelValues, pickerType) {
+      const valueFormat = getFormatByType(pickerType);
+      return modelValues.find((modelValue) => !invalidFormatDate(dayjs(modelValue).format(valueFormat)));
+    }
+    function markPreviewKeep() {
+      shouldKeepPreviewOnModelValueChange = props2.type === DatePickerTypes.Date || props2.range || props2.multiple;
     }
-    function rangeInit(value, type) {
+    function syncRangeValue(modelValues, pickerType, syncPreview = true) {
       var _a;
-      const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
-      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
-      const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).filter((date) => !invalidFormatDate(date)).slice(0, 2);
-      rangeDate.value = formatDateList;
-      const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1]);
-      if (rangeDate.value.length === 2 && isChangeOrder) {
-        rangeDate.value = [rangeDate.value[1], rangeDate.value[0]];
+      const valueFormat = getFormatByType(pickerType);
+      const formattedValues = modelValues.map((modelValue) => dayjs(modelValue).format(valueFormat)).filter((formattedValue) => !invalidFormatDate(formattedValue)).slice(0, 2);
+      setRangeValuesByType(pickerType, formattedValues);
+      if (formattedValues.length === 2) {
+        const shouldSwapRange = dayjs(formattedValues[0]).isAfter(formattedValues[1]);
+        if (shouldSwapRange) {
+          setRangeValuesByType(pickerType, [formattedValues[1], formattedValues[0]]);
+        }
+      }
+      if (syncPreview) {
+        syncPreviewValue((_a = getFirstValidDate(modelValues, pickerType)) != null ? _a : getFallbackDate());
       }
-      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
     }
-    function multipleInit(value, type) {
+    function syncMultipleValue(modelValues, pickerType, syncPreview = true) {
       var _a;
-      const rangeDate = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
-      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
-      const formatDateList = Array.from(new Set(value.map((choose) => dayjs(choose).format(formatType))));
-      rangeDate.value = formatDateList.filter((date) => date !== "Invalid Date");
-      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
-    }
-    function dateInit(value) {
-      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
-      const formatDate = handleValue.format("YYYY-MM-D");
-      if (invalidFormatDate(formatDate)) {
+      const valueFormat = getFormatByType(pickerType);
+      const formattedValues = uniq(modelValues.map((modelValue) => dayjs(modelValue).format(valueFormat)));
+      setMultipleValuesByType(
+        pickerType,
+        formattedValues.filter((formattedValue) => formattedValue !== "Invalid Date")
+      );
+      if (syncPreview) {
+        syncPreviewValue((_a = getFirstValidDate(modelValues, pickerType)) != null ? _a : getFallbackDate());
+      }
+    }
+    function syncSingleValue(modelValue, syncPreview = true) {
+      if (!modelValue) {
+        selectionState.selectedMonth = void 0;
+        selectionState.selectedYear = void 0;
+        selectionState.selectedDay = void 0;
+        if (syncPreview) {
+          syncPreviewValue(getFallbackDate());
+        }
         return;
       }
-      const [yearValue, monthValue, dayValue] = formatDate.split("-");
-      const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
-      chooseMonth.value = monthDes2;
-      chooseYear.value = yearValue;
-      chooseDay.value = dayValue;
-      previewInit(formatDate);
-    }
-    function previewInit(value) {
-      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
-      const formatDate = handleValue.format("YYYY-MM-D");
-      if (invalidFormatDate(formatDate)) {
+      const dayjsObject = dayjs(modelValue);
+      const formattedDate = dayjsObject.format(DatePickerFormats.Day);
+      if (invalidFormatDate(formattedDate)) {
+        return;
+      }
+      const [parsedYear, parsedMonth, parsedDay] = formattedDate.split("-");
+      const selectedMonthValue = MonthList.find((month) => month === parsedMonth);
+      selectionState.selectedMonth = selectedMonthValue;
+      selectionState.selectedYear = parsedYear;
+      selectionState.selectedDay = parsedDay;
+      if (syncPreview) {
+        syncPreviewValue(formattedDate);
+      }
+    }
+    function syncPreviewValue(previewSource) {
+      const dayjsObject = previewSource ? dayjs(previewSource) : dayjs(getFallbackDate());
+      const formattedDate = dayjsObject.format(DatePickerFormats.Day);
+      if (invalidFormatDate(formattedDate)) {
+        return;
+      }
+      const [previewYearValue, previewMonthSource] = formattedDate.split("-");
+      const previewMonthValue = MonthList.find((month) => month === previewMonthSource);
+      previewMonth.value = previewMonthValue;
+      previewYear.value = previewYearValue;
+    }
+    function resetPreview() {
+      var _a;
+      showYearPanel.value = false;
+      showMonthPanel.value = false;
+      if (!props2.range && !props2.multiple) {
+        syncPreviewValue(getSingleDate(props2.modelValue));
         return;
       }
-      const [yearValue, monthValue] = formatDate.split("-");
-      const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
-      previewMonth.value = monthDes2;
-      previewYear.value = yearValue;
+      const previewSource = isArray(props2.modelValue) ? (_a = getFirstValidDate(props2.modelValue, props2.type)) != null ? _a : getFallbackDate() : getFallbackDate();
+      syncPreviewValue(previewSource);
     }
-    function resetState() {
-      startY = 0;
-      startX = 0;
-      checkType = "";
-      touchDirection = void 0;
+    function syncModelValue() {
+      showYearPanel.value = false;
+      showMonthPanel.value = false;
+      shouldKeepPreviewOnModelValueChange = false;
+      syncFromModelValue(true);
     }
     return {
       yearPanelEl,
@@ -702,35 +773,35 @@ const __sfc__ = defineComponent({
       dayPanelEl,
       reverse,
       currentDate,
-      chooseMonth,
-      chooseYear,
-      chooseDay,
       previewYear,
-      displayYear,
-      isYearPanel,
-      isMonthPanel,
-      getMonthTitle,
-      getDateTitle,
-      getYearTitle,
-      getPanelType,
-      getChoose,
-      getPreview,
-      componentProps,
-      slotProps,
-      formatRange,
-      pt,
-      t,
+      showYearPanel,
+      showMonthPanel,
+      monthTitle,
+      dateTitle,
+      yearTitle,
+      titleHint,
+      panelType,
+      headerType,
+      headerPreview,
+      selectionState,
+      previewState,
+      panelProps,
+      dateSlotProps,
+      formattedRangeDays,
       n,
       classes,
-      clickEl,
-      handleTouchstart,
-      handleTouchmove,
-      handleTouchend,
-      getChooseDay,
-      getChooseMonth,
-      getChooseYear,
-      checkPreview,
-      formatElevation
+      switchPanel,
+      shiftCurrentPanelPreview,
+      shiftDatePanelYearPreview,
+      selectDayFromPanel,
+      selectMonthFromPanel,
+      selectYearFromPanel,
+      shiftPreview,
+      resetPreview,
+      syncModelValue,
+      rangeSelecting,
+      formatElevation,
+      DatePickerTypes
     };
   }
 });