@quazardous/qdadm 2.8.0 → 2.9.0

package/README.md

@@ -2,11 +2,11 @@
 
 **Vue 3 admin framework. PrimeVue. Zero boilerplate.**
 
-Quick start: [../../README.md](../../README.md) (5 min tutorial)
+Quick start: [README](https://github.com/quazardous/qdadm/blob/main/README.md) (5 min tutorial)
 
-Concepts & patterns: [QDADM_CREDO.md](QDADM_CREDO.md)
+Concepts & patterns: [QDADM_CREDO](https://github.com/quazardous/qdadm/blob/main/packages/qdadm/QDADM_CREDO.md)
 
-Changelog: [../../CHANGELOG.md](../../CHANGELOG.md)
+Changelog: [CHANGELOG](https://github.com/quazardous/qdadm/blob/main/CHANGELOG.md)
 
 ## Installation
 
@@ -95,20 +95,20 @@ Options: `transformRequest`, `transformResponse`, `responseFormat`, `clientSideP
 
 | Doc | Purpose |
 |-----|---------|
-| [QDADM_CREDO](QDADM_CREDO.md) | Philosophy, patterns, concepts |
-| [Page compositions](../../docs/page-compositions.md) | **Start here** — which composition for which need |
-| [CRUD Pages](../../docs/crud.md) | List / form / show / child pages reference |
-| [Navigation](../../docs/navigation.md) | Breadcrumb, sibling navlinks, View↔Edit toggle |
-| [Architecture](../../docs/architecture.md) | PAC pattern, layers |
-| [Extension](../../docs/extension.md) | Decorators, bundles, multi-storage |
-| [Hooks](../../docs/hooks.md) | Alter / invoke registry |
-| [Signals](../../docs/signals.md) | Event bus, SSE bridge |
-| [Zones](../../docs/zones.md) | Extensible UI blocks |
-| [Security](../../docs/security.md) | Permissions, roles |
-| [i18n](../../docs/i18n.md) | Messages, providers, strategies |
-| [Codegen](../../docs/gen.md) | Generate managers (OpenAPI / manual) |
-| [Deferred](../../docs/deferred.md) | Deferred values & warmup |
-| [AGENT_GUIDE](../../docs/AGENT_GUIDE.md) | Quick index for AI agents |
+| [QDADM_CREDO](https://github.com/quazardous/qdadm/blob/main/packages/qdadm/QDADM_CREDO.md) | Philosophy, patterns, concepts |
+| [Page compositions](https://github.com/quazardous/qdadm/blob/main/docs/page-compositions.md) | **Start here** — which composition for which need |
+| [CRUD Pages](https://github.com/quazardous/qdadm/blob/main/docs/crud.md) | List / form / show / child pages reference |
+| [Navigation](https://github.com/quazardous/qdadm/blob/main/docs/navigation.md) | Breadcrumb, sibling navlinks, View↔Edit toggle |
+| [Architecture](https://github.com/quazardous/qdadm/blob/main/docs/architecture.md) | PAC pattern, layers |
+| [Extension](https://github.com/quazardous/qdadm/blob/main/docs/extension.md) | Decorators, bundles, multi-storage |
+| [Hooks](https://github.com/quazardous/qdadm/blob/main/docs/hooks.md) | Alter / invoke registry |
+| [Signals](https://github.com/quazardous/qdadm/blob/main/docs/signals.md) | Event bus, SSE bridge |
+| [Zones](https://github.com/quazardous/qdadm/blob/main/docs/zones.md) | Extensible UI blocks |
+| [Security](https://github.com/quazardous/qdadm/blob/main/docs/security.md) | Permissions, roles |
+| [i18n](https://github.com/quazardous/qdadm/blob/main/docs/i18n.md) | Messages, providers, strategies |
+| [Codegen](https://github.com/quazardous/qdadm/blob/main/docs/gen.md) | Generate managers (OpenAPI / manual) |
+| [Deferred](https://github.com/quazardous/qdadm/blob/main/docs/deferred.md) | Deferred values & warmup |
+| [AGENT_GUIDE](https://github.com/quazardous/qdadm/blob/main/docs/AGENT_GUIDE.md) | Quick index for AI agents |
 
 ## Peer Dependencies
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/quazardous/qdadm.git"
+    "url": "git+https://github.com/quazardous/qdadm.git",
+    "directory": "packages/qdadm"
   },
   "homepage": "https://github.com/quazardous/qdadm#readme",
   "bugs": {

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as Breadcrumb } from './layout/Breadcrumb.vue'
 export { default as PageNav } from './layout/PageNav.vue'
 export { default as Zone } from './layout/Zone.vue'
 export { default as SidebarBox } from './layout/SidebarBox.vue'
+export { default as NavlinksGroup } from './layout/NavlinksGroup.vue'
 
 // Default zone components
 export { default as DefaultHeader } from './layout/defaults/DefaultHeader.vue'

package/src/components/layout/AppLayout.vue

@@ -25,6 +25,7 @@ import Breadcrumb from 'primevue/breadcrumb'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import SidebarBox from './SidebarBox.vue'
 import Zone from './Zone.vue'
+import NavlinksGroup from './NavlinksGroup.vue'
 import qdadmLogo from '../../assets/logo.svg'
 import { version as qdadmVersion } from '../../../package.json'
 
@@ -261,12 +262,6 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// 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>
 
 <template>
@@ -392,30 +387,8 @@ const shownModeLinks = computed(() =>
         </Breadcrumb>
 
         <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-             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 || 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="mode.to"
-              class="layout-navlink breadcrumb-mode-toggle"
-            >
-              {{ mode.label }}
-            </RouterLink>
-          </template>
-          <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="link.to"
-              class="layout-navlink"
-              :class="{ 'layout-navlink--active': link.active }"
-            >
-              {{ link.label }}
-            </RouterLink>
-          </template>
-        </div>
+             links (#1332/#1341/#1353) — shared rendering + dedup (#1357) -->
+        <NavlinksGroup :navlinks="navlinks" :mode-links="modeLinks" variant="layout" />
       </div>
 
       <div class="page-content">
@@ -723,33 +696,7 @@ const shownModeLinks = computed(() =>
   padding-bottom: 0;
 }
 
-.layout-navlinks {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: var(--fad-font-size-sm);
-}
-
-.layout-navlinks-separator {
-  color: var(--p-surface-400, #94a3b8);
-  opacity: 0.5;
-}
-
-.layout-navlink {
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color var(--fad-transition-fast);
-}
-
-.layout-navlink:hover {
-  color: var(--p-primary-600, #2563eb);
-}
-
-.layout-navlink--active {
-  color: var(--p-surface-600, #475569);
-  font-weight: var(--fad-font-weight-medium);
-  pointer-events: none;
-}
+/* Navlinks styles moved to NavlinksGroup.vue (#1357) */
 
 /* Override PrimeVue Breadcrumb styles for flat look */
 .layout-nav-bar :deep(.p-breadcrumb) {

package/src/components/layout/NavlinksGroup.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+/**
+ * NavlinksGroup - the right-side navigation group of a breadcrumb bar (#1357)
+ *
+ * Single rendering of the contract previously copy-pasted between AppLayout's
+ * inline breadcrumb and DefaultBreadcrumb: View↔Edit mode links LEAD the
+ * group (#1332/#1341/#1353, order #j7udkh), sibling navlinks follow, pipe
+ * separators between every pair, plain text (no icons).
+ *
+ * Owns the two behaviors both call sites need:
+ * - the `qdadmFeatures.breadcrumbModeToggle` opt-in gate on mode links
+ * - dedup (#1357): a navlink whose target route is already covered by a
+ *   shown mode link is dropped — e.g. the auto "Details" link resolves to
+ *   the parent's edit route and would render twice ("Details" + "Edit").
+ *   With the feature off, no mode links are shown and every navlink stays
+ *   (back-compat).
+ *
+ * `variant` keeps the historical CSS hooks of each call site so consumer
+ * overrides keep working: 'layout' = AppLayout classes, 'breadcrumb' =
+ * DefaultBreadcrumb classes.
+ */
+import { computed, inject } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { NavLinkItem, BreadcrumbModeToggle } from '../../composables/useNavContext'
+
+interface FeaturesConfig {
+  breadcrumbModeToggle?: boolean
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    navlinks?: NavLinkItem[]
+    modeLinks?: BreadcrumbModeToggle[]
+    variant?: 'layout' | 'breadcrumb'
+  }>(),
+  {
+    navlinks: () => [],
+    modeLinks: () => [],
+    variant: 'breadcrumb',
+  }
+)
+
+const features = inject<FeaturesConfig>('qdadmFeatures', {})
+
+// Opt-in (#1332): mode links render only when the feature flag is on
+const shownModeLinks = computed<BreadcrumbModeToggle[]>(() =>
+  features.breadcrumbModeToggle === true ? props.modeLinks : []
+)
+
+// Dedup (#1357): drop navlinks targeting a route a mode link already covers
+const shownNavlinks = computed<NavLinkItem[]>(() => {
+  if (shownModeLinks.value.length === 0) return props.navlinks
+  const covered = new Set(shownModeLinks.value.map((m) => m.to.name))
+  return props.navlinks.filter((link) => !link.to?.name || !covered.has(link.to.name))
+})
+
+const cls = computed(() =>
+  props.variant === 'layout'
+    ? {
+        container: 'layout-navlinks',
+        separator: 'layout-navlinks-separator',
+        link: 'layout-navlink',
+        active: 'layout-navlink--active',
+      }
+    : {
+        container: 'breadcrumb-navlinks',
+        separator: 'navlinks-separator',
+        link: 'navlink',
+        active: 'navlink--active',
+      }
+)
+</script>
+
+<template>
+  <!-- Plain navigation; the form page's own route-leave guard covers
+       unsaved changes on edit→show -->
+  <div v-if="shownNavlinks.length > 0 || shownModeLinks.length > 0" :class="cls.container">
+    <!-- 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="cls.separator">|</span>
+      <RouterLink :to="mode.to" class="breadcrumb-mode-toggle" :class="cls.link">
+        {{ mode.label }}
+      </RouterLink>
+    </template>
+    <template v-for="(link, index) in shownNavlinks" :key="link.to?.name || index">
+      <span v-if="shownModeLinks.length > 0 || index > 0" :class="cls.separator">|</span>
+      <RouterLink :to="link.to" :class="[cls.link, { [cls.active]: link.active }]">
+        {{ link.label }}
+      </RouterLink>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* Historical styles of each call site, keyed by variant container so the
+   look of both bars is preserved exactly (AppLayout was compact). */
+.layout-navlinks {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--fad-font-size-sm);
+}
+
+.layout-navlinks-separator {
+  color: var(--p-surface-400, #94a3b8);
+  opacity: 0.5;
+}
+
+.layout-navlink {
+  color: var(--p-primary-500, #3b82f6);
+  text-decoration: none;
+  transition: color var(--fad-transition-fast);
+}
+
+.layout-navlink:hover {
+  color: var(--p-primary-600, #2563eb);
+}
+
+.layout-navlink--active {
+  color: var(--p-surface-600, #475569);
+  font-weight: var(--fad-font-weight-medium);
+  pointer-events: none;
+}
+
+.breadcrumb-navlinks {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.navlinks-separator {
+  color: var(--p-surface-400, #94a3b8);
+}
+
+.navlink {
+  color: var(--p-primary-500, #3b82f6);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.navlink:hover {
+  color: var(--p-primary-700, #1d4ed8);
+  text-decoration: underline;
+}
+
+.navlink--active {
+  color: var(--p-surface-700, #334155);
+  font-weight: 500;
+  pointer-events: none;
+}
+</style>

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

@@ -12,11 +12,10 @@ import { computed, inject, ref, type Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { useNavContext, type BreadcrumbItem, type NavLinkItem } from '../../../composables/useNavContext'
 import Breadcrumb from 'primevue/breadcrumb'
+import NavlinksGroup from '../NavlinksGroup.vue'
 
 interface FeaturesConfig {
   breadcrumb?: boolean
-  /** Opt-in (#1332): render a View↔Edit toggle next to the terminal crumb */
-  breadcrumbModeToggle?: boolean
   [key: string]: unknown
 }
 
@@ -42,11 +41,6 @@ const showBreadcrumb = computed<boolean>(() => {
   return true
 })
 
-// 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>
 
 <template>
@@ -65,30 +59,8 @@ const shownModeLinks = computed(() =>
     </Breadcrumb>
 
     <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
-         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 || 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="mode.to"
-          class="navlink breadcrumb-mode-toggle"
-        >
-          {{ mode.label }}
-        </RouterLink>
-      </template>
-      <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="link.to"
-          class="navlink"
-          :class="{ 'navlink--active': link.active }"
-        >
-          {{ link.label }}
-        </RouterLink>
-      </template>
-    </div>
+         links (#1332/#1341/#1353) — shared rendering + dedup (#1357) -->
+    <NavlinksGroup :navlinks="navlinks" :mode-links="modeLinks" variant="breadcrumb" />
   </div>
 </template>
 
@@ -105,33 +77,7 @@ const shownModeLinks = computed(() =>
   padding-bottom: 0;
 }
 
-.breadcrumb-navlinks {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-}
-
-.navlinks-separator {
-  color: var(--p-surface-400, #94a3b8);
-}
-
-.navlink {
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.navlink:hover {
-  color: var(--p-primary-700, #1d4ed8);
-  text-decoration: underline;
-}
-
-.navlink--active {
-  color: var(--p-surface-700, #334155);
-  font-weight: 500;
-  pointer-events: none;
-}
+/* Navlinks styles moved to NavlinksGroup.vue (#1357) */
 
 /* Override PrimeVue Breadcrumb styles for flat look */
 .default-breadcrumb :deep(.p-breadcrumb) {

package/src/composables/useNavContext.ts

@@ -377,6 +377,8 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
   })
 
   const navlinks = computed(() => {
+    void i18nLocale.value // "Details" label re-resolves on locale change
+
     if (!parentConfig.value) return []
 
     const { entity: parentEntity, param, itemRoute } = parentConfig.value
@@ -391,7 +393,7 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
     // Details link - use manager's idField for param name
     const links: NavLinkItem[] = [
       {
-        label: 'Details',
+        label: breadcrumbLabel('details', 'Details'),
         to: {
           name: parentRouteName!,
           params: { [parentManager.idField!]: parentId.value as string },
@@ -448,10 +450,17 @@ export function useNavContext(_options: UseNavContextOptions = {}): UseNavContex
   // MODE TOGGLE / MODE LINKS (#1332, #1353)
   // ============================================================================
 
-  function toggleLabel(target: 'show' | 'edit'): string {
-    const trace = kernelI18n?.resolve(target === 'edit' ? 'breadcrumb.edit' : 'breadcrumb.view')
+  /** Resolve a `breadcrumb.*` label from the i18n catalog, with fallback. */
+  function breadcrumbLabel(key: string, fallback: string): string {
+    const trace = kernelI18n?.resolve(`breadcrumb.${key}`)
     if (trace?.hit) return trace.result
-    return target === 'edit' ? 'Edit' : 'View'
+    return fallback
+  }
+
+  function toggleLabel(target: 'show' | 'edit'): string {
+    return target === 'edit'
+      ? breadcrumbLabel('edit', 'Edit')
+      : breadcrumbLabel('view', 'View')
   }
 
   /** Build one mode link if its route exists and (for edit) permission allows. */

package/src/composables/useSemanticBreadcrumb.ts

@@ -89,10 +89,15 @@ export function computeSemanticBreadcrumb(
         items.push({ kind: actionKind, entity: lastEntity, id: pendingId })
         pendingId = null
       } else {
-        // No pending ID - update last item's kind (e.g., /books/create)
+        // No pending ID and the last item is an id-less entity level
+        // (e.g. /books/create): append the action as its own item so the
+        // entity-list crumb survives — mutating the list item into
+        // entity-create ate the "Books" level (#1356). When the last item
+        // already carries an id (/books/1/edit) the action was consumed
+        // at the id segment; swallow it as before.
         const lastItem = items[items.length - 1]
         if (lastItem && lastItem.kind.startsWith('entity-') && !lastItem.id) {
-          lastItem.kind = actionKind
+          items.push({ kind: actionKind, entity: lastEntity })
         }
       }
       continue