@fy-/fws-vue 2.3.21 → 2.3.23

package/components/ui/DefaultGallery.vue

@@ -46,8 +46,6 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const { height: topControlsHeight } = useElementSize(topControlsRef)
 const { height: infoPanelHeight } = useElementSize(infoPanelRef)
 
-// We no longer need derived measurements as we use CSS variables instead
-
 // Use VueUse's useFullscreen for better fullscreen handling
 const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryRef)
 
@@ -131,33 +129,27 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Update CSS variables for layout consistency
-function updateInfoHeight() {
-  if (!infoPanelRef.value) return
-
-  const height = infoPanelRef.value.offsetHeight || 0
-  document.documentElement.style.setProperty('--info-height', `${height}px`)
-}
-
-function updateControlsHeight() {
-  if (!topControlsRef.value) return
-
-  const height = topControlsRef.value.offsetHeight || 0
-  document.documentElement.style.setProperty('--controls-height', `${height}px`)
-}
-
-// CSS variable-based image sizing
+// Simple but effective image sizing function
 const updateImageSizes = useDebounceFn(() => {
-  // Update CSS variables first
-  updateInfoHeight()
-  updateControlsHeight()
-
-  // Set sidebar width variable
-  const sidebarWidthValue = sidePanel.value ? '16rem' : '0px'
-  document.documentElement.style.setProperty('--sidebar-width', sidebarWidthValue)
-
-  // No need to manipulate image elements directly - CSS variables will handle it
-}, 10)
+  // Only target main image for sizing
+  const mainImage = document.querySelector('.image-display img') as HTMLImageElement
+  if (!mainImage) return
+
+  // Simple, direct calculation of available space
+  const topHeight = topControlsRef.value?.offsetHeight || 0
+  const infoHeight = infoPanel.value && infoPanelRef.value ? infoPanelRef.value.offsetHeight : 0
+  const availableHeight = windowHeight.value - topHeight - infoHeight - 32
+
+  // Apply size directly to fill available space
+  mainImage.style.maxHeight = `${availableHeight}px`
+  mainImage.style.width = 'auto'
+
+  // Handle width constraints
+  const sidebarWidth = sidePanel.value ? 256 : 0
+  mainImage.style.maxWidth = windowWidth.value <= 768
+    ? '85vw'
+    : `${windowWidth.value - sidebarWidth - 48}px`
+}, 50)
 
 // Modal controls
 function setModal(value: boolean) {
@@ -170,12 +162,7 @@ function setModal(value: boolean) {
       useEventListener(document, 'keyup', handleKeyboardRelease)
     }
 
-    // Auto-hide controls after 3 seconds on mobile
-    if (windowWidth.value < 1024) {
-      controlsTimeout = window.setTimeout(() => {
-        showControls.value = false
-      }, 3000)
-    }
+    // No longer auto-hide controls on mobile
   }
   else {
     if (props.onClose) props.onClose()
@@ -225,6 +212,11 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
+
+  // Force image sizing update after navigation
+  nextTick(() => {
+    updateImageSizes()
+  })
 }
 
 function goPrevImage() {
@@ -237,29 +229,22 @@ function goPrevImage() {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
   resetControlsTimer()
+
+  // Force image sizing update after navigation
+  nextTick(() => {
+    updateImageSizes()
+  })
 }
 
 // UI control functions
 function resetControlsTimer() {
-  // Show controls when user interacts
+  // Always show controls - no auto-hide
   showControls.value = true
-
-  // Only set timer on mobile
-  if (windowWidth.value < 1024) {
-    if (controlsTimeout) {
-      clearTimeout(controlsTimeout)
-    }
-    controlsTimeout = window.setTimeout(() => {
-      showControls.value = false
-    }, 3000)
-  }
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 function toggleControls() {
   showControls.value = !showControls.value
-  if (showControls.value && windowWidth.value < 1024) {
-    resetControlsTimer()
-  }
 }
 
 function toggleInfoPanel() {
@@ -343,9 +328,8 @@ const touchEnd = useDebounceFn((event: TouchEvent) => {
   const diffX = start.x - end.x
   const diffY = start.y - end.y
 
-  // Detect tap (quick touch with minimal movement)
+  // For taps, we don't toggle controls anymore - they always stay visible
   if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10 && touchDuration < 300) {
-    toggleControls()
     return
   }
 
@@ -440,9 +424,6 @@ onMounted(() => {
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
 
-  // Initialize CSS variables
-  updateImageSizes()
-
   // Set up observers for dynamic resizing
   if (topControlsRef.value) {
     useResizeObserver(topControlsRef.value, updateImageSizes)
@@ -567,7 +548,8 @@ onUnmounted(() => {
         >
           <!-- Main Image Area - Fills available space -->
           <div
-            class="relative flex-1 h-full flex items-center justify-center pt-[var(--controls-height)]"
+            class="relative flex-1 h-full flex items-center justify-center"
+            :style="{ paddingTop: `${topControlsHeight}px` }"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
           >
@@ -617,14 +599,15 @@ onUnmounted(() => {
                       <component
                         :is="videoComponent"
                         :src="isVideo(images[modelValue])"
-                        class="shadow max-w-full video-component gallery-image"
+                        class="shadow max-w-full h-auto object-contain video-component"
+                        @load="updateImageSizes"
                       />
                     </ClientOnly>
                   </template>
                   <template v-else>
                     <img
                       v-if="modelValueSrc && imageComponent === 'img'"
-                      class="shadow max-w-full gallery-image"
+                      class="shadow max-w-full h-auto object-contain"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
                       @load="updateImageSizes"
@@ -632,11 +615,10 @@ onUnmounted(() => {
                     <component
                       :is="imageComponent"
                       v-else-if="modelValueSrc && imageComponent"
-
-                      class="shadow max-w-full gallery-image"
                       :image="modelValueSrc.image"
                       :variant="modelValueSrc.variant"
                       :alt="modelValueSrc.alt"
+                      class="shadow max-w-full h-auto object-contain"
                     />
                   </template>
                 </div>
@@ -680,7 +662,6 @@ onUnmounted(() => {
                 v-if="infoPanel && images[modelValue]"
                 ref="infoPanelRef"
                 class="info-panel absolute bottom-0 left-0 right-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 z-45"
-                @transitionend="updateImageSizes"
               >
                 <slot :value="images[modelValue]" />
               </div>
@@ -699,7 +680,8 @@ onUnmounted(() => {
             <div
               v-if="sidePanel"
               ref="sidePanelRef"
-              class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 backdrop-blur-md overflow-y-auto z-40 cool-scroll pt-[calc(var(--controls-height)+8px)]"
+              class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md overflow-y-auto z-40 cool-scroll"
+              :style="{ paddingTop: `${topControlsHeight + 8}px` }"
             >
               <!-- Paging Controls if needed -->
               <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -901,13 +883,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* CSS variables for dimensions */
-:root {
-  --controls-height: 0px;
-  --info-height: 0px;
-  --sidebar-width: 16rem;
-}
-
 /* Ensure controls stay fixed at top */
 .controls-bar {
   height: auto;
@@ -938,26 +913,6 @@ onUnmounted(() => {
   border-top-right-radius: 0.5rem;
 }
 
-/* Image sizing in different contexts - simplified approach like old component */
-.gallery-image {
-  height: auto;
-  object-fit: contain;
-  max-width: 92vw;
-  max-height: calc(80vh - var(--controls-height) - var(--info-height, 0px));
-  transition: max-height 0.3s ease-out, max-width 0.3s ease-out;
-}
-
-@media (min-width: 1024px) {
-  .gallery-image {
-    max-width: calc(92vw - var(--sidebar-width) - 48px);
-  }
-}
-
-/* Fullscreen mode sizing */
-:is(.gallery-container[style*="fullscreen"]) .gallery-image {
-  max-height: calc(92vh - var(--controls-height) - var(--info-height, 0px));
-}
-
 /* Transition styles for next (right) navigation */
 .slide-next-enter-active,
 .slide-next-leave-active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.21",
+  "version": "2.3.23",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",

package/components/ui/DefaultGalleryOld.vue

@@ -1,1073 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-import type { APIPaging } from '../../composables/rest'
-import {
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  InformationCircleIcon,
-  XMarkIcon,
-} from '@heroicons/vue/24/solid'
-import { useDebounceFn, useEventListener, useFullscreen, useResizeObserver } from '@vueuse/core'
-import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } 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 showControls = ref<boolean>(true)
-const isFullscreen = ref<boolean>(false)
-const infoPanel = ref<boolean>(true) // Show info panel by default
-const touchStartTime = ref<number>(0)
-const infoHeight = ref<number>(0)
-const galleryContainerRef = shallowRef<HTMLElement | null>(null)
-
-// Use VueUse's useFullscreen for better fullscreen handling
-const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryContainerRef)
-
-// Track when fullscreen changes externally (like Escape key)
-watch(isElementFullscreen, (newValue) => {
-  isFullscreen.value = newValue
-  if (newValue) {
-    // Force update of image size when entering fullscreen
-    nextTick(() => {
-      updateImageSizes()
-    })
-  }
-})
-
-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
-  }>(),
-  {
-    modelValue: 0,
-    imageComponent: 'img',
-    mode: 'grid',
-    gridHeight: 4,
-    closeIcon: () => h(XMarkIcon),
-    images: () => [],
-    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 modelValue = computed({
-  get: () => props.modelValue,
-  set: (i) => {
-    emit('update:modelValue', i)
-  },
-})
-
-const direction = ref<'next' | 'prev'>('next')
-
-let controlsTimeout: number | null = null
-let fullscreenResizeTimeout: number | null = null
-
-// Used to maintain consistent image sizes
-function updateImageSizes() {
-  nextTick(() => {
-    const imageContainers = document.querySelectorAll('.image-container img, .image-container .video-component') as NodeListOf<HTMLElement>
-    if (imageContainers && imageContainers.length > 0) {
-      imageContainers.forEach((img) => {
-        // Force a reflow to ensure correct sizing
-        img.style.maxHeight = ''
-        // Force browser to recalculate styles
-        void img.offsetHeight
-
-        // Calculate the correct height based on fullscreen and info panel state
-        const topHeight = 4 // rem
-        const infoHeight = infoPanel.value ? Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--info-height') || '0px') / 16 : 0
-        const viewHeight = isFullscreen.value ? 90 : 80
-
-        // Set explicit height with important to override any other styles
-        img.style.maxHeight = `calc(${viewHeight}vh - ${infoHeight}rem - ${topHeight}rem) !important`
-      })
-    }
-  })
-}
-
-function setModal(value: boolean) {
-  if (value === true) {
-    if (props.onOpen) props.onOpen()
-    document.body.style.overflow = 'hidden' // Prevent scrolling when gallery is open
-    if (!import.meta.env.SSR) {
-      useEventListener(document, 'keydown', handleKeyboardInput)
-      useEventListener(document, 'keyup', handleKeyboardRelease)
-    }
-    // Auto-hide controls after 3 seconds on mobile
-    if (window.innerWidth < 1024) {
-      controlsTimeout = window.setTimeout(() => {
-        showControls.value = false
-      }, 3000)
-    }
-  }
-  else {
-    if (props.onClose) props.onClose()
-    document.body.style.overflow = '' // Restore scrolling
-    // Exit fullscreen if active
-    if (isFullscreen.value) {
-      exitFullscreen()
-      isFullscreen.value = false
-    }
-    // Clear timeout if modal is closed
-    if (controlsTimeout) {
-      clearTimeout(controlsTimeout)
-      controlsTimeout = null
-    }
-  }
-  isGalleryOpen.value = value
-  showControls.value = true
-  // Don't reset info panel state when opening/closing
-}
-
-const openGalleryImage = useDebounceFn((index: number | undefined) => {
-  if (index === undefined) {
-    modelValue.value = 0
-  }
-  else {
-    modelValue.value = Number.parseInt(index.toString())
-  }
-  setModal(true)
-}, 50) // Debounce to prevent accidental double-opens
-
-function goNextImage() {
-  direction.value = 'next'
-  if (modelValue.value < props.images.length - 1) {
-    modelValue.value++
-  }
-  else {
-    modelValue.value = 0
-  }
-  resetControlsTimer()
-}
-
-function goPrevImage() {
-  direction.value = 'prev'
-  if (modelValue.value > 0) {
-    modelValue.value--
-  }
-  else {
-    modelValue.value
-      = props.images.length - 1 > 0 ? props.images.length - 1 : 0
-  }
-  resetControlsTimer()
-}
-
-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])
-})
-
-const currentImage = computed(() => {
-  if (props.images.length === 0) return null
-  return props.images[modelValue.value]
-})
-
-const imageCount = computed(() => props.images.length)
-const currentIndex = computed(() => modelValue.value + 1)
-
-const start = reactive({ x: 0, y: 0 })
-
-function resetControlsTimer() {
-  // Show controls when user interacts
-  showControls.value = true
-
-  // Only set timer on mobile
-  if (window.innerWidth < 1024) {
-    if (controlsTimeout) {
-      clearTimeout(controlsTimeout)
-    }
-    controlsTimeout = window.setTimeout(() => {
-      showControls.value = false
-    }, 3000)
-  }
-}
-
-function toggleControls() {
-  showControls.value = !showControls.value
-  if (showControls.value && window.innerWidth < 1024) {
-    resetControlsTimer()
-  }
-}
-
-function toggleInfoPanel() {
-  infoPanel.value = !infoPanel.value
-  resetControlsTimer()
-
-  // Update the info height after panel toggle
-  if (infoPanel.value) {
-    nextTick(() => {
-      updateInfoHeight()
-    })
-  }
-  else {
-    // Reset when hiding
-    document.documentElement.style.setProperty('--info-height', '0px')
-  }
-}
-
-function toggleFullscreen() {
-  if (!isFullscreen.value) {
-    if (galleryContainerRef.value) {
-      enterFullscreen()
-        .then(() => {
-          isFullscreen.value = true
-          // Give browser time to adjust fullscreen before updating sizing
-          if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
-          fullscreenResizeTimeout = window.setTimeout(() => {
-            updateImageSizes()
-          }, 50)
-        })
-        .catch(() => {})
-    }
-  }
-  else {
-    exitFullscreen()
-      .then(() => {
-        isFullscreen.value = false
-      })
-      .catch(() => {})
-  }
-  resetControlsTimer()
-}
-
-// Touch handling with debounce to prevent multiple rapid changes
-const touchStart = useDebounceFn((event: TouchEvent) => {
-  const touch = event.touches[0]
-  const targetElement = touch.target as HTMLElement
-
-  // Store start time for tap detection
-  touchStartTime.value = Date.now()
-
-  // 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
-  }
-
-  start.x = touch.screenX
-  start.y = touch.screenY
-}, 50)
-
-const touchEnd = useDebounceFn((event: TouchEvent) => {
-  const touch = event.changedTouches[0]
-  const targetElement = touch.target as HTMLElement
-  const touchDuration = Date.now() - touchStartTime.value
-
-  // 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
-  }
-
-  const end = { x: touch.screenX, y: touch.screenY }
-
-  const diffX = start.x - end.x
-  const diffY = start.y - end.y
-
-  // Detect tap (quick touch with minimal movement)
-  if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10 && touchDuration < 300) {
-    toggleControls()
-    return
-  }
-
-  // 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()
-    }
-  }
-}, 50)
-
-function getBorderColor(i: any) {
-  if (props.borderColor !== undefined) {
-    return props.borderColor(i)
-  }
-  return ''
-}
-
-const isKeyPressed = ref<boolean>(false)
-
-function handleKeyboardInput(event: KeyboardEvent) {
-  if (!isGalleryOpen.value) return
-  if (isKeyPressed.value) return
-
-  switch (event.key) {
-    case 'Escape':
-      event.preventDefault()
-      setModal(false)
-      break
-    case 'ArrowRight':
-      isKeyPressed.value = true
-      direction.value = 'next'
-      goNextImage()
-      break
-    case 'ArrowLeft':
-      isKeyPressed.value = true
-      direction.value = 'prev'
-      goPrevImage()
-      break
-    case 'f':
-      toggleFullscreen()
-      break
-    case 'i':
-      toggleInfoPanel()
-      break
-    default:
-      break
-  }
-}
-
-function handleKeyboardRelease(event: KeyboardEvent) {
-  if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-    isKeyPressed.value = false
-  }
-}
-
-function closeGallery() {
-  setModal(false)
-}
-
-// Click outside gallery content to close - with debounce to prevent accidental closes
-const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
-  if (event.target === event.currentTarget) {
-    setModal(false)
-  }
-}, 200)
-
-// Watch for both image changes and fullscreen mode changes
-watch([currentImage, isFullscreen], () => {
-  // Update the info height when image changes or fullscreen state changes
-  if (infoPanel.value) {
-    nextTick(() => {
-      updateInfoHeight()
-      // Fix image sizing issue when navigating in fullscreen
-      if (isFullscreen.value) {
-        updateImageSizes()
-      }
-    })
-  }
-})
-
-// Update CSS variable with info panel height
-function updateInfoHeight() {
-  nextTick(() => {
-    const infoElement = document.querySelector('.info-panel-slot') as HTMLElement
-    if (infoElement) {
-      const height = infoElement.offsetHeight
-      infoHeight.value = height
-      document.documentElement.style.setProperty('--info-height', `${height}px`)
-    }
-  })
-}
-
-// Debounced window resize handler to avoid performance issues
-const handleWindowResize = useDebounceFn(() => {
-  if (isGalleryOpen.value) {
-    updateImageSizes()
-    updateInfoHeight()
-  }
-}, 100)
-
-onMounted(() => {
-  eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
-  eventBus.on(`${props.id}Gallery`, openGalleryImage)
-  eventBus.on(`${props.id}GalleryClose`, closeGallery)
-
-  // Store reference to the gallery container
-  galleryContainerRef.value = document.querySelector('.gallery-container')
-
-  // Initialize info height once mounted (only if info panel is shown)
-  if (infoPanel.value) {
-    updateInfoHeight()
-  }
-
-  // Use vueUse's useResizeObserver instead of native ResizeObserver
-  const infoElement = document.querySelector('.info-panel-slot')
-  if (infoElement) {
-    useResizeObserver(infoElement as HTMLElement, () => {
-      if (infoPanel.value) {
-        updateInfoHeight()
-      }
-    })
-  }
-
-  // Listen for window resize events
-  useEventListener(window, 'resize', handleWindowResize)
-
-  // Listen for fullscreen changes to update image sizes
-  useEventListener(document, 'fullscreenchange', () => {
-    if (document.fullscreenElement) {
-      // This handles the case of using F11 or browser fullscreen controls
-      isFullscreen.value = true
-      updateImageSizes()
-    }
-    else {
-      isFullscreen.value = false
-    }
-  })
-})
-
-onUnmounted(() => {
-  eventBus.off(`${props.id}Gallery`, openGalleryImage)
-  eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
-  eventBus.off(`${props.id}GalleryClose`, closeGallery)
-
-  if (!import.meta.env.SSR) {
-    document.body.style.overflow = '' // Ensure body scrolling is restored
-  }
-
-  // Clear any remaining timeouts
-  if (controlsTimeout) {
-    clearTimeout(controlsTimeout)
-  }
-
-  if (fullscreenResizeTimeout) {
-    clearTimeout(fullscreenResizeTimeout)
-  }
-
-  // Ensure we exit fullscreen mode on unmount
-  if (isFullscreen.value) {
-    exitFullscreen().catch(() => {})
-  }
-})
-</script>
-
-<template>
-  <div>
-    <transition
-      enter-active-class="duration-300 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="duration-200 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isGalleryOpen"
-        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-hidden gallery-container"
-        style="z-index: 37"
-        role="dialog"
-        aria-modal="true"
-        @click="handleBackdropClick"
-      >
-        <div
-          class="relative w-full h-full max-w-full flex flex-col justify-center items-center"
-          style="z-index: 38"
-          @click.stop
-        >
-          <!-- Main Content Area -->
-          <div class="flex flex-grow gap-4 w-full h-full max-w-full">
-            <div class="flex-grow h-full flex items-center relative">
-              <!-- Image Display Area -->
-              <div
-                class="flex h-full relative flex-grow items-center justify-center gap-2 z-[1]"
-                @touchstart="touchStart"
-                @touchend="touchEnd"
-              >
-                <!-- Image Navigation - Left -->
-                <transition
-                  enter-active-class="transition-opacity duration-300"
-                  enter-from-class="opacity-0"
-                  enter-to-class="opacity-100"
-                  leave-active-class="transition-opacity duration-300"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <div
-                    v-if="showControls && images.length > 1"
-                    class="absolute left-0 z-[40] h-full flex items-center px-2 md:px-4"
-                  >
-                    <button
-                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
-                      aria-label="Previous image"
-                      @click="goPrevImage()"
-                    >
-                      <ChevronLeftIcon class="w-6 h-6 md:w-8 md:h-8" />
-                    </button>
-                  </div>
-                </transition>
-
-                <!-- Main Image Container -->
-                <div
-                  class="flex-1 flex flex-col z-[2] items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative"
-                  style="padding-top: 1rem;"
-                >
-                  <transition
-                    :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
-                    mode="out-in"
-                  >
-                    <div
-                      :key="`image-display-${modelValue}`"
-                      class="flex-1 w-full max-w-full flex flex-col items-center justify-center absolute inset-0 z-[2]"
-                    >
-                      <div
-                        class="flex-1 w-full max-w-full flex items-center justify-center image-container"
-                      >
-                        <template
-                          v-if="videoComponent && isVideo(images[modelValue])"
-                        >
-                          <ClientOnly>
-                            <component
-                              :is="videoComponent"
-                              :src="isVideo(images[modelValue])"
-                              class="shadow max-w-full h-auto object-contain video-component"
-                              :style="{
-                                maxHeight: isFullscreen
-                                  ? infoPanel
-                                    ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
-                                    : 'calc(90vh - 4rem)'
-                                  : infoPanel
-                                    ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
-                                    : 'calc(80vh - 4rem)',
-                              }"
-                            />
-                          </ClientOnly>
-                        </template>
-                        <template v-else>
-                          <img
-                            v-if="modelValueSrc && imageComponent === 'img'"
-                            class="shadow max-w-full h-auto object-contain"
-                            :style="{
-                              maxHeight: isFullscreen
-                                ? infoPanel
-                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
-                                  : 'calc(90vh - 4rem)'
-                                : infoPanel
-                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
-                                  : 'calc(80vh - 4rem)',
-                            }"
-                            :src="modelValueSrc"
-                            :alt="`Gallery image ${modelValue + 1}`"
-                          >
-                          <component
-                            :is="imageComponent"
-                            v-else-if="modelValueSrc && imageComponent"
-                            :image="modelValueSrc.image"
-                            :variant="modelValueSrc.variant"
-                            :alt="modelValueSrc.alt"
-                            class="shadow max-w-full h-auto object-contain"
-                            :style="{
-                              maxHeight: isFullscreen
-                                ? infoPanel
-                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
-                                  : 'calc(90vh - 4rem)'
-                                : infoPanel
-                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
-                                  : 'calc(80vh - 4rem)',
-                            }"
-                          />
-                        </template>
-                      </div>
-
-                      <!-- Image Slot Content -->
-                      <div
-                        v-if="infoPanel"
-                        class="info-panel-slot flex-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 rounded-t-lg flex items-center justify-center max-w-full w-full !z-[45] transition-all"
-                        @transitionend="updateInfoHeight"
-                      >
-                        <slot :value="images[modelValue]" />
-                      </div>
-                    </div>
-                  </transition>
-                </div>
-
-                <!-- Image Navigation - Right -->
-                <transition
-                  enter-active-class="transition-opacity duration-300"
-                  enter-from-class="opacity-0"
-                  enter-to-class="opacity-100"
-                  leave-active-class="transition-opacity duration-300"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <div
-                    v-if="showControls && images.length > 1"
-                    class="absolute right-0 z-[40] h-full flex items-center px-2 md:px-4"
-                  >
-                    <button
-                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
-                      aria-label="Next image"
-                      @click="goNextImage()"
-                    >
-                      <ChevronRightIcon class="w-6 h-6 md:w-8 md:h-8" />
-                    </button>
-                  </div>
-                </transition>
-              </div>
-            </div>
-
-            <!-- Side Panel for Thumbnails -->
-            <transition
-              enter-active-class="transform transition ease-in-out duration-300"
-              enter-from-class="translate-x-full"
-              enter-to-class="translate-x-0"
-              leave-active-class="transform transition ease-in-out duration-300"
-              leave-from-class="translate-x-0"
-              leave-to-class="translate-x-full"
-            >
-              <div
-                v-if="sidePanel"
-                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md h-full max-h-full overflow-y-auto"
-                style="padding-top: 4rem;"
-              >
-                <!-- Paging Controls -->
-                <div v-if="paging" class="flex items-center justify-center pt-2">
-                  <DefaultPaging :id="id" :items="paging" />
-                </div>
-
-                <!-- Thumbnail Grid -->
-                <div class="grid grid-cols-2 gap-2 p-2">
-                  <div
-                    v-for="i in images.length"
-                    :key="`bg_${id}_${i}`"
-                    class="group relative"
-                  >
-                    <div
-                      class="absolute inset-0 rounded-lg transition-colors duration-300 group-hover:bg-fv-neutral-700/40"
-                      :class="{ 'bg-fv-primary-500/40': i - 1 === modelValue }"
-                    />
-                    <img
-                      v-if="imageComponent === 'img'"
-                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
-                        images[i - 1],
-                      )}`"
-                      :style="{
-                        filter:
-                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
-                      }"
-                      :src="getThumbnailUrl(images[i - 1])"
-                      :alt="`Thumbnail ${i}`"
-                      @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 transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
-                        images[i - 1],
-                      )}`"
-                      :style="{
-                        filter:
-                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
-                      }"
-                      :likes="getThumbnailUrl(images[i - 1]).likes"
-                      :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
-                      :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
-                      :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
-                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
-                    />
-                  </div>
-                </div>
-              </div>
-            </transition>
-          </div>
-
-          <!-- Top Controls -->
-          <transition
-            enter-active-class="transition-opacity duration-300"
-            enter-from-class="opacity-0"
-            enter-to-class="opacity-100"
-            leave-active-class="transition-opacity duration-300"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <div
-              v-if="showControls"
-              class="fixed top-0 left-0 right-0 px-4 py-3 flex justify-between items-center bg-gradient-to-b from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50] transition-opacity h-16"
-            >
-              <!-- Title and Counter -->
-              <div class="flex items-center space-x-2">
-                <span v-if="title" class="font-medium text-lg">{{ title }}</span>
-                <span class="text-sm opacity-80">{{ currentIndex }} / {{ imageCount }}</span>
-              </div>
-
-              <!-- Control Buttons -->
-              <div class="flex items-center space-x-2">
-                <button
-                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
-                  :class="{ 'bg-fv-primary-500/70': infoPanel }"
-                  :title="infoPanel ? 'Hide info' : 'Show info'"
-                  @click="toggleInfoPanel"
-                >
-                  <InformationCircleIcon class="w-5 h-5" />
-                </button>
-
-                <button
-                  class="btn p-1.5 rounded-full lg:hidden bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
-                  :title="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
-                  @click="() => (sidePanel = !sidePanel)"
-                >
-                  <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
-                  <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
-                </button>
-
-                <button
-                  class="btn p-1.5 rounded-full hidden lg:block bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
-                  :title="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
-                  @click="() => (sidePanel = !sidePanel)"
-                >
-                  <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
-                  <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
-                </button>
-
-                <button
-                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
-                  aria-label="Close gallery"
-                  @click="setModal(false)"
-                >
-                  <component :is="closeIcon" class="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-          </transition>
-
-          <!-- Mobile Thumbnail Preview -->
-          <transition
-            enter-active-class="transition-transform duration-300 ease-out"
-            enter-from-class="translate-y-full"
-            enter-to-class="translate-y-0"
-            leave-active-class="transition-transform duration-300 ease-in"
-            leave-from-class="translate-y-0"
-            leave-to-class="translate-y-full"
-          >
-            <div
-              v-if="showControls && images.length > 1 && !sidePanel"
-              class="absolute bottom-0 left-0 right-0 p-2 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50]"
-            >
-              <div class="overflow-x-auto flex space-x-2 pb-1 px-1">
-                <div
-                  v-for="(image, idx) in images"
-                  :key="`mobile_thumb_${id}_${idx}`"
-                  class="flex-shrink-0 w-16 h-16 rounded-lg relative cursor-pointer"
-                  :class="{ 'ring-2 ring-fv-primary-500 ring-offset-1 ring-offset-fv-neutral-900': idx === modelValue }"
-                  @click="$eventBus.emit(`${id}GalleryImage`, idx)"
-                >
-                  <img
-                    v-if="imageComponent === 'img'"
-                    class="w-full h-full object-cover rounded-lg transition duration-200"
-                    :style="{
-                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
-                    }"
-                    :src="getThumbnailUrl(image)"
-                    :alt="`Thumbnail ${idx + 1}`"
-                  >
-                  <component
-                    :is="imageComponent"
-                    v-else
-                    :image="getThumbnailUrl(image).image"
-                    :variant="getThumbnailUrl(image).variant"
-                    :alt="getThumbnailUrl(image).alt"
-                    class="w-full h-full object-cover rounded-lg transition duration-200"
-                    :style="{
-                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
-                    }"
-                  />
-                </div>
-              </div>
-            </div>
-          </transition>
-        </div>
-      </div>
-    </transition>
-
-    <!-- Thumbnail Grid/Mason/Custom Layouts -->
-    <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="gallery-grid">
-      <div
-        :class="{
-          'masonry-grid': mode === 'mason',
-          'standard-grid': 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'">
-            <div
-              v-if="i + (1 % gridHeight) === 0"
-              class="masonry-column relative"
-            >
-              <div v-if="ranking" class="img-gallery-ranking">
-                {{ i }}
-              </div>
-
-              <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
-                <div class="masonry-item">
-                  <img
-                    v-if="i + j - 2 < images.length && imageComponent === 'img'"
-                    class="h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02]"
-                    :src="getThumbnailUrl(images[i + j - 2])"
-                    :alt="`Gallery image ${i + j - 1}`"
-                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
-                  >
-                  <component
-                    :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 w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02] ${getBorderColor(
-                      images[i + j - 2],
-                    )}`"
-                    :likes="getThumbnailUrl(images[i + j - 2]).likes"
-                    :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
-                    :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 v-else class="grid-item relative group">
-            <div v-if="ranking" class="img-gallery-ranking">
-              {{ i }}
-            </div>
-            <div class="overflow-hidden rounded-lg">
-              <img
-                v-if="imageComponent === 'img'"
-                class="h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03]"
-                :src="getThumbnailUrl(images[i - 1])"
-                :alt="`Gallery image ${i}`"
-                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
-              >
-              <component
-                :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 w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03] ${getBorderColor(
-                  images[i - 1],
-                )}`"
-                :likes="getThumbnailUrl(images[i - 1]).likes"
-                :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
-                :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
-                :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
-                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
-              />
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <!-- Button Mode -->
-    <button
-      v-if="mode === 'button'"
-      :class="`btn ${buttonType ? buttonType : 'primary'} defaults relative overflow-hidden group`"
-      @click="openGalleryImage(0)"
-    >
-      <span class="relative z-10">{{ buttonText ? buttonText : $t("open_gallery_cta") }}</span>
-      <span class="absolute inset-0 bg-white/10 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
-    </button>
-  </div>
-</template>
-
-<style scoped>
-/* Fix for top controls to ensure they're always visible */
-.fixed.top-0 {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  z-index: 51 !important;
-}
-
-/* Transition styles for next (right) navigation */
-.slide-next-enter-active,
-.slide-next-leave-active {
-  transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
-}
-
-.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 */
-.slide-prev-enter-active,
-.slide-prev-leave-active {
-  transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
-}
-
-.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%);
-  filter: blur(10px);
-}
-
-/* Modern grids */
-.gallery-grid {
-  min-height: 200px;
-}
-
-.standard-grid {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 0.75rem;
-}
-
-@media (min-width: 480px) {
-  .standard-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .standard-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .standard-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media (min-width: 1280px) {
-  .standard-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-
-@media (min-width: 1536px) {
-  .standard-grid {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-.masonry-grid {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 0.75rem;
-}
-
-@media (min-width: 480px) {
-  .masonry-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .masonry-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .masonry-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.masonry-column {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.masonry-item {
-  break-inside: avoid;
-  margin-bottom: 0.75rem;
-}
-
-.grid-item {
-  break-inside: avoid;
-  margin-bottom: 0.75rem;
-}
-
-.img-gallery-ranking {
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: white;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  z-index: 10;
-}
-</style>