Andreas Reinhold / reiniandClaude Opus 5
51bf034b74
tests / feature (8.5) (push) Successful in 1m14s
tests / lint (push) Successful in 1m1s
tests / feature (8.4) (push) Successful in 1m9s
tests / browser (chrome, chromium) (push) Successful in 3m22s
tests / browser (firefox, firefox) (push) Successful in 4m37s
tests / browser (safari, webkit) (push) Successful in 5m4s
A search app bar looks through every section, example and component, opens the section, or the example at its anchor on its page, and is reached from anywhere with / or Ctrl+K. Section pages now carry their own heading. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
72 lines
3.8 KiB
PHP
72 lines
3.8 KiB
PHP
@php
|
|
$examples = [
|
|
'Docked' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Expires on" clearable x-model="expires" hint="Type a date or pick one" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Starts on" variant="filled" icon="event" x-model="starts" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Modal and modal input' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ birthday: '1990-05-17', delivery: null }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Birthday" mode="modal" x-model="birthday" :max="now()" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Delivery" mode="input" x-model="delivery" hint="Opens on a text field" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Range' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Trip" range x-model="trip" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Leave" range mode="modal" x-model="leave" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Limits, errors and states' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Within the next 30 days" :min="now()" :max="now()->addDays(30)" hint="Days outside are disabled" />
|
|
<x-datepicker label="Required" required />
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Disabled" value="2026-09-13" disabled />
|
|
<x-datepicker label="Read-only" value="2026-09-13" readonly />
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<x-datepicker size="sm" aria-label="From" class="w-48" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="pickers" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Date pickers</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-datepicker></code> — docked, modal and modal input; single dates and ranges. Month and weekday names and the first day of the week follow the application's locale.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|