├── composer.json
├── readme.md
├── resources
    ├── js
    │   └── modals.js
    └── views
    │   └── modals.blade.php
└── src
    ├── Components
        └── Modals.php
    └── Providers
        └── LaravelLivewireModalsProvider.php


/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "bastinald/laravel-livewire-modals",
 3 |     "homepage": "https://github.com/bastinald/laravel-livewire-modals",
 4 |     "description": "Dynamic Laravel Livewire Bootstrap modals.",
 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\\LaravelLivewireModals\\": "src"
20 |         }
21 |     },
22 |     "extra": {
23 |         "laravel": {
24 |             "providers": [
25 |                 "Bastinald\\LaravelLivewireModals\\Providers\\LaravelLivewireModalsProvider"
26 |             ]
27 |         }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Laravel Livewire Modals
  2 | 
  3 | This package allows you to dynamically show your Laravel Livewire components inside Bootstrap modals.
  4 | 
  5 | ## Documentation
  6 | 
  7 | - [Requirements](#requirements)
  8 | - [Installation](#installation)
  9 | - [Usage](#usage)
 10 |     - [Modal Views](#modal-views)
 11 |     - [Showing Modals](#showing-modals)
 12 |     - [Mount Parameters](#mount-parameters)
 13 |     - [Hiding Modals](#hiding-modals)
 14 |     - [Emitting Events](#emitting-events)
 15 | - [Publishing Assets](#publishing-assets)
 16 |     - [Custom View](#custom-view)
 17 | 
 18 | ## Requirements
 19 | 
 20 | - Bootstrap 5 must be installed via webpack first
 21 | 
 22 | ## Installation
 23 | 
 24 | Require the package:
 25 | 
 26 | ```console
 27 | composer require bastinald/laravel-livewire-modals
 28 | ```
 29 | 
 30 | Add the `livewire:modals` component to your app layout view:
 31 | 
 32 | ```html
 33 | <livewire:modals/>
 34 | <livewire:scripts/>
 35 | <script src="{{ asset('js/app.js') }}"></script>
 36 | ```
 37 | 
 38 | Require `../../vendor/bastinald/laravel-livewire-modals/resources/js/modals` in your app javascript file:
 39 | 
 40 | ```javascript
 41 | require('@popperjs/core');
 42 | require('bootstrap');
 43 | require('../../vendor/bastinald/laravel-livewire-modals/resources/js/modals');
 44 | ```
 45 | 
 46 | ## Usage
 47 | 
 48 | ### Modal Views
 49 | 
 50 | Make a Livewire component you want to show as a modal. The view for this component must use the Bootstrap `modal-dialog` container:
 51 | 
 52 | ```html
 53 | <div class="modal-dialog">
 54 |     <div class="modal-content">
 55 |         <div class="modal-header">
 56 |             <h5 class="modal-title">Modal title</h5>
 57 |             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 58 |         </div>
 59 |         <div class="modal-body">
 60 |             <p>Modal body text goes here.</p>
 61 |         </div>
 62 |         <div class="modal-footer">
 63 |             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 64 |             <button type="button" class="btn btn-primary">Save changes</button>
 65 |         </div>
 66 |     </div>
 67 | </div>
 68 | ```
 69 | 
 70 | ### Showing Modals
 71 | 
 72 | Show a modal by emitting the `showModal` event with the component alias:
 73 | 
 74 | ```html
 75 | <button type="button" wire:click="$emit('showModal', 'auth.profile-update')">
 76 |     {{ __('Update Profile') }}
 77 | </button>
 78 | ```
 79 | 
 80 | ### Mount Parameters
 81 | 
 82 | Pass parameters to the component `mount` method after the alias:
 83 | 
 84 | ```html
 85 | <button type="button" wire:click="$emit('showModal', 'users.update', '{{ $user->id }}')">
 86 |     {{ __('Update User #' . $user->id) }}
 87 | </button>
 88 | ```
 89 | 
 90 | The component `mount` method for the example above would look like this: 
 91 | 
 92 | ```php
 93 | namespace App\Http\Livewire\Users;
 94 | 
 95 | use App\Models\User;
 96 | use Livewire\Component;
 97 | 
 98 | class Update extends Component
 99 | {
100 |     public $user;
101 |     
102 |     public function mount(User $user)
103 |     {
104 |         $this->user = $user;
105 |     }
106 |     
107 |     public function render()
108 |     {
109 |         return view('users.update');
110 |     }
111 | }
112 | ```
113 | 
114 | ### Hiding Modals
115 | 
116 | Hide the currently open modal by emitting the `hideModal` event:
117 | 
118 | ```html
119 | <button type="button" wire:click="$emit('hideModal')">
120 |     {{ __('Close') }}
121 | </button>
122 | ```
123 | 
124 | Or by using the Bootstrap `data-bs-dismiss` attribute:
125 | 
126 | ```html
127 | <button type="button" data-bs-dismiss="modal">
128 |     {{ __('Close') }}
129 | </button>
130 | ```
131 | 
132 | ### Emitting Events
133 | 
134 | You can emit events inside your views:
135 | 
136 | ```html
137 | <button type="button" wire:click="$emit('hideModal')">
138 |     {{ __('Close') }}
139 | </button>
140 | ```
141 | 
142 | Or inside your components, just like any normal Livewire event:
143 | 
144 | ```php
145 | public function save()
146 | {
147 |     $this->validate();
148 | 
149 |     // save the record
150 | 
151 |     $this->emit('hideModal');
152 | }
153 | ```
154 | 
155 | ## Publishing Assets
156 | 
157 | ### Custom View
158 | 
159 | Use your own modals view by publishing the package view:
160 | 
161 | ```console
162 | php artisan vendor:publish --tag=laravel-livewire-modals:views
163 | ```
164 | 
165 | Now edit the view file inside `resources/views/vendor/laravel-livewire-modals`. The package will use this view to render the component.
166 | 


--------------------------------------------------------------------------------
/resources/js/modals.js:
--------------------------------------------------------------------------------
 1 | import {Modal} from 'bootstrap';
 2 | 
 3 | let modalsElement = document.getElementById('laravel-livewire-modals');
 4 | 
 5 | modalsElement.addEventListener('hidden.bs.modal', () => {
 6 |     Livewire.emit('resetModal');
 7 | });
 8 | 
 9 | Livewire.on('showBootstrapModal', () => {
10 |     let modal = Modal.getInstance(modalsElement);
11 | 
12 |     if (!modal) {
13 |         modal = new Modal(modalsElement);
14 |     }
15 | 
16 |     modal.show();
17 | });
18 | 
19 | Livewire.on('hideModal', () => {
20 |     let modal = Modal.getInstance(modalsElement);
21 | 
22 |     modal.hide();
23 | });
24 | 


--------------------------------------------------------------------------------
/resources/views/modals.blade.php:
--------------------------------------------------------------------------------
 1 | <div id="laravel-livewire-modals" tabindex="-1"
 2 |     data-bs-backdrop="static" data-bs-keyboard="false"
 3 |     wire:ignore.self class="modal fade">
 4 | 
 5 |     @if($alias)
 6 |         @livewire($alias, $params, key($alias))
 7 |     @endif
 8 | 
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/Components/Modals.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Bastinald\LaravelLivewireModals\Components;
 4 | 
 5 | use Livewire\Component;
 6 | 
 7 | class Modals extends Component
 8 | {
 9 |     public $alias;
10 |     public $params = [];
11 | 
12 |     protected $listeners = ['showModal', 'resetModal'];
13 | 
14 |     public function render()
15 |     {
16 |         return view('laravel-livewire-modals::modals');
17 |     }
18 | 
19 |     public function showModal($alias, ...$params)
20 |     {
21 |         $this->alias = $alias;
22 |         $this->params = $params;
23 | 
24 |         $this->emit('showBootstrapModal');
25 |     }
26 | 
27 |     public function resetModal()
28 |     {
29 |         $this->reset();
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Providers/LaravelLivewireModalsProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Bastinald\LaravelLivewireModals\Providers;
 4 | 
 5 | use Bastinald\LaravelLivewireModals\Components\Modals;
 6 | use Illuminate\Support\ServiceProvider;
 7 | use Livewire\Livewire;
 8 | 
 9 | class LaravelLivewireModalsProvider extends ServiceProvider
10 | {
11 |     public function boot()
12 |     {
13 |         $this->loadViewsFrom(__DIR__ . '/../../resources/views', 'laravel-livewire-modals');
14 | 
15 |         $this->publishes(
16 |             [__DIR__ . '/../../resources/views' => resource_path('views/vendor/laravel-livewire-modals')],
17 |             ['laravel-livewire-modals', 'laravel-livewire-modals:views']
18 |         );
19 | 
20 |         Livewire::component('modals', Modals::class);
21 |     }
22 | }
23 | 


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