fix: Support nova-flexible-content random key attribute format (#4) (#10)

* fix: support nova-flexible-content random key attribute format

Updated regex patterns in extractPrefixFromAttribute() and extractBaseAttribute()
to handle random alphanumeric keys like 'cSkn6uKpVHMkMLmI__' instead of just
numeric index patterns like 'overlay_items__0__'

Added Pattern 3: ^([a-zA-Z0-9]+__) for random key format

* docs: update changelog and version for v1.0.11

Author: iamgerwin

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to `nova-dependency-container` will be documented in this file.
 
+## [1.0.11] - 2025-11-25
+
+### Fixed
+- Fixed regex patterns to support nova-flexible-content's random key attribute format
+- The package was only matching numeric index patterns like `overlay_items__0__` but not random keys like `cSkn6uKpVHMkMLmI__`
+
+### Changed
+- Updated `extractPrefixFromAttribute()` to support random key format: `^([a-zA-Z0-9]+__)`
+- Updated `extractBaseAttribute()` to extract field names from random key prefixed attributes
+
+### Technical
+- nova-flexible-content uses random alphanumeric keys instead of numeric indices
+- Example: `cSkn6uKpVHMkMLmI__type` instead of `overlay_items__0__type`
+
 ## [1.0.10] - 2025-11-25
 
 ### Fixed

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "iamgerwin/nova-dependency-container",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "description": "A Laravel Nova 4 and 5 field container allowing to depend on other fields values",
     "keywords": [
         "laravel",

dist/js/field.js

@@ -168,6 +168,7 @@ This ensures that changing a field in Overlay Item #1 doesn't affect the depende
 
 ## Version History
 
+- **1.0.11**: Fixed regex patterns to support nova-flexible-content's random key format
 - **1.0.10**: Fixed FieldServiceProvider not registering assets with Nova
 - **1.0.9**: Added debug logging to diagnose Flexible field issues
 - **1.0.8**: Fixed missing compiled assets in package distribution

docs/flexible-field-support.md

@@ -253,15 +253,19 @@ export default {
     },
 
     /**
-     * Extract the prefix (e.g., "overlay_items__0__") from a full attribute.
+     * Extract the prefix from a full attribute.
+     * Supports multiple formats:
+     * - "overlay_items__0__field_name" -> "overlay_items__0__"
+     * - "overlay_items[0][field_name]" -> "overlay_items[0]["
+     * - "cSkn6uKpVHMkMLmI__field_name" -> "cSkn6uKpVHMkMLmI__" (random key format)
      */
     extractPrefixFromAttribute(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 1: Double underscore with numeric index (e.g., "overlay_items__0__field_name")
+      const numericUnderscoreMatch = attribute.match(/^(.+__\d+__)/);
+      if (numericUnderscoreMatch) {
+        return numericUnderscoreMatch[1];
       }
 
       // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
@@ -270,6 +274,12 @@ export default {
         return bracketMatch[1];
       }
 
+      // Pattern 3: Random key format (e.g., "cSkn6uKpVHMkMLmI__field_name" or just "cSkn6uKpVHMkMLmI__")
+      const randomKeyMatch = attribute.match(/^([a-zA-Z0-9]+__)/);
+      if (randomKeyMatch) {
+        return randomKeyMatch[1];
+      }
+
       return null;
     },
 

resources/js/components/DetailField.vue

@@ -252,15 +252,20 @@ export default {
     },
 
     /**
-     * Extract the prefix (e.g., "overlay_items__0__") from a full attribute.
+     * Extract the prefix from a full attribute.
+     * Supports multiple formats:
+     * - "overlay_items__0__field_name" -> "overlay_items__0__"
+     * - "overlay_items[0][field_name]" -> "overlay_items[0]["
+     * - "cSkn6uKpVHMkMLmI__field_name" -> "cSkn6uKpVHMkMLmI__" (random key format)
+     * - "cSkn6uKpVHMkMLmI__" -> "cSkn6uKpVHMkMLmI__" (prefix only)
      */
     extractPrefixFromAttribute(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 1: Double underscore with numeric index (e.g., "overlay_items__0__field_name")
+      const numericUnderscoreMatch = attribute.match(/^(.+__\d+__)/);
+      if (numericUnderscoreMatch) {
+        return numericUnderscoreMatch[1];
       }
 
       // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
@@ -269,21 +274,30 @@ export default {
         return bracketMatch[1];
       }
 
+      // Pattern 3: Random key format (e.g., "cSkn6uKpVHMkMLmI__field_name" or just "cSkn6uKpVHMkMLmI__")
+      // This handles nova-flexible-content's random key format
+      const randomKeyMatch = attribute.match(/^([a-zA-Z0-9]+__)/);
+      if (randomKeyMatch) {
+        return randomKeyMatch[1];
+      }
+
       return null;
     },
 
     /**
      * Extract the base attribute name from a potentially prefixed Flexible field attribute.
-     * e.g., "overlay_items__0__type" -> "type"
-     *       "overlay_items[0][type]" -> "type"
+     * Supports multiple formats:
+     * - "overlay_items__0__type" -> "type"
+     * - "overlay_items[0][type]" -> "type"
+     * - "cSkn6uKpVHMkMLmI__type" -> "type" (random key format)
      */
     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 1: Double underscore with numeric index (e.g., "overlay_items__0__field_name")
+      const numericUnderscoreMatch = attribute.match(/^.+__\d+__(.+)$/);
+      if (numericUnderscoreMatch) {
+        return numericUnderscoreMatch[1];
       }
 
       // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
@@ -292,6 +306,13 @@ export default {
         return bracketMatch[1];
       }
 
+      // Pattern 3: Random key format (e.g., "cSkn6uKpVHMkMLmI__type")
+      // This handles nova-flexible-content's random key format
+      const randomKeyMatch = attribute.match(/^[a-zA-Z0-9]+__(.+)$/);
+      if (randomKeyMatch) {
+        return randomKeyMatch[1];
+      }
+
       return attribute;
     },