From 373ba04005f5773596286b95bb4147df430a8ecd Mon Sep 17 00:00:00 2001
From: Nam Nguyen <nam.nguyen.node@gmail.com>
Date: Sun, 27 Oct 2024 17:04:30 -0600
Subject: [PATCH] =?UTF-8?q?docs:=20fix=20doc's=20demo=20for=20zoom=20wheel?=
 =?UTF-8?q?=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/HomePageShow.vue | 16 ++++++++++++++--
 size.json                                     |  4 ++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/components/HomePageShow.vue b/packages/docs/src/components/HomePageShow.vue
index 31ca010c..8625e39c 100644
--- a/packages/docs/src/components/HomePageShow.vue
+++ b/packages/docs/src/components/HomePageShow.vue
@@ -88,21 +88,33 @@ const processZoom = async (zoomType: TabValue) => {
   await nextTick()
 
   if (zoomType === "hover") {
+    const isMobile = window.innerWidth < 768
+    const isTablet = window.innerWidth < 1024
     createZoomImageHover(imageHoverContainerRef.value as HTMLDivElement, {
       zoomImageSource: imageURL,
-      customZoom: { width: 300, height: 500 },
+      customZoom: isMobile
+        ? {
+            width: 150,
+            height: 200,
+          }
+        : isTablet
+          ? { width: 200, height: 300 }
+          : { width: 300, height: 400 },
       zoomTarget: zoomTargetRef.value as HTMLDivElement,
       scale: 2,
     })
   }
 
   if (zoomType === "wheel") {
-    createZoomImageWheel(imageWheelContainerRef.value as HTMLDivElement)
+    createZoomImageWheel(imageWheelContainerRef.value as HTMLDivElement, {
+      shouldZoomOnSingleTouch: () => zoomImageWheelState.currentZoom > 1,
+    })
   }
 
   if (zoomType === "move") {
     createZoomImageMove(imageMoveContainerRef.value as HTMLDivElement, {
       zoomImageSource: imageURL,
+      disabledContextMenu: true,
     })
   }
 
diff --git a/size.json b/size.json
index e75a874a..7ac05c48 100644
--- a/size.json
+++ b/size.json
@@ -35,8 +35,8 @@
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.64 KB",
     "useZoomImageHover": "1.75 KB",
-    "useZoomImageMove": "1.49 KB",
-    "useZoomImageClick": "1.39 KB"
+    "useZoomImageMove": "1.5 KB",
+    "useZoomImageClick": "1.4 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.42 KB",