feat(Input): add optional suffix support with styling

This commit is contained in:
Dominic 2026-01-11 04:39:20 +01:00 committed by Dominic Schmid
parent 60ec7484b7
commit a6fa2bb02e
2 changed files with 19 additions and 4 deletions

View file

@ -34,12 +34,13 @@ class Input extends Component
public ?string $canGate = null, public ?string $canGate = null,
public mixed $canResource = null, public mixed $canResource = null,
public bool $autoDisable = true, public bool $autoDisable = true,
public ?string $suffix = null,
) { ) {
// Handle authorization-based disabling // Handle authorization-based disabling
if ($this->canGate && $this->canResource && $this->autoDisable) { if ($this->canGate && $this->canResource && $this->autoDisable) {
$hasPermission = Gate::allows($this->canGate, $this->canResource); $hasPermission = Gate::allows($this->canGate, $this->canResource);
if (! $hasPermission) { if (!$hasPermission) {
$this->disabled = true; $this->disabled = true;
} }
} }
@ -60,7 +61,7 @@ class Input extends Component
if ($this->modelBinding && $this->modelBinding !== 'null') { if ($this->modelBinding && $this->modelBinding !== 'null') {
// Use original ID with random suffix for uniqueness // Use original ID with random suffix for uniqueness
$uniqueSuffix = new Cuid2; $uniqueSuffix = new Cuid2;
$this->htmlId = $this->modelBinding.'-'.$uniqueSuffix; $this->htmlId = $this->modelBinding . '-' . $uniqueSuffix;
} else { } else {
$this->htmlId = (string) $this->id; $this->htmlId = (string) $this->id;
} }
@ -69,7 +70,7 @@ class Input extends Component
$this->name = $this->modelBinding !== 'null' ? $this->modelBinding : (string) $this->id; $this->name = $this->modelBinding !== 'null' ? $this->modelBinding : (string) $this->id;
} }
if ($this->type === 'password') { if ($this->type === 'password') {
$this->defaultClass = $this->defaultClass.' pr-[2.8rem]'; $this->defaultClass = $this->defaultClass . ' pr-[2.8rem]';
} }
// $this->label = Str::title($this->label); // $this->label = Str::title($this->label);

View file

@ -1,3 +1,8 @@
@php
$hasSuffix = (isset($suffix) && $suffix instanceof \Illuminate\View\ComponentSlot && $suffix->isNotEmpty()) || ($suffix ?? null);
$inputClass = $hasSuffix ? $defaultClass . ' rounded-r-none border-r-0' : $defaultClass;
@endphp
<div @class([ <div @class([
'flex-1' => $isMultiline, 'flex-1' => $isMultiline,
'w-full' => !$isMultiline, 'w-full' => !$isMultiline,
@ -45,8 +50,11 @@
</div> </div>
@else @else
@if ($hasSuffix)
<div class="flex">
@endif
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif <input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly) {{ $attributes->merge(['class' => $inputClass]) }} @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 @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" wire:loading.attr="disabled"
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}" type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
@ -55,6 +63,12 @@
@if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}" @if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}"
placeholder="{{ $attributes->get('placeholder') }}" placeholder="{{ $attributes->get('placeholder') }}"
@if ($autofocus) x-ref="autofocusInput" @endif> @if ($autofocus) x-ref="autofocusInput" @endif>
@if ($hasSuffix)
<span class="flex items-center px-3 border border-l-0 rounded-r bg-coolgray-100 text-neutral-400 select-none">
{{ $suffix }}
</span>
</div>
@endif
@endif @endif
@if (!$label && $helper) @if (!$label && $helper)
<x-helper :helper="$helper" /> <x-helper :helper="$helper" />