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

package/es/utils/format.mjs

@@ -0,0 +1,120 @@
+import { inBrowser } from "./basic.mjs";
+import { windowWidth, windowHeight } from "./dom.mjs";
+import { isDef, isNumeric } from "./validate.mjs";
+function addUnit(value) {
+  if (isDef(value)) {
+    return isNumeric(value) ? `${value}px` : String(value);
+  }
+  return void 0;
+}
+function getSizeStyle(originSize) {
+  if (isDef(originSize)) {
+    if (Array.isArray(originSize)) {
+      return {
+        width: addUnit(originSize[0]),
+        height: addUnit(originSize[1])
+      };
+    }
+    const size = addUnit(originSize);
+    return {
+      width: size,
+      height: size
+    };
+  }
+}
+function getZIndexStyle(zIndex) {
+  const style = {};
+  if (zIndex !== void 0) {
+    style.zIndex = +zIndex;
+  }
+  return style;
+}
+let rootFontSize;
+function getRootFontSize() {
+  if (!rootFontSize) {
+    const doc = document.documentElement;
+    const fontSize = doc.style.fontSize || window.getComputedStyle(doc).fontSize;
+    rootFontSize = parseFloat(fontSize);
+  }
+  return rootFontSize;
+}
+function convertRem(value) {
+  value = value.replace(/rem/g, "");
+  return +value * getRootFontSize();
+}
+function convertVw(value) {
+  value = value.replace(/vw/g, "");
+  return +value * windowWidth.value / 100;
+}
+function convertVh(value) {
+  value = value.replace(/vh/g, "");
+  return +value * windowHeight.value / 100;
+}
+function unitToPx(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (inBrowser) {
+    if (value.includes("rem")) {
+      return convertRem(value);
+    }
+    if (value.includes("vw")) {
+      return convertVw(value);
+    }
+    if (value.includes("vh")) {
+      return convertVh(value);
+    }
+  }
+  return parseFloat(value);
+}
+const camelizeRE = /-(\w)/g;
+const camelize = (str) => str.replace(camelizeRE, (_, c) => c.toUpperCase());
+const kebabCase = (str) => str.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+function padZero(num, targetLength = 2) {
+  let str = num + "";
+  while (str.length < targetLength) {
+    str = "0" + str;
+  }
+  return str;
+}
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+function trimExtraChar(value, char, regExp) {
+  const index = value.indexOf(char);
+  if (index === -1) {
+    return value;
+  }
+  if (char === "-" && index !== 0) {
+    return value.slice(0, index);
+  }
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, "");
+}
+function formatNumber(value, allowDot = true, allowMinus = true) {
+  if (allowDot) {
+    value = trimExtraChar(value, ".", /\./g);
+  } else {
+    value = value.split(".")[0];
+  }
+  if (allowMinus) {
+    value = trimExtraChar(value, "-", /-/g);
+  } else {
+    value = value.replace(/-/, "");
+  }
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return value.replace(regExp, "");
+}
+function addNumber(num1, num2) {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+export {
+  addNumber,
+  addUnit,
+  camelize,
+  clamp,
+  formatNumber,
+  getSizeStyle,
+  getZIndexStyle,
+  kebabCase,
+  padZero,
+  unitToPx
+};

package/es/utils/index.mjs

@@ -0,0 +1,9 @@
+export * from "./basic.mjs";
+export * from "./props.mjs";
+export * from "./dom.mjs";
+export * from "./create.mjs";
+export * from "./format.mjs";
+export * from "./constant.mjs";
+export * from "./validate.mjs";
+export * from "./interceptor.mjs";
+export * from "./with-install.mjs";

package/es/utils/interceptor.mjs

@@ -0,0 +1,29 @@
+import { noop } from "./basic.mjs";
+import { isPromise } from "./validate.mjs";
+function callInterceptor(interceptor, {
+  args = [],
+  done,
+  canceled
+}) {
+  if (interceptor) {
+    const returnVal = interceptor.apply(null, args);
+    if (isPromise(returnVal)) {
+      returnVal.then((value) => {
+        if (value) {
+          done();
+        } else if (canceled) {
+          canceled();
+        }
+      }).catch(noop);
+    } else if (returnVal) {
+      done();
+    } else if (canceled) {
+      canceled();
+    }
+  } else {
+    done();
+  }
+}
+export {
+  callInterceptor
+};

package/es/utils/mount-component.mjs

@@ -0,0 +1,39 @@
+import { createApp, reactive } from "vue";
+import { extend } from "../utils/index.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+function usePopupState() {
+  const state = reactive({
+    show: false
+  });
+  const toggle = (show) => {
+    state.show = show;
+  };
+  const open = (props) => {
+    extend(state, props, { transitionAppear: true });
+    toggle(true);
+  };
+  const close = () => toggle(false);
+  useExpose({ open, close, toggle });
+  return {
+    open,
+    close,
+    state,
+    toggle
+  };
+}
+function mountComponent(RootComponent) {
+  const app = createApp(RootComponent);
+  const root = document.createElement("div");
+  document.body.appendChild(root);
+  return {
+    instance: app.mount(root),
+    unmount() {
+      app.unmount();
+      document.body.removeChild(root);
+    }
+  };
+}
+export {
+  mountComponent,
+  usePopupState
+};

package/es/utils/validate.mjs

@@ -0,0 +1,22 @@
+import { inBrowser } from "./basic.mjs";
+const isDef = (val) => val !== void 0 && val !== null;
+const isFunction = (val) => typeof val === "function";
+const isObject = (val) => val !== null && typeof val === "object";
+const isPromise = (val) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
+const isDate = (val) => Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+function isMobile(value) {
+  value = value.replace(/[^-|\d]/g, "");
+  return /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value);
+}
+const isNumeric = (val) => typeof val === "number" || /^\d+(\.\d+)?$/.test(val);
+const isIOS = () => inBrowser ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) : false;
+export {
+  isDate,
+  isDef,
+  isFunction,
+  isIOS,
+  isMobile,
+  isNumeric,
+  isObject,
+  isPromise
+};

package/es/utils/with-install.mjs

@@ -0,0 +1,12 @@
+import { camelize } from "./format.mjs";
+function withInstall(options) {
+  options.install = (app) => {
+    const { name } = options;
+    app.component(name, options);
+    app.component(camelize(`-${name}`), options);
+  };
+  return options;
+}
+export {
+  withInstall
+};

package/es/vue-tsx-shim.d.ts

@@ -12,5 +12,12 @@ declare module 'vue' {
     onTouchmove?: EventHandler;
     onTouchstart?: EventHandler;
     onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
   }
 }

package/lib/action-bar/ActionBar.d.ts

@@ -1,6 +1,7 @@
 import { type ExtractPropTypes } from 'vue';
 export declare const ACTION_BAR_KEY: unique symbol;
 declare const actionBarProps: {
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -8,16 +9,19 @@ declare const actionBarProps: {
 };
 export declare type ActionBarProps = ExtractPropTypes<typeof actionBarProps>;
 declare const _default: import("vue").DefineComponent<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }>>, {
+    placeholder: boolean;
     safeAreaInsetBottom: boolean;
 }>;
 export default _default;

package/lib/action-bar/ActionBar.js

@@ -25,9 +25,11 @@ var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_use = require("@vant/use");
+var import_use_placeholder = require("../composables/use-placeholder");
 const [name, bem] = (0, import_utils.createNamespace)("action-bar");
 const ACTION_BAR_KEY = Symbol(name);
 const actionBarProps = {
+  placeholder: Boolean,
   safeAreaInsetBottom: import_utils.truthProp
 };
 var stdin_default = (0, import_vue2.defineComponent)({
@@ -36,17 +38,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
   setup(props, {
     slots
   }) {
+    const root = (0, import_vue2.ref)();
+    const renderPlaceholder = (0, import_use_placeholder.usePlaceholder)(root, bem);
     const {
       linkChildren
     } = (0, import_use.useChildren)(ACTION_BAR_KEY);
     linkChildren();
-    return () => {
+    const renderActionBar = () => {
       var _a;
       return (0, import_vue.createVNode)("div", {
+        "ref": root,
         "class": [bem(), {
           "van-safe-area-bottom": props.safeAreaInsetBottom
         }]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderActionBar);
+      }
+      return renderActionBar();
+    };
   }
 });

package/lib/action-bar/index.d.ts

@@ -1,14 +1,17 @@
 export declare const ActionBar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }, () => 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<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }>>, {
+    placeholder: boolean;
     safeAreaInsetBottom: boolean;
 }>>;
 export default ActionBar;

package/lib/address-edit/AddressEdit.js

@@ -158,7 +158,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       selectedOptions
     }) => {
       if (selectedValues.some((value) => value === import_utils2.AREA_EMPTY_CODE)) {
-        (0, import_toast.Toast)(t("areaEmpty"));
+        (0, import_toast.showToast)(t("areaEmpty"));
       } else {
         showAreaPopup.value = false;
         assignAreaText(selectedOptions);

package/lib/badge/Badge.js

@@ -48,7 +48,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         content,
         showZero
       } = props;
-      return (0, import_utils.isDef)(content) && content !== "" && (showZero || content !== 0);
+      return (0, import_utils.isDef)(content) && content !== "" && (showZero || content !== 0 && content !== "0");
     };
     const renderContent = () => {
       const {

package/lib/calendar/Calendar.js

@@ -155,6 +155,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return !currentDate.value;
     });
+    const getSelectedDate = () => currentDate.value;
     const onScroll = () => {
       const top = (0, import_utils.getScrollTop)(bodyRef.value);
       const bottom = top + bodyHeight;
@@ -213,7 +214,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       if (currentDate.value) {
         const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
-        scrollToDate(targetDate);
+        if ((0, import_utils.isDate)(targetDate)) {
+          scrollToDate(targetDate);
+        }
       } else {
         (0, import_use.raf)(onScroll);
       }
@@ -239,7 +242,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       } = props;
       if (maxRange && (0, import_utils2.calcDateNum)(date) > maxRange) {
         if (showRangePrompt) {
-          (0, import_toast.Toast)(rangePrompt || (0, import_utils2.t)("rangePrompt", maxRange));
+          (0, import_toast.showToast)(rangePrompt || (0, import_utils2.t)("rangePrompt", maxRange));
         }
         emit("overRange");
         return false;
@@ -325,7 +328,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           const [unselectedDate] = dates.splice(selectedIndex, 1);
           emit("unselect", (0, import_utils2.cloneDate)(unselectedDate));
         } else if (props.maxRange && dates.length >= props.maxRange) {
-          (0, import_toast.Toast)(props.rangePrompt || (0, import_utils2.t)("rangePrompt", props.maxRange));
+          (0, import_toast.showToast)(props.rangePrompt || (0, import_utils2.t)("rangePrompt", props.maxRange));
         } else {
           select([...dates, date]);
         }
@@ -397,7 +400,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     });
     (0, import_use_expose.useExpose)({
       reset,
-      scrollToDate
+      scrollToDate,
+      getSelectedDate
     });
     (0, import_use.onMountedOrActivated)(init);
     return () => {

package/lib/calendar/types.d.ts

@@ -15,6 +15,7 @@ export declare type CalendarDayItem = {
 export declare type CalendarExpose = {
     reset: (date?: Date | Date[]) => void;
     scrollToDate: (targetDate: Date) => void;
+    getSelectedDate: () => Date | Date[] | null;
 };
 export declare type CalendarInstance = ComponentPublicInstance<CalendarProps, CalendarExpose>;
 export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMonthProps, {

package/lib/cell/Cell.d.ts

@@ -110,10 +110,10 @@ declare const _default: import("vue").DefineComponent<{
     replace: BooleanConstructor;
 }>>, {
     replace: boolean;
+    required: boolean;
     center: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
 }>;
 export default _default;

package/lib/cell/index.d.ts

@@ -54,10 +54,10 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     replace: BooleanConstructor;
 }>>, {
     replace: boolean;
+    required: boolean;
     center: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
 }>>;
 export default Cell;

package/lib/collapse/Collapse.d.ts

@@ -1,9 +1,13 @@
-import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
+import { type PropType, type InjectionKey, type ExtractPropTypes, type ComponentPublicInstance } from 'vue';
 import { type Numeric } from '../utils';
 export declare type CollapseProvide = {
     toggle: (name: Numeric, expanded: boolean) => void;
     isExpanded: (name: Numeric) => boolean;
 };
+export declare type CollapseToggleAllOptions = boolean | {
+    expanded?: boolean;
+    skipDisabled?: boolean;
+};
 export declare const COLLAPSE_KEY: InjectionKey<CollapseProvide>;
 declare const collapseProps: {
     border: {
@@ -17,6 +21,9 @@ declare const collapseProps: {
     };
 };
 export declare type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+export declare type CollapseInstance = ComponentPublicInstance<{
+    toggleAll: (options?: boolean | CollapseToggleAllOptions) => void;
+}>;
 declare const _default: import("vue").DefineComponent<{
     border: {
         type: BooleanConstructor;

package/lib/collapse/Collapse.js

@@ -25,6 +25,7 @@ var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_use = require("@vant/use");
+var import_use_expose = require("../composables/use-expose");
 const [name, bem] = (0, import_utils.createNamespace)("collapse");
 const COLLAPSE_KEY = Symbol(name);
 const collapseProps = {
@@ -55,7 +56,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     slots
   }) {
     const {
-      linkChildren
+      linkChildren,
+      children
     } = (0, import_use.useChildren)(COLLAPSE_KEY);
     const updateName = (name2) => {
       emit("change", name2);
@@ -74,6 +76,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
         updateName(modelValue.filter((activeName) => activeName !== name2));
       }
     };
+    const toggleAll = (options = {}) => {
+      if (props.accordion) {
+        return;
+      }
+      if (typeof options === "boolean") {
+        options = {
+          expanded: options
+        };
+      }
+      const {
+        expanded,
+        skipDisabled
+      } = options;
+      const expandedChildren = children.filter((item) => {
+        if (item.disabled && skipDisabled) {
+          return item.expanded.value;
+        }
+        return expanded != null ? expanded : !item.expanded.value;
+      });
+      const names = expandedChildren.map((item) => item.itemName.value);
+      updateName(names);
+    };
     const isExpanded = (name2) => {
       const {
         accordion,
@@ -84,6 +108,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return accordion ? modelValue === name2 : modelValue.includes(name2);
     };
+    (0, import_use_expose.useExpose)({
+      toggleAll
+    });
     linkChildren({
       toggle,
       isExpanded

package/lib/collapse/index.d.ts

@@ -27,7 +27,7 @@ export declare const Collapse: import("../utils").WithInstall<import("vue").Defi
     accordion: boolean;
 }>>;
 export default Collapse;
-export type { CollapseProps } from './Collapse';
+export type { CollapseProps, CollapseInstance, CollapseToggleAllOptions, } from './Collapse';
 declare module 'vue' {
     interface GlobalComponents {
         VanCollapse: typeof Collapse;

package/lib/collapse-item/CollapseItem.d.ts

@@ -107,11 +107,11 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
 }>>, {
+    required: boolean;
     center: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     readonly: boolean;
     lazyRender: boolean;

package/lib/collapse-item/CollapseItem.js

@@ -142,7 +142,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[import_vue.vShow, show.value]]);
     });
     (0, import_use_expose.useExpose)({
-      toggle
+      toggle,
+      expanded,
+      itemName: name2
     });
     return () => (0, import_vue.createVNode)("div", {
       "class": [bem({

package/lib/collapse-item/index.d.ts

@@ -69,11 +69,11 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
         default: true;
     };
 }>>, {
+    required: boolean;
     center: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     readonly: boolean;
     lazyRender: boolean;

package/lib/composables/use-global-z-index.d.ts

@@ -0,0 +1,4 @@
+/** the global z-index is automatically incremented after reading */
+export declare const useGlobalZIndex: () => number;
+/** reset the global z-index */
+export declare const setGlobalZIndex: (val: number) => void;

package/lib/composables/use-global-z-index.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  setGlobalZIndex: () => setGlobalZIndex,
+  useGlobalZIndex: () => useGlobalZIndex
+});
+module.exports = __toCommonJS(stdin_exports);
+let globalZIndex = 2e3;
+const useGlobalZIndex = () => ++globalZIndex;
+const setGlobalZIndex = (val) => {
+  globalZIndex = val;
+};

package/lib/composables/use-height.d.ts

@@ -1,2 +1,2 @@
 import { Ref } from 'vue';
-export declare const useHeight: (element: Element | Ref<Element | undefined>) => Ref<number | undefined>;
+export declare const useHeight: (element: Element | Ref<Element | undefined>, withSafeArea?: boolean) => Ref<number | undefined>;

package/lib/composables/use-height.js

@@ -22,14 +22,20 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_use = require("@vant/use");
 var import_vue = require("vue");
-const useHeight = (element) => {
+var import_on_popup_reopen = require("./on-popup-reopen");
+const useHeight = (element, withSafeArea) => {
   const height = (0, import_vue.ref)();
   const setHeight = () => {
     height.value = (0, import_use.useRect)(element).height;
   };
   (0, import_vue.onMounted)(() => {
     (0, import_vue.nextTick)(setHeight);
-    setTimeout(setHeight, 100);
+    if (withSafeArea) {
+      for (let i = 1; i <= 3; i++) {
+        setTimeout(setHeight, 100 * i);
+      }
+    }
   });
+  (0, import_on_popup_reopen.onPopupReopen)(() => (0, import_vue.nextTick)(setHeight));
   return height;
 };

package/lib/composables/use-lock-scroll.js

@@ -28,9 +28,11 @@ let totalLockCount = 0;
 const BODY_LOCK_CLASS = "van-overflow-hidden";
 function useLockScroll(rootRef, shouldLock) {
   const touch = (0, import_use_touch.useTouch)();
+  const DIRECTION_UP = "01";
+  const DIRECTION_DOWN = "10";
   const onTouchMove = (event) => {
     touch.move(event);
-    const direction = touch.deltaY.value > 0 ? "10" : "01";
+    const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP;
     const el = (0, import_use.getScrollParent)(event.target, rootRef.value);
     const { scrollHeight, offsetHeight, scrollTop } = el;
     let status = "11";

package/lib/composables/use-placeholder.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_use_height = require("./use-height");
 function usePlaceholder(contentRef, bem) {
-  const height = (0, import_use_height.useHeight)(contentRef);
+  const height = (0, import_use_height.useHeight)(contentRef, true);
   return (renderContent) => (0, import_vue.createVNode)("div", {
     "class": bem("placeholder"),
     "style": {