mirror of
https://github.com/coollabsio/coolify.git
synced 2026-03-11 08:55:47 +00:00
feat(Input): add optional suffix support with styling
This commit is contained in:
parent
60ec7484b7
commit
a6fa2bb02e
2 changed files with 19 additions and 4 deletions
|
|
@ -34,12 +34,13 @@ class Input extends Component
|
|||
public ?string $canGate = null,
|
||||
public mixed $canResource = null,
|
||||
public bool $autoDisable = true,
|
||||
public ?string $suffix = null,
|
||||
) {
|
||||
// Handle authorization-based disabling
|
||||
if ($this->canGate && $this->canResource && $this->autoDisable) {
|
||||
$hasPermission = Gate::allows($this->canGate, $this->canResource);
|
||||
|
||||
if (! $hasPermission) {
|
||||
if (!$hasPermission) {
|
||||
$this->disabled = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,7 +61,7 @@ class Input extends Component
|
|||
if ($this->modelBinding && $this->modelBinding !== 'null') {
|
||||
// Use original ID with random suffix for uniqueness
|
||||
$uniqueSuffix = new Cuid2;
|
||||
$this->htmlId = $this->modelBinding.'-'.$uniqueSuffix;
|
||||
$this->htmlId = $this->modelBinding . '-' . $uniqueSuffix;
|
||||
} else {
|
||||
$this->htmlId = (string) $this->id;
|
||||
}
|
||||
|
|
@ -69,7 +70,7 @@ class Input extends Component
|
|||
$this->name = $this->modelBinding !== 'null' ? $this->modelBinding : (string) $this->id;
|
||||
}
|
||||
if ($this->type === 'password') {
|
||||
$this->defaultClass = $this->defaultClass.' pr-[2.8rem]';
|
||||
$this->defaultClass = $this->defaultClass . ' pr-[2.8rem]';
|
||||
}
|
||||
|
||||
// $this->label = Str::title($this->label);
|
||||
|
|
|
|||
|
|
@ -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([
|
||||
'flex-1' => $isMultiline,
|
||||
'w-full' => !$isMultiline,
|
||||
|
|
@ -45,8 +50,11 @@
|
|||
|
||||
</div>
|
||||
@else
|
||||
@if ($hasSuffix)
|
||||
<div class="flex">
|
||||
@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
|
||||
wire:loading.attr="disabled"
|
||||
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
|
||||
|
|
@ -55,6 +63,12 @@
|
|||
@if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}"
|
||||
placeholder="{{ $attributes->get('placeholder') }}"
|
||||
@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
|
||||
@if (!$label && $helper)
|
||||
<x-helper :helper="$helper" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue