Andreas Reinhold / reiniandClaude Opus 5
0fee2a0952
tests / lint (push) Successful in 1m4s
tests / feature (8.4) (push) Successful in 1m8s
tests / feature (8.5) (push) Successful in 1m8s
tests / browser (chrome, chromium) (push) Successful in 3m6s
tests / browser (firefox, firefox) (push) Successful in 3m45s
tests / browser (safari, webkit) (push) Successful in 5m0s
M3's assist, filter, input and suggestion chips with chip sets; choices as filter chips or a searchable combobox whose list is an anchored popover; and the search bar that opens into a docked or full-screen search view. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
66 lines
2.9 KiB
PHP
66 lines
2.9 KiB
PHP
{{-- A set of M3 chips: a row that wraps, 8px apart, named for screen readers as a group.
|
|
|
|
<x-chip-set label="File types" hint="Show only these" error-field="kinds">
|
|
<x-chip type="filter" label="Photos" value="photos" wire:model.live="kinds" />
|
|
<x-chip type="filter" label="Documents" value="documents" wire:model.live="kinds" />
|
|
</x-chip-set>
|
|
|
|
`label` is shown above the row and names the group; without it, pass `aria-label`. `hint`
|
|
sits under it, and a validation message for `error-field` (the property the chips bind, and
|
|
its items: `kinds` and `kinds.*`) replaces the hint.
|
|
|
|
`scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a narrow
|
|
screen: the edge it can still scroll towards fades (resources/js/chips.js), and a chip reached
|
|
with Tab scrolls clear of the fade. Removing a focused input chip moves focus within the set. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'errorField' => null,
|
|
'scroll' => false,
|
|
])
|
|
|
|
@php
|
|
$key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
$messages = filled($errorField) && isset($errors)
|
|
? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorField), $errors->get($errorField.'.*')])))
|
|
: [];
|
|
$describedBy = $messages !== [] || filled($hint) ? "material-chip-set-{$key}-hint" : null;
|
|
@endphp
|
|
|
|
<div
|
|
role="group"
|
|
@if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
|
|
@if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
|
|
{{ $attributes->class('min-w-0') }}
|
|
>
|
|
@if (filled($label))
|
|
<p id="material-chip-set-{{ $key }}-label" class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</p>
|
|
@endif
|
|
|
|
@if ($scroll)
|
|
<div
|
|
data-chip-set
|
|
x-data="materialChipSet"
|
|
wire:ignore.self
|
|
class="-mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
|
|
>
|
|
{{ $slot }}
|
|
</div>
|
|
@else
|
|
<div data-chip-set class="flex flex-wrap gap-2">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $describedBy }}">
|
|
@foreach ($messages as $message)
|
|
<p class="mt-1 type-body-sm text-error">{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@elseif (filled($hint))
|
|
<p id="{{ $describedBy }}" class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
|
|
@endif
|
|
</div>
|