vant 3.6.12 → 3.6.13

package/lib/calendar/Calendar.js

@@ -17,17 +17,21 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
+  calendarProps: () => calendarProps,
   default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
-var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_utils2 = require("./utils");
 var import_use = require("@vant/use");
@@ -41,6 +45,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,
@@ -68,16 +73,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,
@@ -85,28 +85,39 @@ const calendarProps = {
     validator: (val) => val >= 0 && val <= 6
   }
 };
-var stdin_default = (0, import_vue2.defineComponent)({
+var stdin_default = (0, import_vue.defineComponent)({
   name: import_utils2.name,
   props: calendarProps,
-  emits: ["select", "confirm", "unselect", "month-show", "over-range", "update:show", "click-subtitle"],
+  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_vue.computed)(() => props.switchMode !== "none");
+    const minDate = (0, import_vue.computed)(() => {
+      if (!props.minDate && !canSwitch.value) {
+        return (0, import_utils2.getToday)();
+      }
+      return props.minDate;
+    });
+    const maxDate = (0, import_vue.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) {
@@ -117,8 +128,13 @@ 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));
+        if (defaultDate.length === 1 && (0, import_utils2.compareDay)(defaultDate[0], now) === 1) {
+          defaultDate = [];
+        }
+        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") {
@@ -132,23 +148,31 @@ 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)("");
-    const currentDate = (0, import_vue2.ref)(getInitialDate());
+    const bodyRef = (0, import_vue.ref)();
+    const currentDate = (0, import_vue.ref)(getInitialDate());
+    const currentPanelDate = (0, import_vue.ref)(getInitialPanelDate());
+    const currentMonthRef = (0, import_vue.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 dayOffset = (0, import_vue.computed)(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
+    const months = (0, import_vue.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)(() => {
+    const buttonDisabled = (0, import_vue.computed)(() => {
       if (currentDate.value) {
         if (props.type === "range") {
           return !currentDate.value[0] || !currentDate.value[1];
@@ -182,7 +206,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           }
           if (!monthRefs.value[i].showed) {
             monthRefs.value[i].showed = true;
-            emit("month-show", {
+            emit("monthShow", {
               date: month.date,
               title: month.getTitle()
             });
@@ -195,22 +219,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = currentMonth.getTitle();
+        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) {
@@ -221,7 +249,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);
       }
     };
@@ -229,9 +257,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()) => {
@@ -244,15 +274,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
         rangePrompt,
         showRangePrompt
       } = props;
-      if (maxRange && (0, import_utils2.calcDateNum)(date) > maxRange) {
+      if (maxRange && (0, import_utils2.calcDateNum)(date) > +maxRange) {
         if (showRangePrompt) {
-          (0, import_toast.Toast)(rangePrompt || (0, import_utils2.t)("rangePrompt", maxRange));
+          (0, import_toast.showToast)(rangePrompt || (0, import_utils2.t)("rangePrompt", maxRange));
         }
-        emit("over-range");
+        emit("overRange");
         return false;
       }
       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));
@@ -278,7 +314,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       var _a;
       return (_a = disabledDays2.find((day) => (0, import_utils2.compareDay)(startDay, day.date) === -1 && (0, import_utils2.compareDay)(day.date, date) === -1)) == null ? void 0 : _a.date;
     };
-    const disabledDays = (0, import_vue2.computed)(() => monthRefs.value.reduce((arr, ref2) => {
+    const disabledDays = (0, import_vue.computed)(() => monthRefs.value.reduce((arr, ref2) => {
       var _a, _b;
       arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
       return arr;
@@ -331,8 +367,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if (selectedIndex !== -1) {
           const [unselectedDate] = dates.splice(selectedIndex, 1);
           emit("unselect", (0, import_utils2.cloneDate)(unselectedDate));
-        } else if (props.maxRange && dates.length >= props.maxRange) {
-          (0, import_toast.Toast)(props.rangePrompt || (0, import_utils2.t)("rangePrompt", props.maxRange));
+        } else if (props.maxRange && dates.length >= +props.maxRange) {
+          (0, import_toast.showToast)(props.rangePrompt || (0, import_utils2.t)("rangePrompt", props.maxRange));
         } else {
           select([...dates, date]);
         }
@@ -344,14 +380,18 @@ 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"]), {
-        "onClick": onClickDay
-      }), (0, import_utils.pick)(slots, ["top-info", "bottom-info"]));
+        "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", "text"]));
     };
     const renderFooterButton = () => {
       if (slots.footer) {
@@ -364,7 +404,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return (0, import_vue.createVNode)(import_button.Button, {
           "round": true,
           "block": true,
-          "type": "danger",
+          "type": "primary",
           "color": props.color,
           "class": (0, import_utils2.bem)("confirm"),
           "disabled": disabled,
@@ -382,25 +422,32 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "van-safe-area-bottom": props.safeAreaInsetBottom
       }]
     }, [renderFooterButton()]);
-    const renderCalendar = () => (0, import_vue.createVNode)("div", {
-      "class": (0, import_utils2.bem)()
-    }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
-      "title": props.title,
-      "subtitle": subtitle.value,
-      "showTitle": props.showTitle,
-      "showSubtitle": props.showSubtitle,
-      "firstDayOfWeek": dayOffset.value,
-      "onClick-subtitle": (event) => emit("click-subtitle", event)
-    }, (0, import_utils.pick)(slots, ["title", "subtitle"])), (0, import_vue.createVNode)("div", {
-      "ref": bodyRef,
-      "class": (0, import_utils2.bem)("body"),
-      "onScroll": onScroll
-    }, [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.defaultDate, (value = null) => {
-      currentDate.value = value;
-      scrollToCurrentDate();
+    const renderCalendar = () => {
+      var _a, _b;
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)()
+      }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
+        "date": (_a = currentMonthRef.value) == null ? void 0 : _a.date,
+        "maxDate": maxDate.value,
+        "minDate": minDate.value,
+        "title": props.title,
+        "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),
+        "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": canSwitch.value ? void 0 : onScroll
+      }, [canSwitch.value ? renderMonth(currentPanelDate.value, 0) : months.value.map(renderMonth)]), renderFooter()]);
+    };
+    (0, import_vue.watch)(() => props.show, init);
+    (0, import_vue.watch)(() => [props.type, props.minDate, props.maxDate, props.switchMode], () => reset(getInitialDate(currentDate.value)));
+    (0, import_vue.watch)(() => props.defaultDate, (value) => {
+      reset(value);
     });
     (0, import_use_expose.useExpose)({
       reset,

package/lib/calendar/CalendarDay.d.ts

@@ -1,6 +1,6 @@
 import { type PropType } from 'vue';
 import type { CalendarDayItem } from './types';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     item: {
         type: PropType<CalendarDayItem>;
         required: true;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     rowHeight: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "clickDisabledDate")[], "click" | "clickDisabledDate", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         type: PropType<CalendarDayItem>;
         required: true;
@@ -24,9 +24,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     rowHeight: StringConstructor;
-}>> & {
+}>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-}, {
+    onClickDisabledDate?: ((...args: any[]) => any) | undefined;
+}>, {
     offset: number;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/calendar/CalendarDay.js

@@ -21,11 +21,10 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
-var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_utils2 = require("./utils");
 const [name] = (0, import_utils.createNamespace)("calendar-day");
-var stdin_default = (0, import_vue2.defineComponent)({
+var stdin_default = (0, import_vue.defineComponent)({
   name,
   props: {
     item: (0, import_utils.makeRequiredProp)(Object),
@@ -34,12 +33,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
     offset: (0, import_utils.makeNumberProp)(0),
     rowHeight: String
   },
-  emits: ["click"],
+  emits: ["click", "clickDisabledDate"],
   setup(props, {
     emit,
     slots
   }) {
-    const style = (0, import_vue2.computed)(() => {
+    const style = (0, import_vue.computed)(() => {
       var _a;
       const {
         item,
@@ -80,6 +79,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const onClick = () => {
       if (props.item.type !== "disabled") {
         emit("click", props.item);
+      } else {
+        emit("clickDisabledDate", props.item);
       }
     };
     const renderTopInfo = () => {
@@ -102,6 +103,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, [slots["bottom-info"] ? slots["bottom-info"](props.item) : bottomInfo]);
       }
     };
+    const renderText = () => {
+      return slots.text ? slots.text(props.item) : props.item.text;
+    };
     const renderContent = () => {
       const {
         item,
@@ -109,10 +113,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
         rowHeight
       } = props;
       const {
-        type,
-        text
+        type
       } = item;
-      const Nodes = [renderTopInfo(), text, renderBottomInfo()];
+      const Nodes = [renderTopInfo(), renderText(), renderBottomInfo()];
       if (type === "selected") {
         return (0, import_vue.createVNode)("div", {
           "class": (0, import_utils2.bem)("selected-day"),

package/lib/calendar/CalendarHeader.d.ts

@@ -1,19 +1,36 @@
-declare const _default: import("vue").DefineComponent<{
+import type { CalendarSwitchMode } from './types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    date: DateConstructor;
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-subtitle"[], "click-subtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    switchMode: {
+        type: import("vue").PropType<T>;
+        default: CalendarSwitchMode;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, 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;
-}>> & {
-    "onClick-subtitle"?: ((...args: any[]) => any) | undefined;
-}, {
+    switchMode: {
+        type: import("vue").PropType<T>;
+        default: CalendarSwitchMode;
+    };
+}>> & Readonly<{
+    onClickSubtitle?: ((...args: any[]) => any) | undefined;
+    onPanelChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    switchMode: CalendarSwitchMode;
     showTitle: boolean;
     showSubtitle: boolean;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/calendar/CalendarHeader.js

@@ -21,24 +21,32 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 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)({
+var stdin_default = (0, import_vue.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: ["click-subtitle"],
+  emits: ["clickSubtitle", "panelChange"],
   setup(props, {
     slots,
     emit
   }) {
+    const prevMonthDisabled = (0, import_vue.computed)(() => props.date && props.minDate && (0, import_utils2.compareMonth)((0, import_utils2.getPrevMonth)(props.date), props.minDate) < 0);
+    const prevYearDisabled = (0, import_vue.computed)(() => props.date && props.minDate && (0, import_utils2.compareMonth)((0, import_utils2.getPrevYear)(props.date), props.minDate) < 0);
+    const nextMonthDisabled = (0, import_vue.computed)(() => props.date && props.maxDate && (0, import_utils2.compareMonth)((0, import_utils2.getNextMonth)(props.date), props.maxDate) > 0);
+    const nextYearDisabled = (0, import_vue.computed)(() => props.date && props.maxDate && (0, import_utils2.compareMonth)((0, import_utils2.getNextYear)(props.date), props.maxDate) > 0);
     const renderTitle = () => {
       if (props.showTitle) {
         const text = props.title || (0, import_utils2.t)("title");
@@ -48,14 +56,61 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, [title]);
       }
     };
-    const onClickSubtitle = (event) => emit("click-subtitle", event);
+    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() : props.subtitle;
+        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-switch": 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 = () => {