@omnitend/dashboard-for-laravel 0.16.2 → 0.16.3

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-06T19:02:59.128Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.16.1"
+    "version": "0.16.2"
   },
   "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-06T19:02:59.193Z
 
 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.3",
   "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
 // ----------------------------------------------------------------------------

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/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