Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
71 lines
3.5 KiB
PHP
71 lines
3.5 KiB
PHP
{{-- A select: the native `<select>`, drawn as M3's exposed dropdown menu.
|
|
|
|
Native on purpose: the keyboard, type-to-find, the screen reader and the form value are the
|
|
browser's, and `wire:model` binds to it as to any select. Where the browser has the
|
|
customizable select (`appearance: base-select`) its open list is M3's menu, under the field
|
|
and as wide (resources/css/components/menu.css); elsewhere the native list stands in. So the
|
|
options stay plain text: the native list could show nothing more. A select always shows a
|
|
value, so its label always floats.
|
|
|
|
`options` as a list of `['id' => …, 'name' => …]` (`'disabled' => true` greys one out),
|
|
`option-value` and `option-label` to read other keys, and a `placeholder` that becomes the
|
|
first option, valued `placeholder-value` (empty by default). Or pass `<option>`s in the slot.
|
|
`label`, `hint`, `icon`, `variant`, `size`; `full` takes the 40rem bound off a field its container already bounds. `class` and `style` land on the field's root, every
|
|
other attribute on the `<select>`. A value too long for the field ends before the arrow with
|
|
an ellipsis. The field's root carries `data-md-select`; what a select changes in the field's
|
|
chrome is resources/css/components/select.css. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'hintClass' => null,
|
|
'icon' => null,
|
|
'options' => [],
|
|
'optionValue' => 'id',
|
|
'optionLabel' => 'name',
|
|
'placeholder' => null,
|
|
'placeholderValue' => null,
|
|
'size' => 'md',
|
|
'variant' => null,
|
|
'full' => false,
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->whereStartsWith('wire:model')->first();
|
|
$id = $attributes->get('id') ?? 'field-'.substr(md5($model.'|'.$label.'|select'), 0, 12);
|
|
$field = \NoNameWeb\LivewireMaterial\Support\Field::class;
|
|
$errorKey = $field::key($model, $attributes->get('name'));
|
|
$messages = $field::messages($errors ?? null, $errorKey);
|
|
$fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
|
|
@endphp
|
|
|
|
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :$full floated :class="$attributes->get('class')" :style="$attributes->get('style')" data-md-select>
|
|
<select
|
|
{{ $attributes->except(['class', 'style', 'id']) }}
|
|
id="{{ $id }}"
|
|
@if ($messages !== []) aria-invalid="true" @endif
|
|
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
|
|
data-md-field-control
|
|
>
|
|
{{-- The customizable select draws the chosen option in `<selectedcontent>`, which select.css
|
|
cuts with an ellipsis before the arrow; a browser without it never renders the button.
|
|
`wire:ignore`, because the browser fills it: a render would put back the first option's
|
|
label, parsed from the server's HTML, or nothing. --}}
|
|
<button type="button" wire:ignore><selectedcontent></selectedcontent></button>
|
|
|
|
@if (filled($placeholder))
|
|
<option value="{{ $placeholderValue }}">{{ $placeholder }}</option>
|
|
@endif
|
|
|
|
@foreach ($options as $option)
|
|
<option value="{{ data_get($option, $optionValue) }}" @disabled(data_get($option, 'disabled'))>{{ data_get($option, $optionLabel) }}</option>
|
|
@endforeach
|
|
|
|
{{ $slot }}
|
|
</select>
|
|
|
|
<x-slot:trailing>
|
|
<x-livewire-material::icon name="arrow_drop_down" :size="$fieldIconSize" data-md-field-trailing data-md-field-arrow />
|
|
</x-slot:trailing>
|
|
</x-livewire-material::field>
|