TALL-forms

Autogenerated and Headless Livewire form components

This is the documentation for Tall-forms v8

Requirements

• Php ^8.0|^8.1

• Laravel ^8.75.0

• Livewire ^2.8.1

• Alpine ^3.5.1

• Alpine Focus plugin ->

• Alpine Collapse plugin ->

• Tailwind 2.x or 3.x

Autogenerated or Headless

Autogenerated

(Extend TallFormComponent)

In a standard TallFormComponent. You don't need to add properties, render(), $rules or create a blade view.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;
use Tanthammar\TallForms\TallFormComponent;

class PostForm extends TallFormComponent
{

    public function mount(Post $post): void
    {
        $this->mount_form($post);
    }

    protected function fields(): array
    {
        return [
            Input::make('Title')->rules('required|string|min:6'),
            Textarea::make('Content')->rules('required|string|max:500')
        ];
    }
}

No view needed

Modal form

(Extend TallFormInModal)

Same as the Autogenerated form, but opens in a modal

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;
use Tanthammar\TallForms\TallFormInModal;

class PostModalForm extends TallFormInModal
{
     /*
     * button color presets:
     * white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary
     public string $closeBtnColor = 'white';
     public string $submitBtnColor = 'primary';

     * Methods to override
     public function loadModal(int|string $modelKey): void
     public function closeModal(): void
     public function modalSubmit(): void
     */
    
    public function mount()
    {
        $this->mount_form(new Post);
    }

    protected function formAttr(): array
    {
        return [
           'formTitle' => 'Post form',
           'formSubtitle' => 'Form Subtitle slot',
           'modalMaxWidth' => 'xl', //default = 'lg', options: sm, md, lg, xl, 2xl
       ];
    }
    
    protected function fields(): array
    {
        return [
            Input::make('Title')->rules('required|string|min:6'),
            Textarea::make('Content')->rules('required|string|max:500'),
        ];
    }
}

Add a button to any blade view

<button type="button"
    wire:click="$emitTo('forms.post-modal-form', 'openModal', User::first()->id)"
>New Post</button>

Add the modal form component to your app layout

<livewire:forms.post-modal-form />

Headless

(Extend native Livewire Component)

When you want to create your own blade view and design the component, following Livewire conventions.

You don't have to use an Eloquent Model instance, this is just an example.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;

class PostForm extends Component
{
    public Post $post;
    
    protected $rules = [
        'post.title' => 'required|string|min:6',
        'post.content' => 'required|string|max:500',
    ];

    public function save()
    {
        $this->validate();
        $this->post->save();
    }

    public function render()
    {
        return view('livewire.post-form');
    }

}

Declare the fields in the blade view

resources/views/livewire/post-form.blade.php

<form wire:submit.prevent="save">
    
    <x-tall-input :field="Input::blade('Title' 'post.title')" />
    <x-tall-textarea :field="Textarea::blade('Content' 'post.content')" />
    
    <button type="submit">Save</button>
    
</form>

Wrapping fields with labels

See Blade components, "Label wrapper" page

Fields only

(Extend TallFormFields)

This form type is almost the same as Headless. The difference is that you declare the fields in the Livewire Component instead of the blade view.

Make a Livewire component that extends TallFormFields and design the component, following Livewire conventions.

You don't have to use an Eloquent Model instance, this is just an example.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;
use Tanthammar\TallForms\TallFormFields;

class PostForm extends TallFormFields
{
    public Post $post;
    
    protected $rules = [
        'post.title' => 'required|string|min:6',
        'post.content' => 'required|string|max:500',
    ];
    
    protected function fields(): array
    {
        return [
            Input::blade('Title', 'post.title'),
            Textarea::blade('Content', 'post.content'),
        ];
    }

    public function save()
    {
        $this->validate();
        $this->post->save();
    }

    public function render()
    {
        return view('livewire.post-form');
    }

}

@include('tall-forms::fields-only')

When you extend TallFormsFields , the form view must contain the blade directive that renders the form fields:

resources/views/livewire/post-form.blade.php

<form wire:submit.prevent="save">
    
    @include('tall-forms::fields-only')
    
    <button type="submit">Save</button>
    
</form>

TallFormFields properties

The TallFormFields component only contains minimum functionality to render the fields and it uses the "Headless" way to generate field html.

There are only a few properties in TallFormFields that you can override with the formAttr() method.

protected function formAttr(): array
 {
     return [
        'inline' => true, //stacked or inline layout
        'inlineLabelAlignment' => 'tf-inline-label-alignment',
        'labelW' => 'tf-label-width',
        'fieldW' => 'tf-field-width',
    ];
 }