@fy-/fws-vue 2.1.6 → 2.1.8

package/components/ui/DefaultGallery.vue

@@ -1,209 +1,215 @@
 <script setup lang="ts">
-import { Dialog, DialogPanel, TransitionRoot } from "@headlessui/vue";
-import { ref, onMounted, reactive, onUnmounted, h, computed } from "vue";
-import type { APIPaging } from "../../composables/rest";
-import { useEventBus } from "../../composables/event-bus";
+import type { Component } from 'vue'
+import type { APIPaging } from '../../composables/rest'
+import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
 import {
-  XCircleIcon,
-  ChevronDoubleRightIcon,
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
   ChevronDoubleLeftIcon,
-} from "@heroicons/vue/24/solid";
-import DefaultPaging from "./DefaultPaging.vue";
-import type { Component } from "vue";
+  ChevronDoubleRightIcon,
+  XCircleIcon,
+} from '@heroicons/vue/24/solid'
+import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import DefaultPaging from './DefaultPaging.vue'
 
-const isGalleryOpen = ref<boolean>(false);
-const eventBus = useEventBus();
-const sidePanel = ref<boolean>(true);
+const isGalleryOpen = ref<boolean>(false)
+const eventBus = useEventBus()
+const sidePanel = ref<boolean>(true)
 
 const props = withDefaults(
   defineProps<{
-    id: string;
-    images: Array<any>;
-    title?: string;
-    getImageUrl?: Function;
-    getThumbnailUrl?: Function;
-    onOpen?: Function;
-    onClose?: Function;
-    closeIcon?: Object;
-    gridHeight?: number;
-    mode: "mason" | "grid" | "button" | "hidden" | "custom";
-    paging?: APIPaging | undefined;
-    buttonText?: string;
-    buttonType?: string;
-    modelValue: number;
-    borderColor?: Function;
-    imageLoader: string;
-    videoComponent?: Component | string;
-    imageComponent?: Component | string;
-    isVideo?: Function;
-    ranking?: boolean;
+    id: string
+    images: Array<any>
+    title?: string
+    getImageUrl?: Function
+    getThumbnailUrl?: Function
+    onOpen?: Function
+    onClose?: Function
+    closeIcon?: object
+    gridHeight?: number
+    mode: 'mason' | 'grid' | 'button' | 'hidden' | 'custom'
+    paging?: APIPaging | undefined
+    buttonText?: string
+    buttonType?: string
+    modelValue: number
+    borderColor?: Function
+    imageLoader: string
+    videoComponent?: Component | string
+    imageComponent?: Component | string
+    isVideo?: Function
+    ranking?: boolean
   }>(),
   {
     modelValue: 0,
-    imageComponent: "img",
-    mode: "grid",
+    imageComponent: 'img',
+    mode: 'grid',
     gridHeight: 4,
     closeIcon: () => h(XCircleIcon),
     images: () => [],
-    isVideo: (image: any) => false,
+    isVideo: () => false,
     getImageUrl: (image: any) => image.image_url,
     getThumbnailUrl: (image: any) => `${image.image_url}?s=250x250&m=autocrop`,
     paging: undefined,
     borderColor: undefined,
     ranking: false,
   },
-);
+)
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue'])
 const modelValue = computed({
   get: () => props.modelValue,
   set: (i) => {
-    emit("update:modelValue", i);
+    emit('update:modelValue', i)
   },
-});
+})
 
-const direction = ref<"next" | "prev">("next");
+const direction = ref<'next' | 'prev'>('next')
 
-const setModal = (value: boolean) => {
+function setModal(value: boolean) {
   if (value === true) {
-    if (props.onOpen) props.onOpen();
-  } else {
-    if (props.onClose) props.onClose();
+    if (props.onOpen) props.onOpen()
   }
-  isGalleryOpen.value = value;
-};
+  else {
+    if (props.onClose) props.onClose()
+  }
+  isGalleryOpen.value = value
+}
 
-const openGalleryImage = (index: number | undefined) => {
-  if (index === undefined) modelValue.value = 0;
+function openGalleryImage(index: number | undefined) {
+  if (index === undefined) {
+    modelValue.value = 0
+  }
   else {
-    modelValue.value = parseInt(index.toString());
+    modelValue.value = Number.parseInt(index.toString())
   }
-  setModal(true);
-};
+  setModal(true)
+}
 
-const goNextImage = () => {
-  direction.value = "next";
+function goNextImage() {
+  direction.value = 'next'
   if (modelValue.value < props.images.length - 1) {
-    modelValue.value++;
-  } else {
-    modelValue.value = 0;
+    modelValue.value++
+  }
+  else {
+    modelValue.value = 0
   }
-};
+}
 
-const goPrevImage = () => {
-  direction.value = "prev";
+function goPrevImage() {
+  direction.value = 'prev'
   if (modelValue.value > 0) {
-    modelValue.value--;
-  } else {
-    modelValue.value =
-      props.images.length - 1 > 0 ? props.images.length - 1 : 0;
+    modelValue.value--
   }
-};
+  else {
+    modelValue.value
+      = 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;
-  return props.getImageUrl(props.images[modelValue.value]);
-});
+  if (props.images.length === 0) return false
+  if (props.images[modelValue.value] === undefined) return false
+  return props.getImageUrl(props.images[modelValue.value])
+})
 
-const start = reactive({ x: 0, y: 0 });
+const start = reactive({ x: 0, y: 0 })
 
-const touchStart = (event: TouchEvent) => {
-  const touch = event.touches[0];
-  const targetElement = touch.target as HTMLElement;
+function touchStart(event: TouchEvent) {
+  const touch = event.touches[0]
+  const targetElement = touch.target as HTMLElement
 
   // Check if the touch started on an interactive element
-  if (targetElement.closest("button, a, input, textarea, select")) {
-    return; // Don't handle swipe if interacting with an interactive element
+  if (targetElement.closest('button, a, input, textarea, select')) {
+    return // Don't handle swipe if interacting with an interactive element
   }
 
-  start.x = touch.screenX;
-  start.y = touch.screenY;
-};
-const touchEnd = (event: TouchEvent) => {
-  const touch = event.changedTouches[0];
-  const targetElement = touch.target as HTMLElement;
+  start.x = touch.screenX
+  start.y = touch.screenY
+}
+function touchEnd(event: TouchEvent) {
+  const touch = event.changedTouches[0]
+  const targetElement = touch.target as HTMLElement
 
   // Check if the touch ended on an interactive element
-  if (targetElement.closest("button, a, input, textarea, select")) {
-    return; // Don't handle swipe if interacting with an interactive element
+  if (targetElement.closest('button, a, input, textarea, select')) {
+    return // Don't handle swipe if interacting with an interactive element
   }
 
-  const end = { x: touch.screenX, y: touch.screenY };
+  const end = { x: touch.screenX, y: touch.screenY }
 
-  const diffX = start.x - end.x;
-  const diffY = start.y - end.y;
+  const diffX = start.x - end.x
+  const diffY = start.y - end.y
 
   // 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();
+      direction.value = 'next'
+      goNextImage()
+    }
+    else {
+      direction.value = 'prev'
+      goPrevImage()
     }
   }
-};
+}
 
-const getBorderColor = (i: any) => {
+function getBorderColor(i: any) {
   if (props.borderColor !== undefined) {
-    return props.borderColor(i);
+    return props.borderColor(i)
   }
-  return "";
-};
+  return ''
+}
 
-const isKeyPressed = ref<boolean>(false);
+const isKeyPressed = ref<boolean>(false)
 
-const handleKeyboardInput = (event: KeyboardEvent) => {
-  if (isKeyPressed.value) return;
+function handleKeyboardInput(event: KeyboardEvent) {
+  if (isKeyPressed.value) return
   switch (event.key) {
-    case "ArrowRight":
-      isKeyPressed.value = true;
-      direction.value = "next";
-      goNextImage();
-      break;
-    case "ArrowLeft":
-      isKeyPressed.value = true;
-      direction.value = "prev";
-      goPrevImage();
-      break;
+    case 'ArrowRight':
+      isKeyPressed.value = true
+      direction.value = 'next'
+      goNextImage()
+      break
+    case 'ArrowLeft':
+      isKeyPressed.value = true
+      direction.value = 'prev'
+      goPrevImage()
+      break
     default:
-      break;
+      break
   }
-};
+}
 
-const handleKeyboardRelease = (event: KeyboardEvent) => {
-  if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-    isKeyPressed.value = false;
+function handleKeyboardRelease(event: KeyboardEvent) {
+  if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+    isKeyPressed.value = false
   }
-};
+}
 
-const closeGallery = () => {
-  setModal(false);
-};
+function closeGallery() {
+  setModal(false)
+}
 
 onMounted(() => {
-  eventBus.on(`${props.id}GalleryImage`, openGalleryImage);
-  eventBus.on(`${props.id}Gallery`, openGalleryImage);
-  eventBus.on(`${props.id}GalleryClose`, closeGallery);
+  eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.on(`${props.id}Gallery`, openGalleryImage)
+  eventBus.on(`${props.id}GalleryClose`, closeGallery)
   if (window !== undefined && !import.meta.env.SSR) {
-    window.addEventListener("keydown", handleKeyboardInput);
-    window.addEventListener("keyup", handleKeyboardRelease);
+    window.addEventListener('keydown', handleKeyboardInput)
+    window.addEventListener('keyup', handleKeyboardRelease)
   }
-});
+})
 
 onUnmounted(() => {
-  eventBus.off(`${props.id}Gallery`, openGalleryImage);
-  eventBus.off(`${props.id}GalleryImage`, openGalleryImage);
-  eventBus.off(`${props.id}GalleryClose`, closeGallery);
+  eventBus.off(`${props.id}Gallery`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryClose`, closeGallery)
   if (window !== undefined && !import.meta.env.SSR) {
-    window.removeEventListener("keydown", handleKeyboardInput);
-    window.removeEventListener("keyup", handleKeyboardRelease);
+    window.removeEventListener('keydown', handleKeyboardInput)
+    window.removeEventListener('keyup', handleKeyboardRelease)
   }
-});
+})
 </script>
 
 <template>
@@ -220,9 +226,9 @@ onUnmounted(() => {
     >
       <Dialog
         :open="isGalleryOpen"
-        @close="setModal"
         class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-y-auto overflow-x-hidden"
         style="z-index: 37"
+        @close="setModal"
       >
         <DialogPanel
           class="relative w-full max-w-full flex flex-col justify-center items-center"
@@ -232,8 +238,8 @@ onUnmounted(() => {
             <div class="flex-grow h-[100vh] flex items-center relative">
               <button
                 class="btn w-9 h-9 rounded-full absolute top-4 left-2"
-                @click="setModal(false)"
                 style="z-index: 39"
+                @click="setModal(false)"
               >
                 <component :is="closeIcon" class="w-8 h-8" />
               </button>
@@ -245,8 +251,8 @@ onUnmounted(() => {
                   class="hidden lg:relative z-[2] lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
                 >
                   <button
-                    class="btn p-1 rounded-full"
                     v-if="images.length > 1"
+                    class="btn p-1 rounded-full"
                     @click="goPrevImage()"
                   >
                     <ArrowLeftCircleIcon class="w-8 h-8" />
@@ -282,13 +288,13 @@ onUnmounted(() => {
                         </template>
                         <template v-else>
                           <img
+                            v-if="modelValueSrc && imageComponent === '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"
+                            v-else-if="modelValueSrc && imageComponent"
                             :image="modelValueSrc.image"
                             :variant="modelValueSrc.variant"
                             :alt="modelValueSrc.alt"
@@ -299,7 +305,7 @@ onUnmounted(() => {
                       <div
                         class="flex-0 py-2 flex items-center justify-center max-w-full w-full relative !z-[3]"
                       >
-                        <slot :value="images[modelValue]"></slot>
+                        <slot :value="images[modelValue]" />
                       </div>
                     </div>
                   </transition>
@@ -316,13 +322,13 @@ onUnmounted(() => {
                     style="z-index: 39"
                     @click="() => (sidePanel = !sidePanel)"
                   >
-                    <ChevronDoubleRightIcon class="w-7 h-7" v-if="sidePanel" />
-                    <ChevronDoubleLeftIcon class="w-7 h-7" v-else />
+                    <ChevronDoubleRightIcon v-if="sidePanel" class="w-7 h-7" />
+                    <ChevronDoubleLeftIcon v-else class="w-7 h-7" />
                   </button>
                   <button
+                    v-if="images.length > 1"
                     class="btn p-1 rounded-full"
                     @click="goNextImage()"
-                    v-if="images.length > 1"
                   >
                     <ArrowRightCircleIcon class="w-8 h-8" />
                   </button>
@@ -343,7 +349,7 @@ onUnmounted(() => {
             >
               <!-- Side panel content -->
               <div v-if="paging" class="flex items-center justify-center">
-                <DefaultPaging :items="paging" :id="id" />
+                <DefaultPaging :id="id" :items="paging" />
               </div>
               <div class="grid grid-cols-2 gap-2 p-2">
                 <div
@@ -352,27 +358,27 @@ onUnmounted(() => {
                   class="hover:!brightness-100"
                   :style="{
                     filter:
-                      i - 1 == modelValue ? 'brightness(1)' : 'brightness(0.5)',
+                      i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.5)',
                   }"
                 >
                   <img
-                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    v-if="imageComponent === 'img'"
                     :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
                       images[i - 1],
                     )}`"
                     :src="getThumbnailUrl(images[i - 1])"
-                    v-if="imageComponent == 'img'"
-                  />
-                  <component
-                    v-else
                     @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                  >
+                  <component
                     :is="imageComponent"
+                    v-else
                     :image="getThumbnailUrl(images[i - 1]).image"
                     :variant="getThumbnailUrl(images[i - 1]).variant"
                     :alt="getThumbnailUrl(images[i - 1]).alt"
                     :class="`h-auto max-w-full rounded-lg cursor-pointer shadow ${getBorderColor(
                       images[i - 1],
                     )}`"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
                   />
                 </div>
               </div>
@@ -382,81 +388,85 @@ onUnmounted(() => {
       </Dialog>
     </TransitionRoot>
 
-    <template v-if="mode == 'grid' || mode == 'mason' || mode == 'custom'">
+    <template v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'">
       <div
         :class="{
           'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
-            mode == 'mason',
+            mode === 'mason',
           'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
-            mode == 'grid',
-          'custom-grid': mode == 'custom',
+            mode === 'grid',
+          'custom-grid': mode === 'custom',
         }"
       >
         <slot name="thumbnail" />
         <template v-for="i in images.length" :key="`g_${id}_${i}`">
-          <template v-if="mode == 'mason'">
+          <template v-if="mode === 'mason'">
             <div
+              v-if="i + (1 % gridHeight) === 0"
               class="grid gap-4 items-start relative"
-              v-if="i + (1 % gridHeight) == 0"
             >
-              <div v-if="ranking" class="img-gallery-ranking">{{ i }}</div>
+              <div v-if="ranking" class="img-gallery-ranking">
+                {{ i }}
+              </div>
 
               <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
                 <div>
                   <img
-                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                    v-if="i + j - 2 < images.length && imageComponent === 'img'"
                     class="h-auto max-w-full rounded-lg cursor-pointer"
-                    v-if="i + j - 2 < images.length && imageComponent == 'img'"
                     :src="getThumbnailUrl(images[i + j - 2])"
-                  />
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                  >
                   <component
-                    v-else-if="i + j - 2 < images.length"
                     :is="imageComponent"
+                    v-else-if="i + j - 2 < images.length"
                     :image="getThumbnailUrl(images[i + j - 2]).image"
                     :variant="getThumbnailUrl(images[i + j - 2]).variant"
                     :alt="getThumbnailUrl(images[i + j - 2]).alt"
                     :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
                       images[i + j - 2],
                     )}`"
-                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                     :likes="getThumbnailUrl(images[i + j - 2]).likes"
                     :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
-                    :isAuthor="getThumbnailUrl(images[i + j - 2]).isAuthor"
+                    :is-author="getThumbnailUrl(images[i + j - 2]).isAuthor"
                     :user-uuid="getThumbnailUrl(images[i + j - 2]).userUUID"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                   />
                 </div>
               </template>
             </div>
           </template>
-          <div class="relative" v-else>
-            <div v-if="ranking" class="img-gallery-ranking">{{ i }}</div>
+          <div v-else class="relative">
+            <div v-if="ranking" class="img-gallery-ranking">
+              {{ i }}
+            </div>
             <img
-              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              v-if="imageComponent === 'img'"
               class="h-auto max-w-full rounded-lg cursor-pointer"
               :src="getThumbnailUrl(images[i - 1])"
-              v-if="imageComponent == 'img'"
-            />
+              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+            >
             <component
-              v-else-if="imageComponent"
               :is="imageComponent"
+              v-else-if="imageComponent"
               :image="getThumbnailUrl(images[i - 1]).image"
               :variant="getThumbnailUrl(images[i - 1]).variant"
               :alt="getThumbnailUrl(images[i - 1]).alt"
               :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
                 images[i - 1],
               )}`"
-              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
               :likes="getThumbnailUrl(images[i - 1]).likes"
               :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
-              :isAuthor="getThumbnailUrl(images[i - 1]).isAuthor"
+              :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
               :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
+              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
             />
           </div>
         </template>
       </div>
     </template>
     <button
-      v-if="mode == 'button'"
+      v-if="mode === 'button'"
       :class="`btn ${buttonType ? buttonType : 'primary'} defaults`"
       @click="openGalleryImage(0)"
     >
@@ -464,6 +474,7 @@ onUnmounted(() => {
     </button>
   </div>
 </template>
+
 <style scoped>
 /* Transition styles for next (right) navigation */
 .slide-next-enter-active,