marcorombach/livewire-confirm-modal

Like the wire confirm directive but displayed as modal on your page.

0.2.5 2024-10-18 10:11 UTC

Requires

• php: ^8.2
• illuminate/contracts: ^10.0||^11.0
• livewire/livewire: ^3.5
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^2.9
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.1.1||^7.10.0
• orchestra/testbench: ^9.0.0||^8.22.0
• pestphp/pest: ^2.34
• pestphp/pest-plugin-arch: ^2.7
• pestphp/pest-plugin-laravel: ^2.3
• phpstan/extension-installer: ^1.3
• phpstan/phpstan-deprecation-rules: ^1.1
• phpstan/phpstan-phpunit: ^1.3

MIT

• Marco Rombach

• laravel
• wire
• confirm
• tailwind
• livewire
• marcorombach
• livewire-confirm-modal

README

This is a simple package aiming to provide a Livewire directive like wire:confirm but without using the default javascript confirm() function. This is useful if you need the same style for the confirm box across different browsers. It's also possible to apply your own style by changing the view.

By default this package uses TailwindCSS to style the modal. The look of the modal was inspired by the components of Pines UI.

Installation

You can install the package via composer:

composer require marcorombach/livewire-confirm-modal

You need to add the following to your tailwind.config.js

"./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php"

It should look something like this:

content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    ...
    "./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php",
] 

To include the necessary scripts and the modal itself, make sure this is present in all your views that should use wire:confirm-modal

<x-livewire-confirm-modal/>

Optionally, you can publish the view using

php artisan vendor:publish --tag="livewire-confirm-modal-views"

You should be careful changing the view, especially when touching alpine directives.

Usage

<button wire:confirm-modal="title|description" wire:click="doSomething(1,2)">
    Test
</button>

Replace title and description with what you want the confirm modal to display. Now a modal is shown everytime the button is clicked. It will prevent wire:click from executing until the continue button in the modal is clicked.

Credits

• Marco Rombach
• All Contributors

License

The MIT License (MIT). Please see License File for more information.