Merge pull request #3 from iamgerwin/feat/issue-2-flexible-field-support

feat: add flexible field support for nova-flexible-content integration

Author: iamgerwin

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to `nova-dependency-container` will be documented in this file.
 
+## [1.0.5] - 2025-11-25
+
+### Added
+- Added support for [whitecube/nova-flexible-content](https://github.com/whitecube/nova-flexible-content) Flexible field layouts ([#2](https://github.com/iamgerwin/nova-dependency-container/issues/2))
+- Added context-aware dependency resolution for nested field structures
+- Added automatic detection of Flexible field attribute prefixes
+- Added support for multiple Flexible attribute formats (double underscore and bracket notation)
+- Added comprehensive documentation for Flexible field support (`docs/flexible-field-support.md`)
+
+### Changed
+- Enhanced `findFieldByAttribute()` method to support prefix-based field lookups
+- Enhanced `getFieldValue()` method to check multiple attribute formats
+- Enhanced `handleFieldChanged()` to cache both full and base attribute values
+
+### Technical
+- Implemented `getFlexibleContextPrefix()` for detecting Flexible field context
+- Implemented `extractBaseAttribute()` for parsing prefixed attribute names
+- Implemented `getFlexibleAttributeFormats()` for generating alternative attribute patterns
+- Updated both `FormField.vue` and `DetailField.vue` components
+
 ## [1.0.4] - 2025-11-25
 
 ### Fixed

README.md

@@ -14,6 +14,7 @@ A Laravel Nova field container allowing fields to depend on other field values.
 - **Conditional Field Display**: Show/hide fields based on other field values
 - **Multiple Dependency Types**: Support for various comparison operators
 - **Complex Logic**: Chain multiple conditions together
+- **Flexible Field Support**: Works with [whitecube/nova-flexible-content](https://github.com/whitecube/nova-flexible-content) layouts
 - **Nova 4 & 5 Compatible**: Works with Laravel Nova 4.x and 5.x (tested with Nova 4.35.x and Nova 5.7.5)
 - **Laravel 12 Ready**: Full support for Laravel 11.x and 12.x
 - **PHP 8.3 Support**: Modern PHP features and type safety
@@ -187,6 +188,41 @@ CustomTextField::make('Special Field')
     ->dependsOn('type', 'custom')
 ```
 
+### Using with Flexible Fields
+
+`NovaDependencyContainer` works seamlessly with [whitecube/nova-flexible-content](https://github.com/whitecube/nova-flexible-content) Flexible fields:
+
+```php
+use Iamgerwin\NovaDependencyContainer\NovaDependencyContainer;
+use Whitecube\NovaFlexibleContent\Flexible;
+use Laravel\Nova\Fields\Select;
+use Laravel\Nova\Fields\Text;
+
+Flexible::make('Overlay Items')
+    ->addLayout('Overlay Item', 'overlay_item', [
+        Select::make('Type')
+            ->options([
+                'Default' => 'Default',
+                'Location' => 'Location',
+                'Contact Us' => 'Contact Us',
+            ]),
+
+        NovaDependencyContainer::make([
+            Text::make('Recipient Email', 'recipient_email')
+                ->rules('nullable', 'email', 'max:255'),
+        ])->dependsOn('type', 'Contact Us'),
+
+        NovaDependencyContainer::make([
+            Text::make('Location Name', 'location_name'),
+            Text::make('Address', 'address'),
+        ])->dependsOn('type', 'Location'),
+    ]),
+```
+
+The package automatically detects the Flexible field context and resolves field attributes correctly, even with dynamically prefixed attribute names.
+
+For more details, see the [Flexible Field Support documentation](docs/flexible-field-support.md).
+
 ## Advanced Examples
 
 ### Multi-Step Form

docs/flexible-field-support.md

@@ -0,0 +1,159 @@
+# Flexible Field Support
+
+This document describes how `NovaDependencyContainer` works with [whitecube/nova-flexible-content](https://github.com/whitecube/nova-flexible-content) Flexible fields.
+
+## Overview
+
+Starting from version 1.0.5, `NovaDependencyContainer` supports conditional field visibility inside Flexible field layouts. This enables dynamic form behavior within repeatable content blocks.
+
+## The Problem
+
+When fields are placed inside a Flexible layout, their attribute names are automatically prefixed by the Flexible field component. For example:
+
+- A field named `type` inside a Flexible layout becomes `overlay_items__0__type`
+- The index (`0`, `1`, `2`, etc.) changes based on the layout position
+
+This prefixing caused the original dependency detection to fail because it looked for exact attribute matches.
+
+## The Solution
+
+The package now implements **context-aware dependency resolution** that:
+
+1. Detects when a field is inside a Flexible layout context
+2. Automatically resolves relative field names to their prefixed equivalents
+3. Supports multiple Flexible attribute formats (double underscore and bracket notation)
+4. Falls back to suffix matching for edge cases
+
+## Usage
+
+Use `NovaDependencyContainer` inside Flexible layouts exactly as you would elsewhere:
+
+```php
+use Iamgerwin\NovaDependencyContainer\NovaDependencyContainer;
+use Whitecube\NovaFlexibleContent\Flexible;
+use Laravel\Nova\Fields\Select;
+use Laravel\Nova\Fields\Text;
+
+Flexible::make('Overlay Items')
+    ->addLayout('Overlay Item', 'overlay_item', [
+        Select::make('Type')
+            ->options([
+                'Default' => 'Default',
+                'Location' => 'Location',
+                'Contact Us' => 'Contact Us',
+            ]),
+
+        NovaDependencyContainer::make([
+            Text::make('Recipient Email', 'recipient_email')
+                ->rules('nullable', 'email', 'max:255'),
+        ])->dependsOn('type', 'Contact Us'),
+
+        NovaDependencyContainer::make([
+            Text::make('Location Name', 'location_name'),
+            Text::make('Address', 'address'),
+        ])->dependsOn('type', 'Location'),
+    ]),
+```
+
+## How It Works
+
+### Attribute Resolution
+
+When you specify `dependsOn('type', 'Contact Us')`, the package:
+
+1. First attempts an exact match for `type`
+2. If not found, detects the Flexible context prefix from sibling fields
+3. Resolves to the prefixed attribute (e.g., `overlay_items__0__type`)
+4. Checks multiple format variations for compatibility
+
+### Supported Attribute Formats
+
+The package recognizes these Flexible field attribute patterns:
+
+| Format | Example |
+|--------|---------|
+| Double underscore | `overlay_items__0__type` |
+| Bracket notation | `overlay_items[0][type]` |
+| Single underscore | `overlay_items_0_type` |
+
+### Event Handling
+
+When a field value changes inside a Flexible layout:
+
+1. The change event includes the full prefixed attribute
+2. The package extracts the base attribute name
+3. Both the full and base attribute values are cached
+4. Dependencies are re-evaluated against all matching fields
+
+## Multiple Flexible Groups
+
+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.
+
+```php
+// Layout instance 0: type = 'Contact Us' -> shows recipient_email
+// Layout instance 1: type = 'Location' -> shows location_name, address
+// Layout instance 2: type = 'Default' -> hides all dependent fields
+```
+
+## Limitations
+
+### Cross-Group Dependencies
+
+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.
+
+### Deeply Nested Flexible Fields
+
+The package supports one level of Flexible field nesting. Deeply nested Flexible fields (Flexible inside Flexible) may not resolve correctly.
+
+### Detail View
+
+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.
+
+## Troubleshooting
+
+### Dependency Not Triggering
+
+If a dependency isn't working inside a Flexible layout:
+
+1. **Check the field attribute name**: Ensure you're using the simple attribute name (e.g., `type`) not the prefixed version
+2. **Verify the field exists**: The dependent field must be in the same Flexible layout group
+3. **Check the console**: Browser dev tools may show helpful debugging information
+
+### Field Visibility Stuck
+
+If a field remains hidden when it should be visible:
+
+1. Try selecting a different option and then back to the triggering value
+2. Ensure the comparison value matches exactly (including case sensitivity)
+
+## Technical Details
+
+### Context Detection
+
+The Flexible context is detected by examining:
+
+1. The container's own `attribute` property
+2. Sibling field `attribute` properties
+3. Parent component structure
+
+### Regex Patterns Used
+
+```javascript
+// Double underscore format
+/^(.+__\d+__)/
+
+// Bracket format
+/^(.+\[\d+\]\[)/
+
+// Base attribute extraction (double underscore)
+/^.+__\d+__(.+)$/
+
+// Base attribute extraction (bracket)
+/^.+\[\d+\]\[(.+)\]$/
+```
+
+## Version History
+
+- **1.0.5**: Added Flexible field support (this feature)
+- **1.0.4**: Nova 4.35.x compatibility fixes
+- **1.0.0**: Initial release

resources/js/components/DetailField.vue

@@ -112,13 +112,137 @@ export default {
     },
 
     findFieldByAttribute(attribute) {
-      const parent = this.$parent;
-      if (parent && parent.fields) {
-        return parent.fields.find(f => f.attribute === attribute);
+      const allFields = this.getAllFields();
+
+      // First try exact match
+      const exactMatch = allFields.find(f => f.attribute === attribute);
+      if (exactMatch) {
+        return exactMatch;
+      }
+
+      // For Flexible fields: resolve attribute relative to current context
+      const contextPrefix = this.getFlexibleContextPrefix();
+      if (contextPrefix) {
+        // Try to find field with same prefix (within same Flexible group)
+        const prefixedAttribute = `${contextPrefix}${attribute}`;
+        const prefixedMatch = allFields.find(f => f.attribute === prefixedAttribute);
+        if (prefixedMatch) {
+          return prefixedMatch;
+        }
+
+        // Also try alternative Flexible attribute formats
+        const alternativeFormats = this.getFlexibleAttributeFormats(contextPrefix, attribute);
+        for (const format of alternativeFormats) {
+          const match = allFields.find(f => f.attribute === format);
+          if (match) {
+            return match;
+          }
+        }
+      }
+
+      // Fallback: find any field that ends with the attribute name (for nested contexts)
+      const suffixMatch = allFields.find(f => {
+        if (!f.attribute) return false;
+        const attr = f.attribute;
+        // Match patterns like: prefix__attribute, prefix[index][attribute]
+        return attr.endsWith(`__${attribute}`) ||
+               attr.endsWith(`][${attribute}]`) ||
+               attr.endsWith(`[${attribute}]`);
+      });
+
+      return suffixMatch || null;
+    },
+
+    /**
+     * Get all fields from the parent context.
+     * Handles both standard Nova detail views and nested Flexible field contexts.
+     */
+    getAllFields() {
+      // Walk up the component tree to find fields
+      let parent = this.$parent;
+      let maxDepth = 10;
+
+      while (parent && maxDepth-- > 0) {
+        // Check for fields array directly on parent
+        if (parent.fields && Array.isArray(parent.fields)) {
+          return parent.fields;
+        }
+        // Check for fields in parent's refs
+        if (parent.$refs?.fields && Array.isArray(parent.$refs.fields)) {
+          return parent.$refs.fields.map(f => f.field || f);
+        }
+        parent = parent.$parent;
+      }
+
+      return [];
+    },
+
+    /**
+     * Detect the Flexible field context prefix from the container's own field attribute.
+     * Flexible fields use prefixes like: flexible_key__index__ or flexible_key[index]
+     */
+    getFlexibleContextPrefix() {
+      // Check if this container has a prefixed attribute (indicating it's inside a Flexible field)
+      const ownAttribute = this.field?.attribute || '';
+
+      // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
+      const underscoreMatch = ownAttribute.match(/^(.+__\d+__)/);
+      if (underscoreMatch) {
+        return underscoreMatch[1];
+      }
+
+      // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
+      const bracketMatch = ownAttribute.match(/^(.+\[\d+\]\[)/);
+      if (bracketMatch) {
+        return bracketMatch[1];
+      }
+
+      // Try to detect from parent/sibling field attributes
+      const siblingFields = this.field?.fields || [];
+      for (const sibling of siblingFields) {
+        if (sibling.attribute) {
+          const siblingUnderscoreMatch = sibling.attribute.match(/^(.+__\d+__)/);
+          if (siblingUnderscoreMatch) {
+            return siblingUnderscoreMatch[1];
+          }
+          const siblingBracketMatch = sibling.attribute.match(/^(.+\[\d+\]\[)/);
+          if (siblingBracketMatch) {
+            return siblingBracketMatch[1];
+          }
+        }
       }
+
       return null;
     },
 
+    /**
+     * Generate alternative attribute formats for Flexible fields.
+     */
+    getFlexibleAttributeFormats(prefix, attribute) {
+      const formats = [];
+
+      // Extract the base key and index from the prefix
+      const underscoreMatch = prefix.match(/^(.+)__(\d+)__$/);
+      const bracketMatch = prefix.match(/^(.+)\[(\d+)\]\[$/);
+
+      if (underscoreMatch) {
+        const [, key, index] = underscoreMatch;
+        // Generate bracket format alternative
+        formats.push(`${key}[${index}][${attribute}]`);
+        // Single underscore variant
+        formats.push(`${key}_${index}_${attribute}`);
+      }
+
+      if (bracketMatch) {
+        const [, key, index] = bracketMatch;
+        // Generate underscore format alternative
+        formats.push(`${key}__${index}__${attribute}`);
+        formats.push(`${key}_${index}_${attribute}`);
+      }
+
+      return formats;
+    },
+
     isEmpty(value) {
       return value === null ||
              value === undefined ||