vant 3.5.0 → 3.5.3

package/lib/vant.js

@@ -352,7 +352,7 @@
     }
     return { width, height };
   }
-  var overflowScrollReg = /scroll|auto/i;
+  var overflowScrollReg = /scroll|auto|overlay/i;
   var defaultRoot = inBrowser ? window : void 0;
   function isElement$1(node) {
     const ELEMENT_NODE_TYPE = 1;
@@ -747,9 +747,34 @@
     };
     return options;
   }
+  const useHeight = (element, withSafeArea) => {
+    const height2 = vue.ref();
+    const setHeight = () => {
+      height2.value = useRect(element).height;
+    };
+    vue.onMounted(() => {
+      vue.nextTick(setHeight);
+      if (withSafeArea) {
+        for (let i = 1; i <= 3; i++) {
+          setTimeout(setHeight, 100 * i);
+        }
+      }
+    });
+    return height2;
+  };
+  function usePlaceholder(contentRef, bem2) {
+    const height2 = useHeight(contentRef, true);
+    return (renderContent) => vue.createVNode("div", {
+      "class": bem2("placeholder"),
+      "style": {
+        height: height2.value ? `${height2.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 = vue.defineComponent({
@@ -758,18 +783,27 @@
     setup(props, {
       slots
     }) {
+      const root = vue.ref();
+      const renderPlaceholder = usePlaceholder(root, bem$1q);
       const {
         linkChildren
       } = useChildren(ACTION_BAR_KEY);
       linkChildren();
-      return () => {
+      const renderActionBar = () => {
         var _a;
         return vue.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);
@@ -1653,7 +1687,7 @@
         }
       });
       vue.onDeactivated(() => {
-        if (props.show) {
+        if (props.show && props.teleport) {
           close();
           shouldReopen = true;
         }
@@ -2067,6 +2101,14 @@
       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 = vue.ref(false);
       const formattedColumns = vue.ref([]);
       const columnsFieldNames = vue.computed(() => {
@@ -2917,6 +2959,9 @@
   function useId$1() {
     const vm = vue.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");
@@ -2969,7 +3014,7 @@
   var stdin_default$1l = vue.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
@@ -3043,18 +3088,24 @@
         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 {
@@ -4599,17 +4650,6 @@
       }
     });
   };
-  const useHeight = (element) => {
-    const height2 = vue.ref();
-    const setHeight = () => {
-      height2.value = useRect(element).height;
-    };
-    vue.onMounted(() => {
-      vue.nextTick(setHeight);
-      setTimeout(setHeight, 100);
-    });
-    return height2;
-  };
   const [name$13] = createNamespace("calendar-day");
   var stdin_default$1a = vue.defineComponent({
     name: name$13,
@@ -5081,6 +5121,9 @@
       const months = vue.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));
@@ -5099,6 +5142,7 @@
         }
         return !currentDate.value;
       });
+      const getSelectedDate = () => currentDate.value;
       const onScroll = () => {
         const top2 = getScrollTop(bodyRef.value);
         const bottom2 = top2 + bodyHeight;
@@ -5341,7 +5385,8 @@
       });
       useExpose({
         reset,
-        scrollToDate
+        scrollToDate,
+        getSelectedDate
       });
       onMountedOrActivated(init);
       return () => {
@@ -6307,6 +6352,16 @@
       emit,
       slots
     }) {
+      var _a, _b;
+      if (process.env.NODE_ENV !== "production") {
+        const props2 = (_b = (_a = vue.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;
@@ -6632,6 +6687,9 @@
         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 = vue.computed(() => {
@@ -6710,6 +6768,9 @@
         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 = () => {
@@ -7472,6 +7533,17 @@
       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 = vue.defineComponent({
     name: name$M,
     props: collapseProps,
@@ -7481,7 +7553,8 @@
       slots
     }) {
       const {
-        linkChildren
+        linkChildren,
+        children
       } = useChildren(COLLAPSE_KEY);
       const updateName = (name2) => {
         emit("change", name2);
@@ -7500,13 +7573,41 @@
           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
@@ -7544,6 +7645,9 @@
         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 = vue.computed(() => {
@@ -7632,7 +7736,9 @@
         }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[vue.vShow, show.value]]);
       });
       useExpose({
-        toggle
+        toggle,
+        expanded,
+        itemName: name2
       });
       return () => vue.createVNode("div", {
         "class": [bem$K({
@@ -9409,6 +9515,9 @@
         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);
@@ -9609,6 +9718,9 @@
       } = 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 = vue.computed(() => {
@@ -10403,6 +10515,9 @@
         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;
@@ -10583,15 +10698,6 @@
     }
   });
   const List = withInstall(stdin_default$v);
-  function usePlaceholder(contentRef, bem2) {
-    const height2 = useHeight(contentRef);
-    return (renderContent) => vue.createVNode("div", {
-      "class": bem2("placeholder"),
-      "style": {
-        height: height2.value ? `${height2.value}px` : void 0
-      }
-    }, [renderContent()]);
-  }
   const [name$p, bem$p] = createNamespace("nav-bar");
   const navBarProps = {
     title: String,
@@ -12384,22 +12490,23 @@
       let popper;
       const wrapperRef = vue.ref();
       const popoverRef = vue.ref();
+      const getPopoverOptions = () => ({
+        placement: props.placement,
+        modifiers: [{
+          name: "computeStyles",
+          options: {
+            adaptive: false,
+            gpuAcceleration: false
+          }
+        }, extend({}, offset_default, {
+          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({}, offset_default, {
-              options: {
-                offset: props.offset
-              }
-            })]
-          });
+          return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
         }
         return null;
       };
@@ -12411,9 +12518,7 @@
           if (!popper) {
             popper = createPopperInstance();
           } else {
-            popper.setOptions({
-              placement: props.placement
-            });
+            popper.setOptions(getPopoverOptions());
           }
         });
       };
@@ -12484,7 +12589,7 @@
           popper = null;
         }
       });
-      vue.watch(() => [props.show, props.placement], updateLocation);
+      vue.watch(() => [props.show, props.offset, props.placement], updateLocation);
       useClickAway(wrapperRef, onClickAway, {
         eventName: "touchstart"
       });
@@ -12603,7 +12708,7 @@
   var stdin_default$l = vue.defineComponent({
     name: name$g,
     props: pullRefreshProps,
-    emits: ["refresh", "update:modelValue"],
+    emits: ["change", "refresh", "update:modelValue"],
     setup(props, {
       emit,
       slots
@@ -12648,6 +12753,10 @@
         } else {
           state.status = "loosing";
         }
+        emit("change", {
+          status: state.status,
+          distance
+        });
       };
       const getStatusText = () => {
         const {
@@ -13253,6 +13362,9 @@
         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 = () => {
@@ -13680,6 +13792,9 @@
         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;
@@ -14032,6 +14147,7 @@
     buttonType: makeStringProp("danger"),
     buttonColor: String,
     suffixLabel: String,
+    placeholder: Boolean,
     decimalLength: makeNumericProp(2),
     safeAreaInsetBottom: truthProp
   };
@@ -14043,6 +14159,8 @@
       emit,
       slots
     }) {
+      const root = vue.ref();
+      const renderPlaceholder = usePlaceholder(root, bem$5);
       const renderText = () => {
         const {
           price,
@@ -14102,9 +14220,10 @@
           "onClick": onClickButton
         }, null);
       };
-      return () => {
+      const renderSubmitBar = () => {
         var _a, _b;
         return vue.createVNode("div", {
+          "ref": root,
           "class": [bem$5(), {
             "van-safe-area-bottom": props.safeAreaInsetBottom
           }]
@@ -14112,6 +14231,12 @@
           "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);
@@ -14367,6 +14492,9 @@
         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 = vue.computed(() => {
@@ -14860,7 +14988,7 @@
         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);
             }
@@ -15188,10 +15316,15 @@
       }, () => {
         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;
       }
@@ -15578,6 +15711,9 @@
         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;
@@ -15765,6 +15901,9 @@
       },
       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;
         }
@@ -15804,7 +15943,7 @@
       });
     }
   };
-  const version = "3.5.0";
+  const version = "3.5.3";
   function install(app) {
     const components = [
       ActionBar,
@@ -15991,7 +16130,7 @@
   exports2.Toast = Toast;
   exports2.TreeSelect = TreeSelect;
   exports2.Uploader = Uploader;
-  exports2["default"] = stdin_default;
+  exports2.default = stdin_default;
   exports2.install = install;
   exports2.version = version;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });