vant 4.1.0 → 4.1.1

package/lib/vant.js

@@ -930,7 +930,7 @@
           if (slots.content) {
             return slots.content();
           }
-          if (isDef(max) && isNumeric(content) && +content > max) {
+          if (isDef(max) && isNumeric(content) && +content > +max) {
             return `${max}+`;
           }
           return content;
@@ -1437,17 +1437,29 @@
   });
   const ActionBarIcon = withInstall(stdin_default$1F);
   const popupSharedProps = {
+    // whether to show popup
     show: Boolean,
+    // z-index
     zIndex: numericProp,
+    // whether to show overlay
     overlay: truthProp,
+    // transition duration
     duration: numericProp,
+    // teleport
     teleport: [String, Object],
+    // prevent body scroll
     lockScroll: truthProp,
+    // whether to lazy render
     lazyRender: truthProp,
+    // callback function before close
     beforeClose: Function,
+    // overlay custom style
     overlayStyle: Object,
+    // overlay custom class name
     overlayClass: unknownProp,
+    // Initial rendering animation
     transitionAppear: Boolean,
+    // whether to close popup when overlay is clicked
     closeOnClickOverlay: truthProp
   };
   const popupSharedPropKeys = Object.keys(
@@ -2331,7 +2343,9 @@
       const state = vue.reactive({
         fixed: false,
         width: 0,
+        // root width
         height: 0,
+        // root height
         transform: 0
       });
       const offset2 = vue.computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
@@ -2666,7 +2680,7 @@
       const stopAutoplay = () => clearTimeout(autoplayTimer);
       const autoplay = () => {
         stopAutoplay();
-        if (props.autoplay > 0 && count.value > 1) {
+        if (+props.autoplay > 0 && count.value > 1) {
           autoplayTimer = setTimeout(() => {
             next();
             autoplay();
@@ -2711,7 +2725,8 @@
       const resize = () => initialize(state.active);
       let touchStartTime;
       const onTouchStart = (event) => {
-        if (!props.touchable || event.touches.length > 1)
+        if (!props.touchable || // avoid resetting position on multi-finger touch
+        event.touches.length > 1)
           return;
         touch.start(event);
         dragging = false;
@@ -2983,7 +2998,7 @@
         lineStyle: {},
         currentIndex: -1
       });
-      const scrollable = vue.computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
+      const scrollable = vue.computed(() => children.length > +props.swipeThreshold || !props.ellipsis || props.shrink);
       const navStyle = vue.computed(() => ({
         borderColor: props.color,
         background: props.background
@@ -3677,6 +3692,7 @@
       vue.watch(() => props.modelValue, (newValues) => {
         if (!isSameValue(newValues, selectedValues.value) && !isSameValue(newValues, lastEmittedModelValue)) {
           selectedValues.value = newValues.slice(0);
+          lastEmittedModelValue = newValues.slice(0);
         }
       }, {
         deep: true
@@ -3741,8 +3757,8 @@
       county_list: county = {},
       province_list: province = {}
     } = areaList;
-    const showCity = columnsNum > 1;
-    const showCounty = columnsNum > 2;
+    const showCity = +columnsNum > 1;
+    const showCounty = +columnsNum > 2;
     const getProvinceChildren = () => {
       if (showCity) {
         return placeholder.length ? [
@@ -4397,7 +4413,7 @@
         const {
           maxlength
         } = props;
-        if (isDef(maxlength) && getStringLength(value) > maxlength) {
+        if (isDef(maxlength) && getStringLength(value) > +maxlength) {
           const modelValue = getModelValue();
           if (modelValue && getStringLength(modelValue) === +maxlength) {
             return modelValue;
@@ -4428,7 +4444,7 @@
             maxlength
           } = props;
           value = formatter(value);
-          if (isDef(maxlength) && getStringLength(value) > maxlength) {
+          if (isDef(maxlength) && getStringLength(value) > +maxlength) {
             value = cutString(value, +maxlength);
           }
           if (inputRef.value && state.focused) {
@@ -6019,7 +6035,7 @@
         });
       };
       const scroll = () => {
-        show.value = scrollParent.value ? getScrollTop(scrollParent.value) >= props.offset : false;
+        show.value = scrollParent.value ? getScrollTop(scrollParent.value) >= +props.offset : false;
       };
       const getTarget = () => {
         const {
@@ -6102,7 +6118,7 @@
   const getPrevDay = (date) => getDayByOffset(date, -1);
   const getNextDay = (date) => getDayByOffset(date, 1);
   const getToday = () => {
-    const today = new Date();
+    const today = /* @__PURE__ */ new Date();
     today.setHours(0, 0, 0, 0);
     return today;
   };
@@ -6740,7 +6756,7 @@
           rangePrompt,
           showRangePrompt
         } = props;
-        if (maxRange && calcDateNum(date) > maxRange) {
+        if (maxRange && calcDateNum(date) > +maxRange) {
           if (showRangePrompt) {
             showToast(rangePrompt || t$f("rangePrompt", maxRange));
           }
@@ -6827,7 +6843,7 @@
           if (selectedIndex !== -1) {
             const [unselectedDate] = dates.splice(selectedIndex, 1);
             emit("unselect", cloneDate(unselectedDate));
-          } else if (props.maxRange && dates.length >= props.maxRange) {
+          } else if (props.maxRange && dates.length >= +props.maxRange) {
             showToast(props.rangePrompt || t$f("rangePrompt", props.maxRange));
           } else {
             select([...dates, date]);
@@ -7554,7 +7570,7 @@
         } = parent.props;
         const value = modelValue.slice();
         if (checked2) {
-          const overlimit = max && value.length >= max;
+          const overlimit = max && value.length >= +max;
           if (!overlimit && !value.includes(name2)) {
             value.push(name2);
             if (props.bindGroup) {
@@ -9017,7 +9033,7 @@
     }
   });
   const CouponList = withInstall(stdin_default$R);
-  const currentYear = new Date().getFullYear();
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const [name$H] = createNamespace("date-picker");
   const datePickerProps = extend({}, sharedProps, {
     columnsType: {
@@ -9806,7 +9822,7 @@
         } else if (gutter) {
           const gutterValue = addUnit(gutter);
           style.paddingRight = gutterValue;
-          if (index.value >= columnNum) {
+          if (index.value >= +columnNum) {
             style.marginTop = gutterValue;
           }
         }
@@ -10107,8 +10123,9 @@
             if (state.scale < 1) {
               resetScale();
             }
-            if (state.scale > props.maxZoom) {
-              state.scale = +props.maxZoom;
+            const maxZoom = +props.maxZoom;
+            if (state.scale > maxZoom) {
+              state.scale = maxZoom;
             }
           }
         }
@@ -10708,13 +10725,14 @@
       const scrollParent = useScrollParent(root);
       const check = () => {
         vue.nextTick(() => {
-          if (loading.value || props.finished || props.disabled || props.error || (tabStatus == null ? void 0 : tabStatus.value) === false) {
+          if (loading.value || props.finished || props.disabled || props.error || // skip check when inside an inactive tab
+          (tabStatus == null ? void 0 : tabStatus.value) === false) {
             return;
           }
           const {
-            offset: offset2,
             direction
           } = props;
+          const offset2 = +props.offset;
           const scrollParentRect = useRect(scrollParent);
           if (!scrollParentRect.height || isHidden(root)) {
             return;
@@ -11347,7 +11365,7 @@
           emit("update:modelValue", value.slice(0, value.length - 1));
         } else if (type === "close") {
           onClose();
-        } else if (value.length < props.maxlength) {
+        } else if (value.length < +props.maxlength) {
           emit("input", text);
           emit("update:modelValue", value + text);
         }
@@ -11621,10 +11639,10 @@
         const {
           mask,
           value,
-          length,
           gutter,
           focused
         } = props;
+        const length = +props.length;
         for (let i = 0; i < length; i++) {
           const char = value[i];
           const showBorder = i !== 0 && !gutter;
@@ -11764,7 +11782,10 @@
     return element ? (element.nodeName || "").toLowerCase() : null;
   }
   function getDocumentElement(element) {
-    return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;
+    return ((isElement(element) ? element.ownerDocument : (
+      // $FlowFixMe[prop-missing]
+      element.document
+    )) || window.document).documentElement;
   }
   function getWindowScrollBarX(element) {
     return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
@@ -11799,7 +11820,8 @@
       y: 0
     };
     if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-      if (getNodeName(offsetParent) !== "body" || isScrollParent(documentElement)) {
+      if (getNodeName(offsetParent) !== "body" || // https://github.com/popperjs/popper-core/issues/1078
+      isScrollParent(documentElement)) {
         scroll = getNodeScroll(offsetParent);
       }
       if (isHTMLElement(offsetParent)) {
@@ -11838,7 +11860,16 @@
     if (getNodeName(element) === "html") {
       return element;
     }
-    return element.assignedSlot || element.parentNode || (isShadowRoot(element) ? element.host : null) || getDocumentElement(element);
+    return (
+      // this is a quicker (but less type safe) way to save quite some bytes from the bundle
+      // $FlowFixMe[incompatible-return]
+      // $FlowFixMe[prop-missing]
+      element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+      element.parentNode || // DOM Element detected
+      (isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+      // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+      getDocumentElement(element)
+    );
   }
   function getScrollParent(node) {
     if (["html", "body", "#document"].indexOf(getNodeName(node)) >= 0) {
@@ -11859,13 +11890,17 @@
     var win = getWindow(scrollParent);
     var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
     var updatedList = list.concat(target);
-    return isBody ? updatedList : updatedList.concat(listScrollParents(getParentNode(target)));
+    return isBody ? updatedList : (
+      // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+      updatedList.concat(listScrollParents(getParentNode(target)))
+    );
   }
   function isTableElement(element) {
     return ["table", "td", "th"].indexOf(getNodeName(element)) >= 0;
   }
   function getTrueOffsetParent(element) {
-    if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+    if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+    getComputedStyle(element).position === "fixed") {
       return null;
     }
     return element.offsetParent;
@@ -12205,6 +12240,11 @@
           runModifierEffects();
           return instance2.update();
         },
+        // Sync update – it will always be executed, even if not necessary. This
+        // is useful for low frequency updates where sync behavior simplifies the
+        // logic.
+        // For high frequency updates (e.g. `resize` and `scroll` events), always
+        // prefer the async Popper#update method
         forceUpdate: function forceUpdate() {
           if (isDestroyed) {
             return;
@@ -12250,6 +12290,8 @@
             }
           }
         },
+        // Async and optimistically optimized update – it will not be executed if
+        // not necessary (debounced to run at most once-per-tick)
         update: debounce(function() {
           return new Promise(function(resolve) {
             instance2.forceUpdate();
@@ -12396,13 +12438,19 @@
       offsetParent = offsetParent;
       if (placement === top || (placement === left || placement === right) && variation === end) {
         sideY = bottom;
-        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
+        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : (
+          // $FlowFixMe[prop-missing]
+          offsetParent[heightProp]
+        );
         y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
       }
       if (placement === left || (placement === top || placement === bottom) && variation === end) {
         sideX = right;
-        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
+        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : (
+          // $FlowFixMe[prop-missing]
+          offsetParent[widthProp]
+        );
         x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
       }
@@ -12786,7 +12834,7 @@
     percentage: {
       type: numericProp,
       default: 0,
-      validator: (value) => value >= 0 && value <= 100
+      validator: (value) => +value >= 0 && +value <= 100
     }
   };
   var stdin_default$w = vue.defineComponent({
@@ -13260,7 +13308,7 @@
       attrs
     }) {
       const id = useId();
-      const filedRef = vue.ref();
+      const fieldRef = vue.ref();
       const onCancel = () => {
         if (!slots.action) {
           emit("update:modelValue", "");
@@ -13296,11 +13344,11 @@
       };
       const blur = () => {
         var _a;
-        return (_a = filedRef.value) == null ? void 0 : _a.blur();
+        return (_a = fieldRef.value) == null ? void 0 : _a.blur();
       };
       const focus = () => {
         var _a;
-        return (_a = filedRef.value) == null ? void 0 : _a.focus();
+        return (_a = fieldRef.value) == null ? void 0 : _a.focus();
       };
       const onBlur = (event) => emit("blur", event);
       const onFocus = (event) => emit("focus", event);
@@ -13315,7 +13363,7 @@
         });
         const onInput = (value) => emit("update:modelValue", value);
         return vue.createVNode(Field, vue.mergeProps({
-          "ref": filedRef,
+          "ref": fieldRef,
           "type": "search",
           "class": bem$k("field"),
           "border": false,
@@ -14282,8 +14330,8 @@
       let actionType;
       const inputRef = vue.ref();
       const current2 = vue.ref(getInitialValue());
-      const minusDisabled = vue.computed(() => props.disabled || props.disableMinus || current2.value <= +props.min);
-      const plusDisabled = vue.computed(() => props.disabled || props.disablePlus || current2.value >= +props.max);
+      const minusDisabled = vue.computed(() => props.disabled || props.disableMinus || +current2.value <= +props.min);
+      const plusDisabled = vue.computed(() => props.disabled || props.disablePlus || +current2.value >= +props.max);
       const inputStyle = vue.computed(() => ({
         width: addUnit(props.inputWidth),
         height: addUnit(props.buttonSize)
@@ -15100,7 +15148,7 @@
             const index = activeId.indexOf(item.id);
             if (index !== -1) {
               activeId.splice(index, 1);
-            } else if (activeId.length < props.max) {
+            } else if (activeId.length < +props.max) {
               activeId.push(item.id);
             }
           } else {
@@ -15187,7 +15235,7 @@
         if (isFunction(maxSize)) {
           return maxSize(item.file);
         }
-        return item.file.size > maxSize;
+        return item.file.size > +maxSize;
       }
       return false;
     });
@@ -15204,7 +15252,7 @@
     });
     return { valid, invalid };
   }
-  const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+  const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|avif)/i;
   const isImageUrl = (url) => IMAGE_REGEXP.test(url);
   function isImageFile(item) {
     if (item.isImage) {
@@ -15521,7 +15569,7 @@
       };
       const onClickUpload = (event) => emit("clickUpload", event);
       const renderUpload = () => {
-        if (props.modelValue.length >= props.maxCount) {
+        if (props.modelValue.length >= +props.maxCount) {
           return;
         }
         const Input = props.readonly ? null : vue.createVNode("input", {
@@ -15610,6 +15658,10 @@
       this.initState();
       this.render("loading", false);
     }
+    /*
+     * init listener state
+     * @return
+     */
     initState() {
       if ("dataset" in this.el) {
         this.el.dataset.src = this.src;
@@ -15623,9 +15675,20 @@
         rendered: false
       };
     }
+    /*
+     * record performance
+     * @return
+     */
     record(event) {
       this.performanceData[event] = Date.now();
     }
+    /*
+     * update image listener data
+     * @param  {String} image uri
+     * @param  {String} loading image uri
+     * @param  {String} error image uri
+     * @return
+     */
     update({ src, loading, error }) {
       const oldSrc = this.src;
       this.src = src;
@@ -15637,15 +15700,27 @@
         this.initState();
       }
     }
+    /*
+     *  check el is in view
+     * @return {Boolean} el is in view
+     */
     checkInView() {
       const rect = useRect(this.el);
       return rect.top < window.innerHeight * this.options.preLoad && rect.bottom > this.options.preLoadTop && rect.left < window.innerWidth * this.options.preLoad && rect.right > 0;
     }
+    /*
+     * listener filter
+     */
     filter() {
       Object.keys(this.options.filter).forEach((key) => {
         this.options.filter[key](this, this.options);
       });
     }
+    /*
+     * render loading first
+     * @params cb:Function
+     * @return
+     */
     renderLoading(cb) {
       this.state.loading = true;
       loadImageAsync(
@@ -15664,6 +15739,10 @@
         }
       );
     }
+    /*
+     * try load image and  render it
+     * @return
+     */
     load(onFinish = noop) {
       if (this.attempt > this.options.attempt - 1 && this.state.error) {
         onFinish();
@@ -15707,9 +15786,19 @@
         );
       });
     }
+    /*
+     * render image
+     * @param  {String} state to render // ['loading', 'src', 'error']
+     * @param  {String} is form cache
+     * @return
+     */
     render(state, cache) {
       this.elRenderer(this, state, cache);
     }
+    /*
+     * output performance data
+     * @return {Object} performance data
+     */
     performance() {
       let state = "loading";
       let time = 0;
@@ -15725,6 +15814,10 @@
         time
       };
     }
+    /*
+     * $destroy
+     * @return
+     */
     $destroy() {
       this.el = null;
       this.src = null;
@@ -15795,12 +15888,26 @@
         );
         this.setMode(this.options.observer ? modeType.observer : modeType.event);
       }
+      /**
+       * update config
+       * @param  {Object} config params
+       * @return
+       */
       config(options = {}) {
         Object.assign(this.options, options);
       }
+      /**
+       * output listener's load performance
+       * @return {Array}
+       */
       performance() {
         return this.listeners.map((item) => item.performance());
       }
+      /*
+       * add lazy component to queue
+       * @param  {Vue} vm lazy component instance
+       * @return
+       */
       addLazyBox(vm) {
         this.listeners.push(vm);
         if (inBrowser) {
@@ -15811,6 +15918,13 @@
           }
         }
       }
+      /*
+       * add image listener to queue
+       * @param  {DOM} el
+       * @param  {object} binding vue directive binding
+       * @param  {vnode} vnode vue directive vnode
+       * @return
+       */
       add(el, binding, vnode) {
         if (this.listeners.some((item) => item.el === el)) {
           this.update(el, binding);
@@ -15851,6 +15965,12 @@
           vue.nextTick(() => this.lazyLoadHandler());
         });
       }
+      /**
+       * update image src
+       * @param  {DOM} el
+       * @param  {object} vue directive binding
+       * @return
+       */
       update(el, binding, vnode) {
         const value = this.valueFormatter(binding.value);
         let { src } = value;
@@ -15872,6 +15992,11 @@
         this.lazyLoadHandler();
         vue.nextTick(() => this.lazyLoadHandler());
       }
+      /**
+       * remove listener form list
+       * @param  {DOM} el
+       * @return
+       */
       remove(el) {
         if (!el)
           return;
@@ -15884,6 +16009,11 @@
           existItem.$destroy();
         }
       }
+      /*
+       * remove lazy components form list
+       * @param  {Vue} vm Vue instance
+       * @return
+       */
       removeComponent(vm) {
         if (!vm)
           return;
@@ -15916,6 +16046,14 @@
           this.initIntersectionObserver();
         }
       }
+      /*
+       *** Private functions ***
+       */
+      /*
+       * add listener target
+       * @param  {DOM} el listener target
+       * @return
+       */
       addListenerTarget(el) {
         if (!el)
           return;
@@ -15934,6 +16072,11 @@
         }
         return this.targetIndex;
       }
+      /*
+       * remove listener target or reduce target childrenCount
+       * @param  {DOM} el or window
+       * @return
+       */
       removeListenerTarget(el) {
         this.targets.forEach((target, index) => {
           if (target.el === el) {
@@ -15946,6 +16089,12 @@
           }
         });
       }
+      /*
+       * add or remove eventlistener
+       * @param  {DOM} el DOM or Window
+       * @param  {boolean} start flag
+       * @return
+       */
       initListen(el, start2) {
         this.options.ListenEvents.forEach(
           (evt) => (start2 ? on : off)(el, evt, this.lazyLoadHandler)
@@ -15986,6 +16135,10 @@
           this.Event.listeners[event].forEach((func) => func(context, inCache));
         };
       }
+      /**
+       * find nodes which in viewport and trigger load
+       * @return
+       */
       lazyLoadHandler() {
         const freeList = [];
         this.listeners.forEach((listener) => {
@@ -16002,6 +16155,11 @@
           item.$destroy();
         });
       }
+      /**
+       * init IntersectionObserver
+       * set mode to observer
+       * @return
+       */
       initIntersectionObserver() {
         if (!hasIntersectionObserver) {
           return;
@@ -16016,6 +16174,10 @@
           });
         }
       }
+      /**
+       * init IntersectionObserver
+       * @return
+       */
       observerHandler(entries) {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
@@ -16029,6 +16191,13 @@
           }
         });
       }
+      /**
+       * set element attribute with image'url and state
+       * @param  {object} lazyload listener object
+       * @param  {string} state will be rendered
+       * @param  {bool} inCache  is rendered from cache
+       * @return
+       */
       elRenderer(listener, state, cache) {
         if (!listener.el)
           return;
@@ -16060,6 +16229,11 @@
           el.dispatchEvent(event);
         }
       }
+      /**
+       * generate loading loaded error image url
+       * @param {string} image's src
+       * @return {object} image's loading, loaded, error url
+       */
       valueFormatter(value) {
         let src = value;
         let { loading, error } = this.options;
@@ -16236,7 +16410,6 @@
     },
     created() {
       this.init();
-      this.renderSrc = this.options.loading;
     },
     mounted() {
       this.el = this.$el;
@@ -16281,6 +16454,11 @@
     }
   });
   const Lazyload = {
+    /*
+     * install function
+     * @param  {App} app
+     * @param  {object} options lazyload options
+     */
     install(app, options = {}) {
       const LazyClass = stdin_default$3();
       const lazy = new LazyClass(options);
@@ -16304,7 +16482,7 @@
       });
     }
   };
-  const version = "4.1.0";
+  const version = "4.1.1";
   function install(app) {
     const components = [
       ActionBar,