@omnitend/dashboard-for-laravel 0.16.4 → 0.18.0

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

@@ -5,7 +5,157 @@
   field's `minItems`/`maxItems` limits.
 -->
 <template>
-    <div class="dx-repeater">
+    <!-- `repeaterLayout: "table"` is a PREFERENCE, not a guarantee: the table
+         needs real horizontal room for its columns, and the same viewport
+         width can put this repeater in a wide standalone form or a narrow
+         sidebar column — a viewport breakpoint can't tell those apart. A
+         ResizeObserver on THIS OUTER wrapper measures the space actually
+         available and falls back to the cards layout when it's not enough,
+         scaling to this repeater's own column count (see
+         `neededTableWidth`/`showTable` below). This outer wrapper is never
+         hidden (an element measures 0×0 once `display:none`, which would
+         leave a hidden table with no way to detect regained space and
+         un-hide itself) — but its two children below ARE mutually exclusive
+         via `v-if`/`v-else`, not `v-show`: only ever ONE of table/cards is
+         actually mounted, so a field with side effects (e.g. an async
+         `optionsLoader`) doesn't run twice forever just because table mode
+         is configured. -->
+    <div v-if="wantsTableLayout" ref="containerRef" class="dx-repeater-container">
+        <div v-if="showTable" class="dx-repeater-table-wrapper">
+            <table class="dx-repeater-table table">
+                <thead>
+                    <tr>
+                        <th v-for="subField in subFields" :key="subField.key">
+                            {{ headerLabel(subField) }}
+                        </th>
+                        <th class="dx-repeater-table-remove-col"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="(entry, position) in visibleRows"
+                        :key="rowKey(entry.row, position)"
+                    >
+                        <!--
+                          @slot Custom layout for a single repeater row, replacing the default sub-field stack (including the built-in Remove control — call `remove()` yourself). In table layout, rendered as the `<tr>`'s children: supply one `<td>` per sub-field plus a trailing `<td>` to match the header's column count (the header always includes an empty column for the built-in remove button).
+                          @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)"
+                        />
+
+                        <template v-else>
+                            <td v-for="subField in subFields" :key="subField.key">
+                                <DXField
+                                    :field="subField"
+                                    :form="form"
+                                    :model="entry.row"
+                                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
+                                    hide-label
+                                />
+                            </td>
+                            <td class="dx-repeater-table-remove-col">
+                                <DButton
+                                    variant="outline-danger"
+                                    class="dx-repeater-table-remove-btn"
+                                    :disabled="visibleRows.length <= minItems"
+                                    :aria-label="`Remove row ${position + 1}`"
+                                    @click="removeRow(entry.index)"
+                                >
+                                    <i-lucide-trash-2 aria-hidden="true" />
+                                </DButton>
+                            </td>
+                        </template>
+                    </tr>
+                </tbody>
+            </table>
+
+            <DButton
+                variant="outline-primary"
+                size="sm"
+                :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
+                @click="addRow"
+            >
+                {{ field.addLabel || "Add" }}
+            </DButton>
+        </div>
+
+        <!-- Cards fallback: identical to the default cards markup below,
+             shown instead of the table when there isn't enough room for it.
+             `v-else` (not `v-show`) — only the OUTER wrapper above needs to
+             stay mounted for measurement; unmounting whichever of these two
+             isn't current avoids permanently double-running every DXField
+             in both layouts at once (double async optionsLoader fetches,
+             double watchers, double everything else a field might do). -->
+        <div v-else class="dx-repeater">
+            <div
+                v-for="(entry, position) in visibleRows"
+                :key="rowKey(entry.row, position)"
+                class="dx-repeater-row"
+            >
+                <slot
+                    v-if="$slots.row"
+                    name="row"
+                    :row="entry.row"
+                    :index="position"
+                    :fields="subFields"
+                    :remove="() => removeRow(entry.index)"
+                    :path="rowPath(entry.index)"
+                />
+
+                <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>
+    </div>
+
+    <!-- Cards layout (default, `repeaterLayout: "cards"` or unset): each row
+         is its own bordered card with sub-fields stacked vertically. Kept as
+         a separate, unconditional branch (rather than reusing the fallback
+         above) so this — the overwhelmingly common case — never pays for a
+         ResizeObserver or the extra wrapper div; its markup is byte-for-byte
+         what cards mode has always rendered. -->
+    <div v-else class="dx-repeater">
         <div
             v-for="(entry, position) in visibleRows"
             :key="rowKey(entry.row, position)"
@@ -32,7 +182,7 @@
             <!-- Default row: stack each sub-field -->
             <template v-else>
                 <div class="dx-repeater-row-header">
-                    <span class="dx-repeater-row-index">{{ position + 1 }}</span>
+                    <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
                     <DButton
                         variant="outline-danger"
                         size="sm"
@@ -66,7 +216,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import DButton from "../base/DButton.vue";
 import DXField from "./DXField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
@@ -99,6 +249,79 @@ 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. */
+function headerLabel(subField: FieldDefinition): string {
+    const label = subField.label;
+    if (typeof label === "function") return label(props.model ?? {});
+    return label || subField.key;
+}
+
+// ————————————————— table/cards responsive fallback (#68 follow-up)
+
+const wantsTableLayout = computed(() => props.field.repeaterLayout === "table");
+
+const containerRef = ref<HTMLElement | null>(null);
+const containerWidth = ref<number | null>(null);
+
+// Heuristic minimum width for the table to stay legible: per-sub-field
+// column widths (not a pixel-measured fit, just a reasonable estimate —
+// `currency`/`percentage` get extra room for their `£`/`%` affix, which
+// otherwise crowds out the number itself) plus the trailing icon-only
+// remove column. Scales with this repeater's own column count/types,
+// unlike a single fixed viewport breakpoint.
+const DEFAULT_COLUMN_WIDTH = 130;
+const AFFIX_COLUMN_WIDTH = 160;
+const REMOVE_COLUMN_WIDTH = 70;
+
+function columnWidthFor(subField: FieldDefinition): number {
+    if (subField.type === "currency" || subField.type === "percentage") {
+        return AFFIX_COLUMN_WIDTH;
+    }
+    return DEFAULT_COLUMN_WIDTH;
+}
+
+const neededTableWidth = computed(
+    () =>
+        subFields.value.reduce((total, subField) => total + columnWidthFor(subField), 0) +
+        REMOVE_COLUMN_WIDTH,
+);
+
+// `null` (not yet measured) defaults to showing the table — the configured
+// preference — rather than flashing cards first. Resolves as soon as the
+// watcher below fires (see its comment for why that isn't simply onMounted).
+const showTable = computed(
+    () => containerWidth.value === null || containerWidth.value >= neededTableWidth.value,
+);
+
+let resizeObserver: ResizeObserver | null = null;
+
+// A `watch` on the ref itself, not `onMounted`: DXRepeater is loaded via
+// `defineAsyncComponent` (DXField imports it lazily to break a circular
+// import), and for an async-resolved component whose root element also
+// carries `v-if`, the template ref is not always populated yet by the time
+// `onMounted` fires — observed live as `containerRef.value === null` inside
+// `onMounted` despite the element existing in the DOM at that point. `watch`
+// instead reacts whenever the ref actually receives (or loses, e.g. if
+// `wantsTableLayout` ever toggles false) its element, regardless of when
+// that happens relative to lifecycle hooks.
+watch(containerRef, (el) => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    containerWidth.value = el.getBoundingClientRect().width;
+    resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) containerWidth.value = entry.contentRect.width;
+    });
+    resizeObserver.observe(el);
+});
+
+onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+});
+
 function isSoftDeleted(row: any): boolean {
     return Boolean(
         softDeleteKey.value &&
@@ -254,12 +477,55 @@ function removeRow(index: number): void {
 .dx-repeater-row-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     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);
 }
+
+.dx-repeater-table td {
+    vertical-align: middle;
+}
+
+/* Sub-fields render with their default mb-3 (matching the standalone-field
+   default), which is unwanted spacing inside an already-compact table cell —
+   and leaves the field vertically off-centre against the trailing remove
+   button, since that residual margin-bottom is inside the td's own
+   vertical-align:middle box. Bootstrap's spacing utilities are `!important`
+   by design (same as the toast-variant override elsewhere in this project),
+   so overriding one requires `!important` too — a plain declaration silently
+   loses and the margin survives. */
+.dx-repeater-table td :deep(.mb-3) {
+    margin-bottom: 0 !important;
+}
+
+.dx-repeater-table-remove-col {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+}
+
+/* Match the row's text-input height (same var the switch field uses).
+   `--dx-input-height`'s `em` term resolves against the CONSUMING element's
+   own font-size, not the input's — so this only lines up if the button's
+   font-size equals .form-control's (both derive from Bootstrap's base
+   font-size var, but a `size="sm"` DButton sets a smaller one). The button
+   is deliberately NOT `size="sm"` here for that reason; min-height still
+   keeps it visually compact regardless. */
+.dx-repeater-table-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--dx-input-height, calc(1.5em + 0.75rem + 2px));
+}
 </style>

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

@@ -599,10 +599,12 @@
                         <DButton
                             v-if="deleteUrl && !isCreateMode"
                             variant="danger"
+                            :loading="pendingAction === 'delete'"
+                            loading-text="Deleting..."
                             :disabled="editForm?.processing || editLoading"
                             @click="handleDelete"
                         >
-                            {{ pendingAction === 'delete' ? 'Deleting...' : 'Delete' }}
+                            Delete
                         </DButton>
                     </div>
                     <div class="d-flex gap-2">
@@ -611,15 +613,12 @@
                         </DButton>
                         <DButton
                             variant="primary"
+                            :loading="pendingAction === 'save'"
+                            :loading-text="isCreateMode ? 'Creating...' : 'Saving...'"
                             :disabled="editForm?.processing || editLoading"
                             @click="handleEditSave"
                         >
-                            <template v-if="isCreateMode">
-                                {{ pendingAction === 'save' ? 'Creating...' : 'Create' }}
-                            </template>
-                            <template v-else>
-                                {{ pendingAction === 'save' ? 'Saving...' : 'Save Changes' }}
-                            </template>
+                            {{ isCreateMode ? 'Create' : 'Save Changes' }}
                         </DButton>
                     </div>
                 </div>

package/resources/js/types/index.ts

@@ -61,6 +61,23 @@ export interface FieldOption extends Record<string, unknown> {
  */
 export type OptionsLoader = (model: any) => Promise<FieldOption[]>;
 
+/**
+ * Label column width for horizontal layout, mirroring Bootstrap Vue Next's
+ * `BFormGroup` `labelCols`/`labelCols*` props: either a single width applied
+ * at all breakpoints, or a per-breakpoint object (omitted breakpoints fall
+ * back to BFormGroup's own defaults, which is how "collapse to vertical
+ * below a breakpoint" comes for free — e.g. `{ md: 3 }` stacks below `md`).
+ *
+ * Deliberately excludes `boolean` (which BFormGroup's own `labelCols` prop
+ * accepts): Vue's type-based `defineProps` auto-defaults an omitted prop to
+ * `false` (not `undefined`) whenever its declared type includes `boolean`,
+ * which would silently break the `field.labelCols ?? formLabelCols ?? 3`
+ * fallback chain used to resolve this value.
+ */
+export type LabelCols =
+    | number
+    | { sm?: number; md?: number; lg?: number; xl?: number };
+
 /**
  * Field definition shared by every form renderer.
  *
@@ -172,10 +189,24 @@ export interface FieldDefinition {
 
     /**
      * Render the field full-width with no label wrapper, delegating its
-     * content to the `#span(<key>)` slot. Useful for custom blocks.
+     * content to the `#span(<key>)` slot. Useful for custom blocks. Also
+     * doubles as the "fill both columns" escape hatch in horizontal layout —
+     * a span field always bypasses the label/content column split.
      */
     span?: boolean;
 
+    /**
+     * Per-field override of DXForm's `layout` prop ("vertical" | "horizontal").
+     * Falls back to the form-level `layout` when omitted.
+     */
+    layout?: "vertical" | "horizontal";
+
+    /**
+     * Per-field override of DXForm's `labelCols` prop, for horizontal
+     * layout. Falls back to the form-level `labelCols` when omitted.
+     */
+    labelCols?: LabelCols;
+
     /**
      * Component rendered for `type: "component"` fields. Receives
      * `modelValue`, `field`, `model` props and emits `update:modelValue`.
@@ -199,6 +230,26 @@ export interface FieldDefinition {
     minItems?: number;
     maxItems?: number;
 
+    /**
+     * For `repeater` fields: `"cards"` (default) stacks each row as its own
+     * card with sub-fields listed vertically — best for rows with several
+     * or complex sub-fields. `"table"` renders one row per item with
+     * sub-fields as columns — far more compact for simple child-row lists
+     * (e.g. 2-3 short sub-fields). Named `repeaterLayout` (not `layout`) to
+     * avoid colliding with the unrelated form-level `layout` prop
+     * ("vertical" | "horizontal") every field type accepts.
+     */
+    repeaterLayout?: "cards" | "table";
+
+    /**
+     * For `repeater` fields in `cards` layout: show each row's 1-based
+     * position (e.g. "1", "2") next to its Remove button. Off by default —
+     * only meaningful once a consumer explicitly wants it (e.g. rows the
+     * user thinks of as numbered/ordered); most repeaters don't need it.
+     * Not applicable to `table` layout, which has no equivalent column.
+     */
+    showRowIndex?: boolean;
+
     /**
      * For `repeater` fields backed by an upsert-children API contract (rows
      * carrying a persisted `id` are only deleted server-side when submitted