PHP code example of rishadblack / wire-modals

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

rishadblack / wire-modals example snippets

class NoteEdit extends Component
{
    use WithModals;

    #[ModalAction(default: true)]
    public function openNoteModal(array $data = []): void
    {
        $this->note = Note::findOrFail($data['id']);

        $this->modalOpen('NoteModal');
    }
}

namespace App\Livewire\Modals;

use App\Models\Note;
use Livewire\Attributes\Locked;
use Livewire\Component;
use Rishadblack\WireModals\Attributes\ModalAction;
use Rishadblack\WireModals\Traits\WithModals;

class NoteEdit extends Component
{
    use WithModals;

    #[Locked]
    public ?int $note_id = null;

    public string $title = '';

    /**
     * @param  array{id: int|string|null, data: array<string, string>}  $data
     */
    #[ModalAction(default: true)]
    public function openNoteModal(array $data = []): void
    {
        $this->reset('note_id', 'title');

        if (! empty($data['id'])) {
            $note = Note::findOrFail($data['id']);

            $this->note_id = $note->id;
            $this->title = $note->title;
        }

        $this->modalOpen('NoteModal');
    }

    public function save(): void
    {
        $this->validate(['title' => ['

use Rishadblack\WireModals\Support\Trigger;

Trigger::make('modals.note-edit', 'openNoteModal')->id($note->id)->with('folder_id', 3)->attributes();
// ['wire:modal' => 'modals.note-edit', 'wire:modal.action' => 'openNoteModal', 'wire:modal.id' => '7', 'data-folder-id' => '3']

NoteEdit::modalTrigger('noteDelete')->id($note->id)->toHtml();
// wire:modal="modals.note-edit" wire:modal.action="noteDelete" wire:modal.id="7"

$this->dispatch('wire-modals:load', payload: ['component' => 'modals.note-edit', 'id' => $id])->to('wire-modals.host');

[
    'id'        => '7',                      // wire:modal.id, or null
    'data'      => ['folder_id' => '3'],     // data-* attributes
    'action'    => 'openNoteModal',
    'component' => 'modals.note-edit',
    'modal'     => null,
    'key'       => 'modals.note-edit',
]

public function openOptionsModal(): void
{
    $this->modalOpen('OptionsModal', keepComponent: true);
}

#[ModalAction(default: true)]
public function openStepOneModal(array $data = []): void
{
    $this->modalOpen('StepOneModal');                        // owns the component
}

public function openStepTwoModal(): void
{
    $this->validate(['name' => ['ckToStepTwo(): void
{
    $this->modalClose('StepThreeModal');                     // reveals step two again
}

public function finish(): void
{
    $this->dispatch('wizard-finished', name: $this->name);

    $this->closeComponent();                                 // hides all three, then unmounts
}

// TagPicker
public function pick(string $tag): void
{
    $this->dispatch('tag-picked', tag: $tag)->to('modals.note-edit');

    $this->closeComponent();
}

// NoteEdit
#[On('tag-picked')]
public function addTag(string $tag): void { /* ... */ }

#[ModalAction]
public function noteDelete(array $data = []): void
{
    $this->note_id = Note::findOrFail($data['id'])->id;

    $this->modalOpen('DeleteModal');
}

public function confirmDelete(): void
{
    Note::whereKey($this->note_id)->delete();

    $this->dispatch('notes-changed');

    $this->closeComponent();
}

protected function authorizeModalAction(string $action, array $payload): bool
{
    return match ($action) {
        'noteDelete' => auth()->user()->can('notes.delete'),
        default => auth()->user()->can('notes.update'),
    };
}

// config/wire-modals.php
return [
    'host_component' => 'wire-modals.host',   // Livewire name of the host
    'action_patterns' => ['open*Modal'],       // callable method names (plus #[ModalAction])
    'allowed_components' => ['*'],             // mountable component names
    'allow_class_names' => false,              // allow fully qualified class names as component
    'max_mounted' => 15,                       // components one host keeps alive
    'max_payload_bytes' => 8192,               // JSON size cap for "data"
    'data_exclusions' => ['bs-', 'wire-modals-'], // data-* prefixes triggers ignore
    'modal' => [
        'backdrop' => 'static',                // true, false or 'static'
        'keyboard' => false,
        'size' => null,                        // null, 'sm', 'lg', 'xl'
        'centered' => false,
        'scrollable' => false,
    ],
    'log_rejections' => true,
    'legacy' => ['events' => false, 'directive' => false],
];

Livewire::test('wire-modals.host')
    ->call('load', ['component' => 'modals.note-edit', 'id' => $note->id])
    ->assertSee('Edit note');

Livewire::test('modals.note-edit', ['wireModalsPayload' => ['component' => 'modals.note-edit', 'id' => $note->id]])
    ->assertDispatched('wire-modals:open', modal: 'NoteModal', owner: 'modals.note-edit')
    ->call('save')
    ->assertDispatched('wire-modals:close', modal: 'NoteModal');

bash
php artisan vendor:publish --tag=wire-modals-config

bash
php artisan vendor:publish --tag=wire-modals-views