vant 4.8.10 → 4.9.0

package/lib/vant.es.js

@@ -3270,7 +3270,8 @@ const PICKER_GROUP_KEY = Symbol(name$1p);
 const pickerGroupProps = extend({
   tabs: makeArrayProp(),
   activeTab: makeNumericProp(0),
-  nextStepText: String
+  nextStepText: String,
+  showToolbar: truthProp
 }, pickerToolbarProps);
 var stdin_default$1A = defineComponent({
   name: name$1p,
@@ -3309,13 +3310,13 @@ var stdin_default$1A = defineComponent({
       const confirmButtonText = showNextButton() ? props2.nextStepText : props2.confirmButtonText;
       return createVNode("div", {
         "class": bem$1l()
-      }, [createVNode(stdin_default$1H, {
+      }, [props2.showToolbar ? createVNode(stdin_default$1H, {
         "title": props2.title,
         "cancelButtonText": props2.cancelButtonText,
         "confirmButtonText": confirmButtonText,
         "onConfirm": onConfirm,
         "onCancel": onCancel
-      }, pick(slots, pickerToolbarSlots)), createVNode(Tabs, {
+      }, pick(slots, pickerToolbarSlots)) : null, createVNode(Tabs, {
         "active": activeTab.value,
         "onUpdate:active": ($event) => activeTab.value = $event,
         "class": bem$1l("tabs"),
@@ -6152,8 +6153,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);
@@ -6333,8 +6348,8 @@ const calendarMonthProps = {
   date: makeRequiredProp(Date),
   type: String,
   color: String,
-  minDate: makeRequiredProp(Date),
-  maxDate: makeRequiredProp(Date),
+  minDate: Date,
+  maxDate: Date,
   showMark: Boolean,
   rowHeight: numericProp,
   formatter: Function,
@@ -6360,7 +6375,9 @@ var stdin_default$1h = defineComponent({
     const title = computed(() => formatMonthTitle(props2.date));
     const rowHeight = computed(() => addUnit(props2.rowHeight));
     const offset = computed(() => {
-      const realDay = props2.date.getDay();
+      const date = props2.date.getDate();
+      const day = props2.date.getDay();
+      const realDay = (day - date % 7 + 8) % 7;
       if (props2.firstDayOfWeek) {
         return (realDay + 7 - props2.firstDayOfWeek) % 7;
       }
@@ -6420,7 +6437,7 @@ var stdin_default$1h = defineComponent({
         maxDate,
         currentDate
       } = props2;
-      if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
+      if (minDate && compareDay(day, minDate) < 0 || maxDate && compareDay(day, maxDate) > 0) {
         return "disabled";
       }
       if (currentDate === null) {
@@ -6533,17 +6550,36 @@ var stdin_default$1g = defineComponent({
   name: name$16,
   props: {
     date: Date,
+    minDate: Date,
+    maxDate: Date,
     title: String,
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
-    firstDayOfWeek: Number
+    firstDayOfWeek: Number,
+    switchMode: makeStringProp("none")
   },
-  emits: ["clickSubtitle"],
+  emits: ["clickSubtitle", "panelChange"],
   setup(props2, {
     slots,
     emit
   }) {
+    const prevMonthDisabled = computed(() => {
+      const prevMonth = getPrevMonth(props2.date);
+      return props2.minDate && prevMonth < props2.minDate;
+    });
+    const prevYearDisabled = computed(() => {
+      const prevYear = getPrevYear(props2.date);
+      return props2.minDate && prevYear < props2.minDate;
+    });
+    const nextMonthDisabled = computed(() => {
+      const nextMonth = getNextMonth(props2.date);
+      return props2.maxDate && nextMonth > props2.maxDate;
+    });
+    const nextYearDisabled = computed(() => {
+      const nextYear = getNextYear(props2.date);
+      return props2.maxDate && nextYear > props2.maxDate;
+    });
     const renderTitle = () => {
       if (props2.showTitle) {
         const text = props2.title || t$g("title");
@@ -6554,16 +6590,60 @@ var stdin_default$1g = defineComponent({
       }
     };
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
+    const onPanelChange = (date) => emit("panelChange", date);
+    const renderAction = (isNext) => {
+      const showYearAction = props2.switchMode === "year-month";
+      const monthSlot = slots[isNext ? "next-month" : "prev-month"];
+      const yearSlot = slots[isNext ? "next-year" : "prev-year"];
+      const monthDisabled = isNext ? nextMonthDisabled.value : prevMonthDisabled.value;
+      const yearDisabled = isNext ? nextYearDisabled.value : prevYearDisabled.value;
+      const monthIconName = isNext ? "arrow" : "arrow-left";
+      const yearIconName = isNext ? "arrow-double-right" : "arrow-double-left";
+      const onMonthChange = () => onPanelChange((isNext ? getNextMonth : getPrevMonth)(props2.date));
+      const onYearChange = () => onPanelChange((isNext ? getNextYear : getPrevYear)(props2.date));
+      const MonthAction = createVNode("view", {
+        "class": bem$15("header-action", {
+          disabled: monthDisabled
+        }),
+        "onClick": monthDisabled ? void 0 : onMonthChange
+      }, [monthSlot ? monthSlot({
+        disabled: monthDisabled
+      }) : createVNode(Icon, {
+        "class": {
+          [HAPTICS_FEEDBACK]: !monthDisabled
+        },
+        "name": monthIconName
+      }, null)]);
+      const YearAction = showYearAction && createVNode("view", {
+        "class": bem$15("header-action", {
+          disabled: yearDisabled
+        }),
+        "onClick": yearDisabled ? void 0 : onYearChange
+      }, [yearSlot ? yearSlot({
+        disabled: yearDisabled
+      }) : createVNode(Icon, {
+        "class": {
+          [HAPTICS_FEEDBACK]: !yearDisabled
+        },
+        "name": yearIconName
+      }, null)]);
+      return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction];
+    };
     const renderSubtitle = () => {
       if (props2.showSubtitle) {
         const title = slots.subtitle ? slots.subtitle({
           date: props2.date,
           text: props2.subtitle
         }) : props2.subtitle;
+        const canSwitch = props2.switchMode !== "none";
         return createVNode("div", {
-          "class": bem$15("header-subtitle"),
+          "class": bem$15("header-subtitle", {
+            "with-swicth": canSwitch
+          }),
           "onClick": onClickSubtitle
-        }, [title]);
+        }, [canSwitch ? [renderAction(), createVNode("div", {
+          "class": bem$15("header-subtitle-text")
+        }, [title]), renderAction(true)] : title]);
       }
     };
     const renderWeekDays = () => {
@@ -6586,6 +6666,7 @@ var stdin_default$1g = defineComponent({
 const calendarProps = {
   show: Boolean,
   type: makeStringProp("single"),
+  switchMode: makeStringProp("none"),
   title: String,
   color: String,
   round: truthProp,
@@ -6613,16 +6694,11 @@ const calendarProps = {
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
-    validator: isDate,
-    default: getToday
+    validator: isDate
   },
   maxDate: {
     type: Date,
-    validator: isDate,
-    default: () => {
-      const now = getToday();
-      return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
-    }
+    validator: isDate
   },
   firstDayOfWeek: {
     type: numericProp,
@@ -6633,25 +6709,36 @@ const calendarProps = {
 var stdin_default$1f = defineComponent({
   name: name$19,
   props: calendarProps,
-  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate"],
+  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate", "panelChange"],
   setup(props2, {
     emit,
     slots
   }) {
-    const limitDateRange = (date, minDate = props2.minDate, maxDate = props2.maxDate) => {
-      if (compareDay(date, minDate) === -1) {
-        return minDate;
+    const canSwitch = computed(() => props2.switchMode !== "none");
+    const minDate = computed(() => {
+      if (!props2.minDate && !canSwitch.value) {
+        return getToday();
+      }
+      return props2.minDate;
+    });
+    const maxDate = computed(() => {
+      if (!props2.maxDate && !canSwitch.value) {
+        return getMonthByOffset(getToday(), 6);
+      }
+      return props2.maxDate;
+    });
+    const limitDateRange = (date, min = minDate.value, max = maxDate.value) => {
+      if (min && compareDay(date, min) === -1) {
+        return min;
       }
-      if (compareDay(date, maxDate) === 1) {
-        return maxDate;
+      if (max && compareDay(date, max) === 1) {
+        return max;
       }
       return date;
     };
     const getInitialDate = (defaultDate = props2.defaultDate) => {
       const {
         type,
-        minDate,
-        maxDate,
         allowSameDay
       } = props2;
       if (defaultDate === null) {
@@ -6662,8 +6749,10 @@ var stdin_default$1f = defineComponent({
         if (!Array.isArray(defaultDate)) {
           defaultDate = [];
         }
-        const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
-        const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
+        const min = minDate.value;
+        const max = maxDate.value;
+        const start = limitDateRange(defaultDate[0] || now, min, max ? allowSameDay ? max : getPrevDay(max) : void 0);
+        const end = limitDateRange(defaultDate[1] || (allowSameDay ? now : getNextDay(now)), min ? allowSameDay ? min : getNextDay(min) : void 0);
         return [start, end];
       }
       if (type === "multiple") {
@@ -6677,23 +6766,28 @@ var stdin_default$1f = defineComponent({
       }
       return limitDateRange(defaultDate);
     };
+    const getInitialPanelDate = () => {
+      const date = Array.isArray(currentDate.value) ? currentDate.value[0] : currentDate.value;
+      return date ? date : limitDateRange(getToday());
+    };
     let bodyHeight;
     const bodyRef = ref();
-    const subtitle = ref({
-      textFn: () => "",
-      date: void 0
-    });
     const currentDate = ref(getInitialDate());
+    const currentPanelDate = ref(getInitialPanelDate());
+    const currentMonthRef = ref();
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props2.firstDayOfWeek ? +props2.firstDayOfWeek % 7 : 0);
     const months = computed(() => {
       const months2 = [];
-      const cursor = new Date(props2.minDate);
+      if (!minDate.value || !maxDate.value) {
+        return months2;
+      }
+      const cursor = new Date(minDate.value);
       cursor.setDate(1);
       do {
         months2.push(new Date(cursor));
         cursor.setMonth(cursor.getMonth() + 1);
-      } while (compareMonth(cursor, props2.maxDate) !== 1);
+      } while (compareMonth(cursor, maxDate.value) !== 1);
       return months2;
     });
     const buttonDisabled = computed(() => {
@@ -6743,25 +6837,26 @@ var stdin_default$1f = defineComponent({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = {
-          textFn: currentMonth.getTitle,
-          date: currentMonth.date
-        };
+        currentMonthRef.value = currentMonth;
       }
     };
     const scrollToDate = (targetDate) => {
-      raf(() => {
-        months.value.some((month, index) => {
-          if (compareMonth(month, targetDate) === 0) {
-            if (bodyRef.value) {
-              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+      if (canSwitch.value) {
+        currentPanelDate.value = targetDate;
+      } else {
+        raf(() => {
+          months.value.some((month, index) => {
+            if (compareMonth(month, targetDate) === 0) {
+              if (bodyRef.value) {
+                monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+              }
+              return true;
             }
-            return true;
-          }
-          return false;
+            return false;
+          });
+          onScroll();
         });
-        onScroll();
-      });
+      }
     };
     const scrollToCurrentDate = () => {
       if (props2.poppable && !props2.show) {
@@ -6772,7 +6867,7 @@ var stdin_default$1f = defineComponent({
         if (isDate(targetDate)) {
           scrollToDate(targetDate);
         }
-      } else {
+      } else if (!canSwitch.value) {
         raf(onScroll);
       }
     };
@@ -6780,9 +6875,11 @@ var stdin_default$1f = defineComponent({
       if (props2.poppable && !props2.show) {
         return;
       }
-      raf(() => {
-        bodyHeight = Math.floor(useRect(bodyRef).height);
-      });
+      if (!canSwitch.value) {
+        raf(() => {
+          bodyHeight = Math.floor(useRect(bodyRef).height);
+        });
+      }
       scrollToCurrentDate();
     };
     const reset = (date = getInitialDate()) => {
@@ -6804,6 +6901,12 @@ var stdin_default$1f = defineComponent({
       }
       return true;
     };
+    const onPanelChange = (date) => {
+      currentPanelDate.value = date;
+      emit("panelChange", {
+        date
+      });
+    };
     const onConfirm = () => {
       var _a;
       return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
@@ -6895,12 +6998,15 @@ var stdin_default$1f = defineComponent({
     const renderMonth = (date, index) => {
       const showMonthTitle = index !== 0 || !props2.showSubtitle;
       return createVNode(stdin_default$1h, mergeProps({
-        "ref": setMonthRefs(index),
+        "ref": canSwitch.value ? currentMonthRef : setMonthRefs(index),
         "date": date,
         "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
-        "firstDayOfWeek": dayOffset.value
-      }, pick(props2, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+        "firstDayOfWeek": dayOffset.value,
+        "lazyRender": canSwitch.value ? false : props2.lazyRender,
+        "maxDate": maxDate.value,
+        "minDate": minDate.value
+      }, pick(props2, ["type", "color", "showMark", "formatter", "rowHeight", "showSubtitle", "allowSameDay"]), {
         "onClick": onClickDay,
         "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
       }), pick(slots, ["top-info", "bottom-info", "month-title"]));
@@ -6935,25 +7041,29 @@ var stdin_default$1f = defineComponent({
       }]
     }, [renderFooterButton()]);
     const renderCalendar = () => {
-      const subTitle = subtitle.value.textFn();
+      var _a, _b;
       return createVNode("div", {
         "class": bem$15()
       }, [createVNode(stdin_default$1g, {
-        "date": subtitle.value.date,
+        "date": (_a = currentMonthRef.value) == null ? void 0 : _a.date,
+        "maxDate": maxDate.value,
+        "minDate": minDate.value,
         "title": props2.title,
-        "subtitle": subTitle,
+        "subtitle": (_b = currentMonthRef.value) == null ? void 0 : _b.getTitle(),
         "showTitle": props2.showTitle,
         "showSubtitle": props2.showSubtitle,
+        "switchMode": props2.switchMode,
         "firstDayOfWeek": dayOffset.value,
-        "onClickSubtitle": (event) => emit("clickSubtitle", event)
-      }, pick(slots, ["title", "subtitle"])), createVNode("div", {
+        "onClickSubtitle": (event) => emit("clickSubtitle", event),
+        "onPanelChange": onPanelChange
+      }, pick(slots, ["title", "subtitle", "prev-month", "prev-year", "next-month", "next-year"])), createVNode("div", {
         "ref": bodyRef,
         "class": bem$15("body"),
-        "onScroll": onScroll
-      }, [months.value.map(renderMonth)]), renderFooter()]);
+        "onScroll": canSwitch.value ? void 0 : onScroll
+      }, [canSwitch.value ? renderMonth(currentPanelDate.value, 0) : months.value.map(renderMonth)]), renderFooter()]);
     };
     watch(() => props2.show, init);
-    watch(() => [props2.type, props2.minDate, props2.maxDate], () => reset(getInitialDate(currentDate.value)));
+    watch(() => [props2.type, props2.minDate, props2.maxDate, props2.switchMode], () => reset(getInitialDate(currentDate.value)));
     watch(() => props2.defaultDate, (value = null) => {
       currentDate.value = value;
       scrollToCurrentDate();
@@ -9831,8 +9941,14 @@ var stdin_default$T = defineComponent({
       const {
         activeColor
       } = parent.props;
+      const {
+        disabled
+      } = option;
       const active = option.value === props2.modelValue;
       const onClick = () => {
+        if (disabled) {
+          return;
+        }
         state.showPopup = false;
         if (option.value !== props2.modelValue) {
           emit("update:modelValue", option.value);
@@ -9843,7 +9959,7 @@ var stdin_default$T = defineComponent({
         if (active) {
           return createVNode(Icon, {
             "class": bem$K("icon"),
-            "color": activeColor,
+            "color": disabled ? void 0 : activeColor,
             "name": "success"
           }, null);
         }
@@ -9854,13 +9970,14 @@ var stdin_default$T = defineComponent({
         "icon": option.icon,
         "title": option.text,
         "class": bem$K("option", {
-          active
+          active,
+          disabled
         }),
         "style": {
           color: active ? activeColor : ""
         },
         "tabindex": active ? 0 : -1,
-        "clickable": true,
+        "clickable": !disabled,
         "onClick": onClick
       }, {
         value: renderIcon
@@ -10473,6 +10590,13 @@ var stdin_default$O = defineComponent({
         return chunks2;
       }, []);
       const lastChunk = chunks[chunks.length - 1];
+      if (!lastChunk) {
+        chunks.push({
+          start: 0,
+          end: sourceString.length,
+          highlight: false
+        });
+      }
       if (lastChunk && lastChunk.end < sourceString.length) {
         chunks.push({
           start: lastChunk.end,
@@ -10708,6 +10832,8 @@ var stdin_default$N = defineComponent({
     const checkClose = (event) => {
       var _a;
       const swipeItemEl = (_a = swipeItem.value) == null ? void 0 : _a.$el;
+      if (!swipeItemEl)
+        return;
       const imageEl = swipeItemEl.firstElementChild;
       const isClickOverlay = event.target === swipeItemEl;
       const isClickImage = imageEl == null ? void 0 : imageEl.contains(event.target);
@@ -11177,7 +11303,11 @@ var stdin_default$L = defineComponent({
         const match = getMatchAnchor(selectActiveIndex);
         if (match) {
           const rect = match.getRect(scrollParent.value, scrollParentRect);
-          active = getActiveAnchor(rect.top, rects);
+          if (props2.sticky && props2.stickyOffsetTop) {
+            active = getActiveAnchor(rect.top - props2.stickyOffsetTop, rects);
+          } else {
+            active = getActiveAnchor(rect.top, rects);
+          }
         }
       } else {
         active = getActiveAnchor(scrollTop, rects);
@@ -11250,7 +11380,11 @@ var stdin_default$L = defineComponent({
           return;
         }
         if (props2.sticky && props2.stickyOffsetTop) {
-          setRootScrollTop(getRootScrollTop() - props2.stickyOffsetTop);
+          if (getRootScrollTop() === offsetHeight - scrollParentRect.height) {
+            setRootScrollTop(getRootScrollTop());
+          } else {
+            setRootScrollTop(getRootScrollTop() - props2.stickyOffsetTop);
+          }
         }
         emit("select", match.index);
       }
@@ -16865,7 +16999,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.8.10";
+const version = "4.9.0";
 function install(app) {
   const components = [
     ActionBar,