Andreas Reinhold / reiniandClaude Opus 5
5014d3e576
<x-input>, <x-textarea> and <x-datepicker> took `full` to drop the 40rem bound field.css puts on a text field from `medium`; <x-select>, <x-password> and <x-file> did not, so a field inside a container that already bounds it stopped short of that container's edge with no way to say so. The three now take the prop and hand it to <x-field> like the others. <x-choices> and <x-timepicker> still do not. Found in SealShare: its share options, its admin settings and its user settings are cards, and a card is exactly the "other container" M3 names as the thing that should bound a field on a medium or expanded screen instead of the 40rem ceiling. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
59 lines
3.0 KiB
PHP
59 lines
3.0 KiB
PHP
{{-- A password field, with M3's trailing eye to show what was typed.
|
|
|
|
The eye flips the control's `type` and nothing else, so the value never leaves the field and a
|
|
password manager still sees a password input on load. Its label says what pressing it will do —
|
|
M3's own pattern for an interactive trailing icon ("Show password" / "Hide password") — and it
|
|
carries no `aria-pressed`, which would say the state a second time and the other way round.
|
|
`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 reaches the `<input>`
|
|
(`autocomplete="current-password"`, `wire:model`). The field's root carries
|
|
`data-md-password`; the chrome and the eye's icon button are the field's
|
|
(resources/css/components/field.css, brought by resources/css/components/password.css). --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'hintClass' => null,
|
|
'icon' => null,
|
|
'size' => 'md',
|
|
'variant' => null,
|
|
'full' => false,
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->whereStartsWith('wire:model')->first();
|
|
$id = $attributes->get('id') ?? 'field-'.substr(md5($model.'|'.$label.'|password'), 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) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
|
|
$fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
|
|
@endphp
|
|
|
|
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :$full :class="$attributes->get('class')" :style="$attributes->get('style')" x-data="{ shown: false }" data-md-password>
|
|
<input
|
|
{{ $attributes->except(['class', 'style', 'id', 'type', 'placeholder']) }}
|
|
id="{{ $id }}"
|
|
type="password"
|
|
x-bind:type="shown ? 'text' : 'password'"
|
|
placeholder="{{ filled($attributes->get('placeholder')) ? $attributes->get('placeholder') : ' ' }}"
|
|
@if ($messages !== []) aria-invalid="true" @endif
|
|
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
|
|
data-md-field-control
|
|
/>
|
|
|
|
<x-slot:trailing>
|
|
<button
|
|
type="button"
|
|
x-on:click="shown = ! shown"
|
|
x-bind:aria-label="shown ? @js(__('Hide password')) : @js(__('Show password'))"
|
|
aria-label="{{ __('Show password') }}"
|
|
data-md-field-trailing
|
|
data-md-field-button
|
|
data-md-field-reveal
|
|
>
|
|
<x-livewire-material::icon name="visibility" :size="$fieldIconSize" x-show="! shown" />
|
|
<x-livewire-material::icon name="visibility_off" :size="$fieldIconSize" x-show="shown" x-cloak />
|
|
</button>
|
|
</x-slot:trailing>
|
|
</x-livewire-material::field>
|