[6.x] Form Fields Refactor

resources/js/components/blueprints/Builder.vue

@@ -56,7 +56,6 @@ export default {
         initialBlueprint: Object,
         showTitle: Boolean,
         useTabs: { type: Boolean, default: true },
-        isFormBlueprint: { type: Boolean, default: false },
     },
 
     data() {
@@ -84,15 +83,9 @@ export default {
         this.$events.$on('root-form-save', () => {
             this.$nextTick(() => this.save());
         });
-
-        if (this.isFormBlueprint) {
-            Statamic.$config.set('isFormBlueprint', true);
-        }
     },
 
     beforeUnmount() {
-		Statamic.$config.set('isFormBlueprint', false);
-
         this.$events.$off('root-form-save');
 
 		this.saveKeyBinding.destroy();

resources/js/components/fields/FieldtypeSelector.vue

@@ -225,11 +225,7 @@ export default {
     created() {
         if (this.fieldtypesLoaded) return;
 
-        let url = cp_url('fields/fieldtypes?selectable=true');
-
-        if (this.$config.get('isFormBlueprint')) url += '&forms=true';
-
-        this.$axios.get(url)
+        this.$axios.get(cp_url('fields/fieldtypes?selectable=true'))
             .then((response) => (loadedFieldtypes.value = response.data))
             .catch((e) => {
                 this.$toast.error(e.response?.data?.message || __('Something went wrong'));

resources/js/pages/blueprints/Edit.vue

@@ -10,7 +10,6 @@ defineProps({
 	canDefineLocalizable: { type: Boolean, default: undefined },
 	resetRoute: String,
 	isResettable: Boolean,
-	isFormBlueprint: Boolean,
 });
 </script>
 
@@ -24,7 +23,6 @@ defineProps({
             :initial-blueprint="blueprint"
             :use-tabs="useTabs"
             :can-define-localizable="canDefineLocalizable"
-            :is-form-blueprint="isFormBlueprint"
         >
             <template v-if="isResettable" #actions>
                 <ui-dropdown>

resources/js/pages/blueprints/Index.vue

@@ -4,7 +4,7 @@ import { Link } from '@inertiajs/vue3';
 import Head from '@/pages/layout/Head.vue';
 import { Header, Dropdown, DropdownMenu, DropdownLabel, DropdownItem, Button, Subheading, Panel, DocsCallout, Icon, StatusIndicator } from '@ui';
 
-defineProps(['collections', 'taxonomies', 'navs', 'assetContainers', 'globals', 'forms', 'userBlueprint', 'groupBlueprint', 'additional']);
+defineProps(['collections', 'taxonomies', 'navs', 'assetContainers', 'globals', 'userBlueprint', 'groupBlueprint', 'additional']);
 
 const resetters = ref({});
 </script>
@@ -179,29 +179,6 @@ const resetters = ref({});
                 </Panel>
             </template>
 
-            <template v-if="forms.length">
-                <Subheading size="lg" class="mb-2" :text="__('Forms')" />
-                <Panel>
-                    <table class="data-table">
-                        <thead>
-                        <tr>
-                            <th class="text-start!">{{ __('Blueprint') }}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr v-for="form in forms" :key="form.handle">
-                            <td>
-                                <div class="flex items-center gap-2">
-                                    <Icon name="forms" class="text-gray-500 me-1" />
-                                    <Link :href="form.edit_url" v-text="__(form.title)" />
-                                </div>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </Panel>
-            </template>
-
             <Subheading size="lg" class="mb-2" :text="__('Users')" />
             <Panel>
                 <table class="data-table">

resources/js/pages/forms/Connect.vue

@@ -8,6 +8,7 @@ defineOptions({ layout: [Layout, FormsLayout] });
 
 const props = defineProps({
     form: Object,
+    fieldtypes: Array,
 });
 
 const formTitle = computed(() => props.form?.title || __('Untitled Form'));
@@ -33,4 +34,13 @@ const formTitle = computed(() => props.form?.title || __('Untitled Form'));
             <Card class="min-h-32"></Card>
         </Panel>
     </div>
+
+    <div class="py-4">
+        <!-- TOOD: Remove from this component when wiring up the form builder. -->
+        <ul>
+            <li v-for="fieldtype in fieldtypes" :key="fieldtype.handle">
+                {{ fieldtype.title }}
+            </li>
+        </ul>
+    </div>
 </template>

resources/js/pages/forms/Index.vue

@@ -74,12 +74,6 @@ const reloadPage = () => router.reload();
                 </template>
                 <template #prepended-row-actions="{ row: form }">
                     <DropdownItem v-if="form.can_edit" :text="__('Configure')" :href="form.edit_url" icon="cog" />
-                    <DropdownItem
-                        v-if="form.can_edit_blueprint"
-                        icon="blueprint-edit"
-                        :text="__('Edit Blueprint')"
-                        :href="form.blueprint_url"
-                    />
                 </template>
             </Listing>
 

resources/js/pages/forms/Show.vue

@@ -123,12 +123,6 @@ function exportSubmissions() {
             <Dropdown v-if="form.canEdit || form.canDelete" placement="left-start" class="me-2">
                 <DropdownMenu>
                     <DropdownItem v-if="form.canEdit" :text="__('Configure Form')" icon="cog" :href="form.editUrl" />
-                    <DropdownItem
-                        v-if="form.canConfigureFields"
-                        :text="__('Edit Blueprint')"
-                        icon="blueprint-edit"
-                        :href="form.blueprintUrl"
-                    />
                     <DropdownItem
                         v-if="form.canDelete"
                         :text="__('Delete Form')"
@@ -146,13 +140,6 @@ function exportSubmissions() {
                 :url="form.editUrl"
             />
 
-            <CommandPaletteItem
-                category="Actions"
-                :text="__('Edit Blueprint')"
-                icon="blueprint-edit"
-                :url="form.blueprintUrl"
-            />
-
             <CommandPaletteItem
                 category="Actions"
                 :text="__('Delete Form')"

routes/cp.php

@@ -304,8 +304,8 @@
             Route::get('asset-containers/{asset_container}/edit', [AssetContainerBlueprintController::class, 'edit'])->name('asset-containers.edit');
             Route::patch('asset-containers/{asset_container}', [AssetContainerBlueprintController::class, 'update'])->name('asset-containers.update');
 
-            Route::get('forms/{form}/edit', [FormBlueprintController::class, 'edit'])->name('forms.edit');
-            Route::patch('forms/{form}', [FormBlueprintController::class, 'update'])->name('forms.update');
+            Route::get('forms/{form}/edit', FormBlueprintController::class)->name('forms.edit');
+            Route::patch('forms/{form}', FormBlueprintController::class)->name('forms.update');
 
             Route::get('globals/{global_set}/edit', [GlobalsBlueprintController::class, 'edit'])->name('globals.edit');
             Route::patch('globals/{global_set}', [GlobalsBlueprintController::class, 'update'])->name('globals.update');

src/CommandPalette/Palette.php

@@ -114,10 +114,6 @@ protected function buildFields(): self
             ->map(fn ($set) => $set->blueprintCommandPaletteLink())
             ->each(fn (Link $link) => $this->addCommand($link));
 
-        Facades\Form::all()
-            ->map(fn ($form) => $form->blueprintCommandPaletteLink())
-            ->each(fn (Link $link) => $this->addCommand($link));
-
         $this->addCommand(Facades\User::blueprintCommandPaletteLink());
         $this->addCommand(Facades\UserGroup::blueprintCommandPaletteLink());
 

src/Exceptions/FormFieldtypeNotFoundException.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace Statamic\Exceptions;
+
+use Exception;
+
+class FormFieldtypeNotFoundException extends Exception
+{
+    public function __construct($fieldtype)
+    {
+        parent::__construct("Form Fieldtype [{$fieldtype}] not found");
+    }
+}

src/Fields/Fieldtype.php

@@ -28,6 +28,9 @@ abstract class Fieldtype implements Arrayable
     protected $validatable = true;
     protected $defaultable = true;
     protected $selectable = true;
+    /**
+     * @deprecated Register a FormFieldtype instead.
+     */
     protected $selectableInForms = false;
     protected $relationship = false;
     protected $categories = [];
@@ -101,6 +104,9 @@ public function selectable(): bool
         return $this->selectable;
     }
 
+    /**
+     * @deprecated Use FormFieldtype::isSelectable() instead.
+     */
     public function selectableInForms(): bool
     {
         if (FieldtypeRepository::selectableInFormIsOverriden($this->handle())) {
@@ -110,11 +116,17 @@ public function selectableInForms(): bool
         return $this->selectableInForms;
     }
 
+    /**
+     * @deprecated Use FormFieldtype::makeSelectable() instead.
+     */
     public static function makeSelectableInForms()
     {
         FieldtypeRepository::makeSelectableInForms(self::handle());
     }
 
+    /**
+     * @deprecated Use FormFieldtype::makeUnselectable() instead.
+     */
     public static function makeUnselectableInForms()
     {
         FieldtypeRepository::makeUnselectableInForms(self::handle());

src/Fields/FieldtypeRepository.php

@@ -39,21 +39,33 @@ public function handles()
         });
     }
 
+    /**
+     * @deprecated Use FormFieldtype::makeSelectable() instead.
+     */
     public function makeSelectableInForms($handle)
     {
         $this->selectableInForms[$handle] = true;
     }
 
+    /**
+     * @deprecated Use FormFieldtype::makeUnselectable() instead.
+     */
     public function makeUnselectableInForms($handle)
     {
         $this->selectableInForms[$handle] = false;
     }
 
+    /**
+     * @deprecated Use FormFieldtype::isSelectable() instead.
+     */
     public function hasBeenMadeSelectableInForms($handle)
     {
         return $this->selectableInForms[$handle] ?? false;
     }
 
+    /**
+     * @deprecated Use FormFieldtype::isSelectable() instead.
+     */
     public function selectableInFormIsOverriden($handle)
     {
         return array_key_exists($handle, $this->selectableInForms);

src/Forms/Fields/Email.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace Statamic\Forms\Fields;
+
+use Statamic\Support\Arr;
+
+class Email extends FormFieldtype
+{
+    protected static $fieldtype = 'text';
+    protected $icon = 'mail-sign-at';
+    protected $categories = ['Contact Info'];
+
+    public function configFieldItems(): array
+    {
+        return [
+            'placeholder' => [
+                'display' => __('Placeholder'),
+                'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                'type' => 'text',
+            ],
+        ];
+    }
+
+    public function toFieldArray(): array
+    {
+        return [
+            'type' => 'text',
+            'input_type' => 'email',
+            'placeholder' => $this->config('placeholder'),
+            'validate' => [...((array) $this->config('validate', [])), 'email'],
+            ...Arr::except($this->config(), ['type', 'input_type', 'placeholder', 'validate']),
+        ];
+    }
+}

src/Forms/Fields/Fallback.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Statamic\Forms\Fields;
+
+use Statamic\Fields\Fieldtype;
+
+class Fallback extends FormFieldtype
+{
+    protected ?Fieldtype $wrappedFieldtype = null;
+
+    public function wrapping(Fieldtype $fieldtype): static
+    {
+        $this->wrappedFieldtype = $fieldtype;
+
+        return $this;
+    }
+
+    public function toFieldArray(): array
+    {
+        return $this->config();
+    }
+
+    public function toArray(): array
+    {
+        if (! $this->wrappedFieldtype) {
+            return parent::toArray();
+        }
+
+        return [
+            'handle' => $this->wrappedFieldtype->handle(),
+            'title' => $this->wrappedFieldtype->title(),
+            'categories' => $this->wrappedFieldtype->categories(),
+            'keywords' => $this->wrappedFieldtype->keywords(),
+            'icon' => $this->wrappedFieldtype->icon(),
+            'config' => $this->wrappedFieldtype->configFields()->toPublishArray(),
+        ];
+    }
+}