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

package/es/button/index.less

@@ -1,241 +0,0 @@
-body {
-  --van-button-mini-height: 24px;
-  --van-button-mini-padding: 0 var(--van-padding-base);
-  --van-button-mini-font-size: var(--van-font-size-xs);
-  --van-button-small-height: 32px;
-  --van-button-small-padding: 0 var(--van-padding-xs);
-  --van-button-small-font-size: var(--van-font-size-sm);
-  --van-button-normal-padding: 0 15px;
-  --van-button-normal-font-size: var(--van-font-size-md);
-  --van-button-large-height: 50px;
-  --van-button-default-height: 44px;
-  --van-button-default-line-height: 1.2;
-  --van-button-default-font-size: var(--van-font-size-lg);
-  --van-button-default-color: var(--van-text-color);
-  --van-button-default-background: var(--van-background-2);
-  --van-button-default-border-color: var(--van-gray-4);
-  --van-button-primary-color: var(--van-white);
-  --van-button-primary-background: var(--van-primary-color);
-  --van-button-primary-border-color: var(--van-primary-color);
-  --van-button-success-color: var(--van-white);
-  --van-button-success-background: var(--van-success-color);
-  --van-button-success-border-color: var(--van-success-color);
-  --van-button-danger-color: var(--van-white);
-  --van-button-danger-background: var(--van-danger-color);
-  --van-button-danger-border-color: var(--van-danger-color);
-  --van-button-warning-color: var(--van-white);
-  --van-button-warning-background: var(--van-warning-color);
-  --van-button-warning-border-color: var(--van-warning-color);
-  --van-button-border-width: var(--van-border-width);
-  --van-button-radius: var(--van-radius-md);
-  --van-button-round-radius: var(--van-radius-max);
-  --van-button-plain-background: var(--van-white);
-  --van-button-disabled-opacity: var(--van-disabled-opacity);
-  --van-button-icon-size: 1.2em;
-  --van-button-loading-icon-size: 20px;
-}
-
-.van-theme-dark {
-  --van-button-plain-background: transparent;
-}
-
-.van-button {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  height: var(--van-button-default-height);
-  margin: 0;
-  padding: 0;
-  font-size: var(--van-button-default-font-size);
-  line-height: var(--van-button-default-line-height);
-  text-align: center;
-  border-radius: var(--van-button-radius);
-  cursor: pointer;
-  transition: opacity var(--van-duration-fast);
-  -webkit-appearance: none;
-  -webkit-font-smoothing: auto;
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background: var(--van-black);
-    border: inherit;
-    border-color: var(--van-black);
-    border-radius: inherit; /* inherit parent's border radius */
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
-
-  &:active::before {
-    opacity: 0.1;
-  }
-
-  &--loading,
-  &--disabled {
-    &::before {
-      display: none;
-    }
-  }
-
-  &--default {
-    color: var(--van-button-default-color);
-    background: var(--van-button-default-background);
-    border: var(--van-button-border-width) solid
-      var(--van-button-default-border-color);
-  }
-
-  &--primary {
-    color: var(--van-button-primary-color);
-    background: var(--van-button-primary-background);
-    border: var(--van-button-border-width) solid
-      var(--van-button-primary-border-color);
-  }
-
-  &--success {
-    color: var(--van-button-success-color);
-    background: var(--van-button-success-background);
-    border: var(--van-button-border-width) solid
-      var(--van-button-success-border-color);
-  }
-
-  &--danger {
-    color: var(--van-button-danger-color);
-    background: var(--van-button-danger-background);
-    border: var(--van-button-border-width) solid
-      var(--van-button-danger-border-color);
-  }
-
-  &--warning {
-    color: var(--van-button-warning-color);
-    background: var(--van-button-warning-background);
-    border: var(--van-button-border-width) solid
-      var(--van-button-warning-border-color);
-  }
-
-  &--plain {
-    background: var(--van-button-plain-background);
-
-    &.van-button--primary {
-      color: var(--van-button-primary-background);
-    }
-
-    &.van-button--success {
-      color: var(--van-button-success-background);
-    }
-
-    &.van-button--danger {
-      color: var(--van-button-danger-background);
-    }
-
-    &.van-button--warning {
-      color: var(--van-button-warning-background);
-    }
-  }
-
-  &--large {
-    width: 100%;
-    height: var(--van-button-large-height);
-  }
-
-  &--normal {
-    padding: var(--van-button-normal-padding);
-    font-size: var(--van-button-normal-font-size);
-  }
-
-  &--small {
-    height: var(--van-button-small-height);
-    padding: var(--van-button-small-padding);
-    font-size: var(--van-button-small-font-size);
-  }
-
-  &__loading {
-    color: inherit;
-    font-size: inherit;
-
-    .van-loading__spinner {
-      color: currentColor;
-      width: var(--van-button-loading-icon-size);
-      height: var(--van-button-loading-icon-size);
-    }
-  }
-
-  &--mini {
-    height: var(--van-button-mini-height);
-    padding: var(--van-button-mini-padding);
-    font-size: var(--van-button-mini-font-size);
-
-    & + .van-button--mini {
-      margin-left: var(--van-padding-base);
-    }
-  }
-
-  &--block {
-    display: block;
-    width: 100%;
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    opacity: var(--van-button-disabled-opacity);
-  }
-
-  &--loading {
-    cursor: default;
-  }
-
-  &--round {
-    border-radius: var(--van-button-round-radius);
-  }
-
-  &--square {
-    border-radius: 0;
-  }
-
-  // align-items are ignored when flex container is a button in legacy safari
-  // see: https://bugs.webkit.org/show_bug.cgi?id=169700
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    // fix icon vertical align
-    // see: https://github.com/youzan/vant/issues/7617
-    &::before {
-      content: ' ';
-    }
-  }
-
-  &__icon {
-    font-size: var(--van-button-icon-size);
-    line-height: inherit;
-  }
-
-  &__icon + &__text,
-  &__loading + &__text,
-  &__text + &__icon,
-  &__text + &__loading {
-    margin-left: var(--van-padding-base);
-  }
-
-  &--hairline {
-    border-width: 0;
-
-    &::after {
-      border-color: inherit;
-      border-radius: calc(var(--van-button-radius) * 2);
-    }
-
-    &.van-button--round::after {
-      border-radius: var(--van-button-round-radius);
-    }
-
-    &.van-button--square::after {
-      border-radius: 0;
-    }
-  }
-}

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

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

package/es/button/style/less.js

@@ -1,5 +0,0 @@
-import "../../style/base.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../../loading/index.less";
-import "../index.less";

package/es/calendar/Calendar.js

@@ -1,401 +0,0 @@
-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";
-import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset } from "./utils";
-import { raf, useRect, onMountedOrActivated } from "@vant/use";
-import { useRefs } from "../composables/use-refs";
-import { useExpose } from "../composables/use-expose";
-import { Popup } from "../popup";
-import { Button } from "../button";
-import { Toast } from "../toast";
-import CalendarMonth from "./CalendarMonth";
-import CalendarHeader from "./CalendarHeader";
-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 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];
-        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) {
-          Toast(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) {
-          Toast(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
-    });
-    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
-};