vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/es/calendar/Calendar.mjs

@@ -0,0 +1,405 @@
+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 { raf, useRect, onMountedOrActivated } from "@vant/use";
+import { useRefs } from "../composables/use-refs.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+import { Popup } from "../popup/index.mjs";
+import { Button } from "../button/index.mjs";
+import { showToast } from "../toast/index.mjs";
+import CalendarMonth from "./CalendarMonth.mjs";
+import CalendarHeader from "./CalendarHeader.mjs";
+const calendarProps = {
+  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: numericProp,
+  confirmText: String,
+  rangePrompt: String,
+  lazyRender: truthProp,
+  showConfirm: truthProp,
+  defaultDate: [Date, Array],
+  allowSameDay: Boolean,
+  showSubtitle: truthProp,
+  closeOnPopstate: truthProp,
+  showRangePrompt: truthProp,
+  confirmDisabledText: String,
+  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());
+    }
+  },
+  firstDayOfWeek: {
+    type: numericProp,
+    default: 0,
+    validator: (val) => val >= 0 && val <= 6
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: calendarProps,
+  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
+      if (compareDay(date, minDate) === -1) {
+        return minDate;
+      }
+      if (compareDay(date, maxDate) === 1) {
+        return maxDate;
+      }
+      return date;
+    };
+    const getInitialDate = (defaultDate = props.defaultDate) => {
+      const {
+        type,
+        minDate,
+        maxDate
+      } = props;
+      if (defaultDate === null) {
+        return defaultDate;
+      }
+      const now = getToday();
+      if (type === "range") {
+        if (!Array.isArray(defaultDate)) {
+          defaultDate = [];
+        }
+        const start = limitDateRange(defaultDate[0] || now, minDate, getPrevDay(maxDate));
+        const end = limitDateRange(defaultDate[1] || now, getNextDay(minDate));
+        return [start, end];
+      }
+      if (type === "multiple") {
+        if (Array.isArray(defaultDate)) {
+          return defaultDate.map((date) => limitDateRange(date));
+        }
+        return [limitDateRange(now)];
+      }
+      if (!defaultDate || Array.isArray(defaultDate)) {
+        defaultDate = now;
+      }
+      return limitDateRange(defaultDate);
+    };
+    let bodyHeight;
+    const bodyRef = ref();
+    const subtitle = ref("");
+    const currentDate = ref(getInitialDate());
+    const [monthRefs, setMonthRefs] = useRefs();
+    const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
+    const months = computed(() => {
+      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);
+      return months2;
+    });
+    const buttonDisabled = computed(() => {
+      if (currentDate.value) {
+        if (props.type === "range") {
+          return !currentDate.value[0] || !currentDate.value[1];
+        }
+        if (props.type === "multiple") {
+          return !currentDate.value.length;
+        }
+      }
+      return !currentDate.value;
+    });
+    const getSelectedDate = () => currentDate.value;
+    const onScroll = () => {
+      const top = getScrollTop(bodyRef.value);
+      const bottom = top + bodyHeight;
+      const heights = months.value.map((item, index) => monthRefs.value[index].getHeight());
+      const heightSum = heights.reduce((a, b) => a + b, 0);
+      if (bottom > heightSum && top > 0) {
+        return;
+      }
+      let height = 0;
+      let currentMonth;
+      const visibleRange = [-1, -1];
+      for (let i = 0; i < months.value.length; i++) {
+        const month = monthRefs.value[i];
+        const visible = height <= bottom && height + heights[i] >= top;
+        if (visible) {
+          visibleRange[1] = i;
+          if (!currentMonth) {
+            currentMonth = month;
+            visibleRange[0] = i;
+          }
+          if (!monthRefs.value[i].showed) {
+            monthRefs.value[i].showed = true;
+            emit("monthShow", {
+              date: month.date,
+              title: month.getTitle()
+            });
+          }
+        }
+        height += heights[i];
+      }
+      months.value.forEach((month, index) => {
+        const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
+        monthRefs.value[index].setVisible(visible);
+      });
+      if (currentMonth) {
+        subtitle.value = currentMonth.getTitle();
+      }
+    };
+    const scrollToDate = (targetDate) => {
+      raf(() => {
+        months.value.some((month, index) => {
+          if (compareMonth(month, targetDate) === 0) {
+            if (bodyRef.value) {
+              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
+            }
+            return true;
+          }
+          return false;
+        });
+        onScroll();
+      });
+    };
+    const scrollToCurrentDate = () => {
+      if (props.poppable && !props.show) {
+        return;
+      }
+      if (currentDate.value) {
+        const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
+        if (isDate(targetDate)) {
+          scrollToDate(targetDate);
+        }
+      } else {
+        raf(onScroll);
+      }
+    };
+    const init = () => {
+      if (props.poppable && !props.show) {
+        return;
+      }
+      raf(() => {
+        bodyHeight = Math.floor(useRect(bodyRef).height);
+      });
+      scrollToCurrentDate();
+    };
+    const reset = (date = getInitialDate()) => {
+      currentDate.value = date;
+      scrollToCurrentDate();
+    };
+    const checkRange = (date) => {
+      const {
+        maxRange,
+        rangePrompt,
+        showRangePrompt
+      } = props;
+      if (maxRange && calcDateNum(date) > maxRange) {
+        if (showRangePrompt) {
+          showToast(rangePrompt || t("rangePrompt", maxRange));
+        }
+        emit("overRange");
+        return false;
+      }
+      return true;
+    };
+    const onConfirm = () => {
+      var _a;
+      return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
+    };
+    const select = (date, complete) => {
+      const setCurrentDate = (date2) => {
+        currentDate.value = date2;
+        emit("select", cloneDates(date2));
+      };
+      if (complete && props.type === "range") {
+        const valid = checkRange(date);
+        if (!valid) {
+          setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
+          return;
+        }
+      }
+      setCurrentDate(date);
+      if (complete && !props.showConfirm) {
+        onConfirm();
+      }
+    };
+    const getDisabledDate = (disabledDays2, startDay, date) => {
+      var _a;
+      return (_a = disabledDays2.find((day) => compareDay(startDay, day.date) === -1 && compareDay(day.date, date) === -1)) == null ? void 0 : _a.date;
+    };
+    const disabledDays = computed(() => monthRefs.value.reduce((arr, ref2) => {
+      var _a, _b;
+      arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
+      return arr;
+    }, []));
+    const onClickDay = (item) => {
+      if (props.readonly || !item.date) {
+        return;
+      }
+      const {
+        date
+      } = item;
+      const {
+        type
+      } = props;
+      if (type === "range") {
+        if (!currentDate.value) {
+          select([date]);
+          return;
+        }
+        const [startDay, endDay] = currentDate.value;
+        if (startDay && !endDay) {
+          const compareToStart = compareDay(date, startDay);
+          if (compareToStart === 1) {
+            const disabledDay = getDisabledDate(disabledDays.value, startDay, date);
+            if (disabledDay) {
+              const endDay2 = getPrevDay(disabledDay);
+              if (compareDay(startDay, endDay2) === -1) {
+                select([startDay, endDay2]);
+              } else {
+                select([date]);
+              }
+            } else {
+              select([startDay, date], true);
+            }
+          } else if (compareToStart === -1) {
+            select([date]);
+          } else if (props.allowSameDay) {
+            select([date, date], true);
+          }
+        } else {
+          select([date]);
+        }
+      } else if (type === "multiple") {
+        if (!currentDate.value) {
+          select([date]);
+          return;
+        }
+        const dates = currentDate.value;
+        const selectedIndex = dates.findIndex((dateItem) => compareDay(dateItem, date) === 0);
+        if (selectedIndex !== -1) {
+          const [unselectedDate] = dates.splice(selectedIndex, 1);
+          emit("unselect", cloneDate(unselectedDate));
+        } else if (props.maxRange && dates.length >= props.maxRange) {
+          showToast(props.rangePrompt || t("rangePrompt", props.maxRange));
+        } else {
+          select([...dates, date]);
+        }
+      } else {
+        select(date, true);
+      }
+    };
+    const updateShow = (value) => emit("update:show", value);
+    const renderMonth = (date, index) => {
+      const showMonthTitle = index !== 0 || !props.showSubtitle;
+      return _createVNode(CalendarMonth, _mergeProps({
+        "ref": setMonthRefs(index),
+        "date": date,
+        "currentDate": currentDate.value,
+        "showMonthTitle": showMonthTitle,
+        "firstDayOfWeek": dayOffset.value
+      }, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
+        "onClick": onClickDay
+      }), pick(slots, ["top-info", "bottom-info"]));
+    };
+    const renderFooterButton = () => {
+      if (slots.footer) {
+        return slots.footer();
+      }
+      if (props.showConfirm) {
+        const slot = slots["confirm-text"];
+        const disabled = buttonDisabled.value;
+        const text = disabled ? props.confirmDisabledText : props.confirmText;
+        return _createVNode(Button, {
+          "round": true,
+          "block": true,
+          "type": "primary",
+          "color": props.color,
+          "class": bem("confirm"),
+          "disabled": disabled,
+          "nativeType": "button",
+          "onClick": onConfirm
+        }, {
+          default: () => [slot ? slot({
+            disabled
+          }) : text || t("confirm")]
+        });
+      }
+    };
+    const renderFooter = () => _createVNode("div", {
+      "class": [bem("footer"), {
+        "van-safe-area-bottom": props.safeAreaInsetBottom
+      }]
+    }, [renderFooterButton()]);
+    const renderCalendar = () => _createVNode("div", {
+      "class": bem()
+    }, [_createVNode(CalendarHeader, {
+      "title": props.title,
+      "subtitle": subtitle.value,
+      "showTitle": props.showTitle,
+      "showSubtitle": props.showSubtitle,
+      "firstDayOfWeek": dayOffset.value,
+      "onClickSubtitle": (event) => emit("clickSubtitle", event)
+    }, pick(slots, ["title", "subtitle"])), _createVNode("div", {
+      "ref": bodyRef,
+      "class": bem("body"),
+      "onScroll": onScroll
+    }, [months.value.map(renderMonth)]), renderFooter()]);
+    watch(() => props.show, init);
+    watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
+    watch(() => props.defaultDate, (value = null) => {
+      currentDate.value = value;
+      scrollToCurrentDate();
+    });
+    useExpose({
+      reset,
+      scrollToDate,
+      getSelectedDate
+    });
+    onMountedOrActivated(init);
+    return () => {
+      if (props.poppable) {
+        return _createVNode(Popup, {
+          "show": props.show,
+          "class": bem("popup"),
+          "round": props.round,
+          "position": props.position,
+          "closeable": props.showTitle || props.showSubtitle,
+          "teleport": props.teleport,
+          "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop,
+          "closeOnClickOverlay": props.closeOnClickOverlay,
+          "onUpdate:show": updateShow
+        }, {
+          default: renderCalendar
+        });
+      }
+      return renderCalendar();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/calendar/CalendarDay.mjs

@@ -0,0 +1,129 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { makeNumberProp, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { bem } from "./utils.mjs";
+const [name] = createNamespace("calendar-day");
+var stdin_default = defineComponent({
+  name,
+  props: {
+    item: makeRequiredProp(Object),
+    color: String,
+    index: Number,
+    offset: makeNumberProp(0),
+    rowHeight: String
+  },
+  emits: ["click"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const style = computed(() => {
+      var _a;
+      const {
+        item,
+        index,
+        color,
+        offset,
+        rowHeight
+      } = props;
+      const style2 = {
+        height: rowHeight
+      };
+      if (item.type === "placeholder") {
+        style2.width = "100%";
+        return style2;
+      }
+      if (index === 0) {
+        style2.marginLeft = `${100 * offset / 7}%`;
+      }
+      if (color) {
+        switch (item.type) {
+          case "end":
+          case "start":
+          case "start-end":
+          case "multiple-middle":
+          case "multiple-selected":
+            style2.background = color;
+            break;
+          case "middle":
+            style2.color = color;
+            break;
+        }
+      }
+      if (offset + (((_a = item.date) == null ? void 0 : _a.getDate()) || 1) > 28) {
+        style2.marginBottom = 0;
+      }
+      return style2;
+    });
+    const onClick = () => {
+      if (props.item.type !== "disabled") {
+        emit("click", props.item);
+      }
+    };
+    const renderTopInfo = () => {
+      const {
+        topInfo
+      } = props.item;
+      if (topInfo || slots["top-info"]) {
+        return _createVNode("div", {
+          "class": bem("top-info")
+        }, [slots["top-info"] ? slots["top-info"](props.item) : topInfo]);
+      }
+    };
+    const renderBottomInfo = () => {
+      const {
+        bottomInfo
+      } = props.item;
+      if (bottomInfo || slots["bottom-info"]) {
+        return _createVNode("div", {
+          "class": bem("bottom-info")
+        }, [slots["bottom-info"] ? slots["bottom-info"](props.item) : bottomInfo]);
+      }
+    };
+    const renderContent = () => {
+      const {
+        item,
+        color,
+        rowHeight
+      } = props;
+      const {
+        type,
+        text
+      } = item;
+      const Nodes = [renderTopInfo(), text, renderBottomInfo()];
+      if (type === "selected") {
+        return _createVNode("div", {
+          "class": bem("selected-day"),
+          "style": {
+            width: rowHeight,
+            height: rowHeight,
+            background: color
+          }
+        }, [Nodes]);
+      }
+      return Nodes;
+    };
+    return () => {
+      const {
+        type,
+        className
+      } = props.item;
+      if (type === "placeholder") {
+        return _createVNode("div", {
+          "class": bem("day"),
+          "style": style.value
+        }, null);
+      }
+      return _createVNode("div", {
+        "role": "gridcell",
+        "style": style.value,
+        "class": [bem("day", type), className],
+        "tabindex": type === "disabled" ? void 0 : -1,
+        "onClick": onClick
+      }, [renderContent()]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/calendar/CalendarHeader.mjs

@@ -0,0 +1,58 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/index.mjs";
+import { t, bem } from "./utils.mjs";
+const [name] = createNamespace("calendar-header");
+var stdin_default = defineComponent({
+  name,
+  props: {
+    title: String,
+    subtitle: String,
+    showTitle: Boolean,
+    showSubtitle: Boolean,
+    firstDayOfWeek: Number
+  },
+  emits: ["clickSubtitle"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const renderTitle = () => {
+      if (props.showTitle) {
+        const text = props.title || t("title");
+        const title = slots.title ? slots.title() : text;
+        return _createVNode("div", {
+          "class": bem("header-title")
+        }, [title]);
+      }
+    };
+    const onClickSubtitle = (event) => emit("clickSubtitle", event);
+    const renderSubtitle = () => {
+      if (props.showSubtitle) {
+        const title = slots.subtitle ? slots.subtitle() : props.subtitle;
+        return _createVNode("div", {
+          "class": bem("header-subtitle"),
+          "onClick": onClickSubtitle
+        }, [title]);
+      }
+    };
+    const renderWeekDays = () => {
+      const {
+        firstDayOfWeek
+      } = props;
+      const weekdays = t("weekdays");
+      const renderWeekDays2 = [...weekdays.slice(firstDayOfWeek, 7), ...weekdays.slice(0, firstDayOfWeek)];
+      return _createVNode("div", {
+        "class": bem("weekdays")
+      }, [renderWeekDays2.map((text) => _createVNode("span", {
+        "class": bem("weekday")
+      }, [text]))]);
+    };
+    return () => _createVNode("div", {
+      "class": bem("header")
+    }, [renderTitle(), renderSubtitle(), renderWeekDays()]);
+  }
+});
+export {
+  stdin_default as default
+};