Andreas Reinhold / reiniandClaude Fable 5.1
5989e9ea92
Both were 40px or less, which is M3's state-layer size, not its 48px target: the paginator's steps and page numbers keep their 40px circle and now catch presses over 48, and the sort button — a title-small line and a 16px arrow, about 20px tall — does the same, since the cell's padding belongs to the cell and not to the button inside it. Plan step 20, findings IN-15 and IN-17. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
41 lines
1.9 KiB
PHP
41 lines
1.9 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).
|
|
|
|
The button is only as tall as its title-small line, so it carries `touch-target` and catches
|
|
presses over M3's 48px minimum; the cell's own padding belongs to the cell, not to 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 touch-target inline-flex cursor-pointer items-center gap-1 rounded-corner-xs',
|
|
'text-on-surface' => $active,
|
|
'hover:text-on-surface' => ! $active,
|
|
])
|
|
>
|
|
{{ $slot }}
|
|
<x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" optical="20" :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>
|