Merge pull request #1017 from DissNik/3.x

Refactoring IndexPage, ActionGroup and Flex, new component Div
moonshine-software · Jun 3, 2024 · e943f3d · e943f3d
2 parents 76f9513 + a34ec33
commit e943f3d
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 47 deletions.
diff --git a/resources/css/base/layout.css b/resources/css/base/layout.css
@@ -76,6 +76,10 @@
     @apply relative flex w-full grow flex-col rounded-2xl bg-slate-50 p-4 dark:bg-dark-700 md:p-6;
   }
 
+  &-metrics {
+    @apply mb-6 flex flex-col gap-x-6 gap-y-8 sm:grid sm:grid-cols-12 lg:gap-y-10;
+  }
+
   &-navigation {
     @apply relative flex items-center gap-x-4 border-b border-gray-200 pb-4 dark:border-dark-200;
   }

diff --git a/resources/views/components/action-group.blade.php b/resources/views/components/action-group.blade.php
@@ -1,26 +1,28 @@
 @props([
     'actions' => []
 ])
-<div {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-2']) }}>
-    @if($actions->inDropdown()->isNotEmpty())
-        <x-moonshine::dropdown>
-            <x-slot:toggler class="btn">
-                <x-moonshine::icon icon="ellipsis-vertical" />
-            </x-slot:toggler>
+@if(count($actions))
+    <div {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-2']) }}>
+        @if($actions->inDropdown()->isNotEmpty())
+            <x-moonshine::dropdown>
+                <x-slot:toggler class="btn">
+                    <x-moonshine::icon icon="ellipsis-vertical" />
+                </x-slot:toggler>
 
-            <ul class="dropdown-menu">
-                @foreach($actions->inDropdown() as $index => $action)
-                    <li class="dropdown-menu-item">
-                        {!! $action->render() !!}
-                    </li>
-                @endforeach
-            </ul>
-        </x-moonshine::dropdown>
-    @endif
+                <ul class="dropdown-menu">
+                    @foreach($actions->inDropdown() as $index => $action)
+                        <li class="dropdown-menu-item">
+                            {!! $action->render() !!}
+                        </li>
+                    @endforeach
+                </ul>
+            </x-moonshine::dropdown>
+        @endif
 
-    @if($actions->inLine()->isNotEmpty())
-        @foreach($actions->inLine() as $index => $action)
-            {!! $action->render() !!}
-        @endforeach
-    @endif
-</div>
+        @if($actions->inLine()->isNotEmpty())
+            @foreach($actions->inLine() as $index => $action)
+                {!! $action->render() !!}
+            @endforeach
+        @endif
+    </div>
+@endif
diff --git a/resources/views/components/layout/div.blade.php b/resources/views/components/layout/div.blade.php
@@ -0,0 +1,10 @@
+@props([
+    'components' => [],
+])
+<div {{ $attributes }} >
+    <x-moonshine::components
+        :components="$components"
+    />
+
+    {{ $slot ?? '' }}
+</div>
diff --git a/resources/views/components/layout/flex.blade.php b/resources/views/components/layout/flex.blade.php
@@ -7,7 +7,7 @@
 <div
     {{ $attributes
         ->class([
-            'sm:flex',
+            'flex flex-col sm:flex-row',
             'gap-4' => !$isWithoutSpace,
             'items-' . $itemsAlign,
             'justify-' . $justifyAlign

diff --git a/src/Laravel/Pages/Crud/IndexPage.php b/src/Laravel/Pages/Crud/IndexPage.php
@@ -17,8 +17,7 @@
 use MoonShine\UI\Components\ActionGroup;
 use MoonShine\UI\Components\FormBuilder;
 use MoonShine\UI\Components\Layout\Block;
-use MoonShine\UI\Components\Layout\Column;
-use MoonShine\UI\Components\Layout\Grid;
+use MoonShine\UI\Components\Layout\Flex;
 use MoonShine\UI\Components\Layout\LineBreak;
 use MoonShine\UI\Components\MoonShineComponent;
 use MoonShine\UI\Components\TableBuilder;
@@ -107,7 +106,7 @@ protected function getMetrics(): ?MoonShineComponent
         return $metrics
             ? Block::make($metrics)
                 ->customAttributes([
-                    'class' => 'flex flex-col gap-y-8 gap-x-6 sm:grid sm:grid-cols-12 lg:gap-y-10 mb-6',
+                    'class' => 'layout-metrics',
                 ])
             : null;
     }
@@ -118,30 +117,28 @@ protected function getMetrics(): ?MoonShineComponent
     protected function getPageButtons(): array
     {
         return [
-            Grid::make([
-                Column::make([
-                    ActionGroup::make([
-                        $this->getResource()->getCreateButton(
-                            isAsync: $this->getResource()->isAsync()
-                        ),
-                        ...$this->getResource()->actions(),
-                    ]),
-
-                    ActionGroup::make()->when(
-                        $this->getResource()->filters() !== [],
-                        fn (ActionGroup $group): ActionGroup => $group->add(
-                            FiltersButton::for($this->getResource())
-                        )
-                    )->when(
-                        $this->getResource()->getHandlers()->isNotEmpty(),
-                        fn (ActionGroup $group): ActionGroup => $group->addMany(
-                            $this->getResource()->getHandlers()->getButtons()
-                        )
+            Flex::make([
+                ActionGroup::make([
+                    $this->getResource()->getCreateButton(
+                        isAsync: $this->getResource()->isAsync()
                     ),
-                ])->customAttributes([
-                    'class' => 'flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap',
+                    ...$this->getResource()->actions(),
                 ]),
-            ]),
+
+                ActionGroup::make()->when(
+                    $this->getResource()->filters() !== [],
+                    fn(ActionGroup $group): ActionGroup => $group->add(
+                        FiltersButton::for($this->getResource())
+                    )
+                )->when(
+                    $this->getResource()->getHandlers()->isNotEmpty(),
+                    fn(ActionGroup $group): ActionGroup => $group->addMany(
+                        $this->getResource()->getHandlers()->getButtons()
+                    )
+                ),
+            ])
+                ->justifyAlign('between')
+                ->itemsAlign('start'),
             LineBreak::make(),
         ];
     }

diff --git a/src/UI/Components/Layout/Div.php b/src/UI/Components/Layout/Div.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MoonShine\UI\Components\Layout;
+
+use MoonShine\UI\Components\AbstractWithComponents;
+
+/**
+ * @method static static make(iterable $components = [])
+ */
+class Div extends AbstractWithComponents
+{
+    protected string $view = 'moonshine::components.layout.div';
+
+}