@omnitend/dashboard-for-laravel 0.46.0 → 0.47.1

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `info-popover`, `hint` and `repeater-row` slots for per-field customisation.
+  Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `info-popover`, `hint`, `repeater-row` and `password-actions` slots for per-field customisation.
 
   Structure (#135): a thin DISPATCHER. The shared chrome (label + validation
   feedback + hint + help + info) lives in `DXFieldShell`; the numeric controls
@@ -22,14 +22,14 @@
           @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.
+          @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).
         -->
         <slot
             name="span"
             :field="field"
             :model="model"
             :value="fieldValue"
-            :update="setValue"
+            :update="setValueFromSlot"
         />
     </div>
 
@@ -85,7 +85,7 @@
                 :field="field"
                 :model="model"
                 :value="fieldValue"
-                :update="setValue"
+                :update="setValueFromSlot"
             />
         </div>
         <!--
@@ -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.
+          @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).
         -->
         <slot
             v-else-if="showValueSlot && $slots.value"
@@ -101,7 +101,7 @@
             :field="field"
             :model="model"
             :value="fieldValue"
-            :update="setValue"
+            :update="setValueFromSlot"
         />
         <template v-else>
             <!-- Checkbox (horizontal): the row label (shell #label) names the
@@ -336,28 +336,61 @@
                 <!-- Password with a reveal toggle (the default for
                      `type: "password"`). Typing a long password blind is the one
                      place the eye really earns its keep, so it's opt-out
-                     (`revealable: false`) rather than opt-in. -->
-                <DInputGroup v-else-if="isRevealablePassword">
-                    <DFormInput
-                        v-model="textFieldModel"
-                        :required="field.required"
-                        :placeholder="field.placeholder"
-                        :state="fieldState"
-                        :disabled="isDisabled"
-                        :readonly="isReadonly"
-                        v-bind="passwordInputProps"
-                    />
-                    <template #append>
-                        <DButton
-                            variant="outline-secondary"
-                            :icon="passwordRevealed ? 'eye-slash' : 'eye'"
-                            :aria-label="passwordRevealed ? 'Hide password' : 'Show password'"
-                            :aria-pressed="passwordRevealed"
+                     (`revealable: false`) rather than opt-in. The eye is drawn
+                     as part of the field (`.dx-password-reveal`: the input's
+                     border, radius and background). A `password-actions` slot
+                     lands AFTER the input group, in `.dx-password-field__actions`,
+                     which wraps below the group when the row cannot give the
+                     input `--dx-password-input-min-width` (theme.scss); it also
+                     brings the group to a `revealable: false` field. -->
+                <div v-else-if="isPasswordGroup()" class="dx-password-field">
+                    <DInputGroup class="dx-password-field__group">
+                        <DFormInput
+                            v-model="textFieldModel"
+                            :required="field.required"
+                            :placeholder="field.placeholder"
+                            :state="fieldState"
                             :disabled="isDisabled"
-                            @click="passwordRevealed = !passwordRevealed"
+                            :readonly="isReadonly"
+                            v-bind="passwordInputProps"
                         />
-                    </template>
-                </DInputGroup>
+                        <template #append>
+                            <DButton
+                                v-if="isRevealablePassword"
+                                class="dx-password-reveal"
+                                variant="outline-secondary"
+                                icon-only
+                                :icon="passwordRevealed ? 'eye-slash' : 'eye'"
+                                :aria-label="passwordRevealed ? 'Hide password' : 'Show password'"
+                                :aria-pressed="passwordRevealed"
+                                :disabled="isDisabled"
+                                @click="passwordRevealed = !passwordRevealed"
+                            />
+                        </template>
+                    </DInputGroup>
+                    <div v-if="slots['password-actions'] !== undefined" class="dx-password-field__actions">
+                        <!--
+                          @slot Extra controls beside a password input, after its input group (the input and the reveal (eye) toggle), e.g. a "Generate password" button. They sit on the input's row while it keeps `--dx-password-input-min-width`, and wrap below it when the row is too narrow. Use an ordinary button (a `secondary` `DButton` matches the form's other buttons). Not rendered on a `plaintext` field.
+                          @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.
+                          @binding {boolean} revealed Whether the password is currently shown as plain text.
+                          @binding {(revealed: boolean) => void} setRevealed Show (`true`) or mask (`false`) the password, exactly as the eye does. A no-op on a `revealable: false` field.
+                          @binding {boolean} disabled Whether the field is disabled or read-only, so actions that change the value can disable themselves.
+                        -->
+                        <slot
+                            name="password-actions"
+                            :field="field"
+                            :model="model"
+                            :value="fieldValue"
+                            :update="setValue"
+                            :revealed="passwordRevealed"
+                            :set-revealed="setPasswordRevealed"
+                            :disabled="isDisabled || isReadonly"
+                        />
+                    </div>
+                </div>
 
                 <!-- Text-based inputs (text/email/password/url/tel/date/time/datetime) -->
                 <DFormInput
@@ -711,6 +744,24 @@ function setValue(value: any): void {
     props.form.clearError(errorKey.value);
 }
 
+/**
+ * `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.
+ */
+function setValueFromSlot(value: any): void {
+    setValue(value);
+    const prefix = `${errorKey.value}.`;
+    for (const key of Object.keys(props.form.errors)) {
+        if (key.startsWith(prefix)) {
+            props.form.clearError(key);
+        }
+    }
+}
+
 const fieldState = computed(() => props.form.getState(errorKey.value));
 
 // A label function that throws falls back to the humanised key, as the
@@ -819,12 +870,43 @@ const isRevealablePassword = computed(
         !isPlaintext.value,
 );
 
+/*
+ * The password input group: the eye (unless `revealable: false`) plus any
+ * `password-actions` slot content. A `revealable: false` field with no slot
+ * stays a bare input, as before; with the slot it gets the group so the
+ * actions have somewhere to sit, but still no eye and no way to unmask.
+ * A function, not a computed: `useSlots()` is not reactive, so a computed
+ * would keep the first render's answer if the slot came or went later.
+ */
+function isPasswordGroup(): boolean {
+    return (
+        isRevealablePassword.value ||
+        (props.field.type === "password" &&
+            !isPlaintext.value &&
+            slots["password-actions"] !== undefined)
+    );
+}
+
+/**
+ * The `password-actions` slot's handle on the reveal state: the same state
+ * the eye toggles, so the two never disagree. Refused on a `revealable: false`
+ * field, which promises never to unmask.
+ */
+function setPasswordRevealed(revealed: boolean): void {
+    passwordRevealed.value = isRevealablePassword.value && revealed === true;
+}
+
 // DXTable reuses ONE DXField instance per field key across modal opens (the
 // v-for is keyed on `field.key`, which is stable across rows) and swaps in a
 // fresh form per record. Without this, revealing row A's password leaves row
 // B's — and the create form's — showing in clear text.
+// Two sources, not one getter returning `[form, key]`: that array is new on
+// every run, so the callback would fire on ANY change the getter read,
+// including a new `field` object from a consumer that rebuilds its fields
+// from form data on each edit, re-masking straight after `setRevealed(true)`
+// or the first keystroke after the eye.
 watch(
-    () => [props.form, props.field.key],
+    [() => props.form, () => props.field.key],
     () => {
         passwordRevealed.value = false;
     },
@@ -864,10 +946,14 @@ const controlPropsWithGuards = computed(() => {
     return merged;
 });
 
-// The reveal toggle owns the password input's `type`.
+// The reveal toggle owns the password input's `type`. Only a revealable field
+// can be shown as text (`setPasswordRevealed` also refuses the others).
 const passwordInputProps = computed(() => ({
     ...inputPropsWithGuards.value,
-    type: passwordRevealed.value ? "text" : "password",
+    type:
+        passwordRevealed.value && isRevealablePassword.value
+            ? "text"
+            : "password",
 }));
 
 const inputType = computed<string>(() => {

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

@@ -227,7 +227,11 @@ import DXFormField from "./DXFormField.vue";
 import DXSaveButton from "./DXSaveButton.vue";
 import DXFormErrorSummary, { type ErrorSummarySelection } from "./DXFormErrorSummary.vue";
 import { resolveErrorTargets, type ErrorTarget } from "../../utils/formErrorTargets";
-import type { UseFormReturn, ValidationErrors } from "../../composables/useForm";
+import type {
+    SubmitFailure,
+    UseFormReturn,
+    ValidationErrors,
+} from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
 import { useContainerWidth } from "../../composables/useContainerWidth";
 import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
@@ -590,13 +594,17 @@ const visibleTabKeys = computed<string[]>(() =>
  * field definition (consumer-rendered content) still owns its own key and
  * keys nested under it.
  */
-function errorTargetsFor(errors: ValidationErrors | null | undefined): ErrorTarget[] {
+function errorTargetsFor(
+    errors: ValidationErrors | null | undefined,
+    failedRows?: SubmitFailure["failedRows"],
+): ErrorTarget[] {
     return resolveErrorTargets(errors, {
         fields: resolvedFields.value,
         tabs: hasTabs.value ? props.tabs : undefined,
         model: model.value,
         isFieldVisible,
         isTabVisible: (tab) => visibleTabKeys.value.includes(tab.key),
+        failedRows,
     });
 }
 
@@ -605,10 +613,14 @@ const liveErrorTargets = computed<ErrorTarget[]>(() =>
     erroredKeys.value.length === 0 ? [] : errorTargetsFor(resolvedForm.value.errors),
 );
 
-/** Targets for what the last failed submit returned (the summary's rows). */
+/**
+ * Targets for what the last failed submit returned (the summary's rows). The
+ * failure's captured rows keep a row error naming, and pointing at, the row
+ * that failed after rows are removed or reordered.
+ */
 const summaryTargets = computed<ErrorTarget[]>(() => {
     const failure = resolvedForm.value.submitFailure;
-    return failure ? errorTargetsFor(failure.errors) : [];
+    return failure ? errorTargetsFor(failure.errors, failure.failedRows) : [];
 });
 
 /** Key of the first visible tab owning a visible errored field, or null. */
@@ -1094,7 +1106,7 @@ async function focusErrorTarget(target: ErrorSummarySelection): Promise<void> {
     }
     const token = ++revealToken;
     let element = await renderedErrorElement(
-        target.errorKey ?? target.fieldKey,
+        target.focusKey ?? target.errorKey ?? target.fieldKey,
         target.fieldKey,
     );
     if (token !== revealToken) return;

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

@@ -75,6 +75,14 @@ export interface ErrorSummarySelection {
     tabKey: string | null;
     /** The error key as the server sent it. */
     errorKey: string;
+    /**
+     * 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.
+     * Always emitted; optional so a selection built by hand for DXForm's
+     * exposed `focusErrorTarget` still types (it then uses `errorKey`).
+     */
+    focusKey?: string;
 }
 
 interface Props {
@@ -171,6 +179,7 @@ const targets = computed<ErrorTarget[]>(() => {
         isFieldVisible: props.isFieldVisible,
         isTabVisible: props.isTabVisible,
         resolveLabel: props.resolveLabel,
+        failedRows: failure.value.failedRows,
     });
 });
 
@@ -178,6 +187,7 @@ interface Row {
     id: string;
     text: string;
     errorKey: string;
+    focusKey: string;
     fieldKey: string | null;
     tabKey: string | null;
 }
@@ -188,6 +198,7 @@ const rows = computed<Row[]>(() =>
             id: `${target.errorKey}#${index}`,
             text,
             errorKey: target.errorKey,
+            focusKey: target.focusKey ?? target.errorKey,
             fieldKey: target.fieldKey,
             tabKey: target.tabKey,
         })),
@@ -227,6 +238,7 @@ function selectRow(row: Row): void {
         fieldKey: row.fieldKey,
         tabKey: row.tabKey,
         errorKey: row.errorKey,
+        focusKey: row.focusKey,
     });
 }
 </script>

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

@@ -5,7 +5,8 @@
   Owns the single per-field render block that DXForm's tabbed and flat layouts
   both need: the `field(<key>)` full-replacement slot, the
   `field-before(<key>)`/`field-after(<key>)` wrapper slots, and the `<DXField>`
-  element with its `value`/`span`/`info`/`hint`/`repeater-row` slot forwarding.
+  element with its `value`/`span`/`info`/`hint`/`repeater-row`/
+  `switch-list-item`/`password-actions` slot forwarding.
 
   Extracted so those per-field props/slots are wired in ONE place — before this,
   DXForm carried two near-identical copies (tabbed + flat) and a new per-field
@@ -99,6 +100,7 @@ function fieldSlotMap(): Record<string, string> {
     ["hint", `hint(${key})`],
     ["repeater-row", `repeater-row(${key})`],
     ["switch-list-item", `switch-list-item(${key})`],
+    ["password-actions", `password-actions(${key})`],
   ];
   for (const [target, source] of candidates) {
     if (slots[source]) map[target] = source;

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

@@ -266,7 +266,8 @@
         </DRow>
 
         <!-- Edit/create modal (only when editFields provided). The consumer's
-             edit-value / edit-span / tab-* slots are forwarded through to it
+             edit-value / edit-span / edit-password-actions / tab-* slots are
+             forwarded through to it
              generically; it maps them onto DXForm and provides the row context
              + a close handle (#129). -->
         <DXTableEditorModal
@@ -299,6 +300,7 @@
         >
             <!--
               @slot edit-value(<fieldKey>) / edit-span(<fieldKey>) /
+              edit-password-actions(<fieldKey>) /
               tab-content|tab-before|tab-after(<tabKey>) — forwarded to the edit
               modal (see DXTableEditorModal for their bindings).
             -->
@@ -2514,6 +2516,7 @@ const handleDelete = editor.remove;
 const EDIT_MODAL_SLOT_PREFIXES = [
     'edit-value(',
     'edit-span(',
+    'edit-password-actions(',
     'tab-content(',
     'tab-before(',
     'tab-after(',

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

@@ -1,8 +1,8 @@
 <!--
   @component
   Internal edit/create modal for `DXTable` (#129). Renders the `DModal` +
-  `DXForm` and maps DXTable's `edit-value`/`edit-span`/`tab-*` slots onto
-  DXForm's `value`/`span`/`tab-*` slots, providing the row context and a `close`
+  `DXForm` and maps DXTable's `edit-value`/`edit-span`/`edit-password-actions`/
+  `tab-*` slots onto DXForm's `value`/`span`/`password-actions`/`tab-*` slots, providing the row context and a `close`
   handle. Extracted so `DXTable` is a thin façade over the table render, the
   pagination, the editor logic (`useResourceEditor`) and this modal — rather than
   owning all four.
@@ -115,6 +115,36 @@
                     />
                 </template>
 
+                <!-- Forward edit-password-actions(key) → password-actions(key):
+                     content after the password input group (input and eye),
+                     with a handle on dfl's own reveal (eye) state. -->
+                <template
+                    v-for="key in editPasswordActionsSlotKeys"
+                    :key="`epa-${key}`"
+                    #[`password-actions(${key})`]="sp"
+                >
+                    <!--
+                      @slot Extra controls beside password field `<key>`'s input in the edit/create modal, after its input group (the input and the reveal (eye) toggle); wraps below the input when the row is too narrow — e.g. a "Generate password" button. Name it `edit-password-actions(<fieldKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {any} value The current field value.
+                      @binding {Function} update Call with a new value to update the field.
+                      @binding {boolean} revealed Whether the password is currently shown as plain text.
+                      @binding {Function} setRevealed Call with true to show the password (as the eye does) or false to mask it.
+                      @binding {boolean} disabled Whether the field is disabled or read-only.
+                      @binding {object} field The field definition.
+                    -->
+                    <slot
+                        :name="`edit-password-actions(${key})`"
+                        :item="item"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :revealed="sp.revealed"
+                        :set-revealed="sp.setRevealed"
+                        :disabled="sp.disabled"
+                        :field="sp.field"
+                    />
+                </template>
+
                 <!-- Forward tab-content / tab-before / tab-after slots -->
                 <template
                     v-for="key in tabContentSlotKeys"
@@ -318,6 +348,9 @@ const editValueSlotKeys = computed(() =>
 const editSpanSlotKeys = computed(() =>
     fieldKeys.value.filter((key) => !!slots[`edit-span(${key})`]),
 );
+const editPasswordActionsSlotKeys = computed(() =>
+    fieldKeys.value.filter((key) => !!slots[`edit-password-actions(${key})`]),
+);
 const tabContentSlotKeys = computed(() =>
     tabKeys.value.filter((key) => !!slots[`tab-content(${key})`]),
 );

package/resources/js/composables/useForm.ts

@@ -1,11 +1,13 @@
 import {
     reactive,
     computed,
+    markRaw,
     toRaw,
     type ComputedRef,
     type WritableComputedRef,
 } from "vue";
 import { api, type ApiError } from "../utils/api";
+import { getByPath } from "../utils/objectPath";
 
 export interface ValidationErrors {
     [key: string]: string[];
@@ -24,6 +26,29 @@ export interface SubmitFailure {
     message: string;
     /** 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.
+     */
+    failedRows?: Record<string, FailedRow>;
+}
+
+/** One row a failed submit's errors named (see `SubmitFailure.failedRows`). */
+export interface FailedRow {
+    /**
+     * The row object itself (raw, not a reactive proxy), so its current
+     * index can be found by identity. A row array replaced wholesale (a
+     * reload) holds new objects, and the row then counts as gone.
+     */
+    row: object;
+    /**
+     * A copy of the row taken when the submit failed, for labels: a row's
+     * name (`rowLabel`) reads it, so later edits do not rename the error.
+     */
+    snapshot: Record<string, any>;
 }
 
 export interface FormSubmitOptions<TPayload = unknown, TResponse = unknown> {
@@ -222,6 +247,42 @@ 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).
+ */
+function snapshotRow(row: object): Record<string, any> {
+    try {
+        return structuredClone(row) as Record<string, any>;
+    } catch {
+        return { ...(row as 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.
+ */
+function failedRowsFor(
+    errors: ValidationErrors,
+    data: Record<string, any>,
+): Record<string, FailedRow> | undefined {
+    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) });
+        }
+    }
+    return Object.keys(rows).length > 0 ? rows : undefined;
+}
+
 function errorsFromLaravel(error: any): {
     errors: ValidationErrors;
     message: string;
@@ -523,6 +584,13 @@ export function useForm<TData extends Record<string, any>>(
                     setErrors(errors);
                     setMessage(message);
                     if (failure) {
+                        const failedRows = failedRowsFor(
+                            failure.errors,
+                            toRaw(state.data) as Record<string, any>,
+                        );
+                        if (failedRows !== undefined) {
+                            failure.failedRows = failedRows;
+                        }
                         state.submitFailure = failure;
                         state.failedSubmitCount += 1;
                     }

package/resources/js/composables/useResourceEditor.ts

@@ -7,6 +7,7 @@ import {
     resolveFieldDefault,
     isFieldVisible as isFieldVisibleFor,
     isSubmittableField,
+    nonSubmittedFieldKeys as nonSubmittedFieldKeysFor,
 } from "../utils/formSchema";
 
 /**
@@ -207,24 +208,67 @@ export function useResourceEditor<T = any>(
     // Enforced at SUBMIT, not just at seeding: the modal still renders every field,
     // so a `submit: false` control — or a `span` slot calling `update` — can write
     // its key back into the form data after seeding. Strip them on the way out.
-    const nonSubmittedFieldKeys = computed(
-        () =>
-            new Set(
-                (props.editFields ?? [])
-                    .filter(
-                        (field) =>
-                            // Presentational: lays the form out, holds no data (#110).
-                            !isSubmittableField(field) ||
-                            // Hidden by `when` at submit time (#117). Submitting a field
-                            // the user cannot see is a silent write — and with `default`
-                            // set it writes a value they never chose. Omitting the key
-                            // leaves the stored value alone.
-                            !isEditFieldVisible(field),
-                    )
-                    .map((field) => field.key),
-            ),
+    //
+    // Decided per KEY (#228): a key is dropped only when no field with that key
+    // is both submitting and visible at submit time. A presentational field
+    // (#110) holds no data, and a field hidden by `when` (#117) must not write a
+    // value the user cannot see — but a display-only twin sharing its key with
+    // the visible editable field must not strip the editable field's value.
+    const nonSubmittedFieldKeys = computed(() =>
+        nonSubmittedFieldKeysFor(props.editFields ?? [], isEditFieldVisible),
     );
 
+    /*
+     * Seed the form's data, ONE value per key (#228). Presentational fields are
+     * never seeded. When several submitting fields share a key (alternative
+     * controls for one value, switched by `when`), the key is seeded from the
+     * first of them that is visible against the seeded model, else the first
+     * declared. This used to be last-declared-wins, so a hidden alternative
+     * declared after the visible field replaced its default.
+     *
+     * Two submitting fields with one key that are visible TOGETHER are almost
+     * certainly a mistake (two controls bound to one value): the first declared
+     * wins, and DXTable warns once per key.
+     */
+    const warnedSharedVisibleKeys = new Set<string>();
+    const seedFormData = (
+        valueFor: (field: FieldDefinition) => any,
+        context: Record<string, any>,
+    ): Record<string, any> => {
+        const fieldsByKey = new Map<string, FieldDefinition[]>();
+        submittableEditFields.value.forEach((field) => {
+            const sharing = fieldsByKey.get(field.key);
+            if (sharing) sharing.push(field);
+            else fieldsByKey.set(field.key, [field]);
+        });
+
+        const formData: Record<string, any> = {};
+        fieldsByKey.forEach((fields, key) => {
+            formData[key] = valueFor(fields[0]);
+        });
+
+        const seededModel = { ...context, ...formData };
+        fieldsByKey.forEach((fields, key) => {
+            if (fields.length < 2) return;
+            const visibleFields = fields.filter((field) =>
+                isFieldVisibleFor(field, seededModel),
+            );
+            if (visibleFields.length > 1 && !warnedSharedVisibleKeys.has(key)) {
+                warnedSharedVisibleKeys.add(key);
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `[DXTable] ${visibleFields.length} submitting edit fields share the key "${key}" and are visible together, ` +
+                        'so they edit one value; the first declared seeds it. ' +
+                        'Give alternatives mutually exclusive `when` predicates, or mark a display-only one `submit: false`.',
+                );
+            }
+            if (visibleFields.length > 0 && visibleFields[0] !== fields[0]) {
+                formData[key] = valueFor(visibleFields[0]);
+            }
+        });
+        return formData;
+    };
+
     const stripNonSubmittedFields = (data: Record<string, any>): Record<string, any> => {
         if (nonSubmittedFieldKeys.value.size === 0) return data;
         return Object.fromEntries(
@@ -265,11 +309,9 @@ export function useResourceEditor<T = any>(
         // between successive row opens. Presentational fields (submit: false)
         // lay the form out; they hold no data and must not be POSTed just
         // because they were declared.
-        const formData: Record<string, any> = {};
-        submittableEditFields.value.forEach(field => {
-            formData[field.key] = seedValueFor(field, item);
-        });
-        startSession(formData);
+        startSession(
+            seedFormData((field) => seedValueFor(field, item), item as any),
+        );
 
         // Open modal
         editFormInstanceKey.value++;
@@ -332,11 +374,7 @@ export function useResourceEditor<T = any>(
         editLoading.value = false;
 
         // A fresh form seeded with the field defaults (see `startSession`).
-        const formData: Record<string, any> = {};
-        submittableEditFields.value.forEach(field => {
-            formData[field.key] = resolveFieldDefault(field);
-        });
-        startSession(formData);
+        startSession(seedFormData(resolveFieldDefault, {}));
         editFormInstanceKey.value++;
         showEditModal.value = true;
     };

package/resources/js/index.ts

@@ -148,6 +148,8 @@ export type {
     FormTab,
     MaybeFn,
     OptionsLoader,
+    PasswordActionsSlotProps,
+    EditPasswordActionsSlotProps,
     // Strict, discriminated field types (#131) — opt-in; canonical in a future
     // major. `FieldDef` is the union; the rest are its per-type members.
     FieldDef,
@@ -178,6 +180,7 @@ export type {
     FormState,
     UseFormReturn,
     SubmitFailure,
+    FailedRow,
 } from "./composables/useForm";
 
 export type {