[6.x] Publish forms

[jasonvarga]

Note

This PR contains a handful of todos, commented out, and broken bits. Since it's going to the ui branch, we'll sort them out there. I just want the majority of it to be contained in a PR.

Publish Form

You can create a basic publish form without having to think about Vue or Blade.

You will need a route and a controller. The controller will need to getting the blueprint and values, and storing the values.

For example, you might want to create a publish form for an Eloquent model.

use Statamic\Facades\Blueprint;

class Thing extends Model
{
    public function values()
    {
        return [
            'name' => $this->name,
            'description' => $this->description,
        ];       
    }
    
    public function blueprint()
    {
        return Blueprint::make(...);
    }
}

Route::get('things/{thing}', [ThingController::class, 'edit'])->name('thing.edit');
Route::patch('things/{thing}', [ThingController::class, 'update'])->name('thing.update');

use Illuminate\Support\Request;
use Statamic\CP\PublishForm;

class ThingController
{
    public function edit(Thing $thing)
    {
        return PublishForm::make($thing->blueprint())
            ->values($thing->values())
            ->submittingTo(cp_route('thing.update', $thing));
    }
    
    public function update(Request $request, Thing $thing)
    {
        $values = PublishForm::make($thing->blueprint())->submit($request->values);
        
        $thing->update($values);
    }
}

---

Vue Components

If you have more complex needs, you can create your own Vue component using a number of composable elements.

The SavePipeline is a composable way to save the form using different steps. In this example there are three steps but the only required one is the Request step, which will handle the form submission and validation.

<script setup>
import { ref, useTemplateRef } from 'vue';
import { Header, Button, PublishContainer, PublishTabs, SavePipeline } from 'statamic';
const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks } = SavePipeline;

const props = defineProps(['blueprint', 'initialValues', 'initialMeta']);

const container = useTemplateRef('container');
const values = ref(props.initialValues);
const meta = ref(props.initialMeta);
const errors = ref({});
const saving = ref(false);

function save() {
    new Pipeline()
        .provide({ container, errors, saving })
        .through([
            new BeforeSaveHooks('entry'),
            new Request('/your-url', 'patch', { values: values.value }),
            new AfterSaveHooks('entry'),
        ])
        .then((response) => {
            Statamic.$toast.success('Saved');
        });
}
</script>

<template>
    <Header :title="title">
        <Button variant="primary" text="Save" @click="save" :disabled="saving" />
    </Header>
    <PublishContainer
        ref="container"
        name="myform"
        :blueprint="blueprint"
        :values="values"
        :meta="meta"
        :errors="errors"
        @updated="values = $event"
    >
        <PublishTabs />
    </PublishContainer>
</template>

@extends('statamic::layout')

@section('content')
    <your-publish-form
        :blueprint="{{ Js::from($blueprint) }}"
        :initial-values="{{ Js::from($values) }}"
        :initial-meta="{{ Js::from($meta) }}"
    ></your-publish-form>
@endsection

Container, Tabs, Sections, etc

The publish container is the main store of the form. All the values, metadata, errors, etc will be held in there.

The tabs component will render the standard tabbed based form layout automatically based on the provided blueprint.

You can customize the content of the tabs, but the default is the PublishSections component which again will just render the form appropriately.

The props and slots available to customize these elements will be described in more detail in the eventual docs.

Difference from existing forms

With this, you no longer have to deal with prop- and event-ception, passing props all the way down through tabs/sections/fields. It's now automatic just by having the Vue component existing on the page.

Also..

This PR also

• adds some this.$something helpers to the Statamic class so you can do Statamic.$something when using composition api
• Moves around conditional field logic so that it works from the composition api based components
• Fieldtypes get id prop now
• Removes WithField wrappers from inputs (that's where a big chunk of the diffs are coming from)