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

Draw the datepicker without Tailwind

Browse Source 
Plan step 36 (inputs group): <x-datepicker> renders data-md-datepicker
with every part data-md-datepicker-* (data-md-presentation replaces
data-presentation; data-md-range, data-md-docked, data-md-concealed and
data-md-value replace their unprefixed hooks), and datepicker.css moves
into material.components on the same px, spacing and colour tokens,
importing field.css, icon.css and button.css for what the view renders.
The month's live-announced text drops its `sr-only` class for a
data-md-datepicker-month-live hook with the same visually-hidden clip
(a package view writes no class but the interaction classes), matching
field's and search's counter/status live regions. The day, year, menu
button and list option keep their own hand-rolled state layer and focus
ring rather than the foundation's classes, as data-md-field-button
already does: each is a bigger interactive box than the round indicator
drawn inside it, which the foundation's fixed-geometry classes can't
draw, and `:focus-visible` only ever matches the actually-focused
element. Cancel, OK and the icon buttons are <x-button>, which already
draws from the classes. datepicker.js follows the renamed hooks and
dataset properties.

Shift+M/Y (reaching the month/year dropdowns) and the full-screen range
picker at compact were already implemented; this commit adds the browser
tests the plan owed for them plus the month list's keyboard-driven growth
in both directions and Save/close from the full-screen app bar
(docs/plans/material-3-browser-tests.md), written but not run — the
inputs group's Chromium run follows this stream.

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-14 19:12:58 +02:00
co-authored by Claude Opus 5
parent 52fd65a390
commit 72d9dbfc89
8 changed files with 351 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/datepicker.blade.php
+70 -70
View File
@@ -155,7 +155,7 @@
@if ($model === null) x-modelable="value" @endif
x-on:focusout="leave($event)"
x-on:pointerdown.outside="open && presentation === 'docked' && cancel(false)"
data-datepicker
data-md-datepicker
>
<div style="anchor-name: {{ $anchor }}">
<x-livewire-material::field
@@ -229,7 +229,7 @@
x-on:click="open ? cancel() : show()"
@if ($mode !== 'docked') tabindex="-1" @endif
@disabled($attributes->get('disabled') || $attributes->get('readonly'))
data-datepicker-toggle
data-md-datepicker-toggle
>
<x-livewire-material::icon name="calendar_today" :size="$fieldIconSize" />
</button>
@@ -237,11 +237,11 @@
</x-livewire-material::field>
</div>
<div id="{{ $id }}-support" data-datepicker-support data-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
<p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-datepicker-error></p>
<div id="{{ $id }}-support" data-md-datepicker-support data-md-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
<p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-md-datepicker-error></p>
@if ($invalid)
<div x-show="fieldError === ''" role="alert" data-datepicker-error>
<div x-show="fieldError === ''" role="alert" data-md-datepicker-error>
@foreach ($messages as $message)
<p>{{ $message }}</p>
@endforeach
@@ -267,114 +267,114 @@
popover="manual"
aria-label="{{ $title }}"
style="position-anchor: {{ $anchor }}"
x-bind:data-presentation="presentation"
x-bind:data-md-presentation="presentation"
x-on:cancel.prevent="cancel()"
x-on:click.self="presentation === 'modal' && cancel()"
x-on:keydown.escape.prevent.stop="cancel()"
data-datepicker-picker
data-md-datepicker-picker
>
<div tabindex="-1" data-datepicker-surface>
<div tabindex="-1" data-md-datepicker-surface>
{{-- M3's full-screen range picker (compact): an app bar with a close button and Save,
then the supporting text and the range as the headline, over a divider. --}}
<div data-datepicker-full x-cloak x-show="presentation === 'full'">
<div data-datepicker-app-bar>
<x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-datepicker-close />
<div data-md-datepicker-full x-cloak x-show="presentation === 'full'">
<div data-md-datepicker-app-bar>
<x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-md-datepicker-close />
<span data-datepicker-app-bar-actions>
<span data-md-datepicker-app-bar-actions>
<span x-show="! typing">
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<span x-show="typing">
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-datepicker-save />
<x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-md-datepicker-save />
</span>
</div>
<div data-datepicker-full-headline>
<p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<p data-datepicker-headline aria-live="polite" x-text="headline"></p>
<div data-md-datepicker-full-headline>
<p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
</div>
</div>
<div data-datepicker-header x-show="presentation === 'modal'" @if ($range) data-range @endif>
<p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<div data-md-datepicker-header x-show="presentation === 'modal'" @if ($range) data-md-range @endif>
<p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<div data-datepicker-headline-row>
<p data-datepicker-headline aria-live="polite" x-text="headline"></p>
<div data-md-datepicker-headline-row>
<p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
<span x-show="! typing">
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<span x-show="typing">
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
</div>
</div>
<div x-show="! typing" x-on:scroll="extendMonths($event)" data-datepicker-calendar>
<span id="{{ $id }}-month" class="sr-only" aria-live="polite" x-text="monthYear"></span>
<div x-show="! typing" x-on:scroll="extendMonths($event)" data-md-datepicker-calendar>
<span id="{{ $id }}-month" aria-live="polite" x-text="monthYear" data-md-datepicker-month-live></span>
<div data-datepicker-nav x-show="presentation === 'modal'">
<div data-md-datepicker-nav x-show="presentation === 'modal'">
<button
type="button"
data-datepicker-menu-button="years"
data-md-datepicker-menu-button="years"
x-on:click="toggleView('years')"
x-bind:aria-expanded="(view === 'years').toString()"
x-bind:aria-label="monthYear + ', ' + @js(__('Switch to selecting a year'))"
>
<span x-text="monthYear"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-datepicker-previous />
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-datepicker-next />
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-md-datepicker-previous />
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-md-datepicker-next />
</span>
</div>
<div data-datepicker-nav data-docked x-show="presentation === 'docked'">
<span data-datepicker-stepper>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<div data-md-datepicker-nav data-md-docked x-show="presentation === 'docked'">
<span data-md-datepicker-stepper>
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" />
</span>
<button
type="button"
data-datepicker-menu-button="months"
data-md-datepicker-menu-button="months"
x-on:click="toggleView('months')"
x-bind:aria-expanded="(view === 'months').toString()"
x-bind:aria-label="monthLabel + ', ' + @js(__('Switch to selecting a month'))"
>
<span x-text="monthLabel"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" />
</span>
</span>
<span data-datepicker-stepper>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-stepper>
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous year')" x-on:click="step(-12)" x-bind:disabled="view !== 'days' || ! canStep(-12)" />
</span>
<button
type="button"
data-datepicker-menu-button="years"
data-md-datepicker-menu-button="years"
x-on:click="toggleView('years')"
x-bind:aria-expanded="(view === 'years').toString()"
x-bind:aria-label="yearLabel + ', ' + @js(__('Switch to selecting a year'))"
>
<span x-text="yearLabel"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next year')" x-on:click="step(12)" x-bind:disabled="view !== 'days' || ! canStep(12)" />
</span>
</span>
</div>
<table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-datepicker-grid>
<table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-md-datepicker-grid>
<thead>
<tr>
<template x-for="weekday in weekdays" :key="weekday.long">
@@ -387,7 +387,7 @@
<tr>
{{-- Full screen: a month's name heads its weeks, M3's month label. --}}
<template x-if="row.label">
<th colspan="7" scope="colgroup" x-text="row.label" data-datepicker-month-label></th>
<th colspan="7" scope="colgroup" x-text="row.label" data-md-datepicker-month-label></th>
</template>
<template x-for="(cell, column) in (row.cells ?? [])" :key="column">
@@ -398,16 +398,16 @@
x-bind:aria-selected="! cell.blank && (cell.selected || cell.between) ? 'true' : null"
x-bind:aria-disabled="! cell.blank && cell.disabled ? 'true' : null"
x-bind:aria-current="! cell.blank && cell.today ? 'date' : null"
x-bind:data-value="cell.blank ? null : cell.value"
x-bind:data-blank="cell.blank ? '' : null"
x-bind:data-outside="cell.outside ? '' : null"
x-bind:data-today="cell.today ? '' : null"
x-bind:data-selected="cell.selected ? '' : null"
x-bind:data-start="cell.start ? '' : null"
x-bind:data-end="cell.end ? '' : null"
x-bind:data-between="cell.between ? '' : null"
x-bind:data-md-value="cell.blank ? null : cell.value"
x-bind:data-md-blank="cell.blank ? '' : null"
x-bind:data-md-outside="cell.outside ? '' : null"
x-bind:data-md-today="cell.today ? '' : null"
x-bind:data-md-selected="cell.selected ? '' : null"
x-bind:data-md-start="cell.start ? '' : null"
x-bind:data-md-end="cell.end ? '' : null"
x-bind:data-md-between="cell.between ? '' : null"
x-on:click="choose(cell)"
data-datepicker-day
data-md-datepicker-day
><span x-text="cell.blank ? '' : cell.label"></span></td>
</template>
</tr>
@@ -415,22 +415,22 @@
</tbody>
</table>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-datepicker-list data-datepicker-years>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-md-datepicker-list data-md-datepicker-years>
<template x-for="year in years" :key="year.value">
<button
type="button"
role="option"
x-bind:aria-selected="year.selected.toString()"
x-bind:tabindex="year.selected ? 0 : -1"
x-bind:data-current="year.current ? '' : null"
x-bind:data-md-current="year.current ? '' : null"
x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
x-text="year.label"
data-datepicker-year
data-md-datepicker-year
></button>
</template>
</div>
<div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
<div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
<template x-for="month in months" :key="month.value">
<button
type="button"
@@ -439,15 +439,15 @@
x-bind:aria-disabled="month.disabled ? 'true' : null"
x-bind:tabindex="month.selected ? 0 : -1"
x-on:click="month.disabled || showMonthOf(+shown.slice(0, 4), month.value)"
data-datepicker-option
data-md-datepicker-option
>
<x-livewire-material::icon name="check" data-datepicker-check />
<x-livewire-material::icon name="check" data-md-datepicker-check />
<span x-text="month.label"></span>
</button>
</template>
</div>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
<template x-for="year in years" :key="year.value">
<button
type="button"
@@ -455,17 +455,17 @@
x-bind:aria-selected="year.selected.toString()"
x-bind:tabindex="year.selected ? 0 : -1"
x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
data-datepicker-option
data-md-datepicker-option
>
<x-livewire-material::icon name="check" data-datepicker-check />
<x-livewire-material::icon name="check" data-md-datepicker-check />
<span x-text="year.label"></span>
</button>
</template>
</div>
</div>
<div x-show="typing" data-datepicker-entry>
<div @if ($range) data-range @endif data-datepicker-entry-fields>
<div x-show="typing" data-md-datepicker-entry>
<div @if ($range) data-md-range @endif data-md-datepicker-entry-fields>
<x-livewire-material::field id="{{ $id }}-entry" :label="$range ? __('Start date') : __('Date')" :$variant x-bind:data-md-invalid="entryError !== '' ? '' : null">
<input
id="{{ $id }}-entry"
@@ -502,15 +502,15 @@
@endif
</div>
<div id="{{ $id }}-entry-support" data-datepicker-support>
<p x-show="entryError !== ''" x-text="entryError" role="alert" data-datepicker-error></p>
<div id="{{ $id }}-entry-support" data-md-datepicker-support>
<p x-show="entryError !== ''" x-text="entryError" role="alert" data-md-datepicker-error></p>
</div>
</div>
{{-- The full-screen picker confirms from its app bar, so it draws no action row. --}}
<div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-datepicker-actions>
<x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-datepicker-cancel />
<x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-datepicker-confirm />
<div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-md-datepicker-actions>
<x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-md-datepicker-cancel />
<x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-md-datepicker-confirm />
</div>
</div>
</dialog>