Advanced

Js события

Blade директива

Blade директивы используются для быстрого объявления событий для компонентов.

@defineEvent

@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
@defineEvent(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $event - событие,
  • $name - имя компонента,
  • $call - функция обратного вызова,
  • $params - параметры события.
<div x-data="myComponent">
    // @table-updated-index.window="asyncRequest"
    @defineEvent('table-updated', 'index', 'asyncRequest')
    >
</div>
<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 = [])
@defineEventWhen(mixed $condition, string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $condition - условие для события,
  • $event - событие,
  • $name - имя компонента,
  • $call - функция обратного вызова,
  • $params - параметры события.
<div x-data="myComponent">
    // @table-updated-index.window="asyncRequest"
    @defineEventWhen(true, 'table-updated', 'index', 'asyncRequest')
    >
</div>
<div x-data="myComponent">
    // @table-updated-index.window="asyncRequest"
    @defineEventWhen(true, 'table-updated', 'index', 'asyncRequest')
    >
</div>

Вспомогательный класс AlpineJs для формирования событий.

AlpineJs::event()

AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = [])
AlpineJs::event(string|JsEvent $event, ?string $name = null, array $params = [])
  • $event - событие,
  • $name - имя компонента,
  • $params - параметры события
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'])])
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 = [])
AlpineJs::eventBlade(string|JsEvent $event, ?string $name = null, ?string $call = null, array $params = [])
  • $event - событие,
  • $name - имя компонента,
  • $call - функция обратного вызова,
  • $params - параметры события
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',
       ]);
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',
       ]);

Стандартные события

В админ-панели MoonShine определено несколько стандартных событий, названия которых удобно получать через enum JsEvent.

  • JsEvent::FRAGMENT_UPDATED - обновление фрагмента,
  • JsEvent::TABLE_UPDATED - обновление таблицы,
  • JsEvent::TABLE_REINDEX - обновление индекса таблицы при сортировке,
  • JsEvent::TABLE_ROW_UPDATED - обновление строки таблицы,
  • JsEvent::CARDS_UPDATED - обновление списка карточек,
  • JsEvent::FORM_RESET - сброс формы,
  • JsEvent::FORM_SUBMIT - отправка формы,
  • JsEvent::MODAL_TOGGLED - открытие / закрытие модального окна,
  • JsEvent::OFF_CANVAS_TOGGLED - открытие / закрытие Offcanvas,
  • JsEvent::TOAST - вызов Toast.

Вызов событий через Response

В MoonShine можно возвращать события в MoonShineJsonResponse, которые затем будут вызваны. Для этого нужно использовать метод events().

events(array $events)
events(array $events)
  • $events - массив событий, которые нужно вызвать.
use MoonShine\Enums\JsEvent;
        use MoonShine\Http\Responses\MoonShineJsonResponse;
        use MoonShine\Support\AlpineJs;
 
        //...
 
        return MoonShineJsonResponse::make()
        ->events([
        AlpineJs::event(JsEvent::TABLE_UPDATED, 'index'),
        ]);
use MoonShine\Enums\JsEvent;
        use MoonShine\Http\Responses\MoonShineJsonResponse;
        use MoonShine\Support\AlpineJs;
 
        //...
 
        return MoonShineJsonResponse::make()
        ->events([
        AlpineJs::event(JsEvent::TABLE_UPDATED, 'index'),
        ]);