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

package/es/utils/dom.mjs

@@ -0,0 +1,67 @@
+import { useRect, useWindowSize } from "@vant/use";
+import { unref } from "vue";
+import { isIOS as checkIsIOS } from "./validate.mjs";
+function getScrollTop(el) {
+  const top = "scrollTop" in el ? el.scrollTop : el.pageYOffset;
+  return Math.max(top, 0);
+}
+function setScrollTop(el, value) {
+  if ("scrollTop" in el) {
+    el.scrollTop = value;
+  } else {
+    el.scrollTo(el.scrollX, value);
+  }
+}
+function getRootScrollTop() {
+  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+}
+function setRootScrollTop(value) {
+  setScrollTop(window, value);
+  setScrollTop(document.body, value);
+}
+function getElementTop(el, scroller) {
+  if (el === window) {
+    return 0;
+  }
+  const scrollTop = scroller ? getScrollTop(scroller) : getRootScrollTop();
+  return useRect(el).top + scrollTop;
+}
+const isIOS = checkIsIOS();
+function resetScroll() {
+  if (isIOS) {
+    setRootScrollTop(getRootScrollTop());
+  }
+}
+const stopPropagation = (event) => event.stopPropagation();
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    stopPropagation(event);
+  }
+}
+function isHidden(elementRef) {
+  const el = unref(elementRef);
+  if (!el) {
+    return false;
+  }
+  const style = window.getComputedStyle(el);
+  const hidden = style.display === "none";
+  const parentHidden = el.offsetParent === null && style.position !== "fixed";
+  return hidden || parentHidden;
+}
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+export {
+  getElementTop,
+  getRootScrollTop,
+  getScrollTop,
+  isHidden,
+  preventDefault,
+  resetScroll,
+  setRootScrollTop,
+  setScrollTop,
+  stopPropagation,
+  windowHeight,
+  windowWidth
+};

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/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/calendar/Calendar.js

@@ -137,6 +137,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const months = (0, import_vue2.computed)(() => {
       const months2 = [];
       const cursor = new Date(props.minDate);
+      if (props.lazyRender && !props.show && props.poppable) {
+        return months2;
+      }
       cursor.setDate(1);
       do {
         months2.push(new Date(cursor));
@@ -155,6 +158,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;
@@ -239,7 +243,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 +329,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 +401,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-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/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/date-picker/utils.d.ts

@@ -39,5 +39,5 @@ export declare const sharedProps: {
 export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "allowHtml" | "optionHeight" | "showToolbar" | "swipeDuration" | "visibleOptionNum" | "cancelButtonText" | "confirmButtonText")[];
 export declare function times<T>(n: number, iteratee: (index: number) => T): T[];
 export declare const getMonthEndDay: (year: number, month: number) => number;
-export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter | undefined) => PickerOption[];
+export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter) => PickerOption[];
 export {};

package/lib/dialog/Dialog.d.ts

@@ -30,7 +30,7 @@ declare const dialogProps: {
     theme: PropType<DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: PropType<DialogMessage>;
-    callback: PropType<(action?: DialogAction | undefined) => void>;
+    callback: PropType<(action?: DialogAction) => void>;
     allowHtml: BooleanConstructor;
     className: PropType<unknown>;
     transition: {
@@ -45,8 +45,10 @@ declare const dialogProps: {
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -99,8 +101,10 @@ declare const _default: import("vue").DefineComponent<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -151,8 +155,10 @@ declare const _default: import("vue").DefineComponent<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -174,6 +180,8 @@ declare const _default: import("vue").DefineComponent<{
     closeOnPopstate: boolean;
     allowHtml: boolean;
     showCancelButton: boolean;
+    cancelButtonDisabled: boolean;
+    confirmButtonDisabled: boolean;
     showConfirmButton: boolean;
 }>;
 export default _default;

package/lib/dialog/Dialog.js

@@ -43,8 +43,10 @@ const dialogProps = (0, import_utils.extend)({}, import_shared.popupSharedProps,
   showCancelButton: Boolean,
   cancelButtonText: String,
   cancelButtonColor: String,
+  cancelButtonDisabled: Boolean,
   confirmButtonText: String,
   confirmButtonColor: String,
+  confirmButtonDisabled: Boolean,
   showConfirmButton: import_utils.truthProp,
   closeOnClickOverlay: Boolean
 });
@@ -165,6 +167,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         color: props.cancelButtonColor
       },
       "loading": loading.cancel,
+      "disabled": props.cancelButtonDisabled,
       "onClick": onCancel
     }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_button.Button, {
       "size": "large",
@@ -176,6 +179,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         color: props.confirmButtonColor
       },
       "loading": loading.confirm,
+      "disabled": props.confirmButtonDisabled,
       "onClick": onConfirm
     }, null)]);
     const renderRoundButtons = () => (0, import_vue.createVNode)(import_action_bar.ActionBar, {
@@ -187,6 +191,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": bem("cancel"),
         "color": props.cancelButtonColor,
         "loading": loading.cancel,
+        "disabled": props.cancelButtonDisabled,
         "onClick": onCancel
       }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
         "type": "danger",
@@ -194,6 +199,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": bem("confirm"),
         "color": props.confirmButtonColor,
         "loading": loading.confirm,
+        "disabled": props.confirmButtonDisabled,
         "onClick": onConfirm
       }, null)]
     });