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] {
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
resources/views/showcase/sections/data.blade.php
+15 -15
View File
@@ -1,56 +1,56 @@
@php
$examples = [
'Data table' => <<<'BLADE'
<div class="w-full overflow-x-auto">
<div data-md-showcase-table-scroll>
<x-table>
<thead>
<tr>
<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><span class="sr-only">Actions</span></th>
<th><span class="md-visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody>
<tr data-md-list-row>
<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 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 data-md-list-row aria-selected="true">
<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 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 data-md-list-row>
<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 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>
</tbody>
</x-table>
</div>
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\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
</div>
</x-livewire-material::stack>
BLADE,
];
@endphp
<section id="data" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Data</h2>
<x-livewire-material::stack as="section" id="data" gap="space300">
<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.
</p>
@foreach ($examples as $title => $code)
<x-showcase::example :$title :$code />
@endforeach
</section>
</x-livewire-material::stack>