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
57 lines
2.2 KiB
PHP
57 lines
2.2 KiB
PHP
{{-- A switch, M3's: a 52×32 track whose handle grows and slides across when it turns on.
|
||
|
||
On a real checkbox with `role="switch"`, so it is focusable, announced as on or off, and takes
|
||
Space from the keyboard; the handle is drawn beside it. `label` and `hint` sit beside it and are
|
||
its name — a switch without `label` needs an `aria-label`. `right` puts it at the end of the
|
||
row, where a setting's switch usually is. `icons` draws a check on the handle when on and a
|
||
cross when off; `icons="selected"` only the check. Every other attribute reaches the `<input>`
|
||
(resources/css/components/selection.css). --}}
|
||
|
||
@props([
|
||
'label' => null,
|
||
'hint' => null,
|
||
'right' => false,
|
||
'icons' => false,
|
||
])
|
||
|
||
@php
|
||
$model = $attributes->whereStartsWith('wire:model')->first();
|
||
$id = $attributes->get('id') ?? 'switch-'.substr(md5($model.'|'.$label), 0, 12);
|
||
$icons = $icons === 'selected' ? 'selected' : ($icons ? 'both' : null);
|
||
@endphp
|
||
|
||
<div {{ $attributes->only(['class', 'wire:key'])->class(['min-w-0']) }}>
|
||
<label for="{{ $id }}" data-selection @class([
|
||
'flex gap-4',
|
||
'items-start' => filled($hint),
|
||
'items-center' => blank($hint),
|
||
'flex-row-reverse justify-between' => $right,
|
||
])>
|
||
<span data-switch @if ($icons) data-icons="{{ $icons }}" @endif>
|
||
<input
|
||
{{ $attributes->except(['class', 'id', 'wire:key']) }}
|
||
id="{{ $id }}"
|
||
type="checkbox"
|
||
role="switch"
|
||
/>
|
||
<span data-handle>
|
||
@if ($icons)
|
||
<x-livewire-material::icon name="check" class="size-4" data-on />
|
||
<x-livewire-material::icon name="close" class="size-4" data-off />
|
||
@endif
|
||
</span>
|
||
</span>
|
||
|
||
@if (filled($label) || filled($hint))
|
||
<span class="min-w-0">
|
||
@if (filled($label))
|
||
<span class="block type-body-lg text-on-surface" data-selection-label>{{ $label }}</span>
|
||
@endif
|
||
@if (filled($hint))
|
||
<span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $hint }}</span>
|
||
@endif
|
||
</span>
|
||
@endif
|
||
</label>
|
||
</div>
|