feat:add auto grow text box

This commit is contained in:
hackerESQ
2024-10-21 23:02:18 -05:00
parent 740a29ce04
commit 3fd66d1138
2 changed files with 66 additions and 2 deletions
@@ -0,0 +1,64 @@
@props([
'uuid' => md5(rand()),
'label' => '',
'hint' => '',
'errorField' => '',
'rows' => 4
])
<div class="mt-1">
<!-- STANDARD LABEL -->
@if($label)
<label for="{{ $uuid }}" class="pt-0 label label-text font-semibold">
<span>
{{ $label }}
@if($attributes->get('required'))
<span class="text-error">*</span>
@endif
</span>
</label>
@endif
<textarea {{ $attributes
->merge([
'id' => $uuid
])
->class([
'textarea textarea-primary w-full peer',
'border border-dashed' => $attributes->has('readonly') && $attributes->get('readonly') == true,
'textarea-error' => $errors->has($errorField)
])
}}
x-data="{
resize (rows) {
if (rows) {
$el.style.height = (rows * 32) + 'px'
return;
}
$el.style.height = '0px';
$el.style.height = $el.scrollHeight + 'px'
}
}"
x-init="resize({{$rows}})"
@input="resize()"
type="text"
placeholder = "{{ $attributes->whereStartsWith('placeholder')->first() }}"
>{{ $slot }}</textarea>
@if($errors->has($errorField))
@foreach($errors->get($errorField) as $message)
@foreach(Arr::wrap($message) as $line)
<div class="{{ $errorClass }}" x-classes="text-red-500 label-text-alt p-1">{{ $line }}</div>
@break($firstErrorOnly)
@endforeach
@break($firstErrorOnly)
@endforeach
@endif
<!-- HINT -->
@if($hint)
<div x-classes="label-text-alt text-gray-400 py-1 pb-0">{{ $hint }}</div>
@endif
</div>
@@ -38,7 +38,7 @@ new class extends Component {
public function update()
{
$this->authorize('fullAccess', $this->portfolio);
$this->portfolio->update($this->validate());
$this->portfolio->save();
@@ -70,7 +70,7 @@ new class extends Component {
<x-ib-form wire:submit="{{ $portfolio ? 'update' : 'save' }}" class="col-span-3">
<x-input label="{{ __('Title') }}" wire:model="title" required />
<x-textarea label="{{ __('Notes') }}" wire:model="notes" rows="4" />
<x-ib-textarea label="{{ __('Notes') }}" wire:model="notes" rows="4" />
@livewire('share-portfolio-form', ['portfolio' => $portfolio])