microweber-packages/microweber-livewire-modal

Microweber Livewire Modal

Standalone Laravel Livewire modal package with:

• Multiple open instances — each openModal gets a unique instance id (no clobbering)
• Nested / stacked modals — opening a modal inside another keeps the parent open
• Skins — default skin with X close button; swap via config or per-modal options
• Options (all ON by default):
  • show close button
  • close on click outside (backdrop)
  • show backdrop
  • close on Escape

Works as a drop-in for wire-elements/modal (livewire-ui-modal / wire-elements-modal aliases) and as a standalone package in any Laravel + Livewire app.

Installation

composer require microweber-packages/microweber-livewire-modal

Laravel auto-discovers the service provider. Publish config/views if needed:

php artisan vendor:publish --tag=livewire-modal-config
php artisan vendor:publish --tag=livewire-modal-views

Usage

1. Mount the modal host once (layout / footer)

@livewire('microweber-livewire-modal')
{{-- or legacy alias: @livewire('livewire-ui-modal') --}}

2. Create a modal component

use MicroweberPackages\LivewireModal\ModalComponent;

class ConfirmDeleteModal extends ModalComponent
{
    public string $title = 'Confirm';

    public function confirm(): void
    {
        $this->dispatch('item-deleted');
        $this->closeModal();
    }

    public function render()
    {
        return view('modals.confirm-delete');
    }

    // Optional overrides (defaults are all true / on):
    // public static function closeModalOnClickAway(): bool { return true; }
    // public static function closeModalOnEscape(): bool { return true; }
    // public static function showCloseButton(): bool { return true; }
    // public static function showBackdrop(): bool { return true; }
}

Register it with Livewire:

Livewire::component('confirm-delete-modal', ConfirmDeleteModal::class);

3. Open / close

<button wire:click="$dispatch('openModal', { component: 'confirm-delete-modal', title: 'Delete item?' })">
    Delete
</button>

From a modal component (opening another / nested modal), use the openModal() helper — a component-scoped $this->dispatch('openModal', …) is not routed to the modal container across Livewire component boundaries in Livewire 4, so the helper bridges to a global browser dispatch for you:

// From inside a ModalComponent (e.g. to open a nested/child modal):
$this->openModal('confirm-delete-modal', ['title' => 'Delete item?']);

$this->closeModal();                 // closes topmost only
$this->forceClose()->closeModal();   // closes entire stack

Nested modals

Open a second modal while one is already open — the first stays mounted and visible underneath with a lower z-index. Closing pops only the top instance.

Skins

Default skin: resources/views/skins/default.blade.php.

// config/livewire-modal.php
'skin' => 'default',

Per open:

$dispatch('openModal', {
  component: 'confirm-delete-modal',
  modalAttributes: { skin: 'default', showCloseButton: false }
})

mw.dialog / bare skins

Use skin: 'mw-dialog' (or bare) when an external wrapper should provide chrome. The package JS wraps the host with mw.dialog when mw.dialog is available (drag, autosize, autoscroll, close button, backdrop). Supported options:

• closeButton / showCloseButton
• overlay / showBackdrop
• overlayClose / closeOnClickAway
• closeOnEscape
• autoHeight / autosize
• autoScroll / scrollMode
• draggable
• width / height / title

If mw.dialog is missing, the skin falls back to a simple centered overlay.

Testing

composer test
composer analyse

License

MIT

Authors

Part of Microweber, built by:

• Peter Ivanov
• Bozhidar Slaveykov