@omnitend/dashboard-for-laravel 0.16.1 → 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
@@ -136,6 +144,18 @@ export interface FieldDefinition {
     /** Minimum / maximum number of repeater rows. */
     minItems?: number;
     maxItems?: number;
+    /**
+     * For `repeater` fields backed by an upsert-children API contract (rows
+     * carrying a persisted `id` are only deleted server-side when submitted
+     * flagged, e.g. Laravel's `{ id, to_delete: true }` pattern): the
+     * sub-field key to set `true` when a row is removed, instead of splicing
+     * it out of the array. Only applies to rows that already have an `id`
+     * (freshly added, never-persisted rows are still spliced normally since
+     * the server has never seen them). Flagged rows remain in `form.data`
+     * (so they're submitted) but are hidden from the UI and excluded from
+     * `minItems`/`maxItems` counts.
+     */
+    softDeleteKey?: string;
     /** Disable the field (static or computed from the model). */
     disabled?: MaybeFn<boolean>;
     /**

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-05T08:43:52.804Z",
+  "generated": "2026-07-06T19:02:59.128Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.15.0"
+    "version": "0.16.2"
   },
   "components": {
     "base": [
@@ -2146,7 +2146,7 @@
                   "name": "number"
                 },
                 "name": "index",
-                "description": "The row's zero-based index."
+                "description": "The row's zero-based position among visible rows."
               },
               {
                 "title": "binding",
@@ -2162,7 +2162,7 @@
                   "name": "function"
                 },
                 "name": "remove",
-                "description": "Removes this row (respects `minItems`)."
+                "description": "Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`)."
               },
               {
                 "title": "binding",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-05T08:43:52.857Z
+> 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.1",
+  "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>
@@ -474,9 +497,54 @@ function setValue(value: any): void {
     } else {
         (props.form.data as Record<string, any>)[props.field.key] = next;
     }
+    props.form.touched[errorKey.value] = true;
     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(
@@ -622,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/components/extended/DXRepeater.vue

@@ -7,37 +7,37 @@
 <template>
     <div class="dx-repeater">
         <div
-            v-for="(row, index) in rows"
-            :key="rowKey(index)"
+            v-for="(entry, position) in visibleRows"
+            :key="rowKey(entry.row, position)"
             class="dx-repeater-row"
         >
             <!--
               @slot Custom layout for a single repeater row, replacing the default sub-field stack.
               @binding {object} row The current row's data object.
-              @binding {number} index The row's zero-based index.
+              @binding {number} index The row's zero-based position among visible rows.
               @binding {FieldDefinition[]} fields The sub-field definitions for the row.
-              @binding {function} remove Removes this row (respects `minItems`).
+              @binding {function} remove Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`).
               @binding {string} path The dot path into `form.data` for this row (e.g. `lines.0`).
             -->
             <slot
                 v-if="$slots.row"
                 name="row"
-                :row="row"
-                :index="index"
+                :row="entry.row"
+                :index="position"
                 :fields="subFields"
-                :remove="() => removeRow(index)"
-                :path="rowPath(index)"
+                :remove="() => removeRow(entry.index)"
+                :path="rowPath(entry.index)"
             />
 
             <!-- Default row: stack each sub-field -->
             <template v-else>
                 <div class="dx-repeater-row-header">
-                    <span class="dx-repeater-row-index">{{ index + 1 }}</span>
+                    <span class="dx-repeater-row-index">{{ position + 1 }}</span>
                     <DButton
                         variant="outline-danger"
                         size="sm"
-                        :disabled="rows.length <= minItems"
-                        @click="removeRow(index)"
+                        :disabled="visibleRows.length <= minItems"
+                        @click="removeRow(entry.index)"
                     >
                         Remove
                     </DButton>
@@ -47,9 +47,9 @@
                     :key="subField.key"
                     :field="subField"
                     :form="form"
-                    :model="row"
-                    :key-path="`${rowPath(index)}.${subField.key}`"
-                    :error-key="`${rowPath(index)}.${subField.key}`"
+                    :model="entry.row"
+                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
                 />
             </template>
         </div>
@@ -57,7 +57,7 @@
         <DButton
             variant="outline-primary"
             size="sm"
-            :disabled="maxItems !== undefined && rows.length >= maxItems"
+            :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
             @click="addRow"
         >
             {{ field.addLabel || "Add" }}
@@ -97,10 +97,21 @@ const arrayPath = computed(() => props.keyPath ?? props.field.key);
 const subFields = computed<FieldDefinition[]>(() => props.field.fields ?? []);
 const minItems = computed(() => props.field.minItems ?? 0);
 const maxItems = computed(() => props.field.maxItems);
+const softDeleteKey = computed(() => props.field.softDeleteKey);
+
+function isSoftDeleted(row: any): boolean {
+    return Boolean(
+        softDeleteKey.value &&
+            row &&
+            typeof row === "object" &&
+            row[softDeleteKey.value],
+    );
+}
 
 /**
- * The live rows array. Ensures form.data holds an array at the path so
- * push/splice are reactive even when the form was seeded without one.
+ * The full rows array, including any row flagged via `softDeleteKey`. Ensures
+ * form.data holds an array at the path so push/splice are reactive even when
+ * the form was seeded without one.
  */
 const rows = computed<any[]>(() => {
     const existing = getByPath(props.form.data, arrayPath.value);
@@ -108,6 +119,18 @@ const rows = computed<any[]>(() => {
     return [];
 });
 
+/**
+ * Rows shown in the UI, paired with their real (unfiltered) array index —
+ * a soft-deleted row stays in `form.data` (so it's submitted) but is hidden
+ * here, and every path/splice operation must still target its true index,
+ * not its position among visible rows.
+ */
+const visibleRows = computed<Array<{ row: any; index: number }>>(() =>
+    rows.value
+        .map((row, index) => ({ row, index }))
+        .filter(({ row }) => !isSoftDeleted(row)),
+);
+
 const rowPath = (index: number): string => `${arrayPath.value}.${index}`;
 
 // Stable v-for keys tied to row object identity, so removing a middle row
@@ -118,8 +141,7 @@ const rowPath = (index: number): string => `${arrayPath.value}.${index}`;
 const generatedKeys = new WeakMap<object, number>();
 let nextGeneratedKey = 0;
 
-const rowKey = (index: number): string | number => {
-    const row = rows.value[index];
+const rowKey = (row: any, fallbackPosition: number): string | number => {
     if (row && typeof row === "object") {
         if (row.id !== undefined && row.id !== null) return row.id;
         let key = generatedKeys.get(row);
@@ -130,7 +152,7 @@ const rowKey = (index: number): string | number => {
         }
         return `gen-${key}`;
     }
-    return index;
+    return fallbackPosition;
 };
 
 /** Default value for a freshly added row's sub-field. */
@@ -188,7 +210,7 @@ function clearArrayErrors(): void {
 }
 
 function addRow(): void {
-    if (maxItems.value !== undefined && rows.value.length >= maxItems.value) {
+    if (maxItems.value !== undefined && visibleRows.value.length >= maxItems.value) {
         return;
     }
     // Ensure the array exists on form.data before pushing (path may be
@@ -202,8 +224,21 @@ function addRow(): void {
 }
 
 function removeRow(index: number): void {
-    if (rows.value.length <= minItems.value) return;
-    getByPath(props.form.data, arrayPath.value).splice(index, 1);
+    if (visibleRows.value.length <= minItems.value) return;
+    const array = getByPath(props.form.data, arrayPath.value);
+    const row = array?.[index];
+
+    // A row the server already knows about (carries an `id`) can't just be
+    // spliced away under an upsert-children contract — the server never
+    // learns it was removed. Flag it instead so it's still submitted, and
+    // let it disappear from the UI via `visibleRows`.
+    if (softDeleteKey.value && row && typeof row === "object" && row.id !== undefined && row.id !== null) {
+        row[softDeleteKey.value] = true;
+        clearArrayErrors();
+        return;
+    }
+
+    array.splice(index, 1);
     clearArrayErrors();
 }
 </script>

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
@@ -190,6 +199,19 @@ export interface FieldDefinition {
     minItems?: number;
     maxItems?: number;
 
+    /**
+     * For `repeater` fields backed by an upsert-children API contract (rows
+     * carrying a persisted `id` are only deleted server-side when submitted
+     * flagged, e.g. Laravel's `{ id, to_delete: true }` pattern): the
+     * sub-field key to set `true` when a row is removed, instead of splicing
+     * it out of the array. Only applies to rows that already have an `id`
+     * (freshly added, never-persisted rows are still spliced normally since
+     * the server has never seen them). Flagged rows remain in `form.data`
+     * (so they're submitted) but are hidden from the UI and excluded from
+     * `minItems`/`maxItems` counts.
+     */
+    softDeleteKey?: string;
+
     /** Disable the field (static or computed from the model). */
     disabled?: MaybeFn<boolean>;