# As modal

### Extend the TallFormInModal component

* The modal can be placed anywhere but for `z-index` reasons, it's best to put it near the closing `</body>` tag.
* The component automatically loads the model and resets the form when the listener receives the emitted event.&#x20;
* You have access to all TallForms methods and properties except the `$headView`.

### Steps

* [ ] Create component that extends `TallFormInModal`
* [ ] Create a button with `wire:click` `emitTo` and add the form component to the same page
* [ ] (Optionally override the modal methods.)

### Create the form

Command option `--action=modal` will set the component to extend `TallFormInModal.` See [Standard](https://tina-hammar.gitbook.io/tall-forms/form/form-types/standard-form) form, for more options

```bash
php artisan make:tall-form UserModalForm --action=modal --model=User
```

```php
namespace App\Http\Livewire\Forms;

use App\Models\User;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallFormInModal;

class UserModalForm 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 User);
    }

    protected function formAttr(): array
    {
        return [
           'formTitle' => 'Edit user',
           'formSubtitle' => 'Form Subtitle slot',
           'modalMaxWidth' => 'xl', //default = 'lg', options: sm, md, lg, xl, 2xl
       ];
    }
    
    protected function fields(): array
    {
        return [
            Input::make('Name')->rules('required'),
        ];
    }
}
```

### Create a button and pass a $modelKey

Add a button to any blade view, that `$emits` a `$model->id` to your Form component

```markup
//Example, emit to the form component, to load the User where id=1
//put this button in any blade view
<x-tall-button 
    size="md" 
    color="primary" 
    wire:click="$emitTo('forms.user-modal-form', 'openModal', 1)"
    text="Open Form Modal" />
```

### Add the modal form component

The button and the form component does **not** have to be in the same Livewire component, but for z-index reasons, it is best placed near the closing `</body>` tag.

```markup
<livewire:forms.user-modal-form/>
```

### Button colors

Available presets: `white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary.` \
Set the colors in tall-form.css

```php
public string $closeBtnColor = 'white';
public string $submitBtnColor = 'primary';
```

### Override methods

You can override the default methods

```php
public function loadModal(int|string $modelKey): void
public function closeModal(): void
public function modalSubmit(): void
```

### Styling

Search for `Modals` in `tall-theme.css`The modal styling is based on the Laravel Jetstream modal component.

### Modal sizes

* Set the `modalMaxWidth` in the `formAttr()` function.&#x20;
* Available options are; `sm, md, lg, xl, 2xl`
* Default = `lg`
* You can change the defaults in config.

```php
    protected function formAttr(): array
    {
        return [
           'modalMaxWidth' => 'xl',
       ];
    }
```