@fy-/fws-vue 2.0.87 → 2.0.89

package/components/ui/DefaultGallery.vue

@@ -1,14 +1,6 @@
 <script setup lang="ts">
 import { Dialog, DialogPanel, TransitionRoot } from "@headlessui/vue";
-import {
-  ref,
-  onMounted,
-  reactive,
-  onUnmounted,
-  h,
-  computed,
-  defineComponent,
-} from "vue";
+import { ref, onMounted, reactive, onUnmounted, h, computed } from "vue";
 import type { APIPaging } from "../../composables/rest";
 import { useEventBus } from "../../composables/event-bus";
 import {
@@ -20,10 +12,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<{
@@ -63,6 +56,7 @@ const props = withDefaults(
     ranking: false,
   },
 );
+
 const emit = defineEmits(["update:modelValue"]);
 const modelValue = computed({
   get: () => props.modelValue,
@@ -70,6 +64,9 @@ const modelValue = computed({
     emit("update:modelValue", i);
   },
 });
+
+const direction = ref<"left" | "right">("right");
+
 const setModal = (value: boolean) => {
   if (value === true) {
     if (props.onOpen) props.onOpen();
@@ -78,17 +75,17 @@ const setModal = (value: boolean) => {
   }
   isGalleryOpen.value = value;
 };
+
 const openGalleryImage = (index: number | undefined) => {
-  if (index === undefined) {
-    modelValue.value = 0;
-  } else {
-    direction.value = index > modelValue.value ? "next" : "prev";
+  if (index === undefined) modelValue.value = 0;
+  else {
     modelValue.value = parseInt(index.toString());
   }
   setModal(true);
 };
+
 const goNextImage = () => {
-  direction.value = "next";
+  direction.value = "right";
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++;
   } else {
@@ -97,7 +94,7 @@ const goNextImage = () => {
 };
 
 const goPrevImage = () => {
-  direction.value = "prev";
+  direction.value = "left";
   if (modelValue.value > 0) {
     modelValue.value--;
   } else {
@@ -111,6 +108,7 @@ const modelValueSrc = computed(() => {
   if (props.images[modelValue.value] == undefined) return false;
   return props.getImageUrl(props.images[modelValue.value]);
 });
+
 const start = reactive({ x: 0, y: 0 });
 
 const touchStart = (event: TouchEvent) => {
@@ -130,10 +128,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";
+      direction.value = "right";
       goNextImage();
     } else {
-      direction.value = "prev";
+      direction.value = "left";
       goPrevImage();
     }
   }
@@ -145,18 +143,20 @@ const getBorderColor = (i: any) => {
   }
   return "";
 };
+
 const isKeyPressed = ref<boolean>(false);
+
 const handleKeyboardInput = (event: KeyboardEvent) => {
   if (isKeyPressed.value) return;
   switch (event.key) {
     case "ArrowRight":
       isKeyPressed.value = true;
-      direction.value = "next";
+      direction.value = "right";
       goNextImage();
       break;
     case "ArrowLeft":
       isKeyPressed.value = true;
-      direction.value = "prev";
+      direction.value = "left";
       goPrevImage();
       break;
     default:
@@ -169,9 +169,11 @@ const handleKeyboardRelease = (event: KeyboardEvent) => {
     isKeyPressed.value = false;
   }
 };
+
 const closeGallery = () => {
   setModal(false);
 };
+
 onMounted(() => {
   eventBus.on(`${props.id}GalleryImage`, openGalleryImage);
   eventBus.on(`${props.id}Gallery`, openGalleryImage);
@@ -181,6 +183,7 @@ onMounted(() => {
     window.addEventListener("keyup", handleKeyboardRelease);
   }
 });
+
 onUnmounted(() => {
   eventBus.off(`${props.id}Gallery`, openGalleryImage);
   eventBus.off(`${props.id}GalleryImage`, openGalleryImage);
@@ -190,52 +193,8 @@ 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>
     <TransitionRoot
@@ -283,26 +242,53 @@ const currentMediaComponent = computed(() => {
                   </button>
                 </div>
                 <div
-                  class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)]"
+                  class="flex-1 flex flex-col items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] overflow-hidden"
                   @touchstart="touchStart"
                   @touchend="touchEnd"
                 >
-                  <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 :name="`slide-${direction}`">
+                    <div
+                      v-if="true"
+                      :key="`image-display-${modelValue}`"
+                      class="flex-1 w-full max-w-full flex flex-col items-center justify-center"
+                    >
+                      <div
+                        class="flex-1 w-full max-w-full flex items-center justify-center"
+                      >
+                        <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>
+                      </div>
+                      <div
+                        class="flex-0 py-2 flex items-center justify-center max-w-full w-full"
+                      >
+                        <slot :value="images[modelValue]"></slot>
+                      </div>
+                    </div>
                   </transition>
-
-                  <div
-                    class="flex-0 py-2 flex items-center justify-center max-w-full w-full"
-                  >
-                    <slot :value="images[modelValue]"></slot>
-                  </div>
                 </div>
                 <div
                   class="hidden lg:flex w-10 flex-shrink-0 items-center justify-center"
@@ -341,6 +327,7 @@ const currentMediaComponent = computed(() => {
               leave-to="translate-x-full"
               class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800 h-[100vh] max-h-[100vh] overflow-y-auto"
             >
+              <!-- Side panel content -->
               <div v-if="paging" class="flex items-center justify-center">
                 <DefaultPaging :items="paging" :id="id" />
               </div>
@@ -349,11 +336,10 @@ const currentMediaComponent = computed(() => {
                   v-for="i in images.length"
                   :key="`bg_${id}_${i}`"
                   class="hover:!brightness-100"
-                  :style="`${
-                    i - 1 == modelValue
-                      ? 'filter: brightness(1)'
-                      : 'filter: brightness(0.5)'
-                  }`"
+                  :style="{
+                    filter:
+                      i - 1 == modelValue ? 'brightness(1)' : 'brightness(0.5)',
+                  }"
                 >
                   <img
                     @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
@@ -520,3 +506,30 @@ const currentMediaComponent = computed(() => {
   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);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(-100%);
+}
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+}
+</style>

package/package.json

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