Refactor grid/grid col generation

packages/support/resources/css/components/grid.css

@@ -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;
+ }
+ }
+}

packages/support/resources/css/components/tables/columns/layout/grid.css

@@ -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;
+ }
+}

packages/support/resources/css/components/tables/columns/layout/panel.css

@@ -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;
+}

packages/support/resources/css/components/tables/content.css

@@ -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;
  }
  }

packages/support/resources/js/index.js

@@ -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'

packages/support/src/Enums/GridDirection.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace Filament\Support\Enums;
+
+enum GridDirection: string
+{
+ case Row = 'row';
+
+ case Column = 'column';
+}

packages/support/src/SupportServiceProvider.php

@@ -16,6 +16,7 @@
 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\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 @@ public function packageBooted(): void
  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);
  });

packages/tables/resources/views/columns/layout/grid.blade.php

@@ -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>

packages/tables/resources/views/columns/layout/panel.blade.php

@@ -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