@quazardous/qdadm 2.7.3 → 2.8.0

package/package.json

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

package/src/components/layout/AppLayout.vue

@@ -241,7 +241,7 @@ watch(() => route.fullPath, () => {
 
 // Navigation context (breadcrumb + navlinks from route config)
 // Entity data comes from activeStack (populated by useEntityItemPage/useEntityItemFormPage)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeToggle } = useNavContext()
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeLinks } = useNavContext()
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = ref<BreadcrumbItem[] | null>(null)
@@ -261,10 +261,11 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// View↔Edit toggle on the terminal crumb (#1332/#1341) — same opt-in contract
-// as DefaultBreadcrumb; this inline breadcrumb must honor the flag too
-const shownModeToggle = computed(() =>
-  features.breadcrumbModeToggle === true ? modeToggle.value : null
+// View↔Edit mode links (#1332/#1341/#1353) — same opt-in contract as
+// DefaultBreadcrumb; single opposite-mode link on item pages, the parent's
+// View/Edit pair on child pages
+const shownModeLinks = computed(() =>
+  features.breadcrumbModeToggle === true ? modeLinks.value : []
 )
 </script>
 
@@ -391,26 +392,27 @@ const shownModeToggle = computed(() =>
         </Breadcrumb>
 
         <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-             toggle (#1332/#1341) — plain navigation; the form page's own
+             links (#1332/#1341/#1353) — plain navigation; the form page's own
              route-leave guard covers unsaved changes on edit→show -->
-        <div v-if="navlinks.length > 0 || shownModeToggle" class="layout-navlinks">
-          <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
+        <div v-if="navlinks.length > 0 || shownModeLinks.length > 0" class="layout-navlinks">
+          <!-- mode links lead the group (#j7udkh), sibling tabs follow -->
+          <template v-for="(mode, index) in shownModeLinks" :key="`mode-${mode.target}`">
             <span v-if="index > 0" class="layout-navlinks-separator">|</span>
             <RouterLink
-              :to="link.to"
-              class="layout-navlink"
-              :class="{ 'layout-navlink--active': link.active }"
+              :to="mode.to"
+              class="layout-navlink breadcrumb-mode-toggle"
             >
-              {{ link.label }}
+              {{ mode.label }}
             </RouterLink>
           </template>
-          <template v-if="shownModeToggle">
-            <span v-if="navlinks.length > 0" class="layout-navlinks-separator">|</span>
+          <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
+            <span v-if="shownModeLinks.length > 0 || index > 0" class="layout-navlinks-separator">|</span>
             <RouterLink
-              :to="shownModeToggle.to"
-              class="layout-navlink breadcrumb-mode-toggle"
+              :to="link.to"
+              class="layout-navlink"
+              :class="{ 'layout-navlink--active': link.active }"
             >
-              {{ shownModeToggle.label }}
+              {{ link.label }}
             </RouterLink>
           </template>
         </div>

package/src/components/layout/defaults/DefaultBreadcrumb.vue

@@ -24,7 +24,7 @@ const route = useRoute()
 const features = inject<FeaturesConfig>('qdadmFeatures', { breadcrumb: true })
 
 // Navigation context (breadcrumb + navlinks from route config)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeToggle } = useNavContext()
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks, modeLinks } = useNavContext()
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = inject<Ref<BreadcrumbItem[] | null>>('qdadmBreadcrumbOverride', ref(null))
@@ -42,10 +42,10 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// View↔Edit toggle on the terminal crumb (#1332) — opt-in, and only when
-// useNavContext resolved a reachable, permitted twin-mode route
-const shownModeToggle = computed(() =>
-  features.breadcrumbModeToggle === true ? modeToggle.value : null
+// View↔Edit mode links (#1332/#1353) — opt-in; single opposite-mode link on
+// item pages, the parent's View/Edit pair on child pages
+const shownModeLinks = computed(() =>
+  features.breadcrumbModeToggle === true ? modeLinks.value : []
 )
 </script>
 
@@ -65,26 +65,27 @@ const shownModeToggle = computed(() =>
     </Breadcrumb>
 
     <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-         toggle (#1332/#1341) — plain navigation; the form page's own
+         links (#1332/#1341/#1353) — plain navigation; the form page's own
          route-leave guard covers unsaved changes on edit→show -->
-    <div v-if="navlinks.length > 0 || shownModeToggle" class="breadcrumb-navlinks">
-      <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
+    <div v-if="navlinks.length > 0 || shownModeLinks.length > 0" class="breadcrumb-navlinks">
+      <!-- mode links lead the group (#j7udkh), sibling tabs follow -->
+      <template v-for="(mode, index) in shownModeLinks" :key="`mode-${mode.target}`">
         <span v-if="index > 0" class="navlinks-separator">|</span>
         <RouterLink
-          :to="link.to"
-          class="navlink"
-          :class="{ 'navlink--active': link.active }"
+          :to="mode.to"
+          class="navlink breadcrumb-mode-toggle"
         >
-          {{ link.label }}
+          {{ mode.label }}
         </RouterLink>
       </template>
-      <template v-if="shownModeToggle">
-        <span v-if="navlinks.length > 0" class="navlinks-separator">|</span>
+      <template v-for="(link, index) in navlinks" :key="link.to?.name || index">
+        <span v-if="shownModeLinks.length > 0 || index > 0" class="navlinks-separator">|</span>
         <RouterLink
-          :to="shownModeToggle.to"
-          class="navlink breadcrumb-mode-toggle"
+          :to="link.to"
+          class="navlink"
+          :class="{ 'navlink--active': link.active }"
         >
-          {{ shownModeToggle.label }}
+          {{ link.label }}
         </RouterLink>
       </template>
     </div>

package/src/composables/useNavContext.ts

@@ -76,9 +76,10 @@ export interface BreadcrumbItem {
  * permissions are honored once the item is loaded.
  */
 export interface BreadcrumbModeToggle {
-  /** Mode of the current route */
-  current: 'show' | 'edit'
-  /** Mode the toggle navigates to */
+  /** Mode of the current route — absent on child pages (#1353), where the
+   *  page is in neither mode of the parent item */
+  current?: 'show' | 'edit'
+  /** Mode the link navigates to */
   target: 'show' | 'edit'
   /** Twin-route location — a plain router.push; any dirty-form protection
    *  comes from the form page's own onBeforeRouteLeave guard */
@@ -130,6 +131,7 @@ export interface UseNavContextReturn {
   breadcrumb: ComputedRef<BreadcrumbItem[]>
   navlinks: ComputedRef<NavLinkItem[]>
   modeToggle: ComputedRef<BreadcrumbModeToggle | null>
+  modeLinks: ComputedRef<BreadcrumbModeToggle[]>
 
   // Helpers
   parentConfig: ComputedRef<ParentConfig | undefined>
@@ -443,7 +445,7 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
   })
 
   // ============================================================================
-  // MODE TOGGLE (#1332)
+  // MODE TOGGLE / MODE LINKS (#1332, #1353)
   // ============================================================================
 
   function toggleLabel(target: 'show' | 'edit'): string {
@@ -452,6 +454,26 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     return target === 'edit' ? 'Edit' : 'View'
   }
 
+  /** Build one mode link if its route exists and (for edit) permission allows. */
+  function buildModeLink(
+    manager: EntityManager,
+    target: 'show' | 'edit',
+    id: unknown,
+    permissionEntity: unknown
+  ): BreadcrumbModeToggle | null {
+    const routeName = `${manager.routePrefix}-${target}`
+    if (!router.hasRoute(routeName)) return null
+    if (target === 'edit' && !manager.canUpdate(permissionEntity ?? undefined)) return null
+    return {
+      target,
+      to: { name: routeName, params: { [manager.idField || 'id']: id as string } },
+      label: toggleLabel(target),
+    }
+  }
+
+  // Item pages (#1332): the terminal is entity-show/entity-edit — offer the
+  // OPPOSITE mode (getDefaultItemRoute's edit-preference is a landing
+  // default, not a toggle).
   const modeToggle = computed<BreadcrumbModeToggle | null>(() => {
     void i18nLocale.value // label re-resolves on locale change
 
@@ -464,20 +486,29 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     if (!manager?.routePrefix) return null
 
     const current = terminal.kind === 'entity-edit' ? 'edit' : 'show'
-    // Target is the OPPOSITE of the current mode — getDefaultItemRoute's
-    // edit-preference is a landing default, not a toggle.
     const target = current === 'edit' ? 'show' : 'edit'
-    const twinRoute = `${manager.routePrefix}-${target}`
-    if (!router.hasRoute(twinRoute)) return null
-
-    if (target === 'edit' && !manager.canUpdate(entityData.value ?? undefined)) return null
+    const link = buildModeLink(manager, target, terminal.id, entityData.value)
+    return link ? { ...link, current } : null
+  })
 
-    return {
-      current,
-      target,
-      to: { name: twinRoute, params: { [manager.idField || 'id']: terminal.id } },
-      label: toggleLabel(target),
-    }
+  // Uniform list for rendering (#1353). Item pages: the single opposite-mode
+  // entry (modeToggle). Child pages (route carries meta.parent): the PARENT
+  // item's applicable pair — the page is in neither mode, so both View and
+  // Edit are offered, each under the same existence/permission rules. On a
+  // child page, `entityData` resolves to the parent item (last item segment
+  // of the chain), so the canUpdate gate is ownership-aware once hydrated.
+  const modeLinks = computed<BreadcrumbModeToggle[]>(() => {
+    const itemToggle = modeToggle.value
+    if (itemToggle) return [itemToggle]
+
+    void i18nLocale.value
+    if (!parentConfig.value || parentId.value == null) return []
+    const manager = getManager(parentConfig.value.entity)
+    if (!manager?.routePrefix) return []
+
+    return (['show', 'edit'] as const)
+      .map((target) => buildModeLink(manager, target, parentId.value, entityData.value))
+      .filter((link): link is BreadcrumbModeToggle => link !== null)
   })
 
   return {
@@ -494,6 +525,7 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     breadcrumb,
     navlinks,
     modeToggle,
+    modeLinks,
 
     // Helpers
     parentConfig,