Andreas Reinhold / reiniandClaude Opus 5
cd47aa4b0f
Plan step 38 review: the showcase kept two unlayered width classes because <x-input> and <x-datepicker> "don't forward style usefully". They did not: the Phase F rule is that a caller's class and style land on the component root, and the field family sent class to the field's root but style to the inner control, where a width sizes nothing. Input, password, textarea, select and file now pass style to the field root with class; datepicker and timepicker put it on their root; <x-group> dropped style entirely and <x-split-button> gave it to the leading button; <x-search> rendered it twice, on the root and the input. A textarea given a style also lost its autogrow rows, since its own style attribute came second and the browser ignores it. A dataset test renders each component with both and requires them on the root, once. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
42 lines
2.3 KiB
PHP
42 lines
2.3 KiB
PHP
{{-- A file picker, in the text field's chrome (resources/views/components/field.blade.php).
|
|
|
|
M3 has no file field, and building one would redo what the browser's input already does — the
|
|
picker, a file dropped on it, the keyboard, what a screen reader announces, the `change` a
|
|
Livewire upload listens for. So the input stays native, its label always floats (the button
|
|
stands where a resting label would), and only its `::file-selector-button` is restyled: a tonal
|
|
pill, so it reads as the thing to press (resources/css/components/file.css, on the field's
|
|
chrome; the field's root carries `data-md-file`).
|
|
|
|
The browser's own line beside the button ("No file chosen", "3 files") is drawn transparent:
|
|
it cannot be truncated or wrapped, and the caller shows what was chosen anyway, as previews. A
|
|
screen reader still hears it. The errors are the model's and, for a `multiple` input, each
|
|
file's (`photos.*`): a file refused for its size belongs under this field as much as the
|
|
batch's own count does. `label`, `hint`, `variant`; every other attribute reaches the `<input>`. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'variant' => null,
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->whereStartsWith('wire:model')->first();
|
|
$id = $attributes->get('id') ?? 'field-'.substr(md5('file|'.$model.'|'.$label), 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)
|
|
? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorKey), $errors->get($errorKey.'.*')])))
|
|
: [];
|
|
@endphp
|
|
|
|
<x-livewire-material::field :$id :$label :$hint :$messages :$variant floated :class="$attributes->get('class')" :style="$attributes->get('style')" data-md-file>
|
|
<input
|
|
{{ $attributes->except(['class', 'style', 'id', 'type']) }}
|
|
type="file"
|
|
id="{{ $id }}"
|
|
@if ($messages !== []) aria-invalid="true" @endif
|
|
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
|
|
data-md-field-control
|
|
/>
|
|
</x-livewire-material::field>
|