@omnitend/dashboard-for-laravel 0.22.0 → 0.24.0

package/dist/types/index.d.ts

@@ -85,6 +85,16 @@ export interface FieldDefinition {
     optionsLoader?: OptionsLoader;
     /** Re-run `optionsLoader` whenever the form model changes. */
     reloadOptionsOnChange?: boolean;
+    /**
+     * For `select` fields: render a **searchable** select — type to filter a
+     * long option list, while the model still holds `option.value` (an id).
+     *
+     * A plain `select` is fine for ten options and unusable for hundreds; the
+     * `autocomplete` type filters but models the *typed text*, so it can't back
+     * a foreign key (picking "Tesco" gives you `"Tesco"`, not `37`). This is the
+     * combination high-frequency data entry against a long list needs.
+     */
+    searchable?: boolean;
     /** Number of rows for textarea (default: 3) */
     rows?: number;
     /** Step for numeric/currency/percentage inputs */
@@ -231,6 +241,40 @@ export interface FieldDefinition {
      * applied as `disabled`.
      */
     readonly?: MaybeFn<boolean>;
+    /**
+     * Display the value as static text instead of a control — no border, no
+     * input box (Bootstrap's `.form-control-plaintext`). For values a
+     * profile/settings page shows but never lets you edit, where a `readonly`
+     * input still reads as "you could edit this, but can't".
+     *
+     * Implies read-only, for every field type. Anything backed by a real input
+     * — the text family, textarea, currency, percentage, autocomplete — renders
+     * as static text; control types with no native readonly state
+     * (select/radio/checkbox/switch/file) are disabled instead, exactly as they
+     * are for `readonly`.
+     *
+     * Enforced over `inputProps`: unlike the field's other bindings, which
+     * `inputProps` may override, a plaintext field cannot be made editable
+     * again through it.
+     */
+    plaintext?: MaybeFn<boolean>;
+    /**
+     * Only for `type: "password"`. Show the reveal (eye) toggle that switches
+     * the input between masked and plain text. Defaults to `true` — set
+     * `false` to render a bare password input.
+     */
+    revealable?: boolean;
+    /**
+     * Include this field's value in the submitted payload. Default `true`.
+     *
+     * Set `false` for a **presentational** field — a header, an alert, an
+     * explanatory block rendered via `span` — that exists to lay out the form,
+     * not to hold data. Without it, `DXTable`'s edit modal seeds its form from
+     * every `editFields` key, so those decorative fields are POSTed alongside
+     * the real ones (an empty string, an empty array) purely because they were
+     * declared.
+     */
+    submit?: boolean;
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-11T04:13:01.837Z",
+  "generated": "2026-07-11T10:04:02.971Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.21.0"
+    "version": "0.24.0"
   },
   "components": {
     "base": [
@@ -1468,6 +1468,22 @@
               {
                 "name": "name",
                 "title": "binding"
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "function"
+                },
+                "name": "toggleSidebar",
+                "description": "Shows/hides the sidebar."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "sidebarHidden",
+                "description": "Whether the sidebar is currently hidden."
               }
             ]
           },
@@ -1562,7 +1578,7 @@
           },
           {
             "name": "user-icon",
-            "description": "Custom user avatar/icon in the dropdown trigger.",
+            "description": "Custom user avatar/icon in the dropdown trigger. To decorate the default avatar (e.g. add a notification dot) rather than replace it, render `DXUserAvatar` — the same component used here, so the styling comes with it.",
             "bindings": [
               {
                 "title": "binding",
@@ -1571,6 +1587,14 @@
                 },
                 "name": "initial",
                 "description": "The first letter of the user's name."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "user",
+                "description": "The signed-in user."
               }
             ]
           },
@@ -2857,6 +2881,39 @@
             "required": false,
             "description": "API endpoint for creating new items (e.g., \"/api/products\") — enables \"New\" button"
           },
+          {
+            "name": "showCreateButton",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Render the built-in \"New {item}\" button in the card header (default\n`true` whenever `createUrl` is set). Set `false` to drive the create\nmodal from your own trigger elsewhere — e.g. a button in the dashboard\nnavbar's actions slot calling the exposed `openCreate()`. With no\n`title` and no `header` slot, the header is then dropped entirely\nrather than left empty."
+          },
+          {
+            "name": "footClone",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Render a `<tfoot>` mirroring the header row, so `#foot(<key>)` slots can\nhold per-column totals that line up under their data (#99). Without it\nthere is no footer to put them in. For a fully custom footer, use the\n`custom-foot` slot instead."
+          },
+          {
+            "name": "showEmpty",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Show a message row when there are no rows (default `true`). An empty\ntable body is indistinguishable from a broken one, so the message is on\nby default. Override the wording with `emptyText`, or the whole row with\nthe `empty` slot."
+          },
+          {
+            "name": "emptyText",
+            "type": "string",
+            "required": false,
+            "description": "Message shown when there are no rows. Defaults to \"No {items} found\", or\n\"No {items} match your filters\" when a column filter is active."
+          },
+          {
+            "name": "expandedItems",
+            "type": "Array",
+            "required": false,
+            "description": "Rows currently expanded, as a `v-model`. Pair with the `row-expansion`\nslot to render detail content under a row (#112) instead of forcing every\nper-row detail into a modal."
+          },
           {
             "name": "clientSide",
             "type": "boolean",
@@ -2925,6 +2982,11 @@
             "description": "`v-model:sortBy` update, emitted with the normalized single-column sort array when sorting changes.",
             "properties": []
           },
+          {
+            "name": "update:expandedItems",
+            "description": "`v-model:expandedItems` update, emitted with the rows currently expanded.",
+            "properties": []
+          },
           {
             "name": "update:filters",
             "description": "`v-model:filters` update, emitted with the new filter map when a column filter changes.",
@@ -2949,7 +3011,7 @@
           },
           {
             "name": "name",
-            "description": "Custom rendering for a column's cell. Name it `cell(<fieldKey>)` to target a field; receives the underlying table cell scope.",
+            "description": "Any slot the underlying table supports, forwarded with its scope: `cell(<fieldKey>)` for a cell, `foot(<fieldKey>)` for a footer cell (needs `footClone`), `empty` for the no-rows message, `row-expansion` for expandable row detail, plus `custom-foot`, `top-row`, `bottom-row`, `thead-sub` and the `table-*` slots.",
             "bindings": [
               {
                 "name": "name",
@@ -3150,12 +3212,64 @@
           }
         ],
         "methods": []
+      },
+      {
+        "name": "DXUserAvatar",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXUserAvatar.vue",
+        "description": "The circular user avatar shown in the dashboard navbar's user menu: a single initial on a solid disc, with an optional notification dot. It exists as its own component because `DXDashboardNavbar`'s `user-icon` slot is one consumers routinely *decorate* rather than replace — adding an unread badge, wrapping it in a link. The navbar's styles are scoped, so slot content (compiled in the consumer's scope) can't reuse them; without this component every override starts by re-implementing the avatar's CSS, which then drifts from the theme. Rendering it here means an override is one line and stays on theme.",
+        "props": [
+          {
+            "name": "user",
+            "type": "union",
+            "required": false,
+            "default": "null",
+            "description": "The user whose initial is shown. The first letter of `name` is used."
+          },
+          {
+            "name": "initial",
+            "type": "string",
+            "required": false,
+            "default": "\"\"",
+            "description": "Overrides the initial derived from `user.name` (e.g. two-letter initials)."
+          },
+          {
+            "name": "badge",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Show a notification dot on the avatar (e.g. unread updates)."
+          },
+          {
+            "name": "badgeVariant",
+            "type": "ColorVariant",
+            "required": false,
+            "default": "\"danger\"",
+            "description": "Colour of the notification dot."
+          },
+          {
+            "name": "badgeLabel",
+            "type": "string",
+            "required": false,
+            "default": "\"Unread notifications\"",
+            "description": "Accessible text for the notification dot, announced to screen readers\n(the dot itself is a colour-only signal). Ignored unless `badge` is set."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Replaces the initial inside the disc (e.g. a photo or an icon).",
+            "bindings": []
+          }
+        ],
+        "methods": []
       }
     ]
   },
   "stats": {
-    "totalComponents": 73,
+    "totalComponents": 74,
     "baseComponents": 57,
-    "extendedComponents": 16
+    "extendedComponents": 17
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-11T04:13:01.900Z
+> Last updated: 2026-07-11T10:04:03.051Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -82,6 +82,7 @@ This file provides a complete map of all available documentation for AI agents a
 - [DXStatCard](/components/extended/DXStatCard): A KPI / stat tile: a big formatted value with a title, optional subtitle, an
 - [DXSwitch](/components/extended/DXSwitch): A "filled box" toggle switch built on `DFormCheckbox`: a bordered box sized like
 - [DXTable](/components/extended/DXTable): A comprehensive data table component with built-in pagination, sorting, filtering, and CRUD operatio
+- [DXUserAvatar](/components/extended/DXUserAvatar): The circular user avatar shown in the dashboard navbar's user menu: a single
 
 ### Examples
 
@@ -100,4 +101,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 76
+**Total Pages**: 77

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 68 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 69 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -81,7 +81,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (11 components)
+## Extended Components (12 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -96,6 +96,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
 - [DXSwitch](/components/extended/dxswitch): Extended dashboard component
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
+- [DXUserAvatar](/components/extended/dxuseravatar): Extended dashboard component
 
 ## Composables
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

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

@@ -25,8 +25,17 @@
         :key="strippedName"
         #[strippedName]="slotProps"
       >
-        <!-- @slot Forwards any `sidebar-*` slot to DXDashboardSidebar with the `sidebar-` prefix stripped (e.g. `sidebar-brand` becomes the sidebar's `brand` slot). -->
-        <slot :name="originalName" v-bind="slotProps" />
+        <!--
+          @slot Forwards any `sidebar-*` slot to DXDashboardSidebar with the `sidebar-` prefix stripped (e.g. `sidebar-brand` becomes the sidebar's `brand` slot).
+          @binding {function} toggleSidebar Shows/hides the sidebar — so slot content (e.g. a close affordance in the brand row) can drive it.
+          @binding {boolean} sidebarHidden Whether the sidebar is currently hidden.
+        -->
+        <slot
+          :name="originalName"
+          v-bind="slotProps"
+          :toggleSidebar="toggleSidebar"
+          :sidebarHidden="hidden"
+        />
       </template>
     </DXDashboardSidebar>
 
@@ -46,8 +55,17 @@
           :key="strippedName"
           #[strippedName]="slotProps"
         >
-          <!-- @slot Forwards any `navbar-*` slot to DXDashboardNavbar with the `navbar-` prefix stripped (e.g. `navbar-actions` becomes the navbar's `actions` slot). -->
-          <slot :name="originalName" v-bind="slotProps" />
+          <!--
+            @slot Forwards any `navbar-*` slot to DXDashboardNavbar with the `navbar-` prefix stripped (e.g. `navbar-actions` becomes the navbar's `actions` slot).
+            @binding {function} toggleSidebar Shows/hides the sidebar.
+            @binding {boolean} sidebarHidden Whether the sidebar is currently hidden.
+          -->
+          <slot
+            :name="originalName"
+            v-bind="slotProps"
+            :toggleSidebar="toggleSidebar"
+            :sidebarHidden="hidden"
+          />
         </template>
       </DXDashboardNavbar>
 
@@ -85,6 +103,12 @@ import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign } from '../..
 
 const slots = useSlots();
 
+// Slot-binding precedence: the forwarded slots bind the child's own slot props
+// FIRST and `toggleSidebar`/`sidebarHidden` after, so ours win a name clash.
+// That's deliberate — the dashboard guarantees those two bindings on every
+// forwarded slot, and a child that later grew a same-named prop must not be
+// able to silently take the guarantee away. No child uses those names today.
+
 interface Props {
   /** Navigation structure for sidebar */
   navigation: Navigation;
@@ -252,6 +276,20 @@ const toggleSidebar = () => {
     console.error('Error saving sidebar state:', error);
   }
 };
+
+defineExpose({
+  /**
+   * Show/hide the sidebar (same as clicking the navbar's hamburger). The
+   * dashboard owns the visibility state, so this is the supported way to drive
+   * it from outside — page content, a custom brand row, a keyboard shortcut.
+   * Also available as a slot binding on every forwarded `sidebar-*`/`navbar-*`
+   * slot, which is usually more convenient.
+   */
+  toggleSidebar,
+
+  /** Whether the sidebar is currently hidden. */
+  sidebarHidden: computed(() => hidden.value),
+});
 </script>
 
 <style scoped>

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

@@ -84,13 +84,12 @@
             >
               <template #button-content>
                 <!--
-                  @slot Custom user avatar/icon in the dropdown trigger.
+                  @slot Custom user avatar/icon in the dropdown trigger. To decorate the default avatar (e.g. add a notification dot) rather than replace it, render `DXUserAvatar` — the same component used here, so the styling comes with it.
                   @binding {string} initial The first letter of the user's name.
+                  @binding {object} user The signed-in user.
                 -->
-                <slot name="user-icon" :initial="getUserInitial(user)">
-                  <div class="user-avatar">
-                    {{ getUserInitial(user) }}
-                  </div>
+                <slot name="user-icon" :initial="getUserInitial(user)" :user="user">
+                  <DXUserAvatar :user="user" />
                 </slot>
               </template>
 
@@ -112,6 +111,7 @@ import { computed } from "vue";
 import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
+import DXUserAvatar from "./DXUserAvatar.vue";
 import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
 
 const props = withDefaults(
@@ -246,17 +246,4 @@ const getUserInitial = (user: { name: string } | null) => {
     margin-left: 0;
   }
 }
-
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--bs-dark);
-  color: var(--bs-white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
-}
 </style>