Corepine logo Corepine Documentation
Modal v0.1x latest

Event System

Corepine Modal exposes incoming and outgoing events.

  • Incoming events are commands sent to the modal host.
  • Outgoing events are notifications dispatched by the host after state changes.
  • Close commands can also carry post-close dispatch instructions.

Default Incoming Events

  • modal.open: open a modal component/layer
  • modal.open-sheet: open as sheet mode
  • modal.close: close specific/current layer and optionally pass layers, destroy, dispatch, or dispatchTo
  • modal.close-top: close N layers from top and optionally pass layers, destroy, dispatch, or dispatchTo
  • modal.close-all: close the entire stack and optionally pass destroy, dispatch, or dispatchTo
  • modal.destroy: remove modal state entry
  • modal.reset: reset host modal state
  • modal.toggle: toggle by id

Default Outgoing Events

  • modal.opened: dispatched after a layer opens
  • modal.closed: dispatched after a layer closes
  • modal.changed: dispatched when stack state changes
  • modal.all-closed: dispatched when stack becomes empty
  • modal.component-closed: optional component-level close event when the modal enables dispatchCloseEvent

Post-Close Dispatch Payloads

dispatch and dispatchTo are not part of the built-in outgoing event list above. They are extra events you ask the modal to dispatch after a close succeeds.

  • dispatch: dispatch normal Livewire/browser events after close
  • dispatchTo: dispatch targeted Livewire events to a named component after close

These payloads can be sent with modal.close, modal.close-top, and modal.close-all, or configured directly on modal actions and modal components.

$this->closeModal(
    destroy: false,
    dispatch: [
        'users-refreshed' => ['user' => $this->user->id],
    ],
    dispatchTo: [
        'orders.table' => [
            'sync-user' => ['user' => $this->user->id],
        ],
    ],
);

If you want a modal component to dispatch events every time it closes, define the close hooks on the modal class:

protected function dispatchCloseEvents(): array
{
    return [
        'users-refreshed' => ['user' => $this->user->id],
    ];
}

protected function dispatchCloseEventsTo(): array
{
    return [
        'orders.table' => [
            'sync-user' => ['user' => $this->user->id],
        ],
    ];
}

Listening In JavaScript

<script>
window.addEventListener('modal.opened', (event) => {
    console.log('Modal opened', event.detail)
})

window.addEventListener('modal.closed', (event) => {
    console.log('Modal closed', event.detail)
})
</script>

Renaming Event Names

If your app or package needs namespacing, customize event names in config/corepine-modal.php:

'events' => [
    'listen' => [
        'open' => 'acme.modal.open',
        'close' => 'acme.modal.close',
    ],
    'dispatch' => [
        'opened' => 'acme.modal.opened',
    ],
],

Package-Safe Event Resolution

When writing reusable packages, do not hardcode strings. Resolve active names from the service:

use Corepine\Modal\Facades\Modal;

$openEvent = Modal::event()->openModal();
$closeEvent = Modal::event()->closeModal();

Continue