@omnitend/dashboard-for-laravel 0.42.2 → 0.44.0

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

@@ -0,0 +1,232 @@
+<!--
+  @component DXFormErrorSummary
+  Lists everything the last failed submit of a `useForm` returned: a heading,
+  then one row per validation message with a readable label ("Price (line 1):
+  Must be positive."). The heading is `title` ("Couldn't save. Please
+  check:") when the failure has field errors, and the server's message when
+  it has none (a message-only 422, a 500, a network failure), since then the
+  message is all there is. Built from `form.submitFailure`, so it survives
+  field edits and `clearError`, and disappears when the next submit starts or
+  one succeeds. Renders nothing before a failure. A row whose key belongs to a
+  visible field is a button that emits `select-target`, for the host to select
+  the field's tab and focus it; a key no visible field owns is listed as plain
+  text, after the owned rows, under `otherTitle` ("Other problems") when both
+  kinds are present. Place it next to the submit control.
+-->
+<template>
+    <!-- A real element owns the class: DAlert's root is a transition, so a
+         class on it is not a reliable host for the theme rules. BAlert
+         supplies role="alert" + aria-live="assertive"; keying it by the
+         failure count remounts it, so every new failure is announced once. -->
+    <div v-if="failure" class="dx-form-error-summary">
+        <DAlert :key="resolvedForm.failedSubmitCount" variant="danger">
+            <p class="dx-form-error-summary__message">{{ heading }}</p>
+            <!-- Rows a field owns (buttons that go to it), then rows no field
+                 owns (text). The sub-heading only says "these are the rest"
+                 when there is a first list for them to be the rest of. A
+                 <p>, not a heading element: it must not enter the page
+                 outline. -->
+            <template v-for="group in groups" :key="group.key">
+                <p
+                    v-if="group.title !== null"
+                    class="dx-form-error-summary__other-title"
+                >
+                    {{ group.title }}
+                </p>
+                <ul class="dx-form-error-summary__list">
+                    <li
+                        v-for="row in group.rows"
+                        :key="row.id"
+                        class="dx-form-error-summary__item"
+                    >
+                        <button
+                            v-if="row.fieldKey !== null"
+                            type="button"
+                            class="dx-form-error-summary__target"
+                            :data-dx-error-key="row.errorKey"
+                            @click="selectRow(row)"
+                        >
+                            {{ row.text }}
+                        </button>
+                        <span v-else :data-dx-error-key="row.errorKey">{{ row.text }}</span>
+                    </li>
+                </ul>
+            </template>
+        </DAlert>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DAlert from "../base/DAlert.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { DefineFormReturn } from "../../composables/defineForm";
+import type { FieldDefinition, FormTab } from "../../types";
+import {
+    resolveErrorTargets,
+    type ErrorTarget,
+} from "../../utils/formErrorTargets";
+
+/** What a summary row points at (emitted by `select-target`). */
+export interface ErrorSummarySelection {
+    /** The owning field's key. */
+    fieldKey: string;
+    /** The tab holding that field, or `null` in a flat form. */
+    tabKey: string | null;
+    /** The error key as the server sent it. */
+    errorKey: string;
+}
+
+interface Props {
+    /** The form: a `useForm` return or a `defineForm` return. */
+    form: UseFormReturn<any> | DefineFormReturn<any>;
+    /** Field definitions (optional when `form` is a defineForm return). */
+    fields?: FieldDefinition[];
+    /** The form's tabs, so rows follow tab order and know their tab. */
+    tabs?: FormTab[];
+    /**
+     * Extra context merged under the form data when evaluating `when` and
+     * function labels, as on DXForm.
+     */
+    context?: Record<string, any>;
+    /**
+     * Field visibility, replacing the default (`when`/`show` against form
+     * data + `context`). A host form passes its own predicate so the summary
+     * agrees with what it renders.
+     */
+    isFieldVisible?: (field: FieldDefinition) => boolean;
+    /** Tab visibility, replacing the default (the tab's `when`). */
+    isTabVisible?: (tab: FormTab) => boolean;
+    /**
+     * A field's label, replacing the default (its `label`, resolved against
+     * `labelModel`: the form model, or the row for a repeater sub-field).
+     */
+    resolveLabel?: (
+        field: FieldDefinition,
+        labelModel: Record<string, any>,
+    ) => string | null | undefined;
+    /**
+     * Rows already resolved by the host (from `resolveErrorTargets` over
+     * `form.submitFailure.errors`). When given, the summary lists these and
+     * resolves nothing itself; the message still comes from
+     * `form.submitFailure`, and nothing renders while that is null.
+     */
+    targets?: ErrorTarget[] | null;
+    /**
+     * The heading when the failure has at least one field error. The
+     * server's own message is not used then: Laravel's default 422 message
+     * is the first error plus "(and N more errors)", which repeats the first
+     * row. A failure with no field errors (a message-only 422, a 500, a
+     * network failure) keeps the server's message as the heading, as it is
+     * the only information.
+     */
+    title?: string;
+    /**
+     * The sub-heading over the rows no visible field owns, listed after the
+     * owned rows. Shown only when there are both kinds; when no row is owned
+     * they are listed under the heading alone.
+     */
+    otherTitle?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: "Couldn't save. Please check:",
+    otherTitle: "Other problems",
+});
+
+const emit = defineEmits<{
+    /** A row was clicked: select `tabKey` (if any) and focus `fieldKey`. */
+    "select-target": [selection: ErrorSummarySelection];
+}>();
+
+function isDefineForm(value: Props["form"]): value is DefineFormReturn<any> {
+    return (
+        !!value &&
+        typeof value === "object" &&
+        "form" in value &&
+        "fields" in value &&
+        !("data" in value)
+    );
+}
+
+const resolvedForm = computed<UseFormReturn<any>>(() =>
+    isDefineForm(props.form) ? props.form.form : props.form,
+);
+
+const resolvedFields = computed<FieldDefinition[]>(() => {
+    if (props.fields) return props.fields;
+    if (isDefineForm(props.form)) return props.form.fields;
+    return [];
+});
+
+const failure = computed(() => resolvedForm.value.submitFailure ?? null);
+
+const targets = computed<ErrorTarget[]>(() => {
+    if (!failure.value) return [];
+    if (props.targets) return props.targets;
+    return resolveErrorTargets(failure.value.errors, {
+        fields: resolvedFields.value,
+        tabs: props.tabs,
+        model: { ...(props.context ?? {}), ...resolvedForm.value.data },
+        isFieldVisible: props.isFieldVisible,
+        isTabVisible: props.isTabVisible,
+        resolveLabel: props.resolveLabel,
+    });
+});
+
+interface Row {
+    id: string;
+    text: string;
+    errorKey: string;
+    fieldKey: string | null;
+    tabKey: string | null;
+}
+
+const rows = computed<Row[]>(() =>
+    targets.value.flatMap((target) =>
+        target.lines.map((text, index) => ({
+            id: `${target.errorKey}#${index}`,
+            text,
+            errorKey: target.errorKey,
+            fieldKey: target.fieldKey,
+            tabKey: target.tabKey,
+        })),
+    ),
+);
+
+const heading = computed(() =>
+    rows.value.length > 0 ? props.title : (failure.value?.message ?? ""),
+);
+
+interface RowGroup {
+    key: "owned" | "other";
+    /** The sub-heading above the list, or `null` for none. */
+    title: string | null;
+    rows: Row[];
+}
+
+/** Owned rows, then unowned ones (labelled only when both are present). */
+const groups = computed<RowGroup[]>(() => {
+    const owned = rows.value.filter((row) => row.fieldKey !== null);
+    const other = rows.value.filter((row) => row.fieldKey === null);
+    const result: RowGroup[] = [];
+    if (owned.length > 0) result.push({ key: "owned", title: null, rows: owned });
+    if (other.length > 0) {
+        result.push({
+            key: "other",
+            title: owned.length > 0 ? props.otherTitle : null,
+            rows: other,
+        });
+    }
+    return result;
+});
+
+function selectRow(row: Row): void {
+    if (row.fieldKey === null) return;
+    emit("select-target", {
+        fieldKey: row.fieldKey,
+        tabKey: row.tabKey,
+        errorKey: row.errorKey,
+    });
+}
+</script>

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

@@ -17,12 +17,18 @@
 -->
 <template>
   <!-- Full replacement slot bypasses DXField entirely (mirrors tab-content):
-       also supersedes field-before/field-after for the same key. -->
+       also supersedes field-before/field-after for the same key. Rendered
+       as-is, with no wrapper (#194): `targetAttrs` is the marker DXForm
+       looks for to scroll to and focus a field after a failed submit, and
+       the consumer opts in by binding it (`v-bind="targetAttrs"`) on the
+       element holding the control. DXForm looks the marker up when it
+       needs it (a summary click, auto-scroll), never ahead of time. -->
   <slot
     v-if="$slots[`field(${field.key})`]"
     :name="`field(${field.key})`"
     :field="field"
     :model="model"
+    :targetAttrs="targetAttrs"
   />
   <template v-else>
     <!-- Content inserted directly above the field. -->
@@ -52,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import DXField from "./DXField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, LabelCols } from "../../types";
@@ -73,6 +79,9 @@ interface Props {
 const props = defineProps<Props>();
 const slots = useSlots();
 
+/** What a `field(<key>)` slot binds to opt in to scroll/focus (#194). */
+const targetAttrs = computed(() => ({ "data-dx-field-key": props.field.key }));
+
 /**
  * Map a DXField slot name to this field's keyed parent slot, when present.
  * A plain function (re-read each render) rather than a computed, so a slot the

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

@@ -150,6 +150,7 @@ import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition } from "../../types";
 import { getByPath, setByPath } from "../../utils/objectPath";
 import { resolveFieldDefault } from "../../utils/formSchema";
+import { humaniseErrorKey } from "../../utils/formErrorTargets";
 
 interface Props {
     /** Form instance owning the repeater array */
@@ -177,12 +178,37 @@ const minItems = computed(() => props.field.minItems ?? 0);
 const maxItems = computed(() => props.field.maxItems);
 const softDeleteKey = computed(() => props.field.softDeleteKey);
 
-/** Column header text for a sub-field. No specific row context exists for a
- *  header, so a function-valued label resolves against the outer model. */
+/**
+ * The model a column header's function label is called with. Row fields
+ * resolve their labels against the ROW (as does the error summary), so a
+ * header uses the first visible row, layered over the outer model so a label
+ * that reads outer context (a currency on the parent form) still works. With
+ * no rows it is the outer model alone.
+ */
+const headerModel = computed<Record<string, any>>(() => {
+    const firstRow = visibleRows.value[0]?.row;
+    return {
+        ...(props.model ?? {}),
+        ...(firstRow !== null && typeof firstRow === "object" ? firstRow : {}),
+    };
+});
+
+/** Column header text for a sub-field. A label function that throws (a row
+ *  property it expects is missing) or returns nothing falls back to the
+ *  humanised key, the same fallback the error summary uses, so a header can
+ *  never break the table. */
 function headerLabel(subField: FieldDefinition): string {
     const label = subField.label;
-    if (typeof label === "function") return label(props.model ?? {});
-    return label || subField.key;
+    if (typeof label !== "function") return label || subField.key;
+    let resolved: unknown;
+    try {
+        resolved = label(headerModel.value);
+    } catch {
+        resolved = undefined;
+    }
+    return typeof resolved === "string" && resolved.trim() !== ""
+        ? resolved
+        : humaniseErrorKey(subField.key);
 }
 
 // ————————————————— table/cards responsive fallback (#68 follow-up)

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

@@ -0,0 +1,264 @@
+<template>
+    <!--
+      The wrapper is what gets measured, never the table: a table that is
+      overflowing is WIDER than the space it has, so measuring it would never
+      report "too narrow". The wrapper is also a horizontal scroll container
+      (like Bootstrap's `.table-responsive`, which it replaces), which makes its
+      own width the available width even inside a flex row.
+    -->
+    <div
+        ref="containerRef"
+        class="dx-stacking-table"
+        :class="{ 'dx-stacking-table--stacked': isStacked }"
+    >
+        <!--
+          @slot The consumer's own `<table>`, as the wrapper's direct child.
+          Receives `stacked` for the rare markup that must differ per layout.
+        -->
+        <slot :stacked="isStacked" />
+    </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * DXStackingTable — a hand-built `<table>` that turns into one card per body
+ * row when the space it has (not the window) falls below `stackBelow`.
+ *
+ * Built for editable tables inside forms and modals (an order's lines: name,
+ * price input, quantity input, total), where inputs run off a phone's edge. The
+ * consumer keeps writing ordinary table markup; this wrapper measures itself
+ * with `useContainerWidth`, toggles `.dx-stacking-table--stacked`, and gives
+ * every body and footer cell its column's header text as a label (written to
+ * `data-dx-stack-label`, shown by theme.scss as the cell's `::before`). The
+ * stacked styling is global theme CSS, because slot content cannot see a
+ * component's scoped styles.
+ *
+ * Per-cell controls (all inert in the wide layout):
+ * - `data-label="…"` on a `th` or a cell overrides the derived label.
+ * - `.dx-stack-span` on a cell: no label, full card width (a card title).
+ *   Cells spanning several columns (`colspan`) get no label and span anyway.
+ * - `.dx-stack-hide` on a cell: not shown when stacked. Empty cells with no
+ *   label (a footer's `&nbsp;` filler) are hidden automatically.
+ * - `.dx-stack-continue` on a `tr`: joins the previous row's card (a note row
+ *   under a line) instead of starting a new one.
+ */
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import { useContainerWidth } from "../../composables/useContainerWidth";
+
+interface Props {
+    /**
+     * Stack when the wrapper's content width is below this many px. 576 is
+     * Bootstrap's `sm` breakpoint, but measured on the container.
+     */
+    stackBelow?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    stackBelow: 576,
+});
+
+/** Attribute the derived label is written to (so a consumer `data-label` is never overwritten). */
+const DERIVED_LABEL_ATTRIBUTE = "data-dx-stack-label";
+/** Marks an empty cell that has no label, which the stacked layout hides. */
+const EMPTY_CELL_ATTRIBUTE = "data-dx-stack-empty";
+/** Header content that is not the column's visible name. */
+const HIDDEN_HEADER_CONTENT =
+    '.visually-hidden, .visually-hidden-focusable, [aria-hidden="true"]';
+
+const { containerRef, isBelow } = useContainerWidth({
+    threshold: () => props.stackBelow,
+    // Same band as DXForm's auto layout, for the same reason: the stacked
+    // layout is TALLER, so inside an `overflow:auto` ancestor it can add a
+    // scrollbar and change its own container's width at the boundary. 24px is
+    // wider than any scrollbar, so a crossing holds until the space genuinely
+    // changes.
+    hysteresis: 24,
+});
+
+/**
+ * Stacked until measured, like DXForm's `layout="auto"` (which renders its
+ * vertical layout before the first measurement and under SSR): a stacked table
+ * is legible at any width, a wide one guessed wrongly overflows. In a browser
+ * the first ResizeObserver delivery lands before the first paint, so a wide
+ * container does not visibly flash the cards.
+ */
+const isStacked = computed<boolean>(() => isBelow.value);
+
+/** The column's visible name: `data-label`, else its text minus hidden helpers. */
+function headerCellLabel(headerCell: HTMLTableCellElement): string {
+    const explicitLabel = headerCell.getAttribute("data-label");
+    if (explicitLabel !== null) return explicitLabel.trim();
+
+    let text = "";
+    const walker = document.createTreeWalker(headerCell, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node !== null) {
+        // Only hiding INSIDE the header cell counts; an ancestor of the whole
+        // table being aria-hidden says nothing about this column's name.
+        const hiddenWrapper =
+            node.parentElement?.closest(HIDDEN_HEADER_CONTENT) ?? null;
+        const isHidden =
+            hiddenWrapper !== null &&
+            hiddenWrapper !== headerCell &&
+            headerCell.contains(hiddenWrapper);
+        if (!isHidden) text += ` ${node.textContent ?? ""}`;
+        node = walker.nextNode();
+    }
+    return text.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * The first column of every cell in a row group, accounting for cells from
+ * earlier rows that reach down into a row (`rowspan`) as well as `colspan`:
+ * the table's own grid, not each row's cell index.
+ */
+function cellStartColumns(
+    rows: HTMLCollectionOf<HTMLTableRowElement>,
+): Map<HTMLTableCellElement, number> {
+    const startColumns = new Map<HTMLTableCellElement, number>();
+    /** Columns taken in each row by a cell starting in an earlier row. */
+    const occupiedByRow: Array<Set<number>> = Array.from(
+        { length: rows.length },
+        () => new Set<number>(),
+    );
+    Array.from(rows).forEach((row, rowIndex) => {
+        const occupied = occupiedByRow[rowIndex];
+        let column = 0;
+        for (const cell of Array.from(row.cells)) {
+            while (occupied.has(column)) column++;
+            startColumns.set(cell, column);
+            // rowspan="0" reaches to the end of the row group.
+            const rowSpan =
+                cell.rowSpan === 0 ? rows.length - rowIndex : cell.rowSpan;
+            const lastRow = Math.min(rowIndex + rowSpan, rows.length);
+            for (let spannedRow = rowIndex; spannedRow < lastRow; spannedRow++) {
+                for (let offset = 0; offset < cell.colSpan; offset++) {
+                    occupiedByRow[spannedRow].add(column + offset);
+                }
+            }
+            column += cell.colSpan;
+        }
+    });
+    return startColumns;
+}
+
+/**
+ * One label per column: the LOWEST header cell over it, so a group heading
+ * ("Pricing" over Price and Quantity) gives way to the names beneath it, and a
+ * heading spanning every header row ("Product") names its own column.
+ */
+function columnLabels(table: HTMLTableElement): string[] {
+    const headerRows = table.tHead?.rows;
+    if (headerRows === undefined || headerRows.length === 0) return [];
+    const labels: string[] = [];
+    // Row order, so a lower row's cell overwrites the group heading above it.
+    for (const [headerCell, startColumn] of cellStartColumns(headerRows)) {
+        const label = headerCellLabel(headerCell);
+        for (let offset = 0; offset < headerCell.colSpan; offset++) {
+            labels[startColumn + offset] = label;
+        }
+    }
+    return labels;
+}
+
+function setAttributeIfChanged(
+    element: Element,
+    name: string,
+    value: string | null,
+): void {
+    if (value === null) {
+        if (element.hasAttribute(name)) element.removeAttribute(name);
+        return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+
+function isBlank(cell: HTMLTableCellElement): boolean {
+    // `trim()` also strips the `&nbsp;` a footer filler cell usually holds.
+    return (
+        cell.children.length === 0 && (cell.textContent ?? "").trim() === ""
+    );
+}
+
+/** Label every body and footer cell from its column's header. */
+function labelCells(): void {
+    const table = containerRef.value?.querySelector<HTMLTableElement>(
+        ":scope > table",
+    );
+    if (table === null || table === undefined) return;
+
+    const labels = columnLabels(table);
+    const rowGroups: HTMLTableSectionElement[] = [...Array.from(table.tBodies)];
+    if (table.tFoot !== null) rowGroups.push(table.tFoot);
+
+    for (const rowGroup of rowGroups) {
+        for (const [cell, startColumn] of cellStartColumns(rowGroup.rows)) {
+            // A cell spanning several columns belongs to none of them.
+            const derivedLabel =
+                cell.colSpan === 1 ? labels[startColumn] ?? "" : "";
+            setAttributeIfChanged(
+                cell,
+                DERIVED_LABEL_ATTRIBUTE,
+                derivedLabel === "" ? null : derivedLabel,
+            );
+            const hasLabel =
+                derivedLabel !== "" || cell.hasAttribute("data-label");
+            setAttributeIfChanged(
+                cell,
+                EMPTY_CELL_ATTRIBUTE,
+                !hasLabel && isBlank(cell) ? "" : null,
+            );
+        }
+    }
+}
+
+// Rows come and go (v-for), and header text can change: relabel on any change
+// to the table's structure or text. Only the attributes labelling reads are
+// watched, so our own `data-dx-stack-*` writes never re-trigger this.
+let mutationObserver: MutationObserver | null = null;
+
+/** Attributes whose change can alter a label or a cell's column. */
+const STRUCTURE_ATTRIBUTES = ["data-label", "colspan", "rowspan"];
+/**
+ * Attributes that hide header helper text (HIDDEN_HEADER_CONTENT). They count
+ * only inside a `thead`: a body cell's classes change all the time (a row's
+ * state, a validation style) and say nothing about labels.
+ */
+const HEADER_VISIBILITY_ATTRIBUTES = ["class", "aria-hidden"];
+
+function changesLabels(mutation: MutationRecord): boolean {
+    if (mutation.type !== "attributes") return true;
+    if (STRUCTURE_ATTRIBUTES.includes(mutation.attributeName ?? "")) return true;
+    return (
+        mutation.target instanceof Element &&
+        mutation.target.closest("thead") !== null
+    );
+}
+
+onMounted(() => {
+    labelCells();
+    if (typeof MutationObserver === "undefined" || containerRef.value === null) {
+        return;
+    }
+    mutationObserver = new MutationObserver((mutations) => {
+        if (mutations.some(changesLabels)) labelCells();
+    });
+    mutationObserver.observe(containerRef.value, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: [
+            ...STRUCTURE_ATTRIBUTES,
+            ...HEADER_VISIBILITY_ATTRIBUTES,
+        ],
+    });
+});
+
+onBeforeUnmount(() => {
+    mutationObserver?.disconnect();
+    mutationObserver = null;
+});
+
+defineExpose({ isStacked });
+</script>

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

@@ -140,7 +140,7 @@
                                 <DFormSelect
                                     v-else-if="field.filter === 'select-native'"
                                     :model-value="nativeSelectFilterValue(field)"
-                                    :options="getFieldFilterOptions(field) as unknown as Record<string, unknown>[]"
+                                    :options="getFieldFilterOptions(field)"
                                     size="sm"
                                     @update:model-value="handleSelectFilterChange(field, $event)"
                                 />
@@ -292,6 +292,8 @@
             :save-text="saveText"
             :create-text="createText"
             :delete-text="deleteText"
+            :error-summary-title="errorSummaryTitle"
+            :error-summary-other-title="errorSummaryOtherTitle"
             @save="handleEditSave"
             @cancel="handleEditCancel"
             @delete="handleDelete"
@@ -709,6 +711,19 @@ export interface Props<TItem = any> {
     /** Override the modal's Delete button label (default: "Delete {item}"). */
     deleteText?: string;
 
+    /**
+     * Heading of the modal's failed-save summary when the failure has field
+     * errors (default "Couldn't save. Please check:"). A failure with none
+     * is headed by the server's message instead.
+     */
+    errorSummaryTitle?: string;
+
+    /**
+     * Sub-heading over the summary rows no edit field owns (default "Other
+     * problems"), shown only when some rows ARE owned.
+     */
+    errorSummaryOtherTitle?: string;
+
     /** API endpoint pattern for updates (e.g., "/api/products/:id") */
     editUrl?: string;
 
@@ -826,6 +841,16 @@ export interface Props<TItem = any> {
      */
     rowClickable?: (item: TItem, index: number) => boolean;
 
+    /**
+     * Whether clicking a row opens the edit modal (when `editFields` are set).
+     * Defaults to `true`. Set `false` when `editFields` exist only for the
+     * create modal (`openCreate()` / the create button) and a row click does
+     * something else, such as opening the record's own page from `row-clicked`:
+     * the row then emits `row-clicked` without also opening the edit modal, and
+     * only a `row-clicked` listener makes rows look clickable (#200).
+     */
+    editOnRowClick?: boolean;
+
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
 
@@ -886,6 +911,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     footClone: false,
     showEmpty: true,
     fixedLayout: false,
+    editOnRowClick: true,
 });
 
 const emit = defineEmits<{
@@ -1038,9 +1064,12 @@ const isControlled = {
  * The cursor and hover affordance follow from that — DXTable already knows,
  * so consumers shouldn't have to reach into `:deep(tbody tr)` to say it (#107).
  * The listener case was the gap: only `editFields` used to count.
+ * `editFields` count only while a row click opens them (`editOnRowClick`, #200).
  */
 const rowsAreInteractive = computed(
-    () => (props.editFields?.length ?? 0) > 0 || hasListener('rowClicked'),
+    () =>
+        (props.editOnRowClick && (props.editFields?.length ?? 0) > 0) ||
+        hasListener('rowClicked'),
 );
 
 /**
@@ -2451,7 +2480,8 @@ const getFieldSortState = (fieldKey: string) => {
 };
 
 // Handle row click. Emits `rowClicked` regardless (the seam consumers listen
-// on), then asks the editor to open — a no-op unless `editFields` are set.
+// on), then asks the editor to open — a no-op unless `editFields` are set, and
+// skipped when the consumer turned edit-on-click off (#200).
 const handleRowClick = (item: T, index: number, event: MouseEvent) => {
     // A row the consumer marked non-actionable doesn't look clickable, so it
     // must not BE clickable either — otherwise a click that looks dead quietly
@@ -2459,7 +2489,9 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
     if (props.rowClickable && !props.rowClickable(item, index)) return;
 
     emit('rowClicked', item, index, event);
-    editor.openEdit(item);
+    if (props.editOnRowClick) {
+        editor.openEdit(item);
+    }
 };
 
 defineExpose({