vant 3.6.14 → 3.6.16

package/es/image-preview/ImagePreviewItem.mjs

@@ -1,35 +1,24 @@
-import { ref, watch, computed, reactive, defineComponent, createVNode as _createVNode } from "vue";
-import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp, LONG_PRESS_START_TIME } from "../utils/index.mjs";
-import { useExpose } from "../composables/use-expose.mjs";
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, computed, reactive, defineComponent } from "vue";
+import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
 import { useTouch } from "../composables/use-touch.mjs";
-import { raf, useEventListener, useRect } from "@vant/use";
+import { useEventListener } from "@vant/use";
 import { Image } from "../image/index.mjs";
 import { Loading } from "../loading/index.mjs";
 import { SwipeItem } from "../swipe-item/index.mjs";
 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 = createNamespace("image-preview")[1];
-const longImageRatio = 2.6;
-const imagePreviewItemProps = {
-  src: String,
-  show: Boolean,
-  active: Number,
-  minZoom: makeRequiredProp(numericProp),
-  maxZoom: makeRequiredProp(numericProp),
-  rootWidth: makeRequiredProp(Number),
-  rootHeight: makeRequiredProp(Number),
-  disableZoom: Boolean,
-  doubleScale: Boolean,
-  closeOnClickImage: Boolean,
-  closeOnClickOverlay: Boolean,
-  vertical: Boolean
-};
 var stdin_default = defineComponent({
-  props: imagePreviewItemProps,
-  emits: ["scale", "close", "longPress"],
+  props: {
+    src: String,
+    show: Boolean,
+    active: Number,
+    minZoom: makeRequiredProp(numericProp),
+    maxZoom: makeRequiredProp(numericProp),
+    rootWidth: makeRequiredProp(Number),
+    rootHeight: makeRequiredProp(Number)
+  },
+  emits: ["scale", "close"],
   setup(props, {
     emit,
     slots
@@ -40,29 +29,35 @@ var stdin_default = defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
-      initializing: false,
-      imageRatio: 0
+      imageRatio: 0,
+      displayWidth: 0,
+      displayHeight: 0
     });
     const touch = useTouch();
-    const imageRef = ref();
     const swipeItem = ref();
-    const vertical = ref(false);
-    const isLongImage = ref(false);
-    let initialMoveY = 0;
+    const vertical = computed(() => {
+      const {
+        rootWidth,
+        rootHeight
+      } = props;
+      const rootRatio = rootHeight / rootWidth;
+      return state.imageRatio > rootRatio;
+    });
     const imageStyle = 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;
     });
@@ -88,26 +83,10 @@ var stdin_default = defineComponent({
       }
       return 0;
     });
-    const setScale = (scale, center) => {
-      var _a;
+    const setScale = (scale) => {
       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 = isLongImage.value ? initialMoveY : 0;
-        }
         emit("scale", {
           scale,
           index: props.active
@@ -116,44 +95,39 @@ var stdin_default = 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) => {
@@ -161,6 +135,9 @@ var stdin_default = defineComponent({
         touches
       } = event;
       touch.move(event);
+      if (state.moving || state.zooming) {
+        preventDefault(event, true);
+      }
       if (state.moving) {
         const {
           deltaX,
@@ -168,60 +145,36 @@ var stdin_default = 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;
-        preventDefault(event, true);
         state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
         state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
       }
-      if (state.zooming) {
-        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 > 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);
         }
       }
     };
@@ -245,44 +198,21 @@ var stdin_default = 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;
           }
         }
       }
       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;
-        raf(() => {
-          state.initializing = false;
-        });
-      }
-      resetScale();
-    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
-      resize();
     };
     watch(() => props.active, resetScale);
     watch(() => props.show, (value) => {
@@ -290,16 +220,12 @@ var stdin_default = defineComponent({
         resetScale();
       }
     });
-    watch(() => [props.rootWidth, props.rootHeight], resize);
     useEventListener("touchmove", onTouchMove, {
       target: computed(() => {
         var _a;
         return (_a = swipeItem.value) == null ? void 0 : _a.$el;
       })
     });
-    useExpose({
-      resetScale
-    });
     return () => {
       const imageSlots = {
         loading: () => _createVNode(Loading, {
@@ -316,11 +242,8 @@ var stdin_default = defineComponent({
         default: () => [slots.image ? _createVNode("div", {
           "class": bem("image-wrap")
         }, [slots.image({
-          src: props.src,
-          onLoad,
-          style: imageStyle.value
+          src: props.src
         })]) : _createVNode(Image, {
-          "ref": imageRef,
           "src": props.src,
           "fit": "contain",
           "class": bem("image", {

package/es/image-preview/function-call.d.ts

@@ -1,6 +1,136 @@
 import { ComponentInstance } from '../utils';
+import type { App } from 'vue';
 import type { ImagePreviewOptions } from './types';
-/**
- * Display a full-screen image preview component
- */
-export declare const showImagePreview: (options: string[] | ImagePreviewOptions, startPosition?: number) => ComponentInstance | undefined;
+declare const ImagePreview: {
+    (options: string[] | ImagePreviewOptions, startPosition?: number): ComponentInstance | undefined;
+    Component: import("../utils").WithInstall<import("vue").DefineComponent<{
+        show: BooleanConstructor;
+        loop: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        images: {
+            type: import("vue").PropType<string[]>;
+            default: () => never[];
+        };
+        minZoom: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        maxZoom: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        overlay: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        closeable: BooleanConstructor;
+        showIndex: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        className: import("vue").PropType<unknown>;
+        closeIcon: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        transition: StringConstructor;
+        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+        overlayClass: import("vue").PropType<unknown>;
+        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+        swipeDuration: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        startPosition: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        showIndicators: BooleanConstructor;
+        closeOnPopstate: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        closeIconPosition: {
+            type: import("vue").PropType<import("..").PopupCloseIconPosition>;
+            default: import("..").PopupCloseIconPosition;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        show: BooleanConstructor;
+        loop: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        images: {
+            type: import("vue").PropType<string[]>;
+            default: () => never[];
+        };
+        minZoom: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        maxZoom: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        overlay: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        closeable: BooleanConstructor;
+        showIndex: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        className: import("vue").PropType<unknown>;
+        closeIcon: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        transition: StringConstructor;
+        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+        overlayClass: import("vue").PropType<unknown>;
+        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+        swipeDuration: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        startPosition: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: number;
+        };
+        showIndicators: BooleanConstructor;
+        closeOnPopstate: {
+            type: BooleanConstructor;
+            default: true;
+        };
+        closeIconPosition: {
+            type: import("vue").PropType<import("..").PopupCloseIconPosition>;
+            default: import("..").PopupCloseIconPosition;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onClose?: ((...args: any[]) => any) | undefined;
+        onClosed?: ((...args: any[]) => any) | undefined;
+        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+        onScale?: ((...args: any[]) => any) | undefined;
+    }, {
+        loop: boolean;
+        overlay: boolean;
+        show: boolean;
+        closeIcon: string;
+        closeable: boolean;
+        closeOnPopstate: boolean;
+        closeIconPosition: import("..").PopupCloseIconPosition;
+        swipeDuration: string | number;
+        showIndicators: boolean;
+        startPosition: string | number;
+        minZoom: string | number;
+        maxZoom: string | number;
+        images: string[];
+        showIndex: boolean;
+    }>>;
+    install(app: App): void;
+};
+export { ImagePreview };

package/es/image-preview/function-call.mjs

@@ -1,5 +1,5 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { extend, inBrowser } from "../utils/index.mjs";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { extend, inBrowser, withInstall } from "../utils/index.mjs";
 import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
 import VanImagePreview from "./ImagePreview.mjs";
 let instance;
@@ -11,7 +11,6 @@ const defaultConfig = {
   onScale: void 0,
   onClose: void 0,
   onChange: void 0,
-  vertical: false,
   teleport: "body",
   className: "",
   showIndex: true,
@@ -19,14 +18,12 @@ const defaultConfig = {
   closeIcon: "clear",
   transition: void 0,
   beforeClose: void 0,
-  doubleScale: true,
   overlayStyle: void 0,
   overlayClass: void 0,
   startPosition: 0,
   swipeDuration: 300,
   showIndicators: false,
   closeOnPopstate: true,
-  closeOnClickOverlay: true,
   closeIconPosition: "top-right"
 };
 function initInstance() {
@@ -48,7 +45,7 @@ function initInstance() {
     }
   }));
 }
-const showImagePreview = (options, startPosition = 0) => {
+const ImagePreview = (options, startPosition = 0) => {
   if (!inBrowser) {
     return;
   }
@@ -62,6 +59,10 @@ const showImagePreview = (options, startPosition = 0) => {
   instance.open(extend({}, defaultConfig, options));
   return instance;
 };
+ImagePreview.Component = withInstall(VanImagePreview);
+ImagePreview.install = (app) => {
+  app.use(ImagePreview.Component);
+};
 export {
-  showImagePreview
+  ImagePreview
 };

package/es/image-preview/index.css

@@ -1 +1 @@
-:root,:host{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+:root{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}