Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. 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-livewire-material::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>
|