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
77 lines
4.5 KiB
PHP
77 lines
4.5 KiB
PHP
{{-- Livewire's paginator, drawn in M3. The package puts this in front of Livewire's own
|
||
`livewire::tailwind` (config `livewire-material.pagination`), whose gray and blue classes do
|
||
not exist in an M3 theme.
|
||
|
||
The wiring is Livewire's, unchanged: `previousPage`, `nextPage` and `gotoPage` with the page
|
||
name, and the scroll back to the top of whatever `scrollTo` names. Page numbers are 40px
|
||
icon-button targets; the current one is the selected state, secondary-container, never the
|
||
action colour — it is where you are, not what to do next. On a phone the numbers give way to
|
||
"Page 2 of 7". --}}
|
||
|
||
@php
|
||
if (! isset($scrollTo)) {
|
||
$scrollTo = 'body';
|
||
}
|
||
|
||
$scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||
? <<<JS
|
||
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
|
||
JS
|
||
: '';
|
||
|
||
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
|
||
$live = $step.' state-layer focus-ring cursor-pointer text-on-surface';
|
||
$dead = $step.' text-on-surface/38';
|
||
@endphp
|
||
|
||
<div>
|
||
@if ($paginator->hasPages())
|
||
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
|
||
<p class="type-body-sm text-on-surface-variant">
|
||
<span class="sm:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
|
||
<span class="max-sm:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
|
||
</p>
|
||
|
||
<div class="flex items-center gap-1">
|
||
@if ($paginator->onFirstPage())
|
||
<span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Previous') }}">
|
||
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
|
||
</span>
|
||
@else
|
||
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" class="{{ $live }}" aria-label="{{ __('Previous') }}">
|
||
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
|
||
</button>
|
||
@endif
|
||
|
||
@foreach ($elements as $element)
|
||
@if (is_string($element))
|
||
<span class="{{ $dead }} max-sm:hidden" aria-disabled="true">{{ $element }}</span>
|
||
@endif
|
||
|
||
@if (is_array($element))
|
||
@foreach ($element as $page => $url)
|
||
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}" class="max-sm:hidden">
|
||
@if ($page == $paginator->currentPage())
|
||
<span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container">{{ $page }}</span>
|
||
@else
|
||
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="{{ $live }}" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
|
||
@endif
|
||
</span>
|
||
@endforeach
|
||
@endif
|
||
@endforeach
|
||
|
||
@if ($paginator->hasMorePages())
|
||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" class="{{ $live }}" aria-label="{{ __('Next') }}">
|
||
<x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
|
||
</button>
|
||
@else
|
||
<span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Next') }}">
|
||
<x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
|
||
</span>
|
||
@endif
|
||
</div>
|
||
</nav>
|
||
@endif
|
||
</div>
|