vant 4.8.11 → 4.9.1

package/es/calendar/Calendar.mjs

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
 import { pick, isDate, truthProp, numericProp, getScrollTop, makeStringProp, makeNumericProp } from "../utils/index.mjs";
-import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset } from "./utils.mjs";
+import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset, getMonthByOffset } from "./utils.mjs";
 import { raf, useRect, onMountedOrActivated } from "@vant/use";
 import { useRefs } from "../composables/use-refs.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -13,6 +13,7 @@ import CalendarHeader from "./CalendarHeader.mjs";
 const calendarProps = {
   show: Boolean,
   type: makeStringProp("single"),
+  switchMode: makeStringProp("none"),
   title: String,
   color: String,
   round: truthProp,
@@ -40,16 +41,11 @@ const calendarProps = {
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
-    validator: isDate,
-    default: getToday
+    validator: isDate
   },
   maxDate: {
     type: Date,
-    validator: isDate,
-    default: () => {
-      const now = getToday();
-      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-    }
+    validator: isDate
   },
   firstDayOfWeek: {
     type: numericProp,
@@ -60,25 +56,36 @@ const calendarProps = {
 var stdin_default = defineComponent({
   name,
   props: calendarProps,
-  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate"],
+  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate", "panelChange"],
   setup(props, {
     emit,
     slots
   }) {
-    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
-      if (compareDay(date, minDate) === -1) {
-        return minDate;
+    const canSwitch = computed(() => props.switchMode !== "none");
+    const minDate = computed(() => {
+      if (!props.minDate && !canSwitch.value) {
+        return getToday();
+      }
+      return props.minDate;
+    });
+    const maxDate = computed(() => {
+      if (!props.maxDate && !canSwitch.value) {
+        return getMonthByOffset(getToday(), 6);
       }
-      if (compareDay(date, maxDate) === 1) {
-        return maxDate;
+      return props.maxDate;
+    });
+    const limitDateRange = (date, min = minDate.value, max = maxDate.value) => {
+      if (min && compareDay(date, min) === -1) {
+        return min;
+      }
+      if (max && compareDay(date, max) === 1) {
+        return max;
       }
       return date;
     };
     const getInitialDate = (defaultDate = props.defaultDate) => {
       const {
         type,
-        minDate,
-        maxDate,
         allowSameDay
       } = props;
       if (defaultDate === null) {
@@ -89,8 +96,10 @@ var stdin_default = defineComponent({
         if (!Array.isArray(defaultDate)) {
           defaultDate = [];
         }
-        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
-        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
+        const min = minDate.value;
+        const max = maxDate.value;
+        const start = limitDateRange(defaultDate[0] || now, min, max ? allowSameDay ? max : getPrevDay(max) : void 0);
+        const end = limitDateRange(defaultDate[1] || (allowSameDay ? now : getNextDay(now)), min ? allowSameDay ? min : getNextDay(min) : void 0);
         return [start, end];
       }
       if (type === "multiple") {
@@ -104,23 +113,28 @@ var stdin_default = defineComponent({
       }
       return limitDateRange(defaultDate);
     };
+    const getInitialPanelDate = () => {
+      const date = Array.isArray(currentDate.value) ? currentDate.value[0] : currentDate.value;
+      return date ? date : limitDateRange(getToday());
+    };
     let bodyHeight;
     const bodyRef = ref();
-    const subtitle = ref({
-      textFn: () => "",
-      date: void 0
-    });
     const currentDate = ref(getInitialDate());
+    const currentPanelDate = ref(getInitialPanelDate());
+    const currentMonthRef = ref();
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
     const months = computed(() => {
       const months2 = [];
-      const cursor = new Date(props.minDate);
+      if (!minDate.value || !maxDate.value) {
+        return months2;
+      }
+      const cursor = new Date(minDate.value);
       cursor.setDate(1);
       do {
         months2.push(new Date(cursor));
         cursor.setMonth(cursor.getMonth() + 1);
-      } while (compareMonth(cursor, props.maxDate) !== 1);
+      } while (compareMonth(cursor, maxDate.value) !== 1);
       return months2;
     });
     const buttonDisabled = computed(() => {
@@ -170,25 +184,26 @@ var stdin_default = defineComponent({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = {
-          textFn: currentMonth.getTitle,
-          date: currentMonth.date
-        };
+        currentMonthRef.value = currentMonth;
       }
     };
     const scrollToDate = (targetDate) => {
-      raf(() => {
-        months.value.some((month, index) => {
-          if (compareMonth(month, targetDate) === 0) {
-            if (bodyRef.value) {
-              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+      if (canSwitch.value) {
+        currentPanelDate.value = targetDate;
+      } else {
+        raf(() => {
+          months.value.some((month, index) => {
+            if (compareMonth(month, targetDate) === 0) {
+              if (bodyRef.value) {
+                monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+              }
+              return true;
             }
-            return true;
-          }
-          return false;
+            return false;
+          });
+          onScroll();
         });
-        onScroll();
-      });
+      }
     };
     const scrollToCurrentDate = () => {
       if (props.poppable && !props.show) {
@@ -199,7 +214,7 @@ var stdin_default = defineComponent({
         if (isDate(targetDate)) {
           scrollToDate(targetDate);
         }
-      } else {
+      } else if (!canSwitch.value) {
         raf(onScroll);
       }
     };
@@ -207,9 +222,11 @@ var stdin_default = defineComponent({
       if (props.poppable && !props.show) {
         return;
       }
-      raf(() => {
-        bodyHeight = Math.floor(useRect(bodyRef).height);
-      });
+      if (!canSwitch.value) {
+        raf(() => {
+          bodyHeight = Math.floor(useRect(bodyRef).height);
+        });
+      }
       scrollToCurrentDate();
     };
     const reset = (date = getInitialDate()) => {
@@ -231,6 +248,12 @@ var stdin_default = defineComponent({
       }
       return true;
     };
+    const onPanelChange = (date) => {
+      currentPanelDate.value = date;
+      emit("panelChange", {
+        date
+      });
+    };
     const onConfirm = () => {
       var _a;
       return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
@@ -322,12 +345,15 @@ var stdin_default = defineComponent({
     const renderMonth = (date, index) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return _createVNode(CalendarMonth, _mergeProps({
-        "ref": setMonthRefs(index),
+        "ref": canSwitch.value ? currentMonthRef : setMonthRefs(index),
         "date": date,
         "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
-        "firstDayOfWeek": dayOffset.value
-      }, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+        "firstDayOfWeek": dayOffset.value,
+        "lazyRender": canSwitch.value ? false : props.lazyRender,
+        "maxDate": maxDate.value,
+        "minDate": minDate.value
+      }, pick(props, ["type", "color", "showMark", "formatter", "rowHeight", "showSubtitle", "allowSameDay"]), {
         "onClick": onClickDay,
         "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
       }), pick(slots, ["top-info", "bottom-info", "month-title"]));
@@ -362,25 +388,29 @@ var stdin_default = defineComponent({
       }]
     }, [renderFooterButton()]);
     const renderCalendar = () => {
-      const subTitle = subtitle.value.textFn();
+      var _a, _b;
       return _createVNode("div", {
         "class": bem()
       }, [_createVNode(CalendarHeader, {
-        "date": subtitle.value.date,
+        "date": (_a = currentMonthRef.value) == null ? void 0 : _a.date,
+        "maxDate": maxDate.value,
+        "minDate": minDate.value,
         "title": props.title,
-        "subtitle": subTitle,
+        "subtitle": (_b = currentMonthRef.value) == null ? void 0 : _b.getTitle(),
         "showTitle": props.showTitle,
         "showSubtitle": props.showSubtitle,
+        "switchMode": props.switchMode,
         "firstDayOfWeek": dayOffset.value,
-        "onClickSubtitle": (event) => emit("clickSubtitle", event)
-      }, pick(slots, ["title", "subtitle"])), _createVNode("div", {
+        "onClickSubtitle": (event) => emit("clickSubtitle", event),
+        "onPanelChange": onPanelChange
+      }, pick(slots, ["title", "subtitle", "prev-month", "prev-year", "next-month", "next-year"])), _createVNode("div", {
         "ref": bodyRef,
         "class": bem("body"),
-        "onScroll": onScroll
-      }, [months.value.map(renderMonth)]), renderFooter()]);
+        "onScroll": canSwitch.value ? void 0 : onScroll
+      }, [canSwitch.value ? renderMonth(currentPanelDate.value, 0) : months.value.map(renderMonth)]), renderFooter()]);
     };
     watch(() => props.show, init);
-    watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
+    watch(() => [props.type, props.minDate, props.maxDate, props.switchMode], () => reset(getInitialDate(currentDate.value)));
     watch(() => props.defaultDate, (value = null) => {
       currentDate.value = value;
       scrollToCurrentDate();

package/es/calendar/CalendarHeader.d.ts

@@ -1,20 +1,35 @@
+import type { CalendarSwitchMode } from './types';
 declare const _default: import("vue").DefineComponent<{
     date: DateConstructor;
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    switchMode: {
+        type: import("vue").PropType<CalendarSwitchMode>;
+        default: CalendarSwitchMode;
+    };
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickSubtitle" | "panelChange")[], "clickSubtitle" | "panelChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     date: DateConstructor;
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
+    switchMode: {
+        type: import("vue").PropType<CalendarSwitchMode>;
+        default: CalendarSwitchMode;
+    };
 }>> & {
     onClickSubtitle?: ((...args: any[]) => any) | undefined;
+    onPanelChange?: ((...args: any[]) => any) | undefined;
 }, {
+    switchMode: CalendarSwitchMode;
     showTitle: boolean;
     showSubtitle: boolean;
 }, {}>;

package/es/calendar/CalendarHeader.mjs

@@ -1,23 +1,43 @@
 import { createVNode as _createVNode } from "vue";
-import { defineComponent } from "vue";
-import { createNamespace } from "../utils/index.mjs";
-import { t, bem } from "./utils.mjs";
+import { computed, defineComponent } from "vue";
+import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from "../utils/index.mjs";
+import { t, bem, getPrevMonth, getPrevYear, getNextMonth, getNextYear } from "./utils.mjs";
+import { Icon } from "../icon/index.mjs";
 const [name] = createNamespace("calendar-header");
 var stdin_default = defineComponent({
   name,
   props: {
     date: Date,
+    minDate: Date,
+    maxDate: Date,
     title: String,
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
-    firstDayOfWeek: Number
+    firstDayOfWeek: Number,
+    switchMode: makeStringProp("none")
   },
-  emits: ["clickSubtitle"],
+  emits: ["clickSubtitle", "panelChange"],
   setup(props, {
     slots,
     emit
   }) {
+    const prevMonthDisabled = computed(() => {
+      const prevMonth = getPrevMonth(props.date);
+      return props.minDate && prevMonth < props.minDate;
+    });
+    const prevYearDisabled = computed(() => {
+      const prevYear = getPrevYear(props.date);
+      return props.minDate && prevYear < props.minDate;
+    });
+    const nextMonthDisabled = computed(() => {
+      const nextMonth = getNextMonth(props.date);
+      return props.maxDate && nextMonth > props.maxDate;
+    });
+    const nextYearDisabled = computed(() => {
+      const nextYear = getNextYear(props.date);
+      return props.maxDate && nextYear > props.maxDate;
+    });
     const renderTitle = () => {
       if (props.showTitle) {
         const text = props.title || t("title");
@@ -28,16 +48,60 @@ var stdin_default = defineComponent({
       }
     };
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
+    const onPanelChange = (date) => emit("panelChange", date);
+    const renderAction = (isNext) => {
+      const showYearAction = props.switchMode === "year-month";
+      const monthSlot = slots[isNext ? "next-month" : "prev-month"];
+      const yearSlot = slots[isNext ? "next-year" : "prev-year"];
+      const monthDisabled = isNext ? nextMonthDisabled.value : prevMonthDisabled.value;
+      const yearDisabled = isNext ? nextYearDisabled.value : prevYearDisabled.value;
+      const monthIconName = isNext ? "arrow" : "arrow-left";
+      const yearIconName = isNext ? "arrow-double-right" : "arrow-double-left";
+      const onMonthChange = () => onPanelChange((isNext ? getNextMonth : getPrevMonth)(props.date));
+      const onYearChange = () => onPanelChange((isNext ? getNextYear : getPrevYear)(props.date));
+      const MonthAction = _createVNode("view", {
+        "class": bem("header-action", {
+          disabled: monthDisabled
+        }),
+        "onClick": monthDisabled ? void 0 : onMonthChange
+      }, [monthSlot ? monthSlot({
+        disabled: monthDisabled
+      }) : _createVNode(Icon, {
+        "class": {
+          [HAPTICS_FEEDBACK]: !monthDisabled
+        },
+        "name": monthIconName
+      }, null)]);
+      const YearAction = showYearAction && _createVNode("view", {
+        "class": bem("header-action", {
+          disabled: yearDisabled
+        }),
+        "onClick": yearDisabled ? void 0 : onYearChange
+      }, [yearSlot ? yearSlot({
+        disabled: yearDisabled
+      }) : _createVNode(Icon, {
+        "class": {
+          [HAPTICS_FEEDBACK]: !yearDisabled
+        },
+        "name": yearIconName
+      }, null)]);
+      return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction];
+    };
     const renderSubtitle = () => {
       if (props.showSubtitle) {
         const title = slots.subtitle ? slots.subtitle({
           date: props.date,
           text: props.subtitle
         }) : props.subtitle;
+        const canSwitch = props.switchMode !== "none";
         return _createVNode("div", {
-          "class": bem("header-subtitle"),
+          "class": bem("header-subtitle", {
+            "with-swicth": canSwitch
+          }),
           "onClick": onClickSubtitle
-        }, [title]);
+        }, [canSwitch ? [renderAction(), _createVNode("div", {
+          "class": bem("header-subtitle-text")
+        }, [title]), renderAction(true)] : title]);
       }
     };
     const renderWeekDays = () => {

package/es/calendar/CalendarMonth.d.ts

@@ -7,14 +7,8 @@ declare const calendarMonthProps: {
     };
     type: PropType<CalendarType>;
     color: StringConstructor;
-    minDate: {
-        type: DateConstructor;
-        required: true;
-    };
-    maxDate: {
-        type: DateConstructor;
-        required: true;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     showMark: BooleanConstructor;
     rowHeight: (NumberConstructor | StringConstructor)[];
     formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
@@ -33,14 +27,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     type: PropType<CalendarType>;
     color: StringConstructor;
-    minDate: {
-        type: DateConstructor;
-        required: true;
-    };
-    maxDate: {
-        type: DateConstructor;
-        required: true;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     showMark: BooleanConstructor;
     rowHeight: (NumberConstructor | StringConstructor)[];
     formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
@@ -57,14 +45,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     type: PropType<CalendarType>;
     color: StringConstructor;
-    minDate: {
-        type: DateConstructor;
-        required: true;
-    };
-    maxDate: {
-        type: DateConstructor;
-        required: true;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     showMark: BooleanConstructor;
     rowHeight: (NumberConstructor | StringConstructor)[];
     formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;

package/es/calendar/CalendarMonth.mjs

@@ -12,8 +12,8 @@ const calendarMonthProps = {
   date: makeRequiredProp(Date),
   type: String,
   color: String,
-  minDate: makeRequiredProp(Date),
-  maxDate: makeRequiredProp(Date),
+  minDate: Date,
+  maxDate: Date,
   showMark: Boolean,
   rowHeight: numericProp,
   formatter: Function,
@@ -39,7 +39,9 @@ var stdin_default = defineComponent({
     const title = computed(() => formatMonthTitle(props.date));
     const rowHeight = computed(() => addUnit(props.rowHeight));
     const offset = computed(() => {
-      const realDay = props.date.getDay();
+      const date = props.date.getDate();
+      const day = props.date.getDay();
+      const realDay = (day - date % 7 + 8) % 7;
       if (props.firstDayOfWeek) {
         return (realDay + 7 - props.firstDayOfWeek) % 7;
       }
@@ -99,7 +101,7 @@ var stdin_default = defineComponent({
         maxDate,
         currentDate
       } = props;
-      if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
+      if (minDate && compareDay(day, minDate) < 0 || maxDate && compareDay(day, maxDate) > 0) {
         return "disabled";
       }
       if (currentDate === null) {

package/es/calendar/index.css

@@ -1 +1 @@
-:root,:host{--van-calendar-background: var(--van-background-2);--van-calendar-popup-height: 80%;--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, .16);--van-calendar-header-title-height: 44px;--van-calendar-header-title-font-size: var(--van-font-size-lg);--van-calendar-header-subtitle-font-size: var(--van-font-size-md);--van-calendar-weekdays-height: 30px;--van-calendar-weekdays-font-size: var(--van-font-size-sm);--van-calendar-month-title-font-size: var(--van-font-size-md);--van-calendar-month-mark-color: rgba(242, 243, 245, .8);--van-calendar-month-mark-font-size: 160px;--van-calendar-day-height: 64px;--van-calendar-day-font-size: var(--van-font-size-lg);--van-calendar-day-margin-bottom: 4px;--van-calendar-range-edge-color: var(--van-white);--van-calendar-range-edge-background: var(--van-primary-color);--van-calendar-range-middle-color: var(--van-primary-color);--van-calendar-range-middle-background-opacity: .1;--van-calendar-selected-day-size: 54px;--van-calendar-selected-day-color: var(--van-white);--van-calendar-info-font-size: var(--van-font-size-xs);--van-calendar-info-line-height: var(--van-line-height-xs);--van-calendar-selected-day-background: var(--van-primary-color);--van-calendar-day-disabled-color: var(--van-text-color-3);--van-calendar-confirm-button-height: 36px;--van-calendar-confirm-button-margin: 7px 0}.van-theme-dark{--van-calendar-month-mark-color: rgba(100, 101, 102, .2);--van-calendar-day-disabled-color: var(--van-gray-7)}.van-calendar{display:flex;flex-direction:column;height:100%;background:var(--van-calendar-background)}.van-calendar__popup.van-popup--top,.van-calendar__popup.van-popup--bottom{height:var(--van-calendar-popup-height)}.van-calendar__popup.van-popup--left,.van-calendar__popup.van-popup--right{height:100%}.van-calendar__popup .van-popup__close-icon{top:11px}.van-calendar__header{flex-shrink:0;box-shadow:var(--van-calendar-header-shadow)}.van-calendar__month-title,.van-calendar__header-title,.van-calendar__header-subtitle{color:var(--van-text-color);height:var(--van-calendar-header-title-height);font-weight:var(--van-font-bold);line-height:var(--van-calendar-header-title-height);text-align:center}.van-calendar__header-title{font-size:var(--van-calendar-header-title-font-size)}.van-calendar__header-subtitle{font-size:var(--van-calendar-header-subtitle-font-size)}.van-calendar__month-title{font-size:var(--van-calendar-month-title-font-size)}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--van-calendar-weekdays-font-size);line-height:var(--van-calendar-weekdays-height);text-align:center}.van-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;color:var(--van-calendar-month-mark-color);font-size:var(--van-calendar-month-mark-font-size);transform:translate(-50%,-50%);pointer-events:none}.van-calendar__day,.van-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:var(--van-calendar-day-height);font-size:var(--van-calendar-day-font-size);margin-bottom:var(--van-calendar-day-margin-bottom);cursor:pointer}.van-calendar__day--end,.van-calendar__day--start,.van-calendar__day--start-end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected{color:var(--van-calendar-range-edge-color);background:var(--van-calendar-range-edge-background)}.van-calendar__day--start{border-radius:var(--van-radius-md) 0 0 var(--van-radius-md)}.van-calendar__day--end{border-radius:0 var(--van-radius-md) var(--van-radius-md) 0}.van-calendar__day--start-end,.van-calendar__day--multiple-selected{border-radius:var(--van-radius-md)}.van-calendar__day--middle{color:var(--van-calendar-range-middle-color)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--van-calendar-range-middle-background-opacity);content:""}.van-calendar__day--disabled{color:var(--van-calendar-day-disabled-color);cursor:default}.van-calendar__top-info,.van-calendar__bottom-info{position:absolute;right:0;left:0;font-size:var(--van-calendar-info-font-size);line-height:var(--van-calendar-info-line-height)}@media (max-width: 350px){.van-calendar__top-info,.van-calendar__bottom-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:var(--van-calendar-selected-day-size);height:var(--van-calendar-selected-day-size);color:var(--van-calendar-selected-day-color);background:var(--van-calendar-selected-day-background);border-radius:var(--van-radius-md)}.van-calendar__footer{flex-shrink:0;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md)}.van-calendar__confirm{height:var(--van-calendar-confirm-button-height);margin:var(--van-calendar-confirm-button-margin)}
+:root,:host{--van-calendar-background: var(--van-background-2);--van-calendar-popup-height: 80%;--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, .16);--van-calendar-header-title-height: 44px;--van-calendar-header-title-font-size: var(--van-font-size-lg);--van-calendar-header-subtitle-font-size: var(--van-font-size-md);--van-calendar-header-action-width: 28px;--van-calendar-header-action-color: var(--van-text-color);--van-calendar-header-action-disabled-color: var(--van-text-color-3);--van-calendar-weekdays-height: 30px;--van-calendar-weekdays-font-size: var(--van-font-size-sm);--van-calendar-month-title-font-size: var(--van-font-size-md);--van-calendar-month-mark-color: rgba(242, 243, 245, .8);--van-calendar-month-mark-font-size: 160px;--van-calendar-day-height: 64px;--van-calendar-day-font-size: var(--van-font-size-lg);--van-calendar-day-margin-bottom: 4px;--van-calendar-range-edge-color: var(--van-white);--van-calendar-range-edge-background: var(--van-primary-color);--van-calendar-range-middle-color: var(--van-primary-color);--van-calendar-range-middle-background-opacity: .1;--van-calendar-selected-day-size: 54px;--van-calendar-selected-day-color: var(--van-white);--van-calendar-info-font-size: var(--van-font-size-xs);--van-calendar-info-line-height: var(--van-line-height-xs);--van-calendar-selected-day-background: var(--van-primary-color);--van-calendar-day-disabled-color: var(--van-text-color-3);--van-calendar-confirm-button-height: 36px;--van-calendar-confirm-button-margin: 7px 0}.van-theme-dark{--van-calendar-month-mark-color: rgba(100, 101, 102, .2);--van-calendar-day-disabled-color: var(--van-gray-7)}.van-calendar{display:flex;flex-direction:column;height:100%;background:var(--van-calendar-background)}.van-calendar__popup.van-popup--top,.van-calendar__popup.van-popup--bottom{height:var(--van-calendar-popup-height)}.van-calendar__popup.van-popup--left,.van-calendar__popup.van-popup--right{height:100%}.van-calendar__popup .van-popup__close-icon{top:11px}.van-calendar__header{flex-shrink:0;box-shadow:var(--van-calendar-header-shadow)}.van-calendar__month-title,.van-calendar__header-title,.van-calendar__header-subtitle{color:var(--van-text-color);height:var(--van-calendar-header-title-height);font-weight:var(--van-font-bold);line-height:var(--van-calendar-header-title-height);text-align:center}.van-calendar__header-title{font-size:var(--van-calendar-header-title-font-size)}.van-calendar__header-subtitle{font-size:var(--van-calendar-header-subtitle-font-size)}.van-calendar__header-subtitle--with-swicth{display:flex;align-items:center;padding:0 var(--van-padding-base)}.van-calendar__header-subtitle-text{flex:1}.van-calendar__header-action{display:flex;align-items:center;justify-content:center;min-width:var(--van-calendar-header-action-width);height:100%;color:var(--van-calendar-header-action-color);cursor:pointer}.van-calendar__header-action--disabled{color:var(--van-calendar-header-action-disabled-color);cursor:not-allowed}.van-calendar__month-title{font-size:var(--van-calendar-month-title-font-size)}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--van-calendar-weekdays-font-size);line-height:var(--van-calendar-weekdays-height);text-align:center}.van-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;color:var(--van-calendar-month-mark-color);font-size:var(--van-calendar-month-mark-font-size);transform:translate(-50%,-50%);pointer-events:none}.van-calendar__day,.van-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:var(--van-calendar-day-height);font-size:var(--van-calendar-day-font-size);margin-bottom:var(--van-calendar-day-margin-bottom);cursor:pointer}.van-calendar__day--end,.van-calendar__day--start,.van-calendar__day--start-end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected{color:var(--van-calendar-range-edge-color);background:var(--van-calendar-range-edge-background)}.van-calendar__day--start{border-radius:var(--van-radius-md) 0 0 var(--van-radius-md)}.van-calendar__day--end{border-radius:0 var(--van-radius-md) var(--van-radius-md) 0}.van-calendar__day--start-end,.van-calendar__day--multiple-selected{border-radius:var(--van-radius-md)}.van-calendar__day--middle{color:var(--van-calendar-range-middle-color)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--van-calendar-range-middle-background-opacity);content:""}.van-calendar__day--disabled{color:var(--van-calendar-day-disabled-color);cursor:default}.van-calendar__top-info,.van-calendar__bottom-info{position:absolute;right:0;left:0;font-size:var(--van-calendar-info-font-size);line-height:var(--van-calendar-info-line-height)}@media (max-width: 350px){.van-calendar__top-info,.van-calendar__bottom-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:var(--van-calendar-selected-day-size);height:var(--van-calendar-selected-day-size);color:var(--van-calendar-selected-day-color);background:var(--van-calendar-selected-day-background);border-radius:var(--van-radius-md)}.van-calendar__footer{flex-shrink:0;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md)}.van-calendar__confirm{height:var(--van-calendar-confirm-button-height);margin:var(--van-calendar-confirm-button-margin)}

package/es/calendar/index.d.ts

@@ -4,6 +4,10 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         type: import("vue").PropType<import("./types").CalendarType>;
         default: import("./types").CalendarType;
     };
+    switchMode: {
+        type: import("vue").PropType<import("./types").CalendarSwitchMode>;
+        default: import("./types").CalendarSwitchMode;
+    };
     title: StringConstructor;
     color: StringConstructor;
     round: {
@@ -71,24 +75,26 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     minDate: {
         type: DateConstructor;
         validator: (val: unknown) => val is Date;
-        default: () => Date;
     };
     maxDate: {
         type: DateConstructor;
         validator: (val: unknown) => val is Date;
-        default: () => Date;
     };
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "clickDisabledDate" | "clickSubtitle" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "confirm" | "clickDisabledDate" | "clickSubtitle" | "unselect" | "monthShow" | "overRange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "clickDisabledDate" | "clickSubtitle" | "panelChange" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "confirm" | "clickDisabledDate" | "clickSubtitle" | "panelChange" | "unselect" | "monthShow" | "overRange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     type: {
         type: import("vue").PropType<import("./types").CalendarType>;
         default: import("./types").CalendarType;
     };
+    switchMode: {
+        type: import("vue").PropType<import("./types").CalendarSwitchMode>;
+        default: import("./types").CalendarSwitchMode;
+    };
     title: StringConstructor;
     color: StringConstructor;
     round: {
@@ -156,12 +162,10 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     minDate: {
         type: DateConstructor;
         validator: (val: unknown) => val is Date;
-        default: () => Date;
     };
     maxDate: {
         type: DateConstructor;
         validator: (val: unknown) => val is Date;
-        default: () => Date;
     };
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
@@ -174,6 +178,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     onConfirm?: ((...args: any[]) => any) | undefined;
     onClickDisabledDate?: ((...args: any[]) => any) | undefined;
     onClickSubtitle?: ((...args: any[]) => any) | undefined;
+    onPanelChange?: ((...args: any[]) => any) | undefined;
     onUnselect?: ((...args: any[]) => any) | undefined;
     onMonthShow?: ((...args: any[]) => any) | undefined;
     onOverRange?: ((...args: any[]) => any) | undefined;
@@ -188,6 +193,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
     safeAreaInsetTop: boolean;
+    switchMode: import("./types").CalendarSwitchMode;
     poppable: boolean;
     maxRange: string | number;
     showMark: boolean;
@@ -196,8 +202,6 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     allowSameDay: boolean;
     showSubtitle: boolean;
     showRangePrompt: boolean;
-    minDate: Date;
-    maxDate: Date;
     firstDayOfWeek: string | number;
 }, {}>>;
 export default Calendar;

package/es/calendar/types.d.ts

@@ -2,6 +2,7 @@ import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
 import type { Numeric } from '../utils';
 import type { CalendarProps } from './Calendar';
 import type { CalendarMonthProps } from './CalendarMonth';
+export type CalendarSwitchMode = 'none' | 'month' | 'year-month';
 export type CalendarType = 'single' | 'range' | 'multiple';
 export type CalendarDayType = '' | 'start' | 'start-end' | 'middle' | 'end' | 'selected' | 'multiple-middle' | 'multiple-selected' | 'disabled' | 'placeholder';
 export type CalendarDayItem = {
@@ -33,6 +34,9 @@ export type CalendarThemeVars = {
     calendarHeaderTitleHeight?: string;
     calendarHeaderTitleFontSize?: string;
     calendarHeaderSubtitleFontSize?: string;
+    calendarHeaderActionWidth?: string;
+    calendarHeaderActionColor?: string;
+    calendarHeaderActionDisabledColor?: string;
     calendarWeekdaysHeight?: string;
     calendarWeekdaysFontSize?: string;
     calendarMonthTitleFontSize?: string;

package/es/calendar/utils.d.ts

@@ -6,7 +6,13 @@ export declare function compareDay(day1: Date, day2: Date): 0 | 1 | -1;
 export declare const cloneDate: (date: Date) => Date;
 export declare const cloneDates: (dates: Date | Date[]) => Date | Date[];
 export declare function getDayByOffset(date: Date, offset: number): Date;
+export declare function getMonthByOffset(date: Date, offset: number): Date;
+export declare function getYearByOffset(date: Date, offset: number): Date;
 export declare const getPrevDay: (date: Date) => Date;
 export declare const getNextDay: (date: Date) => Date;
+export declare const getPrevMonth: (date: Date) => Date;
+export declare const getNextMonth: (date: Date) => Date;
+export declare const getPrevYear: (date: Date) => Date;
+export declare const getNextYear: (date: Date) => Date;
 export declare const getToday: () => Date;
 export declare function calcDateNum(date: [Date, Date]): number;