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