Js events

# Blade directives

Blade directives are used to quickly declare events for components.

@defineEvent 
@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null)
  • $event - event
  • $name - component name
  • $call - callback function.
<div x-data="myComponent"
    // @table-updated-index.window="asyncRequest"
    @defineEvent('table-updated', 'index', 'asyncRequest')
>
</div>
@defineEventWhen 
@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null)
  • $condition - condition for the event
  • $event - event
  • $name - component name
  • $call - callback function.
<div x-data="myComponent"
    // @table-updated-index.window="asyncRequest"
    @defineEventWhen(true, 'table-updated', 'index', 'asyncRequest')
>
</div>

# AlpineJs helper

AlpineJs helper class for generating events.

AlpineJs::event() 
AlpineJs::event(string|JsEvent $event, ?string $name = null, ?string $call = null)
  • $event - event
  • $name - component name
  • $call - callback function.
use MoonShine\Components\FormBuilder;
use MoonShine\Enums\JsEvent;
use MoonShine\Support\AlpineJs;
 
FormBuilder::make('/crud/update', 'PUT')
    ->name('main-form')
    ->async(asyncEvents: [AlpineJs::event(JsEvent::TABLE_UPDATED, 'index', 'asyncRequest')])
AlpineJs::eventBlade() 
AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null)
  • $event - event
  • $name - component name
  • $call - callback function.
use MoonShine\Components\FormBuilder;
use MoonShine\Enums\JsEvent;
use MoonShine\Support\AlpineJs;
 
FormBuilder::make('/crud/update', 'PUT')
    ->name('main-form')
    ->customAttributes([
        // @form-reset-main-form.window="formReset"
        AlpineJs::eventBlade(JsEvent::FORM_RESET, 'main-form') => 'formReset',  
    ]);
Advanced
TypeCasts
Advanced
Helpers