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

package/es/slider/Slider.mjs

@@ -0,0 +1,267 @@
+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/index.mjs";
+import { useRect, useCustomFieldValue } from "@vant/use";
+import { useTouch } from "../composables/use-touch.mjs";
+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",
+        "onTouchstartPassive": (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.mjs

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

package/es/space/Space.d.ts

@@ -0,0 +1,48 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export declare type SpaceSize = number | string;
+export declare type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+declare const spaceProps: {
+    align: PropType<SpaceAlign>;
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: PropType<string | number | [SpaceSize, SpaceSize]>;
+        default: number;
+    };
+    wrap: BooleanConstructor;
+    fill: BooleanConstructor;
+};
+export declare type SpaceProps = ExtractPropTypes<typeof spaceProps>;
+declare const _default: import("vue").DefineComponent<{
+    align: PropType<SpaceAlign>;
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: PropType<string | number | [SpaceSize, SpaceSize]>;
+        default: number;
+    };
+    wrap: BooleanConstructor;
+    fill: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    align: PropType<SpaceAlign>;
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: PropType<string | number | [SpaceSize, SpaceSize]>;
+        default: number;
+    };
+    wrap: BooleanConstructor;
+    fill: BooleanConstructor;
+}>>, {
+    fill: boolean;
+    size: string | number | [SpaceSize, SpaceSize];
+    wrap: boolean;
+    direction: "vertical" | "horizontal";
+}>;
+export default _default;

package/es/space/Space.mjs

@@ -0,0 +1,87 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, Fragment } from "vue";
+import { createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("space");
+const spaceProps = {
+  align: String,
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  size: {
+    type: [Number, String, Array],
+    default: 8
+  },
+  wrap: Boolean,
+  fill: Boolean
+};
+function filterEmpty(children = []) {
+  const nodes = [];
+  children.forEach((child) => {
+    if (Array.isArray(child)) {
+      nodes.push(...child);
+    } else if (child.type === Fragment) {
+      nodes.push(...filterEmpty(child.children));
+    } else {
+      nodes.push(child);
+    }
+  });
+  return nodes.filter((c) => {
+    var _a;
+    return !(c && (typeof Comment !== "undefined" && c.type === Comment || c.type === Fragment && ((_a = c.children) == null ? void 0 : _a.length) === 0 || c.type === Text && c.children.trim() === ""));
+  });
+}
+var stdin_default = defineComponent({
+  name,
+  props: spaceProps,
+  setup(props, {
+    slots
+  }) {
+    const mergedAlign = computed(() => {
+      var _a;
+      return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
+    });
+    const getMargin = (size) => {
+      if (typeof size === "number") {
+        return size + "px";
+      }
+      return size;
+    };
+    const getMarginStyle = (isLast) => {
+      const style = {};
+      const marginRight = `${getMargin(Array.isArray(props.size) ? props.size[0] : props.size)}`;
+      const marginBottom = `${getMargin(Array.isArray(props.size) ? props.size[1] : props.size)}`;
+      if (isLast) {
+        return props.wrap ? {
+          marginBottom
+        } : {};
+      }
+      if (props.direction === "horizontal") {
+        style.marginRight = marginRight;
+      }
+      if (props.direction === "vertical" || props.wrap) {
+        style.marginBottom = marginBottom;
+      }
+      return style;
+    };
+    return () => {
+      var _a;
+      const children = filterEmpty((_a = slots.default) == null ? void 0 : _a.call(slots));
+      return _createVNode("div", {
+        "class": [bem({
+          [props.direction]: props.direction,
+          [`align-${mergedAlign.value}`]: mergedAlign.value,
+          wrap: props.wrap,
+          fill: props.fill
+        })]
+      }, [children.map((c, i) => _createVNode("div", {
+        "key": `item-${i}`,
+        "class": `${name}-item`,
+        "style": getMarginStyle(i === children.length - 1)
+      }, [c]))]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/space/index.css

@@ -0,0 +1 @@
+.van-space{display:inline-flex}.van-space--horizontal .van-space-item{display:flex;align-items:center}.van-space--vertical{flex-direction:column}.van-space--align-baseline{align-items:baseline}.van-space--align-start{align-items:flex-start}.van-space--align-end{align-items:flex-end}.van-space--align-center{align-items:center}.van-space--wrap{flex-wrap:wrap}.van-space--fill{display:flex}

package/es/space/index.d.ts

@@ -0,0 +1,37 @@
+export declare const Space: import("../utils").WithInstall<import("vue").DefineComponent<{
+    align: import("vue").PropType<import("./Space").SpaceAlign>;
+    direction: {
+        type: import("vue").PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<string | number | [import("./Space").SpaceSize, import("./Space").SpaceSize]>;
+        default: number;
+    };
+    wrap: BooleanConstructor;
+    fill: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    align: import("vue").PropType<import("./Space").SpaceAlign>;
+    direction: {
+        type: import("vue").PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<string | number | [import("./Space").SpaceSize, import("./Space").SpaceSize]>;
+        default: number;
+    };
+    wrap: BooleanConstructor;
+    fill: BooleanConstructor;
+}>>, {
+    fill: boolean;
+    size: string | number | [import("./Space").SpaceSize, import("./Space").SpaceSize];
+    wrap: boolean;
+    direction: "vertical" | "horizontal";
+}>>;
+export default Space;
+export type { SpaceProps, SpaceSize, SpaceAlign } from './Space';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanSpace: typeof Space;
+    }
+}

package/es/space/index.mjs

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

package/es/step/Step.mjs

@@ -0,0 +1,118 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { BORDER, createNamespace } from "../utils/index.mjs";
+import { STEPS_KEY } from "../steps/Steps.mjs";
+import { useParent } from "@vant/use";
+import { Icon } from "../icon/index.mjs";
+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.mjs

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