Add data tables, sort headers and M3 paginators

A data table styled from descendant selectors, a Livewire sort header with aria-sort, and Laravel's and Livewire's full and simple paginators drawn in M3, put in front of their own views. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 08:32:59 +02:00
parent f90695cedd
commit 83ed671c4e
16 changed files with 613 additions and 1 deletions
@@ -0,0 +1,105 @@
+<?php
+
+use Illuminate\Contracts\View\View;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Route;
+use Livewire\Component;
+use Livewire\Livewire;
+use Livewire\WithPagination;
+
+class DataProbe extends Component
+{
+    use WithPagination;
+
+    /** @var array{column: string, direction: string} */
+    public array $sortBy = ['column' => 'name', 'direction' => 'asc'];
+
+    public function render(): View
+    {
+        $files = collect(range(1, 25))->map(fn (int $n): array => ['name' => sprintf('file-%02d.zip', $n), 'size' => $n * 3 % 17]);
+        $files = $files->sortBy($this->sortBy['column'], SORT_REGULAR, $this->sortBy['direction'] === 'desc')->values();
+        $page = $this->getPage();
+
+        return view('probe::data', [
+            'files' => new LengthAwarePaginator($files->forPage($page, 10)->values(), $files->count(), 10, $page),
+        ]);
+    }
+}
+
+function dataProbe()
+{
+    $views = sys_get_temp_dir().'/livewire-material-data-probe';
+    @mkdir($views);
+    file_put_contents($views.'/data.blade.php', <<<'BLADE'
+        <div class="p-4">
+            <x-table>
+                <thead>
+                    <tr>
+                        <x-sort-header column="name" :sort-by="$sortBy" id="by-name">Name</x-sort-header>
+                        <x-sort-header column="size" :sort-by="$sortBy" id="by-size">Size</x-sort-header>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($files as $file)
+                        <tr wire:key="file-{{ $file['name'] }}"><td>{{ $file['name'] }}</td><td>{{ $file['size'] }}</td></tr>
+                    @endforeach
+                </tbody>
+            </x-table>
+
+            {{ $files->links() }}
+        </div>
+        BLADE);
+    app('view')->addNamespace('probe', $views);
+
+    Livewire::component('data-probe', DataProbe::class);
+
+    Route::middleware('web')->get('/data-probe', fn () => Blade::render(<<<'BLADE'
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <x-theme-script />
+                @vite(config('livewire-material.showcase.vite'))
+                @livewireStyles
+            </head>
+            <body class="bg-surface">
+                <livewire:data-probe />
+                @livewireScripts
+            </body>
+        </html>
+        BLADE));
+
+    return visit('/data-probe')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+}
+
+it('sorts by a column and flips the direction on a second press', function () {
+    $first = "document.querySelector('tbody tr td').textContent.trim()";
+
+    $page = dataProbe()
+        ->assertAttribute('#by-name', 'aria-sort', 'ascending')
+        ->assertScript("{$first} === 'file-01.zip'");
+
+    $page->click('#by-name button')
+        ->assertAttribute('#by-name', 'aria-sort', 'descending')
+        ->assertScript("{$first} === 'file-25.zip'");
+
+    $page->click('#by-size button')
+        ->assertAttribute('#by-size', 'aria-sort', 'ascending')
+        ->assertScript("! document.querySelector('#by-name').hasAttribute('aria-sort')");
+});
+
+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"]')
+        ->assertSee('21–25 of 25')
+        ->assertSeeIn('[data-pagination] [aria-current="page"]', '3');
+
+    $page->click('[data-pagination] button[aria-label="Previous"]')
+        ->assertSee('11–20 of 25');
+
+    $page->resize(400, 800)
+        ->assertSee('Page 2 of 3');
+});
@@ -0,0 +1,68 @@
+<?php
+
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Pagination\Paginator;
+use Livewire\Component;
+use Livewire\Livewire;
+use Livewire\WithPagination;
+
+it('marks a table for its styles and takes a size', function () {
+    expect((string) $this->blade('<x-table class="min-w-160"><tbody><tr><td>a</td></tr></tbody></x-table>'))
+        ->toContain('<table data-table data-size="sm" class="min-w-160">')
+        ->and((string) $this->blade('<x-table size="xs" />'))->toContain('data-size="xs"')
+        ->and((string) $this->blade('<x-table size="huge" />'))->toContain('data-size="sm"');
+});
+
+it('sorts by its column, ascending first and then flipping', function () {
+    expect((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'name\', \'direction\' => \'asc\']">Size</x-sort-header>'))
+        ->not->toContain('aria-sort')
+        ->toContain('wire:click="$set(\'sortBy\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;asc&quot;})"')
+        ->and((string) $this->blade('<x-sort-header column="size" model="order" :sort-by="[\'column\' => \'size\', \'direction\' => \'asc\']" class="text-end">Size</x-sort-header>'))
+        ->toContain('aria-sort="ascending"')
+        ->toContain('class="text-end"')
+        ->toContain('$set(\'order\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;desc&quot;})')
+        ->and((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'size\', \'direction\' => \'desc\']">Size</x-sort-header>'))
+        ->toContain('aria-sort="descending"')
+        ->toContain('&quot;direction&quot;:&quot;asc&quot;');
+});
+
+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-sm:hidden">3</span>')
+        ->toContain('href="/shares?page=2" rel="prev"')
+        ->toContain('aria-label="Go to page 4"')
+        ->not->toContain('text-gray');
+
+    expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
+        ->toContain('data-pagination')
+        ->toContain('href="/shares?page=1"')
+        ->toContain('href="/shares?page=3"')
+        ->toContain('Previous');
+});
+
+it('draws Livewire\'s paginators in M3, wired to its page actions', function () {
+    Livewire::component('paging-probe', new class extends Component
+    {
+        use WithPagination;
+
+        public function render(): string
+        {
+            return <<<'BLADE'
+                <div>
+                    {{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, $this->getPage(), ['path' => '/'])) ->links() }}
+                </div>
+                BLADE;
+        }
+    });
+
+    expect(Livewire::test('paging-probe')->html())
+        ->toContain('data-pagination')
+        ->toContain('wire:click="gotoPage(2, \'page\')"')
+        ->toContain('wire:click="nextPage(\'page\')"')
+        ->not->toContain('text-gray');
+});