Laravel 12 Livewire: Modal

[Frank K Hosaka]

Como não é possível trabalhar com o JavaScript e Livewire ao mesmo tempo no Laravel 12 Livewire, fui obrigado a usar o método da tentativa e erro para simular o modal:

arquivo app > Livewire > Modal.php
<?php
namespace App\Livewire;
use Livewire\Component;

class Modal extends Component {
    public $usernamePlaceholder="Olá mundo";
    public $showModal = false;
    public $conta = null;
    public $contaDevedora = null;
    public $contaCredora = null;
    public $inputEscolhido = null;

    public function setConta($conta) {
        if($this->inputEscolhido=="Devedora") {
            $this->contaDevedora=$conta;
        } else {
            $this->contaCredora=$conta;
        }
        return $this->closeModal();
    }

    public function openModalDevedora() {
        $this->showModal = true;
        $this->inputEscolhido = 'Devedora';
    }

    public function openModalCredora() {
        $this->showModal = true;
        $this->inputEscolhido = 'Credora';
    }

    public function closeModal() {
        $this->showModal = false;
    }

    public function render() {
        return view('livewire.modal');
    }
}

arquivo resources > views > livewire > modal.blade.php
<div class="w-[500px] m-0 m-auto">
    <form method=post action=logout>@csrf<button type="submit">Sair</button></form>
    <flux:input value={{$contaDevedora}} wire:click=openModalDevedora 
        class="border p-2 rounded" label="Conta Devedora" />
    <flux:input value={{$contaCredora}} wire:click=openModalCredora 
        class="border p-2 rounded" label="Conta Credora" />

    @if ($showModal)
        <div class="fixed inset-0 flex items-center justify-center z-50">
            <div class="bg-white p-5 rounded shadow-md">
                <h2 class="text-lg font-bold">Plano de Contas</h2>
                <div wire:click="setConta('Ativo')">Ativo</div>
                <div wire:click="setConta('Passivo')">Passivo</div>
                <div wire:click="setConta('Despesa')">Despesa</div>
                <div wire:click="setConta('Receita')">Receita</div>
                <button wire:click="closeModal" class="btn btn-danger">Fechar</button>
            </div>
        </div>
        <div class="fixed inset-0 bg-black opacity-50"></div>
    @endif
</div>

arquivo resources > views > menuView.blade.php
<livewire:scripts />
<livewire:styles />
<livewire:modal />

 

Editado Quinta às 14:47 por Frank K Hosaka