noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the page steps' state layer from the paginator stylesheet

Browse Source 
Plan step 36. The paginators put md-state-layer, md-focus-ring and
md-touch-target on their live steps, where the rest of the actions and
communication group (button, FAB, menu item, snackbar, alert) writes no
class list and carries those declarations keyed on its own hooks, as
the plan's data-md-* rule and the brief's "text classes, nothing else"
ask. pagination.css now draws them on a link or button step, the layer
hidden while Livewire disables previous and next; the views render no
class at all, which the render tests pin.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:08:54 +02:00
co-authored by Claude Opus 5
parent f53c559c40
commit 32313e0fd9
4 changed files with 84 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pagination/laravel/tailwind.blade.php
+3 -3
View File
@@ -17,7 +17,7 @@
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" data-md-pagination-step aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</a>
@endif
@@ -32,14 +32,14 @@
@if ($page == $paginator->currentPage())
<span aria-current="page" data-md-pagination-step data-md-pagination-page>{{ $page }}</span>
@else
<a href="{{ $url }}" data-md-pagination-step data-md-pagination-page class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
<a href="{{ $url }}" data-md-pagination-step data-md-pagination-page aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
<a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</a>
@else
resources/views/pagination/livewire/tailwind.blade.php
+6 -6
View File
@@ -5,9 +5,9 @@
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 (`md-touch-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". --}}
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)) {
@@ -35,7 +35,7 @@
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</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() }}" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
<button type="button" 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
@@ -51,7 +51,7 @@
@if ($page == $paginator->currentPage())
<span aria-current="page" data-md-pagination-step>{{ $page }}</span>
@else
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</button>
<button type="button" 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
@@ -59,7 +59,7 @@
@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() }}" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
<button type="button" 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