@fy-/fws-vue 2.2.49 → 2.2.50

package/components/ui/DefaultModal.vue

@@ -3,8 +3,8 @@ import { XCircleIcon } from '@heroicons/vue/24/solid'
 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
+// Global registry to track all open modals and their z-indexes
+const openModals: Map<string, number> = new Map()
 
 const props = withDefaults(
   defineProps<{
@@ -31,7 +31,8 @@ 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
+// Base z-index between 40 and 60 as required
+const baseZIndex = 40 // Starting z-index value
 const zIndex = ref<number>(baseZIndex)
 
 // Trap focus within modal for accessibility
@@ -49,10 +50,9 @@ 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]) {
+  // Check if this modal is the top-most one
+  const isTopMost = isTopMostModal(props.id)
+  if (!isTopMost) {
     return
   }
 
@@ -78,18 +78,36 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
+// Check if this modal is the top-most (highest z-index)
+function isTopMostModal(id: string): boolean {
+  if (openModals.size === 0) return false
+
+  // Find the modal with the highest z-index
+  const entries = Array.from(openModals.entries())
+  const highestEntry = entries.reduce((prev, current) =>
+    current[1] > prev[1] ? current : prev,
+  )
+
+  // Return true if this modal has the highest z-index
+  return highestEntry[0] === id
+}
+
 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
+    // Calculate the new z-index for this modal
+    const highestZIndex = calculateHighestZIndex()
+
+    // Register this modal in the global registry
+    openModals.set(props.id, highestZIndex)
+
+    // Set this modal's z-index
+    zIndex.value = highestZIndex
 
     // Only manage body overflow for the first opened modal
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length === 0) {
+    if (openModals.size === 1) {
       document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
     }
 
@@ -98,9 +116,11 @@ function setModal(value: boolean) {
   if (value === false) {
     if (props.onClose) props.onClose()
 
+    // Remove this modal from the registry
+    openModals.delete(props.id)
+
     // Only restore body overflow if this is the last open modal
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length <= 1) {
+    if (openModals.size === 0) {
       document.body.style.overflow = '' // Restore scrolling
     }
 
@@ -112,6 +132,48 @@ function setModal(value: boolean) {
   isOpen.value = value
 }
 
+// Calculate the highest z-index for a new modal
+function calculateHighestZIndex(): number {
+  // Start with the base z-index
+  let newZIndex = baseZIndex
+
+  // Find the highest z-index currently in use
+  if (openModals.size > 0) {
+    const values = Array.from(openModals.values())
+    newZIndex = Math.max(...values) + 1
+  }
+
+  // Ensure we stay within range (40-59)
+  if (newZIndex >= 59) {
+    // If we're approaching the upper limit, reset all z-indexes
+    resetAllModalZIndexes()
+    return baseZIndex + 1
+  }
+
+  return newZIndex
+}
+
+// Reset all modal z-indexes when we approach the upper limit
+function resetAllModalZIndexes() {
+  // Sort modals by their current z-index to maintain relative ordering
+  const entries = Array.from(openModals.entries())
+  entries.sort((a, b) => a[1] - b[1])
+
+  // Reassign z-indexes starting from baseZIndex
+  let newIndex = baseZIndex
+  entries.forEach(([id, _]) => {
+    openModals.set(id, newIndex)
+
+    // Find the modal element and update its z-index
+    const modalElement = document.querySelector(`[data-modal-id="${id}"]`) as HTMLElement
+    if (modalElement) {
+      modalElement.style.zIndex = newIndex.toString()
+    }
+
+    newIndex++
+  })
+}
+
 // After modal is opened, set focus and collect focusable elements
 watch(isOpen, async (newVal) => {
   if (newVal) {
@@ -162,63 +224,66 @@ function handleBackdropClick(event: MouseEvent) {
 </script>
 
 <template>
-  <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="isOpen"
-      class="fixed inset-0 overflow-y-auto"
-      :style="{ zIndex }"
-      role="dialog"
-      :aria-labelledby="title ? `${props.id}-title` : undefined"
-      aria-modal="true"
-      data-modal-active="true"
+  <ClientOnly>
+    <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"
     >
-      <!-- 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="{ zIndex: zIndex + 1 }"
-        @click="handleBackdropClick"
+        v-if="isOpen"
+        class="fixed inset-0 overflow-y-auto"
+        :style="{ zIndex }"
+        role="dialog"
+        :aria-labelledby="title ? `${props.id}-title` : undefined"
+        aria-modal="true"
+        data-modal-active="true"
+        :data-modal-id="props.id"
       >
-        <!-- Modal panel -->
+        <!-- Backdrop with click to close functionality -->
         <div
-          ref="modalRef"
-          :class="`relative ${mSize} max-w-6xl max-h-full ${ofy} bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
-          :style="{ zIndex: zIndex + 2 }"
-          tabindex="-1"
-          @click.stop
+          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="{ zIndex }"
+          @click="handleBackdropClick"
         >
-          <!-- Header with title if provided -->
+          <!-- Modal panel -->
           <div
-            v-if="title"
-            class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-fv-neutral-700"
+            ref="modalRef"
+            :class="`relative ${mSize} max-w-6xl max-h-full ${ofy} bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
+            :style="{ zIndex }"
+            tabindex="-1"
+            @click.stop
           >
-            <slot name="before" />
-            <h2
+            <!-- Header with title if provided -->
+            <div
               v-if="title"
-              :id="`${props.id}-title`"
-              class="text-xl font-semibold text-fv-neutral-900 dark:text-white"
-              v-html="title"
-            />
-            <button
-              class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white"
-              aria-label="Close modal"
-              @click="setModal(false)"
+              class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-fv-neutral-700"
             >
-              <component :is="closeIcon" class="w-7 h-7" />
-            </button>
-          </div>
-          <!-- Content area -->
-          <div class="p-3 space-y-3">
-            <slot />
+              <slot name="before" />
+              <h2
+                v-if="title"
+                :id="`${props.id}-title`"
+                class="text-xl font-semibold text-fv-neutral-900 dark:text-white"
+                v-html="title"
+              />
+              <button
+                class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white"
+                aria-label="Close modal"
+                @click="setModal(false)"
+              >
+                <component :is="closeIcon" class="w-7 h-7" />
+              </button>
+            </div>
+            <!-- Content area -->
+            <div class="p-3 space-y-3">
+              <slot />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </ClientOnly>
 </template>

package/package.json

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