Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
363 lines
19 KiB
PHP
363 lines
19 KiB
PHP
{{-- A time: M3's time picker, opened from a text field.
|
||
|
||
<x-timepicker label="Starts at" wire:model="startsAt" />
|
||
<x-timepicker label="Alarm" wire:model.live="alarm" format="24" step="5" min="06:00" max="22:00" clearable />
|
||
|
||
The field is read-only and opens the picker in a modal `<dialog>` on a press, Enter, Space or
|
||
ArrowDown (the clock icon at its end opens it too). The picker is M3's dial: the hour and minute
|
||
boxes on top, AM and PM beside them on a 12-hour clock, the clock face below. A press or a drag
|
||
on the dial picks the hour, then it moves on to the minutes; the arrow keys change the value on
|
||
the focused dial, Home and End go to the ends, Enter confirms, and Escape, Cancel or a press on
|
||
the scrim close it without a change, handing focus back to the field. The keyboard icon swaps
|
||
the dial for M3's input variant: two text fields, with the error under a field that holds
|
||
something impossible. In a landscape window the dial lies on its side, as Compose lays it out.
|
||
|
||
`wire:model` (or `x-model`) holds the time as `H:i`, and null until one is chosen; a value with
|
||
seconds (`09:30:00`, from a `time` column) is read, and written back as `H:i`. Nothing is written
|
||
until OK. The draft starts at the bound time, or now. Errors are read from the bag under the
|
||
`wire:model` name and replace the hint.
|
||
|
||
`format` is `12` or `24`; without it the hour cycle is the locale's (`locale`, the app locale by
|
||
default) as `Intl.DateTimeFormat` reports it, and the field shows the time as the locale writes
|
||
it. `step` is the minute step (a tap on the minute dial picks fives, or steps when five is not a
|
||
multiple of the step; a drag and the arrows move by the step). `min` and `max` (`H:i`, inclusive;
|
||
a `min` later than `max` spans midnight) grey out and skip what lies outside them and turn typed
|
||
values outside them into errors — validate on the server as well. `clearable` adds a button that
|
||
empties the field; `name` posts the value from a hidden input. `label`, `hint`, `icon`, `variant`
|
||
and `size` are the field's; other attributes (`required`, `disabled`, `placeholder`) reach the
|
||
field's input.
|
||
|
||
From androidx Compose Material 3 at commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326 (Apache-2.0):
|
||
TimePickerTokens and TimeInputTokens — a surface-container-high dialog with an extra-large
|
||
corner and elevation 3, a 256dp surface-container-highest dial with body-large numbers, a primary
|
||
selector with a 48dp handle, a 2dp line and an 8dp centre, 96×80 time selector boxes in
|
||
display-large (primary-container when selected), 96×72 time fields in display-medium — and
|
||
TimePicker.kt and TimePickerDialog.kt for the layout, the 24-hour inner ring (12–23, at 69dp;
|
||
00–11 outside at 101dp, as Material Components for Android labels them too), the gestures, the
|
||
move on to minutes and the error texts. The period selector is Compose's current default
|
||
(`isUpdatedTimepickerToggleEnabled`): two separate shape-morphing toggle buttons in
|
||
primary-container, not the outlined pair its tokens still describe. The dial's numbers are
|
||
aria-hidden; the dial is a `slider` whose value text names the hour or minute. The dialog is
|
||
`wire:ignore`, so a Livewire render never closes an open picker or resets its draft. --}}
|
||
|
||
@props([
|
||
'label' => null,
|
||
'hint' => null,
|
||
'icon' => null,
|
||
'variant' => null,
|
||
'size' => 'md',
|
||
'format' => null,
|
||
'locale' => null,
|
||
'min' => null,
|
||
'max' => null,
|
||
'step' => 1,
|
||
'value' => null,
|
||
'name' => null,
|
||
'clearable' => false,
|
||
])
|
||
|
||
@php
|
||
$model = $attributes->wire('model')->value() ?: null;
|
||
$messages = $model !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($model)) : [];
|
||
$id = $attributes->get('id') ?? 'timepicker-'.substr(md5($model.'|'.$label.'|'.$name.'|timepicker'), 0, 12);
|
||
|
||
$cycle = in_array((string) $format, ['12', '24'], true) ? (int) $format : null;
|
||
$locale = str_replace('_', '-', filled($locale) ? $locale : app()->getLocale());
|
||
$interval = is_numeric($step) && (int) $step >= 1 && (int) $step <= 60 ? (int) $step : 1;
|
||
$clock = fn (mixed $time): ?string => is_string($time) && preg_match('/^([01]?\d|2[0-3]):([0-5]\d)/', $time, $parts) === 1
|
||
? sprintf('%02d:%02d', $parts[1], $parts[2])
|
||
: null;
|
||
$earliest = $clock($min);
|
||
$latest = $clock($max);
|
||
|
||
// Rendered as the bound property already says, so the field is not empty until Alpine starts.
|
||
$current = $value;
|
||
if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
|
||
$current = data_get($component, $model);
|
||
}
|
||
$current = $clock($current);
|
||
|
||
// The first frame writes the time as the browser will; ICU decides the hour cycle on both sides.
|
||
$display = '';
|
||
if ($current !== null) {
|
||
$time = \Carbon\CarbonImmutable::createFromFormat('!H:i', $current, 'UTC');
|
||
$shown = $cycle;
|
||
|
||
if (class_exists(\IntlDatePatternGenerator::class)) {
|
||
$generator = new \IntlDatePatternGenerator(str_replace('-', '_', $locale));
|
||
$shown ??= preg_match('/[hK]/', preg_replace("/'[^']*'/", '', (string) $generator->getBestPattern('j'))) === 1 ? 12 : 24;
|
||
$pattern = $generator->getBestPattern($shown === 12 ? 'hmm' : 'Hmm');
|
||
$display = (string) (new \IntlDateFormatter(str_replace('-', '_', $locale), \IntlDateFormatter::NONE, \IntlDateFormatter::NONE, 'UTC', null, $pattern))->format($time);
|
||
} else {
|
||
$display = $shown === 12 ? $time->format('g:i A') : $time->format('H:i');
|
||
}
|
||
}
|
||
|
||
$config = [
|
||
'locale' => $locale,
|
||
'format' => $cycle,
|
||
'min' => $earliest,
|
||
'max' => $latest,
|
||
'step' => $interval,
|
||
'strings' => [
|
||
'am' => __('AM'),
|
||
'pm' => __('PM'),
|
||
'oclock' => __(':hour o\'clock'),
|
||
'hours' => __(':hour hours'),
|
||
'minutes' => __(':minute minutes'),
|
||
'hourError12' => __('Hour must be 1–12'),
|
||
'hourError24' => __('Hour must be 0–23'),
|
||
'minuteError' => __('Minute must be 0–59'),
|
||
'stepError' => __('Minute must be a multiple of :step'),
|
||
'between' => __('Choose a time from :min to :max'),
|
||
'after' => __('Choose :min or later'),
|
||
'before' => __('Choose :max or earlier'),
|
||
],
|
||
];
|
||
|
||
$constrained = $earliest !== null || $latest !== null || $interval > 1;
|
||
|
||
// The dial's numbers, placed round the ring from twelve o'clock (TimePicker.kt's CircularLayout).
|
||
$spot = fn (int $index): string => sprintf('--x: %.4F; --y: %.4F', sin(deg2rad($index * 30)), -cos(deg2rad($index * 30)));
|
||
$sets = [
|
||
'hour12' => array_map(fn (int $index): array => ['value' => $index ?: 12, 'text' => $index ?: 12, 'index' => $index, 'inner' => false, 'allowed' => "hourAllowed({$index} + (isPm ? 12 : 0))"], range(0, 11)),
|
||
'hour24' => [
|
||
...array_map(fn (int $index): array => ['value' => $index, 'text' => $index === 0 ? '00' : $index, 'index' => $index, 'inner' => false, 'allowed' => "hourAllowed({$index})"], range(0, 11)),
|
||
...array_map(fn (int $index): array => ['value' => $index + 12, 'text' => $index + 12, 'index' => $index, 'inner' => true, 'allowed' => 'hourAllowed('.($index + 12).')'], range(0, 11)),
|
||
],
|
||
'minute' => array_map(fn (int $index): array => ['value' => $index * 5, 'text' => $index === 0 ? '00' : $index * 5, 'index' => $index, 'inner' => false, 'allowed' => 'minuteAllowed('.($index * 5).')'], range(0, 11)),
|
||
];
|
||
|
||
$inputAttributes = $attributes->whereDoesntStartWith(['wire:model', 'x-model'])->except(['class', 'id', 'wire:key', 'placeholder']);
|
||
$disabled = (bool) $attributes->get('disabled');
|
||
$described = $messages !== [] || filled($hint);
|
||
@endphp
|
||
|
||
<div
|
||
{{ $attributes->only(['class', 'wire:key', 'x-model']) }}
|
||
x-data="materialTimepicker(@if ($model !== null) @entangle($attributes->wire('model')) @else @js($current) @endif, @js($config))"
|
||
@if ($model === null) x-modelable="value" @endif
|
||
>
|
||
<x-livewire-material::field :$id :$label :$hint :$messages :$icon :$size :$variant data-timepicker-field>
|
||
<input
|
||
{{ $inputAttributes }}
|
||
id="{{ $id }}"
|
||
type="text"
|
||
readonly
|
||
value="{{ $display }}"
|
||
x-bind:value="display"
|
||
x-ref="input"
|
||
placeholder="{{ filled($attributes->get('placeholder')) ? $attributes->get('placeholder') : ' ' }}"
|
||
autocomplete="off"
|
||
aria-haspopup="dialog"
|
||
aria-controls="{{ $id }}-dialog"
|
||
aria-expanded="false"
|
||
x-bind:aria-expanded="open.toString()"
|
||
@if ($messages !== []) aria-invalid="true" @endif
|
||
@if ($described) aria-describedby="{{ $id }}-support" @endif
|
||
class="field-control"
|
||
x-on:click="show()"
|
||
x-on:keydown.enter.prevent="show()"
|
||
x-on:keydown.space.prevent="show()"
|
||
x-on:keydown.arrow-down.prevent="show()"
|
||
/>
|
||
|
||
<x-slot:trailing>
|
||
@if ($clearable)
|
||
<button
|
||
type="button"
|
||
x-on:click="value = null; $refs.input.focus()"
|
||
class="field-trailing field-clear field-button"
|
||
aria-label="{{ __('Clear') }}"
|
||
data-field-clear
|
||
@disabled($disabled)
|
||
>
|
||
<x-livewire-material::icon name="close" class="size-(--field-icon)" />
|
||
</button>
|
||
@endif
|
||
|
||
<button
|
||
type="button"
|
||
tabindex="-1"
|
||
x-on:click="show()"
|
||
class="field-trailing field-button"
|
||
aria-label="{{ __('Choose time') }}"
|
||
data-timepicker-open
|
||
@disabled($disabled)
|
||
>
|
||
<x-livewire-material::icon name="schedule" class="size-(--field-icon)" />
|
||
</button>
|
||
</x-slot:trailing>
|
||
</x-livewire-material::field>
|
||
|
||
@if (filled($name))
|
||
<input type="hidden" name="{{ $name }}" value="{{ $current }}" x-bind:value="value ?? ''" />
|
||
@endif
|
||
|
||
<dialog
|
||
id="{{ $id }}-dialog"
|
||
wire:ignore
|
||
x-ref="dialog"
|
||
aria-labelledby="{{ $id }}-title"
|
||
data-timepicker-dialog
|
||
x-on:close="closed()"
|
||
x-on:pointerdown="scrimPressed = $event.target === $el"
|
||
x-on:click.self="if (scrimPressed) cancel()"
|
||
class="m-auto overflow-visible bg-transparent p-0 text-on-surface backdrop:bg-scrim/32 opacity-100 scale-100 starting:opacity-0 starting:scale-95 transition-[opacity,scale] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast"
|
||
>
|
||
<div data-timepicker-surface x-bind:data-mode="mode" data-mode="dial">
|
||
<h2 id="{{ $id }}-title" data-timepicker-title x-text="mode === 'dial' ? @js(__('Select time')) : @js(__('Enter time'))">{{ __('Select time') }}</h2>
|
||
|
||
<div data-timepicker-picker>
|
||
<div data-timepicker-display>
|
||
<div data-timepicker-numbers>
|
||
<button
|
||
type="button"
|
||
data-timepicker-box="hour"
|
||
class="state-layer focus-ring"
|
||
aria-pressed="true"
|
||
x-bind:aria-pressed="(view === 'hour').toString()"
|
||
x-bind:aria-label="@js(__('Select hour')) + ', ' + hourLabel"
|
||
x-on:click="choose('hour')"
|
||
x-text="hourLabel"
|
||
></button>
|
||
<span data-timepicker-separator aria-hidden="true">:</span>
|
||
<button
|
||
type="button"
|
||
data-timepicker-box="minute"
|
||
class="state-layer focus-ring"
|
||
aria-pressed="false"
|
||
x-bind:aria-pressed="(view === 'minute').toString()"
|
||
x-bind:aria-label="@js(__('Select minutes')) + ', ' + minuteLabel"
|
||
x-on:click="choose('minute')"
|
||
x-text="minuteLabel"
|
||
></button>
|
||
</div>
|
||
|
||
<div data-timepicker-period role="group" aria-label="{{ __('Select AM or PM') }}" x-show="! is24">
|
||
@foreach ([false => 'am', true => 'pm'] as $pm => $period)
|
||
<button
|
||
type="button"
|
||
data-timepicker-period-option="{{ $period }}"
|
||
class="state-layer focus-ring"
|
||
x-bind:aria-pressed="({{ $pm ? '' : '! ' }}isPm).toString()"
|
||
x-bind:disabled="! periodAllowed({{ $pm ? 'true' : 'false' }})"
|
||
x-on:click="setPeriod({{ $pm ? 'true' : 'false' }})"
|
||
x-text="periods[{{ (int) $pm }}]"
|
||
>{{ $pm ? __('PM') : __('AM') }}</button>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
x-ref="dial"
|
||
data-timepicker-dial
|
||
role="slider"
|
||
tabindex="0"
|
||
aria-valuemin="0"
|
||
x-bind:aria-label="view === 'hour' ? @js(__('Select hour')) : @js(__('Select minutes'))"
|
||
x-bind:aria-valuemax="view === 'hour' ? 23 : 59"
|
||
x-bind:aria-valuenow="view === 'hour' ? hour : minute"
|
||
x-bind:aria-valuetext="valueText"
|
||
x-bind:data-view="view"
|
||
x-bind:data-cycle="is24 ? '24' : '12'"
|
||
x-bind:data-inner="inner ? '' : null"
|
||
x-bind:data-dragging="dragging ? '' : null"
|
||
x-bind:style="{ '--timepicker-angle': angle + 'deg' }"
|
||
x-on:pointerdown="press($event)"
|
||
x-on:keydown="key($event)"
|
||
>
|
||
@foreach (['labels', 'ink'] as $layer)
|
||
@if ($layer === 'ink')
|
||
<div data-timepicker-selector aria-hidden="true">
|
||
<span data-timepicker-track></span>
|
||
<span data-timepicker-centre></span>
|
||
<span data-timepicker-handle></span>
|
||
</div>
|
||
@endif
|
||
|
||
<div data-timepicker-{{ $layer }} aria-hidden="true">
|
||
@foreach ($sets as $set => $labels)
|
||
<div data-timepicker-set="{{ $set }}">
|
||
@foreach ($labels as $spotLabel)
|
||
<span
|
||
@if ($layer === 'labels') data-timepicker-label="{{ $set }}" data-value="{{ $spotLabel['value'] }}" @endif
|
||
@if ($spotLabel['inner']) data-inner @endif
|
||
@if ($constrained && $layer === 'labels') x-bind:data-disabled="{{ $spotLabel['allowed'] }} ? null : ''" @endif
|
||
style="{{ $spot($spotLabel['index']) }}"
|
||
>{{ $spotLabel['text'] }}</span>
|
||
@endforeach
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
<div data-timepicker-typing>
|
||
<div data-timepicker-inputs>
|
||
@foreach (['hour' => __('Hour'), 'minute' => __('Minute')] as $part => $partLabel)
|
||
@if ($part === 'minute')
|
||
<span data-timepicker-separator aria-hidden="true">:</span>
|
||
@endif
|
||
|
||
<div data-timepicker-column>
|
||
<input
|
||
id="{{ $id }}-{{ $part }}"
|
||
type="text"
|
||
inputmode="numeric"
|
||
maxlength="2"
|
||
autocomplete="off"
|
||
data-timepicker-input="{{ $part }}"
|
||
x-ref="{{ $part }}Input"
|
||
aria-label="{{ $partLabel }}"
|
||
aria-describedby="{{ $id }}-{{ $part }}-support"
|
||
x-bind:aria-invalid="{{ $part }}Error ? 'true' : null"
|
||
x-bind:value="{{ $part }}Text"
|
||
x-on:input="{{ $part === 'hour' ? 'typeHour' : 'typeMinute' }}($event)"
|
||
x-on:focus="view = '{{ $part }}'; $el.select()"
|
||
x-on:keydown.enter.prevent="confirm()"
|
||
/>
|
||
<p
|
||
id="{{ $id }}-{{ $part }}-support"
|
||
data-timepicker-support
|
||
aria-live="polite"
|
||
x-bind:data-error="{{ $part }}Error ? '' : null"
|
||
x-text="{{ $part }}Error ?? @js($partLabel)"
|
||
>{{ $partLabel }}</p>
|
||
</div>
|
||
@endforeach
|
||
|
||
<div data-timepicker-period role="group" aria-label="{{ __('Select AM or PM') }}" x-show="! is24">
|
||
@foreach ([false => 'am', true => 'pm'] as $pm => $period)
|
||
<button
|
||
type="button"
|
||
data-timepicker-period-option="{{ $period }}"
|
||
class="state-layer focus-ring"
|
||
x-bind:aria-pressed="({{ $pm ? '' : '! ' }}isPm).toString()"
|
||
x-bind:disabled="! periodAllowed({{ $pm ? 'true' : 'false' }})"
|
||
x-on:click="setPeriod({{ $pm ? 'true' : 'false' }})"
|
||
x-text="periods[{{ (int) $pm }}]"
|
||
>{{ $pm ? __('PM') : __('AM') }}</button>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
<p data-timepicker-range-error role="alert" x-show="rangeError" x-text="rangeError"></p>
|
||
</div>
|
||
|
||
<div data-timepicker-actions>
|
||
<span data-timepicker-when="dial">
|
||
<x-livewire-material::button icon="keyboard" :tooltip="__('Switch to text input mode')" x-on:click="toggleMode()" data-timepicker-mode="input" />
|
||
</span>
|
||
<span data-timepicker-when="input">
|
||
<x-livewire-material::button icon="schedule" :tooltip="__('Switch to clock mode')" x-on:click="toggleMode()" data-timepicker-mode="dial" />
|
||
</span>
|
||
<span data-timepicker-spacer></span>
|
||
<x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-timepicker-cancel />
|
||
<x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-timepicker-confirm />
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
</div>
|