vant 3.5.0 → 3.5.3

package/lib/vant.es.js

@@ -1,6 +1,6 @@
 import { useWindowSize, useRect, useChildren, useParent, onMountedOrActivated, getScrollParent, useEventListener, CUSTOM_FIELD_INJECTION_KEY, useCustomFieldValue, useToggle, raf, useScrollParent, usePageVisibility, doubleRaf, cancelRaf, useCountDown, useClickAway, inBrowser as inBrowser$1 } from "@vant/use";
-import { unref, ref, reactive, defineComponent, createVNode, getCurrentInstance, computed, provide, inject, mergeProps, onDeactivated, onBeforeUnmount, watch, Transition, withDirectives, vShow, nextTick, onMounted, onActivated, Teleport, Fragment, createTextVNode, createApp, onUnmounted, onBeforeUpdate, resolveDirective, withKeys, onUpdated, watchEffect, h } from "vue";
-import { createPopper, offsetModifier } from "@vant/popperjs";
+import { unref, ref, reactive, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, provide, inject, mergeProps, onDeactivated, onBeforeUnmount, watch, Transition, withDirectives, vShow, onActivated, Teleport, Fragment, createTextVNode, createApp, onUnmounted, onBeforeUpdate, resolveDirective, withKeys, onUpdated, watchEffect, h } from "vue";
+import { offsetModifier, createPopper } from "@vant/popperjs";
 function noop() {
 }
 const extend = Object.assign;
@@ -393,9 +393,34 @@ function withInstall(options) {
   };
   return options;
 }
+const useHeight = (element, withSafeArea) => {
+  const height = ref();
+  const setHeight = () => {
+    height.value = useRect(element).height;
+  };
+  onMounted(() => {
+    nextTick(setHeight);
+    if (withSafeArea) {
+      for (let i = 1; i <= 3; i++) {
+        setTimeout(setHeight, 100 * i);
+      }
+    }
+  });
+  return height;
+};
+function usePlaceholder(contentRef, bem2) {
+  const height = useHeight(contentRef, true);
+  return (renderContent) => createVNode("div", {
+    "class": bem2("placeholder"),
+    "style": {
+      height: height.value ? `${height.value}px` : void 0
+    }
+  }, [renderContent()]);
+}
 const [name$1u, bem$1q] = createNamespace("action-bar");
 const ACTION_BAR_KEY = Symbol(name$1u);
 const actionBarProps = {
+  placeholder: Boolean,
   safeAreaInsetBottom: truthProp
 };
 var stdin_default$1B = defineComponent({
@@ -404,18 +429,27 @@ var stdin_default$1B = defineComponent({
   setup(props, {
     slots
   }) {
+    const root = ref();
+    const renderPlaceholder = usePlaceholder(root, bem$1q);
     const {
       linkChildren
     } = useChildren(ACTION_BAR_KEY);
     linkChildren();
-    return () => {
+    const renderActionBar = () => {
       var _a;
       return createVNode("div", {
+        "ref": root,
         "class": [bem$1q(), {
           "van-safe-area-bottom": props.safeAreaInsetBottom
         }]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderActionBar);
+      }
+      return renderActionBar();
+    };
   }
 });
 const ActionBar = withInstall(stdin_default$1B);
@@ -1299,7 +1333,7 @@ var stdin_default$1s = defineComponent({
       }
     });
     onDeactivated(() => {
-      if (props.show) {
+      if (props.show && props.teleport) {
         close();
         shouldReopen = true;
       }
@@ -1713,6 +1747,14 @@ var stdin_default$1p = defineComponent({
     emit,
     slots
   }) {
+    if (process.env.NODE_ENV !== "production") {
+      if (slots.default) {
+        console.warn('[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.');
+      }
+      if (props.valueKey) {
+        console.warn('[Vant] Picker: "valueKey" prop is deprecated, please use "columnsFieldNames" prop instead.');
+      }
+    }
     const hasOptions = ref(false);
     const formattedColumns = ref([]);
     const columnsFieldNames = computed(() => {
@@ -2563,6 +2605,9 @@ let current = 0;
 function useId$1() {
   const vm = getCurrentInstance();
   const { name: name2 = "unknown" } = (vm == null ? void 0 : vm.type) || {};
+  if (process.env.NODE_ENV === "test") {
+    return name2;
+  }
   return `${name2}-${++current}`;
 }
 const [name$1e, bem$1a] = createNamespace("field");
@@ -2615,7 +2660,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
 var stdin_default$1l = defineComponent({
   name: name$1e,
   props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "click-input", "click-left-icon", "click-right-icon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "keypress", "click-input", "end-validate", "start-validate", "click-left-icon", "click-right-icon", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -2689,18 +2734,24 @@ var stdin_default$1l = defineComponent({
       state.status = "unvalidated";
       state.validateMessage = "";
     };
+    const endValidate = () => emit("end-validate", {
+      status: state.status
+    });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
       if (rules) {
+        emit("start-validate");
         runRules(rules).then(() => {
           if (state.status === "failed") {
             resolve({
               name: props.name,
               message: state.validateMessage
             });
+            endValidate();
           } else {
             state.status = "passed";
             resolve();
+            endValidate();
           }
         });
       } else {
@@ -4245,17 +4296,6 @@ const proxyPickerMethods = (picker, callback) => {
     }
   });
 };
-const useHeight = (element) => {
-  const height = ref();
-  const setHeight = () => {
-    height.value = useRect(element).height;
-  };
-  onMounted(() => {
-    nextTick(setHeight);
-    setTimeout(setHeight, 100);
-  });
-  return height;
-};
 const [name$13] = createNamespace("calendar-day");
 var stdin_default$1a = defineComponent({
   name: name$13,
@@ -4727,6 +4767,9 @@ var stdin_default$17 = defineComponent({
     const months = 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));
@@ -4745,6 +4788,7 @@ var stdin_default$17 = defineComponent({
       }
       return !currentDate.value;
     });
+    const getSelectedDate = () => currentDate.value;
     const onScroll = () => {
       const top = getScrollTop(bodyRef.value);
       const bottom = top + bodyHeight;
@@ -4987,7 +5031,8 @@ var stdin_default$17 = defineComponent({
     });
     useExpose({
       reset,
-      scrollToDate
+      scrollToDate,
+      getSelectedDate
     });
     onMountedOrActivated(init);
     return () => {
@@ -5953,6 +5998,16 @@ var stdin_default$10 = defineComponent({
     emit,
     slots
   }) {
+    var _a, _b;
+    if (process.env.NODE_ENV !== "production") {
+      const props2 = (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props;
+      if (props2 && "onClick" in props2) {
+        console.warn('[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.');
+      }
+      if (props2 && "onDisabled" in props2) {
+        console.warn('[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.');
+      }
+    }
     let tabHeight;
     let lockScroll;
     let stickyFixed;
@@ -6278,6 +6333,9 @@ var stdin_default$$ = defineComponent({
       index
     } = useParent(SWIPE_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <SwipeItem> must be a child component of <Swipe>.");
+      }
       return;
     }
     const style = computed(() => {
@@ -6356,6 +6414,9 @@ var stdin_default$_ = defineComponent({
       index
     } = useParent(TABS_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <Tab> must be a child component of <Tabs>.");
+      }
       return;
     }
     const getName = () => {
@@ -7118,6 +7179,17 @@ const collapseProps = {
     default: ""
   }
 };
+function validateModelValue(modelValue, accordion) {
+  if (accordion && Array.isArray(modelValue)) {
+    console.error('[Vant] Collapse: "v-model" should not be Array in accordion mode');
+    return false;
+  }
+  if (!accordion && !Array.isArray(modelValue)) {
+    console.error('[Vant] Collapse: "v-model" should be Array in non-accordion mode');
+    return false;
+  }
+  return true;
+}
 var stdin_default$S = defineComponent({
   name: name$M,
   props: collapseProps,
@@ -7127,7 +7199,8 @@ var stdin_default$S = defineComponent({
     slots
   }) {
     const {
-      linkChildren
+      linkChildren,
+      children
     } = useChildren(COLLAPSE_KEY);
     const updateName = (name2) => {
       emit("change", name2);
@@ -7146,13 +7219,41 @@ var stdin_default$S = 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,
         modelValue
       } = props;
+      if (process.env.NODE_ENV !== "production" && !validateModelValue(modelValue, accordion)) {
+        return false;
+      }
       return accordion ? modelValue === name2 : modelValue.includes(name2);
     };
+    useExpose({
+      toggleAll
+    });
     linkChildren({
       toggle,
       isExpanded
@@ -7190,6 +7291,9 @@ var stdin_default$R = defineComponent({
       index
     } = useParent(COLLAPSE_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <CollapseItem> must be a child component of <Collapse>.");
+      }
       return;
     }
     const name2 = computed(() => {
@@ -7278,7 +7382,9 @@ var stdin_default$R = defineComponent({
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[vShow, show.value]]);
     });
     useExpose({
-      toggle
+      toggle,
+      expanded,
+      itemName: name2
     });
     return () => createVNode("div", {
       "class": [bem$K({
@@ -9055,6 +9161,9 @@ var stdin_default$C = defineComponent({
       index
     } = useParent(DROPDOWN_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <DropdownItem> must be a child component of <DropdownMenu>.");
+      }
       return;
     }
     const getEmitter = (name2) => () => emit(name2);
@@ -9255,6 +9364,9 @@ var stdin_default$A = defineComponent({
     } = useParent(GRID_KEY);
     const route2 = useRoute();
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <GridItem> must be a child component of <Grid>.");
+      }
       return;
     }
     const rootStyle = computed(() => {
@@ -10049,6 +10161,9 @@ var stdin_default$w = defineComponent({
       parent
     } = useParent(INDEX_BAR_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <IndexAnchor> must be a child component of <IndexBar>.");
+      }
       return;
     }
     const isSticky = () => state.active && parent.props.sticky;
@@ -10229,15 +10344,6 @@ var stdin_default$v = defineComponent({
   }
 });
 const List = withInstall(stdin_default$v);
-function usePlaceholder(contentRef, bem2) {
-  const height = useHeight(contentRef);
-  return (renderContent) => createVNode("div", {
-    "class": bem2("placeholder"),
-    "style": {
-      height: height.value ? `${height.value}px` : void 0
-    }
-  }, [renderContent()]);
-}
 const [name$p, bem$p] = createNamespace("nav-bar");
 const navBarProps = {
   title: String,
@@ -11136,22 +11242,23 @@ var stdin_default$n = defineComponent({
     let popper;
     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, {
-          placement: props.placement,
-          modifiers: [{
-            name: "computeStyles",
-            options: {
-              adaptive: false,
-              gpuAcceleration: false
-            }
-          }, extend({}, offsetModifier, {
-            options: {
-              offset: props.offset
-            }
-          })]
-        });
+        return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
       }
       return null;
     };
@@ -11163,9 +11270,7 @@ var stdin_default$n = defineComponent({
         if (!popper) {
           popper = createPopperInstance();
         } else {
-          popper.setOptions({
-            placement: props.placement
-          });
+          popper.setOptions(getPopoverOptions());
         }
       });
     };
@@ -11236,7 +11341,7 @@ var stdin_default$n = defineComponent({
         popper = null;
       }
     });
-    watch(() => [props.show, props.placement], updateLocation);
+    watch(() => [props.show, props.offset, props.placement], updateLocation);
     useClickAway(wrapperRef, onClickAway, {
       eventName: "touchstart"
     });
@@ -11355,7 +11460,7 @@ const pullRefreshProps = {
 var stdin_default$l = defineComponent({
   name: name$g,
   props: pullRefreshProps,
-  emits: ["refresh", "update:modelValue"],
+  emits: ["change", "refresh", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -11400,6 +11505,10 @@ var stdin_default$l = defineComponent({
       } else {
         state.status = "loosing";
       }
+      emit("change", {
+        status: state.status,
+        distance
+      });
     };
     const getStatusText = () => {
       const {
@@ -12005,6 +12114,9 @@ var stdin_default$g = defineComponent({
       index
     } = useParent(SIDEBAR_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <SidebarItem> must be a child component of <Sidebar>.");
+      }
       return;
     }
     const onClick = () => {
@@ -12432,6 +12544,9 @@ var stdin_default$c = defineComponent({
       index
     } = useParent(STEPS_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <Step> must be a child component of <Steps>.");
+      }
       return;
     }
     const parentProps = parent.props;
@@ -12784,6 +12899,7 @@ const submitBarProps = {
   buttonType: makeStringProp("danger"),
   buttonColor: String,
   suffixLabel: String,
+  placeholder: Boolean,
   decimalLength: makeNumericProp(2),
   safeAreaInsetBottom: truthProp
 };
@@ -12795,6 +12911,8 @@ var stdin_default$a = defineComponent({
     emit,
     slots
   }) {
+    const root = ref();
+    const renderPlaceholder = usePlaceholder(root, bem$5);
     const renderText = () => {
       const {
         price,
@@ -12854,9 +12972,10 @@ var stdin_default$a = defineComponent({
         "onClick": onClickButton
       }, null);
     };
-    return () => {
+    const renderSubmitBar = () => {
       var _a, _b;
       return createVNode("div", {
+        "ref": root,
         "class": [bem$5(), {
           "van-safe-area-bottom": props.safeAreaInsetBottom
         }]
@@ -12864,6 +12983,12 @@ var stdin_default$a = defineComponent({
         "class": bem$5("bar")
       }, [(_b = slots.default) == null ? void 0 : _b.call(slots), renderText(), renderButton()])]);
     };
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderSubmitBar);
+      }
+      return renderSubmitBar();
+    };
   }
 });
 const SubmitBar = withInstall(stdin_default$a);
@@ -13119,6 +13244,9 @@ var stdin_default$7 = defineComponent({
       index
     } = useParent(TABBAR_KEY);
     if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <TabbarItem> must be a child component of <Tabbar>.");
+      }
       return;
     }
     const active = computed(() => {
@@ -13612,7 +13740,7 @@ var stdin_default$4 = defineComponent({
       if (props.previewFullImage) {
         const imageFiles = props.modelValue.filter(isImageFile);
         const images = imageFiles.map((item2) => {
-          if (item2.file && !item2.url) {
+          if (item2.file && !item2.url && item2.status !== "failed") {
             item2.url = URL.createObjectURL(item2.file);
             urls.push(item2.url);
           }
@@ -13940,10 +14068,15 @@ class ReactiveListener {
     }, () => {
       cb();
       this.state.loading = false;
+      if (process.env.NODE_ENV !== "production" && !this.options.silent)
+        console.warn(`[@vant/lazyload] load failed with loading image(${this.loading})`);
     });
   }
   load(onFinish = noop) {
     if (this.attempt > this.options.attempt - 1 && this.state.error) {
+      if (process.env.NODE_ENV !== "production" && !this.options.silent) {
+        console.log(`[@vant/lazyload] ${this.src} tried too more than ${this.options.attempt} times`);
+      }
       onFinish();
       return;
     }
@@ -14330,6 +14463,9 @@ function stdin_default$3() {
       let src = value;
       let { loading, error } = this.options;
       if (isObject(value)) {
+        if (process.env.NODE_ENV !== "production" && !value.src && !this.options.silent) {
+          console.error("[@vant/lazyload] miss src with " + value);
+        }
         ({ src } = value);
         loading = value.loading || this.options.loading;
         error = value.error || this.options.error;
@@ -14517,6 +14653,9 @@ var stdin_default$1 = (lazyManager) => ({
     },
     load(onFinish = noop) {
       if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
+        if (process.env.NODE_ENV !== "production" && !lazyManager.options.silent) {
+          console.log(`[@vant/lazyload] ${this.options.src} tried too more than ${this.options.attempt} times`);
+        }
         onFinish();
         return;
       }
@@ -14556,7 +14695,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.5.0";
+const version = "3.5.3";
 function install(app) {
   const components = [
     ActionBar,
@@ -14657,4 +14796,94 @@ var stdin_default = {
   install,
   version
 };
-export { ActionBar, ActionBarButton, ActionBarIcon, ActionSheet, AddressEdit, AddressList, Area, Badge, Button, Calendar, Card, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, ConfigProvider, ContactCard, ContactEdit, ContactList, CountDown, Coupon, CouponCell, CouponList, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, Grid, GridItem, Icon, Image$1 as Image, ImagePreview, IndexAnchor, IndexBar, Lazyload, List, Loading, Locale, NavBar, NoticeBar, Notify, NumberKeyboard, Overlay, Pagination, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, Search, ShareSheet, Sidebar, SidebarItem, Skeleton, Slider, Step, Stepper, Steps, Sticky, SubmitBar, Swipe, SwipeCell, SwipeItem, Switch, Tab, Tabbar, TabbarItem, Tabs, Tag, Toast, TreeSelect, Uploader, stdin_default as default, install, version };
+export {
+  ActionBar,
+  ActionBarButton,
+  ActionBarIcon,
+  ActionSheet,
+  AddressEdit,
+  AddressList,
+  Area,
+  Badge,
+  Button,
+  Calendar,
+  Card,
+  Cascader,
+  Cell,
+  CellGroup,
+  Checkbox,
+  CheckboxGroup,
+  Circle,
+  Col,
+  Collapse,
+  CollapseItem,
+  ConfigProvider,
+  ContactCard,
+  ContactEdit,
+  ContactList,
+  CountDown,
+  Coupon,
+  CouponCell,
+  CouponList,
+  DatetimePicker,
+  Dialog,
+  Divider,
+  DropdownItem,
+  DropdownMenu,
+  Empty,
+  Field,
+  Form,
+  Grid,
+  GridItem,
+  Icon,
+  Image$1 as Image,
+  ImagePreview,
+  IndexAnchor,
+  IndexBar,
+  Lazyload,
+  List,
+  Loading,
+  Locale,
+  NavBar,
+  NoticeBar,
+  Notify,
+  NumberKeyboard,
+  Overlay,
+  Pagination,
+  PasswordInput,
+  Picker,
+  Popover,
+  Popup,
+  Progress,
+  PullRefresh,
+  Radio,
+  RadioGroup,
+  Rate,
+  Row,
+  Search,
+  ShareSheet,
+  Sidebar,
+  SidebarItem,
+  Skeleton,
+  Slider,
+  Step,
+  Stepper,
+  Steps,
+  Sticky,
+  SubmitBar,
+  Swipe,
+  SwipeCell,
+  SwipeItem,
+  Switch,
+  Tab,
+  Tabbar,
+  TabbarItem,
+  Tabs,
+  Tag,
+  Toast,
+  TreeSelect,
+  Uploader,
+  stdin_default as default,
+  install,
+  version
+};