vant 4.1.0 → 4.1.2

package/lib/vant.es.js

@@ -539,7 +539,7 @@ var stdin_default$1L = defineComponent({
         if (slots.content) {
           return slots.content();
         }
-        if (isDef(max) && isNumeric(content) && +content > max) {
+        if (isDef(max) && isNumeric(content) && +content > +max) {
           return `${max}+`;
         }
         return content;
@@ -1046,17 +1046,29 @@ var stdin_default$1F = defineComponent({
 });
 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(
@@ -1943,7 +1955,9 @@ var stdin_default$1z = defineComponent({
     const state = reactive({
       fixed: false,
       width: 0,
+      // root width
       height: 0,
+      // root height
       transform: 0
     });
     const offset = computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
@@ -2278,7 +2292,7 @@ var stdin_default$1x = defineComponent({
     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();
@@ -2323,7 +2337,8 @@ var stdin_default$1x = defineComponent({
     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;
@@ -2595,7 +2610,7 @@ var stdin_default$1v = defineComponent({
       lineStyle: {},
       currentIndex: -1
     });
-    const scrollable = computed(() => children.length > props.swipeThreshold || !props.ellipsis || props.shrink);
+    const scrollable = computed(() => children.length > +props.swipeThreshold || !props.ellipsis || props.shrink);
     const navStyle = computed(() => ({
       borderColor: props.color,
       background: props.background
@@ -3295,6 +3310,7 @@ var stdin_default$1r = defineComponent({
     watch(() => props.modelValue, (newValues) => {
       if (!isSameValue(newValues, selectedValues.value) && !isSameValue(newValues, lastEmittedModelValue)) {
         selectedValues.value = newValues.slice(0);
+        lastEmittedModelValue = newValues.slice(0);
       }
     }, {
       deep: true
@@ -3359,8 +3375,8 @@ function formatDataForCascade({
     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 ? [
@@ -4015,7 +4031,7 @@ var stdin_default$1n = defineComponent({
       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;
@@ -4046,7 +4062,7 @@ var stdin_default$1n = defineComponent({
           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) {
@@ -4111,12 +4127,12 @@ var stdin_default$1n = defineComponent({
       }
     };
     const onBlur = (event) => {
-      if (getProp("readonly")) {
-        return;
-      }
       state.focused = false;
       updateValue(getModelValue(), "onBlur");
       emit("blur", event);
+      if (getProp("readonly")) {
+        return;
+      }
       validateWithTrigger("onBlur");
       nextTick(adjustTextareaSize);
       resetScroll();
@@ -4139,7 +4155,8 @@ var stdin_default$1n = defineComponent({
     });
     const labelStyle = computed(() => {
       const labelWidth = getProp("labelWidth");
-      if (labelWidth) {
+      const labelAlign = getProp("labelAlign");
+      if (labelWidth && labelAlign !== "top") {
         return {
           width: addUnit(labelWidth)
         };
@@ -4249,6 +4266,8 @@ var stdin_default$1n = defineComponent({
       }
     };
     const renderLabel = () => {
+      const labelWidth = getProp("labelWidth");
+      const labelAlign = getProp("labelAlign");
       const colon = getProp("colon") ? ":" : "";
       if (slots.label) {
         return [slots.label(), colon];
@@ -4256,7 +4275,10 @@ var stdin_default$1n = defineComponent({
       if (props.label) {
         return createVNode("label", {
           "id": `${id}-label`,
-          "for": getInputId()
+          "for": getInputId(),
+          "style": labelAlign === "top" && labelWidth ? {
+            width: addUnit(labelWidth)
+          } : void 0
         }, [props.label + colon]);
       }
     };
@@ -5637,7 +5659,7 @@ var stdin_default$1c = defineComponent({
       });
     };
     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 {
@@ -5723,7 +5745,7 @@ function getDayByOffset(date, offset) {
 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;
 };
@@ -6361,7 +6383,7 @@ var stdin_default$18 = defineComponent({
         rangePrompt,
         showRangePrompt
       } = props;
-      if (maxRange && calcDateNum(date) > maxRange) {
+      if (maxRange && calcDateNum(date) > +maxRange) {
         if (showRangePrompt) {
           showToast(rangePrompt || t$f("rangePrompt", maxRange));
         }
@@ -6448,7 +6470,7 @@ var stdin_default$18 = defineComponent({
         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]);
@@ -7175,7 +7197,7 @@ var stdin_default$12 = defineComponent({
       } = 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) {
@@ -8655,7 +8677,7 @@ var stdin_default$R = defineComponent({
   }
 });
 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: {
@@ -9453,7 +9475,7 @@ var stdin_default$K = defineComponent({
       } else if (gutter) {
         const gutterValue = addUnit(gutter);
         style.paddingRight = gutterValue;
-        if (index.value >= columnNum) {
+        if (index.value >= +columnNum) {
           style.marginTop = gutterValue;
         }
       }
@@ -9688,7 +9710,7 @@ var stdin_default$J = defineComponent({
         } = touch;
         const moveX = deltaX.value + startMoveX;
         const moveY = deltaY.value + startMoveY;
-        if ((moveX > maxMoveX.value || moveX < -maxMoveX.value) && !isImageMoved) {
+        if ((moveX > maxMoveX.value || moveX < -maxMoveX.value) && !isImageMoved && touch.isHorizontal()) {
           state.moving = false;
           return;
         }
@@ -9754,8 +9776,9 @@ var stdin_default$J = defineComponent({
           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;
           }
         }
       }
@@ -10358,13 +10381,14 @@ var stdin_default$F = defineComponent({
     const scrollParent = useScrollParent(root);
     const check = () => {
       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,
           direction
         } = props;
+        const offset = +props.offset;
         const scrollParentRect = useRect(scrollParent);
         if (!scrollParentRect.height || isHidden(root)) {
           return;
@@ -10997,7 +11021,7 @@ var stdin_default$A = defineComponent({
         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);
       }
@@ -11271,10 +11295,10 @@ var stdin_default$y = defineComponent({
       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;
@@ -11527,7 +11551,7 @@ const progressProps = {
   percentage: {
     type: numericProp,
     default: 0,
-    validator: (value) => value >= 0 && value <= 100
+    validator: (value) => +value >= 0 && +value <= 100
   }
 };
 var stdin_default$w = defineComponent({
@@ -12001,7 +12025,7 @@ var stdin_default$t = defineComponent({
     attrs
   }) {
     const id = useId();
-    const filedRef = ref();
+    const fieldRef = ref();
     const onCancel = () => {
       if (!slots.action) {
         emit("update:modelValue", "");
@@ -12037,11 +12061,11 @@ var stdin_default$t = defineComponent({
     };
     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);
@@ -12056,7 +12080,7 @@ var stdin_default$t = defineComponent({
       });
       const onInput = (value) => emit("update:modelValue", value);
       return createVNode(Field, mergeProps({
-        "ref": filedRef,
+        "ref": fieldRef,
         "type": "search",
         "class": bem$k("field"),
         "border": false,
@@ -13029,8 +13053,8 @@ var stdin_default$d = defineComponent({
     let actionType;
     const inputRef = ref();
     const current2 = ref(getInitialValue());
-    const minusDisabled = computed(() => props.disabled || props.disableMinus || current2.value <= +props.min);
-    const plusDisabled = computed(() => props.disabled || props.disablePlus || current2.value >= +props.max);
+    const minusDisabled = computed(() => props.disabled || props.disableMinus || +current2.value <= +props.min);
+    const plusDisabled = computed(() => props.disabled || props.disablePlus || +current2.value >= +props.max);
     const inputStyle = computed(() => ({
       width: addUnit(props.inputWidth),
       height: addUnit(props.buttonSize)
@@ -13853,7 +13877,7 @@ var stdin_default$6 = defineComponent({
           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 {
@@ -13940,7 +13964,7 @@ function isOversize(items, maxSize) {
       if (isFunction(maxSize)) {
         return maxSize(item.file);
       }
-      return item.file.size > maxSize;
+      return item.file.size > +maxSize;
     }
     return false;
   });
@@ -13957,7 +13981,7 @@ function filterFiles(items, maxSize) {
   });
   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) {
@@ -14274,7 +14298,7 @@ var stdin_default$4 = defineComponent({
     };
     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 : createVNode("input", {
@@ -14363,6 +14387,10 @@ class ReactiveListener {
     this.initState();
     this.render("loading", false);
   }
+  /*
+   * init listener state
+   * @return
+   */
   initState() {
     if ("dataset" in this.el) {
       this.el.dataset.src = this.src;
@@ -14376,9 +14404,20 @@ class ReactiveListener {
       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;
@@ -14390,15 +14429,27 @@ class ReactiveListener {
       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(
@@ -14421,6 +14472,10 @@ class ReactiveListener {
       }
     );
   }
+  /*
+   * try load image and  render it
+   * @return
+   */
   load(onFinish = noop) {
     if (this.attempt > this.options.attempt - 1 && this.state.error) {
       if (process.env.NODE_ENV !== "production" && !this.options.silent) {
@@ -14469,9 +14524,19 @@ class ReactiveListener {
       );
     });
   }
+  /*
+   * 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;
@@ -14487,6 +14552,10 @@ class ReactiveListener {
       time
     };
   }
+  /*
+   * $destroy
+   * @return
+   */
   $destroy() {
     this.el = null;
     this.src = null;
@@ -14557,12 +14626,26 @@ function stdin_default$3() {
       );
       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$1) {
@@ -14573,6 +14656,13 @@ function stdin_default$3() {
         }
       }
     }
+    /*
+     * 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);
@@ -14613,6 +14703,12 @@ function stdin_default$3() {
         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;
@@ -14634,6 +14730,11 @@ function stdin_default$3() {
       this.lazyLoadHandler();
       nextTick(() => this.lazyLoadHandler());
     }
+    /**
+     * remove listener form list
+     * @param  {DOM} el
+     * @return
+     */
     remove(el) {
       if (!el)
         return;
@@ -14646,6 +14747,11 @@ function stdin_default$3() {
         existItem.$destroy();
       }
     }
+    /*
+     * remove lazy components form list
+     * @param  {Vue} vm Vue instance
+     * @return
+     */
     removeComponent(vm) {
       if (!vm)
         return;
@@ -14678,6 +14784,14 @@ function stdin_default$3() {
         this.initIntersectionObserver();
       }
     }
+    /*
+     *** Private functions ***
+     */
+    /*
+     * add listener target
+     * @param  {DOM} el listener target
+     * @return
+     */
     addListenerTarget(el) {
       if (!el)
         return;
@@ -14696,6 +14810,11 @@ function stdin_default$3() {
       }
       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) {
@@ -14708,6 +14827,12 @@ function stdin_default$3() {
         }
       });
     }
+    /*
+     * add or remove eventlistener
+     * @param  {DOM} el DOM or Window
+     * @param  {boolean} start flag
+     * @return
+     */
     initListen(el, start) {
       this.options.ListenEvents.forEach(
         (evt) => (start ? on : off)(el, evt, this.lazyLoadHandler)
@@ -14748,6 +14873,10 @@ function stdin_default$3() {
         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) => {
@@ -14764,6 +14893,11 @@ function stdin_default$3() {
         item.$destroy();
       });
     }
+    /**
+     * init IntersectionObserver
+     * set mode to observer
+     * @return
+     */
     initIntersectionObserver() {
       if (!hasIntersectionObserver) {
         return;
@@ -14778,6 +14912,10 @@ function stdin_default$3() {
         });
       }
     }
+    /**
+     * init IntersectionObserver
+     * @return
+     */
     observerHandler(entries) {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
@@ -14791,6 +14929,13 @@ function stdin_default$3() {
         }
       });
     }
+    /**
+     * 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;
@@ -14822,6 +14967,11 @@ function stdin_default$3() {
         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;
@@ -15001,7 +15151,6 @@ var stdin_default$1 = (lazyManager) => ({
   },
   created() {
     this.init();
-    this.renderSrc = this.options.loading;
   },
   mounted() {
     this.el = this.$el;
@@ -15051,6 +15200,11 @@ var stdin_default$1 = (lazyManager) => ({
   }
 });
 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);
@@ -15074,7 +15228,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.1.0";
+const version = "4.1.2";
 function install(app) {
   const components = [
     ActionBar,