Andreas Reinhold / reiniandClaude Opus 5
ebdcdb82b5
Plan step 38 review: the component sections' code samples, which an application copies, carried 60 data-md-showcase-* hooks that only showcase.css draws (a sized loading indicator, the plain badge's own colours, a bordered bar frame, the navigation demos' frames, a table's scroll wrapper...), so a copied sample did nothing in the application. They now write what an application has: <x-surface outlined corner> for a frame and a line, <x-row> for the FAB menu's corner, and an inline style from the tokens for a size, a scroll box or a colour, as the Containment batch already did. The side sheet demo takes align="stretch", which holds in both of <x-row stack-below>'s modes, instead of a hook that undid align="start" once stacked. The menu icon colours go through icon-class with two unlayered application-like classes, which the sample's comment names, and the fields' and date picker's widths are inline styles now that style reaches their roots. The radio hint said "from sm"; it is medium. showcase.css keeps only the frame and the foundation specimens; its header describes the file instead of the batches that wrote it. The tests reject a showcase hook or a class outside md-* and the named application classes in any example, a showcase.css selector outside its own hooks, and a hook no showcase view renders. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
86 lines
5.0 KiB
PHP
86 lines
5.0 KiB
PHP
@php
|
|
$examples = [
|
|
'Docked' => <<<'BLADE'
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Expires on" clearable x-model="expires" hint="Type a date or pick one" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
|
|
</x-stack>
|
|
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Starts on" variant="filled" icon="event" x-model="starts" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
|
|
</x-stack>
|
|
</x-grid>
|
|
BLADE,
|
|
'Modal and modal input' => <<<'BLADE'
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ birthday: '1990-05-17', delivery: null }">
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Birthday" mode="modal" x-model="birthday" :max="now()" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
|
|
</x-stack>
|
|
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Delivery" mode="input" x-model="delivery" hint="Opens on a text field" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
|
|
</x-stack>
|
|
</x-grid>
|
|
BLADE,
|
|
'Range' => <<<'BLADE'
|
|
{{-- Narrow the window below 600px: a range picker becomes M3's full-screen one, with a close button, Save, and the months scrolled through. --}}
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Trip" range x-model="trip" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
|
|
</x-stack>
|
|
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Leave" range mode="modal" x-model="leave" hint="Full screen on a compact window" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
|
|
</x-stack>
|
|
</x-grid>
|
|
BLADE,
|
|
'First day of the week and format' => <<<'BLADE'
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Race day" week-start="0" format="yyyy-MM-dd" x-model="race" hint="Weeks start on Sunday; typed year first" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
|
|
</x-stack>
|
|
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Training block" range mode="modal" week-start="1" format="dd.MM.yyyy" x-model="block" />
|
|
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(block)"></code></p>
|
|
</x-stack>
|
|
</x-grid>
|
|
BLADE,
|
|
'Limits, errors and states' => <<<'BLADE'
|
|
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Within the next 30 days" :min="now()" :max="now()->addDays(30)" hint="Days outside are disabled" />
|
|
<x-datepicker label="Required" required />
|
|
</x-stack>
|
|
|
|
<x-stack gap="space200">
|
|
<x-datepicker label="Disabled" value="2026-09-13" disabled />
|
|
<x-datepicker label="Read-only" value="2026-09-13" readonly />
|
|
<x-row gap="space125" wrap align="center">
|
|
<x-datepicker size="sm" aria-label="From" style="width: 192px;" />
|
|
</x-row>
|
|
</x-stack>
|
|
</x-grid>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="pickers" gap="space300">
|
|
<h2 class="md-visually-hidden">Date pickers</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-datepicker></code> — docked, modal and modal input; single dates and ranges. Month and weekday names, the first day of the week and the typed format follow the application's locale; <code>week-start</code> and <code>format</code> set the last two for someone who chose their own.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|