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

package/es/skeleton/Skeleton.js

@@ -1,84 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { defineComponent } from "vue";
-import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils";
-const [name, bem] = createNamespace("skeleton");
-const DEFAULT_ROW_WIDTH = "100%";
-const DEFAULT_LAST_ROW_WIDTH = "60%";
-const skeletonProps = {
-  row: makeNumericProp(0),
-  title: Boolean,
-  round: Boolean,
-  avatar: Boolean,
-  loading: truthProp,
-  animate: truthProp,
-  avatarSize: numericProp,
-  titleWidth: numericProp,
-  avatarShape: makeStringProp("round"),
-  rowWidth: {
-    type: [Number, String, Array],
-    default: DEFAULT_ROW_WIDTH
-  }
-};
-var stdin_default = defineComponent({
-  name,
-  inheritAttrs: false,
-  props: skeletonProps,
-  setup(props, {
-    slots,
-    attrs
-  }) {
-    const renderAvatar = () => {
-      if (props.avatar) {
-        return _createVNode("div", {
-          "class": bem("avatar", props.avatarShape),
-          "style": getSizeStyle(props.avatarSize)
-        }, null);
-      }
-    };
-    const renderTitle = () => {
-      if (props.title) {
-        return _createVNode("h3", {
-          "class": bem("title"),
-          "style": {
-            width: addUnit(props.titleWidth)
-          }
-        }, null);
-      }
-    };
-    const getRowWidth = (index) => {
-      const {
-        rowWidth
-      } = props;
-      if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
-        return DEFAULT_LAST_ROW_WIDTH;
-      }
-      if (Array.isArray(rowWidth)) {
-        return rowWidth[index];
-      }
-      return rowWidth;
-    };
-    const renderRows = () => Array(+props.row).fill("").map((_, i) => _createVNode("div", {
-      "class": bem("row"),
-      "style": {
-        width: addUnit(getRowWidth(i))
-      }
-    }, null));
-    return () => {
-      var _a;
-      if (!props.loading) {
-        return (_a = slots.default) == null ? void 0 : _a.call(slots);
-      }
-      return _createVNode("div", _mergeProps({
-        "class": bem({
-          animate: props.animate,
-          round: props.round
-        })
-      }, attrs), [renderAvatar(), _createVNode("div", {
-        "class": bem("content")
-      }, [renderTitle(), renderRows()])]);
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/skeleton/index.js

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

package/es/skeleton/index.less

@@ -1,73 +0,0 @@
-body {
-  --van-skeleton-row-height: 16px;
-  --van-skeleton-row-background: var(--van-active-color);
-  --van-skeleton-row-margin-top: var(--van-padding-sm);
-  --van-skeleton-title-width: 40%;
-  --van-skeleton-avatar-size: 32px;
-  --van-skeleton-avatar-background: var(--van-active-color);
-  --van-skeleton-duration: 1.2s;
-}
-
-.van-skeleton {
-  display: flex;
-  padding: 0 var(--van-padding-md);
-
-  &__avatar {
-    flex-shrink: 0;
-    width: var(--van-skeleton-avatar-size);
-    height: var(--van-skeleton-avatar-size);
-    margin-right: var(--van-padding-md);
-    background: var(--van-skeleton-avatar-background);
-
-    &--round {
-      border-radius: var(--van-radius-max);
-    }
-  }
-
-  &__content {
-    width: 100%;
-  }
-
-  &__avatar + &__content {
-    padding-top: var(--van-padding-xs);
-  }
-
-  &__row,
-  &__title {
-    height: var(--van-skeleton-row-height);
-    background: var(--van-skeleton-row-background);
-  }
-
-  &__title {
-    width: var(--van-skeleton-title-width);
-    margin: 0;
-  }
-
-  &__row {
-    &:not(:first-child) {
-      margin-top: var(--van-skeleton-row-margin-top);
-    }
-  }
-
-  &__title + &__row {
-    margin-top: 20px;
-  }
-
-  &--animate {
-    animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out
-      infinite;
-  }
-
-  &--round {
-    .van-skeleton__row,
-    .van-skeleton__title {
-      border-radius: var(--van-radius-max);
-    }
-  }
-}
-
-@keyframes van-skeleton-blink {
-  50% {
-    opacity: 0.6;
-  }
-}

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

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

package/es/skeleton/style/less.js

@@ -1,2 +0,0 @@
-import "../../style/base.less";
-import "../index.less";

package/es/slider/Slider.js

@@ -1,267 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { ref, computed, defineComponent } from "vue";
-import { clamp, addUnit, addNumber, numericProp, isSameValue, getSizeStyle, preventDefault, stopPropagation, createNamespace, makeNumericProp } from "../utils";
-import { useRect, useCustomFieldValue } from "@vant/use";
-import { useTouch } from "../composables/use-touch";
-const [name, bem] = createNamespace("slider");
-const sliderProps = {
-  min: makeNumericProp(0),
-  max: makeNumericProp(100),
-  step: makeNumericProp(1),
-  range: Boolean,
-  reverse: Boolean,
-  disabled: Boolean,
-  readonly: Boolean,
-  vertical: Boolean,
-  barHeight: numericProp,
-  buttonSize: numericProp,
-  activeColor: String,
-  inactiveColor: String,
-  modelValue: {
-    type: [Number, Array],
-    default: 0
-  }
-};
-var stdin_default = defineComponent({
-  name,
-  props: sliderProps,
-  emits: ["change", "dragEnd", "dragStart", "update:modelValue"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    let buttonIndex;
-    let current;
-    let startValue;
-    const root = ref();
-    const dragStatus = ref();
-    const touch = useTouch();
-    const scope = computed(() => Number(props.max) - Number(props.min));
-    const wrapperStyle = computed(() => {
-      const crossAxis = props.vertical ? "width" : "height";
-      return {
-        background: props.inactiveColor,
-        [crossAxis]: addUnit(props.barHeight)
-      };
-    });
-    const isRange = (val) => props.range && Array.isArray(val);
-    const calcMainAxis = () => {
-      const {
-        modelValue,
-        min
-      } = props;
-      if (isRange(modelValue)) {
-        return `${(modelValue[1] - modelValue[0]) * 100 / scope.value}%`;
-      }
-      return `${(modelValue - Number(min)) * 100 / scope.value}%`;
-    };
-    const calcOffset = () => {
-      const {
-        modelValue,
-        min
-      } = props;
-      if (isRange(modelValue)) {
-        return `${(modelValue[0] - Number(min)) * 100 / scope.value}%`;
-      }
-      return "0%";
-    };
-    const barStyle = computed(() => {
-      const mainAxis = props.vertical ? "height" : "width";
-      const style = {
-        [mainAxis]: calcMainAxis(),
-        background: props.activeColor
-      };
-      if (dragStatus.value) {
-        style.transition = "none";
-      }
-      const getPositionKey = () => {
-        if (props.vertical) {
-          return props.reverse ? "bottom" : "top";
-        }
-        return props.reverse ? "right" : "left";
-      };
-      style[getPositionKey()] = calcOffset();
-      return style;
-    });
-    const format = (value) => {
-      const min = +props.min;
-      const max = +props.max;
-      const step = +props.step;
-      value = clamp(value, min, max);
-      const diff = Math.round((value - min) / step) * step;
-      return addNumber(min, diff);
-    };
-    const handleRangeValue = (value) => {
-      var _a, _b;
-      const left = (_a = value[0]) != null ? _a : Number(props.min);
-      const right = (_b = value[1]) != null ? _b : Number(props.max);
-      return left > right ? [right, left] : [left, right];
-    };
-    const updateValue = (value, end) => {
-      if (isRange(value)) {
-        value = handleRangeValue(value).map(format);
-      } else {
-        value = format(value);
-      }
-      if (!isSameValue(value, props.modelValue)) {
-        emit("update:modelValue", value);
-      }
-      if (end && !isSameValue(value, startValue)) {
-        emit("change", value);
-      }
-    };
-    const onClick = (event) => {
-      event.stopPropagation();
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      const {
-        min,
-        reverse,
-        vertical,
-        modelValue
-      } = props;
-      const rect = useRect(root);
-      const getDelta = () => {
-        if (vertical) {
-          if (reverse) {
-            return rect.bottom - event.clientY;
-          }
-          return event.clientY - rect.top;
-        }
-        if (reverse) {
-          return rect.right - event.clientX;
-        }
-        return event.clientX - rect.left;
-      };
-      const total = vertical ? rect.height : rect.width;
-      const value = Number(min) + getDelta() / total * scope.value;
-      if (isRange(modelValue)) {
-        const [left, right] = modelValue;
-        const middle = (left + right) / 2;
-        if (value <= middle) {
-          updateValue([value, right], true);
-        } else {
-          updateValue([left, value], true);
-        }
-      } else {
-        updateValue(value, true);
-      }
-    };
-    const onTouchStart = (event) => {
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      touch.start(event);
-      current = props.modelValue;
-      if (isRange(current)) {
-        startValue = current.map(format);
-      } else {
-        startValue = format(current);
-      }
-      dragStatus.value = "start";
-    };
-    const onTouchMove = (event) => {
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      if (dragStatus.value === "start") {
-        emit("dragStart", event);
-      }
-      preventDefault(event, true);
-      touch.move(event);
-      dragStatus.value = "dragging";
-      const rect = useRect(root);
-      const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
-      const total = props.vertical ? rect.height : rect.width;
-      let diff = delta / total * scope.value;
-      if (props.reverse) {
-        diff = -diff;
-      }
-      if (isRange(startValue)) {
-        const index = props.reverse ? 1 - buttonIndex : buttonIndex;
-        current[index] = startValue[index] + diff;
-      } else {
-        current = startValue + diff;
-      }
-      updateValue(current);
-    };
-    const onTouchEnd = (event) => {
-      if (props.disabled || props.readonly) {
-        return;
-      }
-      if (dragStatus.value === "dragging") {
-        updateValue(current, true);
-        emit("dragEnd", event);
-      }
-      dragStatus.value = "";
-    };
-    const getButtonClassName = (index) => {
-      if (typeof index === "number") {
-        const position = ["left", "right"];
-        return bem(`button-wrapper`, position[index]);
-      }
-      return bem("button-wrapper", props.reverse ? "left" : "right");
-    };
-    const renderButtonContent = (value, index) => {
-      if (typeof index === "number") {
-        const slot = slots[index === 0 ? "left-button" : "right-button"];
-        if (slot) {
-          return slot({
-            value
-          });
-        }
-      }
-      if (slots.button) {
-        return slots.button({
-          value
-        });
-      }
-      return _createVNode("div", {
-        "class": bem("button"),
-        "style": getSizeStyle(props.buttonSize)
-      }, null);
-    };
-    const renderButton = (index) => {
-      const current2 = typeof index === "number" ? props.modelValue[index] : props.modelValue;
-      return _createVNode("div", {
-        "role": "slider",
-        "class": getButtonClassName(index),
-        "tabindex": props.disabled ? void 0 : 0,
-        "aria-valuemin": props.min,
-        "aria-valuenow": current2,
-        "aria-valuemax": props.max,
-        "aria-disabled": props.disabled || void 0,
-        "aria-readonly": props.readonly || void 0,
-        "aria-orientation": props.vertical ? "vertical" : "horizontal",
-        "onTouchstart": (event) => {
-          if (typeof index === "number") {
-            buttonIndex = index;
-          }
-          onTouchStart(event);
-        },
-        "onTouchmove": onTouchMove,
-        "onTouchend": onTouchEnd,
-        "onTouchcancel": onTouchEnd,
-        "onClick": stopPropagation
-      }, [renderButtonContent(current2, index)]);
-    };
-    updateValue(props.modelValue);
-    useCustomFieldValue(() => props.modelValue);
-    return () => _createVNode("div", {
-      "ref": root,
-      "style": wrapperStyle.value,
-      "class": bem({
-        vertical: props.vertical,
-        disabled: props.disabled
-      }),
-      "onClick": onClick
-    }, [_createVNode("div", {
-      "class": bem("bar"),
-      "style": barStyle.value
-    }, [props.range ? [renderButton(0), renderButton(1)] : renderButton()])]);
-  }
-});
-export {
-  stdin_default as default
-};

package/es/slider/index.js

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

package/es/slider/index.less

@@ -1,104 +0,0 @@
-body {
-  --van-slider-active-background: var(--van-primary-color);
-  --van-slider-inactive-background: var(--van-gray-3);
-  --van-slider-disabled-opacity: var(--van-disabled-opacity);
-  --van-slider-bar-height: 2px;
-  --van-slider-button-width: 24px;
-  --van-slider-button-height: 24px;
-  --van-slider-button-radius: 50%;
-  --van-slider-button-background: var(--van-white);
-  --van-slider-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.van-theme-dark {
-  --van-slider-inactive-background: var(--van-background-3);
-}
-
-.van-slider {
-  position: relative;
-  width: 100%;
-  height: var(--van-slider-bar-height);
-  background: var(--van-slider-inactive-background);
-  border-radius: var(--van-radius-max);
-  cursor: pointer;
-
-  // use pseudo element to expand click area
-  &::before {
-    position: absolute;
-    top: calc(var(--van-padding-xs) * -1);
-    right: 0;
-    bottom: calc(var(--van-padding-xs) * -1);
-    left: 0;
-    content: '';
-  }
-
-  &__bar {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--van-slider-active-background);
-    border-radius: inherit;
-    transition: all var(--van-duration-fast);
-  }
-
-  &__button {
-    width: var(--van-slider-button-width);
-    height: var(--van-slider-button-height);
-    background: var(--van-slider-button-background);
-    border-radius: var(--van-slider-button-radius);
-    box-shadow: var(--van-slider-button-shadow);
-
-    &-wrapper {
-      position: absolute;
-      cursor: grab;
-      top: 50%;
-
-      &--right {
-        right: 0;
-        transform: translate3d(50%, -50%, 0);
-      }
-
-      &--left {
-        left: 0;
-        transform: translate3d(-50%, -50%, 0);
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    opacity: var(--van-slider-disabled-opacity);
-
-    .van-slider__button-wrapper {
-      cursor: not-allowed;
-    }
-  }
-
-  &--vertical {
-    display: inline-block;
-    width: var(--van-slider-bar-height);
-    height: 100%;
-
-    .van-slider__button-wrapper--right {
-      top: auto;
-      right: 50%;
-      bottom: 0;
-      transform: translate3d(50%, 50%, 0);
-    }
-
-    .van-slider__button-wrapper--left {
-      top: 0;
-      right: 50%;
-      left: auto;
-      transform: translate3d(50%, -50%, 0);
-    }
-
-    // use pseudo element to expand click area
-    &::before {
-      top: 0;
-      right: calc(var(--van-padding-xs) * -1);
-      bottom: 0;
-      left: calc(var(--van-padding-xs) * -1);
-    }
-  }
-}

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

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

package/es/slider/style/less.js

@@ -1,2 +0,0 @@
-import "../../style/base.less";
-import "../index.less";

package/es/step/Step.js

@@ -1,118 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { computed, defineComponent } from "vue";
-import { BORDER, createNamespace } from "../utils";
-import { STEPS_KEY } from "../steps/Steps";
-import { useParent } from "@vant/use";
-import { Icon } from "../icon";
-const [name, bem] = createNamespace("step");
-var stdin_default = defineComponent({
-  name,
-  setup(props, {
-    slots
-  }) {
-    const {
-      parent,
-      index
-    } = useParent(STEPS_KEY);
-    if (!parent) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error("[Vant] <Step> must be a child component of <Steps>.");
-      }
-      return;
-    }
-    const parentProps = parent.props;
-    const getStatus = () => {
-      const active = +parentProps.active;
-      if (index.value < active) {
-        return "finish";
-      }
-      return index.value === active ? "process" : "waiting";
-    };
-    const isActive = () => getStatus() === "process";
-    const lineStyle = computed(() => ({
-      background: getStatus() === "finish" ? parentProps.activeColor : parentProps.inactiveColor
-    }));
-    const titleStyle = computed(() => {
-      if (isActive()) {
-        return {
-          color: parentProps.activeColor
-        };
-      }
-      if (getStatus() === "waiting") {
-        return {
-          color: parentProps.inactiveColor
-        };
-      }
-    });
-    const onClickStep = () => parent.onClickStep(index.value);
-    const renderCircle = () => {
-      const {
-        iconPrefix,
-        finishIcon,
-        activeIcon,
-        activeColor,
-        inactiveIcon
-      } = parentProps;
-      if (isActive()) {
-        if (slots["active-icon"]) {
-          return slots["active-icon"]();
-        }
-        return _createVNode(Icon, {
-          "class": bem("icon", "active"),
-          "name": activeIcon,
-          "color": activeColor,
-          "classPrefix": iconPrefix
-        }, null);
-      }
-      if (getStatus() === "finish" && (finishIcon || slots["finish-icon"])) {
-        if (slots["finish-icon"]) {
-          return slots["finish-icon"]();
-        }
-        return _createVNode(Icon, {
-          "class": bem("icon", "finish"),
-          "name": finishIcon,
-          "color": activeColor,
-          "classPrefix": iconPrefix
-        }, null);
-      }
-      if (slots["inactive-icon"]) {
-        return slots["inactive-icon"]();
-      }
-      if (inactiveIcon) {
-        return _createVNode(Icon, {
-          "class": bem("icon"),
-          "name": inactiveIcon,
-          "classPrefix": iconPrefix
-        }, null);
-      }
-      return _createVNode("i", {
-        "class": bem("circle"),
-        "style": lineStyle.value
-      }, null);
-    };
-    return () => {
-      var _a;
-      const status = getStatus();
-      return _createVNode("div", {
-        "class": [BORDER, bem([parentProps.direction, {
-          [status]: status
-        }])]
-      }, [_createVNode("div", {
-        "class": bem("title", {
-          active: isActive()
-        }),
-        "style": titleStyle.value,
-        "onClick": onClickStep
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), _createVNode("div", {
-        "class": bem("circle-container"),
-        "onClick": onClickStep
-      }, [renderCircle()]), _createVNode("div", {
-        "class": bem("line"),
-        "style": lineStyle.value
-      }, null)]);
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/step/index.js

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