Allow dynamic grid rows

resources/js/formFields.js

@@ -93,6 +93,12 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
         },
 
         initializeFields(fields) {
+            // Pre-compute handle→default map for O(1) lookups (used by dynamic_rows_field)
+            const defaultsByHandle = Object.create(null)
+            for (const f of fields) {
+                defaultsByHandle[f.handle] = f.default
+            }
+
             return fields.reduce((acc, field) => {
                 // Handle group fields - initialize nested fields with dot notation
                 if (field.type === 'group' && field.group_fields) {
@@ -105,7 +111,20 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
 
                 // Handle grid fields - initialize with flat indexed keys
                 if (field.type === 'grid' && field.grid_fields) {
-                    const rowCount = field.fixed_rows || field.min_rows || 1
+                    let rowCount
+                    if (field.dynamic_rows_field) {
+                        // Look up from acc first (already processed), then fall back to the field's default
+                        const controlValue = parseInt(
+                            acc[field.dynamic_rows_field]
+                            ?? defaultsByHandle[field.dynamic_rows_field]
+                        ) || 0
+                        rowCount = Math.max(controlValue, field.min_rows || 0)
+                        if (field.max_rows) {
+                            rowCount = Math.min(rowCount, field.max_rows)
+                        }
+                    } else {
+                        rowCount = field.fixed_rows || field.min_rows || 1
+                    }
                     // Initialize flat state with indexed keys for each row
                     for (let i = 0; i < rowCount; i++) {
                         field.grid_fields.forEach(nestedField => {
@@ -276,7 +295,7 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
             this.submitFields[countKey] = currentCount + 1
 
             // Clone template row in DOM
-            this.cloneGridRow(handle, currentCount)
+            this.cloneGridRow(handle, currentCount, true)
         },
 
         /**
@@ -293,28 +312,40 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
             // Check min_rows limit
             if (field.min_rows && currentCount <= field.min_rows) return
 
-            // Remove row fields from state
-            field.grid_fields.forEach(f => {
-                delete this.submitFields[`${handle}.${index}.${f.handle}`]
-            })
+            const gridId = this.formId ? `${this.formId}_${handle}` : handle
+            const container = document.querySelector(`[data-grid-rows="${gridId}"]`)
+            const row = container?.querySelector(`[data-grid-row="${index}"]`)
 
-            // Shift remaining rows down
-            for (let i = index + 1; i < currentCount; i++) {
+            const cleanup = () => {
+                // Remove row fields from state
                 field.grid_fields.forEach(f => {
-                    const oldKey = `${handle}.${i}.${f.handle}`
-                    const newKey = `${handle}.${i - 1}.${f.handle}`
-                    this.submitFields[newKey] = this.submitFields[oldKey]
-                    delete this.submitFields[oldKey]
+                    delete this.submitFields[`${handle}.${index}.${f.handle}`]
                 })
-            }
 
-            this.submitFields[countKey] = currentCount - 1
+                // Shift remaining rows down
+                for (let i = index + 1; i < currentCount; i++) {
+                    field.grid_fields.forEach(f => {
+                        const oldKey = `${handle}.${i}.${f.handle}`
+                        const newKey = `${handle}.${i - 1}.${f.handle}`
+                        this.submitFields[newKey] = this.submitFields[oldKey]
+                        delete this.submitFields[oldKey]
+                    })
+                }
 
-            // Shift errors in the parent formHandler component
-            this.$dispatch('grid-row-removed', { handle, removedIndex: index })
+                this.submitFields[countKey] = currentCount - 1
+
+                // Shift errors in the parent formHandler component
+                this.$dispatch('grid-row-removed', { handle, removedIndex: index })
+
+                // Rebuild all DOM rows so Alpine creates fresh, correct bindings
+                this.rebuildGridRows(handle)
+            }
 
-            // Rebuild all DOM rows so Alpine creates fresh, correct bindings
-            this.rebuildGridRows(handle)
+            if (row) {
+                this.animateGridRowOut(row, cleanup)
+            } else {
+                cleanup()
+            }
         },
 
         /**
@@ -342,7 +373,7 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
         /**
          * Clone template row in DOM and replace __INDEX__ placeholders.
          */
-        cloneGridRow(handle, index) {
+        cloneGridRow(handle, index, animate = false) {
             const gridId = this.formId ? `${this.formId}_${handle}` : handle
             const template = document.querySelector(`[data-grid-template="${gridId}"]`)
             const container = document.querySelector(`[data-grid-rows="${gridId}"]`)
@@ -381,6 +412,10 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
             }
 
             row.setAttribute('data-grid-row', index)
+            if (animate) {
+                row.classList.add('ef-row-enter')
+                row.addEventListener('animationend', () => row.classList.remove('ef-row-enter'), { once: true })
+            }
             container.appendChild(row)
         },
 
@@ -404,5 +439,104 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat
                 this.cloneGridRow(handle, i)
             }
         },
+
+        /**
+         * Set the row count for a grid field, adding or removing rows as needed.
+         */
+        setGridRowCount(handle, newCount) {
+            const field = this.fieldsMap[handle]
+            if (!field?.grid_fields) return
+
+            let count = Math.max(parseInt(newCount) || 0, field.min_rows || 0)
+            if (field.max_rows) {
+                count = Math.min(count, field.max_rows)
+            }
+
+            const countKey = `_grid_count_${handle}`
+            const currentCount = this.submitFields[countKey] || 0
+            if (count === currentCount) return
+
+            const gridId = this.formId ? `${this.formId}_${handle}` : handle
+            const container = document.querySelector(`[data-grid-rows="${gridId}"]`)
+
+            // Clean up any rows still animating out from a previous change
+            if (container) {
+                container.querySelectorAll('.ef-row-exit').forEach(row => row.remove())
+            }
+
+            if (count > currentCount) {
+                for (let i = currentCount; i < count; i++) {
+                    field.grid_fields.forEach(f => {
+                        this.submitFields[`${handle}.${i}.${f.handle}`] = this.getFieldDefaultValue(f)
+                    })
+                    this.cloneGridRow(handle, i, true)
+                }
+            } else {
+                for (let i = currentCount - 1; i >= count; i--) {
+                    field.grid_fields.forEach(f => {
+                        delete this.submitFields[`${handle}.${i}.${f.handle}`]
+                    })
+                    const row = container?.querySelector(`[data-grid-row="${i}"]`)
+                    if (row) {
+                        this.animateGridRowOut(row)
+                    }
+                    // Clear validation errors for removed rows
+                    this.$dispatch('grid-row-removed', { handle, removedIndex: i })
+                }
+            }
+
+            this.submitFields[countKey] = count
+        },
+
+        /**
+         * Animate a grid row out: fade + translate, then collapse height.
+         * Skips animation for prefers-reduced-motion. Includes safety timeout
+         * in case animationend/transitionend never fires.
+         */
+        animateGridRowOut(row, onComplete) {
+            let done = false
+            const finish = () => {
+                if (done) return
+                done = true
+                row.remove()
+                if (onComplete) onComplete()
+            }
+
+            // Skip animation when user prefers reduced motion
+            if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+                finish()
+                return
+            }
+
+            const safetyTimeout = setTimeout(finish, 400)
+
+            row.classList.add('ef-row-exit')
+            row.addEventListener('animationend', () => {
+                // Phase 2: smoothly collapse the space
+                row.style.height = row.offsetHeight + 'px'
+                row.style.overflow = 'hidden'
+                row.offsetHeight // force reflow
+                row.style.transition = 'height .15s ease-in, margin .15s ease-in'
+                row.style.height = '0'
+                row.style.marginBottom = '0'
+                row.addEventListener('transitionend', () => {
+                    clearTimeout(safetyTimeout)
+                    finish()
+                }, { once: true })
+            }, { once: true })
+        },
+
+        /**
+         * Initialize dynamic grid rows that react to another field's value.
+         */
+        initDynamicGridRows(handle, controlFieldHandle) {
+            this.$watch(
+                () => this.submitFields[controlFieldHandle],
+                (newValue) => this.setGridRowCount(handle, newValue)
+            )
+
+            // Sync immediately in case prepopulated data changed the controlling field
+            this.setGridRowCount(handle, this.submitFields[controlFieldHandle])
+        },
     }
 }

resources/views/form/fieldtypes/_grid.antlers.html

@@ -1,4 +1,14 @@
 {{# Grid Field Template - Uses template cloning approach #}}
+<style>
+    @keyframes ef-grid-row-in { from { opacity: 0; transform: translateY(-.5rem); } }
+    @keyframes ef-grid-row-out { to { opacity: 0; transform: translateY(-.5rem); } }
+    [data-grid-row].ef-row-enter { animation: ef-grid-row-in .2s ease-out; }
+    [data-grid-row].ef-row-exit { animation: ef-grid-row-out .15s ease-in forwards; pointer-events: none; }
+    @media (prefers-reduced-motion: reduce) {
+        [data-grid-row].ef-row-enter,
+        [data-grid-row].ef-row-exit { animation: none; transition: none; }
+    }
+</style>
 <fieldset class="ef-grid mt-6" aria-label="{{ display | trans }}">
     <legend class="sr-only">{{ display | trans }}</legend>
 
@@ -35,10 +45,18 @@
     <div
         data-grid-rows="{{ form_id }}_{{ handle }}"
         x-init="
+            {{ if dynamic_rows_field }}
+            const dynamicValue = parseInt(submitFields['{{ dynamic_rows_field }}']) || 0;
+            const rowCount = submitFields['_grid_count_{{ handle }}'] || Math.max(dynamicValue, {{ min_rows ?? 0 }});
+            {{ else }}
             const rowCount = submitFields['_grid_count_{{ handle }}'] || {{ fixed_rows ?? min_rows ?? 1 }};
+            {{ /if }}
             for (let i = 0; i < rowCount; i++) {
                 cloneGridRow('{{ handle }}', i);
             }
+            {{ if dynamic_rows_field }}
+            initDynamicGridRows('{{ handle }}', '{{ dynamic_rows_field }}');
+            {{ /if }}
         "
     ></div>
 

src/ServiceProvider.php

@@ -232,6 +232,14 @@ public function addConfigOptions()
                 'display' => 'Fixed rows',
                 'instructions' => 'Render exactly this many rows with no add/remove buttons. Overrides min/max.',
             ],
+            'dynamic_rows_field' => [
+                'type' => 'text',
+                'display' => 'Dynamic rows field',
+                'instructions' => 'Handle of a field whose value controls the number of grid rows. The grid will behave as fixed (no add/remove buttons).',
+                'unless' => [
+                    'fixed_rows' => 'not null',
+                ],
+            ],
         ]);
     }
 }

src/Tags/Concerns/HandlesFields.php

@@ -6,8 +6,6 @@
 
 trait HandlesFields
 {
-    protected array $gridRowOverrides = [];
-
     protected static ?\Illuminate\Support\Collection $commonFieldOptionsCache = null;
 
     private const REQUIRED_VALIDATION_KEYS = [
@@ -36,13 +34,6 @@ protected function getCachedCommonFieldOptions(): \Illuminate\Support\Collection
         return self::$commonFieldOptionsCache;
     }
 
-    /**
-     * Set grid row count overrides from the grid_rows tag parameter.
-     */
-    protected function setGridRowOverrides(array $overrides): void
-    {
-        $this->gridRowOverrides = $overrides;
-    }
     /**
      * Process a field to extract needed properties and add optional flag.
      *
@@ -92,14 +83,16 @@ protected function processField($field, ?string $parentHandle = null): array
             $fieldData['min_rows'] = $fieldData['min_rows'] ?? 1;
             $fieldData['max_rows'] = $fieldData['max_rows'] ?? null;
             $fieldData['fixed_rows'] = $fieldData['fixed_rows'] ?? null;
-            $fieldData['is_fixed'] = ! empty($fieldData['fixed_rows']);
-            $fieldData['add_row_text'] = $fieldData['add_row'] ?? __('Add Row');
+            $fieldData['dynamic_rows_field'] = $fieldData['dynamic_rows_field'] ?? null;
 
-            // Apply grid_rows tag parameter override
-            if (isset($this->gridRowOverrides[$field->handle()])) {
-                $fieldData['fixed_rows'] = (int) $this->gridRowOverrides[$field->handle()];
-                $fieldData['is_fixed'] = true;
+            // fixed_rows takes precedence over dynamic_rows_field
+            if (! empty($fieldData['fixed_rows'])) {
+                $fieldData['dynamic_rows_field'] = null;
             }
+
+            $fieldData['is_fixed'] = ! empty($fieldData['fixed_rows']) || ! empty($fieldData['dynamic_rows_field']);
+            $fieldData['add_row_text'] = $fieldData['add_row'] ?? __('Add Row');
+
         }
 
         // Add parent handle for nested fields (used in templates for name prefixing)

src/Tags/EasyForm.php

@@ -42,11 +42,6 @@ public function index(): string
         $form = $this->getForm();
         $blueprint = $form->blueprint();
 
-        $gridRows = $this->params->get('grid_rows', []);
-        if (! empty($gridRows) && is_array($gridRows)) {
-            $this->setGridRowOverrides($gridRows);
-        }
-
         $sectionsData = $this->processSections($blueprint);
 
         // If we have sections, collect fields from them instead of reprocessing