Merge pull request #1971 from w3cj/allow-tab-in-textarea
feat: allow tab in textarea
This commit is contained in:
commit
1581e0e439
@ -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,
|
||||||
|
@ -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 }}
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user