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

package/es/popup/Popup.mjs

@@ -0,0 +1,205 @@
+import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, provide, Teleport, nextTick, computed, onMounted, Transition, onActivated, onDeactivated, defineComponent } from "vue";
+import { popupSharedProps } from "./shared.mjs";
+import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useEventListener } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { useLockScroll } from "../composables/use-lock-scroll.mjs";
+import { useLazyRender } from "../composables/use-lazy-render.mjs";
+import { POPUP_TOGGLE_KEY } from "../composables/on-popup-reopen.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Overlay } from "../overlay/index.mjs";
+const popupProps = extend({}, popupSharedProps, {
+  round: Boolean,
+  position: makeStringProp("center"),
+  closeIcon: makeStringProp("cross"),
+  closeable: Boolean,
+  transition: String,
+  iconPrefix: String,
+  closeOnPopstate: Boolean,
+  closeIconPosition: makeStringProp("top-right"),
+  safeAreaInsetTop: Boolean,
+  safeAreaInsetBottom: Boolean
+});
+const [name, bem] = createNamespace("popup");
+let globalZIndex = 2e3;
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props: popupProps,
+  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
+  setup(props, {
+    emit,
+    attrs,
+    slots
+  }) {
+    let opened;
+    let shouldReopen;
+    const zIndex = ref();
+    const popupRef = ref();
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
+    const style = computed(() => {
+      const style2 = {
+        zIndex: zIndex.value
+      };
+      if (isDef(props.duration)) {
+        const key = props.position === "center" ? "animationDuration" : "transitionDuration";
+        style2[key] = `${props.duration}s`;
+      }
+      return style2;
+    });
+    const open = () => {
+      if (!opened) {
+        if (props.zIndex !== void 0) {
+          globalZIndex = +props.zIndex;
+        }
+        opened = true;
+        zIndex.value = ++globalZIndex;
+        emit("open");
+      }
+    };
+    const close = () => {
+      if (opened) {
+        callInterceptor(props.beforeClose, {
+          done() {
+            opened = false;
+            emit("close");
+            emit("update:show", false);
+          }
+        });
+      }
+    };
+    const onClickOverlay = (event) => {
+      emit("clickOverlay", event);
+      if (props.closeOnClickOverlay) {
+        close();
+      }
+    };
+    const renderOverlay = () => {
+      if (props.overlay) {
+        return _createVNode(Overlay, {
+          "show": props.show,
+          "class": props.overlayClass,
+          "zIndex": zIndex.value,
+          "duration": props.duration,
+          "customStyle": props.overlayStyle,
+          "onClick": onClickOverlay
+        }, {
+          default: slots["overlay-content"]
+        });
+      }
+    };
+    const onClickCloseIcon = (event) => {
+      emit("clickCloseIcon", event);
+      close();
+    };
+    const renderCloseIcon = () => {
+      if (props.closeable) {
+        return _createVNode(Icon, {
+          "role": "button",
+          "tabindex": 0,
+          "name": props.closeIcon,
+          "class": [bem("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK],
+          "classPrefix": props.iconPrefix,
+          "onClick": onClickCloseIcon
+        }, null);
+      }
+    };
+    const onOpened = () => emit("opened");
+    const onClosed = () => emit("closed");
+    const onKeydown = (event) => emit("keydown", event);
+    const renderPopup = lazyRender(() => {
+      var _a;
+      const {
+        round,
+        position,
+        safeAreaInsetTop,
+        safeAreaInsetBottom
+      } = props;
+      return _withDirectives(_createVNode("div", _mergeProps({
+        "ref": popupRef,
+        "style": style.value,
+        "class": [bem({
+          round,
+          [position]: position
+        }), {
+          "van-safe-area-top": safeAreaInsetTop,
+          "van-safe-area-bottom": safeAreaInsetBottom
+        }],
+        "onKeydown": onKeydown
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[_vShow, props.show]]);
+    });
+    const renderTransition = () => {
+      const {
+        position,
+        transition,
+        transitionAppear
+      } = props;
+      const name2 = position === "center" ? "van-fade" : `van-popup-slide-${position}`;
+      return _createVNode(Transition, {
+        "name": transition || name2,
+        "appear": transitionAppear,
+        "onAfterEnter": onOpened,
+        "onAfterLeave": onClosed
+      }, {
+        default: renderPopup
+      });
+    };
+    watch(() => props.show, (show) => {
+      if (show && !opened) {
+        open();
+        if (attrs.tabindex === 0) {
+          nextTick(() => {
+            var _a;
+            (_a = popupRef.value) == null ? void 0 : _a.focus();
+          });
+        }
+      }
+      if (!show && opened) {
+        opened = false;
+        emit("close");
+      }
+    });
+    useExpose({
+      popupRef
+    });
+    useLockScroll(popupRef, () => props.show && props.lockScroll);
+    useEventListener("popstate", () => {
+      if (props.closeOnPopstate) {
+        close();
+        shouldReopen = false;
+      }
+    });
+    onMounted(() => {
+      if (props.show) {
+        open();
+      }
+    });
+    onActivated(() => {
+      if (shouldReopen) {
+        emit("update:show", true);
+        shouldReopen = false;
+      }
+    });
+    onDeactivated(() => {
+      if (props.show && props.teleport) {
+        close();
+        shouldReopen = true;
+      }
+    });
+    provide(POPUP_TOGGLE_KEY, () => props.show);
+    return () => {
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [renderOverlay(), renderTransition()]
+        });
+      }
+      return _createVNode(_Fragment, null, [renderOverlay(), renderTransition()]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/popup/index.mjs

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

package/es/popup/shared.mjs

@@ -0,0 +1,20 @@
+import { truthProp, unknownProp, numericProp } from "../utils/index.mjs";
+const popupSharedProps = {
+  show: Boolean,
+  zIndex: numericProp,
+  overlay: truthProp,
+  duration: numericProp,
+  teleport: [String, Object],
+  lockScroll: truthProp,
+  lazyRender: truthProp,
+  beforeClose: Function,
+  overlayStyle: Object,
+  overlayClass: unknownProp,
+  transitionAppear: Boolean,
+  closeOnClickOverlay: truthProp
+};
+const popupSharedPropKeys = Object.keys(popupSharedProps);
+export {
+  popupSharedPropKeys,
+  popupSharedProps
+};

package/es/progress/Progress.mjs

@@ -0,0 +1,76 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { addUnit, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("progress");
+const progressProps = {
+  color: String,
+  inactive: Boolean,
+  pivotText: String,
+  textColor: String,
+  showPivot: truthProp,
+  pivotColor: String,
+  trackColor: String,
+  strokeWidth: numericProp,
+  percentage: {
+    type: numericProp,
+    default: 0,
+    validator: (value) => value >= 0 && value <= 100
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: progressProps,
+  setup(props) {
+    const background = computed(() => props.inactive ? void 0 : props.color);
+    const renderPivot = () => {
+      const {
+        textColor,
+        pivotText,
+        pivotColor,
+        percentage
+      } = props;
+      const text = pivotText != null ? pivotText : `${percentage}%`;
+      if (props.showPivot && text) {
+        const style = {
+          color: textColor,
+          left: `${+percentage}%`,
+          transform: `translate(-${+percentage}%,-50%)`,
+          background: pivotColor || background.value
+        };
+        return _createVNode("span", {
+          "style": style,
+          "class": bem("pivot", {
+            inactive: props.inactive
+          })
+        }, [text]);
+      }
+    };
+    return () => {
+      const {
+        trackColor,
+        percentage,
+        strokeWidth
+      } = props;
+      const rootStyle = {
+        background: trackColor,
+        height: addUnit(strokeWidth)
+      };
+      const portionStyle = {
+        width: `${percentage}%`,
+        background: background.value
+      };
+      return _createVNode("div", {
+        "class": bem(),
+        "style": rootStyle
+      }, [_createVNode("span", {
+        "class": bem("portion", {
+          inactive: props.inactive
+        }),
+        "style": portionStyle
+      }, null), renderPivot()]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/progress/index.mjs

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

package/es/pull-refresh/PullRefresh.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "refresh")[], "update:modelValue" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "refresh")[], "update:modelValue" | "change" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     disabled: BooleanConstructor;
     modelValue: BooleanConstructor;
     headHeight: {
@@ -62,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onRefresh?: ((...args: any[]) => any) | undefined;
 }, {

package/es/pull-refresh/PullRefresh.mjs

@@ -0,0 +1,189 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, reactive, nextTick, defineComponent } from "vue";
+import { numericProp, getScrollTop, preventDefault, createNamespace, makeNumericProp } from "../utils/index.mjs";
+import { useScrollParent } from "@vant/use";
+import { useTouch } from "../composables/use-touch.mjs";
+import { Loading } from "../loading/index.mjs";
+const [name, bem, t] = createNamespace("pull-refresh");
+const DEFAULT_HEAD_HEIGHT = 50;
+const TEXT_STATUS = ["pulling", "loosing", "success"];
+const pullRefreshProps = {
+  disabled: Boolean,
+  modelValue: Boolean,
+  headHeight: makeNumericProp(DEFAULT_HEAD_HEIGHT),
+  successText: String,
+  pullingText: String,
+  loosingText: String,
+  loadingText: String,
+  pullDistance: numericProp,
+  successDuration: makeNumericProp(500),
+  animationDuration: makeNumericProp(300)
+};
+var stdin_default = defineComponent({
+  name,
+  props: pullRefreshProps,
+  emits: ["change", "refresh", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let reachTop;
+    const root = ref();
+    const scrollParent = useScrollParent(root);
+    const state = reactive({
+      status: "normal",
+      distance: 0,
+      duration: 0
+    });
+    const touch = useTouch();
+    const getHeadStyle = () => {
+      if (props.headHeight !== DEFAULT_HEAD_HEIGHT) {
+        return {
+          height: `${props.headHeight}px`
+        };
+      }
+    };
+    const isTouchable = () => state.status !== "loading" && state.status !== "success" && !props.disabled;
+    const ease = (distance) => {
+      const pullDistance = +(props.pullDistance || props.headHeight);
+      if (distance > pullDistance) {
+        if (distance < pullDistance * 2) {
+          distance = pullDistance + (distance - pullDistance) / 2;
+        } else {
+          distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+        }
+      }
+      return Math.round(distance);
+    };
+    const setStatus = (distance, isLoading) => {
+      const pullDistance = +(props.pullDistance || props.headHeight);
+      state.distance = distance;
+      if (isLoading) {
+        state.status = "loading";
+      } else if (distance === 0) {
+        state.status = "normal";
+      } else if (distance < pullDistance) {
+        state.status = "pulling";
+      } else {
+        state.status = "loosing";
+      }
+      emit("change", {
+        status: state.status,
+        distance
+      });
+    };
+    const getStatusText = () => {
+      const {
+        status
+      } = state;
+      if (status === "normal") {
+        return "";
+      }
+      return props[`${status}Text`] || t(status);
+    };
+    const renderStatus = () => {
+      const {
+        status,
+        distance
+      } = state;
+      if (slots[status]) {
+        return slots[status]({
+          distance
+        });
+      }
+      const nodes = [];
+      if (TEXT_STATUS.includes(status)) {
+        nodes.push(_createVNode("div", {
+          "class": bem("text")
+        }, [getStatusText()]));
+      }
+      if (status === "loading") {
+        nodes.push(_createVNode(Loading, {
+          "class": bem("loading")
+        }, {
+          default: getStatusText
+        }));
+      }
+      return nodes;
+    };
+    const showSuccessTip = () => {
+      state.status = "success";
+      setTimeout(() => {
+        setStatus(0);
+      }, +props.successDuration);
+    };
+    const checkPosition = (event) => {
+      reachTop = getScrollTop(scrollParent.value) === 0;
+      if (reachTop) {
+        state.duration = 0;
+        touch.start(event);
+      }
+    };
+    const onTouchStart = (event) => {
+      if (isTouchable()) {
+        checkPosition(event);
+      }
+    };
+    const onTouchMove = (event) => {
+      if (isTouchable()) {
+        if (!reachTop) {
+          checkPosition(event);
+        }
+        const {
+          deltaY
+        } = touch;
+        touch.move(event);
+        if (reachTop && deltaY.value >= 0 && touch.isVertical()) {
+          preventDefault(event);
+          setStatus(ease(deltaY.value));
+        }
+      }
+    };
+    const onTouchEnd = () => {
+      if (reachTop && touch.deltaY.value && isTouchable()) {
+        state.duration = +props.animationDuration;
+        if (state.status === "loosing") {
+          setStatus(+props.headHeight, true);
+          emit("update:modelValue", true);
+          nextTick(() => emit("refresh"));
+        } else {
+          setStatus(0);
+        }
+      }
+    };
+    watch(() => props.modelValue, (value) => {
+      state.duration = +props.animationDuration;
+      if (value) {
+        setStatus(+props.headHeight, true);
+      } else if (slots.success || props.successText) {
+        showSuccessTip();
+      } else {
+        setStatus(0, false);
+      }
+    });
+    return () => {
+      var _a;
+      const trackStyle = {
+        transitionDuration: `${state.duration}ms`,
+        transform: state.distance ? `translate3d(0,${state.distance}px, 0)` : ""
+      };
+      return _createVNode("div", {
+        "ref": root,
+        "class": bem()
+      }, [_createVNode("div", {
+        "class": bem("track"),
+        "style": trackStyle,
+        "onTouchstart": onTouchStart,
+        "onTouchmove": onTouchMove,
+        "onTouchend": onTouchEnd,
+        "onTouchcancel": onTouchEnd
+      }, [_createVNode("div", {
+        "class": bem("head"),
+        "style": getHeadStyle()
+      }, [renderStatus()]), (_a = slots.default) == null ? void 0 : _a.call(slots)])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/pull-refresh/index.d.ts

@@ -18,7 +18,7 @@ export declare const PullRefresh: import("../utils").WithInstall<import("vue").D
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "refresh")[], "update:modelValue" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "refresh")[], "update:modelValue" | "change" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: BooleanConstructor;
     modelValue: BooleanConstructor;
     headHeight: {
@@ -39,6 +39,7 @@ export declare const PullRefresh: import("../utils").WithInstall<import("vue").D
         default: number;
     };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onRefresh?: ((...args: any[]) => any) | undefined;
 }, {

package/es/pull-refresh/index.mjs

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

package/es/radio/Radio.mjs

@@ -0,0 +1,41 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent } from "vue";
+import { pick, createNamespace } from "../utils/index.mjs";
+import { RADIO_KEY } from "../radio-group/RadioGroup.mjs";
+import { useParent } from "@vant/use";
+import Checker, { checkerProps } from "../checkbox/Checker.mjs";
+const [name, bem] = createNamespace("radio");
+var stdin_default = defineComponent({
+  name,
+  props: checkerProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      parent
+    } = useParent(RADIO_KEY);
+    const checked = () => {
+      const value = parent ? parent.props.modelValue : props.modelValue;
+      return value === props.name;
+    };
+    const toggle = () => {
+      if (parent) {
+        parent.updateValue(props.name);
+      } else {
+        emit("update:modelValue", props.name);
+      }
+    };
+    return () => _createVNode(Checker, _mergeProps({
+      "bem": bem,
+      "role": "radio",
+      "parent": parent,
+      "checked": checked(),
+      "onToggle": toggle
+    }, props), pick(slots, ["default", "icon"]));
+  }
+});
+export {
+  stdin_default as default
+};

package/es/radio/index.mjs

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

package/es/radio-group/RadioGroup.mjs

@@ -0,0 +1,44 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, defineComponent } from "vue";
+import { unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { useChildren, useCustomFieldValue } from "@vant/use";
+const [name, bem] = createNamespace("radio-group");
+const radioGroupProps = {
+  disabled: Boolean,
+  iconSize: numericProp,
+  direction: String,
+  modelValue: unknownProp,
+  checkedColor: String
+};
+const RADIO_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: radioGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(RADIO_KEY);
+    const updateValue = (value) => emit("update:modelValue", value);
+    watch(() => props.modelValue, (value) => emit("change", value));
+    linkChildren({
+      props,
+      updateValue
+    });
+    useCustomFieldValue(() => props.modelValue);
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem([props.direction]),
+        "role": "radiogroup"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  RADIO_KEY,
+  stdin_default as default
+};

package/es/radio-group/index.mjs

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