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

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

package/es/cascader/Cascader.mjs

@@ -0,0 +1,227 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, nextTick, defineComponent } from "vue";
+import { extend, truthProp, numericProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { Tab } from "../tab/index.mjs";
+import { Tabs } from "../tabs/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem, t] = createNamespace("cascader");
+const cascaderProps = {
+  title: String,
+  options: makeArrayProp(),
+  closeable: truthProp,
+  swipeable: truthProp,
+  closeIcon: makeStringProp("cross"),
+  showHeader: truthProp,
+  modelValue: numericProp,
+  fieldNames: Object,
+  placeholder: String,
+  activeColor: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: cascaderProps,
+  emits: ["close", "change", "finish", "clickTab", "update:modelValue"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const tabs = ref([]);
+    const activeTab = ref(0);
+    const {
+      text: textKey,
+      value: valueKey,
+      children: childrenKey
+    } = extend({
+      text: "text",
+      value: "value",
+      children: "children"
+    }, props.fieldNames);
+    const getSelectedOptionsByValue = (options, value) => {
+      for (const option of options) {
+        if (option[valueKey] === value) {
+          return [option];
+        }
+        if (option[childrenKey]) {
+          const selectedOptions = getSelectedOptionsByValue(option[childrenKey], value);
+          if (selectedOptions) {
+            return [option, ...selectedOptions];
+          }
+        }
+      }
+    };
+    const updateTabs = () => {
+      const {
+        options,
+        modelValue
+      } = props;
+      if (modelValue !== void 0) {
+        const selectedOptions = getSelectedOptionsByValue(options, modelValue);
+        if (selectedOptions) {
+          let optionsCursor = options;
+          tabs.value = selectedOptions.map((option) => {
+            const tab = {
+              options: optionsCursor,
+              selected: option
+            };
+            const next = optionsCursor.find((item) => item[valueKey] === option[valueKey]);
+            if (next) {
+              optionsCursor = next[childrenKey];
+            }
+            return tab;
+          });
+          if (optionsCursor) {
+            tabs.value.push({
+              options: optionsCursor,
+              selected: null
+            });
+          }
+          nextTick(() => {
+            activeTab.value = tabs.value.length - 1;
+          });
+          return;
+        }
+      }
+      tabs.value = [{
+        options,
+        selected: null
+      }];
+    };
+    const onSelect = (option, tabIndex) => {
+      if (option.disabled) {
+        return;
+      }
+      tabs.value[tabIndex].selected = option;
+      if (tabs.value.length > tabIndex + 1) {
+        tabs.value = tabs.value.slice(0, tabIndex + 1);
+      }
+      if (option[childrenKey]) {
+        const nextTab = {
+          options: option[childrenKey],
+          selected: null
+        };
+        if (tabs.value[tabIndex + 1]) {
+          tabs.value[tabIndex + 1] = nextTab;
+        } else {
+          tabs.value.push(nextTab);
+        }
+        nextTick(() => {
+          activeTab.value++;
+        });
+      }
+      const selectedOptions = tabs.value.map((tab) => tab.selected).filter(Boolean);
+      emit("update:modelValue", option[valueKey]);
+      const params = {
+        value: option[valueKey],
+        tabIndex,
+        selectedOptions
+      };
+      emit("change", params);
+      if (!option[childrenKey]) {
+        emit("finish", params);
+      }
+    };
+    const onClose = () => emit("close");
+    const onClickTab = ({
+      name: name2,
+      title
+    }) => emit("clickTab", name2, title);
+    const renderHeader = () => props.showHeader ? _createVNode("div", {
+      "class": bem("header")
+    }, [_createVNode("h2", {
+      "class": bem("title")
+    }, [slots.title ? slots.title() : props.title]), props.closeable ? _createVNode(Icon, {
+      "name": props.closeIcon,
+      "class": [bem("close-icon"), HAPTICS_FEEDBACK],
+      "onClick": onClose
+    }, null) : null]) : null;
+    const renderOption = (option, selectedOption, tabIndex) => {
+      const {
+        disabled
+      } = option;
+      const selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
+      const color = option.color || (selected ? props.activeColor : void 0);
+      const Text = slots.option ? slots.option({
+        option,
+        selected
+      }) : _createVNode("span", null, [option[textKey]]);
+      return _createVNode("li", {
+        "role": "menuitemradio",
+        "class": [bem("option", {
+          selected,
+          disabled
+        }), option.className],
+        "style": {
+          color
+        },
+        "tabindex": disabled ? void 0 : selected ? 0 : -1,
+        "aria-checked": selected,
+        "aria-disabled": disabled || void 0,
+        "onClick": () => onSelect(option, tabIndex)
+      }, [Text, selected ? _createVNode(Icon, {
+        "name": "success",
+        "class": bem("selected-icon")
+      }, null) : null]);
+    };
+    const renderOptions = (options, selectedOption, tabIndex) => _createVNode("ul", {
+      "role": "menu",
+      "class": bem("options")
+    }, [options.map((option) => renderOption(option, selectedOption, tabIndex))]);
+    const renderTab = (tab, tabIndex) => {
+      const {
+        options,
+        selected
+      } = tab;
+      const placeholder = props.placeholder || t("select");
+      const title = selected ? selected[textKey] : placeholder;
+      return _createVNode(Tab, {
+        "title": title,
+        "titleClass": bem("tab", {
+          unselected: !selected
+        })
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_a = slots["options-top"]) == null ? void 0 : _a.call(slots, {
+            tabIndex
+          }), renderOptions(options, selected, tabIndex), (_b = slots["options-bottom"]) == null ? void 0 : _b.call(slots, {
+            tabIndex
+          })];
+        }
+      });
+    };
+    const renderTabs = () => _createVNode(Tabs, {
+      "active": activeTab.value,
+      "onUpdate:active": ($event) => activeTab.value = $event,
+      "shrink": true,
+      "animated": true,
+      "class": bem("tabs"),
+      "color": props.activeColor,
+      "swipeable": props.swipeable,
+      "onClickTab": onClickTab
+    }, {
+      default: () => [tabs.value.map(renderTab)]
+    });
+    updateTabs();
+    watch(() => props.options, updateTabs, {
+      deep: true
+    });
+    watch(() => props.modelValue, (value) => {
+      if (value !== void 0) {
+        const values = tabs.value.map((tab) => {
+          var _a;
+          return (_a = tab.selected) == null ? void 0 : _a[valueKey];
+        });
+        if (values.includes(value)) {
+          return;
+        }
+      }
+      updateTabs();
+    });
+    return () => _createVNode("div", {
+      "class": bem()
+    }, [renderHeader(), renderTabs()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/cascader/index.mjs

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

package/es/cell/Cell.d.ts

@@ -110,10 +110,10 @@ declare const _default: import("vue").DefineComponent<{
     replace: BooleanConstructor;
 }>>, {
     replace: boolean;
+    required: boolean;
     center: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
 }>;
 export default _default;