59 lines
2.2 KiB
PHP
59 lines
2.2 KiB
PHP
@props([
|
|
'name',
|
|
'label' => null,
|
|
'type' => 'text',
|
|
'hint' => null,
|
|
// Die Einheit, im Feld statt in der Beschriftung: „Gebühr 2. Mahnung (Cent)"
|
|
// erklärt die Einheit an einer Stelle, die man beim schnellen Ändern nicht
|
|
// mehr liest. Ein € am rechten Rand des Feldes steht dort, wo der Blick
|
|
// ohnehin hinfällt — und lässt die Beschriftung wieder das benennen, worum
|
|
// es geht.
|
|
'suffix' => null,
|
|
])
|
|
@php
|
|
// $errors is shared on web requests; default it so the component also renders
|
|
// standalone (e.g. in isolated Blade::render tests).
|
|
$errors ??= new \Illuminate\Support\ViewErrorBag;
|
|
$id = $attributes->get('id', $name);
|
|
$hasError = $errors->has($name);
|
|
$field = 'block w-full rounded border bg-surface px-3.5 py-2.5 text-sm text-ink placeholder:text-faint transition '
|
|
.($hasError ? 'border-danger bg-danger-bg' : 'border-line');
|
|
@endphp
|
|
<div class="space-y-1.5">
|
|
@if ($label)
|
|
<label for="{{ $id }}" class="block text-sm font-medium text-body">{{ $label }}</label>
|
|
@endif
|
|
|
|
@if ($suffix)
|
|
<div class="relative">
|
|
<input
|
|
id="{{ $id }}"
|
|
name="{{ $name }}"
|
|
type="{{ $type }}"
|
|
@if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
|
|
{{ $attributes->merge(['class' => $field.' pr-12']) }}
|
|
>
|
|
{{-- aria-hidden: die Einheit gehört für einen Screenreader in die
|
|
Beschriftung, nicht als loses Wort hinter das Feld. --}}
|
|
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3.5 text-sm text-muted"
|
|
aria-hidden="true">{{ $suffix }}</span>
|
|
</div>
|
|
@else
|
|
<input
|
|
id="{{ $id }}"
|
|
name="{{ $name }}"
|
|
type="{{ $type }}"
|
|
@if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
|
|
{{ $attributes->merge(['class' => $field]) }}
|
|
>
|
|
@endif
|
|
|
|
@if ($hint && ! $hasError)
|
|
<p class="text-xs text-muted">{{ $hint }}</p>
|
|
@endif
|
|
|
|
@error($name)
|
|
<p id="{{ $id }}-error" class="text-xs text-danger">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|