Modal Laravel Package

Getting Started

Start by installing the package via Composer:

composer require wire-elements/modal  

Then, add the Livewire directive @livewire('wire-elements-modal') to your main layout (just before </body>). Next, generate a modal component using php artisan make:livewire EditUser, and extend LivewireUI\Modal\ModalComponent instead of the default Component. From there, open the modal by dispatching 'openModal' events—e.g., wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { user: 5 } })".

Implementation Patterns

Use modal components like standard Livewire components but with lifecycle hooks for stack management:

• Nested modals: Dispatch openModal from inside another modal to open a child (e.g., confirm dialog from an edit form).
• Stateful navigation: Use $this->skipPreviousModal() before $this->closeModalWithEvents([...]) to avoid jumping back to intermediate steps (e.g., after deleting a record).
• Automatic Eloquent injection: Type-hint model properties (e.g., public User $user) or mount() args to auto-resolve models from DB.
• Post-close refresh: Use closeModalWithEvents() to broadcast events to other Livewire components (e.g., UserOverview::class => 'userModified').
• Customize appearance: Override modalMaxWidth() or disable default behaviors (closeModalOnEscape, closeModalOnClickAway) statically in your modal class.

Gotchas and Tips

• Escape key behavior is forceful by default: Disabling closeModalOnEscapeIsForceful() lets you navigate backwards in the stack without closing the entire stack.
• State preservation vs. reset: Set destroyOnClose() to true if you want fresh state on re-open (e.g., for CRUD forms).
• Tailwind purge gotchas: Add the package’s views path and dynamic max-w-* classes to your safelist to prevent PurgeCSS from stripping needed styles.
• Caching issues post-upgrade: Run view:clear after upgrading from v2 to v3—especially since event names changed from $emit to $dispatch.
• Dynamic handler prevention: Use closingModalOnEscape and closingModalOnClickAway events in @script blocks to block closing when form state is dirty.
• Configuration migration: After upgrading, re-publish config with --tag=wire-elements-modal-config; existing configs from livewire-ui/modal won’t work.