Merge pull request #338 from DissNik/releases-2.4

Releases 2.4

config/menu.php

@@ -25,6 +25,9 @@
         'System:_divider_',
         ['slug' => 'components-system_layout', 'label' => 'Layout', 'title' => 'Системный компонент Layout'],
         ['slug' => 'components-system_flash', 'label' => 'Flash', 'title' => 'Системный компонент Flash'],
+        ['slug' => 'components-system_profile', 'label' => 'Profile', 'title' => 'Системный компонент Profile'],
+        ['slug' => 'components-system_sidebar', 'label' => 'Sidebar', 'title' => 'Системный компонент Sidebar'],
+        ['slug' => 'components-system_top_bar', 'label' => 'TopBar', 'title' => 'Системный компонент TopBar'],
 
         // Decorations
         'Decorations:_divider_',
@@ -36,6 +39,7 @@
         ['slug' => 'components-decoration_heading', 'label' => 'Heading', 'title' => 'Decoration Heading'],
         ['slug' => 'components-decoration_layout', 'label' => 'Layout', 'title' => 'Decoration Layout'],
         ['slug' => 'components-decoration_tabs', 'label' => 'Tabs', 'title' => ' Tabs'],
+        ['slug' => 'components-decoration_when', 'label' => 'When', 'title' => 'Decoration When'],
 
         // Metrics
         'Metrics:_divider_',

config/moonshine.php

@@ -41,7 +41,6 @@
 
     'pages' => [
         'dashboard' => App\MoonShine\Pages\Dashboard::class,
-        'profile' => ProfilePage::class
     ],
 
     'auth' => [

config/packages.php

@@ -31,4 +31,9 @@
         'url' => 'visual-ideas/moonshine-spatie-translatable',
         'category' => 'Fields'
     ],
+    [
+        'title' => 'MoonShine Roles-Permissions',
+        'url' => 'SWEET1S/moonshine-roles-permissions',
+        'category' => 'Auth'
+    ],
 ];

lang/ru.json

@@ -1,5 +1,6 @@
 {
     "Copy to clipboard": "Скопировать в буфер обмена",
+    "Link copied": "Ссылка копирована в буфер обмена",
     "Basics": "Основы",
     "Welcome": "Добро пожаловать",
     "Translation is not ready yet": "Мы уже работаем! Информация скоро появится...",

public/assets/js/app.js

@@ -5,10 +5,21 @@ function stopVideo($elements) {
 }
 
 function scrollToSection(sectionId) {
+    history.pushState('', '', sectionId)
     window.scrollTo({
-        top: document.querySelector(sectionId).getBoundingClientRect().top
+        top: (document.querySelector(sectionId).getBoundingClientRect().top ?? 0)
             + window.scrollY
             - document.querySelector('.sticky-menu').offsetHeight ?? 0,
         behavior: 'smooth'
     })
 }
+
+window.addEventListener("load", (event) => {
+    if (window.location.hash) {
+        const hash = window.location.hash
+
+        if (hash.length) {
+            scrollToSection(hash)
+        }
+    }
+});

resources/views/components/sub-title.blade.php

@@ -2,11 +2,24 @@
     'hashtag' => '#'
 ])
 <h2 {{ $attributes }} class="mb-4 mt-8 text-xl font-bold">
-    <a href="{{ $attributes['id'] ? '#' . $attributes['id'] : '' }}">
+    <a
+        href="{{ $attributes['id'] ? '#' . $attributes['id'] : '' }}"
+        @click.prevent="
+            scrollToSection('{{ $attributes['id'] ? '#' . $attributes['id'] : '' }}')
+            navigator.clipboard.writeText(window.location.href)
+            $dispatch('toast', {type: 'success', text: '{{ __('Link copied') }}'})
+        "
+        title="{{ __('Copy to clipboard') }}"
+    >
         @include('moonshine::ui.badge', [
             'value' => $hashtag,
             'color' => 'purple'
         ])
+    </a>
+    <a
+        href="{{ $attributes['id'] ? '#' . $attributes['id'] : '' }}"
+        @click.prevent="scrollToSection('{{ $attributes['id'] ? '#' . $attributes['id'] : '' }}')"
+    >
         {{ $slot }}
     </a>
 </h2>

resources/views/pages/en/components/decoration_when.blade.php

@@ -0,0 +1,58 @@
+<x-page
+    title="Component When"
+    :sectionMenu="[
+        'Sections' => [
+            ['url' => '#make', 'label' => 'Make'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    The <em>When</em> component allows you to display other components based on a condition.
+</x-p>
+
+<x-p>
+    You can create <em>When</em> using the static <code>make()</code> method.
+</x-p>
+
+<x-code language="php">
+make(Closure $condition, Closure $components, ?Closure $default = null)
+</x-code>
+
+<x-p>
+    <ul>
+        <li><code>$condition</code> - method execution condition;</li>
+        <li><code>$components</code> - a closure that returns an array of elements when the condition is met;</li>
+        <li><code>$default</code> - a closure that returns an array of default elements.</li>
+    </ul>
+</x-p>
+
+<x-code language="php">
+namespace App\MoonShine;
+
+use MoonShine\Components\Layout\{LayoutBlock, LayoutBuilder, Menu, Profile, Sidebar};
+use MoonShine\Components\When; // [tl! focus]
+use MoonShine\Contracts\MoonShineLayoutContract;
+
+final class MoonShineLayout implements MoonShineLayoutContract
+{
+    public static function build(): LayoutBuilder
+    {
+        return LayoutBuilder::make([
+            Sidebar::make([
+                Menu::make()->customAttributes(['class' => 'mt-2']),
+                When::make(
+                    static fn() => config('moonshine.auth.enable', true),
+                    static fn() => [Profile::make(withBorder: true)]
+                ) // [tl! focus:-3]
+            ]),
+
+            //...
+        ]);
+    }
+}
+</x-code>
+
+</x-page>

resources/views/pages/en/components/system_profile.blade.php

@@ -0,0 +1,59 @@
+<x-page
+    title="System component Profile"
+    :sectionMenu="[
+        'Sections' => [
+            ['url' => '#make', 'label' => 'Make'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    The <em>Profile</em> system component is used to display information about an authorized user in
+    <strong>MoonShine</strong>.
+</x-p>
+
+<x-p>
+    You can create a <em>Profile</em> using the static method <code>make()</code>
+    class <code>Profile</code>.
+</x-p>
+
+<x-code language="php">
+make(bool $withBorder = false)
+</x-code>
+
+<x-p>
+    <code>$withBorder</code> - split before the component.
+</x-p>
+
+<x-code language="php">
+namespace App\MoonShine;
+
+use MoonShine\Components\Layout\LayoutBlock;
+use MoonShine\Components\Layout\LayoutBuilder;
+use MoonShine\Components\Layout\Menu;
+use MoonShine\Components\Layout\Profile; // [tl! focus]
+use MoonShine\Components\Layout\Sidebar;
+use MoonShine\Contracts\MoonShineLayoutContract;
+
+final class MoonShineLayout implements MoonShineLayoutContract
+{
+    public static function build(): LayoutBuilder
+    {
+        return LayoutBuilder::make([
+            Sidebar::make([
+                Menu::make()->customAttributes(['class' => 'mt-2']),
+                Profile::make(withBorder: true) // [tl! focus]
+            ]),
+
+            //...
+        ]);
+    }
+}
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/profile.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/profile_dark.png') }}"></x-image>
+
+</x-page>

resources/views/pages/en/components/system_sidebar.blade.php

@@ -0,0 +1,58 @@
+<x-page
+    title="System component Sidebar"
+    :sectionMenu="[
+        'Sections' => [
+            ['url' => '#make', 'label' => 'Make'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    The <em>Sidebar</em> system component is used to create a side menu in <strong>MoonShine</strong>.
+</x-p>
+
+<x-p>
+    You can create a <em>Sidebar</em> using the static <code>make()</code> method
+    class <code>Sidebar</code>.
+</x-p>
+
+<x-code language="php">
+make(array $components = [])
+</x-code>
+
+<x-p>
+    The <code>make()</code> method takes an array of components as a parameter.
+</x-p>
+
+<x-code language="php">
+namespace App\MoonShine;
+
+use MoonShine\Components\Layout\LayoutBlock;
+use MoonShine\Components\Layout\LayoutBuilder;
+use MoonShine\Components\Layout\Menu;
+use MoonShine\Components\Layout\Profile;
+use MoonShine\Components\Layout\Sidebar; // [tl! focus]
+use MoonShine\Contracts\MoonShineLayoutContract;
+
+final class MoonShineLayout implements MoonShineLayoutContract
+{
+    public static function build(): LayoutBuilder
+    {
+        return LayoutBuilder::make([
+            Sidebar::make([ // [tl! focus]
+                Menu::make()->customAttributes(['class' => 'mt-2']),
+                Profile::make(withBorder: true)
+            ]), // [tl! focus]
+
+            //...
+        ]);
+    }
+}
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/sidebar.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/sidebar_dark.png') }}"></x-image>
+
+</x-page>

resources/views/pages/en/components/system_top_bar.blade.php

@@ -0,0 +1,99 @@
+<x-page
+    title="System component TopBar"
+    :sectionMenu="[
+        'Sections' => [
+            ['url' => '#make', 'label' => 'Make'],
+            ['url' => '#actions', 'label' => 'Actions'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    The <em>TopBar</em> system component is used to create the top navigation bar in <strong>MoonShine</strong>.
+</x-p>
+
+<x-p>
+    You can create a <em>TopBar</em> using the static <code>make()</code> method
+    class <code>TopBar</code>.
+</x-p>
+
+<x-code language="php">
+make(array $components = [])
+</x-code>
+
+<x-p>
+    В качестве параметра метод <code>make()</code> принимает массив с компонентами.
+</x-p>
+
+<x-code language="php">
+namespace App\MoonShine;
+
+use MoonShine\Components\Layout\LayoutBlock;
+use MoonShine\Components\Layout\LayoutBuilder;
+use MoonShine\Components\Layout\Menu;
+use MoonShine\Components\Layout\Profile;
+use MoonShine\Components\Layout\TopBar; // [tl! focus]
+use MoonShine\Contracts\MoonShineLayoutContract;
+
+final class MoonShineLayout implements MoonShineLayoutContract
+{
+    public static function build(): LayoutBuilder
+    {
+        return LayoutBuilder::make([
+            TopBar::make([ // [tl! focus]
+                Menu::make()->top()
+            ]),  // [tl! focus]
+
+            //...
+        ]);
+    }
+}
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/topbar.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/topbar_dark.png') }}"></x-image>
+
+<x-sub-title id="actions">Actions</x-sub-title>
+
+<x-p>
+    The <code>actions()</code> method of the <em>TopBar</em> component allows you to add additional elements to the areas
+    <em>actions</em>. The method takes an array of components as a parameter.
+</x-p>
+
+<x-code language="php">
+namespace App\MoonShine;
+
+use MoonShine\Components\Layout\LayoutBlock;
+use MoonShine\Components\Layout\LayoutBuilder;
+use MoonShine\Components\Layout\Menu;
+use MoonShine\Components\Layout\Profile;
+use MoonShine\Components\Layout\TopBar;
+use MoonShine\Contracts\MoonShineLayoutContract;
+
+final class MoonShineLayout implements MoonShineLayoutContract
+{
+    public static function build(): LayoutBuilder
+    {
+        return LayoutBuilder::make([
+            TopBar::make([
+                Menu::make()->top(),
+            ])
+                ->actions([ // [tl! focus:start]
+                    When::make(
+                        static fn() => config('moonshine.auth.enable', true),
+                        static fn() => [Profile::make()]
+                    )
+                ]), // [tl! focus:end]
+
+            //...
+        ]);
+    }
+}
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/topbar_actions.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/topbar_actions_dark.png') }}"></x-image>
+
+</x-page>