@omnitend/dashboard-for-laravel 0.46.0 → 0.47.1

package/dist/types/index.d.ts

@@ -215,6 +215,19 @@ export interface FieldDefinition {
      * `FormFieldDefinition` re-declares this as required for inference.)
      */
     default?: any;
+    /**
+     * 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
+     * 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 `""`
+     * (a row with no name yet), or throwing, keeps the line-number label.
+     * Only labels: which field owns the error, and what a click on the
+     * summary row focuses, are unchanged.
+     */
+    rowLabel?: (row: Record<string, any>, index: number) => string | null | undefined;
     /** Label for a repeater's "add row" button (default: "Add"). */
     addLabel?: string;
     /** Minimum / maximum number of repeater rows. */
@@ -295,6 +308,10 @@ export interface FieldDefinition {
      * every `editFields` key, so those decorative fields are POSTed alongside
      * the real ones (an empty string, an empty array) purely because they were
      * declared.
+     *
+     * Applies per KEY (#228): DXTable drops a key only when no field with that
+     * key is both submitting and visible, so a `submit: false` display twin
+     * does not strip the value of a visible editable field sharing its key.
      */
     submit?: boolean;
     /**
@@ -342,6 +359,8 @@ export interface BaseFieldDef {
     plaintext?: MaybeFn<boolean>;
     submit?: boolean;
     errorKeys?: string[];
+    /** On a repeater, or a span field that renders its own rows. */
+    rowLabel?: (row: Record<string, any>, index: number) => string | null | undefined;
     when?: MaybeFn<boolean>;
     show?: () => boolean;
 }
@@ -488,6 +507,51 @@ export interface FormTab {
     /** Lazily mount tab content until first activated */
     lazy?: boolean;
 }
+/**
+ * Slot props of DXField's `password-actions` slot (DXForm:
+ * `password-actions(<key>)`): content placed beside a password input, such as
+ * a "Generate password" button. It renders after the input group (the input
+ * and the reveal (eye) toggle), in `.dx-password-field__actions`, and wraps
+ * onto its own line below the input when the row is too narrow to keep
+ * `--dx-password-input-min-width`. `setRevealed` drives the same state the
+ * eye toggles.
+ *
+ * ```vue
+ * <template #password-actions(password)="{ update, setRevealed, disabled }">
+ *   <DButton variant="secondary" :disabled="disabled"
+ *     @click="update(generatePassword()); setRevealed(true)">Generate</DButton>
+ * </template>
+ * ```
+ */
+export interface PasswordActionsSlotProps {
+    /** The field definition being rendered. */
+    field: FieldDefinition;
+    /** The model passed to field predicates (defaults to the live form data). */
+    model: any;
+    /** The current field value. */
+    value: any;
+    /** Write a new value (also marks the field touched and clears its error). */
+    update: (value: any) => void;
+    /** Whether the password is currently shown as plain text. */
+    revealed: boolean;
+    /**
+     * Show (`true`) or mask (`false`) the password, exactly as the eye does.
+     * A no-op on a `revealable: false` field, which never unmasks.
+     */
+    setRevealed: (revealed: boolean) => void;
+    /** Whether the field is disabled or read-only. */
+    disabled: boolean;
+}
+/**
+ * Slot props of DXTable's `edit-password-actions(<key>)` slot, the edit/create
+ * modal's form of {@link PasswordActionsSlotProps}. `item` is the row being
+ * edited, `null` in create mode. (`model` is not passed, as with the modal's
+ * other field slots.)
+ */
+export interface EditPasswordActionsSlotProps extends Omit<PasswordActionsSlotProps, "model"> {
+    /** The row being edited; `null` in create mode. */
+    item: any;
+}
 /**
  * The theme's extra colour variant, `pending`: waiting, and the next move is
  * not yours ("awaiting payment", "sent to printer, not yet confirmed").

package/dist/utils/formErrorTargets.d.ts

@@ -1,18 +1,17 @@
-/**
- * Which field a validation-error key belongs to (#194).
- *
- * One pure function decides, so the error summary's rows, the tab a failed
- * submit selects and the field it scrolls to can never disagree. No Vue: the
- * caller injects visibility and label resolution, so DXForm can pass its own
- * `when`/`context`-aware predicates and a standalone summary can use the
- * defaults below.
- */
 import type { FieldDefinition, FormTab } from "../types";
-import type { ValidationErrors } from "../composables/useForm";
+import type { FailedRow, ValidationErrors } from "../composables/useForm";
 /** One error key and where it belongs. */
 export interface ErrorTarget {
     /** The key as the server sent it (`lines.0.price`). */
     errorKey: string;
+    /**
+     * 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.
+     */
+    focusKey?: string;
     /** The server's messages for that key, as sent. */
     messages: string[];
     /**
@@ -25,7 +24,10 @@ export interface ErrorTarget {
     fieldKey: string | null;
     /** The tab holding the owning field, or `null` (flat form, or unowned). */
     tabKey: string | null;
-    /** A readable name for the key: "Price (line 1)", "Delivery date". */
+    /**
+     * A readable name for the key: "Price (line 1)", "Delivery date", or a
+     * row's own name from the field's `rowLabel`.
+     */
     label: string;
 }
 export interface ResolveErrorTargetsOptions {
@@ -52,6 +54,14 @@ export interface ResolveErrorTargetsOptions {
      * humanised key, so a broken label can never hide an error.
      */
     resolveLabel?: (field: FieldDefinition, labelModel: Record<string, any>) => string | null | undefined;
+    /**
+     * The rows a failed submit's errors named, as captured then
+     * (`SubmitFailure.failedRows`). Pass it when resolving that failure's
+     * errors after the form may have changed (the error summary does), so a
+     * row error keeps the name of the row that failed and points at where
+     * that row is now. Leave it out for the form's live errors.
+     */
+    failedRows?: Record<string, FailedRow>;
 }
 /**
  * `delivery_date` → "Delivery date"; `lines.0.price` → "Lines price (line 1)".
@@ -75,7 +85,11 @@ export declare function humaniseErrorKey(key: string): string;
  *
  * Labels: the owning field's label; for `field.N.sub` the sub-field's label
  * (when the field defines `fields` and one has that key) or the field's own,
- * plus "(line N+1)"; for any other nested key (a media map's
+ * plus "(line N+1)" — unless the field's `rowLabel` names that row, when
+ * the row's name is the whole label. With `failedRows`, a row key's label
+ * reads the row as it was when the submit failed, and its `focusKey` and
+ * line number follow that row to where it is now (see `ownedTarget`); for
+ * any other nested key (a media map's
  * `image_media.<uuid>`) the field's label. An unowned key is humanised.
  *
  * Display lines: "Label: message", except that the label is left off when

package/dist/utils/formSchema.d.ts

@@ -57,3 +57,19 @@ export declare function isFieldVisible(field: {
 export declare function isSubmittableField(field: {
     submit?: boolean;
 }): boolean;
+/**
+ * The payload keys to drop on submit: every field key for which NO field with
+ * that key is both submittable (`submit !== false`) and visible (#228).
+ *
+ * Decided per KEY, across all the fields that share it, never per field. Two
+ * fields may share a key: an editable select plus a read-only display twin
+ * (`submit: false`) that shows instead for system-created rows. Stripping a
+ * key because ONE of its fields is presentational or hidden removed it from
+ * every save, including while the select was the visible field in use. A key
+ * whose fields are all presentational (#110) or all hidden (#117) is still
+ * dropped.
+ */
+export declare function nonSubmittedFieldKeys<TField extends {
+    key: string;
+    submit?: boolean;
+}>(fields: readonly TField[], isVisible: (field: TField) => boolean): Set<string>;

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-10-15T11:16:01.160Z",
+  "generated": "2026-10-21T13:01:22.201Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.46.0"
+    "version": "0.47.1"
   },
   "components": {
     "base": [
@@ -2118,7 +2118,7 @@
         "name": "DXField",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXField.vue",
-        "description": "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. Structure (#135): a thin DISPATCHER. The shared chrome (label + validation feedback + hint + help + info) lives in `DXFieldShell`; the numeric controls (currency/percentage/number) in `DXNumericField`; the choice controls (select/searchable/radio/checkbox-group) in `DXChoiceField`; and the async option loading in the `useAsyncOptions` composable. This file decides which control to render inside the shell by `field.type`. None of those pieces are exported — they exist only to keep this component factored.",
+        "description": "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 (currency/percentage/number) in `DXNumericField`; the choice controls (select/searchable/radio/checkbox-group) in `DXChoiceField`; and the async option loading in the `useAsyncOptions` composable. This file decides which control to render inside the shell by `field.type`. None of those pieces are exported — they exist only to keep this component factored.",
         "props": [
           {
             "name": "field",
@@ -2205,7 +2205,7 @@
                   "name": "(value: any) => void"
                 },
                 "name": "update",
-                "description": "Setter that writes the value back and clears the field's validation error."
+                "description": "Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (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."
+                "description": "Setter that writes the value back and clears the field's validation error, and any error under `<key>.` (rows the slot draws itself)."
               }
             ]
           },
@@ -2317,6 +2317,64 @@
             "name": "repeater-row",
             "description": "Custom layout for a single repeater row, forwarded to `DXRepeater`'s `row` slot with its row props (row index, item, remove handler, etc.).",
             "bindings": []
+          },
+          {
+            "name": "password-actions",
+            "description": "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.",
+            "bindings": [
+              {
+                "title": "binding",
+                "type": {
+                  "name": "FieldDefinition"
+                },
+                "name": "field",
+                "description": "The field definition being rendered."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "any"
+                },
+                "name": "model",
+                "description": "The model passed to field predicates (defaults to the live form data)."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "any"
+                },
+                "name": "value",
+                "description": "The current field value."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "(value: any) => void"
+                },
+                "name": "update",
+                "description": "Setter that writes the value back and clears the field's validation error."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "revealed",
+                "description": "Whether the password is currently shown as plain text."
+              },
+              {
+                "name": "set-revealed",
+                "title": "binding"
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "disabled",
+                "description": "Whether the field is disabled or read-only, so actions that change the value can disable themselves."
+              }
+            ]
           }
         ],
         "methods": []
@@ -2796,7 +2854,7 @@
         "name": "DXFormField",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXFormField.vue",
-        "description": "DXFormField — internal per-field renderer for DXForm. 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. 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 prop had to be added to both, which was easy to miss (see #78/#83). DXForm forwards all of its slots into each instance; this component only reads the ones matching its field's key. Internal: not exported from the package index — consumers use DXForm.",
+        "description": "DXFormField — internal per-field renderer for DXForm. 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`/ `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 prop had to be added to both, which was easy to miss (see #78/#83). DXForm forwards all of its slots into each instance; this component only reads the ones matching its field's key. Internal: not exported from the package index — consumers use DXForm.",
         "props": [
           {
             "name": "field",
@@ -4126,7 +4184,7 @@
         "name": "DXTableEditorModal",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXTableEditorModal.vue",
-        "description": "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` 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. The edit-modal slots reach here forwarded from DXTable (consumer → DXTable → here → DXForm). This component computes which keyed slots the consumer actually provided from its OWN `$slots`, so the slot-plumbing lives entirely with the modal, not the composable.",
+        "description": "Internal edit/create modal for `DXTable` (#129). Renders the `DModal` + `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. The edit-modal slots reach here forwarded from DXTable (consumer → DXTable → here → DXForm). This component computes which keyed slots the consumer actually provided from its OWN `$slots`, so the slot-plumbing lives entirely with the modal, not the composable.",
         "props": [
           {
             "name": "show",
@@ -4373,6 +4431,68 @@
               }
             ]
           },
+          {
+            "name": "`edit-password-actions(${key})`",
+            "description": "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>)`.",
+            "bindings": [
+              {
+                "name": "name",
+                "title": "binding"
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "item",
+                "description": "The row being edited (null in create mode)."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "any"
+                },
+                "name": "value",
+                "description": "The current field value."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "Function"
+                },
+                "name": "update",
+                "description": "Call with a new value to update the field."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "revealed",
+                "description": "Whether the password is currently shown as plain text."
+              },
+              {
+                "name": "set-revealed",
+                "title": "binding"
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "disabled",
+                "description": "Whether the field is disabled or read-only."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "field",
+                "description": "The field definition."
+              }
+            ]
+          },
           {
             "name": "`tab-content(${key})`",
             "description": "Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-10-15T11:16:01.216Z
+> Last updated: 2026-10-21T13:01:22.256Z
 
 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.46.0",
+  "version": "0.47.1",
   "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

@@ -1644,6 +1644,81 @@ $dx-monospace-elements: "code, kbd, samp, pre";
   font-family: var(--dx-font-family-figures), var(--bs-font-monospace);
 }
 
+// ----------------------------------------------------------------------------
+// DXField password fields: the eye as part of the input, actions that wrap
+// ----------------------------------------------------------------------------
+//
+// The reveal (eye) toggle is drawn as part of the field: the input's border
+// colour, radius and background, a muted icon, and the input's own focus
+// treatment (navy border + halo). As a plain `outline-secondary` button it was
+// a darker, square-cornered box stuck to a light rounded input. Driven through
+// Bootstrap's `--bs-btn-*` variables, so hover/active/focus keep Bootstrap's
+// resolution order. `.btn.` lifts it over `.btn-outline-secondary`.
+//
+// A `password-actions` slot (a Generate button) sits AFTER the input group,
+// not in it, with a gap: it is an ordinary button beside the field rather than
+// a third piece of the control. The group asks for room for
+// `--dx-password-input-min-width` of input plus the square eye; when the row
+// cannot give the group that AND the actions, the actions wrap onto their own
+// line below it, so the input never shrinks to a couple of characters. The
+// group still has `min-width: 0`: in a container narrower than the minimum it
+// shrinks rather than overflowing.
+$dx-password-input-min-width: 11rem !default;
+$dx-password-actions-gap: 0.5rem !default;
+
+:root {
+  --dx-password-input-min-width: #{$dx-password-input-min-width};
+}
+
+.btn.dx-password-reveal {
+  --bs-btn-color: var(--bs-secondary-color);
+  --bs-btn-bg: #{$input-bg};
+  --bs-btn-border-color: var(--d-input-border-color);
+  --bs-btn-border-radius: #{$input-border-radius};
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-bg: var(--bs-tertiary-bg);
+  --bs-btn-hover-border-color: var(--d-input-border-color);
+  --bs-btn-active-color: var(--bs-body-color);
+  --bs-btn-active-bg: var(--bs-tertiary-bg);
+  --bs-btn-active-border-color: var(--d-input-border-color);
+  --bs-btn-focus-box-shadow: #{$input-focus-box-shadow};
+
+  &:focus-visible {
+    border-color: $input-focus-border-color;
+  }
+}
+
+// Disabled with its field: the disabled input's fill and border, not the
+// neutral outline-button look (`.btn:is(:disabled)` below), so the eye still
+// reads as part of the greyed-out control. `.input-group >` outranks that rule.
+.input-group > .btn.dx-password-reveal:is(:disabled, .disabled),
+fieldset:disabled .input-group > .btn.dx-password-reveal {
+  --bs-btn-disabled-bg: #{$input-disabled-bg};
+  --bs-btn-disabled-color: var(--bs-secondary-color);
+  --bs-btn-disabled-border-color: var(--d-input-border-color);
+}
+
+.dx-password-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: $dx-password-actions-gap;
+
+  > .dx-password-field__group {
+    // The eye is an icon-only square, `--dx-input-height` wide.
+    flex: 1 1 calc(var(--dx-password-input-min-width) + var(--dx-input-height));
+    min-width: 0;
+  }
+}
+
+.dx-password-field__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $dx-password-actions-gap;
+  min-width: 0;
+  max-width: 100%;
+}
+
 // ----------------------------------------------------------------------------
 // DXCurrencyInput — keep the amount usable in a narrow container
 // ----------------------------------------------------------------------------