@quazardous/qdadm 2.22.0 → 2.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/edit/FormPage.vue

@@ -32,7 +32,8 @@
  * - #error: Custom error display
  * - #loading: Custom loading display
  */
-import { computed, type PropType } from 'vue'
+import { computed, inject, type PropType } from 'vue'
+import { GUARD_DIALOG_HOST } from '../../composables/useGuardStore'
 import PageHeader from '../layout/PageHeader.vue'
 import FormActions from './FormActions.vue'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
@@ -122,6 +123,10 @@ const headerActions = computed<ResolvedAction[]>(() =>
 // Get error message from fetchError
 const fetchErrorMessage = computed<string | null>(() => formatFetchError(props.fetchError))
 
+// A qdadm layout (AppLayout, BaseLayout) renders the registered guard dialog: rendering it here too
+// stacked two identical dialogs (#2267). Without such a layout, this page renders it.
+const layoutRendersGuardDialog = inject(GUARD_DIALOG_HOST, false)
+
 // Guard dialog handlers
 function onGuardSaveAndLeave(): void {
   if (props.guardDialog?.onSaveAndLeave) {
@@ -225,7 +230,7 @@ function onGuardStay(): void {
 
     <!-- Unsaved Changes Dialog -->
     <UnsavedChangesDialog
-      v-if="guardDialog"
+      v-if="guardDialog && !layoutRendersGuardDialog"
       :visible="guardDialog.visible.value"
       :saving="saving"
       :hasOnSave="guardDialog.hasOnSave"

package/src/components/layout/AppLayout.vue

@@ -19,7 +19,7 @@ import { useNavigation, type NavSection } from '../../composables/useNavigation'
 import { prettifyRole } from '../../utils/formatters'
 import { useApp } from '../../composables/useApp'
 import { useAuth } from '../../composables/useAuth'
-import { useGuardDialog } from '../../composables/useGuardStore'
+import { useGuardDialog, GUARD_DIALOG_HOST } from '../../composables/useGuardStore'
 import { useNavContext, type BreadcrumbItem, type NavLinkItem } from '../../composables/useNavContext'
 import QdButton from '../base/QdButton.vue'
 import Breadcrumb from 'primevue/breadcrumb'
@@ -56,6 +56,8 @@ const homeRoute = inject<string>('qdadmHomeRoute', 'home')
 
 // Guard dialog from shared store (registered by useBareForm/useEntityItemFormPage when a form is active)
 const guardDialog = useGuardDialog()
+// This layout renders it: pages below do not render their own (#2267)
+provide(GUARD_DIALOG_HOST, true)
 
 const router = useRouter()
 const route = useRoute()

package/src/components/layout/BaseLayout.vue

@@ -35,7 +35,7 @@ import { RouterView } from 'vue-router'
 import ConfirmDialog from 'primevue/confirmdialog'
 import Zone from './Zone.vue'
 import { LAYOUT_ZONES } from '../../zones/zones'
-import { useGuardDialog } from '../../composables/useGuardStore'
+import { useGuardDialog, GUARD_DIALOG_HOST } from '../../composables/useGuardStore'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import type { BreadcrumbItem, NavLinkItem } from '../../composables/useNavContext'
 
@@ -52,6 +52,8 @@ const hasMainSlot: boolean = !!slots.main
 
 // Guard dialog from shared store (registered by useBareForm/useEntityItemFormPage when a form is active)
 const guardDialog = useGuardDialog()
+// This layout renders it: pages below do not render their own (#2267)
+provide(GUARD_DIALOG_HOST, true)
 
 // Provide breadcrumb/navlinks override mechanism for child pages
 const breadcrumbOverride = ref<BreadcrumbItem[] | null>(null)

package/src/composables/useGuardStore.ts

@@ -5,7 +5,13 @@
  * and parent components (AppLayout) to render it.
  */
 
-import { shallowRef, type ShallowRef, type Ref } from 'vue'
+import { shallowRef, type InjectionKey, type ShallowRef, type Ref } from 'vue'
+
+/**
+ * Provided by a layout that renders the registered guard dialog (#2267). FormPage renders its own dialog only
+ * without one above it, so a dirty form never shows the dialog twice.
+ */
+export const GUARD_DIALOG_HOST: InjectionKey<boolean> = Symbol('qdadm.guardDialogHost')
 
 /**
  * Guard dialog interface