Components

MoonShineComponent

-Creating a component -Make -Component name -View Data -Attributes -Custom view -Can see -Mehtods by condition -Render -AlpineJs

Creating a component

MoonShine implements a console command to create a MoonShineComponent, which already implements the basic methods for use in the admin panel.

php artisan moonshine:component 
php artisan moonshine:component

As a result, the NameComponent class will be created, which is the basis of the new component.It is located, by default, in the app/MoonShine/Components directory.
And also the Blade file for the component in the resources/views/admin/components directory.

Make

The make() method is used to create an instance of a component.

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

Component name

The name() method allows you to set a unique name for the instance, through which component events can be called.

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

View data

The viewData() method allows you to pass data to the component template.

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

Attributes

For a component instance, you can specify attributes using the customAttributes() method.

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

Custom view

When you need to change the view using fluent interface you can use the customView() method.

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

Can see

You can display a component based on conditions using the canSee() method.

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

Methods by condition

The when() method implements the fluent interface and will execute a callback when the first argument passed to the method evaluates to true.

when($value = null, callable $callback = null) 
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) ) ]; } //... 
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)
            )
    ];
}
 
//...

The component instance will be passed to the callback function.

The second callback can be passed to the when() method, it will be executed, when the first argument passed to the method is false.

when($value = null, callable $callback = null, callable $default = null) 
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') ) ]; } //... 
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')
            )
    ];
}
 
//...

The unless() method is the inverse of the when() method and will execute the first callback, when the first argument is false, otherwise the second callback will be executed if it is passed to the method.

unless($value = null, callable $callback = null, callable $default = null) 
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') ) ]; } //... 
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

The render() method allows you to get the rendered component.

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

AlpineJs

We also recommend that you familiarize yourself with AlpineJs and use the full power of this js framework.

You can use its reactivity, let's see how to conveniently create a component:

<div x-data="myComponent">
 
<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("myComponent", () => ({
            init() {
 
            },
        }))
    })
</script>