@omnitend/dashboard-for-laravel 0.41.2 → 0.42.1

package/dist/types/index.d.ts

@@ -44,8 +44,9 @@ export type OptionsLoader = (model: any) => Promise<FieldOption[]>;
  * Deliberately excludes `boolean` (which BFormGroup's own `labelCols` prop
  * accepts): Vue's type-based `defineProps` auto-defaults an omitted prop to
  * `false` (not `undefined`) whenever its declared type includes `boolean`,
- * which would silently break the `field.labelCols ?? formLabelCols ?? 3`
- * fallback chain used to resolve this value.
+ * which would silently break the `field.labelCols ?? formLabelCols` fallback
+ * chain used to resolve this value (`undefined` at the end of it means the
+ * default 45% label column, `--dx-form-label-width`).
  */
 export type LabelCols = number | {
     sm?: number;
@@ -187,7 +188,8 @@ export interface FieldDefinition {
     layout?: "vertical" | "horizontal";
     /**
      * Per-field override of DXForm's `labelCols` prop, for horizontal
-     * layout. Falls back to the form-level `labelCols` when omitted.
+     * layout. Falls back to the form-level `labelCols` when omitted, and to
+     * the default 45% label column (`--dx-form-label-width`) when neither is set.
      */
     labelCols?: LabelCols;
     /**
@@ -474,4 +476,19 @@ export interface FormTab {
     /** Lazily mount tab content until first activated */
     lazy?: boolean;
 }
+/**
+ * The theme's extra colour variant, `pending`: waiting, and the next move is
+ * not yours ("awaiting payment", "sent to printer, not yet confirmed").
+ * theme.scss paints it everywhere a stock variant is painted (badge, soft and
+ * outline button, alert, text, subtle utilities, table row, list-group item,
+ * toast). Registering it on bootstrap-vue-next's `BaseColorVariant` adds it to
+ * every variant union derived from that interface (`ColorVariant`,
+ * `ButtonVariant` incl. `outline-pending`, the `-subtle` and `-emphasis`
+ * forms), so `<DBadge variant="pending">` type-checks.
+ */
+declare module "bootstrap-vue-next" {
+    interface BaseColorVariant {
+        pending: unknown;
+    }
+}
 export {};

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-09-30T05:13:05.340Z",
+  "generated": "2026-10-05T05:06:30.259Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.41.2"
+    "version": "0.42.1"
   },
   "components": {
     "base": [
@@ -1360,7 +1360,7 @@
         "name": "DXBarChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXBarChart.vue",
-        "description": "A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines, formatted value ticks, responsive, legend hidden for a single series). Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette (--dx-chart-1..8 fills, a 1px --dx-chart-edge outline) applied and dashboard-friendly defaults (no x gridlines, formatted value ticks, responsive, legend hidden for a single series). Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -1970,7 +1970,7 @@
         "name": "DXDoughnutChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXDoughnutChart.vue",
-        "description": "A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass `labels` + either `data` (a number array) or full `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one chart-palette colour (--dx-chart-1..8) per slice, a 1px --dx-chart-edge outline, and dashboard-friendly defaults. Pass `labels` + either `data` (a number array) or full `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -2073,7 +2073,7 @@
             "name": "labelCols",
             "type": "LabelCols",
             "required": false,
-            "description": "Label column width for horizontal layout (mirrors BFormGroup)."
+            "description": "Label column width for horizontal layout (mirrors BFormGroup's\n`labelCols`/`labelCols*`). Omitted: the label takes\n`--dx-form-label-width` (45%) from `sm` up and stacks below."
           },
           {
             "name": "hideLabel",
@@ -2168,7 +2168,7 @@
           },
           {
             "name": "value",
-            "description": "Replaces the built-in control with a custom value editor.",
+            "description": "Replaces the built-in control with a custom value editor. On a `plaintext` field the content is wrapped in `.dx-form-plaintext` so display-only content lines up with the label.",
             "bindings": [
               {
                 "title": "binding",
@@ -2424,6 +2424,20 @@
             "default": "\"Submitting...\"",
             "description": "Submit button loading text"
           },
+          {
+            "name": "submitSavedText",
+            "type": "string",
+            "required": false,
+            "default": "\"Saved\"",
+            "description": "Submit button label once the form's contents are saved."
+          },
+          {
+            "name": "savedState",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "After a successful submission through the form (`form.post/put/…`,\nread from `form.wasSuccessful`), turn the submit button into a\ndisabled \"✓ Saved\" until any field changes. On by default; set\n`false` for forms whose submit is not a save (search, filter)."
+          },
           {
             "name": "showSubmit",
             "type": "boolean",
@@ -2457,20 +2471,20 @@
             "type": "union",
             "required": false,
             "default": "\"vertical\"",
-            "description": "Form-wide field layout:\n\n- `\"vertical\"` (default) — label above input, always.\n- `\"horizontal\"` — label left, input right, always.\n- `\"auto\"` — horizontal when the form's **own container** is at least\n  `layoutThreshold` px wide, vertical below that. Container-driven, not\n  viewport-driven: a page narrowed by the dashboard sidebar, or a form\n  inside a modal, stacks even though the window is wide (which no\n  Bootstrap media query can see).\n\nOverridable per-field via `field.layout`. A field with `span: true`\nalways renders full-width, regardless of layout."
+            "description": "Form-wide field layout:\n\n- `\"vertical\"` (default) — label above input, always.\n- `\"horizontal\"` — label left, input right, whatever the container\n  width. With the default label column that holds from the `sm`\n  viewport breakpoint up (the label stacks on a phone); a numeric\n  `labelCols` keeps the split at every width.\n- `\"auto\"` — horizontal when the form's **own container** is at least\n  `layoutThreshold` px wide, vertical below that. Container-driven, not\n  viewport-driven: a page narrowed by the dashboard sidebar, or a form\n  inside a modal, stacks even though the window is wide (which no\n  Bootstrap media query can see).\n\nOverridable per-field via `field.layout`. A field with `span: true`\nalways renders full-width, regardless of layout."
           },
           {
             "name": "layoutThreshold",
             "type": "number",
             "required": false,
             "default": "640",
-            "description": "Container width (px) at or above which `layout: \"auto\"` goes horizontal.\nIgnored for the explicit `\"vertical\"`/`\"horizontal\"` layouts.\n\nDefault 640, measured rather than guessed: with the default 3-column\nlabel the label's text area is `containerWidth / 4 - 18` px, so 640 gives\nit 142px — enough for a ~20-character label (\"Unit price (ex VAT)\"\nmeasures 128px at the theme's label font) to stay on one line, with the\ncontrol column still 474px. Below ~584px that label starts wrapping,\nwhich is the cramped-label symptom this exists to avoid. Raise it if your\nlabels run longer, or lower `labelCols` instead."
+            "description": "Container width (px) at or above which `layout: \"auto\"` goes horizontal.\nIgnored for the explicit `\"vertical\"`/`\"horizontal\"` layouts.\n\nDefault 640, measured when the default label was 3 columns: that gave\nthe label 142px of text at 640px, just enough for a ~20-character label\n(\"Unit price (ex VAT)\" measures 128px at the theme's label font) to stay\non one line. With the 45% default label column the same 640px gives the\nlabel ~275px and the control ~341px, so the threshold now mostly keeps\nthe control column usable. Raise it if your controls need more room, or\nset a narrower `labelCols`."
           },
           {
             "name": "labelCols",
             "type": "LabelCols",
             "required": false,
-            "description": "Label column width for horizontal layout (mirrors BFormGroup's\n`labelCols`/`labelCols*` props). Overridable per-field via\n`field.labelCols`. Ignored when `layout` is \"vertical\"."
+            "description": "Label column width for horizontal layout (mirrors BFormGroup's\n`labelCols`/`labelCols*` props). Overridable per-field via\n`field.labelCols`. Ignored when `layout` is \"vertical\". Omitted (here\nand on the field): the label takes `--dx-form-label-width` (45%) from\n`sm` up and stacks above the input below `sm`."
           }
         ],
         "events": [
@@ -2696,7 +2710,7 @@
         "name": "DXLineChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXLineChart.vue",
-        "description": "A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line) and dashboard-friendly defaults. Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette applied (--dx-chart-line-1..8 stroke and point outline, --dx-chart-1..8 point centre and translucent area fill, smoothed line) and dashboard-friendly defaults. Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -2788,6 +2802,79 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXNumberStepper",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXNumberStepper.vue",
+        "description": "DXNumberStepper — a number input between a decrease and an increase button. `[ − ][ 12 ][ + ]` as one input group, for quantities that are usually nudged rather than typed (cases on an order line, covers on a booking). - The model is a number, or `null` when the input is empty (never `NaN`, never `\"\"`). Every step and every valid keystroke emits `update:modelValue`; debounce on the consumer's side if each change saves. - A step adds or subtracts `step` from the current value and clamps to `min`/`max`. It does not snap to a grid, so 1.05 + 0.1 is 1.15. The sum is rounded to the decimal places of the value and step, so 0.1 three times is 0.3, not 0.30000000000000004. From empty, a step goes to the in-range value nearest zero. - The button at a bound is disabled (decrease at `min`, increase at `max`). - Typing is free: the value is emitted as typed, even out of range, and is CLAMPED ON BLUR to `min`/`max` (emitting the clamped value). Half-typed input the browser cannot parse (\"-\", \"1e\") emits nothing until it parses. - ArrowUp/ArrowDown on the input go through the same step as the buttons (the browser's own spin-button stepping snaps to a grid; this does not). The native spin arrows are hidden. The buttons are `tabindex=\"-1\"`, so a list of steppers is one Tab stop each; keyboard users step with the arrows. - The buttons are square icon buttons at the input's height (never narrower than tall), soft `secondary` like other in-row actions, labelled \"Decrease\"/\"Increase\" plus the input's `aria-label` when it has one. `class` and `style` go on the group; every other attribute (`aria-label`, `name`, `id`, `placeholder`, `required`, `state`, listeners…) goes on the input. Styles live in theme.scss under `.dx-number-stepper`.",
+        "props": [
+          {
+            "name": "modelValue",
+            "type": "union",
+            "required": false,
+            "default": "null",
+            "description": "The value (v-model). `null` when the input is empty."
+          },
+          {
+            "name": "min",
+            "type": "number",
+            "required": false,
+            "default": "undefined",
+            "description": "Lowest value; the decrease button disables here and blur clamps to it."
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "required": false,
+            "default": "undefined",
+            "description": "Highest value; the increase button disables here and blur clamps to it."
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "required": false,
+            "default": "1",
+            "description": "How much one press (or ArrowUp/ArrowDown) changes the value. @default 1"
+          },
+          {
+            "name": "size",
+            "type": "union",
+            "required": false,
+            "default": "\"md\"",
+            "description": "Control size, matching the other inputs. @default 'md'"
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Disable the input and both buttons."
+          },
+          {
+            "name": "decreaseLabel",
+            "type": "string",
+            "required": false,
+            "default": "undefined",
+            "description": "Override the decrease button's accessible label. Default: \"Decrease\", plus the input's aria-label."
+          },
+          {
+            "name": "increaseLabel",
+            "type": "string",
+            "required": false,
+            "default": "undefined",
+            "description": "Override the increase button's accessible label. Default: \"Increase\", plus the input's aria-label."
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "properties": []
+          }
+        ],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXNumericField",
         "category": "extended",
@@ -3006,6 +3093,70 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXSaveButton",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXSaveButton.vue",
+        "description": "DXSaveButton — a save button that confirms the save in place. Three states, driven by two booleans the consumer owns: - idle (`saving` and `saved` both false) — the normal Save button. - saving (`saving`) — DButton's busy state: disabled at once, spinner after the anti-flash delay, `savingText` if given. - saved (`saved` and not `saving`) — \"✓ Saved\" (tick icon) and genuinely `disabled`, until the consumer clears `saved` (typically on the next edit to the form). The colour does not change: the button keeps its own variant (navy primary by default) at full strength, neither the neutral grey of a disabled button nor a faded one. Only the label and the disabled state say it is saved. `saving` wins over `saved`, so re-saving from the saved state shows busy. The label change is announced: the button itself is a polite live region, and while it is `aria-busy` (saving) announcements wait until it settles, so a screen reader hears \"Saved\" once the save lands. Every other attribute (type, block, size, class, listeners…) passes through to DButton. DXForm uses this for its submit button.",
+        "props": [
+          {
+            "name": "saving",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "A save is in flight: busy/spinner state (DButton's `loading`)."
+          },
+          {
+            "name": "saved",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "The form's current contents have been saved: show `savedText` with a\ntick and disable the button. Clear it when the form changes."
+          },
+          {
+            "name": "savedText",
+            "type": "string",
+            "required": false,
+            "default": "\"Saved\"",
+            "description": "Label for the saved state. @default 'Saved'"
+          },
+          {
+            "name": "savingText",
+            "type": "string",
+            "required": false,
+            "description": "Label shown beside the spinner while saving (DButton's `loadingText`)."
+          },
+          {
+            "name": "variant",
+            "type": "union",
+            "required": false,
+            "default": "\"primary\"",
+            "description": "Variant in every state; the saved state keeps it. @default 'primary'"
+          },
+          {
+            "name": "icon",
+            "type": "string",
+            "required": false,
+            "description": "Leading icon when not saved. The saved state shows `check-lg`."
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Disable the button regardless of state."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          }
+        ],
+        "methods": []
+      },
       {
         "name": "DXStatCard",
         "category": "extended",
@@ -3308,7 +3459,7 @@
             "type": "PaginationData",
             "required": false,
             "default": "() => ({\n    current_page: 1,\n    per_page: 15,\n    total: 0,\n    from: 0,\n    to: 0,\n})",
-            "description": "Pagination data (Inertia mode)"
+            "description": "Pagination data (Inertia mode). Omit it on a plain `items` table and the\nfooter counts the rows given as one page."
           },
           {
             "name": "showPagination",
@@ -3436,7 +3587,7 @@
             "name": "editLabelCols",
             "type": "LabelCols",
             "required": false,
-            "description": "Label column width for the edit modal's horizontal layout, forwarded to\n`DXForm`'s `labelCols` (a single width or a per-breakpoint object). Only\nmeaningful when `editLayout` is \"horizontal\"."
+            "description": "Label column width for the edit modal's horizontal layout, forwarded to\n`DXForm`'s `labelCols` (a single width or a per-breakpoint object). Only\nmeaningful when `editLayout` is \"horizontal\". Omitted: DXForm's default\n45% label column."
           },
           {
             "name": "editCard",
@@ -4214,8 +4365,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 86,
+    "totalComponents": 88,
     "baseComponents": 60,
-    "extendedComponents": 26
+    "extendedComponents": 28
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-09-30T05:13:05.394Z
+> Last updated: 2026-10-05T05:06:30.315Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -79,7 +79,9 @@ This file provides a complete map of all available documentation for AI agents a
 - [DXDashboardSidebar](/components/extended/DXDashboardSidebar): A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups
 - [DXField](/components/extended/DXField): The single-field renderer that powers `DXForm` and
 - [DXForm](/components/extended/DXForm): The canonical form renderer. Drive it with field definitions; add `tabs` when
+- [DXNumberStepper](/components/extended/DXNumberStepper): A number input between a decrease and an increase button, `[ − ][ 12 ][ + ]`,
 - [DXRepeater](/components/extended/DXRepeater): A repeatable sub-form (field array) primitive for nested, dynamic collections —
+- [DXSaveButton](/components/extended/DXSaveButton): A save button that confirms the save in place. While saving it shows
 - [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
@@ -102,4 +104,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 78
+**Total Pages**: 80

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 76 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 78 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -84,7 +84,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 (16 components)
+## Extended Components (18 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -98,7 +98,9 @@ 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
 - [DXLoading](/components/extended/dxloading): Extended dashboard component
 - [DXModalActions](/components/extended/dxmodalactions): Extended dashboard component
+- [DXNumberStepper](/components/extended/dxnumberstepper): Extended dashboard component
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
+- [DXSaveButton](/components/extended/dxsavebutton): Extended dashboard component
 - [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

package/package.json

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