feat: add form content blocks (#321)

* feat: add form content blocks

* fix: validation

app/Http/Controllers/Front/FormController.php

@@ -28,7 +28,9 @@ public function submit(string $locale, FormSubmissionRequest $request, Form $for
     {
         $attributes = $request->validated();
 
-        $data = $form->blocks
+        $data = $form->blocks()
+            ->onlyFields()
+            ->get()
             ->map(function (FormField $field) use ($attributes) {
                 $value = $attributes[$field->name] ?? null;
 

app/Http/Requests/Front/FormSubmissionRequest.php

@@ -18,7 +18,9 @@ class FormSubmissionRequest extends BaseRequest
      */
     public function rules(): array
     {
-        return $this->form->blocks
+        return $this->form->blocks()
+            ->onlyFields()
+            ->get()
             ->mapWithKeys(function (Block $field) {
                 $rules = [
                     $field->checkbox('required') ? 'required' : 'nullable',

app/Models/FormField.php

@@ -4,6 +4,7 @@
 
 namespace App\Models;
 
+use Illuminate\Contracts\Database\Eloquent\Builder;
 use Illuminate\Support\Collection;
 
 class FormField extends Block
@@ -36,4 +37,9 @@ public function options(string $field = 'options'): Collection
         return collect(preg_split('/\r\n|\r|\n/', $rawOptions))
             ->filter();
     }
+
+    public function scopeOnlyFields(Builder $query): Builder
+    {
+        return $query->whereNotIn('type', ['content', 'divider']);
+    }
 }

resources/js/components/Blocks/Form/Content.vue

@@ -0,0 +1,25 @@
+<template>
+    <localized-field
+        field="form-input"
+        :label="$t('field.title')"
+        v-model="content.title"
+    />
+
+    <localized-field
+        field="form-editor"
+        :label="$t('field.text')"
+        v-model="content.text"
+    />
+</template>
+
+<script>
+    import { defineFormBlock } from '@/helpers';
+
+    export default defineFormBlock({
+        type: 'content',
+        fields: {
+            title: Object,
+            text: Object,
+        },
+    });
+</script>

resources/js/components/Blocks/Form/Divider.vue

@@ -0,0 +1,15 @@
+<template>
+    <form-color-picker :label="$t('field.color')" v-model="content.color" />
+</template>
+
+<script>
+    import { defineFormBlock } from '@/helpers';
+
+    export default defineFormBlock({
+        type: 'divider',
+        icon: 'Editor/separator',
+        fields: {
+            color: String,
+        },
+    });
+</script>

resources/views/components/blocks/form/content.blade.php

@@ -0,0 +1,5 @@
+<x-blocks._title :title="$block->translatedInput('title')" />
+
+<div class="prose prose-blue md:prose-lg">
+    {!! $block->translatedInput('text') !!}
+</div>

resources/views/components/blocks/form/divider.blade.php

@@ -0,0 +1,7 @@
+@php
+    $color = $block->input('color');
+@endphp
+
+<hr
+    @if (is_null($color)) class="border-gray-300"
+    @else style="border-color: {{ $color }}" @endif>