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

Write the showcase examples' layout tags as an application does

Browse Source 
Plan step 38 review: nine sections' examples wrapped their components
in <x-livewire-material::stack>, ::row and ::grid (148 tags) beside an
unprefixed <x-button>, while bars, containment and the layout pages
wrote <x-stack>. The code sample is what an application copies, and
the example component rewrites only unprefixed tags to a configured
prefix, so the namespaced ones taught a second form and escaped it.
Every example now writes <x-stack>, <x-row> and <x-grid>; a test
rejects a namespaced tag inside an example heredoc.

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-15 06:11:08 +02:00
co-authored by Claude Opus 5
parent 5fb8fc6b8f
commit 3fb0a404db
10 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/timepickers.blade.php
+12 -12
View File
@@ -1,32 +1,32 @@
@php
$examples = [
'12 and 24 hours, outlined and filled' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
<x-livewire-material::stack gap="space200">
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
<x-stack gap="space200">
<x-timepicker label="Meeting starts" value="09:30" hint="The locale's clock" />
<x-timepicker label="Pick-up" value="17:15" format="12" icon="local_shipping" clearable />
<x-timepicker label="Disabled" value="12:00" disabled />
</x-livewire-material::stack>
</x-stack>
<x-livewire-material::stack gap="space200">
<x-stack gap="space200">
<x-timepicker variant="filled" label="Alarm" value="06:45" format="24" icon="alarm" />
<x-timepicker variant="filled" label="Reminder" format="24" hint="Opens at the current time" />
<x-timepicker variant="filled" label="Required" format="24" required />
</x-livewire-material::stack>
</x-livewire-material::grid>
</x-stack>
</x-grid>
BLADE,
'Steps and limits' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
<x-livewire-material::stack gap="space200">
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
<x-stack gap="space200">
<x-timepicker label="Appointment" value="10:00" format="24" step="15" min="08:00" max="17:30" hint="Quarter hours from 08:00 to 17:30" />
<x-timepicker label="Night shift starts" value="23:00" format="24" min="22:00" max="06:00" hint="From 22:00, across midnight, to 06:00" />
</x-livewire-material::stack>
</x-stack>
<x-livewire-material::stack gap="space200" x-data="{ time: '14:05' }">
<x-stack gap="space200" x-data="{ time: '14:05' }">
<x-timepicker label="Bound with x-model" x-model="time" format="12" step="5" />
<p class="md-type-body-md md-ink-variant">Stored as <code x-text="time ?? 'null'"></code></p>
</x-livewire-material::stack>
</x-livewire-material::grid>
</x-stack>
</x-grid>
BLADE,
];
@endphp