@fy-/fws-vue 2.2.49 → 2.2.51

package/components/ui/DefaultConfirm.vue

@@ -39,14 +39,23 @@ function showConfirm(data: ConfirmModalData) {
   title.value = data.title
   desc.value = data.desc
   onConfirm.value = data.onConfirm
-  isOpen.value = true
+
+  // Emit event first to ensure it's registered before opening the modal
   eventBus.emit('confirmModal', true)
-  nextTick(() => {
-    previouslyFocusedElement = document.activeElement as HTMLElement
-    if (modalRef.value) {
-      modalRef.value.focus()
-    }
-  })
+
+  // Force this to happen at the end of the event loop
+  // to ensure it happens after any other modal operations
+  setTimeout(() => {
+    isOpen.value = true
+    eventBus.emit('confirmModal', true)
+
+    nextTick(() => {
+      previouslyFocusedElement = document.activeElement as HTMLElement
+      if (modalRef.value) {
+        modalRef.value.focus()
+      }
+    })
+  }, 0)
 }
 
 onMounted(() => {

package/components/ui/DefaultModal.vue

@@ -3,8 +3,56 @@ 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
+// Use a shared global registry in the window to track all modals across instances
+// This ensures proper z-index stacking even when modals are in different components
+if (typeof window !== 'undefined') {
+  // @ts-expect-error: TS doesn't know about the global registry
+  window.__FWS_MODAL_REGISTRY = window.__FWS_MODAL_REGISTRY || {
+    modals: new Map<string, number>(),
+    getNextZIndex() {
+      const baseZIndex = 40
+      const maxZIndex = 59
+
+      // If no modals, start at base
+      if (this.modals.size === 0) {
+        return baseZIndex
+      }
+
+      // Find highest z-index
+      const values = Array.from(this.modals.values())
+      // @ts-expect-error: TS doesn't know that values are numbers
+      const highestZIndex = Math.max(...values)
+
+      // Calculate next z-index
+      const nextZIndex = highestZIndex + 1
+
+      // If we're approaching the upper limit, reset all
+      if (nextZIndex >= maxZIndex) {
+        this.resetAllZIndexes()
+        return baseZIndex
+      }
+
+      return nextZIndex
+    },
+    resetAllZIndexes() {
+      // Sort by current z-index
+      const entries = Array.from(this.modals.entries())
+      // @ts-expect-error: TS doesn't know that entries are tuples
+      entries.sort((a, b) => a[1] - b[1])
+
+      // Reassign starting from base
+      let newIndex = 40
+      // @ts-expect-error: TS doesn't know that entries are tuples
+      entries.forEach(([id, _]) => {
+        this.modals.set(id, newIndex)
+        newIndex++
+      })
+    },
+  }
+}
+
+// @ts-expect-error: TS doesn't know about the global registry
+const modalRegistry = typeof window !== 'undefined' ? window.__FWS_MODAL_REGISTRY : { modals: new Map() }
 
 const props = withDefaults(
   defineProps<{
@@ -31,7 +79,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 +98,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 +126,46 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
+// Check if this modal is the top-most (highest z-index)
+function isTopMostModal(id: string): boolean {
+  if (modalRegistry.modals.size === 0) return false
+
+  // Find the modal with the highest z-index
+  const entries = Array.from(modalRegistry.modals.entries())
+  const highestEntry = entries.reduce((prev, current) =>
+    // @ts-expect-error: TS doesn't know that entries are tuples
+    current[1] > prev[1] ? current : prev,
+  )
+
+  // @ts-expect-error: TS doesn't know that entries are tuples
+  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
+    // Get the next z-index from the global registry
+    const newZIndex = modalRegistry.getNextZIndex()
+
+    // Register this modal in the global registry with a unique ID (combines component id with instance id)
+    const uniqueId = `${props.id}-${Date.now()}`
+    modalRegistry.modals.set(uniqueId, newZIndex)
+
+    // Store the unique ID as a data attribute for future reference
+    nextTick(() => {
+      const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+      if (modalElement) {
+        modalElement.setAttribute('data-modal-unique-id', uniqueId)
+      }
+    })
+
+    // Set this modal's z-index
+    zIndex.value = newZIndex
 
     // Only manage body overflow for the first opened modal
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length === 0) {
+    if (modalRegistry.modals.size === 1) {
       document.body.style.overflow = 'hidden' // Prevent scrolling when modal is open
     }
 
@@ -98,9 +174,17 @@ function setModal(value: boolean) {
   if (value === false) {
     if (props.onClose) props.onClose()
 
+    // Find and remove this modal from the registry
+    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+    if (modalElement) {
+      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
+      if (uniqueId) {
+        modalRegistry.modals.delete(uniqueId)
+      }
+    }
+
     // Only restore body overflow if this is the last open modal
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length <= 1) {
+    if (modalRegistry.modals.size === 0) {
       document.body.style.overflow = '' // Restore scrolling
     }
 
@@ -112,6 +196,8 @@ 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) {
@@ -143,10 +229,18 @@ onUnmounted(() => {
   eventBus.off(`${props.id}Modal`, setModal)
   document.removeEventListener('keydown', handleKeyDown)
 
-  // Only restore body overflow if this modal was open when unmounted
+  // Clean up the modal registry if this modal was open when unmounted
   if (isOpen.value) {
-    const activeModals = document.querySelectorAll('[data-modal-active="true"]')
-    if (activeModals.length <= 1) {
+    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
+    if (modalElement) {
+      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
+      if (uniqueId) {
+        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
     }
   }
@@ -162,63 +256,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.51",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",