@omnitend/dashboard-for-laravel 0.7.1 → 0.9.0

package/dist/types/index.d.ts

@@ -10,8 +10,10 @@ import type { Component } from "vue";
  * - `image` / `file` — file input (`image` additionally shows a preview).
  * - `component` — escape hatch that renders `field.component`.
  * - `repeater` — nested, repeatable sub-form driven by `field.fields`.
+ * - `switch` — a toggle checkbox with contextual on/off text and an
+ *   on-state (filled) style; see `textWhenTrue` / `textWhenFalse`.
  */
-export type FieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "date" | "datetime-local" | "datetime" | "time" | "currency" | "percentage" | "textarea" | "select" | "checkbox" | "radio" | "image" | "file" | "component" | "repeater";
+export type FieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "date" | "datetime-local" | "datetime" | "time" | "currency" | "percentage" | "textarea" | "select" | "checkbox" | "switch" | "radio" | "image" | "file" | "component" | "repeater";
 /**
  * A value that may be supplied directly or computed from the live form
  * model. Predicates receive the current model so fields can react to
@@ -68,6 +70,14 @@ export interface FieldDefinition {
     max?: number | string;
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
+    /**
+     * For `percentage` fields: treat the underlying model value as a 0–1
+     * fraction while showing/editing it as a 0–100 percentage. The model keeps
+     * the fraction (e.g. `0.2`), the input shows `20`. Off by default (the value
+     * is taken as a whole percentage). Use for fields stored as ratios (VAT
+     * rates, discounts, …).
+     */
+    asFraction?: boolean;
     /** `accept` attribute for `image`/`file` inputs (e.g. "image/*"). */
     accept?: string;
     /** Help text displayed below the field (always visible). */
@@ -77,6 +87,23 @@ export interface FieldDefinition {
      * function of the model for dynamic hints.
      */
     hint?: MaybeFn<string>;
+    /**
+     * Longer help text revealed in a popover from a small info affordance
+     * on the field's label (on hover/focus). Complements `hint` (which is
+     * always-visible muted text below the control). May be a function of
+     * the model. For rich content, use the `#info` slot instead.
+     */
+    info?: MaybeFn<string>;
+    /**
+     * For `switch` fields: contextual label shown when the toggle is on.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenTrue?: MaybeFn<string>;
+    /**
+     * For `switch` fields: contextual label shown when the toggle is off.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenFalse?: MaybeFn<string>;
     /** CSS class for the form group */
     class?: string;
     /** Additional props to pass to the input component */

package/dist/types/navigation.d.ts

@@ -10,7 +10,13 @@ export interface NavigationItem {
 export interface NavigationGroup {
     label?: string;
     items: NavigationItem[];
+    /**
+     * Per-group override for the sidebar's `collapsibleGroups` behaviour.
+     * Set to `false` to keep a group permanently expanded (no toggle header)
+     * even when the sidebar has collapsible groups enabled. Defaults to `true`.
+     */
     collapsible?: boolean;
+    /** Reserved for a future explicit initial-open hint; not currently wired. */
     collapsed?: boolean;
     visible?: boolean;
 }

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-06-30T14:52:12.642Z",
+  "generated": "2026-07-04T10:39:25.077Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.7.0"
+    "version": "0.9.0"
   },
   "components": {
     "base": [
@@ -1264,6 +1264,20 @@
             "default": "'/logout'",
             "description": "Logout URL for navbar dropdown"
           },
+          {
+            "name": "collapsibleGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Turn sidebar group headers into accordion toggles that collapse/expand\ntheir items. When off (default), every group is permanently expanded."
+          },
+          {
+            "name": "autoCollapseInactiveGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Only relevant when `collapsibleGroups` is on. `true` (default): only the\nactive-route group starts open and opening one closes the others\n(single-open accordion). `false`: all groups start open, toggled independently."
+          },
           {
             "name": "storageKey",
             "type": "string",
@@ -1409,6 +1423,20 @@
             "required": false,
             "default": "'Dashboard'",
             "description": ""
+          },
+          {
+            "name": "collapsibleGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Turn group headers into accordion toggles that collapse/expand their items.\nWhen off (default), every group is rendered permanently expanded."
+          },
+          {
+            "name": "autoCollapseInactiveGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Only relevant when `collapsibleGroups` is on.\n`true` (default): only the active-route group starts open, and opening one\ngroup closes the others (single-open accordion).\n`false`: all groups start open and toggle independently."
           }
         ],
         "events": [
@@ -1448,6 +1476,10 @@
               {
                 "name": "collapsed",
                 "title": "binding"
+              },
+              {
+                "name": "is-expanded",
+                "title": "binding"
               }
             ]
           }
@@ -1573,6 +1605,29 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXFieldLabel",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXFieldLabel.vue",
+        "description": "",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "required": true,
+            "description": "Visible label text."
+          },
+          {
+            "name": "info",
+            "type": "string",
+            "required": false,
+            "description": "Optional help text revealed in a popover from an info affordance."
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXForm",
         "category": "extended",
@@ -2212,8 +2267,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 65,
+    "totalComponents": 66,
     "baseComponents": 57,
-    "extendedComponents": 8
+    "extendedComponents": 9
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-06-30T14:52:12.703Z
+> Last updated: 2026-07-04T10:39:25.137Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

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 65 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 66 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 (8 components)
+## Extended Components (9 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -90,6 +90,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
 - [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation
 - [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
+- [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
 - [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting

package/package.json

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

package/resources/css/theme.scss

@@ -169,7 +169,8 @@ $dashboard-navbar-height: 64px;
     border-bottom-color: $navbar-dark-toggler-border-color;
   }
 
-  .nav-group-label {
+  .nav-group-label,
+  .nav-group-toggle {
     color: $navbar-dark-color;
   }
 
@@ -197,6 +198,66 @@ $dashboard-navbar-height: 64px;
   height: $dashboard-navbar-height;
 }
 
+// ----------------------------------------------------------------------------
+// Toasts
+// ----------------------------------------------------------------------------
+// Bootstrap Vue Next renders toasts with Bootstrap's `.text-bg-{variant}`
+// utility, which fills the whole toast with a saturated colour and white text —
+// loud "candy" blocks that are wrong for a dashboard. Restyle them as a calm,
+// neutral surface with a subtle semantic tint + a coloured left accent rail and
+// progress bar. Colour still signals the toast type, but the bold palette stays
+// where it belongs (actions, badges, selected states).
+
+.toast {
+  overflow: hidden; // clip the bottom progress bar to the rounded corners
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  // BVN wraps each toast in a <span>, which defeats Bootstrap's built-in
+  // `.toast:not(:last-child)` spacing (toasts are no longer direct children of
+  // the container). Add the gap on the toast itself so it doesn't rely on that.
+  margin-bottom: 0.75rem;
+
+  .toast-header {
+    background-color: transparent;
+    border-bottom: 0; // remove the two-tone header/body split
+    padding-bottom: 0.25rem;
+    color: $dark; // dark, high-contrast title
+    font-weight: 600;
+  }
+
+  .toast-body {
+    padding-top: 0.25rem;
+    color: $secondary; // muted message text
+  }
+
+  // Hide the auto-dismiss countdown bar — the ticking animation reads as
+  // stressful/urgent, which is wrong for a passive notification. Auto-dismiss
+  // still works; only its visual indicator is removed.
+  .progress {
+    display: none;
+  }
+
+  // Semantic variants: subtle tinted surface. Overrides the saturated
+  // `.text-bg-*` fill (compound selector wins on specificity); the dark title /
+  // muted body from the base rules above stay.
+  @each $name, $color in (
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info
+  ) {
+    &.text-bg-#{$name} {
+      // !important overrides Bootstrap's `.text-bg-*` helper, which sets a
+      // saturated background-color !important that BVN applies per variant.
+      background-color: mix($color, $white, 8%) !important;
+    }
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Custom Utilities
 // ----------------------------------------------------------------------------

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

@@ -7,6 +7,8 @@
       :title="title"
       :collapsed="collapsed"
       :hidden="hidden"
+      :collapsible-groups="collapsibleGroups"
+      :auto-collapse-inactive-groups="autoCollapseInactiveGroups"
       @toggle="toggleSidebar"
     >
       <!-- Dynamically forward all sidebar-* slots by stripping the prefix -->
@@ -82,6 +84,19 @@ interface Props {
   /** Logout URL for navbar dropdown */
   logoutUrl?: string;
 
+  /**
+   * Turn sidebar group headers into accordion toggles that collapse/expand
+   * their items. When off (default), every group is permanently expanded.
+   */
+  collapsibleGroups?: boolean;
+
+  /**
+   * Only relevant when `collapsibleGroups` is on. `true` (default): only the
+   * active-route group starts open and opening one closes the others
+   * (single-open accordion). `false`: all groups start open, toggled independently.
+   */
+  autoCollapseInactiveGroups?: boolean;
+
   /** LocalStorage key for sidebar state persistence */
   storageKey?: string;
 
@@ -98,6 +113,8 @@ const props = withDefaults(defineProps<Props>(), {
   pageTitle: '',
   user: null,
   logoutUrl: '/logout',
+  collapsibleGroups: false,
+  autoCollapseInactiveGroups: true,
   storageKey: 'dashboard-sidebar-hidden',
   dashboardId: '',
 });