Andreas Reinhold / reiniandClaude Sonnet 5
f04e31b3aa
Plan step 36 (containment group): <x-card>'s class lists move into resources/css/components/card.css, keyed on data-md-card (per variant), data-md-card-figure/-body/-header/-heading/-title/-subtitle/-menu/ -content/-actions. A row (data-md-list-row) renders the shared md-state-layer and md-focus-ring classes for its tint and ring (foundation/interaction.css) instead of copying their rules; card.css adds only the per-state elevation the shared class has no opinion on (ElevatedCardTokens.kt/FilledCardTokens.kt/OutlinedCardTokens.kt), the press/hover exclusion for a card's own nested buttons, and the ring for a non-actionable row whose focus lands on its opener rather than the card. data-md-dragged is read automatically by the shared class's own 16% tint; card.css only adds its elevation levels 3/4. Hooks renamed data-list-row -> data-md-list-row, data-list-open -> data-md-list-open, data-list-actionable -> data-md-list-actionable, data-dragged -> data-md-dragged, updated in the same commit: resources/js/search.js and list-rows.js's consumers, table.css's comment, the showcase (index, data and containment sections), tests/Browser/ContainmentTest.php, and the development skill's card and table examples. Imported from the Containment block of components.css. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
57 lines
2.7 KiB
PHP
57 lines
2.7 KiB
PHP
@php
|
|
$examples = [
|
|
'Data table' => <<<'BLADE'
|
|
<div class="w-full overflow-x-auto">
|
|
<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>
|
|
<th>Expires</th>
|
|
<th><span class="sr-only">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>in 1 hour</td>
|
|
<td class="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>in 7 days</td>
|
|
<td class="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>in 3 days</td>
|
|
<td class="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">
|
|
{{ (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>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="data" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Data</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-table></code>, <code><x-sort-header></code>, and Laravel's and Livewire's paginators.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|