vant 3.2.1 → 3.2.5

package/es/calendar/Calendar.d.ts

@@ -1,9 +1,12 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { isDate } from '../utils';
 import { PopupPosition } from '../popup';
 import type { CalendarType, CalendarDayItem } from './types';
 declare const props: {
     show: BooleanConstructor;
+    type: {
+        type: PropType<CalendarType>;
+        default: CalendarType;
+    };
     title: StringConstructor;
     color: StringConstructor;
     round: {
@@ -15,6 +18,14 @@ declare const props: {
         type: BooleanConstructor;
         default: true;
     };
+    maxRange: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    position: {
+        type: PropType<PopupPosition>;
+        default: PopupPosition;
+    };
     teleport: PropType<string | import("vue").RendererElement | null | undefined>;
     showMark: {
         type: BooleanConstructor;
@@ -36,7 +47,7 @@ declare const props: {
         type: BooleanConstructor;
         default: true;
     };
-    defaultDate: any;
+    defaultDate: PropType<Date | Date[] | null>;
     allowSameDay: BooleanConstructor;
     showSubtitle: {
         type: BooleanConstructor;
@@ -46,6 +57,10 @@ declare const props: {
         type: BooleanConstructor;
         default: true;
     };
+    showRangePrompt: {
+        type: BooleanConstructor;
+        default: true;
+    };
     confirmDisabledText: StringConstructor;
     closeOnClickOverlay: {
         type: BooleanConstructor;
@@ -55,26 +70,14 @@ declare const props: {
         type: BooleanConstructor;
         default: true;
     };
-    type: {
-        type: PropType<CalendarType>;
-        default: string;
-    };
-    position: {
-        type: PropType<PopupPosition>;
-        default: string;
-    };
-    maxRange: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: null;
-    };
     minDate: {
         type: DateConstructor;
-        validator: typeof isDate;
+        validator: (val: unknown) => val is Date;
         default: () => Date;
     };
     maxDate: {
         type: DateConstructor;
-        validator: typeof isDate;
+        validator: (val: unknown) => val is Date;
         default: () => Date;
     };
     firstDayOfWeek: {
@@ -82,14 +85,14 @@ declare const props: {
         default: number;
         validator: (val: number) => boolean;
     };
-    showRangePrompt: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 };
 export declare type CalendarProps = ExtractPropTypes<typeof props>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
+    type: {
+        type: PropType<CalendarType>;
+        default: CalendarType;
+    };
     title: StringConstructor;
     color: StringConstructor;
     round: {
@@ -101,6 +104,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    maxRange: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    position: {
+        type: PropType<PopupPosition>;
+        default: PopupPosition;
+    };
     teleport: PropType<string | import("vue").RendererElement | null | undefined>;
     showMark: {
         type: BooleanConstructor;
@@ -122,7 +133,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    defaultDate: any;
+    defaultDate: PropType<Date | Date[] | null>;
     allowSameDay: BooleanConstructor;
     showSubtitle: {
         type: BooleanConstructor;
@@ -132,6 +143,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    showRangePrompt: {
+        type: BooleanConstructor;
+        default: true;
+    };
     confirmDisabledText: StringConstructor;
     closeOnClickOverlay: {
         type: BooleanConstructor;
@@ -141,26 +156,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    type: {
-        type: PropType<CalendarType>;
-        default: string;
-    };
-    position: {
-        type: PropType<PopupPosition>;
-        default: string;
-    };
-    maxRange: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: null;
-    };
     minDate: {
         type: DateConstructor;
-        validator: typeof isDate;
+        validator: (val: unknown) => val is Date;
         default: () => Date;
     };
     maxDate: {
         type: DateConstructor;
-        validator: typeof isDate;
+        validator: (val: unknown) => val is Date;
         default: () => Date;
     };
     firstDayOfWeek: {
@@ -168,17 +171,16 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validator: (val: number) => boolean;
     };
-    showRangePrompt: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range")[], "select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     show?: unknown;
+    type?: unknown;
     title?: unknown;
     color?: unknown;
     round?: unknown;
     readonly?: unknown;
     poppable?: unknown;
+    maxRange?: unknown;
+    position?: unknown;
     teleport?: unknown;
     showMark?: unknown;
     showTitle?: unknown;
@@ -192,16 +194,13 @@ declare const _default: import("vue").DefineComponent<{
     allowSameDay?: unknown;
     showSubtitle?: unknown;
     closeOnPopstate?: unknown;
+    showRangePrompt?: unknown;
     confirmDisabledText?: unknown;
     closeOnClickOverlay?: unknown;
     safeAreaInsetBottom?: unknown;
-    type?: unknown;
-    position?: unknown;
-    maxRange?: unknown;
     minDate?: unknown;
     maxDate?: unknown;
     firstDayOfWeek?: unknown;
-    showRangePrompt?: unknown;
 } & {
     type: CalendarType;
     round: boolean;
@@ -210,20 +209,19 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     lazyRender: boolean;
     closeOnClickOverlay: boolean;
-    closeOnPopstate: boolean;
     position: PopupPosition;
+    closeOnPopstate: boolean;
     minDate: Date;
     maxDate: Date;
     poppable: boolean;
+    maxRange: string | number;
     showMark: boolean;
     showTitle: boolean;
     showConfirm: boolean;
-    defaultDate: any;
     allowSameDay: boolean;
     showSubtitle: boolean;
-    maxRange: string | number;
-    firstDayOfWeek: string | number;
     showRangePrompt: boolean;
+    firstDayOfWeek: string | number;
 } & {
     title?: string | undefined;
     color?: string | undefined;
@@ -232,6 +230,7 @@ declare const _default: import("vue").DefineComponent<{
     rowHeight?: string | number | undefined;
     confirmText?: string | undefined;
     rangePrompt?: string | undefined;
+    defaultDate?: Date | Date[] | null | undefined;
     confirmDisabledText?: string | undefined;
 }> & {
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -249,19 +248,18 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     lazyRender: boolean;
     closeOnClickOverlay: boolean;
-    closeOnPopstate: boolean;
     position: PopupPosition;
+    closeOnPopstate: boolean;
     minDate: Date;
     maxDate: Date;
     poppable: boolean;
+    maxRange: string | number;
     showMark: boolean;
     showTitle: boolean;
     showConfirm: boolean;
-    defaultDate: any;
     allowSameDay: boolean;
     showSubtitle: boolean;
-    maxRange: string | number;
-    firstDayOfWeek: string | number;
     showRangePrompt: boolean;
+    firstDayOfWeek: string | number;
 }>;
 export default _default;

package/es/calendar/Calendar.js

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
-import { ref, watch, reactive, computed, defineComponent } from 'vue'; // Utils
+import { ref, watch, computed, defineComponent } from 'vue'; // Utils
 
-import { pick, isDate, truthProp, getScrollTop } from '../utils';
+import { pick, isDate, truthProp, numericProp, getScrollTop, makeStringProp, makeNumericProp } from '../utils';
 import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset } from './utils'; // Composables
 
 import { raf, useRect, onMountedOrActivated } from '@vant/use';
@@ -16,41 +16,31 @@ import CalendarHeader from './CalendarHeader'; // Types
 
 var props = {
   show: Boolean,
+  type: makeStringProp('single'),
   title: String,
   color: String,
   round: truthProp,
   readonly: Boolean,
   poppable: truthProp,
+  maxRange: makeNumericProp(null),
+  position: makeStringProp('bottom'),
   teleport: [String, Object],
   showMark: truthProp,
   showTitle: truthProp,
   formatter: Function,
-  rowHeight: [Number, String],
+  rowHeight: numericProp,
   confirmText: String,
   rangePrompt: String,
   lazyRender: truthProp,
   showConfirm: truthProp,
-  // TODO: remove any
-  // see: https://github.com/vuejs/vue-next/issues/2668
   defaultDate: [Date, Array],
   allowSameDay: Boolean,
   showSubtitle: truthProp,
   closeOnPopstate: truthProp,
+  showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
   safeAreaInsetBottom: truthProp,
-  type: {
-    type: String,
-    default: 'single'
-  },
-  position: {
-    type: String,
-    default: 'bottom'
-  },
-  maxRange: {
-    type: [Number, String],
-    default: null
-  },
   minDate: {
     type: Date,
     validator: isDate,
@@ -65,13 +55,9 @@ var props = {
     }
   },
   firstDayOfWeek: {
-    type: [Number, String],
+    type: numericProp,
     default: 0,
     validator: val => val >= 0 && val <= 6
-  },
-  showRangePrompt: {
-    type: Boolean,
-    default: true
   }
 };
 export default defineComponent({
@@ -135,10 +121,8 @@ export default defineComponent({
 
     var bodyHeight;
     var bodyRef = ref();
-    var state = reactive({
-      subtitle: '',
-      currentDate: getInitialDate()
-    });
+    var subtitle = ref('');
+    var currentDate = ref(getInitialDate());
     var [monthRefs, setMonthRefs] = useRefs();
     var dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
     var months = computed(() => {
@@ -154,21 +138,17 @@ export default defineComponent({
       return months;
     });
     var buttonDisabled = computed(() => {
-      var {
-        currentDate
-      } = state;
-
-      if (currentDate) {
+      if (currentDate.value) {
         if (props.type === 'range') {
-          return !currentDate[0] || !currentDate[1];
+          return !currentDate.value[0] || !currentDate.value[1];
         }
 
         if (props.type === 'multiple') {
-          return !currentDate.length;
+          return !currentDate.value.length;
         }
       }
 
-      return !currentDate;
+      return !currentDate.value;
     }); // calculate the position of the elements
     // and find the elements that needs to be rendered
 
@@ -217,7 +197,7 @@ export default defineComponent({
       /* istanbul ignore else */
 
       if (currentMonth) {
-        state.subtitle = currentMonth.getTitle();
+        subtitle.value = currentMonth.getTitle();
       }
     };
 
@@ -244,12 +224,8 @@ export default defineComponent({
         return;
       }
 
-      var {
-        currentDate
-      } = state;
-
-      if (currentDate) {
-        var targetDate = props.type === 'single' ? currentDate : currentDate[0];
+      if (currentDate.value) {
+        var targetDate = props.type === 'single' ? currentDate.value : currentDate.value[0];
         scrollToDate(targetDate);
       } else {
         raf(onScroll);
@@ -270,7 +246,7 @@ export default defineComponent({
     };
 
     var reset = (date = getInitialDate()) => {
-      state.currentDate = date;
+      currentDate.value = date;
       scrollIntoView();
     };
 
@@ -293,12 +269,16 @@ export default defineComponent({
       return true;
     };
 
-    var onConfirm = () => emit('confirm', cloneDates(state.currentDate));
+    var onConfirm = () => {
+      var _currentDate$value;
+
+      return emit('confirm', (_currentDate$value = currentDate.value) != null ? _currentDate$value : cloneDates(currentDate.value));
+    };
 
     var select = (date, complete) => {
       var setCurrentDate = date => {
-        state.currentDate = date;
-        emit('select', cloneDates(state.currentDate));
+        currentDate.value = date;
+        emit('select', cloneDates(date));
       };
 
       if (complete && props.type === 'range') {
@@ -321,7 +301,22 @@ export default defineComponent({
       if (complete && !props.showConfirm) {
         onConfirm();
       }
-    };
+    }; // get first disabled calendarDay between date range
+
+
+    var getDisabledDate = (disabledDays, startDay, date) => {
+      var _disabledDays$find;
+
+      return (_disabledDays$find = disabledDays.find(day => compareDay(startDay, day.date) === -1 && compareDay(day.date, date) === -1)) == null ? void 0 : _disabledDays$find.date;
+    }; // disabled calendarDay
+
+
+    var disabledDays = computed(() => monthRefs.value.reduce((arr, ref) => {
+      var _ref$disabledDays$val, _ref$disabledDays;
+
+      arr.push(...((_ref$disabledDays$val = (_ref$disabledDays = ref.disabledDays) == null ? void 0 : _ref$disabledDays.value) != null ? _ref$disabledDays$val : []));
+      return arr;
+    }, []));
 
     var onClickDay = item => {
       if (props.readonly || !item.date) {
@@ -334,23 +329,26 @@ export default defineComponent({
       var {
         type
       } = props;
-      var {
-        currentDate
-      } = state;
 
       if (type === 'range') {
-        if (!currentDate) {
+        if (!currentDate.value) {
           select([date]);
           return;
         }
 
-        var [startDay, endDay] = currentDate;
+        var [startDay, endDay] = currentDate.value;
 
         if (startDay && !endDay) {
           var compareToStart = compareDay(date, startDay);
 
           if (compareToStart === 1) {
-            select([startDay, date], true);
+            var disabledDay = getDisabledDate(disabledDays.value, startDay, date);
+
+            if (disabledDay) {
+              select([startDay, getPrevDay(disabledDay)]);
+            } else {
+              select([startDay, date], true);
+            }
           } else if (compareToStart === -1) {
             select([date]);
           } else if (props.allowSameDay) {
@@ -360,29 +358,21 @@ export default defineComponent({
           select([date]);
         }
       } else if (type === 'multiple') {
-        if (!currentDate) {
+        if (!currentDate.value) {
           select([date]);
           return;
         }
 
-        var selectedIndex;
-        var selected = state.currentDate.some((dateItem, index) => {
-          var equal = compareDay(dateItem, date) === 0;
+        var dates = currentDate.value;
+        var selectedIndex = dates.findIndex(dateItem => compareDay(dateItem, date) === 0);
 
-          if (equal) {
-            selectedIndex = index;
-          }
-
-          return equal;
-        });
-
-        if (selected) {
-          var [unselectedDate] = currentDate.splice(selectedIndex, 1);
+        if (selectedIndex !== -1) {
+          var [unselectedDate] = dates.splice(selectedIndex, 1);
           emit('unselect', cloneDate(unselectedDate));
-        } else if (props.maxRange && currentDate.length >= props.maxRange) {
+        } else if (props.maxRange && dates.length >= props.maxRange) {
           Toast(props.rangePrompt || t('rangePrompt', props.maxRange));
         } else {
-          select([...currentDate, date]);
+          select([...dates, date]);
         }
       } else {
         select(date, true);
@@ -396,7 +386,7 @@ export default defineComponent({
       return _createVNode(CalendarMonth, _mergeProps({
         "ref": setMonthRefs(index),
         "date": date,
-        "currentDate": state.currentDate,
+        "currentDate": currentDate.value,
         "showMonthTitle": showMonthTitle,
         "firstDayOfWeek": dayOffset.value
       }, pick(props, ['type', 'color', 'minDate', 'maxDate', 'showMark', 'formatter', 'rowHeight', 'lazyRender', 'showSubtitle', 'allowSameDay']), {
@@ -436,13 +426,11 @@ export default defineComponent({
       "class": bem()
     }, [_createVNode(CalendarHeader, {
       "title": props.title,
-      "subtitle": state.subtitle,
+      "subtitle": subtitle.value,
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,
-      "onClick-subtitle": event => {
-        emit('click-subtitle', event);
-      }
+      "onClick-subtitle": event => emit('click-subtitle', event)
     }, pick(slots, ['title', 'subtitle'])), _createVNode("div", {
       "ref": bodyRef,
       "class": bem('body'),
@@ -450,11 +438,9 @@ export default defineComponent({
     }, [months.value.map(renderMonth)]), renderFooter()]);
 
     watch(() => props.show, init);
-    watch(() => [props.type, props.minDate, props.maxDate], () => {
-      reset(getInitialDate(state.currentDate));
-    });
-    watch(() => props.defaultDate, value => {
-      state.currentDate = value;
+    watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
+    watch(() => props.defaultDate, (value = null) => {
+      currentDate.value = value;
       scrollIntoView();
     });
     useExpose({

package/es/calendar/CalendarDay.d.ts

@@ -1,23 +1,23 @@
 import { PropType } from 'vue';
 import type { CalendarDayItem } from './types';
 declare const _default: import("vue").DefineComponent<{
+    item: {
+        type: PropType<CalendarDayItem>;
+        required: true;
+    };
     color: StringConstructor;
     index: NumberConstructor;
-    rowHeight: StringConstructor;
     offset: {
         type: NumberConstructor;
         default: number;
     };
-    item: {
-        type: PropType<CalendarDayItem>;
-        required: true;
-    };
+    rowHeight: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+    item?: unknown;
     color?: unknown;
     index?: unknown;
-    rowHeight?: unknown;
     offset?: unknown;
-    item?: unknown;
+    rowHeight?: unknown;
 } & {
     offset: number;
     item: CalendarDayItem;

package/es/calendar/CalendarDay.js

@@ -1,22 +1,16 @@
 import { createVNode as _createVNode } from "vue";
 import { computed, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { makeNumberProp, createNamespace, makeRequiredProp } from '../utils';
 import { bem } from './utils';
 var [name] = createNamespace('calendar-day');
 export default defineComponent({
   name,
   props: {
+    item: makeRequiredProp(Object),
     color: String,
     index: Number,
-    rowHeight: String,
-    offset: {
-      type: Number,
-      default: 0
-    },
-    item: {
-      type: Object,
-      required: true
-    }
+    offset: makeNumberProp(0),
+    rowHeight: String
   },
   emits: ['click'],
 

package/es/calendar/CalendarMonth.d.ts

@@ -1,21 +1,12 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import type { CalendarType, CalendarDayItem } from './types';
 declare const props: {
-    type: PropType<CalendarType>;
-    color: StringConstructor;
-    showMark: BooleanConstructor;
-    rowHeight: (NumberConstructor | StringConstructor)[];
-    formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
-    lazyRender: BooleanConstructor;
-    currentDate: PropType<Date | Date[]>;
-    allowSameDay: BooleanConstructor;
-    showSubtitle: BooleanConstructor;
-    showMonthTitle: BooleanConstructor;
-    firstDayOfWeek: NumberConstructor;
     date: {
         type: DateConstructor;
         required: true;
     };
+    type: PropType<CalendarType>;
+    color: StringConstructor;
     minDate: {
         type: DateConstructor;
         required: true;
@@ -24,24 +15,24 @@ declare const props: {
         type: DateConstructor;
         required: true;
     };
-};
-export declare type CalendarMonthProps = ExtractPropTypes<typeof props>;
-declare const _default: import("vue").DefineComponent<{
-    type: PropType<CalendarType>;
-    color: StringConstructor;
     showMark: BooleanConstructor;
     rowHeight: (NumberConstructor | StringConstructor)[];
     formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
     lazyRender: BooleanConstructor;
-    currentDate: PropType<Date | Date[]>;
+    currentDate: PropType<Date | Date[] | null>;
     allowSameDay: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     showMonthTitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
+};
+export declare type CalendarMonthProps = ExtractPropTypes<typeof props>;
+declare const _default: import("vue").DefineComponent<{
     date: {
         type: DateConstructor;
         required: true;
     };
+    type: PropType<CalendarType>;
+    color: StringConstructor;
     minDate: {
         type: DateConstructor;
         required: true;
@@ -50,9 +41,21 @@ declare const _default: import("vue").DefineComponent<{
         type: DateConstructor;
         required: true;
     };
+    showMark: BooleanConstructor;
+    rowHeight: (NumberConstructor | StringConstructor)[];
+    formatter: PropType<(item: CalendarDayItem) => CalendarDayItem>;
+    lazyRender: BooleanConstructor;
+    currentDate: PropType<Date | Date[] | null>;
+    allowSameDay: BooleanConstructor;
+    showSubtitle: BooleanConstructor;
+    showMonthTitle: BooleanConstructor;
+    firstDayOfWeek: NumberConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update-height")[], "click" | "update-height", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+    date?: unknown;
     type?: unknown;
     color?: unknown;
+    minDate?: unknown;
+    maxDate?: unknown;
     showMark?: unknown;
     rowHeight?: unknown;
     formatter?: unknown;
@@ -62,9 +65,6 @@ declare const _default: import("vue").DefineComponent<{
     showSubtitle?: unknown;
     showMonthTitle?: unknown;
     firstDayOfWeek?: unknown;
-    date?: unknown;
-    minDate?: unknown;
-    maxDate?: unknown;
 } & {
     lazyRender: boolean;
     date: Date;
@@ -80,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     formatter?: ((item: CalendarDayItem) => CalendarDayItem) | undefined;
     rowHeight?: string | number | undefined;
     firstDayOfWeek?: number | undefined;
-    currentDate?: Date | Date[] | undefined;
+    currentDate?: Date | Date[] | null | undefined;
 }> & {
     onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate-height"?: ((...args: any[]) => any) | undefined;