new decorations approach

resources/views/base/form/form.blade.php

@@ -5,7 +5,7 @@
 
     <form x-data="editForm()"
           action="{{ $resource->route(($item->exists ? 'update' : 'store'), $item->getKey()) }}"
-          class="bg-white dark:bg-darkblue shadow-md rounded-lg mb-4 text-white"
+          class="mb-4"
           method="POST"
           @if($resource->isPrecognition())
               x-on:submit.prevent="precognition($event.target)"
@@ -22,33 +22,11 @@ class="bg-white dark:bg-darkblue shadow-md rounded-lg mb-4 text-white"
             @method('PUT')
         @endif
 
-        <div x-data="{activeTab: '{{ $resource->tabs()->first()?->id() }}'}">
-            @if($resource->tabs()->isNotEmpty())
-                <div>
-                    <nav class="flex flex-col sm:flex-row">
-                        @foreach($resource->tabs() as $tab)
-                            <button
-                                :class="{ 'border-b-2 font-medium border-purple': activeTab === '{{ $tab->id() }}' }"
-                                @click.prevent="activeTab = '{{ $tab->id() }}'"
-                                class="py-4 px-6 block focus:outline-none text-purple">
-                                {{ $tab->label() }}
-                            </button>
-                        @endforeach
-                    </nav>
-                </div>
-            @endif
-
-            @foreach($resource->formComponents() as $field)
-                @if($field instanceof \Leeto\MoonShine\Decorations\Decoration)
-                    {{ $resource->renderDecoration($field, $item) }}
-                @elseif($field instanceof \Leeto\MoonShine\Fields\Field && $field->canDisplayFormPrimitiveField($item))
-                    <x-moonshine::field-container :field="$field" :item="$item" :resource="$resource">
-                        {{ $resource->renderField($field, $item) }}
-                    </x-moonshine::field-container>
-                @endif
-            @endforeach
-        </div>
-
+        <x-moonshine::resource-renderable
+            :components="$resource->formComponents()"
+            :item="$item"
+            :resource="$resource"
+        />
 
         <div class="px-10 py-10">
             @include('moonshine::base.form.shared.btn', [
@@ -62,8 +40,8 @@ class="py-4 px-6 block focus:outline-none text-purple">
     </form>
 
     @if($item->exists)
-        @foreach($resource->formComponents() as $field)
-            @if($field instanceof \Leeto\MoonShine\Fields\Field && $field->canDisplayFormRelationField($item))
+        @foreach($resource->relatableFormComponents() as $field)
+            @if($field->canDisplayOnForm($item))
                 <div class="mt-4"></div>
                 <h2 class="text-lg">{{ $field->label() }}</h2>
                 <div class="mt-4"></div>
@@ -79,7 +57,7 @@ function precognition(form) {
 
             let formData = new FormData(form);
 
-            for (var data of formData.entries()) {
+            for (const data of formData.entries()) {
                 if(data[1] !== undefined && data[1] instanceof File) {
                     formData.delete(data[0]);
                 }

resources/views/base/index/head.blade.php

@@ -9,7 +9,7 @@
         <th class="px-6 py-3 text-left text-xs leading-4 font-medium uppercase tracking-wider">
             <div class="flex items-center justify-start space-x-2">
                 <span>{{ $field->label() }}</span>
-                @if($resource->isPreviewMode() && !$resource->isRelatable() && $field->isSortable())
+                @if(!$resource->isPreviewMode() && !$resource->isRelatable() && $field->isSortable())
                     <a
                             href="{{ request()->fullUrlWithQuery([
                         'order[field]' => $field->name(),

resources/views/components/resource-renderable.blade.php

@@ -0,0 +1,22 @@
+@foreach($components as $fieldOrDecoration)
+    @if($container ?? false) <div class="{{ $containerClass ?? '' }}"> @endif
+
+        @if($fieldOrDecoration instanceof \Leeto\MoonShine\Decorations\Decoration)
+            {{ $resource->renderDecoration($fieldOrDecoration, $item) }}
+        @elseif($fieldOrDecoration instanceof \Leeto\MoonShine\Fields\Field
+            && $fieldOrDecoration->canDisplayOnForm($item)
+            && !$fieldOrDecoration->isResourceModeField()
+        )
+            @if($fieldOrDecoration->hasFieldContainer())
+                <x-moonshine::field-container :field="$fieldOrDecoration" :item="$item" :resource="$resource">
+                    {{ $resource->renderField($fieldOrDecoration, $item) }}
+                </x-moonshine::field-container>
+            @else
+                <div class="p-8">
+                    {{ $resource->renderField($fieldOrDecoration, $item) }}
+                </div>
+            @endif
+        @endif
+
+        @if($container ?? false) </div> @endif
+@endforeach

resources/views/decorations/block.blade.php

@@ -0,0 +1,7 @@
+<div class="bg-white dark:bg-darkblue shadow-md rounded-lg mb-4 text-white">
+    <x-moonshine::resource-renderable
+        :components="$decoration->fields()"
+        :item="$item"
+        :resource="$resource"
+    />
+</div>

resources/views/decorations/button.blade.php

@@ -0,0 +1,9 @@
+<div class="px-10 py-5">
+    @include('moonshine::shared.btn', [
+        'href' => $decoration->getLinkValue(),
+        'target' => $decoration->isLinkBlank() ? '_blank' : '_self',
+        'filled' => true,
+        'icon' => $decoration->iconValue(),
+        'title' => $decoration->getLinkName()
+    ])
+</div>

resources/views/decorations/flex.blade.php

@@ -0,0 +1,12 @@
+<div class="flex
+    @if(!$decoration->isWithoutSpace()) space-x-4 @endif
+    items-{{ $decoration->getItemsAlign() }}
+    justify-{{ $decoration->getJustifyAlign() }}"
+>
+    <x-moonshine::resource-renderable
+        :components="$decoration->fields()"
+        :item="$item"
+        :resource="$resource"
+        :container="true"
+    />
+</div>

resources/views/decorations/tabs.blade.php

@@ -0,0 +1,26 @@
+@if($decoration->tabs()->isNotEmpty())
+    <div x-data="{activeTab_{{ $decoration->id() }}: '{{ $decoration->tabs()->first()?->id() }}'}">
+        <div>
+            <nav class="flex flex-col sm:flex-row">
+                @foreach($decoration->tabs() as $tab)
+                    <button
+                        :class="{ 'border-b-2 font-medium border-purple': activeTab_{{ $decoration->id() }} === '{{ $tab->id() }}' }"
+                        @click.prevent="activeTab_{{ $decoration->id() }} = '{{ $tab->id() }}'"
+                        class="py-4 px-6 block focus:outline-none text-purple">
+                        {{ $tab->label() }}
+                    </button>
+                @endforeach
+            </nav>
+        </div>
+
+        @foreach($decoration->tabs() as $tab)
+            <div x-show="activeTab_{{ $decoration->id() }} === '{{ $tab->id() }}'">
+                <x-moonshine::resource-renderable
+                    :components="$tab->fields()"
+                    :item="$item"
+                    :resource="$resource"
+                />
+            </div>
+        @endforeach
+    </div>
+@endif

resources/views/shared/btn.blade.php

@@ -1,4 +1,4 @@
-<a href="{{ $href }}"
+<a href="{{ $href }}" target="{{ $target ?? '_self' }}"
    class="inline-flex  items-center
    @if(!$filled)
        bg-transparent hover:bg-purple text-purple border border-purple hover:text-white hover:border-transparent

src/Contracts/Resources/ResourceContract.php

@@ -8,7 +8,6 @@
 use Illuminate\Support\Collection;
 use Leeto\MoonShine\Actions\Action;
 use Leeto\MoonShine\Contracts\HtmlViewable;
-use Leeto\MoonShine\Decorations\Tab;
 use Leeto\MoonShine\Fields\Field;
 
 interface ResourceContract
@@ -62,13 +61,6 @@ public function isWithPolicy(): bool;
      */
     public function getFields(): Collection;
 
-    /**
-     * Get a collection of tabs, which will be displayed on create/update resource form
-     *
-     * @return Collection<Tab>
-     */
-    public function tabs(): Collection;
-
     /**
      * Get a collection of fields of related model, which will be displayed on resource index page
      *

src/Decorations/Block.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Leeto\MoonShine\Decorations;
+
+class Block extends Decoration
+{
+    public static string $view = 'moonshine::decorations.block';
+}

src/Decorations/Button.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Leeto\MoonShine\Decorations;
+
+use Leeto\MoonShine\Traits\Fields\LinkTrait;
+use Leeto\MoonShine\Traits\WithIcon;
+
+class Button extends Decoration
+{
+    use WithIcon;
+    use LinkTrait;
+
+    public static string $view = 'moonshine::decorations.button';
+
+    public function __construct(string $label, string $link, bool $blank = false)
+    {
+        $this->setLabel($label);
+        $this->addLink($label, $link, $blank);
+    }
+}

src/Decorations/Decoration.php

@@ -16,9 +16,9 @@ abstract class Decoration implements HtmlViewable
 
     protected string $label;
 
-    protected array $fields;
+    protected array $fields = [];
 
-    final public function __construct(string $label, array $fields = [])
+    public function __construct(string $label, array $fields = [])
     {
         $this->setLabel($label);
         $this->setFields($fields);
@@ -47,7 +47,7 @@ public function setFields(array $fields): static
         foreach ($fields as $field) {
             if ($field instanceof Field) {
                 $this->fields[] = $field->setParents();
-            } elseif (! $field instanceof Tab) {
+            } else {
                 $this->fields[] = $field;
             }
         }

src/Decorations/Flex.php

@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Leeto\MoonShine\Decorations;
+
+class Flex extends Decoration
+{
+    public static string $view = 'moonshine::decorations.flex';
+
+    protected string $itemsAlign = 'start';
+
+    protected string $justifyAlign = 'between';
+
+    protected bool $withoutSpace = false;
+
+    public function withoutSpace(): self
+    {
+        $this->withoutSpace = true;
+
+        return $this;
+    }
+
+    public function isWithoutSpace(): bool
+    {
+        return $this->withoutSpace;
+    }
+
+    public function itemsAlign(string $itemsAlign): self
+    {
+        $this->itemsAlign = $itemsAlign;
+
+        return $this;
+    }
+
+    public function justifyAlign(string $justifyAlign): self
+    {
+        $this->justifyAlign = $justifyAlign;
+
+        return $this;
+    }
+
+    public function getItemsAlign(): string
+    {
+        return $this->itemsAlign;
+    }
+
+    public function getJustifyAlign(): string
+    {
+        return $this->justifyAlign;
+    }
+}

src/Decorations/Tab.php

@@ -4,7 +4,15 @@
 
 namespace Leeto\MoonShine\Decorations;
 
+use Leeto\MoonShine\Exceptions\DecorationException;
+
 class Tab extends Decoration
 {
-    public static string $view = 'moonshine::decorations.tab';
+    /**
+     * @throws DecorationException
+     */
+    public function getView(): string
+    {
+        throw new DecorationException('You need to use '.get_class(Tabs::class).' class');
+    }
 }

src/Decorations/Tabs.php

@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Leeto\MoonShine\Decorations;
+
+use Illuminate\Support\Collection;
+use Leeto\MoonShine\Exceptions\DecorationException;
+use Throwable;
+
+class Tabs extends Decoration
+{
+    public static string $view = 'moonshine::decorations.tabs';
+
+    public function __construct(protected array $tabs = [])
+    {
+        $this->setLabel(uniqid());
+    }
+
+    /**
+     * @return Collection<Tab>
+     * @throws Throwable
+     */
+    public function tabs(): Collection
+    {
+        return tap(Collection::make($this->tabs), function (Collection $tabs) {
+            throw_if(
+                $tabs->every(fn($tab) => !$tab instanceof Tab),
+                new DecorationException('Tabs must be a class of '.Tab::class)
+            );
+        });
+    }
+}

src/Fields/Field.php

@@ -58,6 +58,8 @@ abstract class Field implements HtmlViewable, HasAssets, HasExportViewValue, Has
 
     protected bool $canSave = true;
 
+    protected bool $fieldContainer = true;
+
     protected function afterMake(): void
     {
         if ($this->getAssets()) {
@@ -208,6 +210,18 @@ public function useOnImport(mixed $condition = null): static
         return $this;
     }
 
+    public function fieldContainer(mixed $condition = null): static
+    {
+        $this->fieldContainer = Condition::boolean($condition, true);
+
+        return $this;
+    }
+
+    public function hasFieldContainer(): bool
+    {
+        return $this->fieldContainer;
+    }
+
     public function canSave(mixed $condition = null): static
     {
         $this->canSave = Condition::boolean($condition, true);