@stacksjs/defaults 0.70.357 → 0.70.362

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

@@ -8,6 +8,8 @@ const confirmLabel = useReactiveProp('confirmLabel', 'Delete')
 const cancelLabel = useReactiveProp('cancelLabel', 'Cancel')
 const variant = useReactiveProp('variant', 'danger' as ConfirmVariant)
 const busy = useReactiveProp('busy', false)
+const disabled = useReactiveProp('disabled', false)
+const error = useReactiveProp('error', '')
 const emit = defineEmits()
 
 function close(): void {
@@ -16,7 +18,7 @@ function close(): void {
 }
 
 function confirm(): void {
-  if (!busy())
+  if (!busy() && !disabled())
     emit('confirm')
 }
 
@@ -32,57 +34,53 @@ function iconName(): string {
 
 </script>
 
-<template :if="open()">
-  <div class="fixed inset-0 overflow-y-auto z-[55] dashboard-modal-layer" @keydown.escape="close">
-    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close confirmation dialog" @click="close"></button>
-
-    <div class="flex relative items-center justify-center p-4 min-h-full">
-      <section
-        role="alertdialog"
-        aria-modal="true"
-        :aria-label="title()"
-        class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
-      >
-        <div class="flex gap-4 items-start">
-          <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
-            <span class="block h-5 w-5" :class="iconName()"></span>
-          </div>
-          <div class="flex-1 min-w-0">
-            <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
-              {{ title() }}
-            </h3>
-            <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
-              {{ description() }}
-            </p>
-          </div>
-        </div>
+<Modal
+  :isOpen="open()"
+  :title="title()"
+  :description="description()"
+  :closable="!busy()"
+  role="alertdialog"
+  size="sm"
+  @close="close"
+>
+  <template #header-leading>
+    <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
+      <span class="block h-5 w-5" :class="iconName()"></span>
+    </div>
+  </template>
 
-        <div class="flex gap-2 items-center justify-end mt-6">
-          <Button
-            variant="secondary"
-            :disabled="busy()"
-            @click="close"
-          >
-            {{ cancelLabel() }}
-          </Button>
-          <Button
-            :if="variant() === 'warning'"
-            variant="warning"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-          <Button
-            :if="variant() !== 'warning'"
-            variant="danger"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-        </div>
-      </section>
+  <template #footer>
+    <div class="w-full">
+      <div :if="error()" role="alert" class="mb-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+        {{ error() }}
+      </div>
+      <div class="flex gap-2 items-center justify-end">
+        <Button
+          variant="secondary"
+          :disabled="busy()"
+          @click="close"
+        >
+          {{ cancelLabel() }}
+        </Button>
+        <Button
+          :if="variant() === 'warning'"
+          variant="warning"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+        <Button
+          :if="variant() !== 'warning'"
+          variant="danger"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+</Modal>

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

@@ -5,9 +5,10 @@ interface ModalProps {
   description?: string
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   closable?: boolean
+  role?: 'dialog' | 'alertdialog'
 }
 
-const { isOpen = false, title = '', description = '', size = 'md', closable = true } = defineProps<ModalProps>()
+const { isOpen = false, title = '', description = '', size = 'md', closable = true, role = 'dialog' } = defineProps<ModalProps>()
 
 const sizeClasses = {
   sm: 'max-w-sm',
@@ -19,30 +20,75 @@ const sizeClasses = {
 </script>
 <script client>
 const open = useReactiveProp('isOpen', false)
+const liveClosable = useReactiveProp('closable', true)
 const liveTitle = useReactiveProp('title', '')
 const liveDescription = useReactiveProp('description', '')
+const liveRole = useReactiveProp('role', 'dialog')
+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="liveRole()"
+    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 -->
-        @if(title || closable)
-          <div class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+        <div :if="liveTitle() || liveClosable()" class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+          <div class="flex gap-3 items-start min-w-0">
+            <slot name="header-leading" />
             <div class="min-w-0">
                 <h3 :if="liveTitle()" class="font-semibold text-lg text-neutral-900 dark:text-white">
                   {{ liveTitle() }}
@@ -51,26 +97,27 @@ function closeModal(): void {
                   {{ liveDescription() }}
                 </p>
             </div>
-
-            @if(closable)
-              <Button
-                variant="ghost"
-                size="sm"
-                iconOnly
-                ariaLabel="Close modal"
-                @click="closeModal"
-              >
-                <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-              </Button>
-            @endif
           </div>
-        @endif
 
-        <!-- Body -->
-        <div class="p-6">
-          <slot />
+          <Button
+            :if="liveClosable()"
+            variant="ghost"
+            size="sm"
+            iconOnly
+            ariaLabel="Close modal"
+            @click="closeModal"
+          >
+            <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+          </Button>
         </div>
 
+        <!-- Body -->
+        @if($slots.default)
+          <div class="p-6">
+            <slot />
+          </div>
+        @endif
+
         @if($slots.footer)
           <div class="flex items-center justify-end px-6 py-4 border-neutral-200 border-t dark:border-neutral-700">
             <slot name="footer" />
@@ -78,4 +125,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()
   }