@fy-/fws-vue 2.0.85 → 2.0.87

package/components/ui/DefaultGallery.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { Dialog, DialogPanel, TransitionRoot } from "@headlessui/vue";
-import { ref, onMounted, reactive, onUnmounted, h, computed } from "vue";
+import {
+  ref,
+  onMounted,
+  reactive,
+  onUnmounted,
+  h,
+  computed,
+  defineComponent,
+} from "vue";
 import type { APIPaging } from "../../composables/rest";
 import { useEventBus } from "../../composables/event-bus";
 import {
@@ -12,10 +20,11 @@ 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);
+const direction = ref("next"); // Possible values: 'next' or 'prev'
+
 const props = withDefaults(
   defineProps<{
     id: string;
@@ -70,20 +79,25 @@ const setModal = (value: boolean) => {
   isGalleryOpen.value = value;
 };
 const openGalleryImage = (index: number | undefined) => {
-  if (index === undefined) modelValue.value = 0;
-  else {
+  if (index === undefined) {
+    modelValue.value = 0;
+  } else {
+    direction.value = index > modelValue.value ? "next" : "prev";
     modelValue.value = parseInt(index.toString());
   }
   setModal(true);
 };
 const goNextImage = () => {
+  direction.value = "next";
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++;
   } else {
     modelValue.value = 0;
   }
 };
+
 const goPrevImage = () => {
+  direction.value = "prev";
   if (modelValue.value > 0) {
     modelValue.value--;
   } else {
@@ -91,6 +105,7 @@ const goPrevImage = () => {
       props.images.length - 1 > 0 ? props.images.length - 1 : 0;
   }
 };
+
 const modelValueSrc = computed(() => {
   if (props.images.length == 0) return false;
   if (props.images[modelValue.value] == undefined) return false;
@@ -115,8 +130,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 = "next";
       goNextImage();
     } else {
+      direction.value = "prev";
       goPrevImage();
     }
   }
@@ -134,16 +151,19 @@ const handleKeyboardInput = (event: KeyboardEvent) => {
   switch (event.key) {
     case "ArrowRight":
       isKeyPressed.value = true;
+      direction.value = "next";
       goNextImage();
       break;
     case "ArrowLeft":
       isKeyPressed.value = true;
+      direction.value = "prev";
       goPrevImage();
       break;
     default:
       break;
   }
 };
+
 const handleKeyboardRelease = (event: KeyboardEvent) => {
   if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
     isKeyPressed.value = false;
@@ -170,6 +190,51 @@ onUnmounted(() => {
     window.removeEventListener("keyup", handleKeyboardRelease);
   }
 });
+const transitionName = computed(() => {
+  return direction.value === "next" ? "slide-next" : "slide-prev";
+});
+
+const ImageComponent = defineComponent({
+  props: ["src", "imageComponent", "modelValueSrc"],
+  template: `
+    <div v-if="src" class="media-wrapper">
+      <img
+        class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+        :src="modelValueSrc"
+        v-if="modelValueSrc && imageComponent == 'img'"
+      />
+      <component
+        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]"
+      />
+    </div>
+  `,
+});
+const VideoComponentWrapper = defineComponent({
+  props: ["src", "videoComponent"],
+  template: `
+    <div v-if="src" class="media-wrapper">
+      <ClientOnly>
+        <component
+          :is="videoComponent"
+          :src="isVideo(images[modelValue])"
+          class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+        />
+      </ClientOnly>
+    </div>
+  `,
+});
+const currentMediaComponent = computed(() => {
+  if (props.videoComponent && props.isVideo(props.images[modelValue.value])) {
+    return VideoComponentWrapper;
+  } else {
+    return ImageComponent;
+  }
+});
 </script>
 <template>
   <div>
@@ -222,38 +287,17 @@ onUnmounted(() => {
                   @touchstart="touchStart"
                   @touchend="touchEnd"
                 >
-                  <div
-                    class="flex-1 w-full max-w-full flex items-center justify-center"
-                  >
-                    <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
-                          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]"
-                        />
-                      </template>
-                    </CollapseTransition>
-                  </div>
+                  <transition :name="transitionName" mode="out-in">
+                    <component
+                      :is="currentMediaComponent"
+                      :key="modelValue"
+                      :src="modelValueSrc"
+                      :imageComponent="imageComponent"
+                      :videoComponent="videoComponent"
+                      class="flex-1 w-full max-w-full flex items-center justify-center"
+                    />
+                  </transition>
+
                   <div
                     class="flex-0 py-2 flex items-center justify-center max-w-full w-full"
                   >
@@ -419,3 +463,60 @@ onUnmounted(() => {
     </button>
   </div>
 </template>
+<style scoped>
+/* Transition styles for next (right) navigation */
+.slide-next-enter-active,
+.slide-next-leave-active {
+  transition:
+    opacity 0.5s,
+    transform 0.5s;
+}
+
+.slide-next-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-next-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide-next-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide-next-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+/* Transition styles for prev (left) navigation */
+.slide-prev-enter-active,
+.slide-prev-leave-active {
+  transition:
+    opacity 0.5s,
+    transform 0.5s;
+}
+
+.slide-prev-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.slide-prev-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide-prev-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide-prev-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>

package/package.json

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