vant 3.6.14 → 3.6.16

package/lib/image-preview/ImagePreview.js

@@ -17,21 +17,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  default: () => stdin_default,
-  imagePreviewProps: () => imagePreviewProps
+  default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_use = require("@vant/use");
 var import_use_expose = require("../composables/use-expose");
@@ -40,7 +36,7 @@ var import_swipe = require("../swipe");
 var import_popup = require("../popup");
 var import_ImagePreviewItem = __toESM(require("./ImagePreviewItem"));
 const [name, bem] = (0, import_utils.createNamespace)("image-preview");
-const popupProps = ["show", "teleport", "transition", "overlayStyle", "closeOnPopstate"];
+const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate"];
 const imagePreviewProps = {
   show: Boolean,
   loop: import_utils.truthProp,
@@ -48,40 +44,33 @@ const imagePreviewProps = {
   minZoom: (0, import_utils.makeNumericProp)(1 / 3),
   maxZoom: (0, import_utils.makeNumericProp)(3),
   overlay: import_utils.truthProp,
-  vertical: Boolean,
   closeable: Boolean,
   showIndex: import_utils.truthProp,
   className: import_utils.unknownProp,
   closeIcon: (0, import_utils.makeStringProp)("clear"),
   transition: String,
   beforeClose: Function,
-  doubleScale: import_utils.truthProp,
   overlayClass: import_utils.unknownProp,
   overlayStyle: Object,
   swipeDuration: (0, import_utils.makeNumericProp)(300),
   startPosition: (0, import_utils.makeNumericProp)(0),
   showIndicators: Boolean,
   closeOnPopstate: import_utils.truthProp,
-  closeOnClickImage: import_utils.truthProp,
-  closeOnClickOverlay: import_utils.truthProp,
-  closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
-  teleport: [String, Object]
+  closeIconPosition: (0, import_utils.makeStringProp)("top-right")
 };
-var stdin_default = (0, import_vue.defineComponent)({
+var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: imagePreviewProps,
-  emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
+  emits: ["scale", "close", "closed", "change", "update:show"],
   setup(props, {
     emit,
     slots
   }) {
-    const swipeRef = (0, import_vue.ref)();
-    const activedPreviewItemRef = (0, import_vue.ref)();
-    const state = (0, import_vue.reactive)({
+    const swipeRef = (0, import_vue2.ref)();
+    const state = (0, import_vue2.reactive)({
       active: 0,
       rootWidth: 0,
-      rootHeight: 0,
-      disableZoom: false
+      rootHeight: 0
     });
     const resize = () => {
       if (swipeRef.value) {
@@ -121,32 +110,18 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, [slots.cover()]);
       }
     };
-    const onDragStart = () => {
-      state.disableZoom = true;
-    };
-    const onDragEnd = () => {
-      state.disableZoom = false;
-    };
     const renderImages = () => (0, import_vue.createVNode)(import_swipe.Swipe, {
       "ref": swipeRef,
       "lazyRender": true,
       "loop": props.loop,
       "class": bem("swipe"),
-      "vertical": props.vertical,
       "duration": props.swipeDuration,
       "initialSwipe": props.startPosition,
       "showIndicators": props.showIndicators,
       "indicatorColor": "white",
-      "onChange": setActive,
-      "onDragEnd": onDragEnd,
-      "onDragStart": onDragStart
+      "onChange": setActive
     }, {
-      default: () => [props.images.map((image, index) => (0, import_vue.createVNode)(import_ImagePreviewItem.default, {
-        "ref": (item) => {
-          if (index === state.active) {
-            activedPreviewItemRef.value = item;
-          }
-        },
+      default: () => [props.images.map((image) => (0, import_vue.createVNode)(import_ImagePreviewItem.default, {
         "src": image,
         "show": props.show,
         "active": state.active,
@@ -154,16 +129,8 @@ var stdin_default = (0, import_vue.defineComponent)({
         "minZoom": props.minZoom,
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
-        "disableZoom": state.disableZoom,
-        "doubleScale": props.doubleScale,
-        "closeOnClickImage": props.closeOnClickImage,
-        "closeOnClickOverlay": props.closeOnClickOverlay,
-        "vertical": props.vertical,
         "onScale": emitScale,
-        "onClose": emitClose,
-        "onLongPress": () => emit("longPress", {
-          index
-        })
+        "onClose": emitClose
       }, {
         image: slots.image
       }))]
@@ -184,23 +151,19 @@ var stdin_default = (0, import_vue.defineComponent)({
       return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
     };
     (0, import_use_expose.useExpose)({
-      resetScale: () => {
-        var _a;
-        (_a = activedPreviewItemRef.value) == null ? void 0 : _a.resetScale();
-      },
       swipeTo
     });
-    (0, import_vue.onMounted)(resize);
-    (0, import_vue.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
-    (0, import_vue.watch)(() => props.startPosition, (value) => setActive(+value));
-    (0, import_vue.watch)(() => props.show, (value) => {
+    (0, import_vue2.onMounted)(resize);
+    (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
+    (0, import_vue2.watch)(() => props.startPosition, (value) => setActive(+value));
+    (0, import_vue2.watch)(() => props.show, (value) => {
       const {
         images,
         startPosition
       } = props;
       if (value) {
         setActive(+startPosition);
-        (0, import_vue.nextTick)(() => {
+        (0, import_vue2.nextTick)(() => {
           resize();
           swipeTo(+startPosition, {
             immediate: true

package/lib/image-preview/ImagePreviewItem.d.ts

@@ -1,5 +1,4 @@
-import { type ExtractPropTypes } from 'vue';
-declare const imagePreviewItemProps: {
+declare const _default: import("vue").DefineComponent<{
     src: StringConstructor;
     show: BooleanConstructor;
     active: NumberConstructor;
@@ -19,14 +18,7 @@ declare const imagePreviewItemProps: {
         type: NumberConstructor;
         required: true;
     };
-    disableZoom: BooleanConstructor;
-    doubleScale: BooleanConstructor;
-    closeOnClickImage: BooleanConstructor;
-    closeOnClickOverlay: BooleanConstructor;
-    vertical: BooleanConstructor;
-};
-export type ImagePreviewItemProps = ExtractPropTypes<typeof imagePreviewItemProps>;
-declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale")[], "close" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     src: StringConstructor;
     show: BooleanConstructor;
     active: NumberConstructor;
@@ -46,46 +38,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
         required: true;
     };
-    disableZoom: BooleanConstructor;
-    doubleScale: BooleanConstructor;
-    closeOnClickImage: BooleanConstructor;
-    closeOnClickOverlay: BooleanConstructor;
-    vertical: BooleanConstructor;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "scale" | "longPress")[], "close" | "scale" | "longPress", import("vue").PublicProps, Readonly<ExtractPropTypes<{
-    src: StringConstructor;
-    show: BooleanConstructor;
-    active: NumberConstructor;
-    minZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    maxZoom: {
-        type: (NumberConstructor | StringConstructor)[];
-        required: true;
-    };
-    rootWidth: {
-        type: NumberConstructor;
-        required: true;
-    };
-    rootHeight: {
-        type: NumberConstructor;
-        required: true;
-    };
-    disableZoom: BooleanConstructor;
-    doubleScale: BooleanConstructor;
-    closeOnClickImage: BooleanConstructor;
-    closeOnClickOverlay: BooleanConstructor;
-    vertical: BooleanConstructor;
-}>> & Readonly<{
+}>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     onScale?: ((...args: any[]) => any) | undefined;
-    onLongPress?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     show: boolean;
-    vertical: boolean;
-    closeOnClickOverlay: boolean;
-    disableZoom: boolean;
-    doubleScale: boolean;
-    closeOnClickImage: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>;
 export default _default;

package/lib/image-preview/ImagePreviewItem.js

@@ -21,74 +21,69 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_vue2 = require("vue");
 var import_utils = require("../utils");
-var import_use_expose = require("../composables/use-expose");
 var import_use_touch = require("../composables/use-touch");
 var import_use = require("@vant/use");
 var import_image = require("../image");
 var import_loading = require("../loading");
 var import_swipe_item = require("../swipe-item");
 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 = (0, import_utils.createNamespace)("image-preview")[1];
-const longImageRatio = 2.6;
-const imagePreviewItemProps = {
-  src: String,
-  show: Boolean,
-  active: Number,
-  minZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-  maxZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-  rootWidth: (0, import_utils.makeRequiredProp)(Number),
-  rootHeight: (0, import_utils.makeRequiredProp)(Number),
-  disableZoom: Boolean,
-  doubleScale: Boolean,
-  closeOnClickImage: Boolean,
-  closeOnClickOverlay: Boolean,
-  vertical: Boolean
-};
-var stdin_default = (0, import_vue.defineComponent)({
-  props: imagePreviewItemProps,
-  emits: ["scale", "close", "longPress"],
+var stdin_default = (0, import_vue2.defineComponent)({
+  props: {
+    src: String,
+    show: Boolean,
+    active: Number,
+    minZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
+    maxZoom: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
+    rootWidth: (0, import_utils.makeRequiredProp)(Number),
+    rootHeight: (0, import_utils.makeRequiredProp)(Number)
+  },
+  emits: ["scale", "close"],
   setup(props, {
     emit,
     slots
   }) {
-    const state = (0, import_vue.reactive)({
+    const state = (0, import_vue2.reactive)({
       scale: 1,
       moveX: 0,
       moveY: 0,
       moving: false,
       zooming: false,
-      initializing: false,
-      imageRatio: 0
+      imageRatio: 0,
+      displayWidth: 0,
+      displayHeight: 0
     });
     const touch = (0, import_use_touch.useTouch)();
-    const imageRef = (0, import_vue.ref)();
-    const swipeItem = (0, import_vue.ref)();
-    const vertical = (0, import_vue.ref)(false);
-    const isLongImage = (0, import_vue.ref)(false);
-    let initialMoveY = 0;
-    const imageStyle = (0, import_vue.computed)(() => {
+    const swipeItem = (0, import_vue2.ref)();
+    const vertical = (0, import_vue2.computed)(() => {
+      const {
+        rootWidth,
+        rootHeight
+      } = props;
+      const rootRatio = rootHeight / rootWidth;
+      return state.imageRatio > rootRatio;
+    });
+    const imageStyle = (0, import_vue2.computed)(() => {
       const {
         scale,
         moveX,
         moveY,
         moving,
-        zooming,
-        initializing
+        zooming
       } = state;
       const style = {
-        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
+        transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-      if (scale !== 1 || isLongImage.value) {
-        style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
+      if (scale !== 1) {
+        const offsetX = moveX / scale;
+        const offsetY = moveY / scale;
+        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
       }
       return style;
     });
-    const maxMoveX = (0, import_vue.computed)(() => {
+    const maxMoveX = (0, import_vue2.computed)(() => {
       if (state.imageRatio) {
         const {
           rootWidth,
@@ -99,7 +94,7 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
       return 0;
     });
-    const maxMoveY = (0, import_vue.computed)(() => {
+    const maxMoveY = (0, import_vue2.computed)(() => {
       if (state.imageRatio) {
         const {
           rootWidth,
@@ -110,26 +105,10 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
       return 0;
     });
-    const setScale = (scale, center) => {
-      var _a;
+    const setScale = (scale) => {
       scale = (0, import_utils.clamp)(scale, +props.minZoom, +props.maxZoom + 1);
       if (scale !== state.scale) {
-        const ratio = scale / state.scale;
         state.scale = scale;
-        if (center) {
-          const imageRect = (0, import_use.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 = (0, import_utils.clamp)(moveX, -maxMoveX.value, maxMoveX.value);
-          state.moveY = (0, import_utils.clamp)(moveY, -maxMoveY.value, maxMoveY.value);
-        } else {
-          state.moveX = 0;
-          state.moveY = isLongImage.value ? initialMoveY : 0;
-        }
         emit("scale", {
           scale,
           index: props.active
@@ -138,44 +117,39 @@ var stdin_default = (0, import_vue.defineComponent)({
     };
     const resetScale = () => {
       setScale(1);
+      state.moveX = 0;
+      state.moveY = 0;
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale, scale === 2 || isLongImage.value ? {
-        x: touch.startX.value,
-        y: touch.startY.value
-      } : void 0);
+      setScale(scale);
+      state.moveX = 0;
+      state.moveY = 0;
     };
     let fingerNum;
     let startMoveX;
     let startMoveY;
     let startScale;
     let startDistance;
-    let lastCenter;
     let doubleTapTimer;
     let touchStartTime;
-    let isImageMoved = false;
     const onTouchStart = (event) => {
       const {
         touches
       } = event;
-      fingerNum = touches.length;
-      if (fingerNum === 2 && props.disableZoom) {
-        return;
-      }
       const {
         offsetX
       } = touch;
       touch.start(event);
+      fingerNum = touches.length;
       startMoveX = state.moveX;
       startMoveY = state.moveY;
       touchStartTime = Date.now();
-      isImageMoved = false;
-      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
+      state.moving = fingerNum === 1 && state.scale !== 1;
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
-        startDistance = getDistance(touches);
+        startDistance = getDistance(event.touches);
       }
     };
     const onTouchMove = (event) => {
@@ -183,6 +157,9 @@ var stdin_default = (0, import_vue.defineComponent)({
         touches
       } = event;
       touch.move(event);
+      if (state.moving || state.zooming) {
+        (0, import_utils.preventDefault)(event, true);
+      }
       if (state.moving) {
         const {
           deltaX,
@@ -190,60 +167,36 @@ var stdin_default = (0, import_vue.defineComponent)({
         } = touch;
         const moveX = deltaX.value + startMoveX;
         const moveY = deltaY.value + startMoveY;
-        if ((props.vertical ? touch.isVertical() && Math.abs(moveY) > maxMoveY.value : touch.isHorizontal() && Math.abs(moveX) > maxMoveX.value) && !isImageMoved) {
-          state.moving = false;
-          return;
-        }
-        isImageMoved = true;
-        (0, import_utils.preventDefault)(event, true);
         state.moveX = (0, import_utils.clamp)(moveX, -maxMoveX.value, maxMoveX.value);
         state.moveY = (0, import_utils.clamp)(moveY, -maxMoveY.value, maxMoveY.value);
       }
-      if (state.zooming) {
-        (0, import_utils.preventDefault)(event, true);
-        if (touches.length === 2) {
-          const distance = getDistance(touches);
-          const scale = startScale * distance / startDistance;
-          lastCenter = getCenter(touches);
-          setScale(scale, lastCenter);
-        }
+      if (state.zooming && touches.length === 2) {
+        const distance = getDistance(touches);
+        const scale = startScale * distance / startDistance;
+        setScale(scale);
       }
     };
-    const checkClose = (event) => {
-      var _a;
-      const swipeItemEl = (_a = swipeItem.value) == null ? void 0 : _a.$el;
-      if (!swipeItemEl) return;
-      const imageEl = swipeItemEl.firstElementChild;
-      const isClickOverlay = event.target === swipeItemEl;
-      const isClickImage = imageEl == null ? void 0 : imageEl.contains(event.target);
-      if (!props.closeOnClickImage && isClickImage) return;
-      if (!props.closeOnClickOverlay && isClickOverlay) return;
-      emit("close");
-    };
-    const checkTap = (event) => {
+    const checkTap = () => {
       if (fingerNum > 1) {
         return;
       }
+      const {
+        offsetX,
+        offsetY
+      } = touch;
       const deltaTime = Date.now() - touchStartTime;
       const TAP_TIME = 250;
-      if (touch.isTap.value) {
-        if (deltaTime < TAP_TIME) {
-          if (props.doubleScale) {
-            if (doubleTapTimer) {
-              clearTimeout(doubleTapTimer);
-              doubleTapTimer = null;
-              toggleScale();
-            } else {
-              doubleTapTimer = setTimeout(() => {
-                checkClose(event);
-                doubleTapTimer = null;
-              }, TAP_TIME);
-            }
-          } else {
-            checkClose(event);
-          }
-        } else if (deltaTime > import_utils.LONG_PRESS_START_TIME) {
-          emit("longPress");
+      const TAP_OFFSET = 5;
+      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
+        if (doubleTapTimer) {
+          clearTimeout(doubleTapTimer);
+          doubleTapTimer = null;
+          toggleScale();
+        } else {
+          doubleTapTimer = setTimeout(() => {
+            emit("close");
+            doubleTapTimer = null;
+          }, TAP_TIME);
         }
       }
     };
@@ -267,61 +220,34 @@ var stdin_default = (0, import_vue.defineComponent)({
           if (state.scale < 1) {
             resetScale();
           }
-          const maxZoom = +props.maxZoom;
-          if (state.scale > maxZoom) {
-            setScale(maxZoom, lastCenter);
+          if (state.scale > props.maxZoom) {
+            state.scale = +props.maxZoom;
           }
         }
       }
       (0, import_utils.preventDefault)(event, stopPropagation);
-      checkTap(event);
+      checkTap();
       touch.reset();
     };
-    const resize = () => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      const {
-        imageRatio
-      } = state;
-      vertical.value = state.imageRatio > rootRatio && imageRatio < longImageRatio;
-      isLongImage.value = state.imageRatio > rootRatio && imageRatio >= longImageRatio;
-      if (isLongImage.value) {
-        initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
-        state.moveY = initialMoveY;
-        state.initializing = true;
-        (0, import_use.raf)(() => {
-          state.initializing = false;
-        });
-      }
-      resetScale();
-    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
-      resize();
     };
-    (0, import_vue.watch)(() => props.active, resetScale);
-    (0, import_vue.watch)(() => props.show, (value) => {
+    (0, import_vue2.watch)(() => props.active, resetScale);
+    (0, import_vue2.watch)(() => props.show, (value) => {
       if (!value) {
         resetScale();
       }
     });
-    (0, import_vue.watch)(() => [props.rootWidth, props.rootHeight], resize);
     (0, import_use.useEventListener)("touchmove", onTouchMove, {
-      target: (0, import_vue.computed)(() => {
+      target: (0, import_vue2.computed)(() => {
         var _a;
         return (_a = swipeItem.value) == null ? void 0 : _a.$el;
       })
     });
-    (0, import_use_expose.useExpose)({
-      resetScale
-    });
     return () => {
       const imageSlots = {
         loading: () => (0, import_vue.createVNode)(import_loading.Loading, {
@@ -338,11 +264,8 @@ var stdin_default = (0, import_vue.defineComponent)({
         default: () => [slots.image ? (0, import_vue.createVNode)("div", {
           "class": bem("image-wrap")
         }, [slots.image({
-          src: props.src,
-          onLoad,
-          style: imageStyle.value
+          src: props.src
         })]) : (0, import_vue.createVNode)(import_image.Image, {
-          "ref": imageRef,
           "src": props.src,
           "fit": "contain",
           "class": bem("image", {