@omnitend/dashboard-for-laravel 0.19.2 → 0.21.0

package/dist/types/index.d.ts

@@ -123,7 +123,10 @@ export interface FieldDefinition {
      * 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.
+     * the model. Plain text only — for a rich popover body (lists, bold,
+     * paragraphs) use the `#info-popover(<key>)` slot. Note the separate
+     * `#info(<key>)` slot renders an always-visible block below the control,
+     * not popover content.
      */
     info?: MaybeFn<string>;
     /**

package/dist/utils/api.d.ts

@@ -24,7 +24,7 @@ declare class ApiClient {
     post<T = unknown>(url: string, data?: any, options?: Omit<RequestOptions, "method" | "body">): Promise<ApiResponse<T>>;
     put<T = unknown>(url: string, data?: any, options?: Omit<RequestOptions, "method" | "body">): Promise<ApiResponse<T>>;
     patch<T = unknown>(url: string, data?: any, options?: Omit<RequestOptions, "method" | "body">): Promise<ApiResponse<T>>;
-    delete<T = unknown>(url: string, options?: Omit<RequestOptions, "method">): Promise<ApiResponse<T>>;
+    delete<T = unknown>(url: string, data?: any, options?: Omit<RequestOptions, "method" | "body">): Promise<ApiResponse<T>>;
 }
 export declare const api: ApiClient;
 export {};

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-08T06:35:48.024Z",
+  "generated": "2026-07-10T09:19:45.286Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.17.0"
+    "version": "0.19.2"
   },
   "components": {
     "base": [
@@ -205,19 +205,19 @@
             "type": "boolean",
             "required": false,
             "default": "false",
-            "description": "Show an in-flight state: the button is disabled immediately and, after\n`spinnerDelay`, a trailing spinner appears (and the label swaps to\n`loadingText` if given)."
+            "description": "Show an in-flight state: the button is disabled immediately and, after\n`spinnerDelay`, a trailing spinner appears (and the label swaps to\n`loadingText` if given).\n\nDiverges from bvn: `BButton` has a native `loading`/`loadingText` that\nshows its spinner immediately. We intercept both and render our own\nanti-flash spinner instead, so bvn's native loading never fires. See\nDIVERGENCES.md."
           },
           {
             "name": "loadingText",
             "type": "string",
             "required": false,
-            "description": "Label shown in place of the default slot while the spinner is visible.\nOmit to keep the original label alongside the spinner."
+            "description": "Label shown in place of the default slot while the spinner is visible.\nOmit to keep the original label alongside the spinner. (See `loading` re:\nthe bvn divergence.)"
           },
           {
             "name": "icon",
             "type": "string",
             "required": false,
-            "description": "Leading Bootstrap Icons glyph name, rendered as `<i class=\"bi bi-{icon}\">`.\ne.g. `icon=\"save\"`. Hidden while the loading spinner is visible."
+            "description": "Leading Bootstrap Icons glyph name, rendered as `<i class=\"bi bi-{icon}\">`.\ne.g. `icon=\"save\"`. Hidden while the loading spinner is visible.\n\nDiverges from bvn: `BButton`'s native `icon` is a `boolean` (icon-button\nstyling mode). We redefine it as a glyph-name `string`, so bvn's boolean\nicon mode is unreachable through `DButton`. See DIVERGENCES.md."
           },
           {
             "name": "block",
@@ -600,9 +600,42 @@
         "name": "DFormSelect",
         "category": "base",
         "filePath": "resources/js/components/base/DFormSelect.vue",
-        "description": "",
-        "props": [],
-        "events": [],
+        "description": "Type-safe wrapper around Bootstrap Vue Next BFormSelect. Adds one behaviour BVN lacks: a `select` option whose value is `null` round-trips correctly. BVN renders each option's value as a plain HTML `value` attribute, so when that value is `null` Vue omits the attribute and the browser falls back to using the option's *text* as its DOM value — a model bound to `null` then matches no option and the select renders blank. We map a `null` option value (and a `null` model) to a private string sentinel so BVN renders a real value attribute, while keeping the consumer's model and emitted value as `null`. Legacy Bootstrap-Vue (BS4) handled this; BVN does not. (Radios likely need the same treatment — see #81.)",
+        "props": [
+          {
+            "name": "modelValue",
+            "type": "union",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "options",
+            "type": "TSTypeOperator",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "valueField",
+            "type": "string",
+            "required": false,
+            "default": "\"value\"",
+            "description": "Key on object options that holds the value (BVN default: \"value\")."
+          },
+          {
+            "name": "optionsField",
+            "type": "string",
+            "required": false,
+            "default": "\"options\"",
+            "description": "Key on object options that holds nested options / groups (BVN default: \"options\")."
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "properties": []
+          }
+        ],
         "slots": [
           {
             "name": "name",
@@ -1782,7 +1815,7 @@
             "name": "hideLabel",
             "type": "boolean",
             "required": false,
-            "description": "Skip rendering the field's own label entirely (only affects the\nstandard labelled-field branch). Used by DXRepeater's `table` layout,\nwhere a column header already names the field and a per-row label\nwould waste space in the cell."
+            "description": "Skip rendering the field's own (outer) label. Applies to the standard\nlabelled-field branch and to the checkbox/switch/repeater branches. In\nhorizontal layout no label column is reserved either, so the control\nspans the full width (a switch/checkbox self-label then lines up with\nsibling row labels). Used by DXRepeater's `table` layout (a column\nheader already names the field) and by consumers hiding the redundant\nrow label on a switch/checkbox, which render their own label inside the\ncontrol (#78)."
           }
         ],
         "events": [],
@@ -1826,8 +1859,8 @@
             ]
           },
           {
-            "name": "value",
-            "description": "Replaces the built-in control with a custom value editor.",
+            "name": "hint",
+            "description": "Overrides the field's hint text shown below the control.",
             "bindings": [
               {
                 "title": "binding",
@@ -1844,28 +1877,12 @@
                 },
                 "name": "model",
                 "description": "The model passed to field predicates (defaults to the live form data)."
-              },
-              {
-                "title": "binding",
-                "type": {
-                  "name": "any"
-                },
-                "name": "value",
-                "description": "The current field value."
-              },
-              {
-                "title": "binding",
-                "type": {
-                  "name": "(value: any) => void"
-                },
-                "name": "update",
-                "description": "Setter that writes the value back and clears the field's validation error."
               }
             ]
           },
           {
-            "name": "info",
-            "description": "Rich info block rendered below the control.",
+            "name": "value",
+            "description": "Replaces the built-in control with a custom value editor.",
             "bindings": [
               {
                 "title": "binding",
@@ -1882,12 +1899,28 @@
                 },
                 "name": "model",
                 "description": "The model passed to field predicates (defaults to the live form data)."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "any"
+                },
+                "name": "value",
+                "description": "The current field value."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "(value: any) => void"
+                },
+                "name": "update",
+                "description": "Setter that writes the value back and clears the field's validation error."
               }
             ]
           },
           {
-            "name": "hint",
-            "description": "Overrides the field's hint text shown below the control.",
+            "name": "info",
+            "description": "Rich info block rendered below the control.",
             "bindings": [
               {
                 "title": "binding",
@@ -2078,34 +2111,18 @@
             ]
           },
           {
-            "name": "`field(${field.key})`",
-            "description": "Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.",
+            "name": "name",
+            "description": "",
             "bindings": [
               {
                 "name": "name",
                 "title": "binding"
-              },
-              {
-                "title": "binding",
-                "type": {
-                  "name": "FieldDefinition"
-                },
-                "name": "field",
-                "description": "The field definition being replaced."
-              },
-              {
-                "title": "binding",
-                "type": {
-                  "name": "object"
-                },
-                "name": "model",
-                "description": "Live form data merged with `context`, for predicates."
               }
             ]
           },
           {
-            "name": "`field-before(${field.key})`",
-            "description": "Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.",
+            "name": "`tab-after(${tab.key})`",
+            "description": "Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).",
             "bindings": [
               {
                 "name": "name",
@@ -2114,10 +2131,10 @@
               {
                 "title": "binding",
                 "type": {
-                  "name": "FieldDefinition"
+                  "name": "FormTab"
                 },
-                "name": "field",
-                "description": "The field about to be rendered."
+                "name": "tab",
+                "description": "The tab definition being rendered."
               },
               {
                 "title": "binding",
@@ -2130,78 +2147,122 @@
             ]
           },
           {
-            "name": "slotName",
-            "description": "Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`.",
+            "name": "footer",
+            "description": "Content rendered below the submit button (e.g. a cancel link or secondary actions).",
             "bindings": [
               {
-                "name": "name",
-                "title": "binding"
+                "title": "binding",
+                "type": {
+                  "name": "UseFormReturn"
+                },
+                "name": "form",
+                "description": "The resolved form instance (state, errors, submit helpers)."
               }
             ]
+          }
+        ],
+        "methods": []
+      },
+      {
+        "name": "DXFormField",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXFormField.vue",
+        "description": "DXFormField — internal per-field renderer for DXForm. Owns the single per-field render block that DXForm's tabbed and flat layouts both need: the `field(<key>)` full-replacement slot, the `field-before(<key>)`/`field-after(<key>)` wrapper slots, and the `<DXField>` element with its `value`/`span`/`info`/`hint`/`repeater-row` slot forwarding. Extracted so those per-field props/slots are wired in ONE place — before this, DXForm carried two near-identical copies (tabbed + flat) and a new per-field prop had to be added to both, which was easy to miss (see #78/#83). DXForm forwards all of its slots into each instance; this component only reads the ones matching its field's key. Internal: not exported from the package index — consumers use DXForm.",
+        "props": [
+          {
+            "name": "field",
+            "type": "FieldDefinition",
+            "required": true,
+            "description": "The field to render."
           },
           {
-            "name": "`field-after(${field.key})`",
-            "description": "Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.",
+            "name": "form",
+            "type": "UseFormReturn",
+            "required": true,
+            "description": "The resolved form instance (state, errors, submit helpers)."
+          },
+          {
+            "name": "model",
+            "type": "Record",
+            "required": true,
+            "description": "Live form data merged with context, for slot bindings/predicates."
+          },
+          {
+            "name": "layout",
+            "type": "union",
+            "required": false,
+            "description": "Form-level layout; overridden per-field by `field.layout`."
+          },
+          {
+            "name": "labelCols",
+            "type": "LabelCols",
+            "required": false,
+            "description": "Form-level label column width; overridden per-field by `field.labelCols`."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "`field(${field.key})`",
+            "description": "",
             "bindings": [
               {
                 "name": "name",
                 "title": "binding"
               },
               {
-                "title": "binding",
-                "type": {
-                  "name": "FieldDefinition"
-                },
                 "name": "field",
-                "description": "The field that was just rendered."
+                "title": "binding"
               },
               {
-                "title": "binding",
-                "type": {
-                  "name": "object"
-                },
                 "name": "model",
-                "description": "Live form data merged with `context`, for predicates."
+                "title": "binding"
               }
             ]
           },
           {
-            "name": "`tab-after(${tab.key})`",
-            "description": "Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).",
+            "name": "`field-before(${field.key})`",
+            "description": "",
             "bindings": [
               {
                 "name": "name",
                 "title": "binding"
               },
               {
-                "title": "binding",
-                "type": {
-                  "name": "FormTab"
-                },
-                "name": "tab",
-                "description": "The tab definition being rendered."
+                "name": "field",
+                "title": "binding"
               },
               {
-                "title": "binding",
-                "type": {
-                  "name": "object"
-                },
                 "name": "model",
-                "description": "Live form data merged with `context`, for predicates."
+                "title": "binding"
               }
             ]
           },
           {
-            "name": "footer",
-            "description": "Content rendered below the submit button (e.g. a cancel link or secondary actions).",
+            "name": "slotName",
+            "description": "",
             "bindings": [
               {
-                "title": "binding",
-                "type": {
-                  "name": "UseFormReturn"
-                },
-                "name": "form",
-                "description": "The resolved form instance (state, errors, submit helpers)."
+                "name": "name",
+                "title": "binding"
+              }
+            ]
+          },
+          {
+            "name": "`field-after(${field.key})`",
+            "description": "",
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              },
+              {
+                "name": "field",
+                "title": "binding"
+              },
+              {
+                "name": "model",
+                "title": "binding"
               }
             ]
           }
@@ -2465,6 +2526,63 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXSwitch",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXSwitch.vue",
+        "description": "DXSwitch — a \"filled box\" toggle switch. An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized like a `.form-control` with the label on the left and the toggle on the right, colour-coding its state (a neutral box when off, a filled primary box when on). Used standalone or, internally, by `DXField`'s `switch` field type so a form switch and a lone switch share one look. Usage: ```vue <DXSwitch v-model=\"isCurrent\" label=\"Product is current\" /> ``` For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for `DXSwitch` directly when you want the styled toggle outside a form. Pass a `label` prop for simple text, or the default slot for richer label content.",
+        "props": [
+          {
+            "name": "modelValue",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Whether the switch is on."
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "required": false,
+            "description": "Static text beside the toggle; the fallback when no contextual text applies."
+          },
+          {
+            "name": "textWhenTrue",
+            "type": "string",
+            "required": false,
+            "description": "Text shown when on — overrides `label` in the on state (e.g. \"Product is current\")."
+          },
+          {
+            "name": "textWhenFalse",
+            "type": "string",
+            "required": false,
+            "description": "Text shown when off — overrides `label` in the off state (e.g. \"Product is not current\")."
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "properties": []
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Label content shown beside the toggle. Falls back to the contextual",
+            "bindings": [
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "on",
+                "description": "Whether the switch is currently on."
+              }
+            ]
+          }
+        ],
+        "methods": []
+      },
       {
         "name": "DXTable",
         "category": "extended",
@@ -3002,8 +3120,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 71,
+    "totalComponents": 73,
     "baseComponents": 57,
-    "extendedComponents": 14
+    "extendedComponents": 16
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-08T06:35:48.080Z
+> Last updated: 2026-07-10T09:19:45.350Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -80,6 +80,7 @@ This file provides a complete map of all available documentation for AI agents a
 - [DXForm](/components/extended/DXForm): The canonical form renderer. Drive it with field definitions; add `tabs` when
 - [DXRepeater](/components/extended/DXRepeater): A repeatable sub-form (field array) primitive for nested, dynamic collections —
 - [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
 
 ### Examples
@@ -99,4 +100,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 75
+**Total Pages**: 76

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 67 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 68 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 (10 components)
+## Extended Components (11 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -94,6 +94,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [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
 - [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
 
 ## Composables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.19.2",
+  "version": "0.21.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -75,9 +75,10 @@
     "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.3.8",
-    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^5.1.1",
+    "@astrojs/markdown-remark": "^7.2.0",
+    "@astrojs/mdx": "^7.0.1",
+    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/vue": "^7.0.1",
     "@iconify-json/lucide": "^1.2.71",
     "@iconify/json": "^2.2.397",
     "@inertiajs/vue3": "^2.2.15",
@@ -86,7 +87,7 @@
     "@vitest/browser": "^4.1.8",
     "@vitest/browser-playwright": "^4.1.8",
     "@vue/test-utils": "^2.4.6",
-    "astro": "^5.15.1",
+    "astro": "7.0.5",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "chart.js": "^4.5.1",

package/resources/css/theme.scss

@@ -4,6 +4,10 @@
 // Custom Bootstrap theme for the Laravel Dashboard library
 // Override Bootstrap variables BEFORE importing Bootstrap
 
+// The Sass module for `color.mix()` etc. `@use` must precede all other
+// statements (variable overrides, `@import`), so it stays at the very top.
+@use "sass:color";
+
 // ----------------------------------------------------------------------------
 // Colors
 // ----------------------------------------------------------------------------
@@ -349,7 +353,7 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     "info": $info
   ) {
     &.toast-#{$name} {
-      --bs-toast-bg: #{mix($color, $white, 8%)};
+      --bs-toast-bg: #{color.mix($color, $white, 8%)};
     }
   }
 }

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

@@ -60,7 +60,10 @@
         </DContainer>
         <DContainer v-else fluid>
           <DRow class="justify-content-center">
-            <DCol cols="12" xl="10" :class="contentClass">
+            <!-- A genuine max-width cap (not the proportional col-xl-10), so the
+                 reading column doesn't stretch to ~2000px on a wide display. The
+                 centred row handles the horizontal centring. -->
+            <DCol cols="12" :style="{ maxWidth: contentMaxWidth }" :class="contentClass">
               <slot />
             </DCol>
           </DRow>
@@ -96,11 +99,17 @@ interface Props {
 
   /**
    * Render the page content full-width and left-aligned instead of the default
-   * centred, reading-width (`col-xl-10`) column. Use for data-heavy admin pages
-   * (wide tables).
+   * centred, reading-width column. Use for data-heavy admin pages (wide tables).
    */
   fluid?: boolean;
 
+  /**
+   * Max width of the centred content column (any CSS length). A genuine cap, so
+   * forms and text-heavy pages don't stretch to ~2000px on a wide display.
+   * Ignored when `fluid`. Set a large value (or use `fluid`) for full width.
+   */
+  contentMaxWidth?: string;
+
   /** Extra class(es) applied to the content container/column. */
   contentClass?: string;
 
@@ -143,6 +152,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoCollapseInactiveGroups: true,
   storageKey: 'dashboard-sidebar-hidden',
   dashboardId: '',
+  contentMaxWidth: '1140px',
 });
 
 const collapsed = ref(false);