Wire Elements Modal

You can intercept the closing process by listening to closingModalOnEscape or closingModalOnClickAway events. This allows you to prevent the modal from closing if the user has unsaved changes (e.g., a isDirty property).

@script
<script>
    $wire.on('closingModalOnEscape', data => {
        if ($wire.isDirty && !confirm('You have unsaved changes. Are you sure?')) {
            data.closing = false;
        }
    });
    $wire.on('closingModalOnClickAway', data => {
        if ($wire.isDirty && !confirm('You have unsaved changes. Are you sure?')) {
            data.closing = false;
        }
    });
</script>
@endscript

@script
<script>
    $wire.on('closingModalOnEscape', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
    $wire.on('closingModalOnClickAway', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
</script>
@endscript

Modals are opened by dispatching the openModal event. You can pass a component name and an arguments object.

From a Livewire component:

<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">Edit User</button>

From plain JavaScript/HTML:

<button onclick="Livewire.dispatch('openModal', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">Edit User</button>

Handling Parameters in the Component:

Arguments passed in the arguments object are automatically injected into the component's properties or the mount method. If a type-hinted model is used, the package will automatically fetch the model from the database using the provided ID.

class EditUser extends ModalComponent
{
    public User $user;

    public function mount()
    {
        Gate::authorize('update', $this->user);
    }
}

The following keys are available in the wire-elements-modal.php configuration file:

• include_css (bool): Whether to include CSS if not using Tailwind.
• include_js (bool): Whether to inject required Javascript automatically.
• component_defaults (array): Default properties for modal components.
  • modal_max_width (string): Default width. Options: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'.
  • close_modal_on_click_away (bool): Whether clicking outside the modal closes it.
  • close_modal_on_escape (bool): Whether pressing Escape closes the modal.
  • close_modal_on_escape_is_forceful (bool): Whether the Escape key close is forceful.
  • dispatch_close_event (bool): Whether to dispatch a close event.
  • destroy_on_close (bool): Whether to destroy the component on close.

return [
    'include_css' => false,
    'include_js' => true,
    'component_defaults' => [
        'modal_max_width' => '2xl',
        'close_modal_on_click_away' => true,
        'close_modal_on_escape' => true,
        'close_modal_on_escape_is_forceful' => true,
        'dispatch_close_event' => false,
        'destroy_on_close' => false,
    ],
];

You can customize the behavior of your modal by overriding static methods in your ModalComponent class.

Example Configuration

class EditUser extends ModalComponent
{
    public static function modalMaxWidth(): string
    {
        return 'xl';
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }
}

The openModal method is used to programmatically trigger the opening of a modal component. It accepts the component name, an array of arguments to pass to the component, and an optional array of modal attributes to override default behaviors.

Requirements:

• The target component must implement the LivewireUI\Modal\Contracts\ModalComponent interface.

Arguments:

• $component (string): The name or class of the Livewire component to display.
• $arguments (array): Data to be passed to the component's public properties. The method automatically resolves these based on property types (e.g., resolving Eloquent models via route binding or converting values to Enums).
• $modalAttributes (array): Configuration to override the component's default modal settings (see Modal Component Configuration).

When a modal is opened, the activeModalComponentChanged event is dispatched with the unique ID of the modal.