[6.x] Misc dynamic form builder preparations

package.json

@@ -8,7 +8,7 @@
     "svgo": "svgo -f ./resources/svg/  -r",
     "test": "vitest run",
     "test-watch": "npm run test -- --watch --notify",
-    "frontend-dev": "vite -c vite-frontend.config.js",
+    "frontend-dev": "vite build -c vite-frontend.config.js --watch",
     "frontend-build": "vite build -c vite-frontend.config.js",
     "prettier:format": "prettier --write \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",
     "prettier:check": "prettier --check \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",

resources/js/components/field-conditions/Validator.js

@@ -15,17 +15,31 @@ const isEmpty = (value) => {
 const isString = (str) => str != null && typeof str.valueOf() === 'string';
 
 export default class {
-    constructor(field, values, dottedFieldPath, store) {
+    constructor(field, values, currentFieldPath, store) {
         this.field = field;
         this.values = values;
-        this.dottedFieldPath = dottedFieldPath;
+        this.currentFieldPath = currentFieldPath;
         this.store = store;
         this.rootValues = store ? store.values : false;
         this.passOnAny = false;
         this.showOnPass = true;
         this.converter = new Converter();
     }
 
+    usingRootValues() {
+        if (!this.currentFieldPath) {
+            throw new Error('[currentFieldPath] constructor param required for `usingRootValues()`');
+        }
+
+        this.rootValues = this.values;
+
+        if (this.currentFieldPath.includes('.')) {
+            return this.scopeValuesToParent();
+        }
+
+        return this;
+    }
+
     passesConditions(specificConditions) {
         let conditions = specificConditions || this.getConditions();
 
@@ -185,7 +199,7 @@ export default class {
 
     getFieldValue(field) {
         if (field.startsWith('$parent.')) {
-            field = new ParentResolver(this.dottedFieldPath).resolve(field);
+            field = new ParentResolver(this.currentFieldPath).resolve(field);
         }
 
         if (field.startsWith('$root.') || field.startsWith('root.')) {
@@ -249,7 +263,7 @@ export default class {
             values: this.values,
             root: this.rootValues,
             store: this.store,
-            fieldPath: this.dottedFieldPath,
+            fieldPath: this.currentFieldPath,
         });
 
         return this.showOnPass ? passes : !passes;
@@ -273,7 +287,7 @@ export default class {
 
     relativeLhsToAbsoluteFieldPath(lhs, dottedPrefix) {
         if (lhs.startsWith('$parent.')) {
-            lhs = new ParentResolver(this.dottedFieldPath).resolve(lhs);
+            lhs = new ParentResolver(this.currentFieldPath).resolve(lhs);
         }
 
         if (lhs.startsWith('$root.') || lhs.startsWith('root.')) {
@@ -282,4 +296,12 @@ export default class {
 
         return dottedPrefix ? dottedPrefix + '.' + lhs : lhs;
     }
+
+    scopeValuesToParent() {
+        let scope = this.currentFieldPath.replace(new RegExp('\.[^\.]+$'), '');
+
+        this.values = data_get(this.rootValues, scope);
+
+        return this;
+    }
 }

resources/js/frontend/components/FieldConditions.js

@@ -1,7 +1,7 @@
 import Validator from '../../components/field-conditions/Validator.js';
 
 export default class {
-    showField(field, data) {
-        return new Validator(field, data).passesConditions();
+    showField(conditions, data, currentFieldPath) {
+        return new Validator(conditions, data, currentFieldPath).usingRootValues().passesConditions();
     }
 }

resources/js/tests/Frontend/FieldConditionsTest.test.js

@@ -2,28 +2,67 @@ import { test, expect } from 'vitest';
 import '../../frontend/helpers.js';
 
 let formData = {
+    target: 'test',
     first_name: 'Bilbo',
     last_name: 'Baggins',
     hobby: '',
     bio: null,
+    group_field: {
+        dwelling: 'Bag End',
+        village: 'Hobbiton',
+        nested_group_field: {
+            birthday: 'Sept 22',
+            age: '111',
+        },
+    },
+};
+
+let showField = function (conditions, dottedFieldPath = null) {
+    return Statamic.$conditions.showField(conditions, formData, dottedFieldPath || 'target');
 };
 
 test('it shows field by default', () => {
-    expect(Statamic.$conditions.showField([], formData)).toBe(true);
-    expect(Statamic.$conditions.showField({}, formData)).toBe(true);
+    expect(showField([])).toBe(true);
+    expect(showField({})).toBe(true);
 });
 
 test('it can show field based on empty checks', () => {
-    expect(Statamic.$conditions.showField({ if: { hobby: 'empty' } }, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({ if: { bio: 'empty' } }, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({ if: { first_name: 'empty' } }, formData)).toBe(false);
-    expect(Statamic.$conditions.showField({ if: { first_name: 'not empty' } }, formData)).toBe(true);
+    expect(showField({ if: { hobby: 'empty' } })).toBe(true);
+    expect(showField({ if: { bio: 'empty' } })).toBe(true);
+    expect(showField({ if: { first_name: 'empty' } })).toBe(false);
+    expect(showField({ if: { first_name: 'not empty' } })).toBe(true);
 });
 
 test('it can show field if multiple conditions are met', () => {
-    expect(Statamic.$conditions.showField({ if: { first_name: 'Bilbo', last_name: 'Baggins' } }, formData)).toBe(true);
-    expect(Statamic.$conditions.showField({ if: { first_name: 'Frodo', last_name: 'Baggins' } }, formData)).toBe(false);
-    expect(Statamic.$conditions.showField({ if_any: { first_name: 'Frodo', last_name: 'Baggins' } }, formData)).toBe(
+    expect(showField({ if: { first_name: 'Bilbo', last_name: 'Baggins' } })).toBe(true);
+    expect(showField({ if: { first_name: 'Frodo', last_name: 'Baggins' } })).toBe(false);
+    expect(showField({ if_any: { first_name: 'Frodo', last_name: 'Baggins' } })).toBe(true);
+});
+
+test('it can show field nested in group based on sibling field value', () => {
+    expect(showField({ if: { village: 'Hobbiton' } }, 'group_field.dwelling')).toBe(true);
+    expect(showField({ if: { village: 'Mordor' } }, 'group_field.dwelling')).toBe(false);
+});
+
+test('it can show deeply field nested in group based on sibling field value', () => {
+    expect(showField({ if: { age: 111 } }, 'group_field.nested_group_field.birthday')).toBe(true);
+    expect(showField({ if: { age: 112 } }, 'group_field.nested_group_field.birthday')).toBe(false);
+});
+
+test('it can show deeply field nested in group based on parent field value', () => {
+    expect(showField({ if: { '$parent.village': 'Hobbiton' } }, 'group_field.nested_group_field.birthday')).toBe(true);
+    expect(showField({ if: { '$parent.village': 'Mordor' } }, 'group_field.nested_group_field.birthday')).toBe(false);
+    expect(
+        showField({ if: { '$parent.$parent.first_name': 'not empty' } }, 'group_field.nested_group_field.birthday'),
+    ).toBe(true);
+    expect(showField({ if: { '$parent.$parent.hobby': 'not empty' } }, 'group_field.nested_group_field.birthday')).toBe(
+        false,
+    );
+});
+
+test('it can show deeply field nested in group based on root field value', () => {
+    expect(showField({ if: { '$root.first_name': 'not empty' } }, 'group_field.nested_group_field.birthday')).toBe(
         true,
     );
+    expect(showField({ if: { '$root.hobby': 'not empty' } }, 'group_field.nested_group_field.birthday')).toBe(false);
 });

resources/views/extend/forms/fields/assets.antlers.html

@@ -1,7 +1,7 @@
 <input
     id="{{ id }}"
     type="file"
-    name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
+    name="{{ name }}{{ if max_files !== 1 }}[]{{ /if }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}

resources/views/extend/forms/fields/checkboxes.antlers.html

@@ -1,10 +1,10 @@
-<input type="hidden" name="{{ handle }}[]">
+<input type="hidden" name="{{ name }}[]">
 {{ foreach:options as="option|label" }}
     <label>
         <input
             id="{{ id }}-{{ option | slugify }}-option"
             type="checkbox"
-            name="{{ handle }}[]"
+            name="{{ name }}[]"
             value="{{ option }}"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value|in_array:option }}checked{{ /if }}

resources/views/extend/forms/fields/default.antlers.html

@@ -1,7 +1,7 @@
 <input
     id="{{ id }}"
     type="{{ input_type ?? 'text' }}"
-    name="{{ handle }}"
+    name="{{ name }}"
     value="{{ value }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}

resources/views/extend/forms/fields/dictionary.antlers.html

@@ -1,6 +1,6 @@
 <select
     id="{{ id }}"
-    name="{{ handle }}{{ multiple ?= "[]" }}"
+    name="{{ name }}{{ multiple ?= "[]" }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}

resources/views/extend/forms/fields/files.antlers.html

@@ -1,7 +1,7 @@
 <input
     id="{{ id }}"
     type="file"
-    name="{{ handle }}{{ if max_files !== 1 }}[]{{ /if }}"
+    name="{{ name }}{{ if max_files !== 1 }}[]{{ /if }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if max_files !== 1 }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}

resources/views/extend/forms/fields/group.antlers.html

@@ -0,0 +1,5 @@
+<div {{ if js_driver }}{{ js_attributes }}{{ /if }}>
+    {{ fields scope="__field" }}
+        {{ slot:addContext(__field) }}
+    {{ /fields }}
+</div>

resources/views/extend/forms/fields/integer.antlers.html

@@ -1,6 +1,6 @@
 <input
     type="number"
-    name="{{ handle }}"
+    name="{{ name }}"
     value="{{ value }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}

resources/views/extend/forms/fields/radio.antlers.html

@@ -3,7 +3,7 @@
         <input
             id="{{ id }}-{{ option | slugify }}-option"
             type="radio"
-            name="{{ handle }}"
+            name="{{ name }}"
             value="{{ option }}"
             {{ if js_driver }}{{ js_attributes }}{{ /if }}
             {{ if value == option }}checked{{ /if }}

resources/views/extend/forms/fields/select.antlers.html

@@ -1,6 +1,6 @@
 <select
     id="{{ id }}"
-    name="{{ handle }}{{ multiple ?= "[]" }}"
+    name="{{ name }}{{ multiple ?= "[]" }}"
     {{ if js_driver }}{{ js_attributes }}{{ /if }}
     {{ if multiple }}multiple{{ /if }}
     {{ if validate|contains:required }}required{{ /if }}

resources/views/extend/forms/fields/text.antlers.html

@@ -1,7 +1,7 @@
 <input
     id="{{ id }}"
     type="{{ input_type ?? 'text' }}"
-    name="{{ handle }}"
+    name="{{ name }}"
     value="{{ value }}"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}

resources/views/extend/forms/fields/textarea.antlers.html

@@ -1,6 +1,6 @@
 <textarea
     id="{{ id }}"
-    name="{{ handle }}"
+    name="{{ name }}"
     rows="5"
     {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
     {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}

resources/views/extend/forms/fields/toggle.antlers.html

@@ -1,9 +1,9 @@
 <label>
-    <input type="hidden" name="{{ handle }}" value="0">
+    <input type="hidden" name="{{ name }}" value="0">
     <input
         id="{{ id }}"
         type="checkbox"
-        name="{{ handle }}"
+        name="{{ name }}"
         value="1"
         {{ if js_driver }}{{ js_attributes }}{{ /if }}
         {{ if value && value !== '0' }}checked{{ /if }}

src/Fields/Fieldtype.php

@@ -160,6 +160,11 @@ public function preProcessValidatable($value)
         return $value;
     }
 
+    public function preProcessTagRenderable($data, $recursiveCallback)
+    {
+        return $data;
+    }
+
     public function defaultValue()
     {
         return $this->defaultValue;
@@ -390,4 +395,9 @@ public function extraRenderableFieldData(): array
     {
         return [];
     }
+
+    public function hasJsDriverDataBinding(): bool
+    {
+        return true;
+    }
 }

src/Fieldtypes/Checkboxes.php

@@ -6,7 +6,9 @@
 
 class Checkboxes extends Fieldtype
 {
-    use HasSelectOptions;
+    use HasSelectOptions {
+        process as traitProcess;
+    }
 
     protected $categories = ['controls'];
     protected $selectableInForms = true;
@@ -51,4 +53,17 @@ protected function multiple()
     {
         return true;
     }
+
+    public function preProcessValidatable($value)
+    {
+        return collect($value)->filter()->values()->all();
+    }
+
+    public function process($data)
+    {
+        return collect($this->traitProcess($data))
+            ->reject(fn ($value) => $value === null)
+            ->values()
+            ->all();
+    }
 }

src/Fieldtypes/Group.php

@@ -13,6 +13,7 @@ class Group extends Fieldtype
 {
     protected $categories = ['structured'];
     protected $defaultable = false;
+    protected $selectableInForms = true;
 
     protected function configFieldItems(): array
     {
@@ -132,6 +133,19 @@ public function preProcessValidatable($value)
         );
     }
 
+    public function preProcessTagRenderable($data, $recursiveCallback)
+    {
+        $field = $this->field();
+
+        $data['fields'] = collect($this->fields()->all())
+            ->map(fn ($child) => $child->setForm($field->form())->setHandle($field->handle().'.'.$child->handle()))
+            ->map(fn ($child) => $recursiveCallback($child))
+            ->values()
+            ->all();
+
+        return $data;
+    }
+
     public function toGqlType()
     {
         return GraphQL::type($this->gqlItemTypeName());
@@ -152,4 +166,9 @@ private function gqlItemTypeName()
             return Str::studly($part);
         })->join('_');
     }
+
+    public function hasJsDriverDataBinding(): bool
+    {
+        return false;
+    }
 }

src/Fieldtypes/HasSelectOptions.php

@@ -149,8 +149,6 @@ private function castToBoolean($value)
             return true;
         } elseif ($value === 'false') {
             return false;
-        } elseif ($value === 'null') {
-            return null;
         }
 
         return $value;
@@ -162,8 +160,6 @@ private function castFromBoolean($value)
             return 'true';
         } elseif ($value === false) {
             return 'false';
-        } elseif ($value === null) {
-            return 'null';
         }
 
         return $value;