Andreas Reinhold / reiniandClaude Opus 5
c68a1fdbef
<x-sort-header> renders data-md-sort-header (data-md-active on the sorted column) with its button and arrow as data-md-* attributes; the button keeps md-focus-ring and md-touch-target, the arrow takes size 16, and the hover and hint-arrow states move into components/sort-header.css (plan step 36). A browser test presses the button at the edge of its 48px target. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
36 lines
1.7 KiB
PHP
36 lines
1.7 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>` (end-aligning a number column moves the button with it).
|
|
|
|
The button is only as tall as its title-small line, so it carries `md-touch-target` and catches
|
|
presses over M3's 48px minimum; the cell's own padding belongs to the cell, not to it. The cell
|
|
renders `data-md-sort-header` (`data-md-active` on the sorted column) and the button
|
|
`data-md-sort-header-button`, drawn by resources/css/components/sort-header.css. --}}
|
|
|
|
@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 data-md-sort-header @if ($active) data-md-active aria-sort="{{ $direction === 'asc' ? 'ascending' : 'descending' }}" @endif {{ $attributes }}>
|
|
<button
|
|
type="button"
|
|
wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})"
|
|
data-md-sort-header-button
|
|
class="md-focus-ring md-touch-target"
|
|
>
|
|
{{ $slot }}
|
|
<x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" size="16" data-md-sort-header-arrow />
|
|
</button>
|
|
</th>
|