feat(forms): make textarea monospace opt-in and improve multiline toggle

Add `monospace` prop to Textarea component so font-mono is no longer
applied by default. Apply it explicitly to env variable editors, private
key fields, and shared variable forms where monospace is appropriate.

Use Alpine.js x-data/x-model to make the multiline toggle reactive
without a full Livewire round-trip. Add wire:key on the input/textarea
wrappers to force proper DOM replacement when switching modes.
This commit is contained in:
Andras Bacsai committed 2026-03-31 15:37:42 +02:00
1 parent 47025c7815
commit 3961077b90
12 files changed
+87 -35

No files matched your search

+6 -1
View File
@@ -32,10 +32,11 @@ class Textarea extends Component
public bool $allowTab = false,
public bool $spellcheck = false,
public bool $autofocus = false,
public bool $monospace = false,
public ?string $helper = null,
public bool $realtimeValidation = false,
public bool $allowToPeak = true,
public string $defaultClass = 'input scrollbar font-mono',
public string $defaultClass = 'input scrollbar',
public string $defaultClassInput = 'input',
public ?int $minlength = null,
public ?int $maxlength = null,
@@ -81,6 +82,10 @@ class Textarea extends Component
$this->name = $this->modelBinding !== 'null' ? $this->modelBinding : (string) $this->id;
}
if ($this->monospace) {
$this->defaultClass .= ' font-mono';
}
// $this->label = Str::title($this->label);
return view('components.forms.textarea');
}