Refactor grid/grid col generation

2026-09-24 15:42:09 +08:00 · 2024-10-15 15:22:40 +01:00
parent fd4a4c5265
commit d0d6d72f77
15 changed files with 321 additions and 84 deletions
@@ -0,0 +1,103 @@
+.fi-grid {
+    &:not(.fi-grid-direction-col) {
+        @apply grid grid-cols-[--cols-default];
+
+        &.sm\:fi-grid-cols {
+            @apply sm:grid-cols-[--cols-sm];
+        }
+
+        &.md\:fi-grid-cols {
+            @apply md:grid-cols-[--cols-md];
+        }
+
+        &.lg\:fi-grid-cols {
+            @apply lg:grid-cols-[--cols-lg];
+        }
+
+        &.xl\:fi-grid-cols {
+            @apply xl:grid-cols-[--cols-xl];
+        }
+
+        &.\32xl\:fi-grid-cols {
+            @apply 2xl:grid-cols-[--cols-2xl];
+        }
+    }
+
+    &.fi-grid-direction-col {
+        @apply columns-[--cols-default];
+
+        &.sm\:fi-grid-cols {
+            @apply sm:columns-[--cols-sm];
+        }
+
+        &.md\:fi-grid-cols {
+            @apply md:columns-[--cols-md];
+        }
+
+        &.lg\:fi-grid-cols {
+            @apply lg:columns-[--cols-lg];
+        }
+
+        &.xl\:fi-grid-cols {
+            @apply xl:columns-[--cols-xl];
+        }
+
+        &.\32xl\:fi-grid-cols {
+            @apply 2xl:columns-[--cols-2xl];
+        }
+    }
+
+    & .fi-grid-col {
+        &:not(.fi-hidden) {
+            @apply col-[--col-span-default];
+
+            &.sm\:fi-grid-col-span {
+                @apply sm:col-[--col-span-sm];
+            }
+
+            &.md\:fi-grid-col-span {
+                @apply md:col-[--col-span-md];
+            }
+
+            &.lg\:fi-grid-col-span {
+                @apply lg:col-[--col-span-lg];
+            }
+
+            &.xl\:fi-grid-col-span {
+                @apply xl:col-[--col-span-xl];
+            }
+
+            &.\32xl\:fi-grid-col-span {
+                @apply 2xl:col-[--col-span-2xl];
+            }
+
+            &.fi-grid-col-start {
+                @apply col-start-[--col-start-default];
+            }
+
+            &.sm\:fi-grid-col-start {
+                @apply sm:col-start-[--col-start-sm];
+            }
+
+            &.md\:fi-grid-col-start {
+                @apply md:col-start-[--col-start-md];
+            }
+
+            &.lg\:fi-grid-col-start {
+                @apply lg:col-start-[--col-start-lg];
+            }
+
+            &.xl\:fi-grid-col-start {
+                @apply xl:col-start-[--col-start-xl];
+            }
+
+            &.\32xl\:fi-grid-col-start {
+                @apply 2xl:col-start-[--col-start-2xl];
+            }
+        }
+
+        &.fi-hidden {
+            @apply hidden;
+        }
+    }
+}
@@ -0,0 +1,49 @@
+.fi-ta-grid {
+    &.fi-gap-sm {
+        @apply gap-1;
+    }
+
+    &.sm\:fi-gap-sm {
+        @apply sm:gap-1;
+    }
+
+    &.md\:fi-gap-sm {
+        @apply md:gap-1;
+    }
+
+    &.lg\:fi-gap-sm {
+        @apply lg:gap-1;
+    }
+
+    &.xl\:fi-gap-sm {
+        @apply xl:gap-1;
+    }
+
+    &.\32xl\:fi-gap-sm {
+        @apply 2xl:gap-1;
+    }
+
+    &.fi-gap-lg {
+        @apply gap-3;
+    }
+
+    &.sm\:fi-gap-lg {
+        @apply sm:gap-3;
+    }
+
+    &.md\:fi-gap-lg {
+        @apply md:gap-3;
+    }
+
+    &.lg\:fi-gap-lg {
+        @apply lg:gap-3;
+    }
+
+    &.xl\:fi-gap-lg {
+        @apply xl:gap-3;
+    }
+
+    &.\32xl\:fi-gap-lg {
+        @apply 2xl:gap-3;
+    }
+}
@@ -0,0 +1,3 @@
+.fi-ta-panel {
+    @apply rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
+}
@@ -281,7 +281,7 @@
            & .fi-ta-record-collapse-btn {
                @apply mx-1 my-2 shrink-0;

-                &:is(.fi-ta-record.fi-collapsed .fi-ta-record-collapse-btn) {
+                &:is(.fi-ta-record.fi-ta-record-collapsed .fi-ta-record-collapse-btn) {
                    @apply rotate-180;
                }
            }
@@ -7,6 +7,7 @@ import Tooltip from '@ryangjchandler/alpine-tooltip'
 import '../css/components/badge.css'
 import '../css/components/button.css'
 import '../css/components/button-group.css'
+import '../css/components/grid.css'
 import '../css/components/icon-button.css'
 import '../css/components/input/checkbox.css'
 import '../css/components/link.css'
@@ -18,6 +19,8 @@ import '../css/components/tables/columns/color.css'
 import '../css/components/tables/columns/icon.css'
 import '../css/components/tables/columns/image.css'
 import '../css/components/tables/columns/text.css'
+import '../css/components/tables/columns/layout/grid.css'
+import '../css/components/tables/columns/layout/panel.css'
 import '../css/components/tables/container.css'
 import '../css/components/tables/content.css'
 import '../css/components/tables/empty-state.css'
@@ -0,0 +1,10 @@
+<?php
+
+namespace Filament\Support\Enums;
+
+enum GridDirection: string
+{
+    case Row = 'row';
+
+    case Column = 'column';
+}
@@ -16,6 +16,7 @@ use Filament\Support\Commands\OptimizeCommand;
 use Filament\Support\Commands\UpgradeCommand;
 use Filament\Support\Components\ComponentManager;
 use Filament\Support\Components\Contracts\ScopedComponentManager;
+use Filament\Support\Enums\GridDirection;
 use Filament\Support\Facades\FilamentAsset;
 use Filament\Support\Icons\IconManager;
 use Filament\Support\Overrides\DataStoreOverride;
@@ -26,6 +27,7 @@ use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Str;
 use Illuminate\Support\Stringable;
+use Illuminate\View\ComponentAttributeBag;
 use Laravel\Octane\Events\RequestReceived;
 use Livewire\Livewire;
 use Livewire\Mechanisms\DataStore;
@@ -146,6 +148,75 @@ class SupportServiceProvider extends PackageServiceProvider
            return preg_replace('/\s*@trim\s*/m', '', $view);
        });

+        ComponentAttributeBag::macro('grid', function (array $columns = [], GridDirection $direction = GridDirection::Row): ComponentAttributeBag {
+            $columns = array_filter($columns);
+
+            $columns['default'] ??= 1;
+
+            return $this
+                ->class([
+                    'fi-grid',
+                    'fi-grid-direction-col' => $direction === GridDirection::Column,
+                    ...array_map(
+                        fn (string $breakpoint): string => match ($breakpoint) {
+                            'default' => '',
+                            default => "{$breakpoint}:fi-grid-cols",
+                        },
+                        array_keys($columns),
+                    ),
+                ])
+                ->style(array_map(
+                    fn (string $breakpoint, int $columns): string => match ($direction) {
+                        GridDirection::Row => "--cols-{$breakpoint}: repeat({$columns}, minmax(0, 1fr))",
+                        GridDirection::Column => "--cols-{$breakpoint}: {$columns}",
+                    },
+                    array_keys($columns),
+                    array_values($columns),
+                ));
+        });
+
+        ComponentAttributeBag::macro('gridColumn', function (array $span = [], array $start = [], bool $isHidden = false): ComponentAttributeBag {
+            $span = array_filter($span);
+            $start = array_filter($start);
+
+            $span['default'] ??= 1;
+
+            return $this
+                ->class([
+                    'fi-grid-col',
+                    'fi-hidden' => $isHidden || ($span['default'] === 'hidden'),
+                    ...array_map(
+                        fn (string $breakpoint): string => match ($breakpoint) {
+                            'default' => '',
+                            default => "{$breakpoint}:fi-grid-col-span",
+                        },
+                        array_keys($span),
+                    ),
+                    ...array_map(
+                        fn (string $breakpoint): string => match ($breakpoint) {
+                            'default' => 'fi-grid-col-start',
+                            default => "{$breakpoint}:fi-grid-col-start",
+                        },
+                        array_keys($start),
+                    ),
+                ])
+                ->style([
+                    ...array_map(
+                        fn (string $breakpoint, int | string $span): string => "--col-span-{$breakpoint}: " . match ($span) {
+                            'full' => '1 / -1',
+                            default => "span {$span} / span {$span}",
+                        },
+                        array_keys($span),
+                        array_values($span),
+                    ),
+                    ...array_map(
+                        fn (string $breakpoint, int $start): string => "--col-start-{$breakpoint}: {$start}",
+                        array_keys($start),
+                        array_values($start),
+                    ),
+                ]);
+        });
+
        Str::macro('sanitizeHtml', function (string $html): string {
            return app(HtmlSanitizerInterface::class)->sanitize($html);
        });
@@ -1,29 +1,23 @@
-@php
-    $columns = $getGridColumns();
-@endphp
-
-<div {{ $attributes->merge($getExtraAttributes(), escape: false) }}>
-    <x-filament::grid
-        :default="$columns['default'] ?? 1"
-        :sm="$columns['sm'] ?? null"
-        :md="$columns['md'] ?? null"
-        :lg="$columns['lg'] ?? null"
-        :xl="$columns['xl'] ?? null"
-        :two-xl="$columns['2xl'] ?? null"
-        @class([
-            (($columns['default'] ?? 1) === 1) ? 'gap-1' : 'gap-3',
-            ($columns['sm'] ?? null) ? (($columns['sm'] === 1) ? 'sm:gap-1' : 'sm:gap-3') : null,
-            ($columns['md'] ?? null) ? (($columns['md'] === 1) ? 'md:gap-1' : 'md:gap-3') : null,
-            ($columns['lg'] ?? null) ? (($columns['lg'] === 1) ? 'lg:gap-1' : 'lg:gap-3') : null,
-            ($columns['xl'] ?? null) ? (($columns['xl'] === 1) ? 'xl:gap-1' : 'xl:gap-3') : null,
-            ($columns['2xl'] ?? null) ? (($columns['2xl'] === 1) ? '2xl:gap-1' : '2xl:gap-3') : null,
-        ])
-    >
-        <x-filament-tables::columns.layout
-            :components="$getComponents()"
-            grid
-            :record="$getRecord()"
-            :record-key="$getRecordKey()"
-        />
-    </x-filament::grid>
+<div
+    {{
+        $attributes
+            ->merge($getExtraAttributes(), escape: false)
+            ->grid($columns = $getGridColumns())
+            ->class([
+                'fi-ta-grid',
+                (($columns['default'] ?? 1) === 1) ? 'fi-gap-sm' : 'fi-gap-lg',
+                ($columns['sm'] ?? null) ? (($columns['sm'] === 1) ? 'sm:fi-gap-sm' : 'sm:fi-gap-lg') : null,
+                ($columns['md'] ?? null) ? (($columns['md'] === 1) ? 'md:fi-gap-sm' : 'md:fi-gap-lg') : null,
+                ($columns['lg'] ?? null) ? (($columns['lg'] === 1) ? 'lg:fi-gap-sm' : 'lg:fi-gap-lg') : null,
+                ($columns['xl'] ?? null) ? (($columns['xl'] === 1) ? 'xl:fi-gap-sm' : 'xl:fi-gap-lg') : null,
+                ($columns['2xl'] ?? null) ? (($columns['2xl'] === 1) ? '2xl:fi-gap-sm' : '2xl:fi-gap-lg') : null,
+            ])
+    }}
+>
+    <x-filament-tables::columns.layout
+        :components="$getComponents()"
+        grid
+        :record="$getRecord()"
+        :record-key="$getRecordKey()"
+    />
 </div>
@@ -2,7 +2,7 @@
    {{
        $attributes
            ->merge($getExtraAttributes(), escape: false)
-            ->class(['fi-ta-panel rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-950/5 dark:bg-white/5 dark:ring-white/10'])
+            ->class(['fi-ta-panel'])
    }}
 >
    <x-filament-tables::columns.layout
@@ -1,3 +1,7 @@
+@php
+    use Illuminate\View\ComponentAttributeBag;
+@endphp
+
@props([
    'components',
    'record',
@@ -13,24 +17,19 @@
    @endphp

    @if ($layoutComponent->isVisible())
-        <x-filament::grid.column
-            :default="$layoutComponent->getColumnSpan('default')"
-            :sm="$layoutComponent->getColumnSpan('sm')"
-            :md="$layoutComponent->getColumnSpan('md')"
-            :lg="$layoutComponent->getColumnSpan('lg')"
-            :xl="$layoutComponent->getColumnSpan('xl')"
-            :twoXl="$layoutComponent->getColumnSpan('2xl')"
-            :defaultStart="$layoutComponent->getColumnStart('default')"
-            :smStart="$layoutComponent->getColumnStart('sm')"
-            :mdStart="$layoutComponent->getColumnStart('md')"
-            :lgStart="$layoutComponent->getColumnStart('lg')"
-            :xlStart="$layoutComponent->getColumnStart('xl')"
-            :twoXlStart="$layoutComponent->getColumnStart('2xl')"
-            @class([
-                'fi-growable' => $layoutComponent->canGrow(),
-                (filled($layoutComponentHiddenFrom = $layoutComponent->getHiddenFrom()) ? "{$layoutComponentHiddenFrom}:fi-hidden" : ''),
-                (filled($layoutComponentVisibleFrom = $layoutComponent->getVisibleFrom()) ? "{$layoutComponentVisibleFrom}:fi-visible" : ''),
-            ])
+        <div
+            {{
+                (new ComponentAttributeBag)
+                    ->gridColumn(
+                        $layoutComponent->getColumnSpan(),
+                        $layoutComponent->getColumnStart(),
+                    )
+                    ->class([
+                        'fi-growable' => $layoutComponent->canGrow(),
+                        (filled($layoutComponentHiddenFrom = $layoutComponent->getHiddenFrom()) ? "{$layoutComponentHiddenFrom}:fi-hidden" : ''),
+                        (filled($layoutComponentVisibleFrom = $layoutComponent->getVisibleFrom()) ? "{$layoutComponentVisibleFrom}:fi-visible" : ''),
+                    ])
+            }}
        >
            @if ($layoutComponent instanceof \Filament\Tables\Columns\Column)
                @php
@@ -81,6 +80,6 @@
            @else
                {{ $layoutComponent }}
            @endif
-        </x-filament::grid.column>
+        </div>
    @endif
@endforeach
@@ -9,6 +9,7 @@
    use Filament\Tables\Enums\FiltersLayout;
    use Filament\Tables\Enums\RecordCheckboxPosition;
    use Illuminate\Support\Str;
+    use Illuminate\View\ComponentAttributeBag;

    $actions = $getActions();
    $actionsAlignment = $getActionsAlignment();
@@ -691,21 +692,26 @@
                @if ($content)
                    {{ $content->with(['records' => $records]) }}
                @else
-                    <x-filament::grid
-                        :default="$contentGrid['default'] ?? 1"
-                        :sm="$contentGrid['sm'] ?? null"
-                        :md="$contentGrid['md'] ?? null"
-                        :lg="$contentGrid['lg'] ?? null"
-                        :xl="$contentGrid['xl'] ?? null"
-                        :two-xl="$contentGrid['2xl'] ?? null"
-                        x-on:end.stop="$wire.reorderTable($event.target.sortable.toArray(), $event.item.getAttribute('x-sortable-item'))"
-                        x-sortable
-                        :data-sortable-animation-duration="$getReorderAnimationDuration()"
-                        @class([
-                            'fi-ta-content',
-                            'fi-ta-content-grid' => $contentGrid,
-                            'fi-ta-content-grouped' => $this->getTableGrouping(),
-                        ])
+                    <div
+                        @if ($isReorderable)
+                            x-on:end.stop="
+                                $wire.reorderTable(
+                                    $event.target.sortable.toArray(),
+                                    $event.item.getAttribute('x-sortable-item'),
+                                )
+                            "
+                            x-sortable
+                            data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
+                        @endif
+                        {{
+                            (new ComponentAttributeBag)
+                                ->when($contentGrid, fn (ComponentAttributeBag $attributes) => $attributes->grid($contentGrid))
+                                ->class([
+                                    'fi-ta-content',
+                                    'fi-ta-content-grid' => $contentGrid,
+                                    'fi-ta-content-grouped' => $this->getTableGrouping(),
+                                ])
+                        }}
                    >
                        @php
                            $previousRecord = null;
@@ -847,7 +853,7 @@
                                    x-init="$dispatch('collapsible-table-row-initialized')"
                                    x-on:collapse-all-table-rows.window="isCollapsed = true"
                                    x-on:expand-all-table-rows.window="isCollapsed = false"
-                                    x-bind:class="isCollapsed && 'fi-collapsed'"
+                                    x-bind:class="isCollapsed && 'fi-ta-record-collapsed'"
                                @endif
                                wire:key="{{ $this->getId() }}.table.records.{{ $recordKey }}"
                                @if ($isReordering)
@@ -996,7 +1002,7 @@
                                </tbody>
                            </table>
                        @endif
-                    </x-filament::grid>
+                    </div>
                @endif

                @if (($content || $hasColumnsLayout) && $contentFooter)
@@ -1626,10 +1632,11 @@
                                            >
                                                <{{ $columnWrapperTag }}
                                                    @if (filled($columnTooltip = $column->getTooltip()))
-                                                        x-tooltip="{
-                                                            content: @js($columnTooltip),
-                                                            theme: $store.theme,
-                                                        }"
+                                                        x-tooltip
+                                                        ="{
+                                                                                                                                                    content: @js($columnTooltip),
+                                                                                                                                                    theme: $store.theme,
+                                                                                                                                                    }"
                                                    @endif
                                                    @if ($columnWrapperTag === 'a')
                                                        {{ \Filament\Support\generate_href_html($columnUrl ?: $recordUrl, $columnUrl ? $column->shouldOpenUrlInNewTab() : $openRecordUrlInNewTab) }}
@@ -1768,12 +1775,8 @@
                {{ $emptyState }}
            @else
                <div class="fi-ta-empty-state">
-                    <div
-                        class="fi-ta-empty-state-content"
-                    >
-                        <div
-                            class="fi-ta-empty-state-icon-ctn"
-                        >
+                    <div class="fi-ta-empty-state-content">
+                        <div class="fi-ta-empty-state-icon-ctn">
                            {{ \Filament\Support\generate_icon_html($getEmptyStateIcon()) }}
                        </div>

@@ -1788,10 +1791,12 @@
                        @endif

                        @if ($emptyStateActions = array_filter(
-                            $getEmptyStateActions(),
-                            fn (\Filament\Actions\Action | \Filament\Actions\ActionGroup $action): bool => $action->isVisible(),
-                        ))
-                            <div class="fi-ta-actions fi-align-center fi-wrapped">
+                                 $getEmptyStateActions(),
+                                 fn (\Filament\Actions\Action | \Filament\Actions\ActionGroup $action): bool => $action->isVisible(),
+                             ))
+                            <div
+                                class="fi-ta-actions fi-align-center fi-wrapped"
+                            >
                                @foreach ($emptyStateActions as $action)
                                    {{ $action }}
                                @endforeach