Внешний вид

Assets

Скринкасты

Основы

AssetManager в MoonShine предоставляет удобный способ управления CSS и JavaScript ресурсами вашей административной панели. Он поддерживает различные типы ресурсов, включая внешние файлы, встроенный код и версионирование.

Типы ресурсов

В MoonShine есть несколько типов ресурсов:

  • MoonShine\AssetManager\Js - js через тег <script src>,
  • MoonShine\AssetManager\Css - css через тег <link>,
  • MoonShine\AssetManager\InlineCss - css через тег <style>,
  • MoonShine\AssetManager\InlineJs - js через тег <script>,
  • MoonShine\AssetManager\Raw - произвольный контент в head.

JavaScript файлы

 namespaces
use MoonShine\AssetManager\Js;
 
// Базовое подключение
Js::make('/js/app.js');
 
// С отложенной загрузкой
Js::make('/js/app.js')->defer();
 
// С атрибутами
Js::make('/js/app.js')->customAttributes([
    'data-module' => 'main'
]);
 namespaces
use MoonShine\AssetManager\Js;
 
// Базовое подключение
Js::make('/js/app.js');
 
// С отложенной загрузкой
Js::make('/js/app.js')->defer();
 
// С атрибутами
Js::make('/js/app.js')->customAttributes([
    'data-module' => 'main'
]);

CSS файлы

 namespaces
use MoonShine\AssetManager\Css;
 
// Базовое подключение
Css::make('/css/styles.css');
 
// С отложенной загрузкой
Css::make('/css/styles.css')->defer();
 
// С атрибутами
Css::make('/css/styles.css')->customAttributes([
    'media' => 'print'
]);
 namespaces
use MoonShine\AssetManager\Css;
 
// Базовое подключение
Css::make('/css/styles.css');
 
// С отложенной загрузкой
Css::make('/css/styles.css')->defer();
 
// С атрибутами
Css::make('/css/styles.css')->customAttributes([
    'media' => 'print'
]);

Встроенный JavaScript

 namespaces
use MoonShine\AssetManager\InlineJs;
 
InlineJs::make(<<<'JS'
    document.addEventListener("DOMContentLoaded", function() {
        console.log("Loaded");
    });
JS);
 namespaces
use MoonShine\AssetManager\InlineJs;
 
InlineJs::make(<<<'JS'
    document.addEventListener("DOMContentLoaded", function() {
        console.log("Loaded");
    });
JS);

Встроенный CSS

 namespaces
use MoonShine\AssetManager\InlineCss;
 
InlineCss::make(<<<'CSS'
    .custom-class {
        color: red;
    }
CSS);
 namespaces
use MoonShine\AssetManager\InlineCss;
 
InlineCss::make(<<<'CSS'
    .custom-class {
        color: red;
    }
CSS);

Raw-контент

 namespaces
use MoonShine\AssetManager\Raw;
 
Raw::make('<link rel="preconnect" href="https://fonts.googleapis.com">');
 namespaces
use MoonShine\AssetManager\Raw;
 
Raw::make('<link rel="preconnect" href="https://fonts.googleapis.com">');

Коллекции ресурсов

AssetManager позволяет управлять порядком загрузки ресурсов. Мы рекомендуем использовать DI, чтобы начать взаимодействие с AssetManager, за сервис отвечает интерфейс MoonShine\Contracts\AssetManager\AssetManagerContract. Также MoonShine предоставляет удобные методы взаимодействия с AssetManager в разных сущностях, таких как CrudResource, Page, Layout, Component и Field.

 namespaces
use MoonShine\AssetManager\Js;
 
// Добавить ресурсы в конец
$assetManager->append([
    Js::make('/js/last.js')
]);
 
// Добавить ресурсы в начало
$assetManager->prepend([
    Js::make('/js/first.js')
]);
 
// Добавить ресурсы в порядке добавления
$assetManager->add([
    Js::make('/js/middle.js')
]);
 namespaces
use MoonShine\AssetManager\Js;
 
// Добавить ресурсы в конец
$assetManager->append([
    Js::make('/js/last.js')
]);
 
// Добавить ресурсы в начало
$assetManager->prepend([
    Js::make('/js/first.js')
]);
 
// Добавить ресурсы в порядке добавления
$assetManager->add([
    Js::make('/js/middle.js')
]);

Метод append() всегда будет добавлять ресурсы до основного списка из CrudResource, Page, Layout, Component, Field, а prepend() после. Метод add() будет зависеть от жизненного цикла приложения. Допустим, вы добавляете ассеты в ModelResource, но перед отображением страницы будет вызван Layout, который также в свою очередь добавит ассеты, тем самым ассеты Layout добавятся в конце.

Вы также можете воспользоваться хелпером moonshine()->getAssetManager()

Модификация ресурсов

Вы можете модифицировать коллекцию ресурсов с помощью замыканий:

$assetManager->modifyAssets(function($assets) {
    // Модифицируем коллекцию ресурсов
    return array_filter($assets, function($asset) {
        return !str_contains($asset->getLink(), 'remove-this');
    });
});
$assetManager->modifyAssets(function($assets) {
    // Модифицируем коллекцию ресурсов
    return array_filter($assets, function($asset) {
        return !str_contains($asset->getLink(), 'remove-this');
    });
});

Версионирование

AssetManager поддерживает версионирование ресурсов для управления кешированием, по умолчанию будет использоваться версия MoonShine, но вы можете переопределить у конкретного ресурса:

 namespaces
use MoonShine\AssetManager\Js;
 
// Добавление версии к отдельному ресурсу
Js::make('/js/app.js')->version('1.0.0');
 
// Результат: /js/app.js?v=1.0.0
 namespaces
use MoonShine\AssetManager\Js;
 
// Добавление версии к отдельному ресурсу
Js::make('/js/app.js')->version('1.0.0');
 
// Результат: /js/app.js?v=1.0.0

Версионирование автоматически добавляет параметр v к URL ресурса. Если URL уже содержит параметры запроса, версия будет добавлена через &.

Добавление ресурсов

Глобально

// MoonShineServiceProvider
 namespaces
use MoonShine\AssetManager\Js;
use MoonShine\Contracts\AssetManager\AssetManagerContract;
use MoonShine\Contracts\Core\DependencyInjection\ConfiguratorContract;
use MoonShine\Contracts\Core\DependencyInjection\CoreContract;
 
public function boot(
    CoreContract $core,
    ConfiguratorContract $config,
    AssetManagerContract $assets,
): void
{
    $assets->add(Js::make('/js/app.js'));
}
// MoonShineServiceProvider
 namespaces
use MoonShine\AssetManager\Js;
use MoonShine\Contracts\AssetManager\AssetManagerContract;
use MoonShine\Contracts\Core\DependencyInjection\ConfiguratorContract;
use MoonShine\Contracts\Core\DependencyInjection\CoreContract;
 
public function boot(
    CoreContract $core,
    ConfiguratorContract $config,
    AssetManagerContract $assets,
): void
{
    $assets->add(Js::make('/js/app.js'));
}

Шаблон

 namespaces
use Illuminate\Support\Facades\Vite;
use MoonShine\AssetManager\Js;
 
final class MoonShineLayout extends CompactLayout
{
    protected function assets(): array
    {
        return [
            Js::make(Vite::asset('resources/js/app.js'))
        ];
    }
}
 namespaces
use Illuminate\Support\Facades\Vite;
use MoonShine\AssetManager\Js;
 
final class MoonShineLayout extends CompactLayout
{
    protected function assets(): array
    {
        return [
            Js::make(Vite::asset('resources/js/app.js'))
        ];
    }
}

CrudResource

 namespaces
use MoonShine\AssetManager\InlineJs;
use MoonShine\AssetManager\Js;
 
protected function onLoad(): void
{
    $this->getAssetManager()
        ->prepend(InlineJs::make('alert(1)'))
        ->append(Js::make('/js/app.js'));
}
 namespaces
use MoonShine\AssetManager\InlineJs;
use MoonShine\AssetManager\Js;
 
protected function onLoad(): void
{
    $this->getAssetManager()
        ->prepend(InlineJs::make('alert(1)'))
        ->append(Js::make('/js/app.js'));
}

Page

 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
 
protected function onLoad(): void
{
    parent::onLoad();
 
    $this->getAssetManager()
        ->add(Css::make('/css/app.css'))
        ->append(Js::make('/js/app.js'));
}
 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
 
protected function onLoad(): void
{
    parent::onLoad();
 
    $this->getAssetManager()
        ->add(Css::make('/css/app.css'))
        ->append(Js::make('/js/app.js'));
}

Component

На лету

 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\Layout\Box;
 
Box::make()->addAssets([
    Js::make('/js/custom.js'),
    Css::make('/css/styles.css')
]);
 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\Layout\Box;
 
Box::make()->addAssets([
    Js::make('/js/custom.js'),
    Css::make('/css/styles.css')
]);

При создании компонента

 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\MoonShineComponent;
 
final class MyComponent extends MoonShineComponent
{
    /**
     * @return list<AssetElementContract>
     */
    protected function assets(): array
    {
        return [
            Js::make('/js/custom.js'),
            Css::make('/css/styles.css')
        ];
    }
}
 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\MoonShineComponent;
 
final class MyComponent extends MoonShineComponent
{
    /**
     * @return list<AssetElementContract>
     */
    protected function assets(): array
    {
        return [
            Js::make('/js/custom.js'),
            Css::make('/css/styles.css')
        ];
    }
}

При создании компонента через AssetManager

 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\MoonShineComponent;
 
final class MyComponent extends MoonShineComponent
{
    protected function booted(): void
    {
        parent::booted();
 
        $this->getAssetManager()
          ->add(Css::make('/css/app.css'))
          ->append(Js::make('/js/app.js'));
    }
}
 namespaces
use MoonShine\AssetManager\Css;
use MoonShine\AssetManager\Js;
use MoonShine\UI\Components\MoonShineComponent;
 
final class MyComponent extends MoonShineComponent
{
    protected function booted(): void
    {
        parent::booted();
 
        $this->getAssetManager()
          ->add(Css::make('/css/app.css'))
          ->append(Js::make('/js/app.js'));
    }
}

Field

То же самое как и у Component, так как Field является компонентом.

Вывод через Blade

Основная тема

<x-moonshine::layout.assets>
    @vite([
        'resources/css/main.css',
        'resources/js/app.js',
    ], 'vendor/moonshine')
</x-moonshine::layout.assets>
<x-moonshine::layout.assets>
    @vite([
        'resources/css/main.css',
        'resources/js/app.js',
    ], 'vendor/moonshine')
</x-moonshine::layout.assets>

Компактная тема

<x-moonshine::layout.assets>
    @vite([
        'resources/css/main.css',
        'resources/css/minimalistic.css',
        'resources/js/app.js',
    ], 'vendor/moonshine')
</x-moonshine::layout.assets>
<x-moonshine::layout.assets>
    @vite([
        'resources/css/main.css',
        'resources/css/minimalistic.css',
        'resources/js/app.js',
    ], 'vendor/moonshine')
</x-moonshine::layout.assets>