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
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)'");
});