Add support for native form sections

[aerni]

This PR adds support for Statamic's new form sections and replaces the old form group feature.

• The old group: {handle} syntax has been removed in favor of native form sections
• Removed the @formFields, @formGroups, and @formGroup blade directives
• Removed the fields.blade.php, groups.blade.php, and group.blade.php views
• Added new @formSections and @formSection blade directives
• Added new sections.blade.php and section.blade.php views
• The translation of the display and instructions of form sections have been moved to JSON files
• The realtime validation config in the form blueprint has been moved to the blueprint's root

Upgrade Guide

This PR introduces some breaking changes that require manual adjustments of your form blueprints, views, and translations.

Blueprints

Form sections

The group: {handle} syntax has been removed in favor of Statamic's native form sections. Use the new sections to replicate the old form groups by creating a new section for each group. Then remove the group from your form fields.

You should also add the translations of title and instructions of the old form groups to the display and instructions of the new form sections in your blueprint. You should find them in the livewire-forms.php lang file.

Example

Old resources/blueprints/forms/subscription.yaml

sections:
  main:
    display: Main
    fields:
      -
        handle: subcription
        field:
          type: text
          group: subcription
      -
        handle: name
        field:
          type: text
          group: address

New resources/blueprints/forms/subscription.yaml

tabs:
  main:
    display: Main
    sections:
      -
        display: 'Subscription'
        instructions: 'Choose your subscription'
        fields:
          -
            handle: subcription
            field:
              type: text
      -
        display: 'Address'
        fields:
          -
            handle: name
            field:
              type: text

Realtime validation

If you configured realtime validation on a form's blueprint, you have to move the config up to the blueprint's root.

Example

Old resources/blueprints/forms/subscription.yaml

sections:
  main:
    display: Main
-   realtime: false
    fields:
      -
        handle: subscription
        ....

New resources/blueprints/forms/subscription.yaml

+ realtime: true
tabs:
  main:
    display: Main
    sections:
      -
        display: 'Subscription'
        instructions: 'Choose your subscription'
        fields:
          -
            handle: subscription
            ...

Views

There are a couple of views that aren't used by Livewire Forms anymore.

fields.blade.php replaced by sections.blade.php groups.blade.php replaced by sections.blade.php group.blade.php replaced by section.blade.php

You should publish the new sections.blade.php and section.blade.php views to your themes and migrate any custom markup from the old views they are replacing.

You can find the new views here:

https://github.com/aerni/statamic-livewire-forms/blob/main/resources/stubs/theme/sections.blade.php https://github.com/aerni/statamic-livewire-forms/blob/main/resources/stubs/theme/section.blade.php

After migrating all your changes, you can safely delete fields.blade.php, groups.blade.php, and group.blade.php from your themes.

I suggest you create a new theme and compare each individual view with your existing themes to make sure you're migrating all the changes.

Blade directives

@formFields and @formGroups

The @formFields and @formGroups directives have been replaced by @formSections. You should use this new directive in your form templates.

Example resources/views/livewire/forms/default.blade.php

<form wire:submit.prevent="submit">
    <div>
-        @formFields
-        @formGroups
+        @formSections
    </div>
</form>

@formGroup

The @formGroup directive has been renamed to @formSection.

Example resources/views/livewire/forms/default.blade.php

<form wire:submit.prevent="submit">
    <div>
-        @formGroup('subscription')
+        @formSection('subscription')
    </div>
</form>

With the old group feature, you could render a specific group by its handle, e.g. @formGroup('subscription'). Statamic's native sections don't support handles, which is why we are using the following workaround.

If a form section has a display set, the handle will be the snake case version of it, e.g. display: "Your Subscription" becomes your_subscription. If you don't set a display on the section, the section's handle will be its index, e.g. 0 for the first form section.

If you used the @formGroup directive in your form template, you have to update the handles accordingly.

Translations

The translations of a section's display and instructions now use JSON files. This is due to the fact that you can't define a section's handle the way you were able to define a group's handle. You should move all title and instructions translations from your livewire-forms.php lang files to JSON files.

Old lang/de/livewire-forms.php

return [

    'subscription' => [

        'subscription' => [
            'title' => 'Dein Abo',
            'instructions' => 'Bitte wähle dein Abo',
        ],

        'address' => [
            'title' => 'Deine Adresse',
        ],

    ],

];

New lang/de.json

{
    "Subscription": "Dein Abo",
    "Please choose your subscription": "Bitte wähle dein Abo",
    "Your address": "Deine Adresse"
}