feat: added vertical and responsive clusters support

Signed-off-by: Lukas Frey <mail@lukasfrey.cz>

README.md

@@ -15,6 +15,8 @@ Functionality wise it is similar to the `Group` component except that the fields
 
 ![Screenshot 01](docs/images/screenshot_01.jpg)
 
+![Screenshot 02](docs/images/screenshot_02.png)
+
 ## Support us
 
 Your support is key to the continual advancement of our plugin. We appreciate every user who has contributed to our journey so far.
@@ -78,6 +80,27 @@ Cluster::make([
 ])->columns(5);
 ```
 
+#### Vertical Clusters
+To create a vertical clusters, you simply need set the columns of the Cluster to 1:
+
+```php
+Cluster::make([
+    // Schema
+])->columns(1);
+```
+
+#### Different Breakpoints
+The breakpoints use the same system as Filament`s columns, so you can customize each breakpoint by passing in an array:
+
+```php
+Cluster::make([
+    // Schema
+])->columns([
+    'default' => 1,
+    'lg' => 3,
+]);
+```
+
 ## Contributing
 
 Please see [CONTRIBUTING](./.github/CONTRIBUTING.md) for details.

resources/css/plugin.css

@@ -1,44 +1,42 @@
 @import '../../vendor/filament/filament/resources/css/theme.css';
 
-.guava-fi-cl-cluster {
-    &:focus-within {
-        @apply !ring-1 !ring-gray-950/10 dark:!ring-white/20;
+@layer base {
+    .guava-fi-cl-cluster.vertical > div > .fi-fo-component-ctn > div:not(:last-child) {
+        @apply !border-e-0 !border-b;
     }
 
-    & .fi-input-wrp {
-        @apply !bg-transparent;
+    .guava-fi-cl-cluster.horizontal > div > .fi-fo-component-ctn > div:not(:last-child) {
+        @apply !border-b-0 !border-e;
     }
 
-    & .fi-input-wrp:not(.ring-danger-600):not(.dark\:ring-danger-500) {
-        @apply !ring-0;
+    .guava-fi-cl-cluster .fi-fo-component-ctn > div {
+        @apply !border-gray-200 !pe-0 dark:!border-white/10;
     }
 
-    & .fi-fo-component-ctn {
-        @apply !gap-0;
-
-        .fi-input-wrp {
-            @apply !shadow-none;
-        }
-        /*.fi-input-wrp,*/
-        .fi-input-wrp:focus-within {
-            @apply !ring-2;
+    .guava-fi-cl-cluster {
+        &:focus-within {
+            @apply !ring-1 !ring-gray-950/10 dark:!ring-white/20;
         }
 
-        & > div:not(:last-child) {
-            @apply !border-e !border-gray-200 !pe-0 dark:!border-white/10;
+        & .fi-input-wrp {
+            @apply !bg-transparent;
         }
 
-
-        & > div:not(:first-child):not(:last-child) .fi-input-wrp {
-            @apply rounded-none;
+        & .fi-input-wrp:not(.ring-danger-600):not(.dark\:ring-danger-500) {
+            @apply !ring-0;
         }
 
-        & > div:first-child .fi-input-wrp {
-            @apply rounded-r-none;
-        }
+        & .fi-fo-component-ctn {
+            @apply !gap-0;
+
+            .fi-input-wrp {
+                @apply !shadow-none;
+            }
 
-        & > div:last-child .fi-input-wrp {
-            @apply rounded-l-none;
+            .fi-input-wrp:not(.guava-fi-cl-cluster):focus-within {
+                @apply !ring-2;
+            }
         }
     }
+
 }

resources/views/cluster.blade.php

@@ -3,7 +3,10 @@
     :field="$field"
 >
     <x-filament::input.wrapper
-        class="guava-fi-cl-cluster"
+        @class([
+            "guava-fi-cl-cluster",
+            ...$field->getResponsiveClasses(),
+        ])
     >
         {{ $getChildComponentContainer() }}
     </x-filament::input.wrapper>

src/Forms/Cluster.php

@@ -30,38 +30,54 @@ public function __construct(string $name)
 
     protected string $view = 'filament-clusters::cluster';
 
+    public function getResponsiveClasses(): array
+    {
+        $columns = $this->getColumnsConfig();
+
+        return [
+            "vertical" => data_get($columns, 'default', 1) === 1,
+            "horizontal" => data_get($columns, 'default', 1) > 1,
+            "sm:vertical" => data_get($columns, 'sm') === 1,
+            "sm:horizontal" => data_get($columns, 'sm') > 1,
+            "md:vertical" => data_get($columns, 'md') === 1,
+            "md:horizontal" => data_get($columns, 'md') > 1,
+            "lg:vertical" => data_get($columns, 'lg') === 1,
+            "lg:horizontal" => data_get($columns, 'lg') > 1,
+            "xl:vertical" => data_get($columns, 'xl') === 1,
+            "xl:horizontal" => data_get($columns, 'xl') > 1,
+            "2xl:vertical" => data_get($columns, '2xl') === 1,
+            "2xl:horizontal" => data_get($columns, '2xl') > 1,
+        ];
+    }
+
     public function getChildComponents(): array
     {
         return Arr::map(
             parent::getChildComponents(),
             function (Component $component) {
                 return $component
-                    ->fieldWrapperView('filament-clusters::field-wrapper')
-                ;
+                    ->fieldWrapperView('filament-clusters::field-wrapper');
             }
         );
     }
 
     public static function make(array $schema = []): static
     {
-
         $component = app(static::class, [
             'name' => 'cluster',
         ])
             ->when(
-                ! empty($schema),
-                fn (Component $component) => $component->schema($schema)
+                !empty($schema),
+                fn(Component $component) => $component->schema($schema)
             )
             ->required(
-                fn (Cluster $component) => Arr::first(
-                    $component->getChildComponents(),
-                    fn (Component $component) => $component instanceof Field && $component->isRequired()
-                ) !== null
-            )
-        ;
+                fn(Cluster $component) => Arr::first(
+                        $component->getChildComponents(),
+                        fn(Component $component) => $component instanceof Field && $component->isRequired()
+                    ) !== null
+            );
 
         return $component
-            ->columns(count($component->getChildComponents()))
-        ;
+            ->columns(count($component->getChildComponents()));
     }
 }

tailwind.config.js

@@ -3,8 +3,8 @@ const preset = require('./vendor/filament/filament/tailwind.config.preset')
 module.exports = {
     presets: [preset],
     content: [
-        './app/Filament/**/*.php',
-        './resources/views/filament/**/*.blade.php',
+        './src/**/*.php',
+        './resources/views/**/*.blade.php',
         './vendor/filament/**/*.blade.php',
     ],
 }