17e2f7f2ab
Replace #6b16ed (Coolify purple) with #d52b1e (MapleDeploy red) and form focus states, dirty indicators, chart colors, and theme tokens. Also fix warning color scale to use standard Tailwind yellow values.
70 lines
4.2 KiB
PHP
70 lines
4.2 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' }" @success.window="type = 'password'">
|
|
@if ($allowToPeak)
|
|
<button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
|
|
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white"
|
|
aria-label="Toggle password visibility">
|
|
{{-- Eye icon (shown when password is hidden) --}}
|
|
<svg x-show="type === 'password'" 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>
|
|
{{-- Eye-off icon (shown when password is visible) --}}
|
|
<svg x-cloak x-show="type === 'text'" 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.585 10.587a2 2 0 0 0 2.829 2.828" />
|
|
<path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
|
|
<path d="M3 3l18 18" />
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
|
|
x-bind:type="type"
|
|
x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
|
|
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
|
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
|
|
wire:loading.attr="disabled"
|
|
@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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,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>
|