vant 4.3.2 → 4.4.1

package/lib/image-preview/ImagePreviewItem.js

@@ -34,6 +34,7 @@ const getCenter = (touches) => ({
   y: (touches[0].clientY + touches[1].clientY) / 2
 });
 const bem = (0, import_utils.createNamespace)("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default = (0, import_vue2.defineComponent)({
   props: {
     src: String,
@@ -56,33 +57,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      initializing: false,
+      imageRatio: 0
     });
     const touch = (0, import_use_touch.useTouch)();
     const imageRef = (0, import_vue2.ref)();
     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 vertical = (0, import_vue2.ref)(false);
+    const isLongImage = (0, import_vue2.ref)(false);
+    let initialMoveY = 0;
     const imageStyle = (0, import_vue2.computed)(() => {
       const {
         scale,
         moveX,
         moveY,
         moving,
-        zooming
+        zooming,
+        initializing
       } = state;
       const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
+        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
       };
-      if (scale !== 1) {
+      if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
@@ -127,7 +123,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           state.moveY = (0, import_utils.clamp)(moveY, -maxMoveY.value, maxMoveY.value);
         } else {
           state.moveX = 0;
-          state.moveY = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
         }
         emit("scale", {
           scale,
@@ -140,7 +136,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale, scale === 2 ? {
+      setScale(scale, scale === 2 || isLongImage.value ? {
         x: touch.startX.value,
         y: touch.startY.value
       } : void 0);
@@ -170,7 +166,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       startMoveY = state.moveY;
       touchStartTime = Date.now();
       isImageMoved = false;
-      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
@@ -266,12 +262,34 @@ var stdin_default = (0, import_vue2.defineComponent)({
       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_vue2.watch)(() => props.active, resetScale);
     (0, import_vue2.watch)(() => props.show, (value) => {
@@ -279,6 +297,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         resetScale();
       }
     });
+    (0, import_vue2.watch)(() => [props.rootWidth, props.rootHeight], resize);
     (0, import_use.useEventListener)("touchmove", onTouchMove, {
       target: (0, import_vue2.computed)(() => {
         var _a;

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

@@ -129,7 +129,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
     maxZoom: string | number;
     images: string[];
     showIndex: boolean;
-}>>;
+}, {}>>;
 export default ImagePreview;
 export { imagePreviewProps } from './ImagePreview';
 export { showImagePreview } from './function-call';

package/lib/index-anchor/IndexAnchor.d.ts

@@ -7,5 +7,5 @@ declare const _default: import("vue").DefineComponent<{
     index: (NumberConstructor | StringConstructor)[];
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     index: (NumberConstructor | StringConstructor)[];
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/lib/index-anchor/index.d.ts

@@ -2,7 +2,7 @@ export declare const IndexAnchor: import("../utils").WithInstall<import("vue").D
     index: (NumberConstructor | StringConstructor)[];
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     index: (NumberConstructor | StringConstructor)[];
-}>>, {}>>;
+}>>, {}, {}>>;
 export default IndexAnchor;
 export { indexAnchorProps } from './IndexAnchor';
 export type { IndexAnchorProps } from './IndexAnchor';

package/lib/index-bar/IndexBar.d.ts

@@ -60,5 +60,5 @@ declare const _default: import("vue").DefineComponent<{
     sticky: boolean;
     stickyOffsetTop: number;
     indexList: Numeric[];
-}>;
+}, {}>;
 export default _default;

package/lib/index-bar/index.d.ts

@@ -38,7 +38,7 @@ export declare const IndexBar: import("../utils").WithInstall<import("vue").Defi
     sticky: boolean;
     stickyOffsetTop: number;
     indexList: import("../utils").Numeric[];
-}>>;
+}, {}>>;
 export default IndexBar;
 export { indexBarProps } from './IndexBar';
 export type { IndexBarProps };