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

package/es/calendar/CalendarDay.js

@@ -1,129 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { computed, defineComponent } from "vue";
-import { makeNumberProp, createNamespace, makeRequiredProp } from "../utils";
-import { bem } from "./utils";
-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.js

@@ -1,58 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { defineComponent } from "vue";
-import { createNamespace } from "../utils";
-import { t, bem } from "./utils";
-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.js

@@ -1,208 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { ref, computed, defineComponent } from "vue";
-import { pick, addUnit, numericProp, setScrollTop, createNamespace, makeRequiredProp } from "../utils";
-import { getMonthEndDay } from "../date-picker/utils";
-import { t, bem, compareDay, getPrevDay, getNextDay, formatMonthTitle } from "./utils";
-import { useRect, useToggle } from "@vant/use";
-import { useExpose } from "../composables/use-expose";
-import { useHeight } from "../composables/use-height";
-import CalendarDay from "./CalendarDay";
-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.js

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

package/es/calendar/index.less

@@ -1,217 +0,0 @@
-body {
-  --van-calendar-background: var(--van-background-2);
-  --van-calendar-popup-height: 80%;
-  --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
-  --van-calendar-header-title-height: 44px;
-  --van-calendar-header-title-font-size: var(--van-font-size-lg);
-  --van-calendar-header-subtitle-font-size: var(--van-font-size-md);
-  --van-calendar-weekdays-height: 30px;
-  --van-calendar-weekdays-font-size: var(--van-font-size-sm);
-  --van-calendar-month-title-font-size: var(--van-font-size-md);
-  --van-calendar-month-mark-color: rgba(242, 243, 245, 0.8);
-  --van-calendar-month-mark-font-size: 160px;
-  --van-calendar-day-height: 64px;
-  --van-calendar-day-font-size: var(--van-font-size-lg);
-  --van-calendar-day-margin-bottom: 4px;
-  --van-calendar-range-edge-color: var(--van-white);
-  --van-calendar-range-edge-background: var(--van-primary-color);
-  --van-calendar-range-middle-color: var(--van-primary-color);
-  --van-calendar-range-middle-background-opacity: 0.1;
-  --van-calendar-selected-day-size: 54px;
-  --van-calendar-selected-day-color: var(--van-white);
-  --van-calendar-info-font-size: var(--van-font-size-xs);
-  --van-calendar-info-line-height: var(--van-line-height-xs);
-  --van-calendar-selected-day-background: var(--van-primary-color);
-  --van-calendar-day-disabled-color: var(--van-text-color-3);
-  --van-calendar-confirm-button-height: 36px;
-  --van-calendar-confirm-button-margin: 7px 0;
-}
-
-.van-theme-dark {
-  --van-calendar-month-mark-color: rgba(100, 101, 102, 0.2);
-  --van-calendar-day-disabled-color: var(--van-gray-7);
-}
-
-.van-calendar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--van-calendar-background);
-
-  &__popup {
-    &.van-popup--top,
-    &.van-popup--bottom {
-      height: var(--van-calendar-popup-height);
-    }
-
-    &.van-popup--left,
-    &.van-popup--right {
-      height: 100%;
-    }
-
-    .van-popup__close-icon {
-      top: 11px;
-    }
-  }
-
-  &__header {
-    flex-shrink: 0;
-    box-shadow: var(--van-calendar-header-shadow);
-  }
-
-  &__month-title,
-  &__header-title,
-  &__header-subtitle {
-    color: var(--van-text-color);
-    height: var(--van-calendar-header-title-height);
-    font-weight: var(--van-font-bold);
-    line-height: var(--van-calendar-header-title-height);
-    text-align: center;
-  }
-
-  &__header-title {
-    font-size: var(--van-calendar-header-title-font-size);
-  }
-
-  &__header-subtitle {
-    font-size: var(--van-calendar-header-subtitle-font-size);
-  }
-
-  &__month-title {
-    font-size: var(--van-calendar-month-title-font-size);
-  }
-
-  &__weekdays {
-    display: flex;
-  }
-
-  &__weekday {
-    flex: 1;
-    font-size: var(--van-calendar-weekdays-font-size);
-    line-height: var(--van-calendar-weekdays-height);
-    text-align: center;
-  }
-
-  &__body {
-    flex: 1;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  &__days {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    user-select: none;
-  }
-
-  &__month-mark {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 0;
-    color: var(--van-calendar-month-mark-color);
-    font-size: var(--van-calendar-month-mark-font-size);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-
-  &__day,
-  &__selected-day {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  &__day {
-    position: relative;
-    width: 14.285%;
-    height: var(--van-calendar-day-height);
-    font-size: var(--van-calendar-day-font-size);
-    margin-bottom: var(--van-calendar-day-margin-bottom);
-    cursor: pointer;
-
-    &--end,
-    &--start,
-    &--start-end,
-    &--multiple-middle,
-    &--multiple-selected {
-      color: var(--van-calendar-range-edge-color);
-      background: var(--van-calendar-range-edge-background);
-    }
-
-    &--start {
-      border-radius: var(--van-radius-md) 0 0 var(--van-radius-md);
-    }
-
-    &--end {
-      border-radius: 0 var(--van-radius-md) var(--van-radius-md) 0;
-    }
-
-    &--start-end,
-    &--multiple-selected {
-      border-radius: var(--van-radius-md);
-    }
-
-    &--middle {
-      color: var(--van-calendar-range-middle-color);
-
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: currentColor;
-        opacity: var(--van-calendar-range-middle-background-opacity);
-        content: '';
-      }
-    }
-
-    &--disabled {
-      color: var(--van-calendar-day-disabled-color);
-      cursor: default;
-    }
-  }
-
-  &__top-info,
-  &__bottom-info {
-    position: absolute;
-    right: 0;
-    left: 0;
-    font-size: var(--van-calendar-info-font-size);
-    line-height: var(--van-calendar-info-line-height);
-
-    @media (max-width: 350px) {
-      font-size: 9px;
-    }
-  }
-
-  &__top-info {
-    top: 6px;
-  }
-
-  &__bottom-info {
-    bottom: 6px;
-  }
-
-  &__selected-day {
-    width: var(--van-calendar-selected-day-size);
-    height: var(--van-calendar-selected-day-size);
-    color: var(--van-calendar-selected-day-color);
-    background: var(--van-calendar-selected-day-background);
-    border-radius: var(--van-radius-md);
-  }
-
-  &__footer {
-    flex-shrink: 0;
-    padding-left: var(--van-padding-md);
-    padding-right: var(--van-padding-md);
-  }
-
-  &__confirm {
-    height: var(--van-calendar-confirm-button-height);
-    margin: var(--van-calendar-confirm-button-margin);
-  }
-}

package/es/calendar/style/less.d.ts

@@ -1 +0,0 @@
-export {};

package/es/calendar/style/less.js

@@ -1,10 +0,0 @@
-import "../../style/base.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../../loading/index.less";
-import "../../picker/index.less";
-import "../../button/index.less";
-import "../../overlay/index.less";
-import "../../popup/index.less";
-import "../../toast/index.less";
-import "../index.less";

package/es/calendar/utils.js

@@ -1,56 +0,0 @@
-import { createNamespace } from "../utils";
-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
-};