@fy-/fws-vue 2.3.5 → 2.3.7

package/components/ui/DefaultModal.vue

@@ -1,304 +1,323 @@
 <script setup lang="ts">
-import { XCircleIcon } from '@heroicons/vue/24/solid'
-import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { XMarkIcon } from '@heroicons/vue/24/solid'
+import { computed, nextTick, onBeforeUnmount, onMounted, 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++
-      })
-    },
-  }
+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
 }
 
-// @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',
-  },
-)
+// Default prop values
+const props = withDefaults(defineProps<ModalProps>(), {
+  size: 'md',
+  position: 'center',
+  persistent: false,
+  hideCloseButton: false,
+  noEscDismiss: false,
+})
 
+// 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()
 
-const isOpen = ref<boolean>(false)
-const modalRef = ref<HTMLElement | null>(null)
-let previouslyFocusedElement: HTMLElement | null = null
-let focusableElements: HTMLElement[] = []
+// 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
+  }
 
-// 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)
+  // Fallback for SSR
+  return {
+    modals: new Map(),
+    baseZIndex: 1000,
+    register: () => 1000,
+    unregister: () => {},
+    isTopModal: () => true,
+  }
+})()
+
+// Focusable elements within the modal for keyboard navigation
+const focusableElements = computed(() => {
+  if (!modalRef.value) return []
 
-// 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"])',
+    modalRef.value.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [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
+// 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'
   }
+})
 
-  // Close on escape
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    setModal(false)
-    return
+// Position class mapping
+const positionClass = computed(() => {
+  switch (props.position) {
+    case 'top': return 'items-start pt-16'
+    default: return 'items-center'
   }
+})
 
-  // 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 is the topmost modal
+const isTopModal = computed(() => {
+  return modalStack.isTopModal(props.id)
+})
 
-// Check if this modal is the top-most (highest z-index)
-function isTopMostModal(id: string): boolean {
-  if (modalRegistry.modals.size === 0) return false
+// Manage modal state
+function setModalState(state: boolean) {
+  if (state === isVisible.value) return
 
-  // 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,
-  )
+  if (state) {
+    // Save the currently focused element
+    lastActiveElement.value = document.activeElement as HTMLElement
 
-  // @ts-expect-error: TS doesn't know that entries are tuples
-  return highestEntry[0] === id
-}
+    // Register this modal and get its z-index
+    zIndex.value = modalStack.register(props.id)
 
-function setModal(value: boolean) {
-  if (value === true) {
+    // Call onOpen callback
     if (props.onOpen) props.onOpen()
-    previouslyFocusedElement = document.activeElement as HTMLElement
 
-    // Get the next z-index from the global registry
-    const newZIndex = modalRegistry.getNextZIndex()
+    // Set the body to prevent scrolling
+    if (typeof document !== 'undefined') {
+      document.body.classList.add('overflow-hidden')
+    }
+  }
+  else {
+    // Unregister the modal
+    modalStack.unregister(props.id)
 
-    // 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)
+    // Call onClose callback
+    if (props.onClose) props.onClose()
 
-    // 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)
-      }
-    })
+    // Restore body scrolling if no modals are open
+    if (typeof document !== 'undefined' && !modalStack.modals.size) {
+      document.body.classList.remove('overflow-hidden')
+    }
 
-    // Set this modal's z-index
-    zIndex.value = newZIndex
+    // Restore focus
+    if (lastActiveElement.value) {
+      nextTick(() => {
+        lastActiveElement.value?.focus()
+      })
+    }
+  }
 
-    document.addEventListener('keydown', handleKeyDown)
+  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)
   }
-  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)
-      }
-    }
+// Handle keyboard events
+function handleKeyDown(e: KeyboardEvent) {
+  // Only handle events for the top modal
+  if (!isTopModal.value) return
 
-    document.removeEventListener('keydown', handleKeyDown)
-    if (previouslyFocusedElement) {
-      previouslyFocusedElement.focus()
+  // ESC key handling (close modal)
+  if (e.key === 'Escape' && !props.noEscDismiss) {
+    e.preventDefault()
+    setModalState(false)
+    return
+  }
+
+  // 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]
+
+    // 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()
     }
   }
-  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()
-      }
+// 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()
+    }
+    else if (focusableElements.value.length > 0) {
+      focusableElements.value[0].focus()
+    }
+    else if (modalRef.value) {
+      modalRef.value.focus()
     }
+  })
+}
+
+// Event listeners
+watch(isVisible, (newVal) => {
+  if (newVal) {
+    setInitialFocus()
+    document.addEventListener('keydown', handleKeyDown)
+  }
+  else {
+    document.removeEventListener('keydown', handleKeyDown)
   }
 })
 
+// Setup event listeners
 onMounted(() => {
-  eventBus.on(`${props.id}Modal`, setModal)
+  // Listen for openModal/closeModal events through the event bus
+  eventBus.on(`${props.id}Modal`, setModalState)
 })
 
-onUnmounted(() => {
-  eventBus.off(`${props.id}Modal`, setModal)
+// Clean up
+onBeforeUnmount(() => {
+  eventBus.off(`${props.id}Modal`, setModalState)
   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)
-      }
+  // 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')
     }
   }
 })
-
-// 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"
+  <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"
     >
       <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"
+        class="min-h-screen px-4 flex justify-center text-center"
+        :class="positionClass"
       >
-        <!-- Backdrop with click to close functionality -->
+        <!-- Backdrop -->
+        <div
+          class="fixed inset-0 bg-black/30 backdrop-blur-sm"
+          aria-hidden="true"
+        />
+
+        <!-- Modal container -->
         <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"
+          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
         >
-          <!-- Modal panel -->
+          <!-- 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) -->
           <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
+            v-if="title"
+            ref="headerRef"
+            class="px-6 pt-6 pb-0"
           >
-            <!-- 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" />
+            <h3
+              :id="`${id}-title`"
+              class="text-lg font-medium leading-6 text-fv-neutral-900 dark:text-white"
             >
-              <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>
+              {{ 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" />
           </div>
         </div>
       </div>
-    </transition>
-  </ClientOnly>
+    </div>
+  </FadeTransition>
 </template>

package/components/ui/DefaultModalOld.vue

@@ -0,0 +1,304 @@
+<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>

package/composables/seo.ts

@@ -1,7 +1,6 @@
 import type { Ref } from 'vue'
 import { getLocale, getPrefix, getURL } from '@fy-/fws-js'
 import { useHead, useSeoMeta } from '@unhead/vue'
-import { useRoute } from 'vue-router'
 
 export interface LazyHead {
   name?: string
@@ -29,7 +28,6 @@ export interface LazyHead {
 
 // eslint-disable-next-line unused-imports/no-unused-vars
 export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
-  const route = useRoute()
   const currentLocale = getLocale()
   // const url = getURL()
 
@@ -90,7 +88,7 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
   })
 
   useSeoMeta({
-    ogUrl: () => `${getURL().Scheme}://${getURL().Host}${route.fullPath}`,
+    ogUrl: () => `${getURL().Canonical}`,
     ogLocale: () => {
       if (currentLocale) {
         return currentLocale.replace('-', '_')

package/package.json

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