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

Draw the paginators without Tailwind

Browse Source 
Laravel's and Livewire's paginator views render data-md-pagination
hooks; pagination.css draws the row, the 40px steps with their 48px
targets, the selected page and the swap to "Page n of m" below 600px
(plan step 36, inputs). It imports button.css for the simple
paginators, now that the button is rewritten.

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 15:47:07 +02:00
co-authored by Claude Opus 5
parent 6df034f81a
commit 2acd9ab492
8 changed files with 160 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -40,6 +40,7 @@
@import './components/search.css';
@import './components/table.css';
@import './components/sort-header.css';
@import './components/pagination.css';
/* Containment */
resources/css/components/pagination.css
+87
View File
@@ -0,0 +1,87 @@
/*
* The paginators, Laravel's and Livewire's, drawn in M3 (resources/views/pagination/**): the package
* puts its views in front of the frameworks' `tailwind` and `simple-tailwind` ones, whose names they
* keep.
*
* The numbered paginator is a row: on its start, what the page holds in body-small on-surface-variant
* — "21–30 of 95", or "Page 3 of 10" below `medium` (600px), where the page numbers give way and only
* previous and next stay — and on its end the steps, 4px apart. A step is a 40px circle in label-large
* with tabular figures, M3's icon-button geometry: a live one in on-surface with the state layer, the
* focus ring and a 48px target (`md-state-layer`, `md-focus-ring`, `md-touch-target`,
* foundation/interaction.css); the current page is the selected state, secondary-container, never the
* action colour — it is where you are, not what to do next; an unreachable one (`aria-disabled`) is
* on-surface at 38%. The chevrons mirror in a right-to-left page. The simple paginator is the same
* row holding two outlined buttons.
*
* [data-md-pagination] the <nav>
* [data-md-pagination-summary] [data-md-pagination-compact], [data-md-pagination-range]
* [data-md-pagination-steps]
* [data-md-pagination-step] aria-current="page", aria-disabled="true";
* [data-md-pagination-page] is a number, hidden below 600px
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './button.css';
@import './icon.css';
@layer material.components {
[data-md-pagination] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--md-sys-measurement-space200);
}
[data-md-pagination-summary] {
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
font-variation-settings: normal;
}
[data-md-pagination-steps] {
display: flex;
align-items: center;
gap: var(--md-sys-measurement-space50);
}
[data-md-pagination-step] {
display: grid;
place-items: center;
width: var(--md-sys-measurement-space500);
height: var(--md-sys-measurement-space500);
border-radius: var(--md-sys-shape-corner-full);
color: var(--md-sys-color-on-surface);
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
font-variation-settings: normal;
font-variant-numeric: tabular-nums;
}
button[data-md-pagination-step] {
cursor: pointer;
}
[data-md-pagination-step][aria-current='page'] {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
[data-md-pagination-step][aria-disabled='true'] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
}
@media (width < 600px) {
[data-md-pagination-page],
[data-md-pagination-range] {
display: none;
}
}
@media (width >= 600px) {
[data-md-pagination-compact] {
display: none;
}
}
}
resources/views/pagination/laravel/simple-tailwind.blade.php
+1 -1
View File
@@ -2,7 +2,7 @@
(the package puts this in front of `pagination::simple-tailwind`). --}}
@if ($paginator->hasPages())
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
@if ($paginator->onFirstPage())
<x-livewire-material::button variant="outlined" icon="chevron_left" :label="__('Previous')" disabled />
@else
resources/views/pagination/laravel/tailwind.blade.php
+19 -24
View File
@@ -1,55 +1,50 @@
{{-- Laravel's paginator (`$items->links()` outside Livewire), drawn in M3 as Livewire's is
(resources/views/pagination/livewire/tailwind.blade.php): links instead of actions, the current
page in secondary-container, "Page 2 of 7" on a phone. The package puts this in front of
`pagination::tailwind` (config `livewire-material.pagination`). --}}
@php
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
$live = $step.' state-layer focus-ring touch-target text-on-surface';
$dead = $step.' text-on-surface/38';
@endphp
page in secondary-container, "Page 2 of 7" below 600px. The package puts this in front of
`pagination::tailwind` (config `livewire-material.pagination`); the name is Laravel's, the drawing
resources/css/components/pagination.css. --}}
@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="medium:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
<span class="max-medium:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
<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 class="flex items-center gap-1">
<div data-md-pagination-steps>
@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 data-md-pagination-step aria-disabled="true" aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="{{ $live }}" aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</a>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<span class="{{ $dead }} max-medium:hidden" aria-disabled="true">{{ $element }}</span>
<span data-md-pagination-step data-md-pagination-page aria-disabled="true">{{ $element }}</span>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container max-medium:hidden">{{ $page }}</span>
<span aria-current="page" data-md-pagination-step data-md-pagination-page>{{ $page }}</span>
@else
<a href="{{ $url }}" class="{{ $live }} max-medium:hidden" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
<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>
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="{{ $live }}" aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
<a href="{{ $paginator->nextPageUrl() }}" rel="next" data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target" aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</a>
@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 data-md-pagination-step aria-disabled="true" aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</span>
@endif
</div>
resources/views/pagination/livewire/simple-tailwind.blade.php
+1 -1
View File
@@ -17,7 +17,7 @@
<div>
@if ($paginator->hasPages())
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-md-pagination>
@if ($paginator->onFirstPage())
<x-livewire-material::button variant="outlined" icon="chevron_left" :label="__('Previous')" disabled />
@elseif ($cursor)
resources/views/pagination/livewire/tailwind.blade.php
+22 -25
View File
@@ -1,12 +1,13 @@
{{-- 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.
not exist in an M3 theme. The file keeps Livewire's view name; nothing in it is Tailwind — 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 (`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. On a phone the numbers give way to "Page 2 of 7". --}}
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". --}}
@php
if (! isset($scrollTo)) {
@@ -18,43 +19,39 @@
(\$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 touch-target 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="medium:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
<span class="max-medium:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
<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 class="flex items-center gap-1">
<div data-md-pagination-steps>
@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 data-md-pagination-step aria-disabled="true" aria-label="{{ __('Previous') }}">
<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() }}" class="{{ $live }}" aria-label="{{ __('Previous') }}">
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
<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') }}">
<x-livewire-material::icon name="chevron_left" mirror-rtl />
</button>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<span class="{{ $dead }} max-medium:hidden" aria-disabled="true">{{ $element }}</span>
<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 }}" class="max-medium:hidden">
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}" data-md-pagination-page>
@if ($page == $paginator->currentPage())
<span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container">{{ $page }}</span>
<span aria-current="page" data-md-pagination-step>{{ $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>
<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>
@endif
</span>
@endforeach
@@ -62,12 +59,12 @@
@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 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') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</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 data-md-pagination-step aria-disabled="true" aria-label="{{ __('Next') }}">
<x-livewire-material::icon name="chevron_right" mirror-rtl />
</span>
@endif
</div>
tests/Browser/DataTest.php
+10 -4
View File
@@ -99,12 +99,12 @@ it('sorts by a column and flips the direction on a second press', function () {
it('pages through Livewire results and marks the current page', function () {
$page = dataProbe()
->assertSee('1–10 of 25')
->assertAttribute('[data-pagination] [aria-current="page"]', 'aria-current', 'page')
->click('[data-pagination] button[aria-label="Go to page 3"]')
->assertAttribute('[data-md-pagination] [aria-current="page"]', 'aria-current', 'page')
->click('[data-md-pagination] button[aria-label="Go to page 3"]')
->assertSee('21–25 of 25')
->assertSeeIn('[data-pagination] [aria-current="page"]', '3');
->assertSeeIn('[data-md-pagination] [aria-current="page"]', '3');
$page->click('[data-pagination] button[aria-label="Previous"]')
$page->click('[data-md-pagination] button[aria-label="Previous"]')
->assertSee('11–20 of 25');
$page->resize(400, 800)
@@ -126,3 +126,9 @@ it('lets the sort button be pressed anywhere in its 48px target', function () {
->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const after = getComputedStyle(button, '::after'); return button.getBoundingClientRect().height < 48 && after.minHeight === '48px' && after.minWidth === '48px'; })()")
->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const box = button.getBoundingClientRect(); const probe = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2 - 22); return probe === button; })()");
});
it('draws each page step 40px and lets it be pressed anywhere in its 48px target', function () {
dataProbe()
->assertScript("(() => { const step = document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]'); const box = step.getBoundingClientRect(); return box.width === 40 && box.height === 40 && document.elementFromPoint(box.left + box.width / 2, box.top - 3) === step; })()")
->assertScript("getComputedStyle(document.querySelector('[data-md-pagination] [aria-current=\"page\"]')).backgroundColor !== 'rgba(0, 0, 0, 0)'");
});
tests/Feature/Components/DataTest.php
+19 -8
View File
@@ -50,23 +50,25 @@ it('gives the sort button and every page control a 48px target', function () {
->toContain('--md-icon-size: 16px')
->not->toContain('data-md-active')
->and((string) $pages->links())
->toContain('state-layer focus-ring touch-target');
->toContain('data-md-pagination-step class="md-state-layer md-focus-ring md-touch-target"');
});
it('draws Laravel\'s paginators in M3', function () {
$pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
expect((string) $pages->links())
->toContain('data-pagination')
->toContain('Page 3 of 10')
->toContain('21–30 of 95')
->toContain('<span aria-current="page" class="grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums bg-secondary-container text-on-secondary-container max-medium:hidden">3</span>')
->toContain('data-md-pagination')
->toContain('<span data-md-pagination-compact>Page 3 of 10</span>')
->toContain('<span data-md-pagination-range>21–30 of 95</span>')
->toContain('<span aria-current="page" data-md-pagination-step data-md-pagination-page>3</span>')
->toContain('href="/shares?page=2" rel="prev"')
->toContain('aria-label="Go to page 4"')
->not->toContain('text-gray');
->toContain('data-md-mirror-rtl')
->not->toContain('text-gray')
->not->toMatch('/class="(?!md-)[^"]*"/');
expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
->toContain('data-pagination')
->toContain('data-md-pagination')
->toContain('href="/shares?page=1"')
->toContain('href="/shares?page=3"')
->toContain('Previous');
@@ -88,7 +90,8 @@ it('draws Livewire\'s paginators in M3, wired to its page actions', function ()
});
expect(Livewire::test('paging-probe')->html())
->toContain('data-pagination')
->toContain('data-md-pagination')
->toContain('data-md-pagination-page')
->toContain('wire:click="gotoPage(2, \'page\')"')
->toContain('wire:click="nextPage(\'page\')"')
->not->toContain('text-gray');
@@ -100,3 +103,11 @@ it('draws the sort header from its stylesheet, its arrow hidden until the column
->toMatch('/\\[data-md-sort-header\\]:not\\(\\[data-md-active\\]\\) \\[data-md-sort-header-arrow\\] \\{\\s*opacity: 0;/')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/sort-header.css';");
});
it('draws the paginators from their stylesheet, trading the numbers for "Page n of m" below 600px', function () {
expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/pagination.css'))
->toContain('@layer material.components')
->toMatch('/@media \\(width < 600px\\) \\{\\s*\\[data-md-pagination-page\\],\\s*\\[data-md-pagination-range\\] \\{\\s*display: none;/')
->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-pagination-compact\\] \\{\\s*display: none;/')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/pagination.css';");
});