Andreas Reinhold / reiniandClaude Opus 5
83ed671c4e
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m10s
tests / feature (8.5) (push) Successful in 1m6s
tests / browser (chrome, chromium) (push) Successful in 3m28s
tests / browser (firefox, firefox) (push) Successful in 4m20s
tests / browser (safari, webkit) (push) Failing after 6m16s
A data table styled from descendant selectors, a Livewire sort header with aria-sort, and Laravel's and Livewire's full and simple paginators drawn in M3, put in front of their own views. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
38 lines
1.6 KiB
PHP
38 lines
1.6 KiB
PHP
{{-- A column header that sorts the table, bound to a Livewire property shaped
|
|
`['column' => …, 'direction' => 'asc'|'desc']` — `sortBy` by default, or the one `model` names.
|
|
|
|
Pressing it sorts by this column, ascending first and then flipping; the arrow says which way,
|
|
and `aria-sort` says it to a screen reader. A column that cannot be sorted is a plain `<th>`.
|
|
`class` lands on the `<th>` (`text-end` for a number column moves the button with it). --}}
|
|
|
|
@props([
|
|
'sortBy' => [],
|
|
'column',
|
|
'model' => 'sortBy',
|
|
])
|
|
|
|
@php
|
|
$active = ($sortBy['column'] ?? null) === $column;
|
|
$direction = $active ? (($sortBy['direction'] ?? 'asc') === 'desc' ? 'desc' : 'asc') : null;
|
|
$next = $active && $direction === 'asc' ? 'desc' : 'asc';
|
|
@endphp
|
|
|
|
<th @if ($active) aria-sort="{{ $direction === 'asc' ? 'ascending' : 'descending' }}" @endif {{ $attributes }}>
|
|
<button
|
|
type="button"
|
|
wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})"
|
|
data-sort-header
|
|
@class([
|
|
'group/sort focus-ring inline-flex cursor-pointer items-center gap-1 rounded-corner-xs',
|
|
'text-on-surface' => $active,
|
|
'hover:text-on-surface' => ! $active,
|
|
])
|
|
>
|
|
{{ $slot }}
|
|
<x-icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" :class="\Illuminate\Support\Arr::toCssClasses([
|
|
'size-4 transition-opacity duration-(--md-sys-motion-effects-fast-duration)',
|
|
'opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60' => ! $active,
|
|
])" />
|
|
</button>
|
|
</th>
|