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

Draw the choices without Tailwind

Browse Source 
<x-choices> renders data-md-choices (data-md-searchable) and its
"Nothing matches" row as data-md-choices-empty, drawn by
components/choices.css, which brings the field, chip set and chip it
renders (plan step 36).

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 14:55:29 +02:00
co-authored by Claude Opus 5
parent 55cf8ceed7
commit 1bb5adab0e
4 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/choices.blade.php
+12 -4
View File
@@ -19,7 +19,12 @@
string: a list of integers stays a list of integers. Without `wire:model` it works on its own
and binds with `x-model`. Errors for the property and its items replace the hint. When the
options change on the server, give the component a `wire:key` that changes with them: the
options are baked into its Alpine state. --}}
options are baked into its Alpine state.
The root renders `data-md-choices` (and `data-md-searchable`); the chips are `<x-chip-set>`'s, the
field `<x-field>`'s, and the open list M3's menu (resources/css/components/menu.css, as
`data-md-field-menu` and `data-md-field-option`). resources/css/components/choices.css brings
them together. --}}
@props([
'label' => null,
@@ -64,7 +69,9 @@
@if ($searchable)
<div
{{ $attributes->only(['class', 'wire:key', 'x-model']) }}
data-md-choices
data-md-searchable
{{ $attributes->only(['class', 'style', 'wire:key', 'x-model']) }}
x-data="{
@if ($model !== null) value: @entangle($attributes->wire('model')), @else value: @js($current), @endif
options: @js($choices),
@@ -187,12 +194,13 @@
<x-livewire-material::icon name="check" data-md-field-check />
</li>
</template>
<li x-show="filtered.length === 0" class="px-4 py-3 type-body-md text-on-surface-variant">{{ __('Nothing matches') }}</li>
<li x-show="filtered.length === 0" data-md-choices-empty>{{ __('Nothing matches') }}</li>
</ul>
</div>
@else
<div
{{ $attributes->only(['class', 'wire:key', 'x-model']) }}
data-md-choices
{{ $attributes->only(['class', 'style', 'wire:key', 'x-model']) }}
x-data="{
@if ($model !== null) selection: @entangle($attributes->wire('model')), @else selection: @js($current ?? ($single ? null : [])), @endif
options: @js(array_column($choices, 'value')),