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 ?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);
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue