@omnitend/dashboard-for-laravel 0.16.2 → 0.16.4

package/dist/types/index.d.ts

@@ -75,6 +75,14 @@ export interface FieldDefinition {
     max?: number | string;
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
+    /**
+     * For `currency` fields: minor-unit decimal places the *display* value is
+     * formatted to on blur and on initial seed (default: 2, e.g. GBP/EUR/USD —
+     * pass 0 for a currency with no minor unit, e.g. JPY). The model stays a
+     * plain number throughout; only the input's shown text is padded (`3.8` →
+     * `3.80`). Typing is never reformatted mid-edit.
+     */
+    decimals?: number;
     /**
      * 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

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-06T07:46:59.742Z",
+  "generated": "2026-07-06T20:01:04.234Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.16.1"
+    "version": "0.16.3"
   },
   "components": {
     "base": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-06T07:46:59.797Z
+> Last updated: 2026-07-06T20:01:04.293Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "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

@@ -152,6 +152,25 @@ $dashboard-navbar-height: 64px;
 
 @import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
 
+// ----------------------------------------------------------------------------
+// Forms
+// ----------------------------------------------------------------------------
+// Bootstrap's compiled `.form-control`/`.form-select` height isn't exposed as
+// a CSS custom property, so a component that needs to match input height
+// exactly (e.g. DXField's `switch` box, which isn't itself a `.form-control`)
+// would otherwise have to hardcode the same padding-y/line-height/border-width
+// formula a second time — and silently drift from this theme if those
+// variables ever change here. Compute it once, from the real theme variables,
+// and expose it as a var so such components can reference the single source
+// of truth instead of duplicating the formula.
+:root {
+  // $input-border-width resolves to a CSS var() (Bootstrap 5.3+), which Sass
+  // can't multiply directly — fold the *2 into the calc() itself instead.
+  --dx-input-height: calc(
+    #{$input-line-height * 1em} + #{$input-padding-y * 2} + (2 * #{$input-border-width})
+  );
+}
+
 // ----------------------------------------------------------------------------
 // Dashboard Custom Styles
 // ----------------------------------------------------------------------------
@@ -202,17 +221,24 @@ $dashboard-navbar-height: 64px;
 // 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).
+// utility by default, 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. Colour still
+// signals the toast type, but the bold palette stays where it belongs
+// (actions, badges, selected states).
+//
+// `useToast()` (resources/js/composables/useToast.ts) intercepts a themed
+// `variant` and swaps it for a `toast-{variant}` class instead of BVN's own
+// `variant` prop, so these rules drive Bootstrap's own `--bs-toast-*`
+// variables — no `!important` needed to fight the `.text-bg-*` utility, which
+// sets its colours `!important` by design. An untouched (non-themed) variant
+// still falls through to BVN's default `.text-bg-*` styling.
 
 .toast {
   overflow: hidden; // clip the bottom progress bar to the rounded corners
   border: 1px solid $border-color;
   border-radius: $border-radius;
-  background-color: $white;
+  --bs-toast-bg: #{$white};
   box-shadow:
     0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -241,19 +267,16 @@ $dashboard-navbar-height: 64px;
     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.
+  // Semantic variants: subtle tinted surface, driven through the CSS variable
+  // the base `.toast` rule (above, and Bootstrap's own) already reads.
   @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;
+    &.toast-#{$name} {
+      --bs-toast-bg: #{mix($color, $white, 8%)};
     }
   }
 }

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

@@ -247,12 +247,34 @@
             <template v-if="field.type === 'currency'" #prepend>
                 <span class="input-group-text">{{ field.currencySymbol || "£" }}</span>
             </template>
+
+            <!-- Currency: the displayed text is padded to the minor-unit
+                 precision on blur/seed (e.g. `3.8` -> `3.80`); the model stays
+                 a plain number and typing is never reformatted mid-edit. -->
+            <DFormInput
+                v-if="field.type === 'currency'"
+                :model-value="currencyDisplayValue"
+                type="number"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :step="field.step ?? '0.01'"
+                :min="field.min"
+                :max="field.max"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                v-bind="field.inputProps"
+                @input="handleCurrencyInput"
+                @focus="handleCurrencyFocus"
+                @blur="handleCurrencyBlur"
+            />
             <DFormInput
+                v-else
                 v-model="numericInputValue"
                 type="number"
                 :required="field.required"
                 :placeholder="field.placeholder"
-                :step="field.step ?? (field.type === 'currency' ? '0.01' : undefined)"
+                :step="field.step"
                 :min="field.min"
                 :max="field.max"
                 :state="fieldState"
@@ -260,6 +282,7 @@
                 :readonly="isReadonly"
                 v-bind="field.inputProps"
             />
+
             <template v-if="field.type === 'percentage'" #append>
                 <span class="input-group-text">%</span>
             </template>
@@ -478,6 +501,50 @@ function setValue(value: any): void {
     props.form.clearError(errorKey.value);
 }
 
+// ————————————————— currency display formatting (#69)
+
+// The model stays a plain number throughout; only the input's *displayed*
+// text is padded to the minor-unit precision (`3.8` -> `3.80`), on blur and on
+// initial seed. Reformatting reactively on every keystroke (rather than on
+// blur) would fight the user mid-edit — e.g. rounding "3." to "3.00" before
+// they've typed the fractional digits — so a local ref tracks the shown text
+// independently of the numeric model, and is only resynced from the model
+// while the input isn't focused.
+const currencyDecimals = computed(() => props.field.decimals ?? 2);
+const isCurrencyFocused = ref(false);
+const currencyDisplayValue = ref("");
+
+function formatCurrency(value: any): string {
+    if (value === null || value === undefined || value === "") return "";
+    const num = Number(value);
+    if (!Number.isFinite(num)) return String(value);
+    return num.toFixed(currencyDecimals.value);
+}
+
+watch(
+    () => fieldValue.value,
+    (value) => {
+        if (isCurrencyFocused.value) return;
+        currencyDisplayValue.value = formatCurrency(value);
+    },
+    { immediate: true },
+);
+
+function handleCurrencyFocus(): void {
+    isCurrencyFocused.value = true;
+}
+
+function handleCurrencyInput(event: Event): void {
+    const raw = (event.target as HTMLInputElement).value;
+    currencyDisplayValue.value = raw;
+    setValue(raw);
+}
+
+function handleCurrencyBlur(): void {
+    isCurrencyFocused.value = false;
+    currencyDisplayValue.value = formatCurrency(fieldValue.value);
+}
+
 const fieldState = computed(() => props.form.getState(errorKey.value));
 
 const resolvedLabel = computed(
@@ -623,17 +690,23 @@ onBeforeUnmount(() => {
     border-radius: var(--bs-border-radius);
 }
 
-/* Switch field: a full-width "filled box" toggle, the same height as a select
-   or text input, that colour-codes its state — a neutral box when off, a filled
-   success green when on. The label sits on the left and the toggle on the right.
-   Renders the underlying `.form-check` (from the switch checkbox) as the box. */
+/* Switch field: a compact "filled box" toggle, sized to its content — like the
+   plain `checkbox` field type, it doesn't stretch to fill the form row — but
+   matching standard input height so it lines up with sibling text/select
+   fields. Colour-codes its state: a neutral box when off, a filled success
+   green when on. The label sits on the left and the toggle on the right.
+   Renders the underlying `.form-check` (from the switch checkbox) as the box.
+   `justify-content: space-between` on a full-width box used to leave a wide
+   unclickable gap between the label and the toggle (only the tiny toggle
+   itself was a real click target); shrinking the box to fit its content
+   removes that dead zone entirely. */
 .dx-switch :deep(.form-check) {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    justify-content: space-between;
     gap: 0.75rem;
-    width: 100%;
-    min-height: calc(1.5em + 0.75rem + 2px); /* match .form-control height */
+    width: fit-content;
+    max-width: 100%; /* wrap/ellipsize rather than overflow a narrow field */
+    min-height: var(--dx-input-height, calc(1.5em + 0.75rem + 2px)); /* match .form-control height */
     margin: 0;
     /* Override Bootstrap `.form-switch`'s 2.5em left padding for the floated input. */
     padding: 0.375rem 0.75rem;

package/resources/js/composables/useToast.ts

@@ -1 +1,53 @@
-export { useToast } from 'bootstrap-vue-next';
+import { isRef } from "vue";
+import { useToast as useBvnToast } from "bootstrap-vue-next";
+import type {
+    OrchestratorCreateOptions,
+    ToastOrchestratorCreateParam,
+} from "bootstrap-vue-next";
+
+// Bootstrap Vue Next maps a toast's `variant` prop straight to Bootstrap's
+// `.text-bg-{variant}` utility class, which sets background/text colour
+// `!important` (all Bootstrap utilities are `!important` by design) — so
+// restyling it can only ever fight that with `!important` too. The variants
+// this theme restyles (see theme.scss) are instead applied as a `toast-{variant}`
+// class, driving Bootstrap's own `--bs-toast-*` variables cleanly. An
+// unrecognised variant (e.g. "primary", "dark", or none) falls through to
+// BVN's default `.text-bg-*` styling unchanged.
+const THEMED_TOAST_VARIANTS = new Set(["success", "danger", "warning", "info"]);
+
+function themeToastParam(param: Record<string, unknown>): Record<string, unknown> {
+    const variant = param.variant as string | null | undefined;
+    if (!variant || !THEMED_TOAST_VARIANTS.has(variant)) return param;
+
+    const { variant: _variant, toastClass, ...rest } = param;
+    return {
+        ...rest,
+        toastClass: [toastClass, `toast-${variant}`],
+    };
+}
+
+/**
+ * Thin wrapper around Bootstrap Vue Next's `useToast()`. Public API is
+ * identical (`create({ title, body, variant })`, `show(...)`) — a themed
+ * `variant` is translated internally into a `toast-{variant}` class instead
+ * of being passed through to BVN, so it's styled via `--bs-toast-*` variables
+ * (see theme.scss) rather than an `!important`-overridden utility class.
+ */
+// A ref-wrapped param (rare — most callers pass a plain object) is forwarded
+// untouched: reading through it once here would snapshot every field, losing
+// reactivity for the rest of the toast, not just its variant.
+function maybeThemeParam(obj?: ToastOrchestratorCreateParam): ToastOrchestratorCreateParam | undefined {
+    if (!obj || isRef(obj)) return obj;
+    return themeToastParam(obj as Record<string, unknown>) as unknown as ToastOrchestratorCreateParam;
+}
+
+export function useToast(): ReturnType<typeof useBvnToast> {
+    const toast = useBvnToast();
+
+    return {
+        ...toast,
+        create: (obj?: ToastOrchestratorCreateParam, options?: OrchestratorCreateOptions) =>
+            toast.create(maybeThemeParam(obj), options),
+        show: (obj?: ToastOrchestratorCreateParam) => toast.show(maybeThemeParam(obj)),
+    };
+}

package/resources/js/types/index.ts

@@ -114,6 +114,15 @@ export interface FieldDefinition {
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
 
+    /**
+     * For `currency` fields: minor-unit decimal places the *display* value is
+     * formatted to on blur and on initial seed (default: 2, e.g. GBP/EUR/USD —
+     * pass 0 for a currency with no minor unit, e.g. JPY). The model stays a
+     * plain number throughout; only the input's shown text is padded (`3.8` →
+     * `3.80`). Typing is never reformatted mid-edit.
+     */
+    decimals?: number;
+
     /**
      * 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