vant 4.3.0 → 4.3.2

package/lib/vant.es.js

@@ -1,5 +1,5 @@
 import { unref, ref, reactive, inject, watch, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, mergeProps, Transition, withDirectives, vShow, Teleport, Fragment, onBeforeUpdate, createTextVNode, onUnmounted, createApp, resolveDirective, withKeys, onUpdated, Comment, Text, h } from "vue";
-import { useWindowSize, useRect, useChildren, useParent, onMountedOrActivated, getScrollParent, useEventListener, raf, useScrollParent, usePageVisibility, doubleRaf, CUSTOM_FIELD_INJECTION_KEY, useCustomFieldValue, inBrowser as inBrowser$1, useToggle, cancelRaf, useCountDown, useClickAway } from "@vant/use";
+import { useWindowSize, useRect, useChildren, useParent, onMountedOrActivated, getScrollParent, useEventListener, cancelRaf, raf, useScrollParent, usePageVisibility, doubleRaf, CUSTOM_FIELD_INJECTION_KEY, useCustomFieldValue, inBrowser as inBrowser$1, useToggle, useCountDown, useClickAway } from "@vant/use";
 import { offsetModifier, createPopper } from "@vant/popperjs";
 const isDef = (val) => val !== void 0 && val !== null;
 const isFunction = (val) => typeof val === "function";
@@ -1861,23 +1861,46 @@ var stdin_default$1B = defineComponent({
     }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
   }
 });
+const useSyncPropRef = (getProp, setProp) => {
+  const propRef = ref(getProp());
+  watch(getProp, (value) => {
+    if (value !== propRef.value) {
+      propRef.value = value;
+    }
+  });
+  watch(propRef, (value) => {
+    if (value !== getProp()) {
+      setProp(value);
+    }
+  });
+  return propRef;
+};
 function scrollLeftTo(scroller, to, duration) {
+  let rafId;
   let count = 0;
   const from = scroller.scrollLeft;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
+  function cancel() {
+    cancelRaf(rafId);
+  }
   function animate() {
     scroller.scrollLeft += (to - from) / frames;
     if (++count < frames) {
-      raf(animate);
+      rafId = raf(animate);
     }
   }
   animate();
+  return cancel;
 }
 function scrollTopTo(scroller, to, duration, callback) {
+  let rafId;
   let current2 = getScrollTop(scroller);
   const isDown = current2 < to;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
   const step = (to - current2) / frames;
+  function cancel() {
+    cancelRaf(rafId);
+  }
   function animate() {
     current2 += step;
     if (isDown && current2 > to || !isDown && current2 < to) {
@@ -1885,12 +1908,13 @@ function scrollTopTo(scroller, to, duration, callback) {
     }
     setScrollTop(scroller, current2);
     if (isDown && current2 < to || !isDown && current2 > to) {
-      raf(animate);
+      rafId = raf(animate);
     } else if (callback) {
-      raf(callback);
+      rafId = raf(callback);
     }
   }
   animate();
+  return cancel;
 }
 let current = 0;
 function useId() {
@@ -2533,6 +2557,8 @@ var stdin_default$1x = defineComponent({
     let tabHeight;
     let lockScroll;
     let stickyFixed;
+    let cancelScrollLeftToRaf;
+    let cancelScrollTopToRaf;
     const root = ref();
     const navRef = ref();
     const wrapRef = ref();
@@ -2580,7 +2606,9 @@ var stdin_default$1x = defineComponent({
       }
       const title = titles[state.currentIndex].$el;
       const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
-      scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
+      if (cancelScrollLeftToRaf)
+        cancelScrollLeftToRaf();
+      cancelScrollLeftToRaf = scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
     };
     const setLine = () => {
       const shouldAnimate = state.inited;
@@ -2656,7 +2684,9 @@ var stdin_default$1x = defineComponent({
         if (target && scroller.value) {
           const to = getElementTop(target, scroller.value) - scrollOffset.value;
           lockScroll = true;
-          scrollTopTo(scroller.value, to, immediate ? 0 : +props.duration, () => {
+          if (cancelScrollTopToRaf)
+            cancelScrollTopToRaf();
+          cancelScrollTopToRaf = scrollTopTo(scroller.value, to, immediate ? 0 : +props.duration, () => {
             lockScroll = false;
           });
         }
@@ -3125,26 +3155,27 @@ const [name$1j, bem$1f] = createNamespace("picker-group");
 const PICKER_GROUP_KEY = Symbol(name$1j);
 const pickerGroupProps = extend({
   tabs: makeArrayProp(),
+  activeTab: makeNumericProp(0),
   nextStepText: String
 }, pickerToolbarProps);
 var stdin_default$1u = defineComponent({
   name: name$1j,
   props: pickerGroupProps,
-  emits: ["confirm", "cancel"],
+  emits: ["confirm", "cancel", "update:activeTab"],
   setup(props, {
     emit,
     slots
   }) {
-    const activeTab = ref(0);
+    const activeTab = useSyncPropRef(() => props.activeTab, (value) => emit("update:activeTab", value));
     const {
       children,
       linkChildren
     } = useChildren(PICKER_GROUP_KEY);
     linkChildren();
-    const showNextButton = () => activeTab.value < props.tabs.length - 1 && props.nextStepText;
+    const showNextButton = () => +activeTab.value < props.tabs.length - 1 && props.nextStepText;
     const onConfirm = () => {
       if (showNextButton()) {
-        activeTab.value++;
+        activeTab.value = +activeTab.value + 1;
       } else {
         emit("confirm", children.map((item) => item.confirm()));
       }
@@ -4312,6 +4343,10 @@ var stdin_default$1p = defineComponent({
         return createVNode("label", {
           "id": `${id}-label`,
           "for": getInputId(),
+          "onClick": (event) => {
+            preventDefault(event);
+            focus();
+          },
           "style": labelAlign === "top" && labelWidth ? {
             width: addUnit(labelWidth)
           } : void 0
@@ -5240,7 +5275,19 @@ var stdin_default$1i = defineComponent({
         return props.parent.props[name2];
       }
     };
-    const disabled = computed(() => getParentProp("disabled") || props.disabled);
+    const disabled = computed(() => {
+      if (props.parent && props.bindGroup) {
+        const disabled2 = getParentProp("disabled") || props.disabled;
+        if (props.role === "checkbox") {
+          const checkedCount = getParentProp("modelValue").length;
+          const max = getParentProp("max");
+          const overlimit = max && checkedCount >= +max;
+          return disabled2 || overlimit && !props.checked;
+        }
+        return disabled2;
+      }
+      return props.disabled;
+    });
     const direction = computed(() => getParentProp("direction"));
     const iconStyle = computed(() => {
       const checkedColor = props.checkedColor || getParentProp("checkedColor");
@@ -9604,6 +9651,10 @@ var stdin_default$M = defineComponent({
 });
 const GridItem = withInstall(stdin_default$M);
 const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+const getCenter = (touches) => ({
+  x: (touches[0].clientX + touches[1].clientX) / 2,
+  y: (touches[0].clientY + touches[1].clientY) / 2
+});
 const bem$C = createNamespace("image-preview")[1];
 var stdin_default$L = defineComponent({
   props: {
@@ -9632,6 +9683,7 @@ var stdin_default$L = defineComponent({
       displayHeight: 0
     });
     const touch = useTouch();
+    const imageRef = ref();
     const swipeItem = ref();
     const vertical = computed(() => {
       const {
@@ -9653,9 +9705,7 @@ var stdin_default$L = defineComponent({
         transitionDuration: zooming || moving ? "0s" : ".3s"
       };
       if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+        style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
     });
@@ -9681,10 +9731,26 @@ var stdin_default$L = defineComponent({
       }
       return 0;
     });
-    const setScale = (scale) => {
+    const setScale = (scale, center) => {
+      var _a;
       scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
       if (scale !== state.scale) {
+        const ratio = scale / state.scale;
         state.scale = scale;
+        if (center) {
+          const imageRect = useRect((_a = imageRef.value) == null ? void 0 : _a.$el);
+          const origin = {
+            x: imageRect.width * 0.5,
+            y: imageRect.height * 0.5
+          };
+          const moveX = state.moveX - (center.x - imageRect.left - origin.x) * (ratio - 1);
+          const moveY = state.moveY - (center.y - imageRect.top - origin.y) * (ratio - 1);
+          state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+          state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+        } else {
+          state.moveX = 0;
+          state.moveY = 0;
+        }
         emit("scale", {
           scale,
           index: props.active
@@ -9693,20 +9759,20 @@ var stdin_default$L = defineComponent({
     };
     const resetScale = () => {
       setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
+      setScale(scale, scale === 2 ? {
+        x: touch.startX.value,
+        y: touch.startY.value
+      } : void 0);
     };
     let fingerNum;
     let startMoveX;
     let startMoveY;
     let startScale;
     let startDistance;
+    let lastCenter;
     let doubleTapTimer;
     let touchStartTime;
     let isImageMoved = false;
@@ -9730,7 +9796,7 @@ var stdin_default$L = defineComponent({
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
-        startDistance = getDistance(event.touches);
+        startDistance = getDistance(touches);
       }
     };
     const onTouchMove = (event) => {
@@ -9759,7 +9825,8 @@ var stdin_default$L = defineComponent({
         if (touches.length === 2) {
           const distance = getDistance(touches);
           const scale = startScale * distance / startDistance;
-          setScale(scale);
+          lastCenter = getCenter(touches);
+          setScale(scale, lastCenter);
         }
       }
     };
@@ -9813,7 +9880,7 @@ var stdin_default$L = defineComponent({
           }
           const maxZoom = +props.maxZoom;
           if (state.scale > maxZoom) {
-            state.scale = maxZoom;
+            setScale(maxZoom, lastCenter);
           }
         }
       }
@@ -9858,6 +9925,7 @@ var stdin_default$L = defineComponent({
         }, [slots.image({
           src: props.src
         })]) : createVNode(Image$1, {
+          "ref": imageRef,
           "src": props.src,
           "fit": "contain",
           "class": bem$C("image", {
@@ -11388,20 +11456,6 @@ var stdin_default$A = defineComponent({
 });
 const PasswordInput = withInstall(stdin_default$A);
 const PickerGroup = withInstall(stdin_default$1u);
-const useSyncPropRef = (getProp, setProp) => {
-  const propRef = ref(getProp());
-  watch(getProp, (value) => {
-    if (value !== propRef.value) {
-      propRef.value = value;
-    }
-  });
-  watch(propRef, (value) => {
-    if (value !== getProp()) {
-      setProp(value);
-    }
-  });
-  return propRef;
-};
 const [name$r, bem$q] = createNamespace("popover");
 const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
 const popoverProps = {
@@ -15523,7 +15577,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.3.0";
+const version = "4.3.2";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -2252,23 +2252,46 @@
       }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
     }
   });
+  const useSyncPropRef = (getProp, setProp) => {
+    const propRef = vue.ref(getProp());
+    vue.watch(getProp, (value) => {
+      if (value !== propRef.value) {
+        propRef.value = value;
+      }
+    });
+    vue.watch(propRef, (value) => {
+      if (value !== getProp()) {
+        setProp(value);
+      }
+    });
+    return propRef;
+  };
   function scrollLeftTo(scroller, to, duration) {
+    let rafId;
     let count = 0;
     const from = scroller.scrollLeft;
     const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
+    function cancel() {
+      cancelRaf(rafId);
+    }
     function animate() {
       scroller.scrollLeft += (to - from) / frames;
       if (++count < frames) {
-        raf(animate);
+        rafId = raf(animate);
       }
     }
     animate();
+    return cancel;
   }
   function scrollTopTo(scroller, to, duration, callback) {
+    let rafId;
     let current2 = getScrollTop(scroller);
     const isDown = current2 < to;
     const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
     const step = (to - current2) / frames;
+    function cancel() {
+      cancelRaf(rafId);
+    }
     function animate() {
       current2 += step;
       if (isDown && current2 > to || !isDown && current2 < to) {
@@ -2276,12 +2299,13 @@
       }
       setScrollTop(scroller, current2);
       if (isDown && current2 < to || !isDown && current2 > to) {
-        raf(animate);
+        rafId = raf(animate);
       } else if (callback) {
-        raf(callback);
+        rafId = raf(callback);
       }
     }
     animate();
+    return cancel;
   }
   let current = 0;
   function useId() {
@@ -2921,6 +2945,8 @@
       let tabHeight;
       let lockScroll;
       let stickyFixed;
+      let cancelScrollLeftToRaf;
+      let cancelScrollTopToRaf;
       const root = vue.ref();
       const navRef = vue.ref();
       const wrapRef = vue.ref();
@@ -2968,7 +2994,9 @@
         }
         const title = titles[state.currentIndex].$el;
         const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
-        scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
+        if (cancelScrollLeftToRaf)
+          cancelScrollLeftToRaf();
+        cancelScrollLeftToRaf = scrollLeftTo(nav, to, immediate ? 0 : +props.duration);
       };
       const setLine = () => {
         const shouldAnimate = state.inited;
@@ -3044,7 +3072,9 @@
           if (target && scroller.value) {
             const to = getElementTop(target, scroller.value) - scrollOffset.value;
             lockScroll = true;
-            scrollTopTo(scroller.value, to, immediate ? 0 : +props.duration, () => {
+            if (cancelScrollTopToRaf)
+              cancelScrollTopToRaf();
+            cancelScrollTopToRaf = scrollTopTo(scroller.value, to, immediate ? 0 : +props.duration, () => {
               lockScroll = false;
             });
           }
@@ -3507,26 +3537,27 @@
   const PICKER_GROUP_KEY = Symbol(name$1j);
   const pickerGroupProps = extend({
     tabs: makeArrayProp(),
+    activeTab: makeNumericProp(0),
     nextStepText: String
   }, pickerToolbarProps);
   var stdin_default$1u = vue.defineComponent({
     name: name$1j,
     props: pickerGroupProps,
-    emits: ["confirm", "cancel"],
+    emits: ["confirm", "cancel", "update:activeTab"],
     setup(props, {
       emit,
       slots
     }) {
-      const activeTab = vue.ref(0);
+      const activeTab = useSyncPropRef(() => props.activeTab, (value) => emit("update:activeTab", value));
       const {
         children,
         linkChildren
       } = useChildren(PICKER_GROUP_KEY);
       linkChildren();
-      const showNextButton = () => activeTab.value < props.tabs.length - 1 && props.nextStepText;
+      const showNextButton = () => +activeTab.value < props.tabs.length - 1 && props.nextStepText;
       const onConfirm = () => {
         if (showNextButton()) {
-          activeTab.value++;
+          activeTab.value = +activeTab.value + 1;
         } else {
           emit("confirm", children.map((item) => item.confirm()));
         }
@@ -4694,6 +4725,10 @@
           return vue.createVNode("label", {
             "id": `${id}-label`,
             "for": getInputId(),
+            "onClick": (event) => {
+              preventDefault(event);
+              focus();
+            },
             "style": labelAlign === "top" && labelWidth ? {
               width: addUnit(labelWidth)
             } : void 0
@@ -5622,7 +5657,19 @@
           return props.parent.props[name2];
         }
       };
-      const disabled = vue.computed(() => getParentProp("disabled") || props.disabled);
+      const disabled = vue.computed(() => {
+        if (props.parent && props.bindGroup) {
+          const disabled2 = getParentProp("disabled") || props.disabled;
+          if (props.role === "checkbox") {
+            const checkedCount = getParentProp("modelValue").length;
+            const max = getParentProp("max");
+            const overlimit = max && checkedCount >= +max;
+            return disabled2 || overlimit && !props.checked;
+          }
+          return disabled2;
+        }
+        return props.disabled;
+      });
       const direction = vue.computed(() => getParentProp("direction"));
       const iconStyle = vue.computed(() => {
         const checkedColor = props.checkedColor || getParentProp("checkedColor");
@@ -9957,6 +10004,10 @@
   });
   const GridItem = withInstall(stdin_default$M);
   const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+  const getCenter = (touches) => ({
+    x: (touches[0].clientX + touches[1].clientX) / 2,
+    y: (touches[0].clientY + touches[1].clientY) / 2
+  });
   const bem$C = createNamespace("image-preview")[1];
   var stdin_default$L = vue.defineComponent({
     props: {
@@ -9985,6 +10036,7 @@
         displayHeight: 0
       });
       const touch = useTouch();
+      const imageRef = vue.ref();
       const swipeItem = vue.ref();
       const vertical = vue.computed(() => {
         const {
@@ -10006,9 +10058,7 @@
           transitionDuration: zooming || moving ? "0s" : ".3s"
         };
         if (scale !== 1) {
-          const offsetX = moveX / scale;
-          const offsetY = moveY / scale;
-          style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+          style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
         }
         return style;
       });
@@ -10034,10 +10084,26 @@
         }
         return 0;
       });
-      const setScale = (scale) => {
+      const setScale = (scale, center) => {
+        var _a;
         scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
         if (scale !== state.scale) {
+          const ratio = scale / state.scale;
           state.scale = scale;
+          if (center) {
+            const imageRect = useRect((_a = imageRef.value) == null ? void 0 : _a.$el);
+            const origin = {
+              x: imageRect.width * 0.5,
+              y: imageRect.height * 0.5
+            };
+            const moveX = state.moveX - (center.x - imageRect.left - origin.x) * (ratio - 1);
+            const moveY = state.moveY - (center.y - imageRect.top - origin.y) * (ratio - 1);
+            state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+            state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+          } else {
+            state.moveX = 0;
+            state.moveY = 0;
+          }
           emit("scale", {
             scale,
             index: props.active
@@ -10046,20 +10112,20 @@
       };
       const resetScale = () => {
         setScale(1);
-        state.moveX = 0;
-        state.moveY = 0;
       };
       const toggleScale = () => {
         const scale = state.scale > 1 ? 1 : 2;
-        setScale(scale);
-        state.moveX = 0;
-        state.moveY = 0;
+        setScale(scale, scale === 2 ? {
+          x: touch.startX.value,
+          y: touch.startY.value
+        } : void 0);
       };
       let fingerNum;
       let startMoveX;
       let startMoveY;
       let startScale;
       let startDistance;
+      let lastCenter;
       let doubleTapTimer;
       let touchStartTime;
       let isImageMoved = false;
@@ -10083,7 +10149,7 @@
         state.zooming = fingerNum === 2 && !offsetX.value;
         if (state.zooming) {
           startScale = state.scale;
-          startDistance = getDistance(event.touches);
+          startDistance = getDistance(touches);
         }
       };
       const onTouchMove = (event) => {
@@ -10112,7 +10178,8 @@
           if (touches.length === 2) {
             const distance = getDistance(touches);
             const scale = startScale * distance / startDistance;
-            setScale(scale);
+            lastCenter = getCenter(touches);
+            setScale(scale, lastCenter);
           }
         }
       };
@@ -10166,7 +10233,7 @@
             }
             const maxZoom = +props.maxZoom;
             if (state.scale > maxZoom) {
-              state.scale = maxZoom;
+              setScale(maxZoom, lastCenter);
             }
           }
         }
@@ -10211,6 +10278,7 @@
           }, [slots.image({
             src: props.src
           })]) : vue.createVNode(Image$1, {
+            "ref": imageRef,
             "src": props.src,
             "fit": "contain",
             "class": bem$C("image", {
@@ -12677,20 +12745,6 @@
     requires: ["popperOffsets"],
     fn: offset
   };
-  const useSyncPropRef = (getProp, setProp) => {
-    const propRef = vue.ref(getProp());
-    vue.watch(getProp, (value) => {
-      if (value !== propRef.value) {
-        propRef.value = value;
-      }
-    });
-    vue.watch(propRef, (value) => {
-      if (value !== getProp()) {
-        setProp(value);
-      }
-    });
-    return propRef;
-  };
   const [name$r, bem$q] = createNamespace("popover");
   const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
   const popoverProps = {
@@ -16783,7 +16837,7 @@
       });
     }
   };
-  const version = "4.3.0";
+  const version = "4.3.2";
   function install(app) {
     const components = [
       ActionBar,