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',  
    ]);

# Default events

There are several default events defined in the MoonShine admin panel, the names of which can be conveniently obtained via enum JsEvent.

  • JsEvent::FRAGMENT_UPDATED - fragment update,
  • JsEvent::TABLE_UPDATED - table update,
  • JsEvent::TABLE_REINDEX - updating table indexes when sorting,
  • JsEvent::TABLE_ROW_UPDATED - updating a row in the table,
  • JsEvent::CARDS_UPDATED - updating the Cards list,
  • JsEvent::FORM_RESET - form reset,
  • JsEvent::FORM_SUBMIT - submitting the form,
  • JsEvent::MODAL_TOGGLED - opening / closing a modal window,
  • JsEvent::OFF_CANVAS_TOGGLED - opening / closing Offcanvas,
  • JsEvent::TOAST - call Toast.

# Calling events via Response

In MoonShine you can return events to MoonShineJsonResponse, which will then be called.
To do this, you need to use the events() method. 

events(array $events)
  • $events - array of events to be called.
use MoonShine\Enums\JsEvent;
use MoonShine\Http\Responses\MoonShineJsonResponse;
use MoonShine\Support\AlpineJs;
 
//...
 
return MoonShineJsonResponse::make()
    ->events([
        AlpineJs::event(JsEvent::TABLE_UPDATED, 'index'),
    ]);
Advanced
TypeCasts
Advanced
Helpers