Andreas Reinhold / reiniandClaude Opus 5
0341f9d4ca
<x-field> renders data-md-field with its props and parts as data-md-* attributes (box, control, label, outline, support, counter, trailing buttons), and field.css moves into material.components on tokens: px geometry, spacing and state tokens, the 600px breakpoint (plan step 36). Its icons take a size prop, 24/20/16 by the field's size. Every control the field wraps now marks itself data-md-field-control, so the inputs, the pickers, choices, field.js, menu.css's select and listbox rules and timepicker.css follow the renamed hooks. Browser tests cover the error icon, the disabled field's hover, the counter and the width bound from 600px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
55 lines
2.6 KiB
PHP
55 lines
2.6 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`; every other attribute reaches the `<input>`
|
|
(`autocomplete="current-password"`, `wire:model`). --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'hintClass' => null,
|
|
'icon' => null,
|
|
'size' => 'md',
|
|
'variant' => null,
|
|
])
|
|
|
|
@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 :class="$attributes->get('class')" x-data="{ shown: false }">
|
|
<input
|
|
{{ $attributes->except(['class', '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>
|