@omnitend/dashboard-for-laravel 0.32.0 → 0.33.1

package/dist/types/index.d.ts

@@ -13,7 +13,7 @@ import type { Component } from "vue";
  * - `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" | "autocomplete" | "checkbox" | "checkbox-group" | "switch" | "radio" | "image" | "file" | "component" | "repeater";
+export type FieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "date" | "datetime-local" | "datetime" | "time" | "currency" | "percentage" | "textarea" | "select" | "autocomplete" | "checkbox" | "checkbox-group" | "switch" | "switch-list" | "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
@@ -72,9 +72,11 @@ export interface FieldDefinition {
     /** Whether field is required (optional) */
     required?: boolean;
     /**
-     * Options for `select`, `radio` and `autocomplete` fields. For
-     * `autocomplete` these are the datalist suggestions; the field still
-     * accepts free text not present in the list.
+     * Options for `select`, `radio`, `checkbox-group`, `switch-list` and
+     * `autocomplete` fields. For `autocomplete` these are the datalist
+     * suggestions; the field still accepts free text not present in the list.
+     * For `switch-list` each option renders a labelled toggle row
+     * (`description` becomes the row label's tooltip).
      */
     options?: FieldOption[];
     /**
@@ -112,6 +114,14 @@ export interface FieldDefinition {
      * `3.80`). Typing is never reformatted mid-edit.
      */
     decimals?: number;
+    /**
+     * For `currency` fields: the model stores integer MINOR units (pence) but
+     * the input shows/edits MAJOR units (pounds) — display = value / 10^decimals,
+     * submit = round(input × 10^decimals). `min`/`max`/`step` stay in major
+     * units. Off by default (the model is the major-unit amount). Use for
+     * legacy pence-integer columns (#116).
+     */
+    minorUnits?: boolean;
     /**
      * 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
@@ -150,11 +160,13 @@ export interface FieldDefinition {
      */
     textWhenFalse?: MaybeFn<string>;
     /**
-     * For `switch` fields: the on-state colour. `"success"` (default) is the
-     * house green-on / red-off style for an active/enabled/good switch;
-     * `"neutral"` (brand primary on / grey off) is for semantically-mixed
-     * switches that shouldn't imply good/bad ("contains alcohol", an allergen
-     * toggle, "hidden on web shop"). See DXSwitch `onVariant` (#158).
+     * For `switch` and `switch-list` fields: the on-state colour. `"success"`
+     * (default) is the house green-on / red-off style for an
+     * active/enabled/good switch; `"neutral"` (brand primary on / grey off) is
+     * for semantically-mixed switches that shouldn't imply good/bad ("contains
+     * alcohol", an allergen toggle, "hidden on web shop"). A `switch-list`
+     * usually wants `"neutral"` — a wall of red-off toggles over-signals when
+     * off simply means "not present". See DXSwitch `onVariant` (#158).
      */
     switchVariant?: "success" | "neutral";
     /** CSS class for the form group */

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-20T09:56:11.731Z",
+  "generated": "2026-07-20T14:11:55.309Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.32.0"
+    "version": "0.33.1"
   },
   "components": {
     "base": [
@@ -1385,6 +1385,58 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXCurrencyInput",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXCurrencyInput.vue",
+        "description": "DXCurrencyInput — the money input leaf (#152). A currency-symbol-prefixed numeric input with the display/model split from #69: the MODEL is always a plain number (or null), while the displayed text is padded to the minor-unit precision on blur/seed (`3.8` -> `3.80`) and never reformatted mid-edit. Clearing the input emits `null` — never `NaN`, never `\"\"` — so \"no value\" is one predictable shape (#152). `minorUnits` (#116) edits an integer-minor-unit model (pence) as major units (pounds): display = model / 10^decimals, emit = round(input * 10^decimals). `min`/`max`/`step` and the displayed text are always in MAJOR units — only the model is scaled. DXField's `currency` field type renders this leaf; it exists standalone so a money input outside a form (an inline table correction, a quick filter) doesn't re-inline the `£`-prefix + toFixed + parse foot-guns.",
+        "props": [
+          {
+            "name": "modelValue",
+            "type": "union",
+            "required": false,
+            "default": "null",
+            "description": "The numeric model. In `minorUnits` mode this is the integer minor-unit\n amount (e.g. pence); otherwise the major-unit amount. `null` = empty."
+          },
+          {
+            "name": "currencySymbol",
+            "type": "string",
+            "required": false,
+            "default": "\"£\"",
+            "description": "Symbol shown in the prepend (default \"£\")."
+          },
+          {
+            "name": "decimals",
+            "type": "number",
+            "required": false,
+            "default": "2",
+            "description": "Minor-unit decimal places the display pads to (default 2; 0 for a\n currency with no minor unit, e.g. JPY)."
+          },
+          {
+            "name": "minorUnits",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Model is stored in integer minor units (pence) but edited in major\n units (pounds). Scale is 10^decimals."
+          },
+          {
+            "name": "step",
+            "type": "union",
+            "required": false,
+            "default": "undefined",
+            "description": "Input step in MAJOR units (default: one minor unit, e.g. 0.01)."
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "properties": []
+          }
+        ],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXDashboard",
         "category": "extended",
@@ -2033,6 +2085,28 @@
               }
             ]
           },
+          {
+            "name": "switch-list-item",
+            "description": "Extra per-row content beside a switch-list row's toggle (e.g. a notes input the consumer binds to their own model).",
+            "bindings": [
+              {
+                "title": "binding",
+                "type": {
+                  "name": "FieldOption"
+                },
+                "name": "option",
+                "description": "The option this row renders."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "on",
+                "description": "Whether the row's switch is currently on."
+              }
+            ]
+          },
           {
             "name": "repeater-row",
             "description": "Custom layout for a single repeater row, forwarded to `DXRepeater`'s `row` slot with its row props (row index, item, remove handler, etc.).",
@@ -2733,6 +2807,12 @@
             "required": false,
             "description": "API endpoint URL for auto-provider mode (alternative to provider function)"
           },
+          {
+            "name": "apiAdapter",
+            "type": "DXTableApiAdapter",
+            "required": false,
+            "description": "Adapts the built-in provider's request params / response body to a\n backend convention that differs from dfl's (see DXTableApiAdapter)."
+          },
           {
             "name": "fields",
             "type": "Array",
@@ -2749,7 +2829,7 @@
             "name": "filters",
             "type": "Record",
             "required": false,
-            "description": "Filter values (v-model support) - key is field key, value is filter string"
+            "description": "Filter values (v-model support) - key is field key, value is the filter\n string, or an ARRAY of values for a `filterMultiple` column (#51)."
           },
           {
             "name": "filterValues",
@@ -3563,8 +3643,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 76,
+    "totalComponents": 77,
     "baseComponents": 57,
-    "extendedComponents": 19
+    "extendedComponents": 20
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-20T09:56:11.791Z
+> Last updated: 2026-07-20T14:11:55.365Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -73,6 +73,7 @@ This file provides a complete map of all available documentation for AI agents a
 ### Extended
 
 - [Charts](/components/extended/DXChart): Thin, themed wrappers around [Chart.js](https://www.chartjs.org/) via
+- [DXCurrencyInput](/components/extended/DXCurrencyInput): The money input leaf: a currency-symbol-prefixed numeric input whose **model is
 - [DXDashboard](/components/extended/DXDashboard): Complete dashboard layout component that combines sidebar navigation, top navbar, and content area. 
 - [DXDashboardNavbar](/components/extended/DXDashboardNavbar): A responsive top navigation bar component for Laravel dashboards with user menu, search functionalit
 - [DXDashboardSidebar](/components/extended/DXDashboardSidebar): A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups
@@ -101,4 +102,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 77
+**Total Pages**: 78

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 69 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 70 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -81,11 +81,12 @@ 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 (12 components)
+## Extended Components (13 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
 - [DXBasicForm](/components/extended/dxbasicform): Extended dashboard component
+- [DXCurrencyInput](/components/extended/dxcurrencyinput): Extended dashboard component
 - [DXDashboard](/components/extended/dxdashboard): Complete dashboard layout with sidebar and navbar
 - [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
 - [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -55,15 +55,11 @@
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0",
-    "axios": "^1.15.3",
     "chart.js": "^4.4.0",
     "vue": "^3.5.13",
     "vue-chartjs": "^5.3.0"
   },
   "peerDependenciesMeta": {
-    "axios": {
-      "optional": true
-    },
     "bootstrap-vue-next": {
       "optional": true
     },

package/resources/css/theme.scss

@@ -543,6 +543,19 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     --bs-alert-link-color: #{$emphasis};
   }
 
+  // Progress bars — large FILLS use the vivid `solid-bg`, not the dark
+  // emphasis Bootstrap wires into `.bg-*` (#154). A big solid block of the
+  // emphasis olive reads muddy and clashes with the soft badge green; the
+  // vivid fill is the same family as the switch-ON colour, so badge + switch +
+  // bar read as one system. Only success and warning actually change hex
+  // (danger/info's solid IS their emphasis). The variant-less default bar
+  // stays `$progress-bar-bg` (brand navy). `!important` beats the `.bg-*`
+  // utility, which sets its colour `!important` by design.
+  .progress-bar.bg-#{$name} {
+    background-color: #{$solid-bg} !important;
+    color: #{$solid-text};
+  }
+
   // `.text-#{$name}` and `.link-#{$name}` need no override: each variant's base
   // colour IS its emphasis shade, so Bootstrap already renders them legible.
 }
@@ -559,6 +572,10 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     --dx-#{$name}-solid-bg: #{map.get($v, "solid-bg")};
     --dx-#{$name}-emphasis: #{map.get($v, "emphasis")};
   }
+
+  // DXTable header titles: muted by default (#157) so the table's CONTENT is
+  // the loud layer. Override to re-louden (e.g. `var(--bs-body-color)`).
+  --dx-table-header-color: var(--bs-secondary-color);
 }
 
 // primary is near-black navy, so Bootstrap's darken-on-hover is imperceptible —
@@ -692,12 +709,29 @@ $dx-switch-on-soft: map.get(map.get($dx-variants, "success"), "soft-bg"); // #cd
 // fallbacks for SSR / missing-CSS cases — keep the two lists in sync).
 $dx-chart-palette: (#2563eb, #65a30d, #7c3aed, #0d9488, #ea580c, #0891b2, #d97706, #db2777);
 
+// Dark-surface remap (#145). SAME hue slots — the CVD-derived order above is
+// load-bearing, so only lightness moves: each hue lifted into the dark band so
+// every step clears the 3:1 non-text guideline on Bootstrap's dark body
+// (#212529), where two of the light steps dipped below. Validated with the
+// same method as the light set (OKLab ΔE ×100, Viénot protan/deutan): min
+// adjacent CVD ΔE 15.1 (light set: 13.8), min normal ΔE 25.3, contrast
+// 5.67–10.23:1 on #212529. Swapping a step needs that validation re-run.
+// getPalette() reads the CSS variables live, so charts follow the theme with
+// no JS change; the TS fallbacks stay the light set (SSR/no-CSS default).
+$dx-chart-palette-dark: (#60a5fa, #a3e635, #a78bfa, #2dd4bf, #fb923c, #22d3ee, #fbbf24, #f472b6);
+
 :root {
   @for $i from 1 through list.length($dx-chart-palette) {
     --dx-chart-#{$i}: #{list.nth($dx-chart-palette, $i)};
   }
 }
 
+[data-bs-theme="dark"] {
+  @for $i from 1 through list.length($dx-chart-palette-dark) {
+    --dx-chart-#{$i}: #{list.nth($dx-chart-palette-dark, $i)};
+  }
+}
+
 // The chart container used by DXBarChart/DXLineChart/DXDoughnutChart (shipped
 // from the `@omnitend/dashboard-for-laravel/charts` entry, #142). Global rather
 // than a component scoped style so the charts entry emits NO CSS — chart

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

@@ -0,0 +1,143 @@
+<!--
+  DXCurrencyInput — the money input leaf (#152).
+
+  A currency-symbol-prefixed numeric input with the display/model split from
+  #69: the MODEL is always a plain number (or null), while the displayed text
+  is padded to the minor-unit precision on blur/seed (`3.8` -> `3.80`) and
+  never reformatted mid-edit. Clearing the input emits `null` — never `NaN`,
+  never `""` — so "no value" is one predictable shape (#152).
+
+  `minorUnits` (#116) edits an integer-minor-unit model (pence) as major units
+  (pounds): display = model / 10^decimals, emit = round(input * 10^decimals).
+  `min`/`max`/`step` and the displayed text are always in MAJOR units — only
+  the model is scaled.
+
+  DXField's `currency` field type renders this leaf; it exists standalone so a
+  money input outside a form (an inline table correction, a quick filter)
+  doesn't re-inline the `£`-prefix + toFixed + parse foot-guns.
+-->
+<template>
+    <DInputGroup>
+        <template #prepend>
+            <span class="input-group-text">{{ currencySymbol }}</span>
+        </template>
+        <DFormInput
+            :model-value="displayValue"
+            type="number"
+            :step="step ?? defaultStep"
+            v-bind="$attrs"
+            @input="handleInput"
+            @focus="handleFocus"
+            @blur="handleBlur"
+        />
+    </DInputGroup>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import DInputGroup from "../base/DInputGroup.vue";
+import DFormInput from "../base/DFormInput.vue";
+
+defineOptions({ inheritAttrs: false });
+
+interface Props {
+    /** The numeric model. In `minorUnits` mode this is the integer minor-unit
+     *  amount (e.g. pence); otherwise the major-unit amount. `null` = empty. */
+    modelValue?: number | null;
+    /** Symbol shown in the prepend (default "£"). */
+    currencySymbol?: string;
+    /** Minor-unit decimal places the display pads to (default 2; 0 for a
+     *  currency with no minor unit, e.g. JPY). */
+    decimals?: number;
+    /** Model is stored in integer minor units (pence) but edited in major
+     *  units (pounds). Scale is 10^decimals. */
+    minorUnits?: boolean;
+    /** Input step in MAJOR units (default: one minor unit, e.g. 0.01). */
+    step?: string | number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: null,
+    currencySymbol: "£",
+    decimals: 2,
+    minorUnits: false,
+    step: undefined,
+});
+
+const emit = defineEmits<{
+    "update:modelValue": [value: number | null];
+}>();
+
+// `decimals` is public input — clamp it to a supported non-negative integer
+// so a hostile value can't throw (`10 ** -1` scaling vs `toFixed(101)`
+// RangeError) or make display precision and scale disagree.
+const safeDecimals = computed(() => {
+    const truncated = Math.trunc(props.decimals);
+    return Number.isFinite(truncated) ? Math.min(8, Math.max(0, truncated)) : 2;
+});
+const scale = computed(() => Math.pow(10, safeDecimals.value));
+const defaultStep = computed(() => (1 / scale.value).toString());
+
+// Model (possibly minor units) -> the major-unit display string.
+function format(value: number | null | undefined): string {
+    if (value === null || value === undefined || (value as any) === "") return "";
+    const num = Number(value);
+    if (!Number.isFinite(num)) return "";
+    const major = props.minorUnits ? num / scale.value : num;
+    return major.toFixed(safeDecimals.value);
+}
+
+// The shown text tracks a local ref so typing is never reformatted mid-edit
+// (reactive reformatting would round "3." to "3.00" under the user's cursor);
+// it only resyncs from the model while the input isn't focused. See #69.
+const isFocused = ref(false);
+const displayValue = ref("");
+
+watch(
+    () => [props.modelValue, props.decimals, props.minorUnits] as const,
+    () => {
+        if (isFocused.value) return;
+        displayValue.value = format(props.modelValue);
+    },
+    { immediate: true },
+);
+
+function handleFocus(): void {
+    isFocused.value = true;
+}
+
+function handleInput(event: Event): void {
+    const raw = (event.target as HTMLInputElement).value;
+    displayValue.value = raw;
+    if (raw.trim() === "") {
+        emit("update:modelValue", null);
+        return;
+    }
+    const num = Number(raw);
+    if (!Number.isFinite(num)) {
+        emit("update:modelValue", null);
+        return;
+    }
+    emit("update:modelValue", props.minorUnits ? toMinorUnits(num) : num);
+}
+
+// Major units -> integer minor units, decimal-safely. A bare
+// `Math.round(num * scale)` is wrong at half-unit boundaries: 19.99 * 100 is
+// 1998.9999… (fine, rounds up) but 1.005 * 100 is 100.4999… and silently
+// drops to 100, and negative halves round toward +∞ (-0.005 → -0). So the
+// float product is first snapped back to its decimal value (toPrecision), and
+// halves round AWAY FROM ZERO — the accounting convention, symmetric in sign.
+function toMinorUnits(major: number): number {
+    const scaled = Number((major * scale.value).toPrecision(12));
+    const rounded = Math.sign(scaled) * Math.round(Math.abs(scaled));
+    return rounded === 0 ? 0 : rounded; // normalise -0
+}
+
+// Consumer listeners (@blur, @focus, @input) arrive through `$attrs` and are
+// merged onto the inner input by Vue alongside these internal handlers, so no
+// re-emit is needed (re-emitting would double-fire them).
+function handleBlur(): void {
+    isFocused.value = false;
+    displayValue.value = format(props.modelValue);
+}
+</script>

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

@@ -39,14 +39,14 @@
       <template v-for="(group, groupIndex) in navigation" :key="groupIndex">
         <div
           v-if="group.visible !== false"
-          class="nav-group mb-3"
+          class="nav-group"
           :class="{ 'nav-group-open': isGroupExpanded(groupIndex, group) }"
         >
           <!-- Collapsible group header (accordion toggle) -->
           <button
             v-if="isGroupToggle(group)"
             type="button"
-            class="nav-group-toggle text-uppercase small fw-semibold mb-2 px-2"
+            class="nav-group-toggle fw-semibold mb-2 px-2"
             :aria-expanded="isGroupExpanded(groupIndex, group)"
             :aria-controls="groupItemsId(groupIndex)"
             @click="toggleGroup(groupKey(group, groupIndex))"
@@ -75,7 +75,7 @@
           <!-- Static group label (non-collapsible, expanded sidebar) -->
           <div
             v-else-if="group.label && !collapsed"
-            class="nav-group-label text-uppercase small fw-semibold mb-2 px-2"
+            class="nav-group-label fw-semibold mb-2 px-2"
           >
             {{ group.label }}
           </div>
@@ -426,9 +426,15 @@ watch(activeGroupIndex, () => {
   overflow-x: hidden;
 }
 
+/* Dense rhythm (#95): greendragon's cutover values, adopted as the default —
+   natural-case headers at 0.875rem (no uppercase/letter-spacing), tight group
+   spacing. */
+.nav-group {
+  margin-bottom: 0.25rem;
+}
+
 .nav-group-label {
-  font-size: 0.75rem;
-  letter-spacing: 0.5px;
+  font-size: 0.875rem;
 }
 
 /* When collapsible groups are on, give the static (non-collapsible) group
@@ -437,7 +443,7 @@ watch(activeGroupIndex, () => {
 .sidebar-collapsible-groups .nav-group-label {
   display: flex;
   align-items: center;
-  min-height: 2.5rem;
+  min-height: 2rem;
 }
 
 /* Collapsible group toggle header */
@@ -446,14 +452,13 @@ watch(activeGroupIndex, () => {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  /* Comfortable, ergonomic click target (matches the nav links' vertical
-     rhythm). `px-2` on the element sets only left/right padding, so vertical
-     padding here does not fight Bootstrap's utility `!important`. */
-  min-height: 2.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.5px;
+  /* Comfortable click target at the dense rhythm (#95). `px-2` on the element
+     sets only left/right padding, so vertical padding here does not fight
+     Bootstrap's utility `!important`. */
+  min-height: 2rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
   background: transparent;
   border: 0;
   /* No `color` here on purpose: theme.scss sets `.nav-group-toggle` to
@@ -543,7 +548,7 @@ watch(activeGroupIndex, () => {
 }
 
 :deep(.nav-link) {
-  padding: 0.625rem 0.75rem;
+  padding: 0.3rem 0.75rem;
   transition: all 0.2s ease;
   text-decoration: none;
   white-space: nowrap;
@@ -562,7 +567,7 @@ watch(activeGroupIndex, () => {
 }
 
 .sidebar-collapsed :deep(.nav-link) {
-  padding: 0.625rem;
+  padding: 0.3rem 0.625rem;
 }
 
 /* Custom scrollbar (the nav is the scroll region) */