feat: allow tab in textarea

This commit is contained in:
w3cj 2024-04-12 05:33:56 -06:00
parent cf01d32237
commit d46a565e6c
4 changed files with 19 additions and 3 deletions

View File

@ -22,6 +22,7 @@ public function __construct(
public bool $required = false, public bool $required = false,
public bool $disabled = false, public bool $disabled = false,
public bool $readonly = false, public bool $readonly = false,
public bool $allowTab = false,
public ?string $helper = null, public ?string $helper = null,
public bool $realtimeValidation = false, public bool $realtimeValidation = false,
public bool $allowToPeak = true, public bool $allowToPeak = true,

View File

@ -1,3 +1,18 @@
<script>
function handleKeydown(e) {
if (e.keyCode === 9) {
e.preventDefault();
e.target.setRangeText(
'\t',
e.target.selectionStart,
e.target.selectionStart,
'end'
);
}
}
</script>
<div class="flex-1 form-control"> <div class="flex-1 form-control">
@if ($label) @if ($label)
<label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }} <label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
@ -41,7 +56,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
</div> </div>
@else @else
<textarea placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }} <textarea @keydown.tab="{{ $allowTab }} && handleKeydown" placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}" @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@else @else
wire:model={{ $value ?? $id }} wire:model={{ $value ?? $id }}

View File

@ -4,7 +4,7 @@
name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
menu.</div> menu.</div>
<div x-cloak x-show="raw" class="font-mono"> <div x-cloak x-show="raw" class="font-mono">
<x-forms.textarea rows="20" id="service.docker_compose_raw"> <x-forms.textarea allowTab rows="20" id="service.docker_compose_raw">
</x-forms.textarea> </x-forms.textarea>
</div> </div>
<div x-cloak x-show="raw === false" class="font-mono"> <div x-cloak x-show="raw === false" class="font-mono">

View File

@ -1,5 +1,5 @@
<form wire:submit.prevent="addDynamicConfiguration" class="flex flex-col w-full gap-4"> <form wire:submit.prevent="addDynamicConfiguration" class="flex flex-col w-full gap-4">
<x-forms.input autofocus id="fileName" label="Filename" required /> <x-forms.input autofocus id="fileName" label="Filename" required />
<x-forms.textarea id="value" label="Configuration" required rows="20" /> <x-forms.textarea allowTab id="value" label="Configuration" required rows="20" />
<x-forms.button type="submit" @click="slideOverOpen=false">Save</x-forms.button> <x-forms.button type="submit" @click="slideOverOpen=false">Save</x-forms.button>
</form> </form>