Andreas Reinhold / reiniandClaude Opus 5
7f92f1cb29
tests / feature (8.4) (push) Successful in 1m5s
tests / feature (8.5) (push) Successful in 1m4s
tests / lint (push) Successful in 59s
tests / browser (chrome, chromium) (push) Successful in 2m54s
tests / browser (firefox, firefox) (push) Successful in 3m3s
tests / browser (safari, webkit) (push) Successful in 4m13s
Outlined and filled text fields (input, password, auto-growing textarea, native select with the customizable select menu, file), checkbox with an indeterminate state, radio buttons, the M3 switch and form, ported from ReStride and extended. The first half of Phase 6. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
83 lines
2.9 KiB
PHP
83 lines
2.9 KiB
PHP
{{-- The chrome of M3's text fields, around whichever control is in the slot.
|
|
|
|
Not used at call sites: `<x-input>`, `<x-password>`, `<x-textarea>`, `<x-select>`, `<x-file>`
|
|
and the pickers wrap their control in it, so a form reads as one family. The states — the
|
|
label resting or floating, the notch, focus, disabled, required — are selectors in
|
|
resources/css/components/field.css, which explains the anatomy; the only state this file
|
|
decides is `data-invalid`, because only the server knows that.
|
|
|
|
`variant` is M3's two: `outlined` (a notched outline) and `filled` (a surface-container-highest
|
|
box with an indicator line); without it, `config('livewire-material.fields.variant')`. A field
|
|
with a label is a form field, M3's 56px. A field without one is a control in a toolbar or an
|
|
editor row, and is given `size="sm"` (40px, a button's height) or `size="xs"` (32px). The
|
|
error replaces the hint rather than stacking under it, as M3 has it.
|
|
|
|
`class` from the call site lands on the outermost element, never the control, so a margin or
|
|
a width is safe here. --}}
|
|
|
|
@props([
|
|
'id',
|
|
'label' => null,
|
|
'hint' => null,
|
|
'hintClass' => null,
|
|
'messages' => [],
|
|
'icon' => null,
|
|
'prefix' => null,
|
|
'suffix' => null,
|
|
'size' => 'md',
|
|
'variant' => null,
|
|
'floated' => false,
|
|
'mono' => false,
|
|
])
|
|
|
|
@php
|
|
$variant = in_array($variant, ['outlined', 'filled'], true)
|
|
? $variant
|
|
: (config('livewire-material.fields.variant') === 'filled' ? 'filled' : 'outlined');
|
|
@endphp
|
|
|
|
<div
|
|
{{ $attributes->class(['field']) }}
|
|
data-variant="{{ $variant }}"
|
|
data-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}"
|
|
@if ($messages !== []) data-invalid @endif
|
|
@if ($floated) data-floated @endif
|
|
@if ($mono) data-mono @endif
|
|
>
|
|
<div class="field-box">
|
|
@if ($icon)
|
|
<x-icon :name="$icon" class="field-icon size-(--field-icon)" />
|
|
@endif
|
|
|
|
@if (filled($prefix))
|
|
<span class="field-affix">{{ $prefix }}</span>
|
|
@endif
|
|
|
|
{{ $slot }}
|
|
|
|
@if (filled($suffix))
|
|
<span class="field-affix">{{ $suffix }}</span>
|
|
@endif
|
|
|
|
{{ $trailing ?? '' }}
|
|
|
|
<fieldset aria-hidden="true" class="field-outline">
|
|
<legend>@if (filled($label))<span>{{ $label }}</span>@endif</legend>
|
|
</fieldset>
|
|
|
|
@if (filled($label))
|
|
<label for="{{ $id }}" class="field-label">{{ $label }}</label>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $id }}-support" class="field-support" role="alert">
|
|
@foreach ($messages as $message)
|
|
<p>{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@elseif (filled($hint))
|
|
<p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
|
|
@endif
|
|
</div>
|