Joseph.Rawlings
af62a16354
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals. - Updated various modal button styles for consistency and improved accessibility. - Adjusted transition durations for modal animations to enhance user experience. - Added aria-labels to close buttons for better screen reader support.
57 lines
1.8 KiB
PHP
57 lines
1.8 KiB
PHP
{{--
|
|
Table Header Cell Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
--}}
|
|
|
|
@props([
|
|
'align' => 'start',
|
|
'sortable' => false,
|
|
'sortKey' => null,
|
|
'currentSort' => null,
|
|
'currentDirection' => 'asc',
|
|
])
|
|
|
|
@php
|
|
$alignClasses = [
|
|
'start' => 'text-left justify-start',
|
|
'center' => 'text-center justify-center',
|
|
'end' => 'text-right justify-end',
|
|
];
|
|
$alignClass = $alignClasses[$align] ?? $alignClasses['start'];
|
|
|
|
$isSorted = $sortable && $sortKey === $currentSort;
|
|
|
|
$baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary bg-transparent align-middle whitespace-nowrap';
|
|
$sortableClasses = $sortable ? 'cursor-pointer select-none transition-colors duration-200 hover:text-primary dark:hover:text-primary' : '';
|
|
$sortedClasses = $isSorted ? 'text-primary dark:text-primary' : '';
|
|
@endphp
|
|
|
|
<th
|
|
{{ $attributes->class([
|
|
$baseClasses,
|
|
$alignClass,
|
|
$sortableClasses,
|
|
$sortedClasses,
|
|
]) }}
|
|
@if($sortable && $sortKey)
|
|
wire:click="sort('{{ $sortKey }}')"
|
|
@endif
|
|
>
|
|
<div class="flex items-center gap-1.5 {{ $alignClass }}">
|
|
<span>{{ $slot }}</span>
|
|
@if($sortable)
|
|
<span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50' }}">
|
|
@if($isSorted)
|
|
@if($currentDirection === 'asc')
|
|
<x-ri-arrow-up-s-line class="size-4" />
|
|
@else
|
|
<x-ri-arrow-down-s-line class="size-4" />
|
|
@endif
|
|
@else
|
|
<x-ri-arrow-up-down-line class="size-3.5 opacity-50" />
|
|
@endif
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</th>
|