Connected array fields

dist/assets/admin/twill-manifest.json

@@ -12,19 +12,19 @@
   "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
   "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
   "chunk-common.css": "/assets/admin/css/chunk-common.56e32a1e.css",
-  "chunk-common.js": "/assets/admin/js/chunk-common.745ade52.js",
+  "chunk-common.js": "/assets/admin/js/chunk-common.a55bf0c0.js",
   "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
   "chunk-vendors.js": "/assets/admin/js/chunk-vendors.3abec3c2.js",
   "icons-files.php": "/views/partials/icons/icons-files-svg.blade.php",
   "icons-wysiwyg.php": "/views/partials/icons/icons-wysiwyg-svg.blade.php",
   "icons.php": "/views/partials/icons/icons-svg.blade.php",
   "main-buckets.css": "/assets/admin/css/main-buckets.4476e8eb.css",
-  "main-buckets.js": "/assets/admin/js/main-buckets.e9129bfc.js",
+  "main-buckets.js": "/assets/admin/js/main-buckets.1a7f0192.js",
   "main-dashboard.css": "/assets/admin/css/main-dashboard.cc2042d4.css",
-  "main-dashboard.js": "/assets/admin/js/main-dashboard.5cd3464d.js",
+  "main-dashboard.js": "/assets/admin/js/main-dashboard.3d362959.js",
   "main-form.css": "/assets/admin/css/main-form.392fdcf2.css",
-  "main-form.js": "/assets/admin/js/main-form.da131861.js",
+  "main-form.js": "/assets/admin/js/main-form.9cc72ab4.js",
   "main-free.js": "/assets/admin/js/main-free.e5d8b918.js",
   "main-listing.css": "/assets/admin/css/main-listing.4c860d28.css",
-  "main-listing.js": "/assets/admin/js/main-listing.2243a977.js"
+  "main-listing.js": "/assets/admin/js/main-listing.8b9f902f.js"
 }

docs/src/form-fields/conditional-fields.md

@@ -54,6 +54,43 @@ Here's an example based on a checkbox field where the value is either true or fa
     ])
 @endformConnectedFields
 ```
+Here's an example based on a checkboxes field where the values are stored in a json field:
+
+```php
+@formField('checkboxes', [
+    'name' => 'article_target',
+    'label' => 'Target',
+    'min' => 1,
+    'max' => 3,
+    'inline' => true,
+    'options' => [
+        [
+            'value' => 'students',
+            'label' => 'Students'
+        ],
+        [
+            'value' => 'teachers',
+            'label' => 'Teachers'
+        ],
+        [
+            'value' => 'administration',
+            'label' => 'Administration'
+        ],
+    ]
+])
+
+@formConnectedFields([
+    'fieldName' => 'article_target',
+    'fieldValues' => 'administration',
+    'arrayContains' => false,
+    'renderForBlocks' => true/false # (depending on regular form vs block form)
+])
+    @formField('files', [
+        'name' => 'attachment',
+        'label' => 'Attachment'
+    ])
+@endformConnectedFields
+```
 
 Here's an example based on a browser field where the fields are displayed only when the browser field is not empty:
 
@@ -89,6 +126,7 @@ Here's an example based on a browser field where the fields are displayed only w
 | fieldValues       | Value or values of the connected field that will reveal the fields in this component's slot      | string|array |               |
 | isEqual           | Controls how `fieldValues` are evaluated against the connected field                             | boolean           | true          |
 | isBrowser         | Indicates that the connected field is a `browser` field                                          | boolean           | false         |
+| arrayContains     | Controls how `fieldValues` are evaluated when connected field is an array                        | boolean           | true          | 
 | matchEmptyBrowser | When set to true, the fields in this component's slot will be revealed when the browser is empty | boolean           | false         |
 | keepAlive         | When set to true, the state of the hidden fields is preserved                                    | boolean           | false         |
 | renderForBlocks   | When used inside a block, this needs to be set to true                                           | string            | false         |

frontend/js/components/ConnectorField.vue

@@ -36,6 +36,10 @@
         type: Boolean,
         default: false
       },
+      arrayContains: {
+        type: Boolean,
+        default: true
+      },
       isValueEqual: { // requiredFieldValues must be equal (or different) to the stored value to show
         type: Boolean,
         default: true
@@ -90,16 +94,29 @@
 
         const newValue = clone(value)
         const newFieldValues = clone(this.requiredFieldValues)
+        const newFieldValuesArray = Array.isArray(newFieldValues) ? newFieldValues : [newFieldValues]
 
         // sort requiredFieldValues and value if is array, so the order of values is the same
         if (Array.isArray(newFieldValues)) newFieldValues.sort()
         if (Array.isArray(newValue)) newValue.sort()
 
         // update visiblity
         if (this.isValueEqual) {
-          this.open = (Array.isArray(newFieldValues)) ? newFieldValues.indexOf(newValue) !== -1 : isEqual(newValue, newFieldValues)
+          if (Array.isArray(newValue)) {
+            this.open = this.arrayContains ? newFieldValuesArray.some((value) => {
+              return newValue.includes(value)
+            }) : this.open = JSON.stringify(newFieldValuesArray) === JSON.stringify(newValue)
+          } else {
+            this.open = (Array.isArray(newFieldValues)) ? newFieldValues.indexOf(newValue) !== -1 : isEqual(newValue, newFieldValues)
+          }
         } else {
-          this.open = (Array.isArray(newFieldValues)) ? newFieldValues.indexOf(newValue) === -1 : !isEqual(newValue, newFieldValues)
+          if (Array.isArray(newValue)) {
+            this.open = this.arrayContains ? newFieldValuesArray.every((value) => {
+              return !newValue.includes(value)
+            }) : this.open = JSON.stringify(newFieldValuesArray) !== JSON.stringify(newValue)
+          } else {
+            this.open = (Array.isArray(newFieldValues)) ? newFieldValues.indexOf(newValue) === -1 : !isEqual(newValue, newFieldValues)
+          }
         }
       }
     },

views/partials/form/utils/_connected_fields.blade.php

@@ -3,6 +3,7 @@
     $inModal = $fieldsInModal ?? false;
     $isBrowser = $isBrowser ?? false;
     $matchEmptyBrowser = $matchEmptyBrowser ?? false;
+    $arrayContains = $arrayContains ?? true;
     $keepAlive = $keepAlive ?? false;
 
     if (! $isBrowser) {
@@ -17,6 +18,8 @@
     @if ($inModal) :in-modal="true" @endif
     @if ($keepAlive) :keep-alive="true" @endif
 
+    @if ($arrayContains) :array-contains="true" @else :array-contains="false" @endif
+
     @if ($isBrowser) :is-browser="true" @endif
     @if ($matchEmptyBrowser) :match-empty-browser="true" @endif