@omnitend/dashboard-for-laravel 0.33.1 → 0.34.0

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

@@ -0,0 +1,133 @@
+<!--
+  @component
+  DXRepeaterCards — the cards layout for DXRepeater: each row is its own
+  bordered card with sub-fields stacked vertically, plus the add-row button.
+
+  Internal to DXRepeater (not exported). It exists because DXRepeater rendered
+  this exact markup TWICE — as the default `repeaterLayout: "cards"` branch and
+  as the responsive fallback when the `"table"` layout lacks room — and the two
+  copies would drift (#135). DXRepeater owns all the row state and passes it in;
+  this component is presentational. The `.dx-repeater-row*` scoped styles live
+  here (a scoped rule can't reach markup in another component), so the cards
+  chrome moves as one unit with the markup it styles.
+-->
+<template>
+    <div class="dx-repeater">
+        <div
+            v-for="(entry, position) in visibleRows"
+            :key="rowKey(entry.row, position)"
+            class="dx-repeater-row"
+        >
+            <!--
+              @slot Custom layout for a single repeater row, replacing the default sub-field stack (including the built-in Remove control — call `remove()` yourself).
+              @binding {object} row The current row's data object.
+              @binding {number} index The row's zero-based position among visible rows.
+              @binding {FieldDefinition[]} fields The sub-field definitions for the row.
+              @binding {function} remove Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`).
+              @binding {string} path The dot path into `form.data` for this row (e.g. `lines.0`).
+            -->
+            <slot
+                v-if="$slots.row"
+                name="row"
+                :row="entry.row"
+                :index="position"
+                :fields="subFields"
+                :remove="() => removeRow(entry.index)"
+                :path="rowPath(entry.index)"
+            />
+
+            <!-- Default row: stack each sub-field -->
+            <template v-else>
+                <div class="dx-repeater-row-header">
+                    <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
+                    <DButton
+                        variant="outline-danger"
+                        size="sm"
+                        :disabled="visibleRows.length <= minItems"
+                        @click="removeRow(entry.index)"
+                    >
+                        Remove
+                    </DButton>
+                </div>
+                <DXField
+                    v-for="subField in subFields"
+                    :key="subField.key"
+                    :field="subField"
+                    :form="form"
+                    :model="entry.row"
+                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
+                />
+            </template>
+        </div>
+
+        <DButton
+            variant="outline-primary"
+            size="sm"
+            :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
+            @click="addRow"
+        >
+            {{ field.addLabel || "Add" }}
+        </DButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DButton from "../base/DButton.vue";
+import DXField from "./DXField.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition } from "../../types";
+
+interface Props {
+    /** Rows shown in the UI, each paired with its real (unfiltered) array index. */
+    visibleRows: Array<{ row: any; index: number }>;
+    /** Sub-field definitions for a row. */
+    subFields: FieldDefinition[];
+    /** Form instance owning the repeater array. */
+    form: UseFormReturn<any>;
+    /** The repeater field definition (for `showRowIndex` and `addLabel`). */
+    field: FieldDefinition;
+    /** Minimum rows — the Remove button disables at this count. */
+    minItems: number;
+    /** Maximum rows — the Add button disables at this count. */
+    maxItems: number | undefined;
+    /** Stable v-for key for a row (owned by DXRepeater — row identity, not index). */
+    rowKey: (row: any, fallbackPosition: number) => string | number;
+    /** Dot path into form.data for a row at the given true index. */
+    rowPath: (index: number) => string;
+    /** Remove the row at the given true index (respects minItems / soft-delete). */
+    removeRow: (index: number) => void;
+    /** Append a fresh row (respects maxItems). */
+    addRow: () => void;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.dx-repeater-row {
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.dx-repeater-row-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+/* The Remove control is always this header's last child, whether or not the
+   (opt-in) row-index span is also present — push it to the end explicitly
+   rather than relying on `justify-content: space-between`, which centres a
+   single remaining child at the *start* once the index is off (the default). */
+.dx-repeater-row-header > :last-child {
+    margin-inline-start: auto;
+}
+
+.dx-repeater-row-index {
+    font-weight: 600;
+    color: var(--bs-secondary-color);
+}
+</style>

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

@@ -31,7 +31,7 @@
                          request is usually caused by the sort or a filter, and
                          replacing the table would take away the very controls
                          needed to undo it, leaving a reload as the only way out. -->
-                    <div v-if="error || apiError" class="alert alert-danger">
+                    <div v-if="error || (apiError && isProviderMode)" class="alert alert-danger">
                         {{ error || apiError }}
                     </div>
 
@@ -49,7 +49,7 @@
                     <DTable
                         v-else-if="isProviderMode || isClientSideMode || isInertiaMode"
                         ref="tableRef"
-                        :key="tableSlotSignature($slots)"
+                        :key="activeMode + ':' + tableSlotSignature($slots)"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
                         :multisort="false"
@@ -239,6 +239,13 @@
             :is-create-mode="isCreateMode"
             :pending-action="pendingAction"
             :delete-url="deleteUrl"
+            :layout="editLayout"
+            :label-cols="editLabelCols"
+            :card="editCard"
+            :item-name="itemName"
+            :save-text="saveText"
+            :create-text="createText"
+            :delete-text="deleteText"
             @save="handleEditSave"
             @cancel="handleEditCancel"
             @delete="handleDelete"
@@ -266,6 +273,7 @@ import { api } from "../../utils/api";
 import pluralize from "pluralize";
 import { useResourceEditor } from "../../composables/useResourceEditor";
 import { getByPath } from "../../utils/objectPath";
+import type { FieldDefinition, LabelCols } from "../../types";
 import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
@@ -415,6 +423,27 @@ export interface EditTab {
     lazy?: boolean;
 }
 
+/**
+ * Discriminated data-source descriptor (#130). The additive, type-safe
+ * replacement for the legacy `items` / `provider` / `apiUrl` / `inertiaUrl` /
+ * `clientSide` prop matrix, in which every prop was independently optional and
+ * the mode was inferred by precedence — so invalid combinations compiled and
+ * some were silently ignored.
+ *
+ * Pass ONE `source`: the mode is explicit and its required companion prop is
+ * enforced by the compiler (`{ mode: 'provider' }` without a `provider` won't
+ * type-check). The legacy props still work and take over when `source` is
+ * omitted; a future major removes them with a codemod (#130 Phase 3).
+ *
+ * `apiAdapter` (transport translation) and `pagination` (server-supplied page
+ * metadata) stay sibling props — they're orthogonal to which mode is active.
+ */
+export type DXTableSource<TItem = any> =
+    | { mode: 'client'; items: TItem[] }
+    | { mode: 'provider'; provider: BTableProvider<TItem> }
+    | { mode: 'api'; url: string }
+    | { mode: 'inertia'; items: TItem[]; url?: string };
+
 export interface Props<TItem = any> {
     /** Table title */
     title?: string;
@@ -435,6 +464,14 @@ export interface Props<TItem = any> {
      *  backend convention that differs from dfl's (see DXTableApiAdapter). */
     apiAdapter?: DXTableApiAdapter;
 
+    /**
+     * Discriminated data-source (#130) — the type-safe alternative to the
+     * legacy `items` / `provider` / `apiUrl` / `inertiaUrl` / `clientSide`
+     * props. When set it WINS over those props; when omitted, the legacy props
+     * apply unchanged. See `DXTableSource`.
+     */
+    source?: DXTableSource<TItem>;
+
     /** Table field definitions */
     fields: TableField[];
 
@@ -526,8 +563,12 @@ export interface Props<TItem = any> {
     card?: boolean;
 
     // Edit Modal Props
-    /** Form field definitions for edit modal (if provided, enables edit on row click) */
-    editFields?: any[]; // FieldDefinition[] - using any to avoid circular import
+    /**
+     * Form field definitions for edit modal (if provided, enables edit on row
+     * click). `import type` is erased at compile time, so this creates no
+     * runtime import cycle (#131).
+     */
+    editFields?: FieldDefinition[];
 
     /** Tab definitions for organizing edit modal content */
     editTabs?: EditTab[];
@@ -538,6 +579,38 @@ export interface Props<TItem = any> {
     /** Edit modal size */
     editModalSize?: 'sm' | 'md' | 'lg' | 'xl';
 
+    /**
+     * Field layout for the edit/create modal's form, forwarded to its `DXForm`
+     * ("vertical" = label above input, "horizontal" = label left). Defaults to
+     * **"horizontal"** to match the Omni Tend form convention (a raw modal form
+     * previously fell back to DXForm's vertical default, which looked out of
+     * place next to horizontal page forms). Pass `"vertical"` to opt out.
+     */
+    editLayout?: 'vertical' | 'horizontal';
+
+    /**
+     * Label column width for the edit modal's horizontal layout, forwarded to
+     * `DXForm`'s `labelCols` (a single width or a per-breakpoint object). Only
+     * meaningful when `editLayout` is "horizontal".
+     */
+    editLabelCols?: LabelCols;
+
+    /**
+     * Wrap the edit/create modal's form in a bordered card. Off by default (the
+     * modal body already provides a boundary); opt in for a more contained,
+     * panelled look around a tabbed edit form.
+     */
+    editCard?: boolean;
+
+    /** Override the modal's Save button label (default: "Save {item}"). */
+    saveText?: string;
+
+    /** Override the modal's Create button label (default: "Create {item}"). */
+    createText?: string;
+
+    /** Override the modal's Delete button label (default: "Delete {item}"). */
+    deleteText?: string;
+
     /** API endpoint pattern for updates (e.g., "/api/products/:id") */
     editUrl?: string;
 
@@ -663,6 +736,8 @@ const props = withDefaults(defineProps<Props<T>>(), {
     columnSize: "12",
     card: true,
     editModalSize: "lg",
+    editLayout: "horizontal",
+    editCard: false,
     showCreateButton: true,
     footClone: false,
     showEmpty: true,
@@ -704,15 +779,74 @@ const emit = defineEmits<{
     'update:busy': [busy: boolean];
 }>();
 
+// Effective data-source values (#130). Prefer an explicit `source` prop, else
+// fall back to the legacy `items`/`provider`/`apiUrl`/`inertiaUrl`/`clientSide`
+// props. Every read below (mode detection, provider, client-side pipeline,
+// inertia navigation) goes through these, so both APIs drive identical logic.
+const resolvedClientSide = computed(() =>
+    props.source ? props.source.mode === 'client' : props.clientSide === true,
+);
+const resolvedItems = computed<T[] | undefined>(() => {
+    if (props.source) {
+        return props.source.mode === 'client' || props.source.mode === 'inertia'
+            ? props.source.items
+            : undefined;
+    }
+    return props.items;
+});
+const resolvedProvider = computed<BTableProvider<T> | undefined>(() =>
+    props.source
+        ? props.source.mode === 'provider'
+            ? props.source.provider
+            : undefined
+        : props.provider,
+);
+const resolvedApiUrl = computed<string | undefined>(() =>
+    props.source
+        ? props.source.mode === 'api'
+            ? props.source.url
+            : undefined
+        : props.apiUrl,
+);
+const resolvedInertiaUrl = computed<string | undefined>(() =>
+    props.source
+        ? props.source.mode === 'inertia'
+            ? props.source.url
+            : undefined
+        : props.inertiaUrl,
+);
+
 // Mode detection
-const isProviderMode = computed(() => !props.clientSide && (!!props.provider || !!props.apiUrl));
-const isInertiaMode = computed(() => !props.clientSide && !props.provider && !props.apiUrl && !!props.items);
-const isClientSideMode = computed(() => props.clientSide === true && !!props.items);
-const hasInertiaUrl = computed(() => !!props.inertiaUrl);
-
-// Warn about invalid prop combinations in client-side mode
-if (props.clientSide && (props.apiUrl || props.inertiaUrl)) {
-    console.warn('[DXTable] clientSide mode ignores apiUrl and inertiaUrl props. Data is processed locally from items.');
+const isProviderMode = computed(() => !resolvedClientSide.value && (!!resolvedProvider.value || !!resolvedApiUrl.value));
+const isInertiaMode = computed(() => !resolvedClientSide.value && !resolvedProvider.value && !resolvedApiUrl.value && !!resolvedItems.value);
+const isClientSideMode = computed(() => resolvedClientSide.value && !!resolvedItems.value);
+const hasInertiaUrl = computed(() => !!resolvedInertiaUrl.value);
+
+// The active data-source mode, folded into the table's `:key` so a runtime
+// mode switch (e.g. `source` provider → client) REMOUNTS the DTable. bvn's
+// BTable caches its provider-fetched items internally and doesn't cleanly adopt
+// a fresh `:items` binding when the provider is removed — without a remount the
+// table shows "No items found" after switching to client/inertia mode. Stable
+// for a table that never changes mode, so it adds no spurious remounts.
+const activeMode = computed(() =>
+    isClientSideMode.value
+        ? 'client'
+        : isInertiaMode.value
+          ? 'inertia'
+          : isProviderMode.value
+            ? 'provider'
+            : 'empty',
+);
+
+// Warn about invalid LEGACY prop combinations (a `source` prop makes these
+// impossible at the type level, so it's exempt). #130: `clientSide + provider`
+// was previously uncovered by this guard.
+if (
+    !props.source &&
+    props.clientSide &&
+    (props.provider || props.apiUrl || props.inertiaUrl)
+) {
+    console.warn('[DXTable] clientSide mode ignores provider, apiUrl and inertiaUrl props. Data is processed locally from items.');
 }
 
 // Computed for effective busy state (provider mode uses 'busy', inertia uses 'loading')
@@ -835,7 +969,7 @@ const paginationWasProvided = 'pagination' in (instance?.vnode.props ?? {});
 
 const providerPagination = computed<PaginationData | null>(() => {
     if (apiPaginationMeta.value) return apiPaginationMeta.value;
-    if (props.provider && paginationWasProvided && props.pagination) {
+    if (resolvedProvider.value && paginationWasProvided && props.pagination) {
         return props.pagination;
     }
     return null;
@@ -850,7 +984,7 @@ const providerPagination = computed<PaginationData | null>(() => {
 const providerHasRun = ref(false);
 let warnedAboutProviderPagination = false;
 watch(
-    () => [props.provider, props.showPagination, providerPagination.value, providerHasRun.value] as const,
+    () => [resolvedProvider.value, props.showPagination, providerPagination.value, providerHasRun.value] as const,
     ([provider, showPagination, pagination, hasRun]) => {
         if (warnedAboutProviderPagination || !hasRun) return;
         if (provider && showPagination && !pagination) {
@@ -873,16 +1007,16 @@ const clientSideCurrentPage = ref(1);
 
 // Client-side filtered items
 const clientSideFilteredItems = computed<T[]>(() => {
-    if (!isClientSideMode.value || !props.items) return [];
+    if (!isClientSideMode.value || !resolvedItems.value) return [];
 
     const filters = effectiveFilters.value;
     const filterKeys = Object.keys(filters).filter(key => isActiveFilterValue(filters[key]));
 
     if (filterKeys.length === 0) {
-        return props.items;
+        return resolvedItems.value;
     }
 
-    return props.items.filter(item => {
+    return resolvedItems.value.filter(item => {
         return filterKeys.every(key => {
             // Resolve by the FILTER key, which may differ from the column's key.
             const field = props.fields.find(f => filterKeyFor(f) === key);
@@ -1151,7 +1285,7 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
 // Returns null when there is nothing stable to key on — every read and write
 // guards on that, so a keyless table simply doesn't persist.
 const perPageStorageKey = computed<string | null>(() => {
-    const url = props.inertiaUrl || props.apiUrl;
+    const url = resolvedInertiaUrl.value || resolvedApiUrl.value;
     if (!url) return null;
     return `dxtable-perpage-${url.replace(/\//g, '-')}`;
 });
@@ -1232,7 +1366,7 @@ watch(() => JSON.stringify(props.filters ?? null), () => {
     } else if (hasInertiaUrl.value && isInertiaMode.value && router) {
         // Inertia mode - trigger navigation with new filters
         router.get(
-            props.inertiaUrl!,
+            resolvedInertiaUrl.value!,
             {
                 page: 1, // Reset to first page when filters change
                 filters: props.filters,
@@ -1248,8 +1382,15 @@ watch(() => JSON.stringify(props.filters ?? null), () => {
 // of BTable's provider context, so an api-url-only change doesn't re-invoke the
 // provider on its own — without this the table keeps showing the previous url's
 // rows until some other trigger (sort, per-page, create/edit/delete) fires.
-watch(() => props.apiUrl, (newUrl, oldUrl) => {
-    if (newUrl !== oldUrl && isProviderMode.value) {
+watch(() => resolvedApiUrl.value, (newUrl, oldUrl) => {
+    // `newUrl` must be truthy: an api-url → provider transition drops the url to
+    // `undefined` while still satisfying `isProviderMode` via the new provider.
+    // Without this guard both this watcher and the provider watcher below run
+    // their clear+refresh on that transition (bvn coalesces the two refreshes
+    // into one fetch, so it isn't an observable double-fetch — but the redundant
+    // work is avoidable). The provider watcher owns the url-removal transition;
+    // this one only fires for an actual new url.
+    if (newUrl && newUrl !== oldUrl && isProviderMode.value) {
         // Clear cached filter values and pagination when API endpoint changes.
         // The next provider call will request fresh filter values.
         apiFilterValues.value = {};
@@ -1268,6 +1409,25 @@ watch(() => props.apiUrl, (newUrl, oldUrl) => {
     }
 });
 
+// A `provider` swap (`:provider` or `source.provider` reassigned to a new
+// function) must refetch, exactly as an `apiUrl` swap does above. `effectiveProvider`'s
+// identity is deliberately STABLE (#82) so BTable doesn't refetch on its own
+// when the underlying provider changes — so, like the apiUrl watcher, force it.
+// Only fires for an actual provider function (apiUrl mode is covered above), and
+// `watch` skips the initial value, so no double-fetch on mount.
+watch(() => resolvedProvider.value, (newProvider, oldProvider) => {
+    if (newProvider !== oldProvider && !!newProvider) {
+        apiFilterValues.value = {};
+        apiPaginationMeta.value = null;
+        apiError.value = null;
+        const wasOnFirstPage = apiCurrentPage.value === 1;
+        apiCurrentPage.value = 1;
+        if (wasOnFirstPage) {
+            refresh();
+        }
+    }
+});
+
 // Computed effective perPage (use external if provided, otherwise internal)
 const effectivePerPage = computed(() => {
     // Only when the consumer is actually driving it (v-model). A bare
@@ -1330,7 +1490,7 @@ const clientSidePaginatedItems = computed<T[]>(() => {
 // Client-side pagination metadata
 const clientSidePagination = computed<PaginationData>(() => {
     const total = clientSideFilteredItems.value.length;
-    const totalUnfiltered = props.items?.length || 0;
+    const totalUnfiltered = resolvedItems.value?.length || 0;
     const perPage = effectivePerPage.value;
     const lastPage = clientSideLastPage.value;
 
@@ -1426,7 +1586,7 @@ const sortParams = (sortBy: readonly BTableSortBy[] | undefined) => {
 // catch: `effectiveProvider` wraps every provider (including a consumer's own)
 // in one error handler, so no provider can fail silently.
 const internalProvider: BTableProvider<T> = async (context: Readonly<BTableProviderContext>) => {
-    if (!props.apiUrl) return [];
+    if (!resolvedApiUrl.value) return [];
 
     const params: any = {
         page: context.currentPage,
@@ -1448,7 +1608,7 @@ const internalProvider: BTableProvider<T> = async (context: Readonly<BTableProvi
         ? props.apiAdapter.request(params)
         : params;
 
-    const response = await api.get<any>(props.apiUrl, wireParams);
+    const response = await api.get<any>(resolvedApiUrl.value, wireParams);
 
     // Adapt a foreign response envelope back into the dfl shape. Gets the
     // ORIGINAL dfl-shape params (page/perPage/…) for context, since a foreign
@@ -1485,14 +1645,24 @@ const internalProvider: BTableProvider<T> = async (context: Readonly<BTableProvi
  * a blank page to a user. A consumer's provider used to be the silent case: the
  * error handling lived inside the internal one, so it never covered them.
  */
+// Monotonic generation for provider calls. When a provider is swapped (or a
+// refetch supersedes an in-flight call), a still-pending older call that later
+// REJECTS must not publish its error over the newer call's rows — bvn already
+// discards a superseded call's rows, but `apiError` isn't otherwise guarded.
+let providerGeneration = 0;
+
 const wrappedProvider: BTableProvider<T> = async (context: Readonly<BTableProviderContext>) => {
-    const provider = props.provider || (props.apiUrl ? internalProvider : undefined);
+    const provider = resolvedProvider.value || (resolvedApiUrl.value ? internalProvider : undefined);
     if (!provider) return [];
 
+    const generation = ++providerGeneration;
     apiError.value = null;
     try {
         return await provider(context);
     } catch (error: any) {
+        // Superseded by a newer provider call — its result/error owns the table
+        // now, so drop this stale rejection silently.
+        if (generation !== providerGeneration) return [];
         // eslint-disable-next-line no-console
         console.error('DXTable: the data provider failed', error);
         // `error.message` covers the internal provider's ApiError; the
@@ -1512,14 +1682,14 @@ const wrappedProvider: BTableProvider<T> = async (context: Readonly<BTableProvid
 // function changes, which would double every request that the explicit apiUrl
 // watcher already refetches (#82).
 const effectiveProvider = computed<BTableProvider<T> | undefined>(() =>
-    props.provider || props.apiUrl ? wrappedProvider : undefined,
+    resolvedProvider.value || resolvedApiUrl.value ? wrappedProvider : undefined,
 );
 
 const handlePageChange = (page: number) => {
     // If inertiaUrl provided, handle navigation automatically
     if (hasInertiaUrl.value && isInertiaMode.value && router) {
         router.get(
-            props.inertiaUrl!,
+            resolvedInertiaUrl.value!,
             {
                 page,
                 filters: effectiveFilters.value,
@@ -1574,7 +1744,7 @@ const tableModeBindings = computed<Record<string, unknown>>(() => {
         return { items: clientSidePaginatedItems.value, noLocalSorting: true };
     }
     // inertia
-    return { items: props.items, noLocalSorting: true, busy: effectiveBusy.value };
+    return { items: resolvedItems.value, noLocalSorting: true, busy: effectiveBusy.value };
 });
 
 /*
@@ -1627,7 +1797,7 @@ const handleSortChange = (sortBy: BTableSortBy[]) => {
         // The cleared state has a key but no order — `sortParams` sends nothing
         // for it, rather than inventing an ascending sort the user didn't ask for.
         router.get(
-            props.inertiaUrl!,
+            resolvedInertiaUrl.value!,
             {
                 page: props.pagination?.current_page || 1,
                 filters: effectiveFilters.value,
@@ -1684,7 +1854,7 @@ const handlePerPageChange = (newPerPage: number | string | null | (number | stri
     // Handle navigation automatically
     if (hasInertiaUrl.value && isInertiaMode.value && router) {
         router.get(
-            props.inertiaUrl!,
+            resolvedInertiaUrl.value!,
             {
                 page: 1, // Reset to first page when changing perPage
                 filters: effectiveFilters.value,
@@ -1737,7 +1907,7 @@ const handleFilterChange = (fieldKey: string, value: string | string[]) => {
         // Handle Inertia navigation automatically if URL provided
         if (hasInertiaUrl.value && isInertiaMode.value && router) {
             router.get(
-                props.inertiaUrl!,
+                resolvedInertiaUrl.value!,
                 {
                     page: 1, // Reset to first page when filtering
                     filters: newFilters,
@@ -1769,7 +1939,7 @@ const refresh = () => {
         (tableRef.value as any).refresh();
     }
     // Inertia mode: reload current page to refresh data
-    else if (isInertiaMode.value && props.inertiaUrl && router) {
+    else if (isInertiaMode.value && resolvedInertiaUrl.value && router) {
         router.reload();
     }
 };

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

@@ -47,6 +47,9 @@
             :form="form"
             :fields="fields"
             :tabs="tabs"
+            :layout="layout"
+            :label-cols="labelCols"
+            :card="card"
             :card-tabs="false"
             :context="item ?? undefined"
             :show-submit="false"
@@ -147,7 +150,7 @@
                         :disabled="form?.processing || loading"
                         @click="emit('delete')"
                     >
-                        Delete
+                        {{ deleteLabel }}
                     </DButton>
                 </div>
                 <div class="d-flex gap-2">
@@ -161,7 +164,7 @@
                         :disabled="form?.processing || loading"
                         @click="emit('save')"
                     >
-                        {{ isCreateMode ? 'Create' : 'Save Changes' }}
+                        {{ isCreateMode ? createLabel : saveLabel }}
                     </DButton>
                 </div>
             </div>
@@ -176,6 +179,7 @@ import DButton from "../base/DButton.vue";
 import DSpinner from "../base/DSpinner.vue";
 import DXForm from "./DXForm.vue";
 import type { EditTab } from "./DXTable.vue";
+import type { LabelCols } from "../../types";
 
 interface Props {
     /** Whether the modal is open (v-model:show). */
@@ -204,10 +208,38 @@ interface Props {
     pendingAction: 'save' | 'delete' | null;
     /** Delete endpoint — gates the Delete button. */
     deleteUrl?: string;
+    /** Field layout forwarded to the modal's DXForm (defaults handled upstream). */
+    layout?: 'vertical' | 'horizontal';
+    /** Label column width forwarded to DXForm (horizontal layout). */
+    labelCols?: LabelCols;
+    /** Wrap the modal form in a card (opt-in — off by default). */
+    card?: boolean;
+    /** Singular item noun for the default button labels (e.g. "customer"). */
+    itemName?: string;
+    /** Override the Save button label (edit mode). */
+    saveText?: string;
+    /** Override the Create button label (create mode). */
+    createText?: string;
+    /** Override the Delete button label. */
+    deleteText?: string;
 }
 
 const props = defineProps<Props>();
 
+// Title-case the singular item noun for button labels ("customer" → "Customer",
+// "sales order" → "Sales Order") — capitalize the first letter of each word.
+const capitalizedItem = computed(() => {
+    const noun = props.itemName?.trim() || 'item';
+    return noun.replace(/\b\w/g, (char) => char.toUpperCase());
+});
+
+// Buttons default to item-named copy ("Save Customer" / "Create Customer" /
+// "Delete Customer") — clearer than a generic "Save Changes" — overridable per
+// action. Falls back to "Save Item" etc. when no `itemName` is set.
+const saveLabel = computed(() => props.saveText ?? `Save ${capitalizedItem.value}`);
+const createLabel = computed(() => props.createText ?? `Create ${capitalizedItem.value}`);
+const deleteLabel = computed(() => props.deleteText ?? `Delete ${capitalizedItem.value}`);
+
 const emit = defineEmits<{
     /** v-model:show — the modal open state changed. */
     'update:show': [value: boolean];