@fy-/fws-vue 2.0.89 → 2.0.92

package/components/ui/DefaultGallery.vue

@@ -12,7 +12,6 @@ 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();
@@ -65,7 +64,7 @@ const modelValue = computed({
   },
 });
 
-const direction = ref<"left" | "right">("right");
+const direction = ref<"next" | "prev">("next");
 
 const setModal = (value: boolean) => {
   if (value === true) {
@@ -85,7 +84,7 @@ const openGalleryImage = (index: number | undefined) => {
 };
 
 const goNextImage = () => {
-  direction.value = "right";
+  direction.value = "next";
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++;
   } else {
@@ -94,7 +93,7 @@ const goNextImage = () => {
 };
 
 const goPrevImage = () => {
-  direction.value = "left";
+  direction.value = "prev";
   if (modelValue.value > 0) {
     modelValue.value--;
   } else {
@@ -128,10 +127,10 @@ const touchEnd = (event: TouchEvent) => {
   // Add a threshold to prevent accidental swipes
   if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
     if (diffX > 0) {
-      direction.value = "right";
+      direction.value = "next";
       goNextImage();
     } else {
-      direction.value = "left";
+      direction.value = "prev";
       goPrevImage();
     }
   }
@@ -151,12 +150,12 @@ const handleKeyboardInput = (event: KeyboardEvent) => {
   switch (event.key) {
     case "ArrowRight":
       isKeyPressed.value = true;
-      direction.value = "right";
+      direction.value = "next";
       goNextImage();
       break;
     case "ArrowLeft":
       isKeyPressed.value = true;
-      direction.value = "left";
+      direction.value = "prev";
       goPrevImage();
       break;
     default:
@@ -242,15 +241,18 @@ onUnmounted(() => {
                   </button>
                 </div>
                 <div
-                  class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] overflow-hidden"
+                  class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative overflow-hidden"
                   @touchstart="touchStart"
                   @touchend="touchEnd"
                 >
-                  <transition :name="`slide-${direction}`">
+                  <transition
+                    :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
+                    mode="out-in"
+                  >
                     <div
                       v-if="true"
                       :key="`image-display-${modelValue}`"
-                      class="flex-1 w-full max-w-full flex flex-col items-center justify-center"
+                      class="flex-1 w-full max-w-full flex flex-col items-center justify-center absolute inset-0"
                     >
                       <div
                         class="flex-1 w-full max-w-full flex items-center justify-center"
@@ -367,6 +369,7 @@ onUnmounted(() => {
         </DialogPanel>
       </Dialog>
     </TransitionRoot>
+
     <template v-if="mode == 'grid' || mode == 'mason' || mode == 'custom'">
       <div
         :class="{
@@ -455,27 +458,32 @@ onUnmounted(() => {
 .slide-next-leave-active {
   transition:
     opacity 0.5s,
-    transform 0.5s;
+    transform 0.5s,
+    filter 0.5s;
 }
 
 .slide-next-enter-from {
   opacity: 0;
   transform: translateX(100%);
+  filter: blur(10px);
 }
 
 .slide-next-enter-to {
   opacity: 1;
   transform: translateX(0);
+  filter: blur(0);
 }
 
 .slide-next-leave-from {
   opacity: 1;
   transform: translateX(0);
+  filter: blur(0);
 }
 
 .slide-next-leave-to {
   opacity: 0;
   transform: translateX(-100%);
+  filter: blur(10px);
 }
 
 /* Transition styles for prev (left) navigation */
@@ -483,53 +491,46 @@ onUnmounted(() => {
 .slide-prev-leave-active {
   transition:
     opacity 0.5s,
-    transform 0.5s;
+    transform 0.5s,
+    filter 0.5s;
 }
 
 .slide-prev-enter-from {
   opacity: 0;
   transform: translateX(-100%);
+  filter: blur(10px);
 }
 
 .slide-prev-enter-to {
   opacity: 1;
   transform: translateX(0);
+  filter: blur(0);
 }
 
 .slide-prev-leave-from {
   opacity: 1;
   transform: translateX(0);
+  filter: blur(0);
 }
 
 .slide-prev-leave-to {
   opacity: 0;
   transform: translateX(100%);
-}
-</style>
-<style scoped>
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: transform 0.3s ease;
-}
-.slide-left-enter-from,
-.slide-left-leave-to {
-  transform: translateX(100%);
-}
-.slide-left-enter-to,
-.slide-left-leave-from {
-  transform: translateX(0);
+  filter: blur(10px);
 }
 
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: transform 0.3s ease;
-}
-.slide-right-enter-from,
-.slide-right-leave-to {
-  transform: translateX(-100%);
+/* Ensure the images are positioned correctly to prevent overlap */
+.relative-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
-.slide-right-enter-to,
-.slide-right-leave-from {
-  transform: translateX(0);
+
+.relative-container > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 </style>

package/package.json

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