Merge pull request #275 from DissNik/2.0-components

2.0 components

config/menu.php

@@ -24,12 +24,12 @@
 
         // Decorations
         'Decorations:_divider_',
-        ['slug' => 'components-decoration_tabs', 'label' => 'Tabs', 'title' => 'Decoration Tabs'],
-        ['slug' => 'components-decoration_heading', 'label' => 'Heading', 'title' => 'Decoration Heading'],
         ['slug' => 'components-decoration_block', 'label' => 'Block', 'title' => 'Decoration Block'],
-        ['slug' => 'components-decoration_layout', 'label' => 'Layout', 'title' => 'Decoration Layout'],
         ['slug' => 'components-decoration_collapse', 'label' => 'Collapse', 'title' => 'Decoration Collapse'],
         ['slug' => 'components-decoration_divider', 'label' => 'Divider', 'title' => 'Decoration Divider'],
+        ['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' => 'Decoration Tabs'],
 
         // Metrics
         'Metrics:_divider_',

resources/views/pages/ru/components/decoration_block.blade.php

@@ -0,0 +1,74 @@
+<x-page
+    title="Декоратор Block"
+    :sectionMenu="[
+        'Разделы' => [
+            ['url' => '#make', 'label' => 'Make'],
+            ['url' => '#wihtout-heading', 'label' => 'Без заголовка'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    Декоратор <em>Block</em> позволяет создавать стилизованные блоки.
+</x-p>
+
+<x-p>
+    Создать <em>Block</em> можно воспользовавшись статическим методом <code>make()</code>.
+</x-p>
+
+<x-code language="php">
+make(Closure|string|array $labelOrFields = '', array $fields = [])
+</x-code>
+
+<x-code language="php">
+use MoonShine\Decorations\Block; // [tl! focus]
+use MoonShine\Fields\Text;
+
+//...
+
+public function components(): array
+{
+    return [
+        Block::make('Block title', [ // [tl! focus]
+            Text::make('Name', 'first_name')
+        ]) // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/block.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/block_dark.png') }}"></x-image>
+
+
+<x-sub-title id="wihtout-heading">Без заголовка</x-sub-title>
+
+<x-p>
+    Если у блока не нужен заголовок, то методу <code>make()</code> необходимо передать только массив.
+</x-p>
+
+<x-code language="php">
+use MoonShine\Decorations\Block; // [tl! focus]
+use MoonShine\Fields\Text;
+
+//...
+
+public function components(): array
+{
+    return [
+        Block::make([ // [tl! focus]
+            Text::make('Name', 'first_name')
+        ]) // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/block_without_title.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/block_without_title_dark.png') }}"></x-image>
+
+</x-page>

resources/views/pages/ru/components/decoration_collapse.blade.php

@@ -0,0 +1,74 @@
+<x-page
+    title="Декоратор Collapse"
+    :sectionMenu="[
+        'Разделы' => [
+            ['url' => '#make', 'label' => 'Make'],
+            ['url' => '#show', 'label' => 'Show'],
+        ]
+    ]"
+>
+
+<x-sub-title id="make">Make</x-sub-title>
+
+<x-p>
+    Декоратор <em>Collapse</em> позволяет сворачивать содержимое блока с сохранением состояния.
+</x-p>
+
+<x-code language="php">
+make(Closure|string|array $labelOrFields = '', array $fields = [])
+</x-code>
+
+<x-code language="php">
+use MoonShine\Decorations\Collapse; // [tl! focus]
+use MoonShine\Fields\Text;
+
+//...
+
+public function components(): array
+{
+    return [
+        Collapse::make('Title/Slug', [ // [tl! focus]
+            Text::make('Title'),
+            Text::make('Slug')
+        ]) // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+<x-image theme="light" src="{{ asset('screenshots/collapse.png') }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/collapse_dark.png') }}"></x-image>
+
+<x-sub-title id="show">Show</x-sub-title>
+
+<x-p>
+    По умолчанию декоратор <em>Collapse</em> отображается в свернутом состоянии.
+    Метод <code>show()</code> позволяет переопределить это поведение.
+</x-p>
+
+<x-code language="php">
+show(bool $show = true)
+</x-code>
+
+<x-code language="php">
+use MoonShine\Decorations\Collapse;
+use MoonShine\Fields\Text;
+
+//...
+
+public function components(): array
+{
+    return [
+        Collapse::make('Title/Slug', [
+            Text::make('Title'),
+            Text::make('Slug')
+        ])
+            ->show() // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+</x-page>

resources/views/pages/ru/components/divider.blade.php → resources/views/pages/ru/components/decoration_divider.blade.php

@@ -2,30 +2,35 @@
     title="Разделитель"
     :sectionMenu="[
         'Разделы' => [
-            ['url' => '#basics', 'label' => 'Основы'],
+            ['url' => '#make', 'label' => 'Make'],
             ['url' => '#label', 'label' => 'Label'],
+            ['url' => '#centered', 'label' => 'Центрирование'],
         ]
     ]"
 >
 
-<x-sub-title id="basics">Основы</x-sub-title>
+<x-sub-title id="make">Make</x-sub-title>
 
 <x-p>
-    Для разделения на зоны можно воспользоваться декорацией <code>Divider</code>.
+    Для разделения на зоны можно воспользоваться декорацией <em>Divider</em>.
 </x-p>
 
 <x-code language="php">
 use MoonShine\Decorations\Divider;
 
 //...
-public function fields(): array
+
+public function components(): array
 {
     return [
         //...
+
         Divider::make(), // [tl! focus]
+
         //...
     ];
 }
+
 //...
 </x-code>
 
@@ -35,27 +40,33 @@ public function fields(): array
 <x-sub-title id="label">Label</x-sub-title>
 
 <x-p>
-    В качестве разделителя можно использовать текст, для этого его необходимо передать методу <code>make()</code> в качестве аргумента.
+    В качестве разделителя можно использовать текст, для этого его необходимо передать методу <code>make()</code>.
 </x-p>
 
 <x-code language="php">
 use MoonShine\Decorations\Divider;
 
 //...
-public function fields(): array
+
+public function components(): array
 {
     return [
         //...
+
         Divider::make('Divider'), // [tl! focus]
+
         //...
     ];
 }
+
 //...
 </x-code>
 
 <x-image theme="light" src="{{ asset('screenshots/divider_label.png') }}"></x-image>
 <x-image theme="dark" src="{{ asset('screenshots/divider_label_dark.png') }}"></x-image>
 
+<x-sub-title id="centered">Центрирование</x-sub-title>
+
 <x-p>
     Метод <code>centered()</code> позволяет отцентрировать текст.
 </x-p>
@@ -64,15 +75,19 @@ public function fields(): array
 use MoonShine\Decorations\Divider;
 
 //...
-public function fields(): array
+
+public function components(): array
 {
     return [
         //...
+
         Divider::make('Divider')
             ->centered(), // [tl! focus]
+
         //...
     ];
 }
+
 //...
 </x-code>