/livewire-sweetalert

Integrate Livewire with Sweetalert.

Primary LanguagePHP

Livewire Sweetalert

Integrate livewire with Sweetalert.

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 = []; // default ['event' => 'confirmed']
        $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 = []; // default ['event' => 'confirmed']
        $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!');
    }
}

Using PHP 8 Attribute

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

class MyComponent extends Component
{
    use Confirm;

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

    #[On('phpOnAttribute')]
    public function onConfirmationWithAttribute()
    {
        dd('confirmed #3!');
    }
}

Available configuration