zartui 3.0.6 → 3.0.8

package/es/button/Button.d.ts

@@ -12,6 +12,7 @@ declare const buttonProps: {
     };
     text: StringConstructor;
     icon: StringConstructor;
+    iconColor: StringConstructor;
     type: {
         type: PropType<ButtonType>;
         default: ButtonType;
@@ -57,6 +58,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     text: StringConstructor;
     icon: StringConstructor;
+    iconColor: StringConstructor;
     type: {
         type: PropType<ButtonType>;
         default: ButtonType;
@@ -100,6 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     text: StringConstructor;
     icon: StringConstructor;
+    iconColor: StringConstructor;
     type: {
         type: PropType<ButtonType>;
         default: ButtonType;

package/es/button/Button.mjs

@@ -9,6 +9,7 @@ const buttonProps = extend({}, routeProps, {
   tag: makeStringProp("button"),
   text: String,
   icon: String,
+  iconColor: String,
   type: makeStringProp("default"),
   size: makeStringProp("normal"),
   color: String,
@@ -64,6 +65,7 @@ var stdin_default = defineComponent({
       if (props.icon) {
         return _createVNode(Icon, {
           "name": props.icon,
+          "color": props.iconColor,
           "class": bem("icon", size),
           "classPrefix": props.iconPrefix
         }, null);

package/es/button/index.d.ts

@@ -9,6 +9,7 @@ export declare const Button: import("../utils").WithInstall<import("vue").Define
     };
     text: StringConstructor;
     icon: StringConstructor;
+    iconColor: StringConstructor;
     type: {
         type: import("vue").PropType<import("./types").ButtonType>;
         default: import("./types").ButtonType;
@@ -52,6 +53,7 @@ export declare const Button: import("../utils").WithInstall<import("vue").Define
     };
     text: StringConstructor;
     icon: StringConstructor;
+    iconColor: StringConstructor;
     type: {
         type: import("vue").PropType<import("./types").ButtonType>;
         default: import("./types").ButtonType;

package/es/calendar/Calendar.d.ts

@@ -1,8 +1,12 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { PopupPosition } from '../popup';
-import type { CalendarType, CalendarDayItem } from './types';
+import type { CalendarType, CalendarDayItem, CalendarShowType } from './types';
 export declare const calendarProps: {
     show: BooleanConstructor;
+    showType: {
+        type: PropType<CalendarShowType>;
+        default: CalendarShowType;
+    };
     type: {
         type: PropType<CalendarType>;
         default: CalendarType;
@@ -74,25 +78,22 @@ export declare const calendarProps: {
         type: BooleanConstructor;
         default: true;
     };
-    minDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
-    maxDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
+    disabledDate: PropType<(date: Date) => boolean>;
 };
 export declare type CalendarProps = ExtractPropTypes<typeof calendarProps>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
+    showType: {
+        type: PropType<CalendarShowType>;
+        default: CalendarShowType;
+    };
     type: {
         type: PropType<CalendarType>;
         default: CalendarType;
@@ -164,23 +165,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    minDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
-    maxDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
+    disabledDate: PropType<(date: Date) => boolean>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "cancel" | "clickSubtitle" | "confirm" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "cancel" | "clickSubtitle" | "confirm" | "unselect" | "monthShow" | "overRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
+    showType: {
+        type: PropType<CalendarShowType>;
+        default: CalendarShowType;
+    };
     type: {
         type: PropType<CalendarType>;
         default: CalendarType;
@@ -252,21 +250,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    minDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
-    maxDate: {
-        type: DateConstructor;
-        validator: (val: unknown) => val is Date;
-        default: () => Date;
-    };
+    minDate: DateConstructor;
+    maxDate: DateConstructor;
     firstDayOfWeek: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
         validator: (val: number) => boolean;
     };
+    disabledDate: PropType<(date: Date) => boolean>;
 }>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
@@ -288,6 +279,7 @@ declare const _default: import("vue").DefineComponent<{
     safeAreaInsetTop: boolean;
     safeAreaInsetBottom: boolean;
     popup: boolean;
+    showType: CalendarShowType;
     maxRange: string | number;
     showMark: boolean;
     showTitle: boolean;
@@ -295,8 +287,6 @@ declare const _default: import("vue").DefineComponent<{
     allowSameDay: boolean;
     showSubtitle: boolean;
     showRangePrompt: boolean;
-    minDate: Date;
-    maxDate: Date;
     firstDayOfWeek: string | number;
 }>;
 export default _default;

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, getPrevDate, getNextDate, compareDay, calcDateNum, compareMonth, getDayByOffset, getFirstDate, formatMonthTitle } from "./utils.mjs";
 import { raf, useRect, onMountedOrActivated } from "@zartui/use";
 import { useRefs } from "../composables/use-refs.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -12,6 +12,7 @@ import CalendarMonth from "./CalendarMonth.mjs";
 import CalendarHeader from "./CalendarHeader.mjs";
 const calendarProps = {
   show: Boolean,
+  showType: makeStringProp("inline"),
   type: makeStringProp("single"),
   title: String,
   color: String,
@@ -38,24 +39,14 @@ const calendarProps = {
   closeOnClickOverlay: truthProp,
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
-  minDate: {
-    type: Date,
-    validator: isDate,
-    default: getToday
-  },
-  maxDate: {
-    type: Date,
-    validator: isDate,
-    default: () => {
-      const now = getToday();
-      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-    }
-  },
+  minDate: Date,
+  maxDate: Date,
   firstDayOfWeek: {
     type: numericProp,
-    default: 0,
+    default: 1,
     validator: (val) => val >= 0 && val <= 6
-  }
+  },
+  disabledDate: Function
 };
 var stdin_default = defineComponent({
   name,
@@ -65,11 +56,19 @@ var stdin_default = defineComponent({
     emit,
     slots
   }) {
-    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
-      if (compareDay(date, minDate) === -1) {
+    const lastMinDate = computed(() => {
+      const now = new Date();
+      return props.showType !== "inline" && !props.minDate ? new Date(now.getFullYear(), now.getMonth() - 3, now.getDate()) : props.minDate;
+    });
+    const lastMaxDate = computed(() => {
+      const now = new Date();
+      return props.showType !== "inline" && !props.maxDate ? new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()) : props.maxDate;
+    });
+    const limitDateRange = (date, minDate = lastMinDate.value, maxDate = lastMaxDate.value) => {
+      if (minDate && compareDay(date, minDate) === -1) {
         return minDate;
       }
-      if (compareDay(date, maxDate) === 1) {
+      if (maxDate && compareDay(date, maxDate) === 1) {
         return maxDate;
       }
       return date;
@@ -77,10 +76,10 @@ var stdin_default = defineComponent({
     const getInitialDate = (defaultDate = props.defaultDate) => {
       const {
         type,
-        minDate,
-        maxDate,
         allowSameDay
       } = props;
+      const minDate = lastMinDate.value;
+      const maxDate = lastMaxDate.value;
       if (defaultDate === null) {
         return defaultDate;
       }
@@ -89,8 +88,8 @@ 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 start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : maxDate && getPrevDay(maxDate));
+        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : minDate && getNextDay(minDate));
         return [start, end];
       }
       if (type === "multiple") {
@@ -104,20 +103,40 @@ var stdin_default = defineComponent({
       }
       return limitDateRange(defaultDate);
     };
+    const getInitialTitleDate = (defaultDate = props.defaultDate) => {
+      const initTitleDate = getInitialDate(defaultDate);
+      const now = getToday();
+      if (Array.isArray(initTitleDate)) {
+        return initTitleDate[0] || now;
+      } else {
+        return initTitleDate || now;
+      }
+    };
     let bodyHeight;
     const bodyRef = ref();
     const subtitle = ref("");
     const currentDate = ref(getInitialDate());
+    const titleDate = ref(getInitialTitleDate());
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
     const months = computed(() => {
+      var _a;
       const months2 = [];
-      const cursor = new Date(props.minDate);
-      cursor.setDate(1);
-      do {
-        months2.push(new Date(cursor));
-        cursor.setMonth(cursor.getMonth() + 1);
-      } while (compareMonth(cursor, props.maxDate) !== 1);
+      if (props.showType !== "inline" && lastMinDate.value && lastMaxDate.value) {
+        const cursor = new Date(lastMinDate.value);
+        cursor.setDate(1);
+        do {
+          months2.push(new Date(cursor));
+          cursor.setMonth(cursor.getMonth() + 1);
+        } while (compareMonth(cursor, lastMaxDate.value) !== 1);
+      } else if (props.showType === "inline") {
+        const temp = (_a = titleDate.value) != null ? _a : cloneDates(titleDate.value);
+        if (!Array.isArray(temp)) {
+          months2.push(getFirstDate(temp));
+        } else {
+          months2.push(getFirstDate(temp[0]));
+        }
+      }
       return months2;
     });
     const buttonDisabled = computed(() => {
@@ -168,6 +187,7 @@ var stdin_default = defineComponent({
       });
       if (currentMonth) {
         subtitle.value = currentMonth.getTitle();
+        titleDate.value = currentMonth.getDate();
       }
     };
     const scrollToDate = (targetDate) => {
@@ -208,6 +228,7 @@ var stdin_default = defineComponent({
     };
     const reset = (date = getInitialDate()) => {
       currentDate.value = date;
+      titleDate.value = getInitialTitleDate(date);
       scrollToCurrentDate();
     };
     const checkRange = (date) => {
@@ -269,6 +290,9 @@ var stdin_default = defineComponent({
       const {
         type
       } = props;
+      if (item.type === "preview") {
+        titleDate.value = date;
+      }
       if (type === "range") {
         if (!currentDate.value) {
           select([date]);
@@ -316,6 +340,64 @@ var stdin_default = defineComponent({
         select(date, true);
       }
     };
+    const yearPreEnable = computed(() => {
+      if (!lastMinDate.value) {
+        return true;
+      }
+      return titleDate.value.getFullYear() > lastMinDate.value.getFullYear();
+    });
+    const monthPreEnable = computed(() => {
+      if (!lastMinDate.value) {
+        return true;
+      }
+      const targetDate = titleDate.value;
+      const targetYearMonth = getFirstDate(targetDate);
+      const minDateYearMonth = getFirstDate(lastMinDate.value);
+      return compareDay(targetYearMonth, minDateYearMonth) === 1;
+    });
+    const yearNextEnable = computed(() => {
+      if (!lastMaxDate.value) {
+        return true;
+      }
+      return titleDate.value.getFullYear() < lastMaxDate.value.getFullYear();
+    });
+    const monthNextEnable = computed(() => {
+      if (!lastMaxDate.value) {
+        return true;
+      }
+      const targetDate = titleDate.value;
+      const targetYearMonth = getFirstDate(targetDate);
+      const maxDateYearMonth = getFirstDate(lastMaxDate.value);
+      return compareDay(maxDateYearMonth, targetYearMonth) === 1;
+    });
+    const onClickTitleIcon = (isPreFlag, isMonth, isYear) => {
+      const curTitleDate = titleDate.value;
+      if (curTitleDate) {
+        let targetDate = isPreFlag ? getPrevDate(curTitleDate, isMonth, isYear) : getNextDate(curTitleDate, isMonth, isYear);
+        if (!isDate(targetDate)) {
+          return;
+        }
+        let hasCompared = false;
+        const compareDate = isPreFlag ? lastMinDate.value : lastMaxDate.value;
+        const compareValue = isPreFlag ? 1 : -1;
+        if (compareDate && compareDay(compareDate, targetDate) === compareValue && compareMonth(compareDate, targetDate) === 0) {
+          targetDate = compareDate;
+          hasCompared = true;
+        }
+        if (hasCompared || !compareDate || compareDate && compareDay(compareDate, targetDate) !== compareValue) {
+          scrollToDate(targetDate);
+          titleDate.value = targetDate;
+        }
+      } else {
+        raf(onScroll);
+      }
+    };
+    const onClickPreIcon = (isMonth, isYear) => {
+      onClickTitleIcon(true, isMonth, isYear);
+    };
+    const onClickNextIcon = (isMonth, isYear) => {
+      onClickTitleIcon(false, isMonth, isYear);
+    };
     const updateShow = (value) => emit("update:show", value);
     const renderMonth = (date, index) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
@@ -325,7 +407,7 @@ var stdin_default = defineComponent({
         "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
         "firstDayOfWeek": dayOffset.value
-      }, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+      }, pick(props, ["showType", "type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay", "disabledDate"]), {
         "onClick": onClickDay
       }), pick(slots, ["top-info", "bottom-info"]));
     };
@@ -375,7 +457,13 @@ var stdin_default = defineComponent({
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,
-      "onClickSubtitle": (event) => emit("clickSubtitle", event)
+      "onClickSubtitle": (event) => emit("clickSubtitle", event),
+      "onClickPreIcon": onClickPreIcon,
+      "onClickNextIcon": onClickNextIcon,
+      "yearPreEnable": yearPreEnable.value,
+      "monthPreEnable": monthPreEnable.value,
+      "yearNextEnable": yearNextEnable.value,
+      "monthNextEnable": monthNextEnable.value
     }, pick(slots, ["title", "subtitle"])), _createVNode("div", {
       "ref": bodyRef,
       "class": bem("body"),
@@ -387,6 +475,11 @@ var stdin_default = defineComponent({
       currentDate.value = value;
       scrollToCurrentDate();
     });
+    watch(titleDate, (newValue) => {
+      if (props.showType === "inline" && newValue) {
+        subtitle.value = formatMonthTitle(newValue);
+      }
+    });
     useExpose({
       reset,
       scrollToDate,

package/es/calendar/CalendarDay.mjs

@@ -32,7 +32,7 @@ var stdin_default = defineComponent({
         style2.width = "100%";
         return style2;
       }
-      if (index === 0) {
+      if (index === 0 && item.text && +item.text === 1) {
         style2.marginLeft = `${100 * offset / 7}%`;
       }
       if (color) {

package/es/calendar/CalendarHeader.d.ts

@@ -7,7 +7,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    yearPreEnable: BooleanConstructor;
+    monthPreEnable: BooleanConstructor;
+    yearNextEnable: BooleanConstructor;
+    monthNextEnable: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickSubtitle" | "clickPreIcon" | "clickNextIcon")[], "clickSubtitle" | "clickPreIcon" | "clickNextIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
@@ -16,11 +20,21 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    yearPreEnable: BooleanConstructor;
+    monthPreEnable: BooleanConstructor;
+    yearNextEnable: BooleanConstructor;
+    monthNextEnable: BooleanConstructor;
 }>> & {
     onClickSubtitle?: ((...args: any[]) => any) | undefined;
+    onClickPreIcon?: ((...args: any[]) => any) | undefined;
+    onClickNextIcon?: ((...args: any[]) => any) | undefined;
 }, {
     showTitle: boolean;
     showSubtitle: boolean;
     firstDayOfWeek: number;
+    yearPreEnable: boolean;
+    monthPreEnable: boolean;
+    yearNextEnable: boolean;
+    monthNextEnable: boolean;
 }>;
 export default _default;

package/es/calendar/CalendarHeader.mjs

@@ -10,9 +10,13 @@ var stdin_default = defineComponent({
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
-    firstDayOfWeek: makeNumberProp(1)
+    firstDayOfWeek: makeNumberProp(1),
+    yearPreEnable: Boolean,
+    monthPreEnable: Boolean,
+    yearNextEnable: Boolean,
+    monthNextEnable: Boolean
   },
-  emits: ["clickSubtitle"],
+  emits: ["clickSubtitle", "clickPreIcon", "clickNextIcon"],
   setup(props, {
     slots,
     emit
@@ -27,13 +31,111 @@ var stdin_default = defineComponent({
       }
     };
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
+    const onClickPreIcon = (isMonth, isYear) => () => {
+      if (isMonth && !props.monthPreEnable || isYear && !props.yearPreEnable) {
+        return;
+      }
+      emit("clickPreIcon", isMonth, isYear);
+    };
+    const onClickNextIcon = (isMonth, isYear) => () => {
+      if (isMonth && !props.monthNextEnable || isYear && !props.yearNextEnable) {
+        return;
+      }
+      emit("clickNextIcon", isMonth, isYear);
+    };
+    const fastForwardImg = () => _createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1"
+    }, [_createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [_createVNode("g", {
+      "transform": "translate(-32.000000, -320.000000)",
+      "fill": "#0091FA",
+      "fill-rule": "nonzero"
+    }, [_createVNode("g", {
+      "transform": "translate(0.000000, 70.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(0.000000, 236.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(32.000000, 12.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(8.000000, 10.000000) scale(-1, 1) translate(-8.000000, -10.000000) translate(0.000000, 2.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(0.500000, 2.000000)"
+    }, [_createVNode("path", {
+      "d": "M6.79659726,4.25543258 L3.35183004,7.88886609 C3.14952477,8.10225141 2.77635057,8.13960837 2.51832213,7.9723052 C2.48075622,7.94794782 2.4468797,7.91993249 2.41742642,7.88886609 L-1.02734079,4.25543258 C-1.22964607,4.04204726 -1.18447352,3.73343826 -0.926445085,3.56613509 C-0.821927664,3.49836699 -0.69295109,3.46153846 -0.560138985,3.46153846 L6.32939545,3.46153846 C6.65727667,3.46153846 6.92307692,3.68135095 6.92307692,3.95250339 C6.92307692,4.06233684 6.87854337,4.16899837 6.79659726,4.25543258 Z",
+      "opacity": "0.3",
+      "transform": "translate(2.884615, 5.769231) rotate(-90.000000) translate(-2.884615, -5.769231) "
+    }, null), _createVNode("path", {
+      "d": "M12.5116225,3.49853348 L7.59052644,8.94868375 C7.3015189,9.26876173 6.7684129,9.32479717 6.39980085,9.07384242 C6.34613526,9.03730635 6.29774023,8.99528335 6.25566412,8.94868375 L1.3345681,3.49853348 C1.04556056,3.1784555 1.11009277,2.715542 1.47870482,2.46458724 C1.62801542,2.3629351 1.81226767,2.30769231 2.00199925,2.30769231 L11.8441913,2.30769231 C12.3125931,2.30769231 12.6923077,2.63741103 12.6923077,3.0441397 C12.6923077,3.20888987 12.6286883,3.36888217 12.5116225,3.49853348 Z",
+      "opacity": "0.8",
+      "transform": "translate(6.923077, 5.769231) rotate(-90.000000) translate(-6.923077, -5.769231) "
+    }, null), _createVNode("path", {
+      "d": "M17.1270071,3.49853348 L12.2059111,8.94868375 C11.9169035,9.26876173 11.3837975,9.32479717 11.0151855,9.07384242 C10.9615199,9.03730635 10.9131248,8.99528335 10.8710487,8.94868375 L5.94995271,3.49853348 C5.66094518,3.1784555 5.72547739,2.715542 6.09408944,2.46458724 C6.24340004,2.3629351 6.42765229,2.30769231 6.61738387,2.30769231 L16.4595759,2.30769231 C16.9279777,2.30769231 17.3076923,2.63741103 17.3076923,3.0441397 C17.3076923,3.20888987 17.2440729,3.36888217 17.1270071,3.49853348 Z",
+      "opacity": "0.8",
+      "transform": "translate(11.538462, 5.769231) rotate(-90.000000) translate(-11.538462, -5.769231) "
+    }, null)])])])])])])])]);
+    const slowForward = () => _createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1"
+    }, [_createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [_createVNode("g", {
+      "transform": "translate(-80.000000, -320.000000)",
+      "fill": "#0091FA",
+      "fill-rule": "nonzero"
+    }, [_createVNode("g", {
+      "transform": "translate(0.000000, 70.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(0.000000, 236.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(32.000000, 12.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(56.000000, 10.000000) scale(-1, 1) translate(-56.000000, -10.000000) translate(48.000000, 2.000000)"
+    }, [_createVNode("g", {
+      "transform": "translate(3.000000, 2.000000)"
+    }, [_createVNode("path", {
+      "d": "M7.06846115,4.42564988 L3.48590324,8.20442073 C3.27550576,8.42634147 2.88740459,8.46519271 2.61905502,8.29119741 C2.57998647,8.26586573 2.54475489,8.23672979 2.51412348,8.20442073 L-1.06843443,4.42564988 C-1.27883191,4.20372915 -1.23185246,3.88277579 -0.963502888,3.70878049 C-0.854804771,3.63830167 -0.720669133,3.6 -0.582544544,3.6 L6.58257127,3.6 C6.92356774,3.6 7.2,3.82860498 7.2,4.11060352 C7.2,4.22483031 7.1536851,4.3357583 7.06846115,4.42564988 Z",
+      "opacity": "0.3",
+      "transform": "translate(3.000000, 6.000000) rotate(-90.000000) translate(-3.000000, -6.000000) "
+    }, null), _createVNode("path", {
+      "d": "M13.0120874,3.63847482 L7.89414749,9.3066311 C7.59357966,9.6395122 7.03914942,9.69778906 6.65579288,9.43679611 C6.59998067,9.3987986 6.54964984,9.35509469 6.50589069,9.3066311 L1.38795082,3.63847482 C1.08738299,3.30559372 1.15449649,2.82416368 1.53785302,2.56317073 C1.69313604,2.4574525 1.88475838,2.4 2.08207922,2.4 L12.317959,2.4 C12.8050968,2.4 13.2,2.74290748 13.2,3.16590528 C13.2,3.33724547 13.1338359,3.50363746 13.0120874,3.63847482 Z",
+      "opacity": "0.8",
+      "transform": "translate(7.200000, 6.000000) rotate(-90.000000) translate(-7.200000, -6.000000) "
+    }, null)])])])])])])])]);
     const renderSubtitle = () => {
       if (props.showSubtitle) {
         const title = slots.subtitle ? slots.subtitle() : props.subtitle;
         return _createVNode("div", {
-          "class": bem("header-subtitle"),
+          "class": bem("header-subtitle")
+        }, [_createVNode("div", {
+          "class": bem("header-subtitle", ["opt", props.yearPreEnable ? "enable" : "unenable"]),
+          "onClick": onClickPreIcon(false, true)
+        }, [fastForwardImg()]), _createVNode("div", {
+          "class": bem("header-subtitle", ["opt", props.monthPreEnable ? "enable" : "unenable"]),
+          "onClick": onClickPreIcon(true, false)
+        }, [slowForward()]), _createVNode("label", {
+          "class": bem("header-subtitle-text"),
           "onClick": onClickSubtitle
-        }, [title]);
+        }, [title]), _createVNode("div", {
+          "class": bem("header-subtitle", ["opt", "right", [props.monthNextEnable ? "enable" : "unenable"]]),
+          "onClick": onClickNextIcon(true, false)
+        }, [slowForward()]), _createVNode("div", {
+          "class": bem("header-subtitle", ["opt", "right", [props.yearNextEnable ? "enable" : "unenable"]]),
+          "onClick": onClickNextIcon(false, true)
+        }, [fastForwardImg()])]);
       }
     };
     const renderWeekDays = () => {