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
51 lines
2.2 KiB
PHP
51 lines
2.2 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-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
|
|
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-livewire-material::icon name="visibility" class="size-(--field-icon)" x-show="! shown" />
|
|
<x-livewire-material::icon name="visibility_off" class="size-(--field-icon)" x-show="shown" x-cloak />
|
|
</button>
|
|
</x-slot:trailing>
|
|
</x-livewire-material::field>
|