Download the PHP package corepine/modal without Composer
On this page you can find all versions of the php package corepine/modal. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package modal
Corepine Modal
Corepine Modal is a stack-based modal system for Laravel with two runtime modes:
- standalone Alpine + Blade modals
-
Livewire stack-based modals
modal(dialog)drawer(left or right panel)sheet(bottom sheet)
It supports:
- modal stacks (open child modals on top of parent modals)
- declarative shell actions
- strongly typed modal classes (
extends Corepine\Modal\Modal) - configurable event names for package-safe integrations
- standalone Blade-only modals (no Livewire modal class required)
Requirements
- PHP
^8.2|^8.3|^8.4 - Laravel
^11.0|^12.0|^13.0 - Livewire
^3.7|^4.0
Livewire is required by the package because stack mode uses a Livewire host. Standalone Alpine + Blade usage is still fully supported.
Installation
Publish config:
Setup
Livewire Stack Mode
Render the host once in your layout:
Standalone Alpine + Blade Mode
You can use <x-corepine.modal /> directly with browser events and no Livewire modal class.
The host is not required for standalone-only usage.
Tailwind Setup
Add the package stylesheet to your main CSS entry:
The package CSS already includes Tailwind @source paths for its own views, PHP classes, and config.
If you publish corepine-modal.php and add custom modal size classes there, include the published config in your app CSS source list so Tailwind can keep those classes:
Quick Start (Livewire Stack Mode)
Open it from Blade:
Open / Close APIs
From a modal class:
From Blade helpers:
dispatch fires regular Livewire/browser events after the close finishes.
dispatchTo fires Livewire targeted events after the close finishes.
Use modal-id on open/close helpers when you want to target a standalone <x-corepine.modal id="..." /> by id.
Quick Start (Standalone Alpine + Blade Mode)
Use this when you do not need a Livewire modal class:
Standalone named slots:
header: custom header content. Slot attributes are merged onto the header wrapper classes.- When
headerslot is provided (even empty), it overrides built-in heading/description/close rendering. footer: custom footer content.
Example:
Standalone browser events:
modal.openmodal.closemodal.toggle
Each event accepts { id?: string } in detail.
Modal Attributes
The canonical shell/action API uses actions (not legacy keys).
| Key | Type | Default | Notes |
|---|---|---|---|
type |
modal \| drawer \| sheet |
modal |
Presentation type. |
placement |
Placement \| string |
by type | modal: center/top/bottom/left/right, drawer: left/right, sheet: forced bottom. |
origin |
Placement \| string |
follows type/placement | Transform origin; same value set as placement vocabulary. |
size |
string |
default |
Width token from config sizes, or custom class string. |
height |
string \| number \| null |
null |
Panel height (modal/drawer) and initial sheet height. |
maxHeight |
string \| number \| null |
null |
Shared max-height cap for all types. |
dismissible |
bool |
true |
Scrim click closes when true. |
draggable |
bool |
type-aware | Sheet drag/resize behavior. |
showDragHandle |
bool |
type-aware | Sheet handle visibility. |
dragCloseThreshold |
float |
0.5 |
Sheet drag-close ratio. |
closeOnEscape |
bool |
true |
Escape closes top layer. |
closeAllOnEscape |
bool |
false |
Escape closes full stack. |
destroyOnClose |
bool |
true |
Remove closed layers from host state. |
dispatch |
array |
[] |
Default events to dispatch after close. |
dispatchTo |
array |
[] |
Default targeted Livewire events to dispatch after close. |
dispatchCloseEvent |
bool |
false |
Emits the built-in modal.component-closed notification for that layer. |
blur |
bool |
false |
Scrim blur effect. |
shell |
bool |
true |
Enables built-in shell header/body/footer structure. |
heading |
string \| null |
null |
Shell heading text. |
description |
string \| null |
null |
Shell description text. |
showClose |
bool \| null |
auto |
Built-in shell close icon. Defaults to visible only when built-in heading or description is present. |
footerActionsAlignment |
Alignment \| string |
end |
start, center, end. |
actions |
array |
[] |
Declarative shell actions (close / method). |
class |
string |
'' |
Extra panel classes. |
Type Behavior Rules
sheet: always renders from bottom and always usesplacement=bottom,origin=bottom.drawer: onlyleftandrightare valid.modal: supports all five placement values and now fully respects bothplacementandorigin.
Declarative Actions
Action payloads can be raw arrays or fluent Action::make(...) objects.
Supported fluent helpers include:
method()/action()close(layers, destroy, closeAll)dispatch()/dispatchTo()on close actionsdisabled()visible()color()and shortcuts (primary,danger,success,warning,info,gray,dark)accent()outline()attributes()
Event System
Default incoming events:
modal.openmodal.open-sheetmodal.closemodal.close-topmodal.close-allmodal.destroymodal.resetmodal.toggle
Default outgoing events:
modal.openedmodal.closedmodal.changedmodal.all-closedmodal.component-closed
Event Customization
You can rename both incoming and outgoing events in config/corepine-modal.php:
For package integrations, do not hardcode event strings. Resolve them from the service:
Configuration
Main sections in config/corepine-modal.php:
events.listen: incoming event namesevents.dispatch: outgoing event namesdefaults.attributes: global modal attribute defaultssizes: modal width tokens
Example Size Override
Blade Components (Canonical)
<x-corepine.modal.assets /><x-corepine.modal /><x-corepine.modal.layout /><x-corepine.modal.footer /><x-corepine.modal.actions.open /><x-corepine.modal.actions.close />