@fy-/fws-vue 2.3.7 → 2.3.9

package/components/fws/CmsArticleSingle.vue

@@ -2,7 +2,8 @@
 import type { Component } from 'vue'
 import type { LazyHead } from '../../composables/seo'
 import type { BreadcrumbLink } from '../../types'
-import { defineWebPage, useSchemaOrg } from '@unhead/schema-org'
+import { defineWebPage } from '@unhead/schema-org'
+import { useSchemaOrg } from '@unhead/schema-org/vue'
 import { ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRest } from '../../composables/rest'

package/components/ui/DefaultBreadcrumb.vue

@@ -2,7 +2,8 @@
 import type { BreadcrumbLink } from '../../types'
 import { getURL, stringHash } from '@fy-/fws-js'
 import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/24/solid'
-import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org'
+import { defineBreadcrumb } from '@unhead/schema-org'
+import { useSchemaOrg } from '@unhead/schema-org/vue'
 
 const props = withDefaults(
   defineProps<{

package/components/ui/DefaultInput.vue

@@ -4,7 +4,7 @@ import { computed, ref, toRef } from 'vue'
 import { useTranslation } from '../../composables/translations'
 import DefaultTagInput from './DefaultTagInput.vue'
 
-type modelValueType = string | number | string[] | number[] | undefined
+type modelValueType = string | number | string[] | number[] | Record<string, any> | undefined
 type checkboxValueType = any[] | Set<any> | undefined | boolean
 
 const props = withDefaults(

package/components/ui/DefaultModal.vue

@@ -1,323 +1,304 @@
 <script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/24/solid'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { XCircleIcon } from '@heroicons/vue/24/solid'
+import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
-import FadeTransition from './transitions/FadeTransition.vue'
-
-// Props interface for the modal component
-interface ModalProps {
-  /** Unique identifier for the modal (required) */
-  id: string
-  /** Optional title to be displayed in the modal header */
-  title?: string
-  /** Optional callback function to be called when the modal is opened */
-  onOpen?: Function
-  /** Optional callback function to be called when the modal is closed */
-  onClose?: Function
-  /** Optional size class for the modal (defaults to 'md') */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-  /** Optional position class for the modal (defaults to 'center') */
-  position?: 'center' | 'top'
-  /** Whether to disable closing the modal when clicking outside (defaults to false) */
-  persistent?: boolean
-  /** Whether to disable the close button (defaults to false) */
-  hideCloseButton?: boolean
-  /** Whether to disable the close on escape key (defaults to false) */
-  noEscDismiss?: boolean
+
+// 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++
+      })
+    },
+  }
 }
 
-// Default prop values
-const props = withDefaults(defineProps<ModalProps>(), {
-  size: 'md',
-  position: 'center',
-  persistent: false,
-  hideCloseButton: false,
-  noEscDismiss: false,
-})
+// @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<{
+    id: string
+    title?: string
+    onOpen?: Function
+    onClose?: Function
+    closeIcon?: object
+    mSize?: string
+    ofy?: string
+  }>(),
+  {
+    closeIcon: () => h(XCircleIcon),
+    mSize: 'w-full',
+    ofy: 'overflow-y-auto cool-scroll-modal',
+  },
+)
 
-// Modal state
-const isVisible = ref(false)
-const modalRef = ref<HTMLElement | null>(null)
-const headerRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const closeButtonRef = ref<HTMLElement | null>(null)
-const lastActiveElement = ref<HTMLElement | null>(null)
-const zIndex = ref(1000)
-
-// Event bus instance
 const eventBus = useEventBus()
 
-// Track all modals to manage z-index properly
-const modalStack = (() => {
-  if (typeof window !== 'undefined') {
-    // @ts-expect-error: TS doesn't know about the global modal stack
-    window.__FWS_MODAL_STACK = window.__FWS_MODAL_STACK || {
-      modals: new Map(),
-      baseZIndex: 1000,
-      register(id: string) {
-        const current = this.modals.size
-        const z = this.baseZIndex + (current * 10)
-        this.modals.set(id, z)
-        return z
-      },
-      unregister(id: string) {
-        this.modals.delete(id)
-      },
-      isTopModal(id: string) {
-        if (this.modals.size === 0) return false
-        // Get the last added modal (should be the top one)
-        return Array.from(this.modals.keys()).pop() === id
-      },
-    }
-    // @ts-expect-error: TS doesn't know about the global modal stack
-    return window.__FWS_MODAL_STACK
-  }
-
-  // Fallback for SSR
-  return {
-    modals: new Map(),
-    baseZIndex: 1000,
-    register: () => 1000,
-    unregister: () => {},
-    isTopModal: () => true,
-  }
-})()
+const isOpen = ref<boolean>(false)
+const modalRef = ref<HTMLElement | null>(null)
+let previouslyFocusedElement: HTMLElement | null = null
+let focusableElements: HTMLElement[] = []
 
-// Focusable elements within the modal for keyboard navigation
-const focusableElements = computed(() => {
-  if (!modalRef.value) return []
+// Dynamic z-index to ensure the most recently opened modal is on top
+// 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
+function getFocusableElements(element: HTMLElement): HTMLElement[] {
   return Array.from(
-    modalRef.value.querySelectorAll(
-      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    element.querySelectorAll(
+      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
     ),
+  ).filter(
+    el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
   ) as HTMLElement[]
-})
+}
 
-// Size class mapping
-const sizeClass = computed(() => {
-  switch (props.size) {
-    case 'sm': return 'max-w-md'
-    case 'md': return 'max-w-lg'
-    case 'lg': return 'max-w-2xl'
-    case 'xl': return 'max-w-4xl'
-    case 'full': return 'max-w-full m-4'
-    default: return 'max-w-lg'
-  }
-})
+function handleKeyDown(event: KeyboardEvent) {
+  // Only handle events for the top-most modal
+  if (!isOpen.value) return
 
-// Position class mapping
-const positionClass = computed(() => {
-  switch (props.position) {
-    case 'top': return 'items-start pt-16'
-    default: return 'items-center'
+  // Check if this modal is the top-most one
+  const isTopMost = isTopMostModal(props.id)
+  if (!isTopMost) {
+    return
   }
-})
 
-// Check if this is the topmost modal
-const isTopModal = computed(() => {
-  return modalStack.isTopModal(props.id)
-})
-
-// Manage modal state
-function setModalState(state: boolean) {
-  if (state === isVisible.value) return
-
-  if (state) {
-    // Save the currently focused element
-    lastActiveElement.value = document.activeElement as HTMLElement
-
-    // Register this modal and get its z-index
-    zIndex.value = modalStack.register(props.id)
-
-    // Call onOpen callback
-    if (props.onOpen) props.onOpen()
-
-    // Set the body to prevent scrolling
-    if (typeof document !== 'undefined') {
-      document.body.classList.add('overflow-hidden')
-    }
+  // Close on escape
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    setModal(false)
+    return
   }
-  else {
-    // Unregister the modal
-    modalStack.unregister(props.id)
-
-    // Call onClose callback
-    if (props.onClose) props.onClose()
 
-    // Restore body scrolling if no modals are open
-    if (typeof document !== 'undefined' && !modalStack.modals.size) {
-      document.body.classList.remove('overflow-hidden')
+  // 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()
     }
-
-    // Restore focus
-    if (lastActiveElement.value) {
-      nextTick(() => {
-        lastActiveElement.value?.focus()
-      })
+    // If tab on last element, focus first element
+    else if (!event.shiftKey && document.activeElement === focusableElements[focusableElements.length - 1]) {
+      event.preventDefault()
+      focusableElements[0].focus()
     }
   }
-
-  isVisible.value = state
 }
 
-// Handle clicking outside the modal
-function handleOutsideClick(e: MouseEvent) {
-  if (props.persistent) return
-  if (modalRef.value && !modalRef.value.contains(e.target as Node)) {
-    setModalState(false)
-  }
+// 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
 }
 
-// Handle keyboard events
-function handleKeyDown(e: KeyboardEvent) {
-  // Only handle events for the top modal
-  if (!isTopModal.value) return
+function setModal(value: boolean) {
+  if (value === true) {
+    if (props.onOpen) props.onOpen()
+    previouslyFocusedElement = document.activeElement as HTMLElement
 
-  // ESC key handling (close modal)
-  if (e.key === 'Escape' && !props.noEscDismiss) {
-    e.preventDefault()
-    setModalState(false)
-    return
-  }
+    // Get the next z-index from the global registry
+    const newZIndex = modalRegistry.getNextZIndex()
 
-  // Tab key handling (focus trap)
-  if (e.key === 'Tab' && focusableElements.value.length > 0) {
-    const firstElement = focusableElements.value[0]
-    const lastElement = focusableElements.value[focusableElements.value.length - 1]
+    // 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)
 
-    // If shift+tab on first element, move to last
-    if (e.shiftKey && document.activeElement === firstElement) {
-      e.preventDefault()
-      lastElement.focus()
-    }
-    // If tab on last element, move to first
-    else if (!e.shiftKey && document.activeElement === lastElement) {
-      e.preventDefault()
-      firstElement.focus()
-    }
+    // 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
+
+    document.addEventListener('keydown', handleKeyDown)
   }
-}
+  if (value === false) {
+    if (props.onClose) props.onClose()
 
-// Set initial focus when modal opens
-function setInitialFocus() {
-  nextTick(() => {
-    // Focus hierarchy: close button > first focusable element > modal container
-    if (closeButtonRef.value && !props.hideCloseButton) {
-      closeButtonRef.value.focus()
+    // 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)
+      }
     }
-    else if (focusableElements.value.length > 0) {
-      focusableElements.value[0].focus()
-    }
-    else if (modalRef.value) {
-      modalRef.value.focus()
+
+    document.removeEventListener('keydown', handleKeyDown)
+    if (previouslyFocusedElement) {
+      previouslyFocusedElement.focus()
     }
-  })
+  }
+  isOpen.value = value
 }
 
-// Event listeners
-watch(isVisible, (newVal) => {
+// After modal is opened, set focus and collect focusable elements
+watch(isOpen, async (newVal) => {
   if (newVal) {
-    setInitialFocus()
-    document.addEventListener('keydown', handleKeyDown)
-  }
-  else {
-    document.removeEventListener('keydown', handleKeyDown)
+    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()
+      }
+    }
   }
 })
 
-// Setup event listeners
 onMounted(() => {
-  // Listen for openModal/closeModal events through the event bus
-  eventBus.on(`${props.id}Modal`, setModalState)
+  eventBus.on(`${props.id}Modal`, setModal)
 })
 
-// Clean up
-onBeforeUnmount(() => {
-  eventBus.off(`${props.id}Modal`, setModalState)
+onUnmounted(() => {
+  eventBus.off(`${props.id}Modal`, setModal)
   document.removeEventListener('keydown', handleKeyDown)
 
-  // Clean up modal stack if the modal is visible when unmounted
-  if (isVisible.value) {
-    modalStack.unregister(props.id)
-
-    // Restore body scrolling if no other modals are open
-    if (typeof document !== 'undefined' && !modalStack.modals.size) {
-      document.body.classList.remove('overflow-hidden')
+  // Clean up the modal registry if this modal was open when unmounted
+  if (isOpen.value) {
+    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)
+      }
     }
   }
 })
+
+// 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>
-  <FadeTransition>
-    <div
-      v-if="isVisible"
-      class="fixed inset-0 z-[1000] overflow-y-auto"
-      :style="{ zIndex }"
-      aria-modal="true"
-      role="dialog"
-      :aria-labelledby="title ? `${id}-title` : undefined"
-      @click="handleOutsideClick"
+  <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"
     >
       <div
-        class="min-h-screen px-4 flex justify-center text-center"
-        :class="positionClass"
+        v-if="isOpen"
+        class="fixed inset-0"
+        :style="{ zIndex }"
+        role="dialog"
+        :aria-labelledby="title ? `${props.id}-title` : undefined"
+        aria-modal="true"
+        data-modal-active="true"
+        :data-modal-id="props.id"
       >
-        <!-- Backdrop -->
-        <div
-          class="fixed inset-0 bg-black/30 backdrop-blur-sm"
-          aria-hidden="true"
-        />
-
-        <!-- Modal container -->
+        <!-- Backdrop with click to close functionality -->
         <div
-          ref="modalRef"
-          class="relative w-full bg-white dark:bg-fv-neutral-900 rounded-lg text-left shadow-xl transform transition-all sm:my-8 max-h-[90vh] flex flex-col" :class="[sizeClass]"
-          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"
         >
-          <!-- Close button (top-right) -->
-          <button
-            v-if="!hideCloseButton"
-            ref="closeButtonRef"
-            type="button"
-            class="absolute top-2 right-2 text-fv-neutral-400 hover:text-fv-neutral-500 dark:text-fv-neutral-500 dark:hover:text-fv-neutral-400 z-10 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
-            aria-label="Close modal"
-            @click="setModalState(false)"
-          >
-            <XMarkIcon class="h-5 w-5" aria-hidden="true" />
-          </button>
-
-          <!-- Header (if title provided) -->
+          <!-- Modal panel -->
           <div
-            v-if="title"
-            ref="headerRef"
-            class="px-6 pt-6 pb-0"
+            ref="modalRef"
+            :class="`relative ${mSize} max-w-6xl max-h-[85vh] px-4 sm:px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
+            :style="{ zIndex }"
+            tabindex="-1"
+            @click.stop
           >
-            <slot name="before" />
-            <h3
-              :id="`${id}-title`"
-              class="text-lg font-medium leading-6 text-fv-neutral-900 dark:text-white"
+            <!-- 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"
             >
-              {{ title }}
-            </h3>
-          </div>
-
-          <!-- Content area -->
-          <div
-            ref="contentRef"
-            class="px-6 py-4 overflow-y-auto flex-1 rounded-b-lg"
-          >
-            <slot />
-          </div>
-
-          <!-- Footer -->
-          <div v-if="$slots.footer" class="px-6 py-4 bg-fv-neutral-50 dark:bg-fv-neutral-800 rounded-b-lg border-t border-fv-neutral-200 dark:border-fv-neutral-700">
-            <slot name="footer" />
+              <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 flex-grow ${ofy}`">
+              <slot />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </FadeTransition>
+    </transition>
+  </ClientOnly>
 </template>

package/package.json

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

package/components/ui/DefaultModalOld.vue

@@ -1,304 +0,0 @@
-<script setup lang="ts">
-import { XCircleIcon } from '@heroicons/vue/24/solid'
-import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useEventBus } from '../../composables/event-bus'
-
-// 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<{
-    id: string
-    title?: string
-    onOpen?: Function
-    onClose?: Function
-    closeIcon?: object
-    mSize?: string
-    ofy?: string
-  }>(),
-  {
-    closeIcon: () => h(XCircleIcon),
-    mSize: 'w-full',
-    ofy: 'overflow-y-auto cool-scroll-modal',
-  },
-)
-
-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
-// 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
-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
-
-  // Check if this modal is the top-most one
-  const isTopMost = isTopMostModal(props.id)
-  if (!isTopMost) {
-    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()
-    }
-  }
-}
-
-// 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
-
-    // 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
-
-    document.addEventListener('keydown', handleKeyDown)
-  }
-  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)
-      }
-    }
-
-    document.removeEventListener('keydown', handleKeyDown)
-    if (previouslyFocusedElement) {
-      previouslyFocusedElement.focus()
-    }
-  }
-  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)
-
-  // Clean up the modal registry if this modal was open when unmounted
-  if (isOpen.value) {
-    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)
-      }
-    }
-  }
-})
-
-// 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>
-  <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"
-    >
-      <div
-        v-if="isOpen"
-        class="fixed inset-0"
-        :style="{ zIndex }"
-        role="dialog"
-        :aria-labelledby="title ? `${props.id}-title` : undefined"
-        aria-modal="true"
-        data-modal-active="true"
-        :data-modal-id="props.id"
-      >
-        <!-- 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 }"
-          @click="handleBackdropClick"
-        >
-          <!-- Modal panel -->
-          <div
-            ref="modalRef"
-            :class="`relative ${mSize} max-w-6xl max-h-[85vh] px-4 sm:px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
-            :style="{ zIndex }"
-            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"
-            >
-              <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 flex-grow ${ofy}`">
-              <slot />
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </ClientOnly>
-</template>