Files
livewire-material/resources/views/pagination/livewire/material.blade.php
T
Andreas Reinhold / reiniandClaude Opus 5 fb7007c976
tests / feature (8.4) (push) Successful in 2m0s
tests / feature (8.5) (push) Successful in 2m0s
tests / browser (chrome, chromium) (push) Failing after 8m3s
tests / browser (firefox, firefox) (push) Failing after 12m58s
tests / browser (safari, webkit) (push) Failing after 13m8s
Take Tailwind out of the package, and its detection out of the guard
Tailwind left the stack in 2.0.0, but the package still carried about 330
mentions of it. What the guard's Tailwind detection protected — a class
that compiles to nothing — is now protected by a check that does not care
where a dead class came from.

DesignGuard: about 500 lines of Tailwind tables, scales, palettes and
"2.0.0 replacement" hints give way to one check — a class a view or PHP
file writes that neither the application's stylesheets nor the package's
own declare. It catches a utility of any framework, a typo and a class
whose rules were deleted alike, so it also found two classes ReStride
draws nothing with. A stylesheet has to be in reach for it: the `.css`
files among the scanned paths, or what the `missingStylesheets()` entry
imports. The class reader no longer mistakes an array index for a class
list (`$block['base']`), and it reads the array a class helper is given,
where it read nothing before.

The package's own three Tailwind self-guards go with it. Only their one
unique check stays, as a test of its own: every `matchMedia` width in
resources/js is an M3 breakpoint.

The pagination views are `material.blade.php` and
`simple-material.blade.php`; only Laravel's and Livewire's default theme
names ever made them `tailwind`. The provider sets `Paginator`'s default
views and switches `livewire.pagination_theme` to `material` when it is
still Livewire's own default, so no application can forget the config; a
theme an application chose, and a component's own `$paginationTheme` or
`paginationView()`, still win.

The rest is prose: the layer-order guidance for an application that still
builds Tailwind, the Tailwind wording in the README, the Boost guidelines
and the development skill, and about 25 "this used to be a Tailwind
utility" comments, along with every "plan step NN" pointer into a
gitignored folder. The reset keeps its credit, and NOTICE now carries it
too.

Feature suite 1159 passed, Chrome browser suite 299 passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 21:07:39 +02:00

74 lines
4.4 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{-- Livewire's paginator, drawn in M3. The name is `material`; Livewire resolves
`livewire::` . config('livewire.pagination_theme') to find it, and the provider sets that
config to `material` (config `livewire-material.pagination`) while it still reads as
Livewire's own default. The drawing is resources/css/components/pagination.css.
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. A page number is drawn as a
40px state layer and catches presses over M3's 48px target; the current one is the selected
state, secondary-container, never the action colour it is where you are, not what to do next.
Below `medium` (600px) 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
: '';
@endphp
<div>
@if ($paginator->hasPages())
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
<p data-md-pagination-summary>
<span data-md-pagination-compact>{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
<span data-md-pagination-range>{{ __(':first:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
</p>
<div data-md-pagination-steps>
@if ($paginator->onFirstPage())
<span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</span>
@else
<button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</button>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<span data-md-pagination-step data-md-pagination-page aria-disabled="true">{{ $element }}</span>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}" data-md-pagination-page>
@if ($page == $paginator->currentPage())
<span aria-current="page" data-md-pagination-step>{{ $page }}</span>
@else
<button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" data-md-pagination-step aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
@endif
</span>
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<button type="button" class="md-state-layer md-focus-ring md-touch-target" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.'.$paginator->getPageName() }}" data-md-pagination-step aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</button>
@else
<span data-md-pagination-step aria-disabled="true" aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</span>
@endif
</div>
</nav>
@endif
</div>