├── .gitignore
├── CHANGELOG.md
├── README.md
├── composer.json
├── config
    └── livewire-toast.php
├── resources
    └── views
    │   ├── icons
    │       ├── error.blade.php
    │       ├── info.blade.php
    │       ├── success.blade.php
    │       └── warning.blade.php
    │   └── livewire
    │       └── livewire-toast.blade.php
└── src
    ├── Http
        └── Livewire
        │   └── LivewireToast.php
    └── LivewireToastServiceProvider.php


/.gitignore:
--------------------------------------------------------------------------------
1 | composer.lock
2 | vendor
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | ## [1.0.0] - 2021-05-23
 5 | - Initial Release
 6 | 
 7 | ## [1.0.1] - 2021-05-25
 8 | - Fixed zoom_in transition
 9 | - Introduced Session Flash Support
10 | - Updated README.md


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # livewire-toast
  2 | Livewire Package to display Toast Notification based on TALL Stack.
  3 | 
  4 | <p align="center">
  5 |   <img src="https://media.giphy.com/media/P1aEuZq9kSok2RIfJC/giphy.gif">
  6 | </p>
  7 | 
  8 | ## Requirements
  9 | 
 10 | Make sure that [Livewire](https://laravel-livewire.com/) is installed properly on your project.
 11 | 
 12 | Make sure that [TailwindCSS](https://tailwindcss.com/) is installed properly on your project.
 13 | 
 14 | Make sure that [AlpineJS](https://github.com/alpinejs/alpine/) is installed properly on your project.
 15 | 
 16 | ## Installation
 17 | 
 18 | You can install the Package using Composer
 19 | 
 20 | ```bash
 21 | composer require ascsoftw/livewire-toast
 22 | ```
 23 | 
 24 | ## Usage
 25 | 
 26 | Put Livewire-component `@livewire('livewire-toast')` anywhere into your app layout.
 27 | 
 28 | You can then call the Livewire Toast as below:
 29 | 
 30 | *From Livewire Component*
 31 | 
 32 | ```php
 33 | $this->emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
 34 | $this->emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
 35 | $this->emitTo('livewire-toast', 'show', ['type' => 'warning', 'message' => 'This is warning!']); //Can also pass type and message as array
 36 | 
 37 | ```
 38 | 
 39 | *Using Session Flash*
 40 | 
 41 | ```php
 42 | session()->flash('livewire-toast', 'Project Added Successfully');
 43 | session()->flash('livewire-toast', ['type' => 'error', 'message' => 'There was an Error!']);
 44 | 
 45 | ```
 46 | 
 47 | *From Livewire View*
 48 | ```php
 49 | $emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
 50 | $emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
 51 | $emitTo('livewire-toast', 'show', {'type' : 'warning', 'message' : 'This is warning!'}); //Can also pass type and message as object
 52 | ```
 53 | 
 54 | *From JS*
 55 | ```js
 56 | Livewire.emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
 57 | Livewire.emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
 58 | Livewire.emitTo('livewire-toast', 'show', {'type' : 'warning', 'message' : 'This is warning!'}); //Can also pass type and message as object
 59 | ```
 60 | 
 61 | 
 62 | ## Configurations
 63 | 
 64 | If you want to override the configurations, you must publish the assets using below command
 65 | 
 66 | ```bash
 67 | php artisan vendor:publish --tag=config
 68 | ```
 69 | 
 70 | This will publish the configuration file at `config/livewire-toast.php`. You can override any configurations.
 71 | | Name             | Type          | Default            | Description                                                  | Options|
 72 | | ---------------- | ------------- | ------------------ | ------------------------------------------------------------ |--------|
 73 | | type             | String        | success            | Notification Type                                            | success, warning, error, info|
 74 | | position         | String        | bottom-right       | Part of the screen where notifications will pop out          | bottom-right, bottom-left, top-right, top-left|
 75 | | duration         | Number        | 3000               | Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) |
 76 | | showIcon         | Boolean       | true               | Whether to show icon next to message.                        ||
 77 | | hideOnClick      | Boolean       | true               | Close notification when clicked                              ||
 78 | | color.bg.success | String        | green              | Color for Success Notification. Must be available in TailwindCss||
 79 | | color.bg.warning | String        | yellow             | Color for Warning Notification. Must be available in TailwindCss||
 80 | | color.bg.info    | String        | blue               | Color for Info Notification. Must be available in TailwindCss||
 81 | | color.bg.error   | String        | red                | Color for Error Notification. Must be available in TailwindCss||
 82 | | text_color       | String        | white              | Text Color used by TailwindCss class. If using color other than white or black, provide full color like red-300.||
 83 | | transition       | Boolean       | true               | Whether to use Transition to hide/show Notification          ||
 84 | | transition_type  | String        | appear_from_above  | Transition Type                                            | appear_from_below, appear_from_above, appear_from_left, appear_from_right, zoom_in, rotate|
 85 | 
 86 | 
 87 | You can also publish the View using below command
 88 | ```bash
 89 | php artisan vendor:publish --tag=views
 90 | ```
 91 | 
 92 | This will publish the Views in `resources/views/vendor/livewire-toast` directory which you can then customize.
 93 | 
 94 | ## Troubleshooting
 95 | Your messages don't get styles while using TailwindCss? Please publish your view. Therefore Laravel Mix compiler will find package related views and will purge CSS accordingly.
 96 | 
 97 | ## Contributing
 98 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 99 | 
100 | ## Credits
101 | 
102 | - [AscSoftwares](http://www.ascsoftwares.com)
103 | 
104 | ## License
105 | [MIT](https://choosealicense.com/licenses/mit/)
106 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ascsoftw/livewire-toast",
 3 |     "description": "Livewire Package to display Toast Notifications",
 4 |     "license": "MIT",
 5 |     "keywords": ["Laravel", "LivewireToast", "Toast", "Notifications", "Livewire"],
 6 |     "authors": [
 7 |         {
 8 |             "name": "AscSoftwares",
 9 |             "email": "support@ascsoftwares.com"
10 |         }
11 |     ],
12 |     "autoload": {
13 |         "psr-4": {
14 |             "Ascsoftw\\LivewireToast\\" : "src/"
15 |         }
16 |     },
17 |     "require-dev": {
18 |         "livewire/livewire": "^2.4",
19 |         "orchestra/testbench": "^6.17"
20 |     },
21 |     "extra": {
22 |         "laravel": {
23 |             "providers": [
24 |                 "Ascsoftw\\LivewireToast\\LivewireToastServiceProvider"
25 |             ]
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/config/livewire-toast.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 |     //You can specify 1 of the following 4 types:
 5 |     //success, warning, info, error
 6 |     'type' => 'success', //default is success
 7 |     //You can specify 1 of the following 4 positions:
 8 |     //bottom-right, bottom-left, top-right, top-left
 9 |     'position' => 'bottom-right', //default is bottom-right
10 |     //duration in ms for which the Toast is visible. Specify 0 if you do not want to hide it.
11 |     'duration' => 3000, //default is 3000
12 |     //Whether to show icon next to message.
13 |     'show_icon' => true, //default is true
14 |     //Whether to hide message on click.
15 |     'hide_on_click' => true, //default is true
16 |     //Background Color used by TailwindCss for various types.
17 |     'color' => [
18 |         'bg' => [
19 |             'success' => 'green',
20 |             'warning' => 'yellow',
21 |             'info' => 'blue',
22 |             'error' => 'red',
23 |         ]
24 |     ],
25 |     //Text Color used by TailwindCss class. If using color other than white or black, provide full color like red-300.
26 |     'text_color' => 'white', //default is white
27 |     //Whether to use Transition
28 |     'transition' => true,  //default is true
29 |     //Following transitions are supported:
30 |     //appear_from_below, appear_from_above, appear_from_left, appear_from_right, zoom_in, rotate
31 |     'transition_type' => 'appear_from_above' //appear_from_above is default
32 | ];
33 | 


--------------------------------------------------------------------------------
/resources/views/icons/error.blade.php:
--------------------------------------------------------------------------------
1 | <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2 |     <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
3 |     <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
4 | </svg>


--------------------------------------------------------------------------------
/resources/views/icons/info.blade.php:
--------------------------------------------------------------------------------
1 | <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-info" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
3 |     <circle cx="8" cy="4.5" r="1"/>
4 | </svg>


--------------------------------------------------------------------------------
/resources/views/icons/success.blade.php:
--------------------------------------------------------------------------------
1 | <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/resources/views/icons/warning.blade.php:
--------------------------------------------------------------------------------
1 | <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-exclamation" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
3 | </svg>


--------------------------------------------------------------------------------
/resources/views/livewire/livewire-toast.blade.php:
--------------------------------------------------------------------------------
 1 | <div class="fixed {{$positionCss}} @if($hideOnClick) cursor-pointer @endif"
 2 |     x-data="{show: false, timeout: null, duration: null}"
 3 |     @if($message)
 4 |         x-init="() => { duration = @this.duration; clearTimeout(timeout); show = true;
 5 |                 if( duration > 0 ) {timeout = setTimeout(() => { show = false }, duration); }}"
 6 |     @endif
 7 |     @new-toast.window="duration = @this.duration; clearTimeout(timeout); show = true;
 8 |                 if( duration > 0 ) { timeout = setTimeout(() => { show = false }, duration); }"
 9 |     @click="if(@this.hideOnClick) { show = false; }"
10 |     x-show="show"
11 | 
12 |     @if($transition)
13 |         x-transition:enter="transition ease-in-out duration-300" 
14 |         x-transition:enter-start="opacity-0 transform {{$this->transitioClasses['enter_start_class']}}" 
15 |         x-transition:enter-end="opacity-100 transform {{$this->transitioClasses['enter_end_class']}}" 
16 |         x-transition:leave="transition ease-in-out duration-500" 
17 |         x-transition:leave-start="opacity-100 transform {{$this->transitioClasses['leave_start_class']}}"
18 |         x-transition:leave-end="opacity-0 transform {{$this->transitioClasses['leave_end_class']}}"
19 |     @endif
20 | >
21 |     @if($message)
22 |         <div class="flex bg-{{$bgColorCss}}-500 border-l-4 border-{{$bgColorCss}}-700 py-2 px-3 shadow-md mb-2 ">
23 |             <!-- icons -->
24 |             @if($showIcon)
25 |                 <div class="text-{{$bgColorCss}}-500 rounded-full bg-{{$textColorCss}} mr-3">
26 |                     @include('livewire-toast::icons.' . $type)
27 |                 </div>
28 |             @endif
29 |             <!-- message -->
30 |             <div class="text-{{$textColorCss}} max-w-xs ">
31 |                 {{$message}}
32 |             </div>
33 |         </div>
34 |     @endif
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/Http/Livewire/LivewireToast.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Ascsoftw\LivewireToast\Http\Livewire;
  4 | 
  5 | use Livewire\Component;
  6 | 
  7 | class LivewireToast extends Component
  8 | {
  9 |     protected $listeners = ['show', 'showWarning', 'showError', 'showInfo', 'showSuccess'];
 10 |     public $message;
 11 |     public $type;
 12 |     public $positionCss;
 13 |     public $bgColorCss;
 14 |     public $textColorCss;
 15 |     public $duration;
 16 |     public $showIcon;
 17 |     public $hideOnClick;
 18 |     public $transition;
 19 |     public $transitioClasses;
 20 | 
 21 |     protected $transitions = [
 22 |         'rotate' => ['rotate-180', 'rotate'],
 23 |         'zoom_in' => ['scale-50', 'scale-100'],
 24 |         'appear_from_right' => ['translate-x-1/2', 'translate-x-0'],
 25 |         'appear_from_left' => ['-translate-x-1/2', 'translate-x-0'],
 26 |         'appear_from_below' => ['translate-y-1/2', 'translate-y-0'],
 27 |         'appear_from_above' => ['-translate-y-1/2', 'translate-y-0'],
 28 |     ];
 29 | 
 30 |     public function mount()
 31 |     {
 32 |         if($message = session('livewire-toast')) {
 33 |             $this->show($message);
 34 |         }
 35 |     }
 36 | 
 37 |     public function show($params)
 38 |     {
 39 |         $type = '';
 40 |         if (is_array($params)) {
 41 |             $this->message = $params['message'] ?? '';
 42 |             $type = $params['type'] ?? '';
 43 |         } else {
 44 |             $this->message = $params;
 45 |         }
 46 |         $this->_setType($type);
 47 |     }
 48 | 
 49 |     public function showWarning($message)
 50 |     {
 51 |         $this->message = $message;
 52 |         $this->_setType('warning');
 53 |     }
 54 | 
 55 |     public function showInfo($message)
 56 |     {
 57 |         $this->message = $message;
 58 |         $this->_setType('info');
 59 |     }
 60 | 
 61 |     public function showError($message)
 62 |     {
 63 |         $this->message = $message;
 64 |         $this->_setType('error');
 65 |     }
 66 | 
 67 |     public function showSuccess($message)
 68 |     {
 69 |         $this->message = $message;
 70 |         $this->_setType('success');
 71 |     }
 72 | 
 73 |     public function render()
 74 |     {
 75 |         $this->_setBackgroundColor();
 76 |         $this->_setTextColor();
 77 |         $this->_setPosition();
 78 |         $this->_setDuration();
 79 |         $this->_setIcon();
 80 |         $this->_setClickHandler();
 81 |         $this->_setTransition();
 82 |         
 83 |         if (!empty($this->message)) {
 84 |             $this->dispatchBrowserEvent('new-toast');
 85 |         }
 86 |         return view('livewire-toast::livewire.livewire-toast');
 87 |     }
 88 | 
 89 |     private function _setType($type = '')
 90 |     {
 91 |         if (in_array($type, ['warning', 'info', 'error', 'success'])) {
 92 |             $this->type = $type;
 93 |         } else {
 94 |             $this->type = config('livewire-toast.type');
 95 |         }
 96 |     }
 97 | 
 98 |     private function _setBackgroundColor()
 99 |     {
100 |         $this->bgColorCss = config('livewire-toast.color.bg.' . $this->type);
101 |     }
102 | 
103 |     private function _setTextColor()
104 |     {
105 |         $this->textColorCss = config('livewire-toast.text_color');
106 |     }
107 | 
108 |     private function _setPosition()
109 |     {
110 |         switch (config('livewire-toast.position')) {
111 |             case 'top-left':
112 |                 $this->positionCss = 'top-4 left-4';
113 |                 break;
114 |             case 'top-right':
115 |                 $this->positionCss = 'top-4 right-4';
116 |                 break;
117 |             case 'bottom-left':
118 |                 $this->positionCss = 'bottom-4 left-4';
119 |                 break;
120 |             case 'bottom-right':
121 |             default:
122 |                 $this->positionCss = 'bottom-4 right-4';
123 |         }
124 |     }
125 | 
126 |     private function _setDuration()
127 |     {
128 |         $this->duration = (int)config('livewire-toast.duration');
129 |     }
130 | 
131 |     private function _setIcon()
132 |     {
133 |         $this->showIcon = (boolean)config('livewire-toast.show_icon');
134 |     }
135 | 
136 |     private function _setClickHandler()
137 |     {
138 |         $this->hideOnClick = (boolean)config('livewire-toast.hide_on_click');
139 |     }
140 | 
141 |     private function _setTransition()
142 |     {
143 |         $this->transition = (boolean)config('livewire-toast.transition');
144 |         if ($this->transition) {
145 |             $this->transitioClasses['leave_end_class'] =
146 |             $this->transitioClasses['enter_start_class'] =
147 |             reset($this->transitions[config('livewire-toast.transition_type')]);
148 | 
149 |             $this->transitioClasses['leave_start_class'] =
150 |             $this->transitioClasses['enter_end_class'] =
151 |             end($this->transitions[config('livewire-toast.transition_type')]);
152 |         }
153 |     }
154 | }
155 | 


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


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