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

Rewrite the showcase's Data section without Tailwind

Browse Source 
Plan step 38: text.css already has the three classes this section
needed (md-text-end, md-tabular, md-visually-hidden), so only the
table's own scroll wrapper and the pagination list move — the wrapper
to a data-md-showcase-table-scroll hook, the two paginators onto
<x-stack>.

Every #data id and data-md-list-row/aria-selected selector the
Chromium DataTest reads is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:57:09 +02:00
co-authored by Claude Sonnet 5
parent 8bef785f51
commit 9e661836d6
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+6
View File
@@ -440,6 +440,12 @@
[data-md-showcase-search-bar-title] { [data-md-showcase-search-bar-title] {
flex: 1 1 auto; flex: 1 1 auto;
} }
/* Data: the table's own horizontal scroll stays the caller's, as table.css's header says. */
[data-md-showcase-table-scroll] {
width: 100%;
overflow-x: auto;
}
} }
/* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
resources/views/showcase/sections/data.blade.php
+15 -15
View File
@@ -1,56 +1,56 @@
@php @php
$examples = [ $examples = [
'Data table' => <<<'BLADE' 'Data table' => <<<'BLADE'
<div class="w-full overflow-x-auto"> <div data-md-showcase-table-scroll>
<x-table> <x-table>
<thead> <thead>
<tr> <tr>
<x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header> <x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header>
<x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="text-end">Size</x-sort-header> <x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="md-text-end">Size</x-sort-header>
<th>Expires</th> <th>Expires</th>
<th><span class="sr-only">Actions</span></th> <th><span class="md-visually-hidden">Actions</span></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr data-md-list-row> <tr data-md-list-row>
<td><a href="#data" data-md-list-open>contract.pdf</a></td> <td><a href="#data" data-md-list-open>contract.pdf</a></td>
<td class="text-end tabular-nums">1.2 MB</td> <td class="md-text-end md-tabular">1.2 MB</td>
<td>in 1 hour</td> <td>in 1 hour</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td> <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr> </tr>
<tr data-md-list-row aria-selected="true"> <tr data-md-list-row aria-selected="true">
<td><a href="#data" data-md-list-open>design-review.mp4</a></td> <td><a href="#data" data-md-list-open>design-review.mp4</a></td>
<td class="text-end tabular-nums">3.4 GB</td> <td class="md-text-end md-tabular">3.4 GB</td>
<td>in 7 days</td> <td>in 7 days</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td> <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr> </tr>
<tr data-md-list-row> <tr data-md-list-row>
<td><a href="#data" data-md-list-open>holiday-photos.zip</a></td> <td><a href="#data" data-md-list-open>holiday-photos.zip</a></td>
<td class="text-end tabular-nums">248 MB</td> <td class="md-text-end md-tabular">248 MB</td>
<td>in 3 days</td> <td>in 3 days</td>
<td class="text-end"><x-button icon="more_vert" tooltip="More" /></td> <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
</tr> </tr>
</tbody> </tbody>
</x-table> </x-table>
</div> </div>
BLADE, BLADE,
'Pagination' => <<<'BLADE' 'Pagination' => <<<'BLADE'
<div class="grid w-full gap-6"> <x-livewire-material::stack gap="space300">
{{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }} {{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }}
{{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }} {{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
</div> </x-livewire-material::stack>
BLADE, BLADE,
]; ];
@endphp @endphp
<section id="data" class="scroll-mt-24 space-y-6"> <x-livewire-material::stack as="section" id="data" gap="space300">
<h2 class="type-headline-md">Data</h2> <h2 class="md-type-headline-md">Data</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant"> <p class="md-type-body-md md-ink-variant">
<code>&lt;x-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators. <code>&lt;x-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators.
</p> </p>
@foreach ($examples as $title => $code) @foreach ($examples as $title => $code)
<x-showcase::example :$title :$code /> <x-showcase::example :$title :$code />
@endforeach @endforeach
</section> </x-livewire-material::stack>