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

package/es/stepper/Stepper.mjs

@@ -0,0 +1,247 @@
+import { withDirectives as _withDirectives, createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow } from "vue";
+import { ref, watch, computed, nextTick, defineComponent } from "vue";
+import { isDef, addUnit, addNumber, truthProp, resetScroll, numericProp, formatNumber, getSizeStyle, preventDefault, createNamespace, callInterceptor, makeNumericProp, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useCustomFieldValue } from "@vant/use";
+const [name, bem] = createNamespace("stepper");
+const LONG_PRESS_INTERVAL = 200;
+const LONG_PRESS_START_TIME = 600;
+const isEqual = (value1, value2) => String(value1) === String(value2);
+const stepperProps = {
+  min: makeNumericProp(1),
+  max: makeNumericProp(Infinity),
+  name: makeNumericProp(""),
+  step: makeNumericProp(1),
+  theme: String,
+  integer: Boolean,
+  disabled: Boolean,
+  showPlus: truthProp,
+  showMinus: truthProp,
+  showInput: truthProp,
+  longPress: truthProp,
+  allowEmpty: Boolean,
+  modelValue: numericProp,
+  inputWidth: numericProp,
+  buttonSize: numericProp,
+  placeholder: String,
+  disablePlus: Boolean,
+  disableMinus: Boolean,
+  disableInput: Boolean,
+  beforeChange: Function,
+  defaultValue: makeNumericProp(1),
+  decimalLength: numericProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: stepperProps,
+  emits: ["plus", "blur", "minus", "focus", "change", "overlimit", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const format = (value) => {
+      const {
+        min,
+        max,
+        allowEmpty,
+        decimalLength
+      } = props;
+      if (allowEmpty && value === "") {
+        return value;
+      }
+      value = formatNumber(String(value), !props.integer);
+      value = value === "" ? 0 : +value;
+      value = Number.isNaN(value) ? +min : value;
+      value = Math.max(Math.min(+max, value), +min);
+      if (isDef(decimalLength)) {
+        value = value.toFixed(+decimalLength);
+      }
+      return value;
+    };
+    const getInitialValue = () => {
+      var _a;
+      const defaultValue = (_a = props.modelValue) != null ? _a : props.defaultValue;
+      const value = format(defaultValue);
+      if (!isEqual(value, props.modelValue)) {
+        emit("update:modelValue", value);
+      }
+      return value;
+    };
+    let actionType;
+    const inputRef = ref();
+    const current = ref(getInitialValue());
+    const minusDisabled = computed(() => props.disabled || props.disableMinus || current.value <= +props.min);
+    const plusDisabled = computed(() => props.disabled || props.disablePlus || current.value >= +props.max);
+    const inputStyle = computed(() => ({
+      width: addUnit(props.inputWidth),
+      height: addUnit(props.buttonSize)
+    }));
+    const buttonStyle = computed(() => getSizeStyle(props.buttonSize));
+    const check = () => {
+      const value = format(current.value);
+      if (!isEqual(value, current.value)) {
+        current.value = value;
+      }
+    };
+    const setValue = (value) => {
+      if (props.beforeChange) {
+        callInterceptor(props.beforeChange, {
+          args: [value],
+          done() {
+            current.value = value;
+          }
+        });
+      } else {
+        current.value = value;
+      }
+    };
+    const onChange = () => {
+      if (actionType === "plus" && plusDisabled.value || actionType === "minus" && minusDisabled.value) {
+        emit("overlimit", actionType);
+        return;
+      }
+      const diff = actionType === "minus" ? -props.step : +props.step;
+      const value = format(addNumber(+current.value, diff));
+      setValue(value);
+      emit(actionType);
+    };
+    const onInput = (event) => {
+      const input = event.target;
+      const {
+        value
+      } = input;
+      const {
+        decimalLength
+      } = props;
+      let formatted = formatNumber(String(value), !props.integer);
+      if (isDef(decimalLength) && formatted.includes(".")) {
+        const pair = formatted.split(".");
+        formatted = `${pair[0]}.${pair[1].slice(0, +decimalLength)}`;
+      }
+      if (props.beforeChange) {
+        input.value = String(current.value);
+      } else if (!isEqual(value, formatted)) {
+        input.value = formatted;
+      }
+      const isNumeric = formatted === String(+formatted);
+      setValue(isNumeric ? +formatted : formatted);
+    };
+    const onFocus = (event) => {
+      var _a;
+      if (props.disableInput) {
+        (_a = inputRef.value) == null ? void 0 : _a.blur();
+      } else {
+        emit("focus", event);
+      }
+    };
+    const onBlur = (event) => {
+      const input = event.target;
+      const value = format(input.value);
+      input.value = String(value);
+      current.value = value;
+      nextTick(() => {
+        emit("blur", event);
+        resetScroll();
+      });
+    };
+    let isLongPress;
+    let longPressTimer;
+    const longPressStep = () => {
+      longPressTimer = setTimeout(() => {
+        onChange();
+        longPressStep();
+      }, LONG_PRESS_INTERVAL);
+    };
+    const onTouchStart = () => {
+      if (props.longPress) {
+        isLongPress = false;
+        clearTimeout(longPressTimer);
+        longPressTimer = setTimeout(() => {
+          isLongPress = true;
+          onChange();
+          longPressStep();
+        }, LONG_PRESS_START_TIME);
+      }
+    };
+    const onTouchEnd = (event) => {
+      if (props.longPress) {
+        clearTimeout(longPressTimer);
+        if (isLongPress) {
+          preventDefault(event);
+        }
+      }
+    };
+    const onMousedown = (event) => {
+      if (props.disableInput) {
+        preventDefault(event);
+      }
+    };
+    const createListeners = (type) => ({
+      onClick: (event) => {
+        preventDefault(event);
+        actionType = type;
+        onChange();
+      },
+      onTouchstartPassive: () => {
+        actionType = type;
+        onTouchStart();
+      },
+      onTouchend: onTouchEnd,
+      onTouchcancel: onTouchEnd
+    });
+    watch(() => [props.max, props.min, props.integer, props.decimalLength], check);
+    watch(() => props.modelValue, (value) => {
+      if (!isEqual(value, current.value)) {
+        current.value = format(value);
+      }
+    });
+    watch(current, (value) => {
+      emit("update:modelValue", value);
+      emit("change", value, {
+        name: props.name
+      });
+    });
+    useCustomFieldValue(() => props.modelValue);
+    return () => _createVNode("div", {
+      "role": "group",
+      "class": bem([props.theme])
+    }, [_withDirectives(_createVNode("button", _mergeProps({
+      "type": "button",
+      "style": buttonStyle.value,
+      "class": [bem("minus", {
+        disabled: minusDisabled.value
+      }), {
+        [HAPTICS_FEEDBACK]: !minusDisabled.value
+      }],
+      "aria-disabled": minusDisabled.value || void 0
+    }, createListeners("minus")), null), [[_vShow, props.showMinus]]), _withDirectives(_createVNode("input", {
+      "ref": inputRef,
+      "type": props.integer ? "tel" : "text",
+      "role": "spinbutton",
+      "class": bem("input"),
+      "value": current.value,
+      "style": inputStyle.value,
+      "disabled": props.disabled,
+      "readonly": props.disableInput,
+      "inputmode": props.integer ? "numeric" : "decimal",
+      "placeholder": props.placeholder,
+      "aria-valuemax": props.max,
+      "aria-valuemin": props.min,
+      "aria-valuenow": current.value,
+      "onBlur": onBlur,
+      "onInput": onInput,
+      "onFocus": onFocus,
+      "onMousedown": onMousedown
+    }, null), [[_vShow, props.showInput]]), _withDirectives(_createVNode("button", _mergeProps({
+      "type": "button",
+      "style": buttonStyle.value,
+      "class": [bem("plus", {
+        disabled: plusDisabled.value
+      }), {
+        [HAPTICS_FEEDBACK]: !plusDisabled.value
+      }],
+      "aria-disabled": plusDisabled.value || void 0
+    }, createListeners("plus")), null), [[_vShow, props.showPlus]])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/stepper/index.mjs

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

package/es/steps/Steps.mjs

@@ -0,0 +1,46 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+const [name, bem] = createNamespace("steps");
+const stepsProps = {
+  active: makeNumericProp(0),
+  direction: makeStringProp("horizontal"),
+  activeIcon: makeStringProp("checked"),
+  iconPrefix: String,
+  finishIcon: String,
+  activeColor: String,
+  inactiveIcon: String,
+  inactiveColor: String
+};
+const STEPS_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: stepsProps,
+  emits: ["clickStep"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(STEPS_KEY);
+    const onClickStep = (index) => emit("clickStep", index);
+    linkChildren({
+      props,
+      onClickStep
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem([props.direction])
+      }, [_createVNode("div", {
+        "class": bem("items")
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
+    };
+  }
+});
+export {
+  STEPS_KEY,
+  stdin_default as default
+};

package/es/steps/index.mjs

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

package/es/sticky/Sticky.mjs

@@ -0,0 +1,120 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, computed, reactive, defineComponent } from "vue";
+import { extend, isHidden, unitToPx, numericProp, getScrollTop, getZIndexStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useRect, useEventListener, useScrollParent } from "@vant/use";
+import { useVisibilityChange } from "../composables/use-visibility-change.mjs";
+const [name, bem] = createNamespace("sticky");
+const stickyProps = {
+  zIndex: numericProp,
+  position: makeStringProp("top"),
+  container: Object,
+  offsetTop: makeNumericProp(0),
+  offsetBottom: makeNumericProp(0)
+};
+var stdin_default = defineComponent({
+  name,
+  props: stickyProps,
+  emits: ["scroll", "change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const scrollParent = useScrollParent(root);
+    const state = reactive({
+      fixed: false,
+      width: 0,
+      height: 0,
+      transform: 0
+    });
+    const offset = computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
+    const rootStyle = computed(() => {
+      const {
+        fixed,
+        height,
+        width
+      } = state;
+      if (fixed) {
+        return {
+          width: `${width}px`,
+          height: `${height}px`
+        };
+      }
+    });
+    const stickyStyle = computed(() => {
+      if (!state.fixed) {
+        return;
+      }
+      const style = extend(getZIndexStyle(props.zIndex), {
+        width: `${state.width}px`,
+        height: `${state.height}px`,
+        [props.position]: `${offset.value}px`
+      });
+      if (state.transform) {
+        style.transform = `translate3d(0, ${state.transform}px, 0)`;
+      }
+      return style;
+    });
+    const emitScroll = (scrollTop) => emit("scroll", {
+      scrollTop,
+      isFixed: state.fixed
+    });
+    const onScroll = () => {
+      if (!root.value || isHidden(root)) {
+        return;
+      }
+      const {
+        container,
+        position
+      } = props;
+      const rootRect = useRect(root);
+      const scrollTop = getScrollTop(window);
+      state.width = rootRect.width;
+      state.height = rootRect.height;
+      if (position === "top") {
+        if (container) {
+          const containerRect = useRect(container);
+          const difference = containerRect.bottom - offset.value - state.height;
+          state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
+          state.transform = difference < 0 ? difference : 0;
+        } else {
+          state.fixed = offset.value > rootRect.top;
+        }
+      } else {
+        const {
+          clientHeight
+        } = document.documentElement;
+        if (container) {
+          const containerRect = useRect(container);
+          const difference = clientHeight - containerRect.top - offset.value - state.height;
+          state.fixed = clientHeight - offset.value < rootRect.bottom && clientHeight > containerRect.top;
+          state.transform = difference < 0 ? -difference : 0;
+        } else {
+          state.fixed = clientHeight - offset.value < rootRect.bottom;
+        }
+      }
+      emitScroll(scrollTop);
+    };
+    watch(() => state.fixed, (value) => emit("change", value));
+    useEventListener("scroll", onScroll, {
+      target: scrollParent,
+      passive: true
+    });
+    useVisibilityChange(root, onScroll);
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "ref": root,
+        "style": rootStyle.value
+      }, [_createVNode("div", {
+        "class": bem({
+          fixed: state.fixed
+        }),
+        "style": stickyStyle.value
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/sticky/index.mjs

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

package/es/submit-bar/SubmitBar.d.ts

@@ -20,6 +20,7 @@ declare const submitBarProps: {
     };
     buttonColor: StringConstructor;
     suffixLabel: StringConstructor;
+    placeholder: BooleanConstructor;
     decimalLength: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -49,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     buttonColor: StringConstructor;
     suffixLabel: StringConstructor;
+    placeholder: BooleanConstructor;
     decimalLength: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -76,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     buttonColor: StringConstructor;
     suffixLabel: StringConstructor;
+    placeholder: BooleanConstructor;
     decimalLength: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -88,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    placeholder: boolean;
     safeAreaInsetBottom: boolean;
     loading: boolean;
     currency: string;

package/es/submit-bar/SubmitBar.mjs

@@ -0,0 +1,115 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, defineComponent } from "vue";
+import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Button } from "../button/index.mjs";
+import { usePlaceholder } from "../composables/use-placeholder.mjs";
+const [name, bem, t] = createNamespace("submit-bar");
+const submitBarProps = {
+  tip: String,
+  label: String,
+  price: Number,
+  tipIcon: String,
+  loading: Boolean,
+  currency: makeStringProp("\xA5"),
+  disabled: Boolean,
+  textAlign: String,
+  buttonText: String,
+  buttonType: makeStringProp("danger"),
+  buttonColor: String,
+  suffixLabel: String,
+  placeholder: Boolean,
+  decimalLength: makeNumericProp(2),
+  safeAreaInsetBottom: truthProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: submitBarProps,
+  emits: ["submit"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const renderPlaceholder = usePlaceholder(root, bem);
+    const renderText = () => {
+      const {
+        price,
+        label,
+        currency,
+        textAlign,
+        suffixLabel,
+        decimalLength
+      } = props;
+      if (typeof price === "number") {
+        const pricePair = (price / 100).toFixed(+decimalLength).split(".");
+        const decimal = decimalLength ? `.${pricePair[1]}` : "";
+        return _createVNode("div", {
+          "class": bem("text"),
+          "style": {
+            textAlign
+          }
+        }, [_createVNode("span", null, [label || t("label")]), _createVNode("span", {
+          "class": bem("price")
+        }, [currency, _createVNode("span", {
+          "class": bem("price-integer")
+        }, [pricePair[0]]), decimal]), suffixLabel && _createVNode("span", {
+          "class": bem("suffix-label")
+        }, [suffixLabel])]);
+      }
+    };
+    const renderTip = () => {
+      var _a;
+      const {
+        tip,
+        tipIcon
+      } = props;
+      if (slots.tip || tip) {
+        return _createVNode("div", {
+          "class": bem("tip")
+        }, [tipIcon && _createVNode(Icon, {
+          "class": bem("tip-icon"),
+          "name": tipIcon
+        }, null), tip && _createVNode("span", {
+          "class": bem("tip-text")
+        }, [tip]), (_a = slots.tip) == null ? void 0 : _a.call(slots)]);
+      }
+    };
+    const onClickButton = () => emit("submit");
+    const renderButton = () => {
+      if (slots.button) {
+        return slots.button();
+      }
+      return _createVNode(Button, {
+        "round": true,
+        "type": props.buttonType,
+        "text": props.buttonText,
+        "class": bem("button", props.buttonType),
+        "color": props.buttonColor,
+        "loading": props.loading,
+        "disabled": props.disabled,
+        "onClick": onClickButton
+      }, null);
+    };
+    const renderSubmitBar = () => {
+      var _a, _b;
+      return _createVNode("div", {
+        "ref": root,
+        "class": [bem(), {
+          "van-safe-area-bottom": props.safeAreaInsetBottom
+        }]
+      }, [(_a = slots.top) == null ? void 0 : _a.call(slots), renderTip(), _createVNode("div", {
+        "class": bem("bar")
+      }, [(_b = slots.default) == null ? void 0 : _b.call(slots), renderText(), renderButton()])]);
+    };
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderSubmitBar);
+      }
+      return renderSubmitBar();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/submit-bar/index.d.ts

@@ -17,6 +17,7 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
     };
     buttonColor: StringConstructor;
     suffixLabel: StringConstructor;
+    placeholder: BooleanConstructor;
     decimalLength: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -44,6 +45,7 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
     };
     buttonColor: StringConstructor;
     suffixLabel: StringConstructor;
+    placeholder: BooleanConstructor;
     decimalLength: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -56,6 +58,7 @@ export declare const SubmitBar: import("../utils").WithInstall<import("vue").Def
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    placeholder: boolean;
     safeAreaInsetBottom: boolean;
     loading: boolean;
     currency: string;

package/es/submit-bar/index.mjs

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