Finish refactoring table view

filamentphp · Oct 14, 2024 · 2a6fcfa · 2a6fcfa
1 parent 785753c
commit 2a6fcfa
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 72 deletions.
diff --git a/docs-assets/app/public/css/filament/support/support.css b/docs-assets/app/public/css/filament/support/support.css
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/resources/css/components/tables/empty-state.css b/packages/support/resources/css/components/tables/empty-state.css
@@ -0,0 +1,27 @@
+.fi-ta-empty-state {
+ @apply px-6 py-12;
+
+ & .fi-ta-empty-state-content {
+ @apply mx-auto grid max-w-lg justify-items-center text-center;
+
+ & .fi-ta-empty-state-icon-ctn {
+ @apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;
+
+ & .fi-icon {
+ @apply size-6 text-gray-500 dark:text-gray-400;
+ }
+ }
+
+ & .fi-ta-empty-state-heading {
+ @apply text-base font-semibold leading-6 text-gray-950 dark:text-white;
+ }
+
+ & .fi-ta-empty-state-description {
+ @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+ }
+
+ & .fi-ta-actions {
+ @apply mt-6;
+ }
+ }
+}
diff --git a/packages/support/resources/js/index.js b/packages/support/resources/js/index.js
@@ -20,6 +20,7 @@ import '../css/components/tables/columns/image.css'
 import '../css/components/tables/columns/text.css'
 import '../css/components/tables/container.css'
 import '../css/components/tables/content.css'
+import '../css/components/tables/empty-state.css'
 import '../css/components/tables/header-cell.css'
 import '../css/components/tables/row.css'
 import '../css/components/tables/table.css'

diff --git a/packages/tables/resources/views/components/empty-state/description.blade.php b/packages/tables/resources/views/components/empty-state/description.blade.php
diff --git a/packages/tables/resources/views/components/empty-state/heading.blade.php b/packages/tables/resources/views/components/empty-state/heading.blade.php
diff --git a/packages/tables/resources/views/components/empty-state/index.blade.php b/packages/tables/resources/views/components/empty-state/index.blade.php
diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php
@@ -1764,21 +1764,38 @@ class="fi-ta-record-checkbox fi-checkbox-input"
  @elseif ($emptyState = $getEmptyState())
  {{ $emptyState }}
  @else
- <tr>
- <td colspan="{{ $columnsCount }}">
- <x-filament-tables::empty-state
- :actions="
- array_filter(
- $getEmptyStateActions(),
- fn (\Filament\Actions\Action | \Filament\Actions\ActionGroup $action): bool => $action->isVisible(),
- )
- "
- :description="$getEmptyStateDescription()"
- :heading="$getEmptyStateHeading()"
- :icon="$getEmptyStateIcon()"
- />
- </td>
- </tr>
+ <div class="fi-ta-empty-state">
+ <div
+ class="fi-ta-empty-state-content"
+ >
+ <div
+ class="fi-ta-empty-state-icon-ctn"
+ >
+ {{ \Filament\Support\generate_icon_html($getEmptyStateIcon()) }}
+ </div>
+
+ <h4 class="fi-ta-empty-state-heading">
+ {{ $getEmptyStateHeading() }}
+ </h4>
+
+ @if ($emptyStateDescription = $getEmptyStateDescription())
+ <p class="fi-ta-empty-state-description">
+ {{ $description }}
+ </p>
+ @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">
+ @foreach ($emptyStateActions as $action)
+ {{ $action }}
+ @endforeach
+ </div>
+ @endif
+ </div>
+ </div>
  @endif
  </div>