iridium34/FilamentLaravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked and recolored Table Component

Browse Source
This commit is contained in:
iridium34
2025-03-17 01:36:38 +01:00
parent c642a437da
commit 98bd3ec660
7 changed files with 69 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+4 -4
View File
@@ -12,8 +12,8 @@
Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-accent: var(--color-rose-500); --color-accent: var(--color-orange-500);
--color-accent-content: var(--color-rose-500); --color-accent-content: var(--color-orange-500);
--color-accent-foreground: var(--color-white); --color-accent-foreground: var(--color-white);
} }
@@ -37,8 +37,8 @@
@layer theme { @layer theme {
.dark { .dark {
--color-accent: var(--color-rose-500); --color-accent: var(--color-orange-500);
--color-accent-content: var(--color-rose-400); --color-accent-content: var(--color-orange-400);
--color-accent-foreground: var(--color-white); --color-accent-foreground: var(--color-white);
} }
} }
resources/views/components/layouts/app.blade.php
+1 -1
View File
@@ -22,7 +22,7 @@
<title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title> <title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
</head> </head>
<body class="font-sans antialiased bg-zinc-800"> <body class="font-sans antialiased bg-zinc-200 text-zinc-700">
<x-navbar /> <x-navbar />
{{ $slot }} {{ $slot }}
resources/views/components/table.blade.php
+19
View File
@@ -0,0 +1,19 @@
<div class="border border-zinc-300 rounded-lg shadow">
<table class="w-full rounded-lg">
<thead class="bg-zinc-200 border-b border-zinc-300 rounded-t-lg">
<tr class="text-left">
{{ $tableheader }}
</tr>
</thead>
<tbody class="bg-zinc-100">
{{ $slot }}
</tbody>
</table>
@isset($pagination)
<div class="px-6 py-4 bg-zinc-100 rounded-b-lg">
{{ $pagination }}
</div>
@endisset
</div>
resources/views/components/table/header.blade.php
+3
View File
@@ -0,0 +1,3 @@
<th {{ $attributes->merge(['class' => 'py-4 px-3 first:pl-6 last:pr-6']) }}>
{{ $slot }}
</th>
resources/views/components/table/item.blade.php
+3
View File
@@ -0,0 +1,3 @@
<td>
{{ $slot }}
</td>
resources/views/livewire/filament/color.blade.php
+23 -20
View File
@@ -15,33 +15,36 @@
<div class="container m-auto my-8"> <div class="container m-auto my-8">
<table class="w-full"> <x-table>
<thead class="border-b border-zinc-500"> <x-slot name="tableheader">
<tr class="text-left"> <x-table.header>Name</x-table.header>
<th class="px-8 py-4 font-bold text-lg">Name</th> <x-table.header>Color</x-table.header>
<th class="px-8 py-4 font-bold text-lg text-center">Color</th> <x-table.header>Hex</x-table.header>
<th class="px-8 py-4 font-bold text-lg text-center">Hex</th> <x-table.header>Rolls</x-table.header>
<th class="w-1/6"></th> <x-table.header class="w-1/6"></x-table.header>
</tr> </x-slot>
</thead>
<tbody>
@foreach ($colors as $color) @foreach ($colors as $color)
<tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-900 transition duration-200"> <tr wire:key="{{ $color->id }}" class="border-b border-zinc-300">
<td><p class="p-4 pl-8">{{ $color->name }}</p></td> <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $color->name }}</p></x-table.item>
<td><div class="w-8 h-8 rounded mx-auto" style="background-color: {{ $color->hex }}"></div></td> <x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
<td><p class="p-4 text-center">{{ $color->hex }}</p></td> <x-table.item><p class="p-4 px-3 text-left">{{ $color->hex }}</p></x-table.item>
<td class="text-right pr-8 flex flex-row gap-4 justify-end"> <x-table.item><p class="p-4 px-3"></p></x-table.item>
<x-table.item>
<div class="flex flex-row gap-4 justify-end pr-8">
<button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button> <button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
<button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button> <button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button>
</td> </div>
</x-table.item>
</tr> </tr>
@endforeach @endforeach
</tbody>
</table> <x-slot name="pagination">
<div class="p-4">
{{ $colors->links() }} {{ $colors->links() }}
</div> </x-slot>
</x-table>
</div> </div>
<!-- Create Form --> <!-- Create Form -->
resources/views/vendor/livewire/tailwind.blade.php
Vendored
+11 -11
View File
@@ -16,11 +16,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
<div class="flex justify-between flex-1 sm:hidden"> <div class="flex justify-between flex-1 sm:hidden">
<span> <span>
@if ($paginator->onFirstPage()) @if ($paginator->onFirstPage())
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300"> <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.previous') !!} {!! __('pagination.previous') !!}
</span> </span>
@else @else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300"> <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.previous') !!} {!! __('pagination.previous') !!}
</button> </button>
@endif @endif
@@ -28,11 +28,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
<span> <span>
@if ($paginator->hasMorePages()) @if ($paginator->hasMorePages())
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300"> <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
{!! __('pagination.next') !!} {!! __('pagination.next') !!}
</button> </button>
@else @else
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600"> <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
{!! __('pagination.next') !!} {!! __('pagination.next') !!}
</span> </span>
@endif @endif
@@ -58,14 +58,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
{{-- Previous Page Link --}} {{-- Previous Page Link --}}
@if ($paginator->onFirstPage()) @if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}"> <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true"> <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg> </svg>
</span> </span>
</span> </span>
@else @else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}"> <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg> </svg>
@@ -78,7 +78,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
{{-- "Three Dots" Separator --}} {{-- "Three Dots" Separator --}}
@if (is_string($element)) @if (is_string($element))
<span aria-disabled="true"> <span aria-disabled="true">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">{{ $element }}</span> <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
</span> </span>
@endif @endif
@@ -88,10 +88,10 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}"> <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
@if ($page == $paginator->currentPage()) @if ($page == $paginator->currentPage())
<span aria-current="page"> <span aria-current="page">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span> <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
</span> </span>
@else @else
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
{{ $page }} {{ $page }}
</button> </button>
@endif @endif
@@ -103,14 +103,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
<span> <span>
{{-- Next Page Link --}} {{-- Next Page Link --}}
@if ($paginator->hasMorePages()) @if ($paginator->hasMorePages())
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}"> <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg> </svg>
</button> </button>
@else @else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}"> <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true"> <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg> </svg>