@quazardous/qdadm 2.7.1 → 2.7.3

package/README.md

@@ -98,6 +98,7 @@ Options: `transformRequest`, `transformResponse`, `responseFormat`, `clientSideP
 | [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 |

package/package.json

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

package/src/components/layout/AppLayout.vue

@@ -390,19 +390,10 @@ const shownModeToggle = computed(() =>
           </template>
         </Breadcrumb>
 
-        <!-- View↔Edit mode toggle (#1332/#1341) — plain navigation; the form
-             page's own route-leave guard covers unsaved changes on edit→show -->
-        <RouterLink
-          v-if="shownModeToggle"
-          :to="shownModeToggle.to"
-          class="breadcrumb-mode-toggle"
-        >
-          <i :class="shownModeToggle.target === 'edit' ? 'pi pi-pencil' : 'pi pi-eye'"></i>
-          <span>{{ shownModeToggle.label }}</span>
-        </RouterLink>
-
-        <!-- Navlinks (provided by PageNav for child routes) -->
-        <div v-if="navlinks.length > 0" class="layout-navlinks">
+        <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
+             toggle (#1332/#1341) — 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">
             <span v-if="index > 0" class="layout-navlinks-separator">|</span>
             <RouterLink
@@ -413,6 +404,15 @@ const shownModeToggle = computed(() =>
               {{ link.label }}
             </RouterLink>
           </template>
+          <template v-if="shownModeToggle">
+            <span v-if="navlinks.length > 0" class="layout-navlinks-separator">|</span>
+            <RouterLink
+              :to="shownModeToggle.to"
+              class="layout-navlink breadcrumb-mode-toggle"
+            >
+              {{ shownModeToggle.label }}
+            </RouterLink>
+          </template>
         </div>
       </div>
 
@@ -721,24 +721,6 @@ const shownModeToggle = computed(() =>
   padding-bottom: 0;
 }
 
-/* Mode toggle sits right after the crumbs; auto margin keeps navlinks pinned right */
-.breadcrumb-mode-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-left: 0.75rem;
-  margin-right: auto;
-  font-size: 0.875rem;
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color var(--fad-transition-fast);
-}
-
-.breadcrumb-mode-toggle:hover {
-  color: var(--p-primary-600, #2563eb);
-  text-decoration: underline;
-}
-
 .layout-navlinks {
   display: flex;
   align-items: center;

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

@@ -64,19 +64,10 @@ const shownModeToggle = computed(() =>
       </template>
     </Breadcrumb>
 
-    <!-- View↔Edit mode toggle (#1332) — plain navigation; the form page's
-         own route-leave guard covers unsaved changes on edit→show -->
-    <RouterLink
-      v-if="shownModeToggle"
-      :to="shownModeToggle.to"
-      class="breadcrumb-mode-toggle"
-    >
-      <i :class="shownModeToggle.target === 'edit' ? 'pi pi-pencil' : 'pi pi-eye'"></i>
-      <span>{{ shownModeToggle.label }}</span>
-    </RouterLink>
-
-    <!-- Navlinks (provided by PageNav for child routes) -->
-    <div v-if="navlinks.length > 0" class="breadcrumb-navlinks">
+    <!-- Navlinks (provided by PageNav for child routes) + View↔Edit mode
+         toggle (#1332/#1341) — 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">
         <span v-if="index > 0" class="navlinks-separator">|</span>
         <RouterLink
@@ -87,6 +78,15 @@ const shownModeToggle = computed(() =>
           {{ link.label }}
         </RouterLink>
       </template>
+      <template v-if="shownModeToggle">
+        <span v-if="navlinks.length > 0" class="navlinks-separator">|</span>
+        <RouterLink
+          :to="shownModeToggle.to"
+          class="navlink breadcrumb-mode-toggle"
+        >
+          {{ shownModeToggle.label }}
+        </RouterLink>
+      </template>
     </div>
   </div>
 </template>
@@ -111,24 +111,6 @@ const shownModeToggle = computed(() =>
   font-size: 0.875rem;
 }
 
-/* Mode toggle sits right after the crumbs; auto margin keeps navlinks pinned right */
-.breadcrumb-mode-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-left: 0.75rem;
-  margin-right: auto;
-  font-size: 0.875rem;
-  color: var(--p-primary-500, #3b82f6);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.breadcrumb-mode-toggle:hover {
-  color: var(--p-primary-700, #1d4ed8);
-  text-decoration: underline;
-}
-
 .navlinks-separator {
   color: var(--p-surface-400, #94a3b8);
 }

package/src/styles/_sidebar.scss

@@ -57,6 +57,16 @@ $sidebar-box-content-duration: 0.1s;
   background: var(--p-surface-700, #334155);
 }
 
+// #1352 — every .sidebar-box is its own stacking context (z-index: 1), so an
+// open select overlay (appendTo="self", z-index 1001) is TRAPPED inside its
+// box's context and the NEXT sibling box (same z: 1, later in DOM) paints over
+// it — the "transparent dropdown" symptom. An open overlay implies focus
+// inside the box: raise the whole box above its siblings for that duration.
+// (The z-index: 9999 on the overlays themselves can't help across siblings.)
+.sidebar-box:focus-within {
+  z-index: 20;
+}
+
 .sidebar-box-inner {
   display: flex;
   align-items: center;