@fy-/fws-vue 2.2.45 → 2.2.47

package/components/ui/DefaultModal.vue

@@ -1,13 +1,11 @@
 <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'
 
+// Static counter for managing z-index across all modals
+let modalCounter = 0
+
 const props = withDefaults(
   defineProps<{
     id: string
@@ -30,14 +28,83 @@ const eventBus = useEventBus()
 const isOpen = ref<boolean>(false)
 const modalRef = ref<HTMLElement | null>(null)
 let previouslyFocusedElement: HTMLElement | null = null
+let focusableElements: HTMLElement[] = []
+
+// Dynamic z-index to ensure the most recently opened modal is on top
+const baseZIndex = 100 // Use a higher base z-index to avoid conflicts
+const zIndex = ref<number>(baseZIndex)
+
+// 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) {
+  // Only handle events for the top-most modal
+  if (!isOpen.value) return
+
+  // Get all active modals
+  const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+  // If this is not the top-most modal, don't handle keyboard events
+  if (activeModals.length > 0 && modalRef.value !== activeModals[activeModals.length - 1]) {
+    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
+
+    // Set this modal's z-index higher than any existing modal
+    modalCounter += 3 // Increase by 3 to handle backdrop, container and content
+    zIndex.value = baseZIndex + modalCounter
+
+    // Only manage body overflow for the first opened modal
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length === 0) {
+      document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
   }
   if (value === false) {
     if (props.onClose) props.onClose()
+
+    // Only restore body overflow if this is the last open modal
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length <= 1) {
+      document.body.style.overflow = '' // Restore scrolling
+    }
+
+    document.removeEventListener('keydown', handleKeyDown)
     if (previouslyFocusedElement) {
       previouslyFocusedElement.focus()
     }
@@ -45,54 +112,88 @@ 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)
 
-/*
-watch(isOpen, async (newVal) => {
-  if (newVal) {
-    await nextTick()
-    modalRef.value?.focus()
+  // Only restore body overflow if this modal was open when unmounted
+  if (isOpen.value) {
+    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
+    if (activeModals.length <= 1) {
+      document.body.style.overflow = '' // Restore scrolling
+    }
   }
 })
-  */
+
+// 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"
+      :style="{ zIndex }"
       role="dialog"
       :aria-labelledby="title ? `${props.id}-title` : undefined"
-      @close="setModal"
+      aria-modal="true"
+      data-modal-active="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"
+        :style="{ zIndex: zIndex + 1 }"
+        @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"
+          :style="{ zIndex: zIndex + 2 }"
+          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 +213,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.47",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",