Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. 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-livewire-material::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>
|