chore: update Filament table column for displaying image galleries with options for stacking, limits, and styling.

resources/views/columns/image-column-gallery.blade.php

@@ -14,7 +14,7 @@
     $isCircular = $isCircular();
     $isSquare = $isSquare();
     $isStacked = $isStacked();
-    $overlap = $isStacked ? $getOverlap() ?? 2 : null;
+    $overlap = $isStacked ? $getOverlap() ?? 2 : 0;
 
     $defaultWidth = $getWidth();
     $defaultHeight = $getHeight();
@@ -23,38 +23,30 @@
     $defaultHeight = $defaultHeight ? (is_numeric($defaultHeight) ? $defaultHeight . 'px' : $defaultHeight) : '40px';
 
     $galleryId = 'gallery-' . str_replace(['{', '}', '-'], '', (string) \Illuminate\Support\Str::uuid());
+
+    // Calculate margin for stacked images using inline styles (Tailwind-safe)
+    // Each unit = 0.25rem (4px)
+    $stackedMarginValue = $overlap * 0.25;
+    $stackedMargin = $isStacked && $overlap > 0 ? "-{$stackedMarginValue}rem" : '0';
 @endphp
 
 <div id="{{ $galleryId }}"
-    {{ $attributes->merge($getExtraAttributes(), escape: false)->class([
+    {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['fi-ta-image', 'flex items-center', 'gap-1.5' => !$isStacked]) }}
-        'fi-ta-image',
-        'flex items-center',
-        match ($overlap) {
-            1 => '-space-x-1 rtl:space-x-reverse',
-            2 => '-space-x-2 rtl:space-x-reverse',
-            3 => '-space-x-3 rtl:space-x-reverse',
-            4 => '-space-x-4 rtl:space-x-reverse',
-            5 => '-space-x-5 rtl:space-x-reverse',
-            6 => '-space-x-6 rtl:space-x-reverse',
-            7 => '-space-x-7 rtl:space-x-reverse',
-            8 => '-space-x-8 rtl:space-x-reverse',
-            default => 'gap-1.5',
-        },
-    ]) }}
     data-viewer-gallery wire:ignore.self>
-    @foreach ($limitedState as $stateItem)
+    @foreach ($limitedState as $index => $stateItem)
         <img src="{{ $getImageUrl($stateItem) }}"
             style="
                 height: {{ $defaultHeight }};
                 width: {{ $defaultWidth }};
                 cursor: pointer;
+                @if ($isStacked && $index > 0) margin-inline-start: {{ $stackedMargin }}; @endif
             "
             {{ $getExtraImgAttributeBag()->class([
-                'max-w-none object-cover object-center curor',
+                'max-w-none object-cover object-center',
                 'rounded-full' => $isCircular,
                 'rounded-lg' => $isSquare,
                 'ring-white dark:ring-gray-900' => $isStacked,
-                'ring-2' => $isStacked && ($overlap === null || $overlap > 0),
+                'ring-2' => $isStacked && $overlap > 0,
             ]) }} />
     @endforeach
 
@@ -64,6 +56,7 @@
                 min-width: {{ $defaultWidth }};
                 height: {{ $defaultHeight }};
                 width: {{ $defaultWidth }};
+                @if ($isStacked) margin-inline-start: {{ $stackedMargin }}; @endif
             "
             @class(['flex items-center justify-center font-medium text-gray-500'])>
             <span class="-ms-0.5 text-xs">

resources/views/columns/image-gallery.blade.php

@@ -37,12 +37,10 @@
         $borderColorClass = '';
     }
 
-    // Stacked spacing - use dynamic -space-x value
+    // Calculate stacked margin using inline styles (Tailwind-safe)
-    if ($isStacked) {
+    // Each unit = 0.25rem (4px)
-        $stackedClass = "-space-x-{$stackedOverlap} rtl:space-x-reverse";
+    $stackedMarginValue = $stackedOverlap * 0.25;
-    } else {
+    $stackedMargin = $isStacked && $stackedOverlap > 0 ? "-{$stackedMarginValue}rem" : '0';
-        $stackedClass = 'gap-1';
-    }
 
     // Size styles - only add if width/height specified
     $sizeStyle = '';
@@ -54,16 +52,18 @@
     }
 @endphp
 
-<div id="{{ $galleryId }}" class="flex items-center {{ $stackedClass }}" data-viewer-gallery wire:ignore.self>
+<div id="{{ $galleryId }}" class="flex items-center {{ $isStacked ? '' : 'gap-1' }}" data-viewer-gallery
-    @foreach ($visibleUrls as $src)
+    wire:ignore.self>
+    @foreach ($visibleUrls as $index => $src)
         <img src="{{ $src }}" loading="lazy"
             class="object-cover {{ $borderColorClass }} {{ $borderRadiusClass }} hover:scale-110 transition cursor-pointer"
-            style="{{ $sizeStyle }} {{ $ringStyle }}" alt="image" />
+            style="{{ $sizeStyle }} {{ $ringStyle }} @if ($isStacked && $index > 0) margin-inline-start: {{ $stackedMargin }}; @endif"
+            alt="image" />
     @endforeach
 
     @if ($shouldShowRemainingText() && $remaining > 0 && $width)
         <span class="flex items-center justify-center text-xs font-medium text-gray-600 dark:text-gray-200"
-            style="width: {{ $width }}px; height: {{ $height ?? $width }}px; min-width: {{ $width }}px;">
+            style="width: {{ $width }}px; height: {{ $height ?? $width }}px; min-width: {{ $width }}px; @if ($isStacked) margin-inline-start: {{ $stackedMargin }}; @endif">
             +{{ $remaining }}
         </span>
     @endif

src/Tables/Columns/ImageGalleryColumn.php

@@ -12,7 +12,7 @@ class ImageGalleryColumn extends Column
 
     protected int | Closure | null $thumbWidth = null;
 
-    protected int | Closure | null $thumbHeight = null;
+    protected int | Closure | null $thumbHeight = 40;
 
     protected int | Closure | null $limit = 3;