@omnitend/dashboard-for-laravel 0.16.0 → 0.16.2

package/dist/types/index.d.ts

@@ -136,6 +136,18 @@ export interface FieldDefinition {
     /** Minimum / maximum number of repeater rows. */
     minItems?: number;
     maxItems?: number;
+    /**
+     * For `repeater` fields backed by an upsert-children API contract (rows
+     * carrying a persisted `id` are only deleted server-side when submitted
+     * flagged, e.g. Laravel's `{ id, to_delete: true }` pattern): the
+     * sub-field key to set `true` when a row is removed, instead of splicing
+     * it out of the array. Only applies to rows that already have an `id`
+     * (freshly added, never-persisted rows are still spliced normally since
+     * the server has never seen them). Flagged rows remain in `form.data`
+     * (so they're submitted) but are hidden from the UI and excluded from
+     * `minItems`/`maxItems` counts.
+     */
+    softDeleteKey?: string;
     /** Disable the field (static or computed from the model). */
     disabled?: MaybeFn<boolean>;
     /**

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-05T08:43:52.804Z",
+  "generated": "2026-07-06T07:46:59.742Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.15.0"
+    "version": "0.16.1"
   },
   "components": {
     "base": [
@@ -2146,7 +2146,7 @@
                   "name": "number"
                 },
                 "name": "index",
-                "description": "The row's zero-based index."
+                "description": "The row's zero-based position among visible rows."
               },
               {
                 "title": "binding",
@@ -2162,7 +2162,7 @@
                   "name": "function"
                 },
                 "name": "remove",
-                "description": "Removes this row (respects `minItems`)."
+                "description": "Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`)."
               },
               {
                 "title": "binding",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-05T08:43:52.857Z
+> Last updated: 2026-07-06T07:46:59.797Z
 
 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.16.0",
+  "version": "0.16.2",
   "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

@@ -258,6 +258,24 @@ $dashboard-navbar-height: 64px;
   }
 }
 
+// ----------------------------------------------------------------------------
+// Autocomplete
+// ----------------------------------------------------------------------------
+// BAutocomplete's dropdown popup (`.b-autocomplete-content`) only sets a
+// max-height, so it inherits the (often narrow) anchor/trigger width and clips
+// long option labels — a real problem for a DXTable `select` filter in a narrow
+// column. Let it grow to fit the longest option while staying at least the
+// trigger width, capped so a pathological label can't make it enormous.
+//
+// This lives in the global theme (not DAutocomplete's scoped styles) on
+// purpose: the popup can be teleported out of the component (BAutocomplete's
+// `teleportTo` prop), which escapes scoped `:deep()` entirely — a global rule
+// applies whether or not it's teleported.
+.b-autocomplete-content {
+  min-width: max-content; // grow to the longest option (floors at the trigger width)
+  max-width: min(90vw, 32rem); // but don't run away
+}
+
 // ----------------------------------------------------------------------------
 // Custom Utilities
 // ----------------------------------------------------------------------------

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

@@ -474,6 +474,7 @@ function setValue(value: any): void {
     } else {
         (props.form.data as Record<string, any>)[props.field.key] = next;
     }
+    props.form.touched[errorKey.value] = true;
     props.form.clearError(errorKey.value);
 }
 

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

@@ -7,37 +7,37 @@
 <template>
     <div class="dx-repeater">
         <div
-            v-for="(row, index) in rows"
-            :key="rowKey(index)"
+            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.
               @binding {object} row The current row's data object.
-              @binding {number} index The row's zero-based index.
+              @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`).
+              @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="row"
-                :index="index"
+                :row="entry.row"
+                :index="position"
                 :fields="subFields"
-                :remove="() => removeRow(index)"
-                :path="rowPath(index)"
+                :remove="() => removeRow(entry.index)"
+                :path="rowPath(entry.index)"
             />
 
             <!-- Default row: stack each sub-field -->
             <template v-else>
                 <div class="dx-repeater-row-header">
-                    <span class="dx-repeater-row-index">{{ index + 1 }}</span>
+                    <span class="dx-repeater-row-index">{{ position + 1 }}</span>
                     <DButton
                         variant="outline-danger"
                         size="sm"
-                        :disabled="rows.length <= minItems"
-                        @click="removeRow(index)"
+                        :disabled="visibleRows.length <= minItems"
+                        @click="removeRow(entry.index)"
                     >
                         Remove
                     </DButton>
@@ -47,9 +47,9 @@
                     :key="subField.key"
                     :field="subField"
                     :form="form"
-                    :model="row"
-                    :key-path="`${rowPath(index)}.${subField.key}`"
-                    :error-key="`${rowPath(index)}.${subField.key}`"
+                    :model="entry.row"
+                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
                 />
             </template>
         </div>
@@ -57,7 +57,7 @@
         <DButton
             variant="outline-primary"
             size="sm"
-            :disabled="maxItems !== undefined && rows.length >= maxItems"
+            :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
             @click="addRow"
         >
             {{ field.addLabel || "Add" }}
@@ -97,10 +97,21 @@ const arrayPath = computed(() => props.keyPath ?? props.field.key);
 const subFields = computed<FieldDefinition[]>(() => props.field.fields ?? []);
 const minItems = computed(() => props.field.minItems ?? 0);
 const maxItems = computed(() => props.field.maxItems);
+const softDeleteKey = computed(() => props.field.softDeleteKey);
+
+function isSoftDeleted(row: any): boolean {
+    return Boolean(
+        softDeleteKey.value &&
+            row &&
+            typeof row === "object" &&
+            row[softDeleteKey.value],
+    );
+}
 
 /**
- * The live rows array. Ensures form.data holds an array at the path so
- * push/splice are reactive even when the form was seeded without one.
+ * The full rows array, including any row flagged via `softDeleteKey`. Ensures
+ * form.data holds an array at the path so push/splice are reactive even when
+ * the form was seeded without one.
  */
 const rows = computed<any[]>(() => {
     const existing = getByPath(props.form.data, arrayPath.value);
@@ -108,6 +119,18 @@ const rows = computed<any[]>(() => {
     return [];
 });
 
+/**
+ * Rows shown in the UI, paired with their real (unfiltered) array index —
+ * a soft-deleted row stays in `form.data` (so it's submitted) but is hidden
+ * here, and every path/splice operation must still target its true index,
+ * not its position among visible rows.
+ */
+const visibleRows = computed<Array<{ row: any; index: number }>>(() =>
+    rows.value
+        .map((row, index) => ({ row, index }))
+        .filter(({ row }) => !isSoftDeleted(row)),
+);
+
 const rowPath = (index: number): string => `${arrayPath.value}.${index}`;
 
 // Stable v-for keys tied to row object identity, so removing a middle row
@@ -118,8 +141,7 @@ const rowPath = (index: number): string => `${arrayPath.value}.${index}`;
 const generatedKeys = new WeakMap<object, number>();
 let nextGeneratedKey = 0;
 
-const rowKey = (index: number): string | number => {
-    const row = rows.value[index];
+const rowKey = (row: any, fallbackPosition: number): string | number => {
     if (row && typeof row === "object") {
         if (row.id !== undefined && row.id !== null) return row.id;
         let key = generatedKeys.get(row);
@@ -130,7 +152,7 @@ const rowKey = (index: number): string | number => {
         }
         return `gen-${key}`;
     }
-    return index;
+    return fallbackPosition;
 };
 
 /** Default value for a freshly added row's sub-field. */
@@ -188,7 +210,7 @@ function clearArrayErrors(): void {
 }
 
 function addRow(): void {
-    if (maxItems.value !== undefined && rows.value.length >= maxItems.value) {
+    if (maxItems.value !== undefined && visibleRows.value.length >= maxItems.value) {
         return;
     }
     // Ensure the array exists on form.data before pushing (path may be
@@ -202,8 +224,21 @@ function addRow(): void {
 }
 
 function removeRow(index: number): void {
-    if (rows.value.length <= minItems.value) return;
-    getByPath(props.form.data, arrayPath.value).splice(index, 1);
+    if (visibleRows.value.length <= minItems.value) return;
+    const array = getByPath(props.form.data, arrayPath.value);
+    const row = array?.[index];
+
+    // A row the server already knows about (carries an `id`) can't just be
+    // spliced away under an upsert-children contract — the server never
+    // learns it was removed. Flag it instead so it's still submitted, and
+    // let it disappear from the UI via `visibleRows`.
+    if (softDeleteKey.value && row && typeof row === "object" && row.id !== undefined && row.id !== null) {
+        row[softDeleteKey.value] = true;
+        clearArrayErrors();
+        return;
+    }
+
+    array.splice(index, 1);
     clearArrayErrors();
 }
 </script>

package/resources/js/types/index.ts

@@ -190,6 +190,19 @@ export interface FieldDefinition {
     minItems?: number;
     maxItems?: number;
 
+    /**
+     * For `repeater` fields backed by an upsert-children API contract (rows
+     * carrying a persisted `id` are only deleted server-side when submitted
+     * flagged, e.g. Laravel's `{ id, to_delete: true }` pattern): the
+     * sub-field key to set `true` when a row is removed, instead of splicing
+     * it out of the array. Only applies to rows that already have an `id`
+     * (freshly added, never-persisted rows are still spliced normally since
+     * the server has never seen them). Flagged rows remain in `form.data`
+     * (so they're submitted) but are hidden from the UI and excluded from
+     * `minItems`/`maxItems` counts.
+     */
+    softDeleteKey?: string;
+
     /** Disable the field (static or computed from the model). */
     disabled?: MaybeFn<boolean>;