Merge pull request moonshine-software#534 from DissNik/release-2.22

Release 2.22

resources/views/examples/components/tabs-slots.blade.php

@@ -0,0 +1,13 @@
+<x-moonshine::tabs
+    :tabs="[
+        'tab_1' => 'Tab 1',
+        'tab_2' => 'Tab 2'
+    ]"
+>
+    <x-slot:tab_1>
+        {{ fake()->text() }}
+    </x-slot:tab_1>
+    <x-slot:tab_2>
+        {{ fake()->text() }}
+    </x-slot:tab_2>
+</x-moonshine::tabs>

resources/views/pages/en/advanced/authentication.blade.php

@@ -123,6 +123,18 @@
      then specify <code>'avatar'=>''</code> or <code>'avatar'=>false</code>.
 </x-moonshine::alert>
 
+<x-p>
+    It is possible to change <em>Guard</em> in the Profile component.
+</x-p>
+
+<x-code language="php">
+Profile::make(guard: 'custom')
+</x-code>
+
+<x-code language="php">
+MoonShineAuth::guard('custom')->user()
+</x-code>
+
 <x-sub-title id="pipelines">Pipelines</x-sub-title>
 
 <x-p>

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

@@ -4,6 +4,7 @@
         'Sections' => [
             ['url' => '#make', 'label' => 'Make'],
             ['url' => '#wihtout-heading', 'label' => 'No title'],
+            ['url' => '#icon', 'label' => 'Icon'],
         ]
     ]"
 >
@@ -71,4 +72,8 @@ public function components(): array
 <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-sub-title id="icon">Icon</x-sub-title>
+
+@include('pages.en.components.shared.decoration_icon', ['decoration' => 'Block'])
+
 </x-page>

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

@@ -3,6 +3,7 @@
     :sectionMenu="[
         'Sections' => [
             ['url' => '#make', 'label' => 'Make'],
+            ['url' => '#icon', 'label' => 'Icon'],
             ['url' => '#show', 'label' => 'Show'],
             ['url' => '#persist', 'label' => 'Persist'],
         ]
@@ -41,6 +42,10 @@ public function components(): array
 <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="icon">Icon</x-sub-title>
+
+@include('pages.en.components.shared.decoration_icon', ['decoration' => 'Collapse'])
+
 <x-sub-title id="show">Show</x-sub-title>
 
 <x-p>

resources/views/pages/en/components/shared/decoration_icon.blade.php

@@ -0,0 +1,24 @@
+<x-p>
+    The <code>icon()</code> method allows you to add an icon.
+</x-p>
+
+<x-code language="php">
+use MoonShine\Decorations\{{ $decoration }};
+
+//...
+
+public function components(): array
+{
+    return [
+        {{ $decoration }}::make('{{ $decoration }}')
+            ->icon('heroicons.outline.users') // [tl! focus]
+    ];
+}
+
+//...
+</x-code>
+
+@include('pages.en.shared.alert_icons')
+
+<x-image theme="light" src="{{ asset('screenshots/' . str($decoration)->snake('_')->append('_icon.png')) }}"></x-image>
+<x-image theme="dark" src="{{ asset('screenshots/' . str($decoration)->snake('_')->append('_icon_dark.png')) }}"></x-image>

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

@@ -21,12 +21,26 @@ class <code>Profile</code>.
 </x-p>
 
 <x-code language="php">
-make(bool $withBorder = false)
+make(
+    ?string $route = null,
+    ?string $logOutRoute = null,
+    Closure|false|null|string $avatar = null,
+    Closure|null|string $nameOfUser = null,
+    Closure|null|string $username = null,
+    bool $withBorder = false,
+    ?string $guard = null
+)
 </x-code>
 
-<x-p>
-    <code>$withBorder</code> - to split before the component.
-</x-p>
+<x-ul>
+    <li><code>$route</code> - profile page route,</li>
+    <li><code>$logOutRoute</code> - route for logout</li>
+    <li><code>$avatar</code> - user avatar</li>
+    <li><code>$nameOfUser</code> - user name</li>
+    <li><code>$username</code> - username (email|login|tel ...),</li>
+    <li><code>$withBorder</code> - split before the component</li>
+    <li><code>$guard</code> - used by <em>Guard</em> for user authorization.</li>
+</x-ul>
 
 <x-code language="php">
 namespace App\MoonShine;

resources/views/pages/en/fields/json.blade.php

@@ -13,6 +13,7 @@
             ['url' => '#relation', 'label' => 'Relationships via Json'],
             ['url' => '#filter', 'label' => 'Filter'],
             ['url' => '#buttons', 'label' => 'Buttons'],
+            ['url' => '#modify', 'label' => 'Modify'],
         ]
     ]"
 >
@@ -490,4 +491,79 @@ public function fields(): array
 //...
 </x-code>
 
+<x-sub-title id="modify">Modify</x-sub-title>
+
+<x-p>
+    The <em>Json</em> field has methods with which you can modify the delete button or
+    change <em>TableBuilder</em> for preview and form.
+</x-p>
+
+<x-moonshine::divider label="modifyRemoveButton()" />
+
+<x-p>
+    The <code>modifyRemoveButton()</code> method allows you to change the remove button.
+</x-p>
+
+<x-code language="php">
+/**
+ * @param  Closure(ActionButton $button, self $field): ActionButton  $callback
+ */
+modifyRemoveButton(Closure $callback)
+</x-code>
+
+<x-code language="php">
+use MoonShine\ActionButtons\ActionButton;
+use MoonShine\Fields\Json;
+
+//...
+
+public function fields(): array
+{
+    return [
+        Json::make('Data')
+            ->modifyRemoveButton(
+                fn(ActionButton $button) => $button->customAttributes([
+                    'class' => 'btn-secondary'
+                ])
+            ) // [tl! focus:-4]
+    ];
+}
+
+//...
+</x-code>
+
+<x-moonshine::divider label="modifyTable()" />
+
+<x-p>
+    The <code>modifyTable()</code> method allows you to change the <em>TableBuilder</em> for the preview and form.
+</x-p>
+
+<x-code language="php">
+/**
+ * @param  Closure(TableBuilder $table, bool $preview): TableBuilder $callback
+ */
+modifyTable(Closure $callback)
+</x-code>
+
+<x-code language="php">
+use MoonShine\Components\TableBuilder;
+use MoonShine\Fields\Json;
+
+//...
+
+public function fields(): array
+{
+    return [
+        Json::make('Data')
+            ->modifyTable(
+                fn(TableBuilder $table, bool $preview) => $table->customAttributes([
+                    'style' => 'width: 50%;'
+                ])
+            ) // [tl! focus:-4]
+    ];
+}
+
+//...
+</x-code>
+
 </x-page>

resources/views/pages/en/fields/text.blade.php

@@ -105,7 +105,29 @@ public function fields(): array
 <x-p><x-moonshine::badge color="green">+</x-moonshine::badge> ability to copy a value using a button</x-p>
 
 <x-code language="php">
-copy()
+copy(string $value = '@{{value}}')
+</x-code>
+
+<x-ul>
+    <li><code>@{{value}}</code> - field value.</li>
+</x-ul>
+
+<x-code language="php">
+use MoonShine\Fields\Text;
+
+//...
+
+public function fields(): array
+{
+    return [
+        Text::make('Title')
+            ->copy(), // [tl! focus]
+        Text::make('Token')
+            ->copy('https://domain.com?token=@{{value}}') // [tl! focus]
+        ];
+    }
+
+//...
 </x-code>
 
 <x-p><x-moonshine::badge color="green">+</x-moonshine::badge> lock with change blocking</x-p>

resources/views/pages/en/resources/table.blade.php

@@ -10,6 +10,7 @@
         ['url' => '#async', 'label' => 'Asynchronous mode'],
         ['url' => '#update-row', 'label' => 'Updating a row'],
         ['url' => '#column-display', 'label' => 'Column display'],
+        ['url' => '#modify', 'label' => 'Modify'],
     ]
 ]">
 
@@ -418,4 +419,106 @@ public function fields(): array
 }
 </x-code>
 
+<x-sub-title id="modify">Modify</x-sub-title>
+
+<x-p>
+    You can replace <code>thead</code> or <code>tbody</code> or <code>tfoot</code>,
+    and also add elements to the table in <code>tbody</code> before and after the first row.
+</x-p>
+
+<x-moonshine::divider label="thead()" />
+
+<x-code language="php">
+namespace App\MoonShine\Resources;
+
+use MoonShine\Fields\Fields;
+use MoonShine\Resources\ModelResource;
+
+class PostResource extends ModelResource
+{
+    // ...
+
+    public function thead(): ?Closure
+    {
+        return static fn(Fields $headFields): string => '<tr><th>Title</th></tr>';
+    } // [tl! focus:-3]
+}
+</x-code>
+
+<x-moonshine::divider label="tbody()" />
+
+<x-code language="php">
+namespace App\MoonShine\Resources;
+
+use Illuminate\Support\Collection;
+use MoonShine\Resources\ModelResource;
+
+class PostResource extends ModelResource
+{
+    // ...
+
+    public function tbody(): ?Closure
+    {
+        return static fn(Collection $rows): string => '<tr><td>Content</td></tr>';
+    } // [tl! focus:-3]
+}
+</x-code>
+
+<x-moonshine::divider label="tfoot()" />
+
+<x-code language="php">
+namespace App\MoonShine\Resources;
+
+use MoonShine\ActionButtons\ActionButtons;
+use MoonShine\Resources\ModelResource;
+
+class PostResource extends ModelResource
+{
+    // ...
+
+    public function tfoot(): ?Closure
+    {
+        return static fn(ActionButtons $bulkButtons): string => '<tr><td>Footer</td></tr>';
+    } // [tl! focus:-3]
+}
+</x-code>
+
+<x-moonshine::divider label="tbodyBefore()" />
+
+<x-code language="php">
+namespace App\MoonShine\Resources;
+
+use Illuminate\Support\Collection;
+use MoonShine\Resources\ModelResource;
+
+class PostResource extends ModelResource
+{
+    // ...
+
+    public function tbodyBefore(): ?Closure
+    {
+        return static fn(Collection $rows): string => '<tr><td>Before</td></tr>';
+    } // [tl! focus:-3]
+}
+</x-code>
+
+<x-moonshine::divider label="tbodyAfter()" />
+
+<x-code language="php">
+namespace App\MoonShine\Resources;
+
+use Illuminate\Support\Collection;
+use MoonShine\Resources\ModelResource;
+
+class PostResource extends ModelResource
+{
+    // ...
+
+    public function tbodyAfter(): ?Closure
+    {
+        return static fn(Collection $rows): string => '<tr><td>After</td></tr>';
+    } // [tl! focus:-3]
+}
+</x-code>
+
 </x-page>