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

package/es/popover/Popover.mjs

@@ -0,0 +1,178 @@
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { ref, watch, nextTick, onMounted, watchEffect, onBeforeUnmount, defineComponent } from "vue";
+import { createPopper, offsetModifier } from "@vant/popperjs";
+import { pick, extend, truthProp, numericProp, unknownProp, BORDER_BOTTOM, makeArrayProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { useClickAway } from "@vant/use";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+const [name, bem] = createNamespace("popover");
+const popupProps = ["show", "overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
+const popoverProps = {
+  show: Boolean,
+  theme: makeStringProp("light"),
+  overlay: Boolean,
+  actions: makeArrayProp(),
+  trigger: makeStringProp("click"),
+  duration: numericProp,
+  showArrow: truthProp,
+  placement: makeStringProp("bottom"),
+  iconPrefix: String,
+  overlayClass: unknownProp,
+  overlayStyle: Object,
+  closeOnClickAction: truthProp,
+  closeOnClickOverlay: truthProp,
+  closeOnClickOutside: truthProp,
+  offset: {
+    type: Array,
+    default: () => [0, 8]
+  },
+  teleport: {
+    type: [String, Object],
+    default: "body"
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: popoverProps,
+  emits: ["select", "touchstart", "update:show"],
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    let popper;
+    const popupRef = ref();
+    const wrapperRef = ref();
+    const popoverRef = ref();
+    const getPopoverOptions = () => ({
+      placement: props.placement,
+      modifiers: [{
+        name: "computeStyles",
+        options: {
+          adaptive: false,
+          gpuAcceleration: false
+        }
+      }, extend({}, offsetModifier, {
+        options: {
+          offset: props.offset
+        }
+      })]
+    });
+    const createPopperInstance = () => {
+      if (wrapperRef.value && popoverRef.value) {
+        return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
+      }
+      return null;
+    };
+    const updateLocation = () => {
+      nextTick(() => {
+        if (!props.show) {
+          return;
+        }
+        if (!popper) {
+          popper = createPopperInstance();
+        } else {
+          popper.setOptions(getPopoverOptions());
+        }
+      });
+    };
+    const updateShow = (value) => emit("update:show", value);
+    const onClickWrapper = () => {
+      if (props.trigger === "click") {
+        updateShow(!props.show);
+      }
+    };
+    const onClickAction = (action, index) => {
+      if (action.disabled) {
+        return;
+      }
+      emit("select", action, index);
+      if (props.closeOnClickAction) {
+        updateShow(false);
+      }
+    };
+    const onClickAway = () => {
+      if (props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+        updateShow(false);
+      }
+    };
+    const renderActionContent = (action, index) => {
+      if (slots.action) {
+        return slots.action({
+          action,
+          index
+        });
+      }
+      return [action.icon && _createVNode(Icon, {
+        "name": action.icon,
+        "classPrefix": props.iconPrefix,
+        "class": bem("action-icon")
+      }, null), _createVNode("div", {
+        "class": [bem("action-text"), BORDER_BOTTOM]
+      }, [action.text])];
+    };
+    const renderAction = (action, index) => {
+      const {
+        icon,
+        color,
+        disabled,
+        className
+      } = action;
+      return _createVNode("div", {
+        "role": "menuitem",
+        "class": [bem("action", {
+          disabled,
+          "with-icon": icon
+        }), className],
+        "style": {
+          color
+        },
+        "tabindex": disabled ? void 0 : 0,
+        "aria-disabled": disabled || void 0,
+        "onClick": () => onClickAction(action, index)
+      }, [renderActionContent(action, index)]);
+    };
+    onMounted(() => {
+      updateLocation();
+      watchEffect(() => {
+        var _a;
+        popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
+      });
+    });
+    onBeforeUnmount(() => {
+      if (popper) {
+        popper.destroy();
+        popper = null;
+      }
+    });
+    watch(() => [props.show, props.offset, props.placement], updateLocation);
+    useClickAway([wrapperRef, popupRef], onClickAway, {
+      eventName: "touchstart"
+    });
+    return () => {
+      var _a;
+      return _createVNode(_Fragment, null, [_createVNode("span", {
+        "ref": wrapperRef,
+        "class": bem("wrapper"),
+        "onClick": onClickWrapper
+      }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), _createVNode(Popup, _mergeProps({
+        "ref": popoverRef,
+        "class": bem([props.theme]),
+        "position": "",
+        "transition": "van-popover-zoom",
+        "lockScroll": false,
+        "onUpdate:show": updateShow
+      }, attrs, pick(props, popupProps)), {
+        default: () => [props.showArrow && _createVNode("div", {
+          "class": bem("arrow")
+        }, null), _createVNode("div", {
+          "role": "menu",
+          "class": bem("content")
+        }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
+      })]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/popover/index.mjs

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

package/es/popup/Popup.mjs

@@ -0,0 +1,206 @@
+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 { useGlobalZIndex } from "../composables/use-global-z-index.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");
+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) {
+        opened = true;
+        zIndex.value = props.zIndex !== void 0 ? +props.zIndex : useGlobalZIndex();
+        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,
+          "role": props.closeOnClickOverlay ? "button" : void 0,
+          "tabindex": props.closeOnClickOverlay ? 0 : void 0,
+          "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,
+        "role": "dialog",
+        "tabindex": 0,
+        "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.css

@@ -1 +1 @@
-body{--van-popup-background: var(--van-background-2);--van-popup-transition: transform var(--van-duration-base);--van-popup-round-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--van-popup-background);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-radius) var(--van-popup-round-radius)}.van-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-radius) 0 0 var(--van-popup-round-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-radius) var(--van-popup-round-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-radius) var(--van-popup-round-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-ease-in)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}
+body{--van-popup-background: var(--van-background-2);--van-popup-transition: transform var(--van-duration-base);--van-popup-round-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background:var(--van-popup-background);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:0;right:0;width:-webkit-fit-content;width:fit-content;max-width:calc(100vw - var(--van-padding-md) * 2);margin:0 auto;transform:translateY(-50%)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-radius) var(--van-popup-round-radius)}.van-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-radius) 0 0 var(--van-popup-round-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-radius) var(--van-popup-round-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-radius) var(--van-popup-round-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-ease-in)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}

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;
 }, {