vant 4.8.11 → 4.9.0

package/lib/calendar/Calendar.js

@@ -46,6 +46,7 @@ var import_CalendarHeader = __toESM(require("./CalendarHeader"));
 const calendarProps = {
   show: Boolean,
   type: (0, import_utils.makeStringProp)("single"),
+  switchMode: (0, import_utils.makeStringProp)("none"),
   title: String,
   color: String,
   round: import_utils.truthProp,
@@ -73,16 +74,11 @@ const calendarProps = {
   safeAreaInsetBottom: import_utils.truthProp,
   minDate: {
     type: Date,
-    validator: import_utils.isDate,
-    default: import_utils2.getToday
+    validator: import_utils.isDate
   },
   maxDate: {
     type: Date,
-    validator: import_utils.isDate,
-    default: () => {
-      const now = (0, import_utils2.getToday)();
-      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-    }
+    validator: import_utils.isDate
   },
   firstDayOfWeek: {
     type: import_utils.numericProp,
@@ -93,25 +89,36 @@ const calendarProps = {
 var stdin_default = (0, import_vue2.defineComponent)({
   name: import_utils2.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 ((0, import_utils2.compareDay)(date, minDate) === -1) {
-        return minDate;
+    const canSwitch = (0, import_vue2.computed)(() => props.switchMode !== "none");
+    const minDate = (0, import_vue2.computed)(() => {
+      if (!props.minDate && !canSwitch.value) {
+        return (0, import_utils2.getToday)();
+      }
+      return props.minDate;
+    });
+    const maxDate = (0, import_vue2.computed)(() => {
+      if (!props.maxDate && !canSwitch.value) {
+        return (0, import_utils2.getMonthByOffset)((0, import_utils2.getToday)(), 6);
       }
-      if ((0, import_utils2.compareDay)(date, maxDate) === 1) {
-        return maxDate;
+      return props.maxDate;
+    });
+    const limitDateRange = (date, min = minDate.value, max = maxDate.value) => {
+      if (min && (0, import_utils2.compareDay)(date, min) === -1) {
+        return min;
+      }
+      if (max && (0, import_utils2.compareDay)(date, max) === 1) {
+        return max;
       }
       return date;
     };
     const getInitialDate = (defaultDate = props.defaultDate) => {
       const {
         type,
-        minDate,
-        maxDate,
         allowSameDay
       } = props;
       if (defaultDate === null) {
@@ -122,8 +129,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if (!Array.isArray(defaultDate)) {
           defaultDate = [];
         }
-        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : (0, import_utils2.getPrevDay)(maxDate));
-        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : (0, import_utils2.getNextDay)(minDate));
+        const min = minDate.value;
+        const max = maxDate.value;
+        const start = limitDateRange(defaultDate[0] || now, min, max ? allowSameDay ? max : (0, import_utils2.getPrevDay)(max) : void 0);
+        const end = limitDateRange(defaultDate[1] || (allowSameDay ? now : (0, import_utils2.getNextDay)(now)), min ? allowSameDay ? min : (0, import_utils2.getNextDay)(min) : void 0);
         return [start, end];
       }
       if (type === "multiple") {
@@ -137,23 +146,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return limitDateRange(defaultDate);
     };
+    const getInitialPanelDate = () => {
+      const date = Array.isArray(currentDate.value) ? currentDate.value[0] : currentDate.value;
+      return date ? date : limitDateRange((0, import_utils2.getToday)());
+    };
     let bodyHeight;
     const bodyRef = (0, import_vue2.ref)();
-    const subtitle = (0, import_vue2.ref)({
-      textFn: () => "",
-      date: void 0
-    });
     const currentDate = (0, import_vue2.ref)(getInitialDate());
+    const currentPanelDate = (0, import_vue2.ref)(getInitialPanelDate());
+    const currentMonthRef = (0, import_vue2.ref)();
     const [monthRefs, setMonthRefs] = (0, import_use_refs.useRefs)();
     const dayOffset = (0, import_vue2.computed)(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
     const months = (0, import_vue2.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 ((0, import_utils2.compareMonth)(cursor, props.maxDate) !== 1);
+      } while ((0, import_utils2.compareMonth)(cursor, maxDate.value) !== 1);
       return months2;
     });
     const buttonDisabled = (0, import_vue2.computed)(() => {
@@ -203,25 +217,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = {
-          textFn: currentMonth.getTitle,
-          date: currentMonth.date
-        };
+        currentMonthRef.value = currentMonth;
       }
     };
     const scrollToDate = (targetDate) => {
-      (0, import_use.raf)(() => {
-        months.value.some((month, index) => {
-          if ((0, import_utils2.compareMonth)(month, targetDate) === 0) {
-            if (bodyRef.value) {
-              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+      if (canSwitch.value) {
+        currentPanelDate.value = targetDate;
+      } else {
+        (0, import_use.raf)(() => {
+          months.value.some((month, index) => {
+            if ((0, import_utils2.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) {
@@ -232,7 +247,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if ((0, import_utils.isDate)(targetDate)) {
           scrollToDate(targetDate);
         }
-      } else {
+      } else if (!canSwitch.value) {
         (0, import_use.raf)(onScroll);
       }
     };
@@ -240,9 +255,11 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (props.poppable && !props.show) {
         return;
       }
-      (0, import_use.raf)(() => {
-        bodyHeight = Math.floor((0, import_use.useRect)(bodyRef).height);
-      });
+      if (!canSwitch.value) {
+        (0, import_use.raf)(() => {
+          bodyHeight = Math.floor((0, import_use.useRect)(bodyRef).height);
+        });
+      }
       scrollToCurrentDate();
     };
     const reset = (date = getInitialDate()) => {
@@ -264,6 +281,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return true;
     };
+    const onPanelChange = (date) => {
+      currentPanelDate.value = date;
+      emit("panelChange", {
+        date
+      });
+    };
     const onConfirm = () => {
       var _a;
       return emit("confirm", (_a = currentDate.value) != null ? _a : (0, import_utils2.cloneDates)(currentDate.value));
@@ -355,12 +378,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const renderMonth = (date, index) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return (0, import_vue.createVNode)(import_CalendarMonth.default, (0, import_vue.mergeProps)({
-        "ref": setMonthRefs(index),
+        "ref": canSwitch.value ? currentMonthRef : setMonthRefs(index),
         "date": date,
         "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
-        "firstDayOfWeek": dayOffset.value
-      }, (0, import_utils.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
+      }, (0, import_utils.pick)(props, ["type", "color", "showMark", "formatter", "rowHeight", "showSubtitle", "allowSameDay"]), {
         "onClick": onClickDay,
         "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
       }), (0, import_utils.pick)(slots, ["top-info", "bottom-info", "month-title"]));
@@ -395,25 +421,29 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }]
     }, [renderFooterButton()]);
     const renderCalendar = () => {
-      const subTitle = subtitle.value.textFn();
+      var _a, _b;
       return (0, import_vue.createVNode)("div", {
         "class": (0, import_utils2.bem)()
       }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
-        "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)
-      }, (0, import_utils.pick)(slots, ["title", "subtitle"])), (0, import_vue.createVNode)("div", {
+        "onClickSubtitle": (event) => emit("clickSubtitle", event),
+        "onPanelChange": onPanelChange
+      }, (0, import_utils.pick)(slots, ["title", "subtitle", "prev-month", "prev-year", "next-month", "next-year"])), (0, import_vue.createVNode)("div", {
         "ref": bodyRef,
         "class": (0, import_utils2.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()]);
     };
     (0, import_vue2.watch)(() => props.show, init);
-    (0, import_vue2.watch)(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
+    (0, import_vue2.watch)(() => [props.type, props.minDate, props.maxDate, props.switchMode], () => reset(getInitialDate(currentDate.value)));
     (0, import_vue2.watch)(() => props.defaultDate, (value = null) => {
       currentDate.value = value;
       scrollToCurrentDate();

package/lib/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/lib/calendar/CalendarHeader.js

@@ -24,22 +24,42 @@ var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_utils2 = require("./utils");
+var import_icon = require("../icon");
 const [name] = (0, import_utils.createNamespace)("calendar-header");
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: {
     date: Date,
+    minDate: Date,
+    maxDate: Date,
     title: String,
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
-    firstDayOfWeek: Number
+    firstDayOfWeek: Number,
+    switchMode: (0, import_utils.makeStringProp)("none")
   },
-  emits: ["clickSubtitle"],
+  emits: ["clickSubtitle", "panelChange"],
   setup(props, {
     slots,
     emit
   }) {
+    const prevMonthDisabled = (0, import_vue2.computed)(() => {
+      const prevMonth = (0, import_utils2.getPrevMonth)(props.date);
+      return props.minDate && prevMonth < props.minDate;
+    });
+    const prevYearDisabled = (0, import_vue2.computed)(() => {
+      const prevYear = (0, import_utils2.getPrevYear)(props.date);
+      return props.minDate && prevYear < props.minDate;
+    });
+    const nextMonthDisabled = (0, import_vue2.computed)(() => {
+      const nextMonth = (0, import_utils2.getNextMonth)(props.date);
+      return props.maxDate && nextMonth > props.maxDate;
+    });
+    const nextYearDisabled = (0, import_vue2.computed)(() => {
+      const nextYear = (0, import_utils2.getNextYear)(props.date);
+      return props.maxDate && nextYear > props.maxDate;
+    });
     const renderTitle = () => {
       if (props.showTitle) {
         const text = props.title || (0, import_utils2.t)("title");
@@ -50,16 +70,60 @@ var stdin_default = (0, import_vue2.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 ? import_utils2.getNextMonth : import_utils2.getPrevMonth)(props.date));
+      const onYearChange = () => onPanelChange((isNext ? import_utils2.getNextYear : import_utils2.getPrevYear)(props.date));
+      const MonthAction = (0, import_vue.createVNode)("view", {
+        "class": (0, import_utils2.bem)("header-action", {
+          disabled: monthDisabled
+        }),
+        "onClick": monthDisabled ? void 0 : onMonthChange
+      }, [monthSlot ? monthSlot({
+        disabled: monthDisabled
+      }) : (0, import_vue.createVNode)(import_icon.Icon, {
+        "class": {
+          [import_utils.HAPTICS_FEEDBACK]: !monthDisabled
+        },
+        "name": monthIconName
+      }, null)]);
+      const YearAction = showYearAction && (0, import_vue.createVNode)("view", {
+        "class": (0, import_utils2.bem)("header-action", {
+          disabled: yearDisabled
+        }),
+        "onClick": yearDisabled ? void 0 : onYearChange
+      }, [yearSlot ? yearSlot({
+        disabled: yearDisabled
+      }) : (0, import_vue.createVNode)(import_icon.Icon, {
+        "class": {
+          [import_utils.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 (0, import_vue.createVNode)("div", {
-          "class": (0, import_utils2.bem)("header-subtitle"),
+          "class": (0, import_utils2.bem)("header-subtitle", {
+            "with-swicth": canSwitch
+          }),
           "onClick": onClickSubtitle
-        }, [title]);
+        }, [canSwitch ? [renderAction(), (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("header-subtitle-text")
+        }, [title]), renderAction(true)] : title]);
       }
     };
     const renderWeekDays = () => {

package/lib/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/lib/calendar/CalendarMonth.js

@@ -44,8 +44,8 @@ const calendarMonthProps = {
   date: (0, import_utils.makeRequiredProp)(Date),
   type: String,
   color: String,
-  minDate: (0, import_utils.makeRequiredProp)(Date),
-  maxDate: (0, import_utils.makeRequiredProp)(Date),
+  minDate: Date,
+  maxDate: Date,
   showMark: Boolean,
   rowHeight: import_utils.numericProp,
   formatter: Function,
@@ -71,7 +71,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const title = (0, import_vue2.computed)(() => (0, import_utils3.formatMonthTitle)(props.date));
     const rowHeight = (0, import_vue2.computed)(() => (0, import_utils.addUnit)(props.rowHeight));
     const offset = (0, import_vue2.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;
       }
@@ -131,7 +133,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         maxDate,
         currentDate
       } = props;
-      if ((0, import_utils3.compareDay)(day, minDate) < 0 || (0, import_utils3.compareDay)(day, maxDate) > 0) {
+      if (minDate && (0, import_utils3.compareDay)(day, minDate) < 0 || maxDate && (0, import_utils3.compareDay)(day, maxDate) > 0) {
         return "disabled";
       }
       if (currentDate === null) {

package/lib/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/lib/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/lib/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/lib/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;

package/lib/calendar/utils.js

@@ -25,9 +25,15 @@ __export(stdin_exports, {
   compareMonth: () => compareMonth,
   formatMonthTitle: () => formatMonthTitle,
   getDayByOffset: () => getDayByOffset,
+  getMonthByOffset: () => getMonthByOffset,
   getNextDay: () => getNextDay,
+  getNextMonth: () => getNextMonth,
+  getNextYear: () => getNextYear,
   getPrevDay: () => getPrevDay,
+  getPrevMonth: () => getPrevMonth,
+  getPrevYear: () => getPrevYear,
   getToday: () => getToday,
+  getYearByOffset: () => getYearByOffset,
   name: () => name,
   t: () => t
 });
@@ -61,8 +67,22 @@ function getDayByOffset(date, offset) {
   cloned.setDate(cloned.getDate() + offset);
   return cloned;
 }
+function getMonthByOffset(date, offset) {
+  const cloned = cloneDate(date);
+  cloned.setMonth(cloned.getMonth() + offset);
+  return cloned;
+}
+function getYearByOffset(date, offset) {
+  const cloned = cloneDate(date);
+  cloned.setFullYear(cloned.getFullYear() + offset);
+  return cloned;
+}
 const getPrevDay = (date) => getDayByOffset(date, -1);
 const getNextDay = (date) => getDayByOffset(date, 1);
+const getPrevMonth = (date) => getMonthByOffset(date, -1);
+const getNextMonth = (date) => getMonthByOffset(date, 1);
+const getPrevYear = (date) => getYearByOffset(date, -1);
+const getNextYear = (date) => getYearByOffset(date, 1);
 const getToday = () => {
   const today = /* @__PURE__ */ new Date();
   today.setHours(0, 0, 0, 0);