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

Rewrite the showcase's Date pickers section without Tailwind

Browse Source 
Plan step 38: every two-column layout moves onto <x-grid> with
<x-stack> columns, x-data landing on the grid itself; the small demo
picker reuses the showcase-w-sm class the Text fields section already
defines.

DatepickerTest's Chromium selectors run against isolated probe
fixtures, not this page, so nothing there is at risk.

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:54:04 +02:00
co-authored by Claude Sonnet 5
parent 0eb0343008
commit 6f7dccc5de
1 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/pickers.blade.php
+45 -45
View File
@@ -1,85 +1,85 @@
@php
$examples = [
'Docked' => <<<'BLADE'
<div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
<div class="grid content-start gap-4">
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
<x-livewire-material::stack gap="space200">
<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>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
</x-livewire-material::stack>
<div class="grid content-start gap-4">
<x-livewire-material::stack gap="space200">
<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>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
</x-livewire-material::stack>
</x-livewire-material::grid>
BLADE,
'Modal and modal input' => <<<'BLADE'
<div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ birthday: '1990-05-17', delivery: null }">
<div class="grid content-start gap-4">
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ birthday: '1990-05-17', delivery: null }">
<x-livewire-material::stack gap="space200">
<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>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
</x-livewire-material::stack>
<div class="grid content-start gap-4">
<x-livewire-material::stack gap="space200">
<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>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
</x-livewire-material::stack>
</x-livewire-material::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. --}}
<div class="grid w-full gap-6 medium: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-livewire-material::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-livewire-material::stack gap="space200">
<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>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
</x-livewire-material::stack>
<div class="grid content-start gap-4">
<x-livewire-material::stack gap="space200">
<x-datepicker label="Leave" range mode="modal" x-model="leave" hint="Full screen on a compact window" />
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
</div>
</div>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
</x-livewire-material::stack>
</x-livewire-material::grid>
BLADE,
'First day of the week and format' => <<<'BLADE'
<div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
<div class="grid content-start gap-4">
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
<x-livewire-material::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="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
</div>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
</x-livewire-material::stack>
<div class="grid content-start gap-4">
<x-livewire-material::stack gap="space200">
<x-datepicker label="Training block" range mode="modal" week-start="1" format="dd.MM.yyyy" x-model="block" />
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(block)"></code></p>
</div>
</div>
<p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(block)"></code></p>
</x-livewire-material::stack>
</x-livewire-material::grid>
BLADE,
'Limits, errors and states' => <<<'BLADE'
<div class="grid w-full gap-6 medium:grid-cols-2">
<div class="grid content-start gap-4">
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
<x-livewire-material::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 />
</div>
</x-livewire-material::stack>
<div class="grid content-start gap-4">
<x-livewire-material::stack gap="space200">
<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>
<x-livewire-material::row gap="space125" wrap align="center">
<x-datepicker size="sm" aria-label="From" class="showcase-w-sm" />
</x-livewire-material::row>
</x-livewire-material::stack>
</x-livewire-material::grid>
BLADE,
];
@endphp
<section id="pickers" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Date pickers</h2>
<x-livewire-material::stack as="section" id="pickers" gap="space300">
<h2 class="md-type-headline-md">Date pickers</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-datepicker&gt;</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
</section>
</x-livewire-material::stack>