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
51 lines
2.1 KiB
PHP
51 lines
2.1 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.
|
|
`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);
|
|
$messages = $model !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($model)) : [];
|
|
@endphp
|
|
|
|
<x-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
|
|
class="field-control"
|
|
/>
|
|
|
|
<x-slot:trailing>
|
|
<button
|
|
type="button"
|
|
x-on:click="shown = ! shown"
|
|
x-bind:aria-label="shown ? @js(__('Hide password')) : @js(__('Show password'))"
|
|
x-bind:aria-pressed="shown"
|
|
aria-label="{{ __('Show password') }}"
|
|
aria-pressed="false"
|
|
class="field-trailing field-button"
|
|
data-field-reveal
|
|
>
|
|
<x-icon name="visibility" class="size-(--field-icon)" x-show="! shown" />
|
|
<x-icon name="visibility_off" class="size-(--field-icon)" x-show="shown" x-cloak />
|
|
</button>
|
|
</x-slot:trailing>
|
|
</x-field>
|