├── resources
    ├── js
    │   └── toasts.js
    └── views
    │   └── toasts.blade.php
├── src
    ├── Components
    │   └── Toasts.php
    └── Providers
    │   └── LaravelLivewireToastsProvider.php
├── composer.json
├── config
    └── laravel-livewire-toasts.php
└── readme.md


/resources/js/toasts.js:
--------------------------------------------------------------------------------
 1 | import {Toast} from 'bootstrap';
 2 | 
 3 | let toastsElement = document.getElementById('laravel-livewire-toasts');
 4 | 
 5 | Livewire.on('showBootstrapToast', () => {
 6 |     let toast = Toast.getOrCreateInstance(toastsElement);
 7 | 
 8 |     toast.show();
 9 | });
10 | 
11 | Livewire.hook('message.processed', (message) => {
12 |     if (Object.keys(message.response.serverMemo.errors).length) {
13 |         Livewire.emit('showToast', 'danger', toastsElement.dataset.errorMessage);
14 |     }
15 | });
16 | 


--------------------------------------------------------------------------------
/src/Components/Toasts.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Bastinald\LaravelLivewireToasts\Components;
 4 | 
 5 | use Livewire\Component;
 6 | 
 7 | class Toasts extends Component
 8 | {
 9 |     public $color;
10 |     public $message;
11 | 
12 |     protected $listeners = ['showToast'];
13 | 
14 |     public function render()
15 |     {
16 |         return view('laravel-livewire-toasts::toasts');
17 |     }
18 | 
19 |     public function showToast($color, $message)
20 |     {
21 |         $this->color = $color;
22 |         $this->message = $message;
23 | 
24 |         $this->emit('showBootstrapToast');
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/resources/views/toasts.blade.php:
--------------------------------------------------------------------------------
 1 | <div id="laravel-livewire-toasts"
 2 |     data-bs-delay="{{ config('laravel-livewire-toasts.hide_delay') }}"
 3 |     data-error-message="{{ __(config('laravel-livewire-toasts.error_message')) }}"
 4 |     class="toast position-fixed align-items-center text-white bg-{{ $color }} border-0 fade hide"
 5 |     style="top: 1rem; right: 1rem; width: 18rem; z-index: 1090;">
 6 | 
 7 |     <div class="d-flex">
 8 |         <div class="toast-body">
 9 |             {{ $message }}
10 |         </div>
11 | 
12 |         <button type="button" data-bs-dismiss="toast"
13 |             class="btn-close btn-close-white me-2 m-auto"></button>
14 |     </div>
15 | 
16 | </div>
17 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "bastinald/laravel-livewire-toasts",
 3 |     "homepage": "https://github.com/bastinald/laravel-livewire-toasts",
 4 |     "description": "Dynamic Laravel Livewire Bootstrap toasts.",
 5 |     "license": "MIT",
 6 |     "authors": [
 7 |         {
 8 |             "name": "Kevin Dion",
 9 |             "email": "bastinald@icloud.com",
10 |             "role": "Developer"
11 |         }
12 |     ],
13 |     "require": {
14 |         "laravel/framework": "^8.0",
15 |         "livewire/livewire": "^2.0"
16 |     },
17 |     "autoload": {
18 |         "psr-4": {
19 |             "Bastinald\\LaravelLivewireToasts\\": "src"
20 |         }
21 |     },
22 |     "extra": {
23 |         "laravel": {
24 |             "providers": [
25 |                 "Bastinald\\LaravelLivewireToasts\\Providers\\LaravelLivewireToastsProvider"
26 |             ]
27 |         }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/config/laravel-livewire-toasts.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Hide Delay
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | This value is how long it takes for toasts to automatically hide after
11 |     | they have been shown. This value is in milliseconds.
12 |     |
13 |     */
14 | 
15 |     'hide_delay' => 3000,
16 | 
17 |     /*
18 |     |--------------------------------------------------------------------------
19 |     | Error Message
20 |     |--------------------------------------------------------------------------
21 |     |
22 |     | This value is the error message to use for the toast that shows whenever
23 |     | validation errors occur via Livewire components. This value can also be
24 |     | changed by creating a translation for this value.
25 |     |
26 |     */
27 | 
28 |     'error_message' => 'Whoops! Something went wrong.',
29 | 
30 | ];
31 | 


--------------------------------------------------------------------------------
/src/Providers/LaravelLivewireToastsProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Bastinald\LaravelLivewireToasts\Providers;
 4 | 
 5 | use Bastinald\LaravelLivewireToasts\Components\Toasts;
 6 | use Illuminate\Support\ServiceProvider;
 7 | use Livewire\Livewire;
 8 | 
 9 | class LaravelLivewireToastsProvider extends ServiceProvider
10 | {
11 |     public function boot()
12 |     {
13 |         $this->loadViewsFrom(__DIR__ . '/../../resources/views', 'laravel-livewire-toasts');
14 | 
15 |         $this->publishes(
16 |             [__DIR__ . '/../../config/laravel-livewire-toasts.php' => config_path('laravel-livewire-toasts.php')],
17 |             ['laravel-livewire-toasts', 'laravel-livewire-toasts:config']
18 |         );
19 | 
20 |         $this->publishes(
21 |             [__DIR__ . '/../../resources/views' => resource_path('views/vendor/laravel-livewire-toasts')],
22 |             ['laravel-livewire-toasts', 'laravel-livewire-toasts:views']
23 |         );
24 | 
25 |         Livewire::component('toasts', Toasts::class);
26 |     }
27 | 
28 |     public function register()
29 |     {
30 |         $this->mergeConfigFrom(__DIR__ . '/../../config/laravel-livewire-toasts.php', 'laravel-livewire-toasts');
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Laravel Livewire Toasts
  2 | 
  3 | This package allows you to dynamically show Bootstrap toasts via Laravel Livewire components.
  4 | 
  5 | ## Documentation
  6 | 
  7 | - [Requirements](#requirements)
  8 | - [Installation](#installation)
  9 | - [Usage](#usage)
 10 |     - [Showing Toasts](#showing-toasts)
 11 |     - [Emitting Events](#emitting-events)
 12 | - [Publishing Assets](#publishing-assets)
 13 |     - [Custom Config](#custom-config)
 14 |     - [Custom View](#custom-view)
 15 | 
 16 | ## Requirements
 17 | 
 18 | - Bootstrap 5 must be installed via webpack first
 19 | 
 20 | ## Installation
 21 | 
 22 | Require the package:
 23 | 
 24 | ```console
 25 | composer require bastinald/laravel-livewire-toasts
 26 | ```
 27 | 
 28 | Add the `livewire:toasts` component to your app layout view:
 29 | 
 30 | ```html
 31 | <livewire:toasts/>
 32 | <livewire:scripts/>
 33 | <script src="{{ asset('js/app.js') }}"></script>
 34 | ```
 35 | 
 36 | Require `../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts` in your app javascript file:
 37 | 
 38 | ```javascript
 39 | require('@popperjs/core');
 40 | require('bootstrap');
 41 | require('../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts');
 42 | ```
 43 | 
 44 | ## Usage
 45 | 
 46 | ### Showing Toasts
 47 | 
 48 | Show a toast by emitting the `showToast` event with the color & message:
 49 | 
 50 | ```php
 51 | public function save()
 52 | {
 53 |     $this->validate();
 54 | 
 55 |     $this->user->update([
 56 |         'name' => $this->name,
 57 |         'email' => $this->email,
 58 |     ]);
 59 | 
 60 |     $this->emit('showToast', 'success', __('User updated!'));
 61 | }
 62 | ```
 63 | 
 64 | The color should be a Bootstrap color name e.g. `success`, `danger`, `info`.
 65 | 
 66 | ### Emitting Events
 67 | 
 68 | You can emit events inside your views:
 69 | 
 70 | ```html
 71 | <button type="button" wire:click="$emit('showToast', 'danger', 'Closing!')">
 72 |     {{ __('Close') }}
 73 | </button>
 74 | ```
 75 | 
 76 | Or inside your components, just like any normal Livewire event:
 77 | 
 78 | ```php
 79 | public function save()
 80 | {
 81 |     $this->validate();
 82 | 
 83 |     // save the record
 84 | 
 85 |     $this->emit('showToast', 'info', __('Record saved!'));
 86 | }
 87 | ```
 88 | 
 89 | ## Publishing Assets
 90 | 
 91 | ### Custom Config
 92 | 
 93 | Customize the toasts configuration by publishing the config file:
 94 | 
 95 | ```console
 96 | php artisan vendor:publish --tag=laravel-livewire-toasts:config
 97 | ```
 98 | 
 99 | Now you can easily change things like the hide delay and error message.
100 | 
101 | ### Custom View
102 | 
103 | Use your own toasts view by publishing the view file:
104 | 
105 | ```console
106 | php artisan vendor:publish --tag=laravel-livewire-toasts:views
107 | ```
108 | 
109 | Now edit the view file inside `resources/views/vendor/laravel-livewire-toasts`. The package will use this view to render the component.
110 | 


--------------------------------------------------------------------------------