@fy-/fws-vue 2.0.83 → 2.0.85

package/components/ui/DefaultGallery.vue

@@ -12,6 +12,7 @@ import {
 } from "@heroicons/vue/24/solid";
 import DefaultPaging from "./DefaultPaging.vue";
 import type { Component } from "vue";
+import CollapseTransition from "./transitions/CollapseTransition.vue";
 const isGalleryOpen = ref<boolean>(false);
 const eventBus = useEventBus();
 const sidePanel = ref<boolean>(true);
@@ -98,6 +99,7 @@ const modelValueSrc = computed(() => {
 const start = reactive({ x: 0, y: 0 });
 
 const touchStart = (event: TouchEvent) => {
+  event.preventDefault();
   const touch = event.touches[0];
   start.x = touch.screenX;
   start.y = touch.screenY;
@@ -110,7 +112,8 @@ const touchEnd = (event: TouchEvent) => {
   const diffX = start.x - end.x;
   const diffY = start.y - end.y;
 
-  if (Math.abs(diffX) > Math.abs(diffY)) {
+  // Add a threshold to prevent accidental swipes
+  if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
     if (diffX > 0) {
       goNextImage();
     } else {
@@ -118,6 +121,7 @@ const touchEnd = (event: TouchEvent) => {
     }
   }
 };
+
 const getBorderColor = (i: any) => {
   if (props.borderColor !== undefined) {
     return props.borderColor(i);
@@ -215,42 +219,40 @@ onUnmounted(() => {
                 </div>
                 <div
                   class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)]"
+                  @touchstart="touchStart"
+                  @touchend="touchEnd"
                 >
                   <div
                     class="flex-1 w-full max-w-full flex items-center justify-center"
                   >
-                    <template
-                      v-if="videoComponent && isVideo(images[modelValue])"
-                    >
-                      <ClientOnly>
+                    <CollapseTransition>
+                      <template
+                        v-if="videoComponent && isVideo(images[modelValue])"
+                      >
+                        <ClientOnly>
+                          <component
+                            :is="videoComponent"
+                            :src="isVideo(images[modelValue])"
+                            class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                          />
+                        </ClientOnly>
+                      </template>
+                      <template v-else>
+                        <img
+                          class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                          :src="modelValueSrc"
+                          v-if="modelValueSrc && imageComponent == 'img'"
+                        />
                         <component
-                          :is="videoComponent"
-                          :src="isVideo(images[modelValue])"
+                          v-else-if="modelValueSrc && imageComponent"
+                          :is="imageComponent"
+                          :image="modelValueSrc.image"
+                          :variant="modelValueSrc.variant"
+                          :alt="modelValueSrc.alt"
                           class="shadow max-w-full h-auto object-contain max-h-[85vh]"
-                          @touchstart="touchStart"
-                          @touchend="touchEnd"
                         />
-                      </ClientOnly>
-                    </template>
-                    <template v-else>
-                      <img
-                        class="shadow max-w-full h-auto object-contain max-h-[85vh]"
-                        :src="modelValueSrc"
-                        v-if="modelValueSrc && imageComponent == 'img'"
-                        @touchstart="touchStart"
-                        @touchend="touchEnd"
-                      />
-                      <component
-                        v-else-if="modelValueSrc && imageComponent"
-                        :is="imageComponent"
-                        :image="modelValueSrc.image"
-                        :variant="modelValueSrc.variant"
-                        :alt="modelValueSrc.alt"
-                        @touchstart="touchStart"
-                        @touchend="touchEnd"
-                        class="shadow max-w-full h-auto object-contain max-h-[85vh]"
-                      />
-                    </template>
+                      </template>
+                    </CollapseTransition>
                   </div>
                   <div
                     class="flex-0 py-2 flex items-center justify-center max-w-full w-full"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.0.83",
+  "version": "2.0.85",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {