Livewire component that provides you with a modal that supports multiple child modals while maintaining state.
Full Changelog: https://github.com/wire-elements/modal/compare/2.0.7...2.0.8
Full Changelog: https://github.com/wire-elements/modal/compare/2.0.6...2.0.7
Full Changelog: https://github.com/wire-elements/modal/compare/2.0.4-beta...2.0.5-beta
php artisan vendor:publish --tag=wire-elements-modal-config
You can automate the required changes using the following command:
php artisan livewire:upgrade --run-only wire-elements-modal-upgrade
@livewire('livewire-ui-modal')
with @livewire('wire-elements-modal')
arguments
is the named property to pass arguments to your modal, for example:$dispatch('openModal', {component: 'edit-user', arguments: {user: 5}})
Livewire v3 now expects named arguments; this means you will have to adjust your events.
<-- Before -->
<button wire:click="$emit('openModal', 'users')">Show Users</button>
<!-- After -->
<button wire:click="$dispatch('openModal', {component: 'users'})">Show Users</button>
<-- Before -->
<button wire:click="$emit('openModal', 'edit-user', {user: 5})">Edit User</button>
<!-- After -->
<button wire:click="$dispatch('openModal', {component: 'edit-user', arguments: {user: 5}})">Edit User</button>
You can use regular expression to automate this change:
// Regular Expression
emit\('openModal', '([^']+)'(?:, (\{[^}]+\}|@js\(\[[^\]]+\]\)))?\)
// Example 1
$emit('openModal', 'edit-user', {user: 5})
// Matches
$0 = emit('openModal', 'edit-user', {user: 5})
$1 = edit-user
$2 = {user: 5}
// Example 2
$emit('openModal', 'edit-user', @js(['foo' => 'bar']))
// Matches
$0 = emit('openModal', 'edit-user', @js(['foo' => 'bar']))
$1 = edit-user
$2 = @js(['foo' => 'bar'])
// Update all occurrences
dispatch('openModal', {component: '$1', arguments: $2});
In PHPStorm: