Skip to content

Commit 6d4141e

Browse files
committed
docs: add flexible field support documentation
- Create docs/flexible-field-support.md with comprehensive guide - Document usage patterns for nova-flexible-content integration - Explain context-aware attribute resolution mechanism - Document supported attribute format patterns - Include limitations and troubleshooting sections
1 parent a0159c8 commit 6d4141e

1 file changed

Lines changed: 159 additions & 0 deletions

File tree

docs/flexible-field-support.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
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

Comments
 (0)