vant 3.3.6 → 3.4.2

package/es/image-preview/ImagePreviewItem.js

@@ -1,18 +1,13 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import { watch, computed, reactive, defineComponent } from 'vue'; // Utils
-
-import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from '../utils'; // Composables
-
-import { useTouch } from '../composables/use-touch'; // Components
-
-import { Image } from '../image';
-import { Loading } from '../loading';
-import { SwipeItem } from '../swipe-item';
-
-var getDistance = touches => Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
-
-var bem = createNamespace('image-preview')[1];
-export default defineComponent({
+import { createVNode as _createVNode } from "vue";
+import { watch, computed, reactive, defineComponent } from "vue";
+import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp } from "../utils";
+import { useTouch } from "../composables/use-touch";
+import { Image } from "../image";
+import { Loading } from "../loading";
+import { SwipeItem } from "../swipe-item";
+const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+const bem = createNamespace("image-preview")[1];
+var stdin_default = defineComponent({
   props: {
     src: String,
     show: Boolean,
@@ -22,13 +17,11 @@ export default defineComponent({
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number)
   },
-  emits: ['scale', 'close'],
-
-  setup(props, _ref) {
-    var {
-      emit
-    } = _ref;
-    var state = reactive({
+  emits: ["scale", "close"],
+  setup(props, {
+    emit
+  }) {
+    const state = reactive({
       scale: 1,
       moveX: 0,
       moveY: 0,
@@ -38,149 +31,137 @@ export default defineComponent({
       displayWidth: 0,
       displayHeight: 0
     });
-    var touch = useTouch();
-    var vertical = computed(() => {
-      var {
+    const touch = useTouch();
+    const vertical = computed(() => {
+      const {
         rootWidth,
         rootHeight
       } = props;
-      var rootRatio = rootHeight / rootWidth;
+      const rootRatio = rootHeight / rootWidth;
       return state.imageRatio > rootRatio;
     });
-    var imageStyle = computed(() => {
-      var {
+    const imageStyle = computed(() => {
+      const {
         scale,
         moveX,
         moveY,
         moving,
         zooming
       } = state;
-      var style = {
-        transitionDuration: zooming || moving ? '0s' : '.3s'
+      const style = {
+        transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-
       if (scale !== 1) {
-        var offsetX = moveX / scale;
-        var offsetY = moveY / scale;
-        style.transform = "scale(" + scale + ", " + scale + ") translate(" + offsetX + "px, " + offsetY + "px)";
+        const offsetX = moveX / scale;
+        const offsetY = moveY / scale;
+        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
       }
-
       return style;
     });
-    var maxMoveX = computed(() => {
+    const maxMoveX = computed(() => {
       if (state.imageRatio) {
-        var {
+        const {
           rootWidth,
           rootHeight
         } = props;
-        var displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
+        const displayWidth = vertical.value ? rootHeight / state.imageRatio : rootWidth;
         return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
       }
-
       return 0;
     });
-    var maxMoveY = computed(() => {
+    const maxMoveY = computed(() => {
       if (state.imageRatio) {
-        var {
+        const {
           rootWidth,
           rootHeight
         } = props;
-        var displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
+        const displayHeight = vertical.value ? rootHeight : rootWidth * state.imageRatio;
         return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
       }
-
       return 0;
     });
-
-    var setScale = scale => {
-      scale = clamp(scale, +props.minZoom, +props.maxZoom);
-
+    const setScale = (scale) => {
+      scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
       if (scale !== state.scale) {
         state.scale = scale;
-        emit('scale', {
+        emit("scale", {
           scale,
           index: props.active
         });
       }
     };
-
-    var resetScale = () => {
+    const resetScale = () => {
       setScale(1);
       state.moveX = 0;
       state.moveY = 0;
     };
-
-    var toggleScale = () => {
-      var scale = state.scale > 1 ? 1 : 2;
+    const toggleScale = () => {
+      const scale = state.scale > 1 ? 1 : 2;
       setScale(scale);
       state.moveX = 0;
       state.moveY = 0;
     };
-
-    var startMoveX;
-    var startMoveY;
-    var startScale;
-    var startDistance;
-    var doubleTapTimer;
-    var touchStartTime;
-
-    var onTouchStart = event => {
-      var {
+    let fingerNum;
+    let startMoveX;
+    let startMoveY;
+    let startScale;
+    let startDistance;
+    let doubleTapTimer;
+    let touchStartTime;
+    const onTouchStart = (event) => {
+      const {
         touches
       } = event;
-      var {
+      const {
         offsetX
       } = touch;
       touch.start(event);
+      fingerNum = touches.length;
       startMoveX = state.moveX;
       startMoveY = state.moveY;
       touchStartTime = Date.now();
-      state.moving = touches.length === 1 && state.scale !== 1;
-      state.zooming = touches.length === 2 && !offsetX.value;
-
+      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
         startDistance = getDistance(event.touches);
       }
     };
-
-    var onTouchMove = event => {
-      var {
+    const onTouchMove = (event) => {
+      const {
         touches
       } = event;
       touch.move(event);
-
       if (state.moving || state.zooming) {
         preventDefault(event, true);
       }
-
       if (state.moving) {
-        var {
+        const {
           deltaX,
           deltaY
         } = touch;
-        var moveX = deltaX.value + startMoveX;
-        var moveY = deltaY.value + startMoveY;
+        const moveX = deltaX.value + startMoveX;
+        const moveY = deltaY.value + startMoveY;
         state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
         state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
       }
-
       if (state.zooming && touches.length === 2) {
-        var distance = getDistance(touches);
-        var scale = startScale * distance / startDistance;
+        const distance = getDistance(touches);
+        const scale = startScale * distance / startDistance;
         setScale(scale);
       }
     };
-
-    var checkTap = () => {
-      var {
+    const checkTap = () => {
+      if (fingerNum > 1) {
+        return;
+      }
+      const {
         offsetX,
         offsetY
       } = touch;
-      var deltaTime = Date.now() - touchStartTime;
-      var TAP_TIME = 250;
-      var TAP_OFFSET = 10;
-
+      const deltaTime = Date.now() - touchStartTime;
+      const TAP_TIME = 250;
+      const TAP_OFFSET = 5;
       if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
         if (doubleTapTimer) {
           clearTimeout(doubleTapTimer);
@@ -188,70 +169,62 @@ export default defineComponent({
           toggleScale();
         } else {
           doubleTapTimer = setTimeout(() => {
-            emit('close');
+            emit("close");
             doubleTapTimer = null;
           }, TAP_TIME);
         }
       }
     };
-
-    var onTouchEnd = event => {
-      var stopPropagation = false;
-      /* istanbul ignore else */
-
+    const onTouchEnd = (event) => {
+      let stopPropagation = false;
       if (state.moving || state.zooming) {
         stopPropagation = true;
-
         if (state.moving && startMoveX === state.moveX && startMoveY === state.moveY) {
           stopPropagation = false;
         }
-
         if (!event.touches.length) {
           if (state.zooming) {
             state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
             state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
             state.zooming = false;
           }
-
           state.moving = false;
           startMoveX = 0;
           startMoveY = 0;
           startScale = 1;
-
           if (state.scale < 1) {
             resetScale();
           }
+          if (state.scale > props.maxZoom) {
+            state.scale = +props.maxZoom;
+          }
         }
-      } // eliminate tap delay on safari
-
-
+      }
       preventDefault(event, stopPropagation);
       checkTap();
       touch.reset();
     };
-
-    var onLoad = event => {
-      var {
+    const onLoad = (event) => {
+      const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
     };
-
     watch(() => props.active, resetScale);
-    watch(() => props.show, value => {
+    watch(() => props.show, (value) => {
       if (!value) {
         resetScale();
       }
     });
     return () => {
-      var imageSlots = {
+      const imageSlots = {
         loading: () => _createVNode(Loading, {
           "type": "spinner"
         }, null)
       };
       return _createVNode(SwipeItem, {
-        "class": bem('swipe-item'),
+        "class": bem("swipe-item"),
         "onTouchstart": onTouchStart,
         "onTouchmove": onTouchMove,
         "onTouchend": onTouchEnd,
@@ -260,7 +233,7 @@ export default defineComponent({
         default: () => [_createVNode(Image, {
           "src": props.src,
           "fit": "contain",
-          "class": bem('image', {
+          "class": bem("image", {
             vertical: vertical.value
           }),
           "style": imageStyle.value,
@@ -269,5 +242,7 @@ export default defineComponent({
       });
     };
   }
-
-});
+});
+export {
+  stdin_default as default
+};

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

@@ -37,6 +37,7 @@ declare const ImagePreview: {
         };
         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)[];
@@ -55,46 +56,60 @@ declare const ImagePreview: {
             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/runtime-core").ComponentCustomProps, Readonly<{
-        show?: unknown;
-        loop?: unknown;
-        images?: unknown;
-        minZoom?: unknown;
-        maxZoom?: unknown;
-        overlay?: unknown;
-        closeable?: unknown;
-        showIndex?: unknown;
-        className?: unknown;
-        closeIcon?: unknown;
-        transition?: unknown;
-        beforeClose?: unknown;
-        overlayStyle?: unknown;
-        swipeDuration?: unknown;
-        startPosition?: unknown;
-        showIndicators?: unknown;
-        closeOnPopstate?: unknown;
-        closeIconPosition?: unknown;
-    } & {
-        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;
-    } & {
-        beforeClose?: import("../utils").Interceptor | undefined;
-        overlayStyle?: import("vue").CSSProperties | undefined;
-        className?: unknown;
-        transition?: string | undefined;
-    }> & {
+    }, () => 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;

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

@@ -1,68 +1,57 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { extend, inBrowser, withInstall } from '../utils';
-import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanImagePreview from './ImagePreview';
-var instance;
-var defaultConfig = {
+import { extend, inBrowser, withInstall } from "../utils";
+import { mountComponent, usePopupState } from "../utils/mount-component";
+import VanImagePreview from "./ImagePreview";
+let instance;
+const defaultConfig = {
   loop: true,
   images: [],
   maxZoom: 3,
   minZoom: 1 / 3,
-  onScale: undefined,
-  onClose: undefined,
-  onChange: undefined,
-  teleport: 'body',
-  className: '',
+  onScale: void 0,
+  onClose: void 0,
+  onChange: void 0,
+  teleport: "body",
+  className: "",
   showIndex: true,
   closeable: false,
-  closeIcon: 'clear',
-  transition: undefined,
-  beforeClose: undefined,
-  overlayStyle: undefined,
+  closeIcon: "clear",
+  transition: void 0,
+  beforeClose: void 0,
+  overlayStyle: void 0,
+  overlayClass: void 0,
   startPosition: 0,
   swipeDuration: 300,
   showIndicators: false,
   closeOnPopstate: true,
-  closeIconPosition: 'top-right'
+  closeIconPosition: "top-right"
 };
-
 function initInstance() {
   ({
     instance
   } = mountComponent({
     setup() {
-      var {
+      const {
         state,
         toggle
       } = usePopupState();
-
-      var onClosed = () => {
+      const onClosed = () => {
         state.images = [];
       };
-
       return () => _createVNode(VanImagePreview, _mergeProps(state, {
         "onClosed": onClosed,
         "onUpdate:show": toggle
       }), null);
     }
-
   }));
 }
-
-var ImagePreview = function (options, startPosition) {
-  if (startPosition === void 0) {
-    startPosition = 0;
-  }
-
-  /* istanbul ignore if */
+const ImagePreview = (options, startPosition = 0) => {
   if (!inBrowser) {
     return;
   }
-
   if (!instance) {
     initInstance();
   }
-
   options = Array.isArray(options) ? {
     images: options,
     startPosition
@@ -70,11 +59,10 @@ var ImagePreview = function (options, startPosition) {
   instance.open(extend({}, defaultConfig, options));
   return instance;
 };
-
 ImagePreview.Component = withInstall(VanImagePreview);
-
-ImagePreview.install = app => {
+ImagePreview.install = (app) => {
   app.use(ImagePreview.Component);
 };
-
-export { ImagePreview };
+export {
+  ImagePreview
+};

package/es/image-preview/index.css

@@ -1 +1 @@
-: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, 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{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .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%,0)}.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);cursor:pointer}.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{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .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);cursor:pointer}.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)}

package/es/image-preview/index.d.ts

@@ -4,3 +4,8 @@ export default ImagePreview;
 export { ImagePreview };
 export type { ImagePreviewProps };
 export type { ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanImagePreview: typeof ImagePreview.Component;
+    }
+}

package/es/image-preview/index.js

@@ -1,3 +1,6 @@
-import { ImagePreview } from './function-call';
-export default ImagePreview;
-export { ImagePreview };
+import { ImagePreview } from "./function-call";
+var stdin_default = ImagePreview;
+export {
+  ImagePreview,
+  stdin_default as default
+};

package/es/image-preview/style/index.js

@@ -1,10 +1,10 @@
-import '../../style/base.css';
-import '../../badge/index.css';
-import '../../icon/index.css';
-import '../../image/index.css';
-import '../../loading/index.css';
-import '../../overlay/index.css';
-import '../../popup/index.css';
-import '../../swipe/index.css';
-import '../../swipe-item/index.css';
-import '../index.css';
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../image/index.css";
+import "../../loading/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../swipe/index.css";
+import "../../swipe-item/index.css";
+import "../index.css";

package/es/image-preview/style/less.js

@@ -1,10 +1,10 @@
-import '../../style/base.less';
-import '../../badge/index.less';
-import '../../icon/index.less';
-import '../../image/index.less';
-import '../../loading/index.less';
-import '../../overlay/index.less';
-import '../../popup/index.less';
-import '../../swipe/index.less';
-import '../../swipe-item/index.less';
-import '../index.less';
+import "../../style/base.less";
+import "../../badge/index.less";
+import "../../icon/index.less";
+import "../../image/index.less";
+import "../../loading/index.less";
+import "../../overlay/index.less";
+import "../../popup/index.less";
+import "../../swipe/index.less";
+import "../../swipe-item/index.less";
+import "../index.less";

package/es/image-preview/types.d.ts

@@ -16,6 +16,7 @@ export declare type ImagePreviewOptions = {
     transition?: string;
     beforeClose?: Interceptor;
     overlayStyle?: CSSProperties;
+    overlayClass?: unknown;
     swipeDuration?: number;
     startPosition?: number;
     showIndicators?: boolean;

package/es/image-preview/types.js

@@ -1 +0,0 @@
-export {};