@omnitend/dashboard-for-laravel 0.21.0 → 0.22.0

package/dist/types/navigation.d.ts

@@ -28,3 +28,16 @@ export interface NavigationGroup {
     visible?: boolean;
 }
 export type Navigation = NavigationGroup[];
+/**
+ * Horizontal alignment of the navbar search slot content within its region:
+ * `"start"` = flush left (after the title from `md` up), `"center"` = centred.
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarSearchAlign = "start" | "center";
+/**
+ * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
+ * it to its own full-width row (the bar grows), `"hide"` removes it entirely
+ * (for apps that relocate page actions into the page on phones).
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarActionsOnMobile = "wrap" | "hide";

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-10T09:19:45.286Z",
+  "generated": "2026-07-11T04:13:01.837Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.19.2"
+    "version": "0.21.0"
   },
   "components": {
     "base": [
@@ -1394,7 +1394,14 @@
             "name": "fluid",
             "type": "boolean",
             "required": false,
-            "description": "Render the page content full-width and left-aligned instead of the default\ncentred, reading-width (`col-xl-10`) column. Use for data-heavy admin pages\n(wide tables)."
+            "description": "Render the page content full-width and left-aligned instead of the default\ncentred, reading-width column. Use for data-heavy admin pages (wide tables)."
+          },
+          {
+            "name": "contentMaxWidth",
+            "type": "string",
+            "required": false,
+            "default": "'1140px'",
+            "description": "Max width of the centred content column (any CSS length). A genuine cap, so\nforms and text-heavy pages don't stretch to ~2000px on a wide display.\nIgnored when `fluid`. Set a large value (or use `fluid`) for full width."
           },
           {
             "name": "contentClass",
@@ -1410,11 +1417,18 @@
             "description": "User object for navbar dropdown"
           },
           {
-            "name": "logoutUrl",
-            "type": "string",
+            "name": "searchAlign",
+            "type": "NavbarSearchAlign",
             "required": false,
-            "default": "'/logout'",
-            "description": "Logout URL for navbar dropdown"
+            "default": "'start'",
+            "description": "Horizontal alignment of the navbar search slot content (`\"start\"` = flush\nleft, `\"center\"` = centred), forwarded to DXDashboardNavbar."
+          },
+          {
+            "name": "actionsOnMobile",
+            "type": "NavbarActionsOnMobile",
+            "required": false,
+            "default": "'wrap'",
+            "description": "What the navbar actions slot does below `md`: `\"wrap\"` to its own\nfull-width row, `\"hide\"` to remove it (relocate actions into the page on\nphones). Forwarded to DXDashboardNavbar."
           },
           {
             "name": "collapsibleGroups",
@@ -1469,7 +1483,7 @@
         "name": "DXDashboardNavbar",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXDashboardNavbar.vue",
-        "description": "Top navigation bar for the dashboard shell: menu toggle, page title, centred search, page-level actions, and the user menu. Usually rendered by `DXDashboard`, which forwards these slots with a `navbar-` prefix.",
+        "description": "Top navigation bar for the dashboard shell: menu toggle, page title, search (aligned per `searchAlign`, left by default), page-level actions, and the user menu. Usually rendered by `DXDashboard`, which forwards these slots with a `navbar-` prefix.",
         "props": [
           {
             "name": "user",
@@ -1484,6 +1498,20 @@
             "required": false,
             "default": "\"\"",
             "description": "Page title shown at the left of the navbar (hidden below the `md` breakpoint)."
+          },
+          {
+            "name": "searchAlign",
+            "type": "NavbarSearchAlign",
+            "required": false,
+            "default": "\"start\"",
+            "description": "Horizontal alignment of the search slot content within its region\n(`\"start\"` = flush left, `\"center\"` = centred). Applies at every size:\nthe region sits inline after the title from `md` up, and is its own\nfull-width row below."
+          },
+          {
+            "name": "actionsOnMobile",
+            "type": "NavbarActionsOnMobile",
+            "required": false,
+            "default": "\"wrap\"",
+            "description": "What the actions slot does below the `md` breakpoint: `\"wrap\"` moves it\nto its own full-width row (the bar grows), `\"hide\"` removes it entirely\n(for apps that relocate page actions into the page on phones)."
           }
         ],
         "events": [
@@ -1501,12 +1529,12 @@
           },
           {
             "name": "search",
-            "description": "Search input or component. Centred in the bar on wider screens; drops to its own full-width row below the `md` breakpoint.",
+            "description": "Search input or component. Aligned per `searchAlign` within its region (inline in the bar from `md` up; its own full-width row below).",
             "bindings": []
           },
           {
             "name": "actions",
-            "description": "Page-level primary actions (e.g. a Create button), right-aligned next to the user menu.",
+            "description": "Page-level primary actions (e.g. a Create button). Right-aligned next to the user menu from `md` up; below, wraps to its own full-width row or is hidden entirely per `actionsOnMobile`.",
             "bindings": [
               {
                 "title": "binding",
@@ -1767,7 +1795,7 @@
         "name": "DXField",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXField.vue",
-        "description": "Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.",
+        "description": "Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `info-popover`, `hint` and `repeater-row` slots for per-field customisation.",
         "props": [
           {
             "name": "field",
@@ -1968,7 +1996,13 @@
           }
         ],
         "events": [],
-        "slots": [],
+        "slots": [
+          {
+            "name": "popover",
+            "description": "Rich popover body. Overrides the plain `info` text — use",
+            "bindings": []
+          }
+        ],
         "methods": []
       },
       {

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-10T09:19:45.350Z
+> Last updated: 2026-07-11T04:13:01.900Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -31,8 +31,11 @@
     "dev": "vite build --watch",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "typecheck": "vue-tsc --noEmit",
+    "pretest": "vite build",
     "test": "vitest",
+    "pretest:ui": "vite build",
     "test:ui": "vitest --ui",
+    "pretest:headless": "vite build",
     "test:headless": "vitest --run --browser.headless",
     "docs:dev": "astro dev",
     "docs:build": "npm run docs:generate:ai && astro build",

package/resources/css/theme.scss

@@ -287,11 +287,26 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 }
 
 .dashboard-navbar {
-  height: $dashboard-navbar-height;
+  // Floor, not a fixed height: below `md` the search (and actions) drop to
+  // their own rows and the bar must grow to contain them (#93). Single-row
+  // content is shorter than this, so desktop stays exactly this height,
+  // aligned with the sidebar header.
+  min-height: $dashboard-navbar-height;
   // A light grey top bar over the white content panel (higher contrast than a
   // grey-everywhere layout). The navbar markup drops its `bg-white` class so
   // this wins without `!important`.
-  background-color: #f8f9fa;
+  background-color: var(--bs-light);
+}
+
+// The avatar dropdown trigger (DXDashboardNavbar sets this via toggle-class,
+// so it lands on the BVN-rendered button — global rule, scoped CSS can't
+// reach it). The themed $btn-padding-y (10px) would make it ~54px tall and
+// blow the navbar's single-row content budget: 64px header minus the bar's
+// 16px padding = 48px. 6px keeps a ~46px tap target (≥ the 44px WCAG
+// guideline) while still fitting the budget.
+.dashboard-navbar__user-menu-toggle {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 // ----------------------------------------------------------------------------

package/resources/js/components/extended/DXDashboard.vue

@@ -36,7 +36,8 @@
       <DXDashboardNavbar
         :page-title="pageTitle"
         :user="user"
-        :logout-url="logoutUrl"
+        :search-align="searchAlign"
+        :actions-on-mobile="actionsOnMobile"
         @toggle-sidebar="toggleSidebar"
       >
         <!-- Dynamically forward all navbar-* slots by stripping the prefix -->
@@ -80,7 +81,7 @@ import DXDashboardNavbar from './DXDashboardNavbar.vue';
 import DContainer from '../base/DContainer.vue';
 import DRow from '../base/DRow.vue';
 import DCol from '../base/DCol.vue';
-import type { Navigation } from '../../types/navigation';
+import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign } from '../../types/navigation';
 
 const slots = useSlots();
 
@@ -116,8 +117,18 @@ interface Props {
   /** User object for navbar dropdown */
   user?: { name: string; email: string } | null;
 
-  /** Logout URL for navbar dropdown */
-  logoutUrl?: string;
+  /**
+   * Horizontal alignment of the navbar search slot content (`"start"` = flush
+   * left, `"center"` = centred), forwarded to DXDashboardNavbar.
+   */
+  searchAlign?: NavbarSearchAlign;
+
+  /**
+   * What the navbar actions slot does below `md`: `"wrap"` to its own
+   * full-width row, `"hide"` to remove it (relocate actions into the page on
+   * phones). Forwarded to DXDashboardNavbar.
+   */
+  actionsOnMobile?: NavbarActionsOnMobile;
 
   /**
    * Turn sidebar group headers into accordion toggles that collapse/expand
@@ -147,12 +158,13 @@ const props = withDefaults(defineProps<Props>(), {
   title: 'Dashboard',
   pageTitle: '',
   user: null,
-  logoutUrl: '/logout',
   collapsibleGroups: false,
   autoCollapseInactiveGroups: true,
   storageKey: 'dashboard-sidebar-hidden',
   dashboardId: '',
   contentMaxWidth: '1140px',
+  searchAlign: 'start',
+  actionsOnMobile: 'wrap',
 });
 
 const collapsed = ref(false);
@@ -245,7 +257,7 @@ const toggleSidebar = () => {
 <style scoped>
 .dashboard-layout {
   min-height: 100vh;
-  background-color: #f8f9fa;
+  background-color: var(--bs-light);
 }
 
 .dashboard-content {
@@ -259,6 +271,6 @@ const toggleSidebar = () => {
   max-width: 100%;
   /* A white content panel under the light grey top bar / layout, so forms and
      content sit on white (higher contrast than a grey-everywhere dashboard). */
-  background-color: #fff;
+  background-color: var(--bs-white);
 }
 </style>

package/resources/js/components/extended/DXDashboardNavbar.vue

@@ -1,8 +1,9 @@
 <!--
   @component
-  Top navigation bar for the dashboard shell: menu toggle, page title, centred
-  search, page-level actions, and the user menu. Usually rendered by
-  `DXDashboard`, which forwards these slots with a `navbar-` prefix.
+  Top navigation bar for the dashboard shell: menu toggle, page title, search
+  (aligned per `searchAlign`, left by default), page-level actions, and the
+  user menu. Usually rendered by `DXDashboard`, which forwards these slots
+  with a `navbar-` prefix.
 -->
 <template>
   <header class="dashboard-navbar border-bottom">
@@ -39,25 +40,35 @@
 
         <div
           v-if="$slots.search"
-          class="dashboard-navbar__search d-flex justify-content-center"
+          class="dashboard-navbar__search d-flex"
+          :class="searchAlignClass"
         >
-          <!-- @slot Search input or component. Centred in the bar on wider screens; drops to its own full-width row below the `md` breakpoint. -->
+          <!-- @slot Search input or component. Aligned per `searchAlign` within its region (inline in the bar from `md` up; its own full-width row below). -->
           <slot name="search" />
         </div>
 
-        <div class="dashboard-navbar__end d-flex align-items-center gap-3">
-          <!-- Page-level primary actions, right-aligned next to the user menu -->
-          <div
-            v-if="$slots.actions"
-            class="dashboard-navbar__actions d-flex align-items-center gap-2"
-          >
-            <!--
-              @slot Page-level primary actions (e.g. a Create button), right-aligned next to the user menu.
-              @binding {string} pageTitle The current page title, for context.
-            -->
-            <slot name="actions" :pageTitle="pageTitle" />
-          </div>
+        <!-- Page-level primary actions: right-aligned next to the user menu
+             from `md` up; their own wrappable full-width row below (#93),
+             or hidden below `md` when `actionsOnMobile` is "hide". -->
+        <div
+          v-if="$slots.actions"
+          class="dashboard-navbar__actions align-items-center gap-2"
+          :class="actionsDisplayClass"
+        >
+          <!--
+            @slot Page-level primary actions (e.g. a Create button). Right-aligned next to the user menu from `md` up; below, wraps to its own full-width row or is hidden entirely per `actionsOnMobile`.
+            @binding {string} pageTitle The current page title, for context.
+          -->
+          <slot name="actions" :pageTitle="pageTitle" />
+        </div>
 
+        <!-- Only render the user-menu cluster when it has content: an empty
+             flex item would still cost a bar gap, pushing actions off the
+             right edge in guest (user-less) layouts. -->
+        <div
+          v-if="$slots['user-menu'] || user"
+          class="dashboard-navbar__end d-flex align-items-center gap-3"
+        >
           <!--
             @slot Replaces the entire user menu (the default avatar dropdown).
             @binding {object} user The signed-in user.
@@ -68,6 +79,7 @@
               variant="link"
               class="text-dark"
               menu-class="dropdown-menu-end"
+              toggle-class="dashboard-navbar__user-menu-toggle"
               no-caret
             >
               <template #button-content>
@@ -96,11 +108,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
+import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /** The signed-in user shown in the avatar dropdown. `null` hides the menu. */
     user?: {
@@ -110,13 +124,53 @@ withDefaults(
     } | null;
     /** Page title shown at the left of the navbar (hidden below the `md` breakpoint). */
     pageTitle?: string;
+    /**
+     * Horizontal alignment of the search slot content within its region
+     * (`"start"` = flush left, `"center"` = centred). Applies at every size:
+     * the region sits inline after the title from `md` up, and is its own
+     * full-width row below.
+     */
+    searchAlign?: NavbarSearchAlign;
+    /**
+     * What the actions slot does below the `md` breakpoint: `"wrap"` moves it
+     * to its own full-width row (the bar grows), `"hide"` removes it entirely
+     * (for apps that relocate page actions into the page on phones).
+     */
+    actionsOnMobile?: NavbarActionsOnMobile;
   }>(),
   {
     user: null,
     pageTitle: "",
+    searchAlign: "start",
+    actionsOnMobile: "wrap",
   },
 );
 
+// Explicit map (not string interpolation) so an out-of-union value at runtime
+// falls back to a valid class instead of a silent Bootstrap no-op, and the
+// full class names stay greppable.
+const SEARCH_ALIGN_CLASSES: Record<NavbarSearchAlign, string> = {
+  start: "justify-content-start",
+  center: "justify-content-center",
+};
+
+const searchAlignClass = computed(
+  () => SEARCH_ALIGN_CLASSES[props.searchAlign] ?? SEARCH_ALIGN_CLASSES.start,
+);
+
+// "hide" swaps d-flex for d-none/d-md-flex on the WRAPPER — hiding only the
+// slot content would leave a zero-height full-width row still costing a flex
+// row-gap on phones. Explicit map + fallback, same rationale as
+// SEARCH_ALIGN_CLASSES above.
+const ACTIONS_DISPLAY_CLASSES: Record<NavbarActionsOnMobile, string> = {
+  wrap: "d-flex",
+  hide: "d-none d-md-flex",
+};
+
+const actionsDisplayClass = computed(
+  () => ACTIONS_DISPLAY_CLASSES[props.actionsOnMobile] ?? ACTIONS_DISPLAY_CLASSES.wrap,
+);
+
 defineEmits<{
   /** Emitted when the hamburger menu button is clicked. */
   toggleSidebar: [];
@@ -140,32 +194,56 @@ const getUserInitial = (user: { name: string } | null) => {
   padding: 0.5rem 0;
 }
 
-/* Push the user-menu / actions cluster to the right. */
+/* Push the user-menu cluster to the right. (The actions region carries its
+   own auto margin from `md` up — see the sibling rule below.) */
 .dashboard-navbar__end {
   margin-left: auto;
 }
 
 /*
- * Mobile-first: the search sits on its own full-width row below the toggle /
- * title / user-menu row (order after both, flex-basis 100% forces the wrap).
- * From `md` up it moves inline between the title and the user menu and grows to
- * fill the middle, centring its content.
+ * Mobile-first: the actions and the search each sit on their own full-width
+ * row below the toggle / title / user-menu row (flex-basis 100% forces the
+ * wrap; the bar and the sticky header grow to contain them — #93). The
+ * actions row itself wraps so a wide button group stacks instead of
+ * overflowing the viewport.
+ * From `md` up everything moves inline: search between the title and the
+ * actions (grows to fill the middle; `searchAlign` controls where its content
+ * sits), actions right-aligned next to the user menu. The actions' order 2
+ * holds at every size — only search and end change order across the
+ * breakpoint.
  */
+.dashboard-navbar__actions {
+  order: 2;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+}
+
 .dashboard-navbar__search {
   order: 3;
   flex: 0 0 100%;
-  width: 100%;
 }
 
 @media (min-width: 768px) {
   .dashboard-navbar__search {
     order: 1;
     flex: 1 1 auto;
-    width: auto;
+  }
+
+  .dashboard-navbar__actions {
+    flex: 0 1 auto;
+    flex-wrap: nowrap;
+    margin-left: auto;
   }
 
   .dashboard-navbar__end {
-    order: 2;
+    order: 3;
+  }
+
+  /* When the actions region is present it carries the push-right auto margin;
+     zero the user-menu cluster's so the two sit adjacent instead of having
+     the free space split between them. */
+  .dashboard-navbar__actions ~ .dashboard-navbar__end {
+    margin-left: 0;
   }
 }
 

package/resources/js/index.ts

@@ -139,4 +139,6 @@ export type {
     NavigationItem,
     NavigationGroup,
     Navigation,
+    NavbarSearchAlign,
+    NavbarActionsOnMobile,
 } from "./types/navigation";

package/resources/js/types/navigation.ts

@@ -30,3 +30,18 @@ export interface NavigationGroup {
 }
 
 export type Navigation = NavigationGroup[];
+
+/**
+ * Horizontal alignment of the navbar search slot content within its region:
+ * `"start"` = flush left (after the title from `md` up), `"center"` = centred.
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarSearchAlign = "start" | "center";
+
+/**
+ * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
+ * it to its own full-width row (the bar grows), `"hide"` removes it entirely
+ * (for apps that relocate page actions into the page on phones).
+ * Shared by DXDashboard (which forwards it) and DXDashboardNavbar.
+ */
+export type NavbarActionsOnMobile = "wrap" | "hide";