# TALL-forms

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 ->](https://alpinejs.dev/plugins/focus)
* [Alpine Collapse plugin ->](https://alpinejs.dev/plugins/collapse)
* Tailwind 2.x or 3.x

### Autogenerated or Headless

{% tabs %}
{% tab title="Autogenerated" %}
(Extend TallFormComponent)

In a [standard](https://tina-hammar.gitbook.io/tall-forms/form/form-types/standard-form) TallFormComponent. You don't need to add properties, render(), $rules or create a blade view.

```php
<?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

{% endtab %}

{% tab title="Modal form" %}
(Extend TallFormInModal)

Same as the Autogenerated form, but opens in a modal

```php
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

```html
<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

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

{% endtab %}

{% tab title="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.&#x20;

```php
<?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

```html
<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"](https://tina-hammar.gitbook.io/tall-forms/blade-components/label-wrapper) page
{% endtab %}

{% tab title="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.&#x20;

```php
<?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***:&#x20;

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

```html
<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.

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

{% endtab %}
{% endtabs %}

##