vant 4.0.0-alpha.2 → 4.0.0-beta.0

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
+};

package/es/calendar/CalendarMonth.mjs

@@ -0,0 +1,208 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, computed, defineComponent } from "vue";
+import { pick, addUnit, numericProp, setScrollTop, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { getMonthEndDay } from "../date-picker/utils.mjs";
+import { t, bem, compareDay, getPrevDay, getNextDay, formatMonthTitle } from "./utils.mjs";
+import { useRect, useToggle } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { useHeight } from "../composables/use-height.mjs";
+import CalendarDay from "./CalendarDay.mjs";
+const [name] = createNamespace("calendar-month");
+const calendarMonthProps = {
+  date: makeRequiredProp(Date),
+  type: String,
+  color: String,
+  minDate: makeRequiredProp(Date),
+  maxDate: makeRequiredProp(Date),
+  showMark: Boolean,
+  rowHeight: numericProp,
+  formatter: Function,
+  lazyRender: Boolean,
+  currentDate: [Date, Array],
+  allowSameDay: Boolean,
+  showSubtitle: Boolean,
+  showMonthTitle: Boolean,
+  firstDayOfWeek: Number
+};
+var stdin_default = defineComponent({
+  name,
+  props: calendarMonthProps,
+  emits: ["click"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const [visible, setVisible] = useToggle();
+    const daysRef = ref();
+    const monthRef = ref();
+    const height = useHeight(monthRef);
+    const title = computed(() => formatMonthTitle(props.date));
+    const rowHeight = computed(() => addUnit(props.rowHeight));
+    const offset = computed(() => {
+      const realDay = props.date.getDay();
+      if (props.firstDayOfWeek) {
+        return (realDay + 7 - props.firstDayOfWeek) % 7;
+      }
+      return realDay;
+    });
+    const totalDay = computed(() => getMonthEndDay(props.date.getFullYear(), props.date.getMonth() + 1));
+    const shouldRender = computed(() => visible.value || !props.lazyRender);
+    const getTitle = () => title.value;
+    const getMultipleDayType = (day) => {
+      const isSelected = (date) => props.currentDate.some((item) => compareDay(item, date) === 0);
+      if (isSelected(day)) {
+        const prevDay = getPrevDay(day);
+        const nextDay = getNextDay(day);
+        const prevSelected = isSelected(prevDay);
+        const nextSelected = isSelected(nextDay);
+        if (prevSelected && nextSelected) {
+          return "multiple-middle";
+        }
+        if (prevSelected) {
+          return "end";
+        }
+        if (nextSelected) {
+          return "start";
+        }
+        return "multiple-selected";
+      }
+      return "";
+    };
+    const getRangeDayType = (day) => {
+      const [startDay, endDay] = props.currentDate;
+      if (!startDay) {
+        return "";
+      }
+      const compareToStart = compareDay(day, startDay);
+      if (!endDay) {
+        return compareToStart === 0 ? "start" : "";
+      }
+      const compareToEnd = compareDay(day, endDay);
+      if (props.allowSameDay && compareToStart === 0 && compareToEnd === 0) {
+        return "start-end";
+      }
+      if (compareToStart === 0) {
+        return "start";
+      }
+      if (compareToEnd === 0) {
+        return "end";
+      }
+      if (compareToStart > 0 && compareToEnd < 0) {
+        return "middle";
+      }
+      return "";
+    };
+    const getDayType = (day) => {
+      const {
+        type,
+        minDate,
+        maxDate,
+        currentDate
+      } = props;
+      if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
+        return "disabled";
+      }
+      if (currentDate === null) {
+        return "";
+      }
+      if (Array.isArray(currentDate)) {
+        if (type === "multiple") {
+          return getMultipleDayType(day);
+        }
+        if (type === "range") {
+          return getRangeDayType(day);
+        }
+      } else if (type === "single") {
+        return compareDay(day, currentDate) === 0 ? "selected" : "";
+      }
+      return "";
+    };
+    const getBottomInfo = (dayType) => {
+      if (props.type === "range") {
+        if (dayType === "start" || dayType === "end") {
+          return t(dayType);
+        }
+        if (dayType === "start-end") {
+          return `${t("start")}/${t("end")}`;
+        }
+      }
+    };
+    const renderTitle = () => {
+      if (props.showMonthTitle) {
+        return _createVNode("div", {
+          "class": bem("month-title")
+        }, [title.value]);
+      }
+    };
+    const renderMark = () => {
+      if (props.showMark && shouldRender.value) {
+        return _createVNode("div", {
+          "class": bem("month-mark")
+        }, [props.date.getMonth() + 1]);
+      }
+    };
+    const placeholders = computed(() => {
+      const count = Math.ceil((totalDay.value + offset.value) / 7);
+      return Array(count).fill({
+        type: "placeholder"
+      });
+    });
+    const days = computed(() => {
+      const days2 = [];
+      const year = props.date.getFullYear();
+      const month = props.date.getMonth();
+      for (let day = 1; day <= totalDay.value; day++) {
+        const date = new Date(year, month, day);
+        const type = getDayType(date);
+        let config = {
+          date,
+          type,
+          text: day,
+          bottomInfo: getBottomInfo(type)
+        };
+        if (props.formatter) {
+          config = props.formatter(config);
+        }
+        days2.push(config);
+      }
+      return days2;
+    });
+    const disabledDays = computed(() => days.value.filter((day) => day.type === "disabled"));
+    const scrollToDate = (body, targetDate) => {
+      if (daysRef.value) {
+        const daysRect = useRect(daysRef.value);
+        const totalRows = placeholders.value.length;
+        const currentRow = Math.ceil((targetDate.getDate() + offset.value) / 7);
+        const rowOffset = (currentRow - 1) * daysRect.height / totalRows;
+        setScrollTop(body, daysRect.top + rowOffset + body.scrollTop - useRect(body).top);
+      }
+    };
+    const renderDay = (item, index) => _createVNode(CalendarDay, {
+      "item": item,
+      "index": index,
+      "color": props.color,
+      "offset": offset.value,
+      "rowHeight": rowHeight.value,
+      "onClick": (item2) => emit("click", item2)
+    }, pick(slots, ["top-info", "bottom-info"]));
+    const renderDays = () => _createVNode("div", {
+      "ref": daysRef,
+      "role": "grid",
+      "class": bem("days")
+    }, [renderMark(), (shouldRender.value ? days : placeholders).value.map(renderDay)]);
+    useExpose({
+      getTitle,
+      getHeight: () => height.value,
+      setVisible,
+      scrollToDate,
+      disabledDays
+    });
+    return () => _createVNode("div", {
+      "class": bem("month"),
+      "ref": monthRef
+    }, [renderTitle(), renderDays()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/calendar/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Calendar from "./Calendar.mjs";
+const Calendar = withInstall(_Calendar);
+var stdin_default = Calendar;
+export {
+  Calendar,
+  stdin_default as default
+};

package/es/calendar/types.d.ts

@@ -15,6 +15,7 @@ export declare type CalendarDayItem = {
 export declare type CalendarExpose = {
     reset: (date?: Date | Date[]) => void;
     scrollToDate: (targetDate: Date) => void;
+    getSelectedDate: () => Date | Date[] | null;
 };
 export declare type CalendarInstance = ComponentPublicInstance<CalendarProps, CalendarExpose>;
 export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMonthProps, {

package/es/calendar/utils.mjs

@@ -0,0 +1,56 @@
+import { createNamespace } from "../utils/index.mjs";
+const [name, bem, t] = createNamespace("calendar");
+const formatMonthTitle = (date) => t("monthTitle", date.getFullYear(), date.getMonth() + 1);
+function compareMonth(date1, date2) {
+  const year1 = date1.getFullYear();
+  const year2 = date2.getFullYear();
+  if (year1 === year2) {
+    const month1 = date1.getMonth();
+    const month2 = date2.getMonth();
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
+  }
+  return year1 > year2 ? 1 : -1;
+}
+function compareDay(day1, day2) {
+  const compareMonthResult = compareMonth(day1, day2);
+  if (compareMonthResult === 0) {
+    const date1 = day1.getDate();
+    const date2 = day2.getDate();
+    return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
+  }
+  return compareMonthResult;
+}
+const cloneDate = (date) => new Date(date);
+const cloneDates = (dates) => Array.isArray(dates) ? dates.map(cloneDate) : cloneDate(dates);
+function getDayByOffset(date, offset) {
+  const cloned = cloneDate(date);
+  cloned.setDate(cloned.getDate() + offset);
+  return cloned;
+}
+const getPrevDay = (date) => getDayByOffset(date, -1);
+const getNextDay = (date) => getDayByOffset(date, 1);
+const getToday = () => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return today;
+};
+function calcDateNum(date) {
+  const day1 = date[0].getTime();
+  const day2 = date[1].getTime();
+  return (day2 - day1) / (1e3 * 60 * 60 * 24) + 1;
+}
+export {
+  bem,
+  calcDateNum,
+  cloneDate,
+  cloneDates,
+  compareDay,
+  compareMonth,
+  formatMonthTitle,
+  getDayByOffset,
+  getNextDay,
+  getPrevDay,
+  getToday,
+  name,
+  t
+};

package/es/card/Card.mjs

@@ -0,0 +1,126 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { isDef, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Tag } from "../tag/index.mjs";
+import { Image } from "../image/index.mjs";
+const [name, bem] = createNamespace("card");
+const cardProps = {
+  tag: String,
+  num: numericProp,
+  desc: String,
+  thumb: String,
+  title: String,
+  price: numericProp,
+  centered: Boolean,
+  lazyLoad: Boolean,
+  currency: makeStringProp("\xA5"),
+  thumbLink: String,
+  originPrice: numericProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: cardProps,
+  emits: ["clickThumb"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return _createVNode("div", {
+          "class": [bem("title"), "van-multi-ellipsis--l2"]
+        }, [props.title]);
+      }
+    };
+    const renderThumbTag = () => {
+      if (slots.tag || props.tag) {
+        return _createVNode("div", {
+          "class": bem("tag")
+        }, [slots.tag ? slots.tag() : _createVNode(Tag, {
+          "mark": true,
+          "type": "primary"
+        }, {
+          default: () => [props.tag]
+        })]);
+      }
+    };
+    const renderThumbImage = () => {
+      if (slots.thumb) {
+        return slots.thumb();
+      }
+      return _createVNode(Image, {
+        "src": props.thumb,
+        "fit": "cover",
+        "width": "100%",
+        "height": "100%",
+        "lazyLoad": props.lazyLoad
+      }, null);
+    };
+    const renderThumb = () => {
+      if (slots.thumb || props.thumb) {
+        return _createVNode("a", {
+          "href": props.thumbLink,
+          "class": bem("thumb"),
+          "onClick": (event) => emit("clickThumb", event)
+        }, [renderThumbImage(), renderThumbTag()]);
+      }
+    };
+    const renderDesc = () => {
+      if (slots.desc) {
+        return slots.desc();
+      }
+      if (props.desc) {
+        return _createVNode("div", {
+          "class": [bem("desc"), "van-ellipsis"]
+        }, [props.desc]);
+      }
+    };
+    const renderPriceText = () => {
+      const priceArr = props.price.toString().split(".");
+      return _createVNode("div", null, [_createVNode("span", {
+        "class": bem("price-currency")
+      }, [props.currency]), _createVNode("span", {
+        "class": bem("price-integer")
+      }, [priceArr[0]]), _createTextVNode("."), _createVNode("span", {
+        "class": bem("price-decimal")
+      }, [priceArr[1]])]);
+    };
+    return () => {
+      var _a, _b, _c;
+      const showNum = slots.num || isDef(props.num);
+      const showPrice = slots.price || isDef(props.price);
+      const showOriginPrice = slots["origin-price"] || isDef(props.originPrice);
+      const showBottom = showNum || showPrice || showOriginPrice || slots.bottom;
+      const Price = showPrice && _createVNode("div", {
+        "class": bem("price")
+      }, [slots.price ? slots.price() : renderPriceText()]);
+      const OriginPrice = showOriginPrice && _createVNode("div", {
+        "class": bem("origin-price")
+      }, [slots["origin-price"] ? slots["origin-price"]() : `${props.currency} ${props.originPrice}`]);
+      const Num = showNum && _createVNode("div", {
+        "class": bem("num")
+      }, [slots.num ? slots.num() : `x${props.num}`]);
+      const Footer = slots.footer && _createVNode("div", {
+        "class": bem("footer")
+      }, [slots.footer()]);
+      const Bottom = showBottom && _createVNode("div", {
+        "class": bem("bottom")
+      }, [(_a = slots["price-top"]) == null ? void 0 : _a.call(slots), Price, OriginPrice, Num, (_b = slots.bottom) == null ? void 0 : _b.call(slots)]);
+      return _createVNode("div", {
+        "class": bem()
+      }, [_createVNode("div", {
+        "class": bem("header")
+      }, [renderThumb(), _createVNode("div", {
+        "class": bem("content", {
+          centered: props.centered
+        })
+      }, [_createVNode("div", null, [renderTitle(), renderDesc(), (_c = slots.tags) == null ? void 0 : _c.call(slots)]), Bottom])]), Footer]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/card/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Card from "./Card.mjs";
+const Card = withInstall(_Card);
+var stdin_default = Card;
+export {
+  Card,
+  stdin_default as default
+};