@omnitend/dashboard-for-laravel 0.47.1 → 0.47.2

package/dist/types/index.d.ts

@@ -219,7 +219,9 @@ export interface FieldDefinition {
      * For a field whose value is a list of rows (a `repeater`, or a span
      * field that renders its own rows and owns `key.N.*` error keys): the
      * row's own name, called with the row (`model[key][index]`, or `{}` when
-     * the model has no such row) and its 0-based index. When it returns a
+     * the model has no such row) and its 0-based index (for a failure's row
+     * that has since moved, its current index; once removed, the index it
+     * failed at: the index "(line N)" counts). When it returns a
      * non-empty string, the error summary lists that row's errors under it
      * alone ("Chaucer Ale (Pint): Enter a price.") instead of
      * "<sub-field label> (line N)". Returning `undefined`, `null` or `""`

package/dist/utils/formErrorTargets.d.ts

@@ -8,8 +8,10 @@ export interface ErrorTarget {
      * Where to take the user for this error now. The same as `errorKey`,
      * except for a row error resolved with `failedRows`: the key at the
      * failed row's CURRENT index (`lines.1.price` once row 0 is removed),
-     * or the owning field's key when that row is gone. Always set by
-     * `resolveErrorTargets`; optional so targets built by hand still type.
+     * or the owning field's key when that row is gone (removed, replaced, or
+     * flagged by the field's `softDeleteKey`); DXForm then focuses the
+     * field's container, not a row. Always set by `resolveErrorTargets`;
+     * optional so targets built by hand still type.
      */
     focusKey?: string;
     /** The server's messages for that key, as sent. */

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-10-21T13:01:22.201Z",
+  "generated": "2026-10-21T13:19:32.045Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.47.1"
+    "version": "0.47.2"
   },
   "components": {
     "base": [
@@ -2205,7 +2205,7 @@
                   "name": "(value: any) => void"
                 },
                 "name": "update",
-                "description": "Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (rows the slot draws itself)."
+                "description": "Setter that writes the value back and clears the field's validation error, and every error under `<key>.` when the value is an array whose rows were added, removed, replaced or reordered (rows the slot draws itself)."
               }
             ]
           },
@@ -2287,7 +2287,7 @@
                   "name": "(value: any) => void"
                 },
                 "name": "update",
-                "description": "Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (rows the slot draws itself)."
+                "description": "Setter that writes the value back and clears the field's validation error, and every error under `<key>.` when the value is an array whose rows were added, removed, replaced or reordered (rows the slot draws itself)."
               }
             ]
           },

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-10-21T13:01:22.256Z
+> Last updated: 2026-10-21T13:19:32.105Z
 
 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.47.1",
+  "version": "0.47.2",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

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

@@ -22,7 +22,7 @@
           @binding {FieldDefinition} field The field definition being rendered.
           @binding {any} model The model passed to field predicates (defaults to the live form data).
           @binding {any} value The current field value.
-          @binding {(value: any) => void} update Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (rows the slot draws itself).
+          @binding {(value: any) => void} update Setter that writes the value back and clears the field's validation error, and every error under `<key>.` when the value is an array whose rows were added, removed, replaced or reordered (rows the slot draws itself).
         -->
         <slot
             name="span"
@@ -93,7 +93,7 @@
           @binding {FieldDefinition} field The field definition being rendered.
           @binding {any} model The model passed to field predicates (defaults to the live form data).
           @binding {any} value The current field value.
-          @binding {(value: any) => void} update Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (rows the slot draws itself).
+          @binding {(value: any) => void} update Setter that writes the value back and clears the field's validation error, and every error under `<key>.` when the value is an array whose rows were added, removed, replaced or reordered (rows the slot draws itself).
         -->
         <slot
             v-else-if="showValueSlot && $slots.value"
@@ -420,6 +420,7 @@ import {
     onBeforeUnmount,
     provide,
     ref,
+    toRaw,
     useId,
     useSlots,
     watch,
@@ -744,16 +745,51 @@ function setValue(value: any): void {
     props.form.clearError(errorKey.value);
 }
 
+/** The raw rows of an array value, in order, or null for any other value. */
+function rowIdentitiesOf(value: unknown): unknown[] | null {
+    return Array.isArray(value) ? value.map((row) => toRaw(row)) : null;
+}
+
+/**
+ * The field's rows as last seen: refreshed by the watcher below whenever the
+ * array or its membership changes (not on edits inside a row), and by each
+ * slot `update`. The watcher runs before the next render, so a slot that
+ * changes the rows in place and calls `update` in the same handler is still
+ * compared against the rows from before the change.
+ */
+let lastSeenRows: unknown[] | null = null;
+watch(
+    () => rowIdentitiesOf(fieldValue.value),
+    (rows) => {
+        lastSeenRows = rows;
+    },
+    { immediate: true },
+);
+
+function haveRowsMoved(previous: unknown[] | null, next: unknown[]): boolean {
+    if (previous === null || previous.length !== next.length) return true;
+    return next.some((row, index) => row !== previous[index]);
+}
+
 /**
  * `update` for the `span` and `value` slots (and so DXTable's `edit-span` /
- * `edit-value`). Such a slot may draw rows of its own and write the whole
- * array back, so besides the field's own error it clears every error under
- * `<key>.` (`lines.3.price`), as the repeater's add and remove do: the rows
- * may have moved, and a stale per-row error would stay in the summary under
- * the wrong row. They come back on the next submit.
+ * `edit-value`). Like a plain set, it clears the field's own error. When the
+ * value is an array whose rows changed (added, removed, replaced or
+ * reordered, compared by identity with the rows as last seen), it also
+ * clears every error under `<key>.` (`lines.3.price`), as the repeater's add
+ * and remove do: a per-row error would otherwise stay under whichever row
+ * now sits at its index. An update that keeps the same rows in the same
+ * order (a row editor writing the array back on each keystroke), or a
+ * value that is not an array (an `address` object), keeps the nested
+ * errors: they still name the right place. They come back on the next
+ * submit either way.
  */
 function setValueFromSlot(value: any): void {
+    const nextRows = rowIdentitiesOf(value);
+    const rowsMoved = nextRows !== null && haveRowsMoved(lastSeenRows, nextRows);
     setValue(value);
+    if (nextRows !== null) lastSeenRows = nextRows;
+    if (!rowsMoved) return;
     const prefix = `${errorKey.value}.`;
     for (const key of Object.keys(props.form.errors)) {
         if (key.startsWith(prefix)) {

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

@@ -1085,6 +1085,33 @@ function focusSelectedTab(): void {
     document.getElementById(buttonIdFor(selectedKey))?.focus();
 }
 
+/**
+ * Focus a field's container rather than any control inside it: the field's
+ * labelled group when it has one (a repeater's `fieldset`, announced by its
+ * legend), else the marked element itself. It is made focusable for this
+ * focus only (`tabindex="-1"`, removed again on blur), so the Tab order is
+ * unchanged. Used when the row an error named is gone: every control inside
+ * the field belongs to some other row. True once it holds focus.
+ */
+function focusFieldContainer(element: HTMLElement): boolean {
+    const container =
+        element.querySelector<HTMLElement>(':scope > fieldset, :scope > [role="group"]') ??
+        element;
+    if (!container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "-1");
+        container.addEventListener(
+            "blur",
+            () => container.removeAttribute("tabindex"),
+            { once: true },
+        );
+    }
+    element.scrollIntoView({ block: "nearest" });
+    container.focus({ preventScroll: true });
+    if (document.activeElement === container) return true;
+    if (container.getAttribute("tabindex") === "-1") container.removeAttribute("tabindex");
+    return false;
+}
+
 /**
  * Take the user to an error a summary lists: select its tab, wait for the
  * pane to render, look the field up in the form (its marker, anywhere
@@ -1097,7 +1124,11 @@ function focusSelectedTab(): void {
  * its key whenever its element leaves the DOM (a re-render replacing it),
  * and a moment with none at all is waited out. When no marker renders
  * within the field's render frames, or nothing in it takes focus, focus
- * moves to the selected tab's button. Exposed so a summary rendered OUTSIDE
+ * moves to the selected tab's button. When the row the error named is gone
+ * (`focusKey` is the field's key while `errorKey` names something under it:
+ * the row was removed, replaced or soft-deleted), the field's container
+ * takes focus instead of a control, since every control in it belongs to
+ * another row (`focusFieldContainer`). Exposed so a summary rendered OUTSIDE
  * the form (DXTable's modal footer) can drive it.
  */
 async function focusErrorTarget(target: ErrorSummarySelection): Promise<void> {
@@ -1105,6 +1136,10 @@ async function focusErrorTarget(target: ErrorSummarySelection): Promise<void> {
         commitTabKey(target.tabKey);
     }
     const token = ++revealToken;
+    const isTargetGone =
+        target.focusKey === target.fieldKey &&
+        target.errorKey !== undefined &&
+        target.errorKey !== target.fieldKey;
     let element = await renderedErrorElement(
         target.focusKey ?? target.errorKey ?? target.fieldKey,
         target.fieldKey,
@@ -1114,6 +1149,10 @@ async function focusErrorTarget(target: ErrorSummarySelection): Promise<void> {
         focusSelectedTab();
         return;
     }
+    if (isTargetGone) {
+        if (!focusFieldContainer(element)) focusSelectedTab();
+        return;
+    }
     const path = element.getAttribute("data-dx-field-key") ?? target.fieldKey;
     scrollFieldIntoView(element);
 

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

@@ -78,7 +78,9 @@ export interface ErrorSummarySelection {
     /**
      * Where to take the user: the error key at the failed row's current
      * index, or the field's key when that row is gone (see
-     * `ErrorTarget.focusKey`). Equal to `errorKey` for everything else.
+     * `ErrorTarget.focusKey`), when DXForm's `focusErrorTarget` focuses the
+     * field's container rather than any row's control. Equal to `errorKey`
+     * for everything else.
      * Always emitted; optional so a selection built by hand for DXForm's
      * exposed `focusErrorTarget` still types (it then uses `errorKey`).
      */

package/resources/js/composables/useForm.ts

@@ -27,11 +27,19 @@ export interface SubmitFailure {
     /** The validation errors the submit returned (`{}` when none). */
     errors: ValidationErrors;
     /**
-     * The rows the errors named, as they were when the submit failed, keyed
-     * by row path (`lines.2` for `lines.2.price`; every numeric segment of
-     * every error key gets one). Absent when no error key names a row that
-     * exists in the form data. The error summary uses it to keep naming
-     * and finding the row that failed after rows are removed or reordered.
+     * The rows the errors named, keyed by row path: the path up to the
+     * key's FIRST numeric segment (`lines.2` for `lines.2.price` and for
+     * `lines.2.options.0.name`; a row nested inside a row is not recorded,
+     * since the summary follows the outer row). Absent when no error key
+     * names a row that exists in the form data. The error summary uses it
+     * to keep naming and finding the row that failed after rows are removed
+     * or reordered.
+     *
+     * The rows are read from the form data when the failure response
+     * ARRIVES, not when the request was sent. Rows added, removed or
+     * reordered while the request was in flight, or a submit `transform`
+     * that drops or reorders rows, can attach an error to the wrong row
+     * here, exactly as a bare index key always could.
      */
     failedRows?: Record<string, FailedRow>;
 }
@@ -249,8 +257,14 @@ function submitFailureFrom(error: unknown): SubmitFailure | null {
 
 /**
  * A copy of a row for `FailedRow.snapshot`: a deep clone when the row allows
- * one, else a shallow copy (a row holding a function or a `File` proxy that
- * `structuredClone` refuses still gets a name).
+ * one (`File`, `Blob` and `Date` values clone fine), else a shallow copy, so
+ * a row `structuredClone` refuses still gets a name. It refuses a row
+ * holding a function, a symbol, a DOM node or a proxy (a reactive object
+ * nested in the row: the row itself is raw, the objects inside it may not
+ * be). A class instance does NOT make it throw: it is cloned as a plain
+ * object, losing its prototype, getters and private fields, so a `rowLabel`
+ * reading a getter on such a value reads `undefined` (and falls back to the
+ * line form).
  */
 function snapshotRow(row: object): Record<string, any> {
     try {
@@ -262,7 +276,10 @@ function snapshotRow(row: object): Record<string, any> {
 
 /**
  * The `failedRows` for a failure's error keys, read from the form data as it
- * is when the failure is recorded. Undefined when no key names a row.
+ * is when the failure is recorded. Only the row at a key's first numeric
+ * segment is recorded: that is the only one the error summary reads
+ * (`<field key>.<index>`), so deeper rows would be cloned for nothing.
+ * Undefined when no key names a row.
  */
 function failedRowsFor(
     errors: ValidationErrors,
@@ -271,14 +288,15 @@ function failedRowsFor(
     const rows: Record<string, FailedRow> = {};
     for (const errorKey of Object.keys(errors)) {
         const segments = errorKey.split(".");
-        for (let index = 1; index < segments.length; index += 1) {
-            if (!/^\d+$/.test(segments[index])) continue;
-            const rowPath = segments.slice(0, index + 1).join(".");
-            if (rows[rowPath] !== undefined) continue;
-            const row = toRaw(getByPath(data, rowPath));
-            if (row === null || typeof row !== "object") continue;
-            rows[rowPath] = markRaw({ row, snapshot: snapshotRow(row) });
-        }
+        const firstRowSegment = segments.findIndex(
+            (segment, index) => index > 0 && /^\d+$/.test(segment),
+        );
+        if (firstRowSegment < 0) continue;
+        const rowPath = segments.slice(0, firstRowSegment + 1).join(".");
+        if (rows[rowPath] !== undefined) continue;
+        const row = toRaw(getByPath(data, rowPath));
+        if (row === null || typeof row !== "object") continue;
+        rows[rowPath] = markRaw({ row, snapshot: snapshotRow(row) });
     }
     return Object.keys(rows).length > 0 ? rows : undefined;
 }

package/resources/js/types/index.ts

@@ -278,7 +278,9 @@ export interface FieldDefinition {
      * For a field whose value is a list of rows (a `repeater`, or a span
      * field that renders its own rows and owns `key.N.*` error keys): the
      * row's own name, called with the row (`model[key][index]`, or `{}` when
-     * the model has no such row) and its 0-based index. When it returns a
+     * the model has no such row) and its 0-based index (for a failure's row
+     * that has since moved, its current index; once removed, the index it
+     * failed at: the index "(line N)" counts). When it returns a
      * non-empty string, the error summary lists that row's errors under it
      * alone ("Chaucer Ale (Pint): Enter a price.") instead of
      * "<sub-field label> (line N)". Returning `undefined`, `null` or `""`

package/resources/js/utils/formErrorTargets.ts

@@ -24,8 +24,10 @@ export interface ErrorTarget {
      * Where to take the user for this error now. The same as `errorKey`,
      * except for a row error resolved with `failedRows`: the key at the
      * failed row's CURRENT index (`lines.1.price` once row 0 is removed),
-     * or the owning field's key when that row is gone. Always set by
-     * `resolveErrorTargets`; optional so targets built by hand still type.
+     * or the owning field's key when that row is gone (removed, replaced, or
+     * flagged by the field's `softDeleteKey`); DXForm then focuses the
+     * field's container, not a row. Always set by `resolveErrorTargets`;
+     * optional so targets built by hand still type.
      */
     focusKey?: string;
     /** The server's messages for that key, as sent. */
@@ -288,12 +290,21 @@ export function resolveErrorTargets(
 
     /**
      * Where a failed row is now: its index in the field's live rows, found by
-     * identity, or -1 when it is gone (removed, or the rows were replaced).
+     * identity, or -1 when it is gone (removed, the rows were replaced, or
+     * the row carries the field's `softDeleteKey` flag: DXRepeater keeps
+     * such a row in the array, so it is submitted, but no longer renders it).
      */
     const currentIndexOf = (field: FieldDefinition, failedRow: FailedRow): number => {
         const liveRows = getByPath(model, field.key);
         if (!Array.isArray(liveRows)) return -1;
-        return liveRows.findIndex((row) => toRaw(row) === failedRow.row);
+        const index = liveRows.findIndex((row) => toRaw(row) === failedRow.row);
+        if (index < 0) return -1;
+        // Read the flag through the LIVE row (a reactive proxy in a form),
+        // not the raw `failedRow.row`, so a caller's computed re-resolves
+        // when the row is flagged.
+        const softDeleteKey = field.softDeleteKey;
+        if (softDeleteKey && Boolean(liveRows[index]?.[softDeleteKey])) return -1;
+        return index;
     };
 
     /**
@@ -303,7 +314,8 @@ export function resolveErrorTargets(
      * focus key uses the row's current index, or is the field's key when the
      * row is gone. "(line N)" then counts the row's CURRENT position while it
      * exists (the line a click takes the user to), and the position it failed
-     * at once it is gone.
+     * at once it is gone. `rowLabel(row, index)` is given that same index, so
+     * a name built from the index agrees with the line form.
      */
     const ownedTarget = (
         errorKey: string,
@@ -344,7 +356,7 @@ export function resolveErrorTargets(
             const row = getByPath(model, `${field.key}.${first}`);
             rowModel = row !== null && typeof row === "object" ? row : {};
         }
-        const rowName = rowLabelFor(field, rowModel, failedIndex);
+        const rowName = rowLabelFor(field, rowModel, lineIndex);
         if (rowName !== null) return { label: rowName, focusKey };
         const base = subField ? labelFor(subField, rowModel) : labelFor(field);
         return { label: `${base} (line ${lineIndex + 1})`, focusKey };