@fy-/fws-vue 2.2.52 → 2.2.55

package/components/ui/DefaultGallery.vue

@@ -9,7 +9,7 @@ import {
   InformationCircleIcon,
   XMarkIcon,
 } from '@heroicons/vue/24/solid'
-import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import DefaultPaging from './DefaultPaging.vue'
 
@@ -18,8 +18,9 @@ const eventBus = useEventBus()
 const sidePanel = ref<boolean>(true)
 const showControls = ref<boolean>(true)
 const isFullscreen = ref<boolean>(false)
-const infoPanel = ref<boolean>(false)
+const infoPanel = ref<boolean>(true) // Show info panel by default
 const touchStartTime = ref<number>(0)
+const infoHeight = ref<number>(0)
 
 const props = withDefaults(
   defineProps<{
@@ -107,7 +108,8 @@ function setModal(value: boolean) {
   }
   isGalleryOpen.value = value
   showControls.value = true
-  infoPanel.value = false
+  // Keep info panel open by default
+  infoPanel.value = true
 }
 
 function openGalleryImage(index: number | undefined) {
@@ -184,6 +186,17 @@ function toggleControls() {
 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() {
@@ -312,14 +325,44 @@ function handleBackdropClick(event: MouseEvent) {
 }
 
 watch(currentImage, () => {
-  // Reset info panel when image changes
-  infoPanel.value = false
+  // Keep info panel open when image changes
+  infoPanel.value = true
+
+  // Update info height after image changes
+  nextTick(() => {
+    updateInfoHeight()
+  })
 })
 
+// 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`)
+    }
+  })
+}
+
 onMounted(() => {
   eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
+
+  // Initialize info height once mounted
+  updateInfoHeight()
+
+  // Set up a resize observer to track info panel height changes
+  const resizeObserver = new ResizeObserver(() => {
+    updateInfoHeight()
+  })
+
+  const infoElement = document.querySelector('.info-panel-slot')
+  if (infoElement) {
+    resizeObserver.observe(infoElement)
+  }
 })
 
 onUnmounted(() => {
@@ -415,14 +458,20 @@ onUnmounted(() => {
                             <component
                               :is="videoComponent"
                               :src="isVideo(images[modelValue])"
-                              class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                              class="shadow max-w-full h-auto object-contain"
+                              :style="{
+                                maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                              }"
                             />
                           </ClientOnly>
                         </template>
                         <template v-else>
                           <img
                             v-if="modelValueSrc && imageComponent === 'img'"
-                            class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                            class="shadow max-w-full h-auto object-contain"
+                            :style="{
+                              maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                            }"
                             :src="modelValueSrc"
                             :alt="`Gallery image ${modelValue + 1}`"
                           >
@@ -432,7 +481,10 @@ onUnmounted(() => {
                             :image="modelValueSrc.image"
                             :variant="modelValueSrc.variant"
                             :alt="modelValueSrc.alt"
-                            class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                            class="shadow max-w-full h-auto object-contain"
+                            :style="{
+                              maxHeight: infoPanel ? 'calc(85vh - var(--info-height, 0px))' : '85vh',
+                            }"
                           />
                         </template>
                       </div>
@@ -440,7 +492,8 @@ onUnmounted(() => {
                       <!-- Image Slot Content -->
                       <div
                         v-if="infoPanel"
-                        class="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"
+                        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>
@@ -563,7 +616,8 @@ onUnmounted(() => {
               <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"
-                  title="Toggle info"
+                  :class="{ 'bg-fv-primary-500/70': infoPanel }"
+                  :title="infoPanel ? 'Hide info' : 'Show info'"
                   @click="toggleInfoPanel"
                 >
                   <InformationCircleIcon class="w-5 h-5" />

package/components/ui/DefaultModal.vue

@@ -164,11 +164,6 @@ function setModal(value: boolean) {
     // Set this modal's z-index
     zIndex.value = newZIndex
 
-    // Only manage body overflow for the first opened modal
-    if (modalRegistry.modals.size === 1) {
-      document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
-    }
-
     document.addEventListener('keydown', handleKeyDown)
   }
   if (value === false) {
@@ -183,11 +178,6 @@ function setModal(value: boolean) {
       }
     }
 
-    // Only restore body overflow if this is the last open modal
-    if (modalRegistry.modals.size === 0) {
-      document.body.style.overflow = '' // Restore scrolling
-    }
-
     document.removeEventListener('keydown', handleKeyDown)
     if (previouslyFocusedElement) {
       previouslyFocusedElement.focus()
@@ -196,8 +186,6 @@ function setModal(value: boolean) {
   isOpen.value = value
 }
 
-// These functions have been moved to the global registry object
-
 // After modal is opened, set focus and collect focusable elements
 watch(isOpen, async (newVal) => {
   if (newVal) {
@@ -238,11 +226,6 @@ onUnmounted(() => {
         modalRegistry.modals.delete(uniqueId)
       }
     }
-
-    // Only restore body overflow if this is the last open modal
-    if (modalRegistry.modals.size === 0) {
-      document.body.style.overflow = '' // Restore scrolling
-    }
   }
 })
 

package/package.json

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