|
| 1 | +# Flexible Field Support |
| 2 | + |
| 3 | +This document describes how `NovaDependencyContainer` works with [whitecube/nova-flexible-content](https://github.com/whitecube/nova-flexible-content) Flexible fields. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +Starting from version 1.0.5, `NovaDependencyContainer` supports conditional field visibility inside Flexible field layouts. This enables dynamic form behavior within repeatable content blocks. |
| 8 | + |
| 9 | +## The Problem |
| 10 | + |
| 11 | +When fields are placed inside a Flexible layout, their attribute names are automatically prefixed by the Flexible field component. For example: |
| 12 | + |
| 13 | +- A field named `type` inside a Flexible layout becomes `overlay_items__0__type` |
| 14 | +- The index (`0`, `1`, `2`, etc.) changes based on the layout position |
| 15 | + |
| 16 | +This prefixing caused the original dependency detection to fail because it looked for exact attribute matches. |
| 17 | + |
| 18 | +## The Solution |
| 19 | + |
| 20 | +The package now implements **context-aware dependency resolution** that: |
| 21 | + |
| 22 | +1. Detects when a field is inside a Flexible layout context |
| 23 | +2. Automatically resolves relative field names to their prefixed equivalents |
| 24 | +3. Supports multiple Flexible attribute formats (double underscore and bracket notation) |
| 25 | +4. Falls back to suffix matching for edge cases |
| 26 | + |
| 27 | +## Usage |
| 28 | + |
| 29 | +Use `NovaDependencyContainer` inside Flexible layouts exactly as you would elsewhere: |
| 30 | + |
| 31 | +```php |
| 32 | +use Iamgerwin\NovaDependencyContainer\NovaDependencyContainer; |
| 33 | +use Whitecube\NovaFlexibleContent\Flexible; |
| 34 | +use Laravel\Nova\Fields\Select; |
| 35 | +use Laravel\Nova\Fields\Text; |
| 36 | + |
| 37 | +Flexible::make('Overlay Items') |
| 38 | + ->addLayout('Overlay Item', 'overlay_item', [ |
| 39 | + Select::make('Type') |
| 40 | + ->options([ |
| 41 | + 'Default' => 'Default', |
| 42 | + 'Location' => 'Location', |
| 43 | + 'Contact Us' => 'Contact Us', |
| 44 | + ]), |
| 45 | + |
| 46 | + NovaDependencyContainer::make([ |
| 47 | + Text::make('Recipient Email', 'recipient_email') |
| 48 | + ->rules('nullable', 'email', 'max:255'), |
| 49 | + ])->dependsOn('type', 'Contact Us'), |
| 50 | + |
| 51 | + NovaDependencyContainer::make([ |
| 52 | + Text::make('Location Name', 'location_name'), |
| 53 | + Text::make('Address', 'address'), |
| 54 | + ])->dependsOn('type', 'Location'), |
| 55 | + ]), |
| 56 | +``` |
| 57 | + |
| 58 | +## How It Works |
| 59 | + |
| 60 | +### Attribute Resolution |
| 61 | + |
| 62 | +When you specify `dependsOn('type', 'Contact Us')`, the package: |
| 63 | + |
| 64 | +1. First attempts an exact match for `type` |
| 65 | +2. If not found, detects the Flexible context prefix from sibling fields |
| 66 | +3. Resolves to the prefixed attribute (e.g., `overlay_items__0__type`) |
| 67 | +4. Checks multiple format variations for compatibility |
| 68 | + |
| 69 | +### Supported Attribute Formats |
| 70 | + |
| 71 | +The package recognizes these Flexible field attribute patterns: |
| 72 | + |
| 73 | +| Format | Example | |
| 74 | +|--------|---------| |
| 75 | +| Double underscore | `overlay_items__0__type` | |
| 76 | +| Bracket notation | `overlay_items[0][type]` | |
| 77 | +| Single underscore | `overlay_items_0_type` | |
| 78 | + |
| 79 | +### Event Handling |
| 80 | + |
| 81 | +When a field value changes inside a Flexible layout: |
| 82 | + |
| 83 | +1. The change event includes the full prefixed attribute |
| 84 | +2. The package extracts the base attribute name |
| 85 | +3. Both the full and base attribute values are cached |
| 86 | +4. Dependencies are re-evaluated against all matching fields |
| 87 | + |
| 88 | +## Multiple Flexible Groups |
| 89 | + |
| 90 | +Dependencies work correctly across multiple instances of the same layout. Each layout group maintains its own context, so changing `type` in one Overlay Item only affects the dependent fields in that same group. |
| 91 | + |
| 92 | +```php |
| 93 | +// Layout instance 0: type = 'Contact Us' -> shows recipient_email |
| 94 | +// Layout instance 1: type = 'Location' -> shows location_name, address |
| 95 | +// Layout instance 2: type = 'Default' -> hides all dependent fields |
| 96 | +``` |
| 97 | + |
| 98 | +## Limitations |
| 99 | + |
| 100 | +### Cross-Group Dependencies |
| 101 | + |
| 102 | +Currently, dependencies are resolved within the same Flexible group context. Cross-group dependencies (e.g., a field in group 0 depending on a field in group 1) are not supported. |
| 103 | + |
| 104 | +### Deeply Nested Flexible Fields |
| 105 | + |
| 106 | +The package supports one level of Flexible field nesting. Deeply nested Flexible fields (Flexible inside Flexible) may not resolve correctly. |
| 107 | + |
| 108 | +### Detail View |
| 109 | + |
| 110 | +Flexible field support works best on form views (create/edit). Detail view support is included but may have limitations depending on how the Flexible content renders field data. |
| 111 | + |
| 112 | +## Troubleshooting |
| 113 | + |
| 114 | +### Dependency Not Triggering |
| 115 | + |
| 116 | +If a dependency isn't working inside a Flexible layout: |
| 117 | + |
| 118 | +1. **Check the field attribute name**: Ensure you're using the simple attribute name (e.g., `type`) not the prefixed version |
| 119 | +2. **Verify the field exists**: The dependent field must be in the same Flexible layout group |
| 120 | +3. **Check the console**: Browser dev tools may show helpful debugging information |
| 121 | + |
| 122 | +### Field Visibility Stuck |
| 123 | + |
| 124 | +If a field remains hidden when it should be visible: |
| 125 | + |
| 126 | +1. Try selecting a different option and then back to the triggering value |
| 127 | +2. Ensure the comparison value matches exactly (including case sensitivity) |
| 128 | + |
| 129 | +## Technical Details |
| 130 | + |
| 131 | +### Context Detection |
| 132 | + |
| 133 | +The Flexible context is detected by examining: |
| 134 | + |
| 135 | +1. The container's own `attribute` property |
| 136 | +2. Sibling field `attribute` properties |
| 137 | +3. Parent component structure |
| 138 | + |
| 139 | +### Regex Patterns Used |
| 140 | + |
| 141 | +```javascript |
| 142 | +// Double underscore format |
| 143 | +/^(.+__\d+__)/ |
| 144 | + |
| 145 | +// Bracket format |
| 146 | +/^(.+\[\d+\]\[)/ |
| 147 | + |
| 148 | +// Base attribute extraction (double underscore) |
| 149 | +/^.+__\d+__(.+)$/ |
| 150 | + |
| 151 | +// Base attribute extraction (bracket) |
| 152 | +/^.+\[\d+\]\[(.+)\]$/ |
| 153 | +``` |
| 154 | + |
| 155 | +## Version History |
| 156 | + |
| 157 | +- **1.0.5**: Added Flexible field support (this feature) |
| 158 | +- **1.0.4**: Nova 4.35.x compatibility fixes |
| 159 | +- **1.0.0**: Initial release |
0 commit comments