bc39c2caa8
Replace border-based left indicator with inset box-shadow to prevent unwanted layout shifts when focusing or marking fields as dirty. The solution reserves 4px space with transparent shadow in default state and transitions to colored shadow on focus/dirty without affecting the box model. Update all form components (input, textarea, select, datalist) for consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
58 lines
3.1 KiB
PHP
58 lines
3.1 KiB
PHP
<div @class([
|
|
'flex-1' => $isMultiline,
|
|
'w-full' => !$isMultiline,
|
|
])>
|
|
@if ($label)
|
|
<label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
|
|
@if ($required)
|
|
<x-highlighted text="*" />
|
|
@endif
|
|
@if ($helper)
|
|
<x-helper :helper="$helper" />
|
|
@endif
|
|
</label>
|
|
@endif
|
|
@if ($type === 'password')
|
|
<div class="relative" x-data="{ type: 'password' }">
|
|
@if ($allowToPeak)
|
|
<div x-on:click="changePasswordFieldType"
|
|
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
|
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
|
|
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
|
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
|
wire:loading.attr="disabled"
|
|
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
|
|
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
|
|
aria-placeholder="{{ $attributes->get('placeholder') }}"
|
|
@if ($autofocus) x-ref="autofocusInput" @endif>
|
|
|
|
</div>
|
|
@else
|
|
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
|
|
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
|
|
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
|
|
wire:loading.attr="disabled"
|
|
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
|
|
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
|
|
maxlength="{{ $attributes->get('maxlength') }}"
|
|
@if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}"
|
|
placeholder="{{ $attributes->get('placeholder') }}"
|
|
@if ($autofocus) x-ref="autofocusInput" @endif>
|
|
@endif
|
|
@if (!$label && $helper)
|
|
<x-helper :helper="$helper" />
|
|
@endif
|
|
@error($modelBinding)
|
|
<label class="label">
|
|
<span class="text-red-500 label-text-alt">{{ $message }}</span>
|
|
</label>
|
|
@enderror
|
|
</div>
|