@stacksjs/defaults 0.70.356 → 0.70.358

package/resources/components/Dashboard/UI/Modal.stx

@@ -19,25 +19,68 @@ const sizeClasses = {
 </script>
 <script client>
 const open = useReactiveProp('isOpen', false)
+const liveClosable = useReactiveProp('closable', true)
 const liveTitle = useReactiveProp('title', '')
 const liveDescription = useReactiveProp('description', '')
+const dialog = useRef<HTMLDialogElement>('dashboardModalDialog')
+const activeElement = useActiveElement()
+const scrollLocked = useScrollLock()
 const emit = defineEmits()
+let restoreFocus: HTMLElement | null = null
 
 function closeModal(): void {
+  if (!liveClosable()) return
   emit('close')
 }
-</script>
-  <div :if="open()" class="fixed inset-y-0 overflow-y-auto right-0 z-[55] dashboard-modal-layer">
-    <!-- Overlay -->
-    <button type="button" class="absolute inset-0 w-full bg-black/50 backdrop-blur-sm" aria-label="Close modal" @click="closeModal"></button>
 
+function handleCancel(event: Event): void {
+  event.preventDefault()
+  closeModal()
+}
+
+function handleBackdropClick(event: MouseEvent): void {
+  if (event.target === event.currentTarget)
+    closeModal()
+}
+
+effect(() => {
+  const isOpen = open()
+  scrollLocked.value = isOpen
+
+  if (isOpen) {
+    const focused = peek(() => activeElement.value)
+    if (focused instanceof HTMLElement)
+      restoreFocus = focused
+    void nextTick(() => {
+      const element = dialog.current
+      if (!element) return
+      if (!element.open)
+        element.showModal()
+      element.focus()
+    })
+    return
+  }
+
+  if (dialog.current?.open)
+    dialog.current.close()
+  const target = restoreFocus
+  restoreFocus = null
+  if (target)
+    void nextTick(() => target.focus())
+})
+</script>
+  <dialog
+    :if="open()"
+    ref="dashboardModalDialog"
+    role="dialog"
+    aria-modal="true"
+    :aria-label="liveTitle() || 'Dialog'"
+    class="fixed inset-0 m-0 p-0 h-dvh max-h-none w-screen max-w-none overflow-y-auto z-[55] bg-transparent dashboard-modal-layer dashboard-modal-dialog"
+    @cancel="handleCancel"
+  >
     <!-- Modal container -->
-    <div class="flex items-center justify-center p-4 min-h-full">
+    <div class="flex items-center justify-center p-4 min-h-full" @click="handleBackdropClick">
       <div
-        role="dialog"
-        aria-modal="true"
-        :aria-label="liveTitle() || 'Dialog'"
-        tabindex="-1"
         class="relative w-full rounded-xl bg-white dark:bg-neutral-900 shadow-2xl {{ sizeClasses[size] }}"
       >
         <!-- Header -->
@@ -78,4 +121,11 @@ function closeModal(): void {
         @endif
       </div>
     </div>
-  </div>
+  </dialog>
+
+<style>
+.dashboard-modal-dialog::backdrop {
+  background: rgb(0 0 0 / 50%);
+  backdrop-filter: blur(4px);
+}
+</style>

package/views/dashboard/stores/auth.ts

@@ -33,6 +33,7 @@ export const authStore = defineStore('auth', () => {
   const loading = state(false)
   const error = state<string | null>(null)
   const loaded = state(false)
+  let pendingLoad: Promise<void> | null = null
 
   const isAdmin = derived(() => {
     if (!loaded()) return false
@@ -50,8 +51,7 @@ export const authStore = defineStore('auth', () => {
     return roles().includes('client')
   })
 
-  async function load(): Promise<void> {
-    if (loading() || loaded()) return
+  async function resolveIdentity(): Promise<void> {
     loading.set(true)
     error.set(null)
     try {
@@ -88,7 +88,23 @@ export const authStore = defineStore('auth', () => {
     }
   }
 
+  function load(): Promise<void> {
+    if (loaded())
+      return Promise.resolve()
+
+    if (pendingLoad)
+      return pendingLoad
+
+    pendingLoad = resolveIdentity().finally(() => {
+      pendingLoad = null
+    })
+    return pendingLoad
+  }
+
   async function refresh(): Promise<void> {
+    if (pendingLoad)
+      await pendingLoad
+
     loaded.set(false)
     await load()
   }