feat(vue): add flexible field support to FormField component

- Implement context-aware attribute resolution for Flexible fields
- Add getFlexibleContextPrefix() to detect nested field context
- Add extractBaseAttribute() to parse prefixed attribute names
- Add getFlexibleAttributeFormats() for alternative pattern matching
- Enhance findFieldByAttribute() with prefix-based lookups
- Update getFieldValue() to check multiple attribute formats
- Update handleFieldChanged() to cache both full and base attributes

Resolves #2

Author: iamgerwin

resources/js/components/FormField.vue

@@ -83,10 +83,41 @@ export default {
     },
 
     handleFieldChanged(event) {
-      this.dependentFieldValues[event.field.attribute] = event.value;
+      const fullAttribute = event.field.attribute;
+      this.dependentFieldValues[fullAttribute] = event.value;
+
+      // Also store by base attribute name (without Flexible prefix) for easier lookup
+      const baseAttribute = this.extractBaseAttribute(fullAttribute);
+      if (baseAttribute && baseAttribute !== fullAttribute) {
+        this.dependentFieldValues[baseAttribute] = event.value;
+      }
+
       this.checkDependencies();
     },
 
+    /**
+     * Extract the base attribute name from a potentially prefixed Flexible field attribute.
+     * e.g., "overlay_items__0__type" -> "type"
+     *       "overlay_items[0][type]" -> "type"
+     */
+    extractBaseAttribute(attribute) {
+      if (!attribute) return null;
+
+      // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
+      const underscoreMatch = attribute.match(/^.+__\d+__(.+)$/);
+      if (underscoreMatch) {
+        return underscoreMatch[1];
+      }
+
+      // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
+      const bracketMatch = attribute.match(/^.+\[\d+\]\[(.+)\]$/);
+      if (bracketMatch) {
+        return bracketMatch[1];
+      }
+
+      return attribute;
+    },
+
     checkDependencies() {
       if (!this.field.dependencies || this.field.dependencies.length === 0) {
         this.isVisible = true;
@@ -154,10 +185,29 @@ export default {
     },
 
     getFieldValue(fieldAttribute) {
+      // First check exact match in cache
       if (this.dependentFieldValues.hasOwnProperty(fieldAttribute)) {
         return this.dependentFieldValues[fieldAttribute];
       }
 
+      // Check for prefixed version in cache (for Flexible field contexts)
+      const contextPrefix = this.getFlexibleContextPrefix();
+      if (contextPrefix) {
+        const prefixedAttribute = `${contextPrefix}${fieldAttribute}`;
+        if (this.dependentFieldValues.hasOwnProperty(prefixedAttribute)) {
+          return this.dependentFieldValues[prefixedAttribute];
+        }
+
+        // Try alternative formats
+        const alternativeFormats = this.getFlexibleAttributeFormats(contextPrefix, fieldAttribute);
+        for (const format of alternativeFormats) {
+          if (this.dependentFieldValues.hasOwnProperty(format)) {
+            return this.dependentFieldValues[format];
+          }
+        }
+      }
+
+      // Fallback to finding field in DOM
       const field = this.findFieldByAttribute(fieldAttribute);
       if (field) {
         return field.value;
@@ -167,8 +217,140 @@ export default {
     },
 
     findFieldByAttribute(attribute) {
-      const allFields = Nova.$parent?.$refs?.fields || [];
-      return allFields.find(f => f.field && f.field.attribute === attribute);
+      const allFields = this.getAllFields();
+
+      // First try exact match
+      const exactMatch = allFields.find(f => f.field && f.field.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.field && f.field.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.field && f.field.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.field || !f.field.attribute) return false;
+        const attr = f.field.attribute;
+        // Match patterns like: prefix__attribute, prefix[index][attribute]
+        return attr.endsWith(`__${attribute}`) ||
+               attr.endsWith(`][${attribute}]`) ||
+               attr.endsWith(`[${attribute}]`);
+      });
+
+      return suffixMatch || null;
+    },
+
+    /**
+     * Get all rendered fields from the Nova form.
+     * Handles both standard Nova forms and nested Flexible field contexts.
+     */
+    getAllFields() {
+      // Try Nova's global field reference first
+      if (Nova.$parent?.$refs?.fields) {
+        return Nova.$parent.$refs.fields;
+      }
+
+      // Walk up the component tree to find fields
+      let parent = this.$parent;
+      let maxDepth = 10;
+
+      while (parent && maxDepth-- > 0) {
+        // Check for fields in parent's refs
+        if (parent.$refs?.fields && Array.isArray(parent.$refs.fields)) {
+          return parent.$refs.fields;
+        }
+        // Check for fields array directly on parent
+        if (parent.fields && Array.isArray(parent.fields)) {
+          return parent.fields.map(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) {