akhaled/livewire-sweetalert

Integeration Sweetalert with Livewire

v0.1.1 2021-08-05 10:37 UTC

Requires

• livewire/livewire: ^2.0

Requires (Dev)

• orchestra/testbench: ^6.18

MIT

• Amro Khaled

README

Integrate livewire with Sweetalert.

• Installation
• How to use
• Toast
• Fire
• Confirm
  • Multiple confirmation component
• Available configuration

Installation

composer require akhaled/livewire-sweetalert

How to use

1. Include javascript

    ...
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @livewireScripts
    @livewireSweetalertScripts
</body>

2. Extra config file

Publish the configs: php artisan vendor:publish --tag=livewire-sweetalert-config.

See available configuration

Toast

In your component add Toast trait. Then call toast method whenever you want.

use Akhaled\LivewireSweetalert\Toast;
use Livewire\Component;

class MyComponent extends Component
{
    use Toast;

    public function save() {
        $this->toast('Toast message', 'success', 5000)
    }
    ...
}

toast parameters:

• title
• icon: success, error, warning, info, question - default is info
• timeout: in milliseconds, default is 5000

Fire

This is the normal sweetalert modal. In your component add Fire trait. Then call fire method whenever you want.

use Akhaled\LivewireSweetalert\Fire;
use Livewire\Component;

class MyComponent extends Component
{
    use Fire;

    public function save() {
        $options = [];
        $this->Fire('Error happened', 'error', 'please try again later', $options)
    }
    ...
}

fire parameters:

• titleText: The title of the popup, as text to avoid HTML injection.
• icon: success, error, warning, info, question - default is info.
• html: the html which is displayed under the title.
• options: all options that sweetalert provides.

Confirm

Add Confirm trait to your component. Then call confirm method whenever you want. On confirmation, confirmed event is being emitted. Add it to $listeners property in you component. See example:

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;

class MyComponent extends Component
{
    use Confirm;

    protected $listeners = [
        'confirmed' => 'onConfirmation'
    ];

    public function delete()
    {
        $options = [];
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options)
    }

    public function onConfirmation()
    {
        dd('confirmed!');
    }
}

confirm parameters:

• title: The title of the popup, as text to avoid HTML injection.
• html: the html which is displayed under the title.
• options: all options that sweetalert provides. In addition to event key for using multiple confirmation on same component. see following example

Multiple confirmation component

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;

class MyComponent extends Component
{
    use Confirm;

    protected $listeners = [
        'confirmed' => 'onConfirmation',
        'anotherConfirmed' => 'onAnotherConfirmation'
    ];

    public function delete()
    {
        $options = [];
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options)
    }

    public function onConfirmation()
    {
        dd('confirmed!');
    }

    public function anotherAction()
    {
        $options = [
            'event' => 'anotherConfirmed'; // <-- that's how it works!
        ];
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options)
    }

    public function onAnotherConfirmation()
    {
        dd('confirmed #2!');
    }
}

Available configuration