@fy-/fws-vue 2.2.45 → 2.2.46

package/components/ui/DefaultDropdown.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-
+import { onMounted, onUnmounted, ref } from 'vue'
 import ScaleTransition from './transitions/ScaleTransition.vue'
 
 const props = defineProps<{
@@ -17,6 +16,17 @@ const props = defineProps<{
   closeDropdown: () => void
 }>()
 
+const dropdownRef = ref<HTMLElement | null>(null)
+
+// Custom implementation of click-outside functionality
+function handleClickOutsideElement(event: MouseEvent) {
+  if (props.preventClickOutside) return
+
+  if (props.show && dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    props.handleClickOutside()
+  }
+}
+
 function handleCloseOnEscape(event: KeyboardEvent) {
   if (['Escape', 'Esc'].includes(event.key)) {
     props.closeDropdown()
@@ -25,10 +35,12 @@ function handleCloseOnEscape(event: KeyboardEvent) {
 
 onMounted(() => {
   document.addEventListener('keydown', handleCloseOnEscape)
+  document.addEventListener('click', handleClickOutsideElement)
 })
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleCloseOnEscape)
+  document.removeEventListener('click', handleClickOutsideElement)
 })
 </script>
 
@@ -42,7 +54,7 @@ onUnmounted(() => {
     <ScaleTransition>
       <div
         v-show="props.show"
-        v-click-outside="props.handleClickOutside"
+        ref="dropdownRef"
         :class="props.position"
         :style="props.coordinates"
         class="absolute z-[100] w-[200px] mt-2 rounded-sm bg-white dark:bg-fv-neutral-900 shadow-lg border border-fv-neutral-100 dark:border-fv-neutral-600 focus:outline-none"

package/components/ui/DefaultGallery.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { APIPaging } from '../../composables/rest'
-import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
 import {
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
@@ -69,9 +68,19 @@ const direction = ref<'next' | 'prev'>('next')
 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) {
+      document.addEventListener('keydown', handleKeyboardInput)
+      document.addEventListener('keyup', handleKeyboardRelease)
+    }
   }
   else {
     if (props.onClose) props.onClose()
+    document.body.style.overflow = '' // Restore scrolling
+    if (!import.meta.env.SSR) {
+      document.removeEventListener('keydown', handleKeyboardInput)
+      document.removeEventListener('keyup', handleKeyboardRelease)
+    }
   }
   isGalleryOpen.value = value
 }
@@ -164,8 +173,14 @@ function getBorderColor(i: any) {
 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'
@@ -191,54 +206,60 @@ function closeGallery() {
   setModal(false)
 }
 
+// Click outside gallery content to close
+function handleBackdropClick(event: MouseEvent) {
+  if (event.target === event.currentTarget) {
+    setModal(false)
+  }
+}
+
 onMounted(() => {
   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)
-  }
 })
 
 onUnmounted(() => {
   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)
+  if (!import.meta.env.SSR) {
+    document.removeEventListener('keydown', handleKeyboardInput)
+    document.removeEventListener('keyup', handleKeyboardRelease)
+    document.body.style.overflow = '' // Ensure body scrolling is restored
   }
 })
 </script>
 
 <template>
   <div>
-    <TransitionRoot
-      :show="isGalleryOpen"
-      as="template"
-      enter="duration-300 ease-out"
-      enter-from="opacity-0"
-      enter-to="opacity-100"
-      leave="duration-200 ease-in"
-      leave-from="opacity-100"
-      leave-to="opacity-0"
+    <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"
     >
-      <Dialog
-        :open="isGalleryOpen"
+      <div
+        v-if="isGalleryOpen"
         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"
+        role="dialog"
+        aria-modal="true"
+        @click="handleBackdropClick"
       >
-        <DialogPanel
+        <div
           class="relative w-full max-w-full flex flex-col justify-center items-center"
           style="z-index: 38"
+          @click.stop
         >
           <div class="flex flex-grow gap-4 w-full max-w-full">
             <div class="flex-grow h-[100vh] flex items-center relative">
               <button
                 class="btn w-9 h-9 rounded-full absolute top-4 left-2"
                 style="z-index: 39"
+                aria-label="Close gallery"
                 @click="setModal(false)"
               >
                 <component :is="closeIcon" class="w-8 h-8" />
@@ -253,6 +274,7 @@ onUnmounted(() => {
                   <button
                     v-if="images.length > 1"
                     class="btn p-1 rounded-full"
+                    aria-label="Previous image"
                     @click="goPrevImage()"
                   >
                     <ArrowLeftCircleIcon class="w-8 h-8" />
@@ -291,6 +313,7 @@ onUnmounted(() => {
                             v-if="modelValueSrc && imageComponent === 'img'"
                             class="shadow max-w-full h-auto object-contain max-h-[85vh]"
                             :src="modelValueSrc"
+                            :alt="`Gallery image ${modelValue + 1}`"
                           >
                           <component
                             :is="imageComponent"
@@ -320,6 +343,7 @@ onUnmounted(() => {
                       'right-2': !sidePanel,
                     }"
                     style="z-index: 39"
+                    :aria-label="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
                     @click="() => (sidePanel = !sidePanel)"
                   >
                     <ChevronDoubleRightIcon v-if="sidePanel" class="w-7 h-7" />
@@ -328,6 +352,7 @@ onUnmounted(() => {
                   <button
                     v-if="images.length > 1"
                     class="btn p-1 rounded-full"
+                    aria-label="Next image"
                     @click="goNextImage()"
                   >
                     <ArrowRightCircleIcon class="w-8 h-8" />
@@ -336,57 +361,60 @@ onUnmounted(() => {
               </div>
             </div>
 
-            <TransitionRoot
-              :show="sidePanel"
-              as="div"
-              enter="transform transition ease-in-out duration-300"
-              enter-from="translate-x-full"
-              enter-to="translate-x-0"
-              leave="transform transition ease-in-out duration-300"
-              leave-from="translate-x-0"
-              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"
+            <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"
             >
-              <!-- Side panel content -->
-              <div v-if="paging" class="flex items-center justify-center">
-                <DefaultPaging :id="id" :items="paging" />
-              </div>
-              <div class="grid grid-cols-2 gap-2 p-2">
-                <div
-                  v-for="i in images.length"
-                  :key="`bg_${id}_${i}`"
-                  class="hover:!brightness-100"
-                  :style="{
-                    filter:
-                      i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.5)',
-                  }"
-                >
-                  <img
-                    v-if="imageComponent === 'img'"
-                    :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
-                      images[i - 1],
-                    )}`"
-                    :src="getThumbnailUrl(images[i - 1])"
-                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              <div
+                v-if="sidePanel"
+                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 :id="id" :items="paging" />
+                </div>
+                <div class="grid grid-cols-2 gap-2 p-2">
+                  <div
+                    v-for="i in images.length"
+                    :key="`bg_${id}_${i}`"
+                    class="hover:!brightness-100"
+                    :style="{
+                      filter:
+                        i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.5)',
+                    }"
                   >
-                  <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)"
-                  />
+                    <img
+                      v-if="imageComponent === 'img'"
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow  ${getBorderColor(
+                        images[i - 1],
+                      )}`"
+                      :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 ${getBorderColor(
+                        images[i - 1],
+                      )}`"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    />
+                  </div>
                 </div>
               </div>
-            </TransitionRoot>
+            </transition>
           </div>
-        </DialogPanel>
-      </Dialog>
-    </TransitionRoot>
+        </div>
+      </div>
+    </transition>
 
     <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="min-h-[600px]">
       <div
@@ -415,6 +443,7 @@ onUnmounted(() => {
                     v-if="i + j - 2 < images.length && imageComponent === 'img'"
                     class="h-auto max-w-full rounded-lg cursor-pointer"
                     :src="getThumbnailUrl(images[i + j - 2])"
+                    :alt="`Gallery image ${i + j - 1}`"
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                   >
                   <component
@@ -444,6 +473,7 @@ onUnmounted(() => {
               v-if="imageComponent === 'img'"
               class="h-auto max-w-full rounded-lg cursor-pointer"
               :src="getThumbnailUrl(images[i - 1])"
+              :alt="`Gallery image ${i}`"
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
             >
             <component

package/components/ui/DefaultModal.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import {
-  Dialog,
-  DialogPanel,
-  TransitionRoot,
-} from '@headlessui/vue'
 import { XCircleIcon } from '@heroicons/vue/24/solid'
-import { h, onMounted, onUnmounted, ref } from 'vue'
+import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 const props = withDefaults(
@@ -30,14 +25,55 @@ const eventBus = useEventBus()
 const isOpen = ref<boolean>(false)
 const modalRef = ref<HTMLElement | null>(null)
 let previouslyFocusedElement: HTMLElement | null = null
+let focusableElements: HTMLElement[] = []
+
+// Trap focus within modal for accessibility
+function getFocusableElements(element: HTMLElement): HTMLElement[] {
+  return Array.from(
+    element.querySelectorAll(
+      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+    ),
+  ).filter(
+    el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
+  ) as HTMLElement[]
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isOpen.value) return
+
+  // Close on escape
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    setModal(false)
+    return
+  }
+
+  // Handle tab trapping
+  if (event.key === 'Tab' && focusableElements.length > 0) {
+    // If shift + tab on first element, focus last element
+    if (event.shiftKey && document.activeElement === focusableElements[0]) {
+      event.preventDefault()
+      focusableElements[focusableElements.length - 1].focus()
+    }
+    // If tab on last element, focus first element
+    else if (!event.shiftKey && document.activeElement === focusableElements[focusableElements.length - 1]) {
+      event.preventDefault()
+      focusableElements[0].focus()
+    }
+  }
+}
 
 function setModal(value: boolean) {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
+    document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
+    document.addEventListener('keydown', handleKeyDown)
   }
   if (value === false) {
     if (props.onClose) props.onClose()
+    document.body.style.overflow = '' // Restore scrolling
+    document.removeEventListener('keydown', handleKeyDown)
     if (previouslyFocusedElement) {
       previouslyFocusedElement.focus()
     }
@@ -45,54 +81,80 @@ function setModal(value: boolean) {
   isOpen.value = value
 }
 
+// After modal is opened, set focus and collect focusable elements
+watch(isOpen, async (newVal) => {
+  if (newVal) {
+    await nextTick()
+    if (modalRef.value) {
+      focusableElements = getFocusableElements(modalRef.value)
+
+      // Focus the first focusable element or the close button if available
+      const closeButton = modalRef.value.querySelector('button[aria-label="Close modal"]') as HTMLElement
+      if (closeButton) {
+        closeButton.focus()
+      }
+      else if (focusableElements.length > 0) {
+        focusableElements[0].focus()
+      }
+      else {
+        // If no focusable elements, focus the modal itself
+        modalRef.value.focus()
+      }
+    }
+  }
+})
+
 onMounted(() => {
   eventBus.on(`${props.id}Modal`, setModal)
 })
 
 onUnmounted(() => {
   eventBus.off(`${props.id}Modal`, setModal)
+  document.removeEventListener('keydown', handleKeyDown)
+  document.body.style.overflow = '' // Ensure body scrolling is restored
 })
 
-/*
-watch(isOpen, async (newVal) => {
-  if (newVal) {
-    await nextTick()
-    modalRef.value?.focus()
+// Click outside to close
+function handleBackdropClick(event: MouseEvent) {
+  // Close only if clicking the backdrop, not the modal content
+  if (event.target === event.currentTarget) {
+    setModal(false)
   }
-})
-  */
+}
 </script>
 
 <template>
-  <TransitionRoot
-    :show="isOpen"
-    as="template"
-    enter="duration-300 ease-out"
-    enter-from="opacity-0"
-    enter-to="opacity-100"
-    leave="duration-200 ease-in"
-    leave-from="opacity-100"
-    leave-to="opacity-0"
+  <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"
   >
-    <Dialog
-      :open="isOpen"
+    <div
+      v-if="isOpen"
       class="fixed inset-0 overflow-y-auto"
       style="z-index: 40"
-      aria-modal="true"
       role="dialog"
       :aria-labelledby="title ? `${props.id}-title` : undefined"
-      @close="setModal"
+      aria-modal="true"
     >
-      <DialogPanel
-        ref="modalRef"
-        tabindex="-1"
+      <!-- Backdrop with click to close functionality -->
+      <div
         class="flex absolute backdrop-blur-[8px] inset-0 flex-col items-center justify-center min-h-screen text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
         style="z-index: 41"
+        @click="handleBackdropClick"
       >
+        <!-- Modal panel -->
         <div
+          ref="modalRef"
           :class="`relative ${mSize} max-w-6xl max-h-full ${ofy} bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
           style="z-index: 42"
+          tabindex="-1"
+          @click.stop
         >
+          <!-- Header with title if provided -->
           <div
             v-if="title"
             class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-fv-neutral-700"
@@ -112,11 +174,12 @@ watch(isOpen, async (newVal) => {
               <component :is="closeIcon" class="w-7 h-7" />
             </button>
           </div>
+          <!-- Content area -->
           <div class="p-3 space-y-3">
             <slot />
           </div>
         </div>
-      </DialogPanel>
-    </Dialog>
-  </TransitionRoot>
+      </div>
+    </div>
+  </transition>
 </template>

package/package.json

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