Corepine logo Corepine Modal
Modal v0.1x latest

Configuration

Corepine Modal configuration lives in config/corepine-modal.php.

Publish the config when you want application-wide defaults for modal behavior, events, sizing, and close controls. You can still use the package without publishing this file.

Example Config File

This is the shape of the config in one place:


return [
    /*
    |--------------------------------------------------------------------------
    | Modal Events
    |--------------------------------------------------------------------------
    |
    | Event names used by the modal host, helpers, and lifecycle hooks.
    | Rename these if your application needs a different event namespace.
    |
    */
    'events' => [
        'listen' => [
            // Incoming events consumed by the modal host and helpers.
            'open' => 'modal.open',
            'open_sheet' => 'modal.open-sheet',
            'close' => 'modal.close',
            'close_top' => 'modal.close-top',
            'close_all' => 'modal.close-all',
            'destroy' => 'modal.destroy',
            'reset' => 'modal.reset',
            'toggle' => 'modal.toggle',
        ],
        'dispatch' => [
            // Outgoing events emitted by the package after host state changes.
            'opened' => 'modal.opened',
            'closed' => 'modal.closed',
            'changed' => 'modal.changed',
            'all_closed' => 'modal.all-closed',
            'component_closed' => 'modal.component-closed',
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Default Modal Attributes
    |--------------------------------------------------------------------------
    |
    | These values are merged into every modal unless a component or runtime
    | payload overrides them.
    |
    */
    'defaults' => [
        'attributes' => [
            // Close behavior.
            'closeOnEscape' => true,
            'closeAllOnEscape' => false,
            'dispatchCloseEvent' => false,
            'destroyOnClose' => true,
            'dismissible' => true,

            // Visual presentation.
            'blur' => false,
            'type' => 'modal',
            'drawer' => false,
            'sheet' => false,
            'isolate' => false,
            'placement' => 'center',
            'origin' => 'center',
            'size' => 'default',
            'height' => null,
            'maxHeight' => null,
            'dragCloseThreshold' => 0.5,
            'class' => '',

            // Built-in shell content.
            'shell' => true,
            'heading' => null,
            'description' => null,
            'showClose' => null,
            // Child stack layers inherit this value unless they set their own.
            'stackedBackButton' => true,

            // Footer action defaults.
            'footerActionsAlignment' => 'end',
            'actions' => [],
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Modal Sizes
    |--------------------------------------------------------------------------
    |
    | Fully custom size tokens. Values are utility class strings.
    | Example: 'sheet' => 'max-w-[92vw]', 'dialog' => 'max-w-2xl'
    |
    */
    'sizes' => [
        'default' => 'max-w-lg sm:max-w-full',
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        'xl' => 'max-w-xl',
        '2xl' => 'max-w-2xl',
        '3xl' => 'max-w-3xl',
        '4xl' => 'max-w-4xl',
        '5xl' => 'max-w-5xl',
        '6xl' => 'max-w-6xl',
        '7xl' => 'max-w-7xl',
    ],
];

Main Parts

  • events.listen: incoming command event names
  • events.dispatch: outgoing notification event names
  • defaults.attributes: global default modal attributes
  • sizes: reusable width tokens

If you change sizes in the published config, make sure Tailwind scans that config file. See Tailwind Setup.

Using A Size Token

Once a size token exists in config, use it in modal attributes:

[
    'size' => 'editor',
]
  • Keep defaults close to your product's UX style.
  • Use size tokens for consistency across teams.
  • Namespace events in package-heavy ecosystems.

Continue