Andreas Reinhold / reiniandClaude Opus 5
f86afc0542
<x-checkbox> renders data-md-checkbox, its box, tick and dash, and its row, text and errors as data-md-* attributes; the 18px tick takes a size prop and a label-less box md-touch-target (plan step 36). selection.css moves into material.components as the row, text and state layer the three controls share, and each control's drawing goes to its own file: checkbox.css, radio.css, toggle.css, on the state tokens. The radio and the switch take the renamed shared hooks now and lose their layout classes in their own commits. field.js follows data-md-indeterminate. Renaming the switch's data-handle also stops selection.css matching the slider's handles, which it drew 24px above the track. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
71 lines
3.7 KiB
PHP
71 lines
3.7 KiB
PHP
{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer. The
|
|
tick and the dash fill the box at CheckboxTokens' 18px icon size, drawn from the 20 optical cut.
|
|
|
|
The label and its hint sit beside it and are its accessible name — the whole row is the
|
|
`<label>`, so either can be pressed. `right` puts the box at the end of the row, for a setting
|
|
read left to right. `indeterminate` shows the mixed state of a "select all" whose items are
|
|
partly ticked: HTML has no attribute for it, so the input is marked `data-md-indeterminate` and
|
|
resources/js/field.js keeps the property in step, on load and after every morph. Errors are
|
|
read from the bag under the `wire:model` name. Every other attribute reaches the `<input>`.
|
|
The drawing is resources/css/components/checkbox.css, on the row the three selection controls
|
|
share (resources/css/components/selection.css).
|
|
|
|
Without a label — a "select all" in a table header, a row's tick — the row is only the 18px box,
|
|
so the box carries `md-touch-target` and catches presses over M3's 48px minimum.
|
|
|
|
Grouping is the caller's, not this component's: M3 asks that from `expanded` (840px) a set of
|
|
related checkboxes be gathered into a contained region rather than left as one long column
|
|
(docs/reference/m3/components-navigation-selection-inputs.md § Checkbox, Behaviour). Lay the
|
|
group out yourself — a grid of one column that takes two from `expanded`, or an `<x-card>` or
|
|
side sheet holding them — and give the group a heading that names what it asks. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'right' => false,
|
|
'indeterminate' => false,
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->whereStartsWith('wire:model')->first();
|
|
$id = $attributes->get('id') ?? 'check-'.substr(md5($model.'|'.$label.'|'.$attributes->get('value')), 0, 12);
|
|
// A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
|
|
$errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
|
|
$messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
|
|
@endphp
|
|
|
|
<div data-md-checkbox {{ $attributes->only(['class', 'style', 'wire:key']) }}>
|
|
<label for="{{ $id }}" data-md-selection-row @if ($right) data-md-right @endif @if ($messages !== []) data-md-invalid @endif>
|
|
<span data-md-checkbox-box @if (blank($label) && blank($hint)) class="md-touch-target" @endif>
|
|
<input
|
|
{{ $attributes->except(['class', 'style', 'id', 'wire:key']) }}
|
|
id="{{ $id }}"
|
|
type="checkbox"
|
|
@if ($indeterminate) data-md-indeterminate @endif
|
|
@if ($messages !== []) aria-invalid="true" aria-describedby="{{ $id }}-support" @endif
|
|
/>
|
|
<x-livewire-material::icon name="check" size="18" data-md-checkbox-check />
|
|
<x-livewire-material::icon name="remove" size="18" data-md-checkbox-mixed />
|
|
</span>
|
|
|
|
@if (filled($label) || filled($hint))
|
|
<span data-md-selection-text>
|
|
@if (filled($label))
|
|
<span data-md-selection-label>{{ $label }}</span>
|
|
@endif
|
|
@if (filled($hint))
|
|
<span data-md-selection-hint>{{ $hint }}</span>
|
|
@endif
|
|
</span>
|
|
@endif
|
|
</label>
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $id }}-support" data-md-selection-support role="alert">
|
|
@foreach ($messages as $message)
|
|
<p>{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|