Advanced

Js events

Blade directive

Blade directives are used for quick declaration of events for components.

@defineEvent

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

AlpineJs helper class for forming events.

AlpineJs::event()

AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = [])
  • $event - event,
  • $name - component name,
  • $params - event parameters
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', ['var' => 'foo'])])

AlpineJs::eventBlade()

AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $event - event,
  • $name - component name,
  • $call - callback function,
  • $params - event parameters
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

In the MoonShine admin panel, several default events are defined, whose names can be conveniently obtained through the JsEvent enum.

  • JsEvent::FRAGMENT_UPDATED - fragment update,
  • JsEvent::TABLE_UPDATED - table update,
  • JsEvent::TABLE_REINDEX - table index update during sorting,
  • JsEvent::TABLE_ROW_UPDATED - table row update,
  • JsEvent::CARDS_UPDATED - Cards list update,
  • JsEvent::FORM_RESET - form reset,
  • JsEvent::FORM_SUBMIT - form submission,
  • JsEvent::MODAL_TOGGLED - modal window opening / closing,
  • JsEvent::OFF_CANVAS_TOGGLED - Offcanvas opening / closing,
  • JsEvent::TOAST - Toast call.

Triggering events through Response

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

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