MoonShineComponent

# Создание компонента

В MoonShine реализована консольная команда для создания MoonShineComponent, в котором уже реализованы основные методы для использования в админ панели. 

php artisan moonshine:component

В результате будет создан класс NameComponent, который является основой нового компонента.
Располагается он, по умолчанию, в директории app/MoonShine/Components.
А так же Blade файл для компонента в директории resources/views/admin/components.

# Make

Метод make() предназначен для создания экземпляра компонента. 

use App\MoonShine\Components\MyComponent; 
 
//...
 
public function components(): array
{
    return [
        MyComponent::make() 
    ];
}
 
//...

# Имя компонента

Метод name() позволяет задать уникальное имя для экземпляра, через которое можно будет вызывать события компонента. 

use App\MoonShine\Components\MyComponent;
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->name('my-component') 
    ];
}
 
//...

# Передача данных

Метод viewData() позволяет передать данные в шаблон компонента. 

namespace App\MoonShine\Components;
 
//...
 
final class MyComponent extends MoonShineComponent
{
    protected function viewData(): array
    {
        return [];
    } 
}
 
//...

# Атрибуты

Для экземпляра компонента можно указать атрибуты используя метод customAttributes(). 

customAttributes(array $attributes)
use App\MoonShine\Components\MyComponent; 
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->customAttributes(['class' => 'mt-4']) 
    ];
}
 
//...

# Изменение отображения

Когда необходимо изменить view с помощью fluent interface можно воспользоваться методом customView(). 

customView(string $customView)
use App\MoonShine\Components\MyComponent; 
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->customView('components.my-component') 
    ];
}
 
//...

# Условие отображения

Отображать компонент можно по условию, воспользовавшись методом canSee(). 

canSee(Closure $callback)
use App\MoonShine\Components\MyComponent; 
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->canSee(function(Request $request) {
                return $request->user('moonshine')?->id === 1;
            }) 
    ];
}
 
//...

# Методы по условию

Метод when() реализует fluent interface и выполнит callback, когда первый аргумент, переданный методу, имеет значение true. 

when($value = null, callable $callback = null)
use App\MoonShine\Components\MyComponent;
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->when(
                fn() => request()->user('moonshine')?->id === 1,
                fn($component) => $component->canSee(fn() => false)
            ) 
    ];
}
 
//...

Экземпляр компонента, будет передан в функции callback.

Методу when() может быть передан второй callback, он будет выполнен, когда первый аргумент, переданный методу, имеет значение false. 

when($value = null, callable $callback = null, callable $default = null)
use App\MoonShine\Components\MyComponent;
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->when(
                fn() => request()->user('moonshine')?->id === 1,
                fn($component) => $component->customView('components.my-component-admin')
                fn($component) => $component->customView('components.my-component')
            ) 
    ];
}
 
//...

Метод unless() обратный методу when() и выполнит первый callback, когда первый аргумент имеет значение false, иначе будет выполнен второй callback, если он передан методу. 

unless($value = null, callable $callback = null, callable $default = null)
use App\MoonShine\Components\MyComponent;
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->unless(
                fn() => request()->user('moonshine')?->id === 1,
                fn($component) => $component->customView('components.my-component')
                fn($component) => $component->customView('components.my-component-admin')
            ) 
    ];
}
 
//...

# Render

Метод render() позволяет получить отрендеренный компонент. 

use App\MoonShine\Components\MyComponent; 
 
//...
 
public function components(): array
{
    return [
        MyComponent::make()
            ->render() 
    ];
}
 
//...

# AlpineJs

Также рекомендуем ознакомиться с AlpineJs и использовать всю мощь этого js фреймворка.

Вы можете использовать его реактивность, давайте посмотрим как удобно создать компонент: 

<div x-data="myComponent">
</div>
 
<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("myComponent", () => ({
            init() {
 
            },
        }))
    })
</script>
Компоненты
Основы
Компоненты
Layout