refactored WithFieldsTrait, WithHtmlAttributes, and some minor fixes

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

@@ -31,7 +31,7 @@ class="py-4 px-6 block focus:outline-none text-purple">
                 </div>
             @endif
 
-            @foreach($resource->fields() as $field)
+            @foreach($resource->formComponents() as $field)
                 @if($field instanceof \Leeto\MoonShine\Decorations\Decoration)
                     {{ $resource->renderDecoration($field, $item) }}
                 @elseif($field instanceof \Leeto\MoonShine\Fields\Field && $field->showOnForm)

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

@@ -5,21 +5,22 @@
 
     @foreach($resource->indexFields() as $field)
         <th class="px-6 py-3 text-left text-xs leading-4 font-medium uppercase tracking-wider">
-            {{ $field->label() }}
-
-            @if($field->isSortable())
-                <a
-                    href="{{ request()->fullUrlWithQuery([
+            <div class="flex items-center justify-start space-x-2">
+                <span>{{ $field->label() }}</span>
+                @if($field->isSortable())
+                    <a
+                            href="{{ request()->fullUrlWithQuery([
                         'order[field]' => $field->name(),
                         'order[type]' => (request()->has("order.type") && request("order.type") == "asc" ? "desc" : "asc")
                     ]) }}"
-                    class="inline-block align-middle"
-                >
-                    <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-                    </svg>
-                </a>
-            @endif
+                            class="inline-block align-middle"
+                    >
+                        <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                    </a>
+                @endif
+            </div>
         </th>
     @endforeach
 

resources/views/dashboard.blade.php

@@ -11,16 +11,46 @@
         <script src="{{ asset($js) }}"></script>
     @endforeach
 
+    @if(config("moonshine.logo"))
+        <img class="mx-auto h-12 w-auto" src="{{ config("moonshine.logo") }}" alt="{{ config("moonshine.title") }}">
+    @else
+        <svg class="fill-current mx-auto h-12 w-auto my-4 text-purple dark:text-white" viewBox="0 0 1719.62 350.71" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="253.58" cy="100.75" r="27.62" transform="matrix(.16022575 -.9870804 .9870804 .16022575 -14.01 334.92)"/>
+            <circle cx="203.67" cy="179.06" r="17.83"/>
+            <circle cx="202.66" cy="268.09" r="11.17"/>
+            <circle cx="222.49" cy="120.39" r="12.08"/>
+            <circle cx="272.77" cy="184.98" r="5.1"/>
+            <circle cx="182.75" cy="79.17" r="6.04"/>
+            <circle cx="90.08" cy="159.07" r="8.03"/>
+            <circle cx="138.79" cy="201.68" r="4.79"/>
+            <circle cx="179.1" cy="128.37" r="6.04"/>
+            <g transform="translate(-127.52)">
+                <path d="m345.86 272.53a16.3 16.3 0 1 1 -30.81-10.53 186.27 186.27 0 0 1 -93.05-91.44 12.3 12.3 0 0 1 -8.88-22.95 185.46 185.46 0 0 1 -8.39-55.32 187.57 187.57 0 0 1 1.84-26.23 138.09 138.09 0 1 0 177.28 211.72 185 185 0 0 1 -37.99-5.25zm-105.2-28a8 8 0 1 1 8-8 8 8 0 0 1 -8 8.03z"/>
+                <path d="m265.84 44.27c1.83-3 .35-5.48 2.64-8.64a10.15 10.15 0 0 1 4.2-3.23c7.15-3.51 23.05-21.4 19.92-28.4-4-6.59-27.74-3.83-34.72 0a10.23 10.23 0 0 1 -5.06 1.59c-3.91.06-5.13-2.6-8.59-2.79-2.52-.14-4.47 1.28-8.36 4.12-2.87 2.08-8.87 6.47-7.87 9.41.12.38.43 1 5 3 2.7 1.17 5 2 6.73 2.63a11.36 11.36 0 0 0 5.71 14.27 10.94 10.94 0 0 0 2.13.78c-.49 1.74-1.11 4.13-1.71 7-1 4.86-.64 5.49-.4 5.81 1.86 2.47 8.85.09 12.26-1.08 4.51-1.55 6.79-2.33 8.12-4.47zm1.16-21.92a7.35 7.35 0 0 1 -3.37-3.35 7.39 7.39 0 1 1 3.37 3.35z"/>
+                <path d="m574.62 279.26h-23.72l39.35-105.81c4.89-14.5 13-23.53 29.94-23.53 18.83 0 28.24 11.11 28.24 27.68v75.12c0 4.33 2.64 7.15 6.4 7.15a7.45 7.45 0 0 0 7.17-5.27l30.88-81.14c4.89-14.5 13-23.53 29.94-23.53 18.83 0 28.24 11.11 28.24 27.68v101.67h-22.4v-100.56c0-4.52-2.64-7.34-6.4-7.34-3.2 0-5.84 2.26-7 5.46l-30.87 81.16c-4.89 14.5-13.18 23.53-30.12 23.53-18.64 0-28-11.11-28-27.86v-74.95c0-4.52-2.82-7.34-6.59-7.34-3.39 0-5.65 2.26-7 5.46z"/>
+                <path d="m851.75 152.17c36.9 0 57.42 21.09 57.42 63.82 0 42.55-20.33 63.26-57.42 63.26h-17.32c-37.09 0-57.43-20.71-57.43-63.25 0-42.74 20.52-63.82 57.42-63.82zm-17.32 22.22c-24.48 0-35.21 12.43-35.21 41.61 0 29 10.54 41 35.21 41h17.32c24.48 0 35-12.05 35-41.23 0-29-10.54-41.42-35-41.42z"/>
+                <path d="m1005.38 152.17c36.9 0 57.42 21.09 57.42 63.82 0 42.55-20.33 63.26-57.42 63.26h-17.32c-37.09 0-57.42-20.71-57.42-63.26 0-42.74 20.52-63.82 57.42-63.82zm-17.32 22.22c-24.48 0-35.21 12.43-35.21 41.61 0 29 10.54 41 35.21 41h17.32c24.48 0 35-12.05 35-41.23 0-29-10.54-41.42-35-41.42z"/>
+                <path d="m1111 279.26h-22.22v-101.67c0-16.57 9.41-27.68 29.18-27.68 17.7 0 25.6 9 30.88 23.53l37.09 81.14c1.51 3 4 5.27 8.1 5.27 4.71 0 7.53-2.82 7.53-7.15v-100.53h22.44v101.48c0 16.76-9.6 27.86-29.18 27.86-17.7 0-25.79-9-31.06-23.53l-37.09-81.14c-1.69-3.77-4-5.46-7.91-5.46-5.08 0-7.72 2.82-7.72 7.34z"/>
+                <path d="m1352.55 152.17v22.22h-65.14c-11.48 0-16.57 6.21-16.57 15.06 0 7.72 4 15.06 18.83 15.06h29.75c34.64 0 42.74 19.2 42.74 37.47 0 21.46-11.48 37.28-40.48 37.28h-70.79v-22.26h71.54c12 0 17.51-6.59 17.51-15.81 0-8.28-4.33-15.81-20-15.81h-29.56c-33.89 0-41.8-19-41.8-36.71 0-21.09 11.3-36.52 39.54-36.52h64.39z"/>
+                <path d="m1409 152.17v51.77h65v-51.77h22.4v127.08h-22.4v-53.09h-65v53.09h-22.22v-127.08z"/>
+                <path d="m1549.29 152.17v127.08h-22.22v-127.08z"/>
+                <path d="m1602 279.26h-22.22v-101.67c0-16.57 9.41-27.68 29.18-27.68 17.7 0 25.6 9 30.88 23.53l37.09 81.14c1.51 3 4 5.27 8.1 5.27 4.71 0 7.53-2.82 7.53-7.15v-100.53h22.44v101.48c0 16.76-9.6 27.86-29.18 27.86-17.7 0-25.79-9-31.06-23.53l-37.09-81.14c-1.69-3.77-4-5.46-7.91-5.46-5.08 0-7.72 2.82-7.72 7.34z"/>
+                <path d="m1847 152.17v22.22h-63.64c-13.37 0-19.2 6.21-19.2 16 0 10.35 6.59 15.06 19.39 15.06h62.45v20.14h-63.07c-12.8 0-19.39 5.08-19.39 15.44 0 10 6.21 16 19.2 16h64.39v22.22h-64.39c-30.12 0-42.36-14.87-42.36-34.64 0-14.5 6.59-24.29 18.26-29.18-11.86-4.9-17.89-14.69-17.89-28.62 0-20.33 12.61-34.64 42.55-34.64z"/>
+                <path d="m563.11 63.75a11.26 11.26 0 0 0 -.65-2.9 36.25 36.25 0 0 0 -2.39-5 150.79 150.79 0 0 0 -12.08-18 .82.82 0 0 0 -1.15-.14.82.82 0 0 0 -.14 1.15 128.86 128.86 0 0 1 11.68 17.91 29 29 0 0 1 2.13 4.75 6.69 6.69 0 0 1 .08 4.58 9.27 9.27 0 0 1 -2.89 3.76c-1.3 1.1-2.77 2.23-4.15 3.27a20.52 20.52 0 0 1 -4.33 2.56 10.56 10.56 0 0 1 -2.28.66 6.45 6.45 0 0 1 -1.17.1 9.29 9.29 0 0 1 -1.18 0c-3.15-.1-5.86-2.08-8.73-4.22a44.92 44.92 0 0 0 -4.65-3.14 22.46 22.46 0 0 0 -5.5-2.21 25.43 25.43 0 0 0 -5.88-.66 20.84 20.84 0 0 0 -6 .93 28.54 28.54 0 0 0 -5.42 2.35l-1.25.72-1.16.7-2.31 1.39-9.26 5.52c-6.17 3.69-12.38 7.31-18.6 10.93-12.44 7.22-25 14.3-37.66 21.14a7.85 7.85 0 0 0 -.89.57 6.73 6.73 0 0 0 -2.37 7.26s0 0 0 .06a6.77 6.77 0 0 0 .26.71 155.16 155.16 0 0 1 9.85 54.58c0 85-68.16 154-152.24 154s-152.18-68.98-152.18-154.01a154.18 154.18 0 0 1 80.17-135.65.74.74 0 0 0 .32-1 .74.74 0 0 0 -1-.36 165.8 165.8 0 0 0 -92.57 147.94c-.47 91.56 73.93 166.5 165.49 166.67a165.86 165.86 0 0 0 153.18-230.02q16.81-12.84 34.07-25.08c5.86-4.17 11.72-8.34 17.62-12.45l8.84-6.12 2.22-1.53 1.11-.77 1-.69a24.54 24.54 0 0 1 4.32-2.22 16.07 16.07 0 0 1 4.59-1 20 20 0 0 1 4.83.25 19.11 19.11 0 0 1 4.56 1.57 41.91 41.91 0 0 1 4.42 2.67 42.24 42.24 0 0 0 4.83 2.89 14 14 0 0 0 5.84 1.46 12.62 12.62 0 0 0 1.56-.13 9.77 9.77 0 0 0 1.51-.2 14.31 14.31 0 0 0 2.86-.94 23.49 23.49 0 0 0 4.82-3.09c1.44-1.18 2.78-2.29 4.18-3.56a11.51 11.51 0 0 0 3.37-4.86 8.39 8.39 0 0 0 .37-3.1z"/>
+            </g>
+        </svg>
+    @endif
+
     @if($blocks)
-    <div>
-        @foreach($blocks as $block)
-            <div class="flex items-center justify-between space-x-4 space-y-4">
-                @foreach($block->items() as $item)
-                    {!! $block->render($item) !!}
-                @endforeach
-            </div>
-        @endforeach
-    </div>
+        <div>
+            @foreach($blocks as $block)
+                <div class="flex items-center justify-between space-x-4 space-y-4">
+                    @foreach($block->items() as $item)
+                        {!! $block->render($item) !!}
+                    @endforeach
+                </div>
+            @endforeach
+        </div>
     @endif
 @endsection
 

resources/views/fields/has-many.blade.php

@@ -2,5 +2,6 @@
     'field' => $field,
     'resource' => $resource,
     'item' => $item,
-    'model' => $field->formViewValue($item)->first() ?? $item->{$field->relation()}()->getRelated()
+    'model' => $field->formViewValue($item)->first() ?? $item->{$field->relation()}()->getRelated(),
+    'level' => $level ?? 0
 ])

resources/views/fields/has-one.blade.php

@@ -2,5 +2,6 @@
     'field' => $field,
     'resource' => $resource,
     'item' => $item,
-    'model' => $field->formViewValue($item) ?? $resource->getModel()
+    'model' => $field->formViewValue($item) ?? $resource->getModel(),
+    'level' => $level ?? 0
 ])

resources/views/fields/json.blade.php

@@ -2,5 +2,6 @@
     'field' => $field,
     'resource' => $resource,
     'item' => $item,
-    'model' => $resource->getModel()
+    'model' => $resource->getModel(),
+    'level' => $level ?? 0
 ])

resources/views/fields/shared/table-fields.blade.php

@@ -22,23 +22,23 @@
                     </thead>
 
                     <tbody class="bg-white dark:bg-darkblue text-black dark:text-white">
-                    <template x-for="(item, index) in items" :key="index"
+                    <template x-for="(item, index{{ $level }}) in items" :key="index{{ $level }}"
                     >
                         <tr :data-id="item.id" class="table_fields_{{ $field->id() }}">
                             @if(!method_exists($field, 'isRelationToOne') || !$field->isRelationToOne())
-                                <td class="px-6 py-4 whitespace-no-wrap" x-text="index + 1"></td>
+                                <td class="px-6 py-4 whitespace-no-wrap" x-text="index{{ $level }} + 1"></td>
                             @endif
 
                             @foreach($field->getFields() as $subField)
                                 <td class="px-6 py-4 whitespace-no-wrap">
-                                    {{ $resource->renderField($subField, $model) }}
+                                    {{ $resource->renderField($subField, $model, $level+1) }}
                                 </td>
                             @endforeach
 
                             @if(!method_exists($field, 'isRelationToOne') || !$field->isRelationToOne())
                                 <td class="px-6 py-4 whitespace-no-wrap">
                                     @if($field->isRemovable())
-                                        <button @click="removeField(index)" type="button" class="text-pink hover:text-pink inline-block">
+                                        <button @click="removeField(index{{ $level }})" type="button" class="text-pink hover:text-pink inline-block">
                                             @include("moonshine::shared.icons.delete", ["size" => 6, "color" => "pink", "class" => "mr-2"])
                                         </button>
                                     @endif

resources/views/shared/sidebar.blade.php

@@ -6,7 +6,7 @@ class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300
      transform bg-darkblue overflow-y-auto lg:translate-x-0 lg:static lg:inset-0 shadow-md"
 >
     <div class="m-6">
-        <a href="{{ route(config('moonshine.route.prefix') . '.index') }}" class="text-pink">
+        <a href="{{ route(config('moonshine.route.prefix') . '.index') }}" class="text-white">
             @if(config("moonshine.logo"))
                 <img class="rounded-full h-10 mb-3 mx-auto" src="{{ config("moonshine.logo") }}" alt="{{ config("moonshine.title") }}">
             @else

resources/views/shared/table.blade.php

@@ -1,18 +1,18 @@
 @if($values && $columns)
     <div class="flex flex-col mt-8">
         <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-            <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+            <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg">
                 <div>
                     <table class="min-w-full">
-                        <thead>
+                        <thead class="bg-whiteblue dark:bg-purple">
                             <tr>
                                 @foreach($columns as $name => $label)
-                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"> {{ $label }}</th>
+                                    <th class="px-6 py-3 text-left text-xs leading-4 font-medium uppercase tracking-wider"> {{ $label }}</th>
                                 @endforeach
                             </tr>
                         </thead>
 
-                        <tbody class="bg-white">
+                        <tbody class="bg-white dark:bg-darkblue text-black dark:text-white">
                             @foreach($values as $index => $data)
                                 <tr>
                                     @foreach($columns as $name => $label)

src/Contracts/Resources/ResourceContract.php

@@ -109,7 +109,7 @@ public function can(string $ability, Model $item = null): bool;
 
     public function renderDecoration(RenderableContract $decoration, Model $item);
 
-    public function renderField(RenderableContract $field, Model $item);
+    public function renderField(RenderableContract $field, Model $item, int $level = 0);
 
     public function renderFilter(RenderableContract $field, Model $item);
 

src/Dashboard/Dashboard.php

@@ -33,8 +33,8 @@ public function getAssets(string $type): array
     {
         $assets = ['js' => [], 'css' => []];
 
-        if($this->blocks) {
-            foreach ($this->blocks as $block) {
+        if($this->getBlocks()) {
+            foreach ($this->getBlocks() as $block) {
                 foreach ($block->items() as $item) {
                     $assets = array_merge_recursive($item->getAssets(), $assets);
                 }

src/Decorations/Decoration.php

@@ -4,6 +4,7 @@
 namespace Leeto\MoonShine\Decorations;
 
 use Leeto\MoonShine\Contracts\RenderableContract;
+use Leeto\MoonShine\Fields\Field;
 
 class Decoration implements RenderableContract
 {
@@ -31,7 +32,13 @@ public function fields(): array
 
     public function setFields(array $fields): static
     {
-        $this->fields = $fields;
+        $this->fields = [];
+
+        foreach ($fields as $field) {
+            if($field instanceof Field) {
+                $this->fields[] = $field->setParents();
+            }
+        }
 
         return $this;
     }

src/Fields/Field.php

@@ -9,6 +9,7 @@
 use Leeto\MoonShine\Traits\Fields\FormElementTrait;
 use Leeto\MoonShine\Traits\Fields\LinkTrait;
 use Leeto\MoonShine\Traits\Fields\ShowWhenTrait;
+use Leeto\MoonShine\Traits\Fields\WithFieldsTrait;
 use Leeto\MoonShine\Traits\Fields\WithHtmlAttributes;
 use Leeto\MoonShine\Traits\Fields\XModelTrait;
 
@@ -91,6 +92,28 @@ protected function setParent(Field $field): static
         return $this;
     }
 
+    public function setParents(): static
+    {
+        if($this->hasFields()) {
+            $fields = [];
+
+            foreach ($this->fields as $field) {
+                $field = $field->setParents();
+
+                $fields[] = $field->setParent($this);
+            }
+
+            $this->fields($fields);
+        }
+
+        return $this;
+    }
+
+    public function hasFields(): bool
+    {
+        return in_array(WithFieldsTrait::class, class_uses_recursive($this));
+    }
+
     public function hint(string $hint): static
     {
         $this->hint = $hint;

src/Fields/Json.php

@@ -5,12 +5,13 @@
 use Illuminate\Database\Eloquent\Model;
 use Leeto\MoonShine\Contracts\Fields\HasFieldsContract;
 use Leeto\MoonShine\Traits\Fields\WithFieldsTrait;
-use Throwable;
 
 class Json extends Field implements HasFieldsContract
 {
     use WithFieldsTrait;
 
+    protected bool $multiple = true;
+
     protected static string $view = 'json';
 
     public function indexViewValue(Model $item, bool $container = false): string

src/Resources/Resource.php

@@ -303,6 +303,20 @@ public function indexFields(): Collection
             ->filter(fn (RenderableContract $field) => $field instanceof Field && $field->showOnIndex);
     }
 
+    /**
+     * @return Collection
+     */
+    public function formComponents(): Collection
+    {
+        return collect($this->fields())->map(function ($component) {
+            if($component instanceof Field) {
+                return $component->setParents();
+            }
+
+            return $component;
+        });
+    }
+
     /**
      * @return Field[]
      */
@@ -503,9 +517,9 @@ public function save(Model $item): Model
         return $item;
     }
 
-    public function renderField(RenderableContract $field, Model $item): Factory|View|Application
+    public function renderField(RenderableContract $field, Model $item, int $level = 0): Factory|View|Application
     {
-        return $this->_render($field, $item);
+        return $this->_render($field, $item, $level);
     }
 
     public function renderFilter(RenderableContract $field, Model $item): Factory|View|Application
@@ -530,7 +544,7 @@ public function renderMetric(RenderableContract $metric): Factory|View|Applicati
         ]);
     }
 
-    protected function _render(RenderableContract $field, Model $item): Factory|View|Application
+    protected function _render(RenderableContract $field, Model $item, int $level = 0): Factory|View|Application
     {
         if ($field instanceof HasRelationshipContract) {
             $field->options($field->relatedOptions($item));
@@ -540,6 +554,7 @@ protected function _render(RenderableContract $field, Model $item): Factory|View
             'resource' => $this,
             'item' => $item,
             'field' => $field,
+            'level' => $level,
         ]);
     }