feat(textarea) adiciona contador de caracteres

agenciafmd · Feb 20, 2024 · c479901 · c479901
1 parent df280af
commit c479901
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/docs/form.md b/docs/form.md
@@ -8,7 +8,7 @@
         <x-form.input name="name" label="Nome" required/>
     </div>
     <div class="mb-3">
-        <x-form.textarea name="message" label="Mensagem" required/>
+        <x-form.textarea name="message" label="Mensagem" maxlength=100 required/>
     </div>
     <div class="mb-3">
         @php

diff --git a/src/View/Components/Forms/Inputs/Textarea.php b/src/View/Components/Forms/Inputs/Textarea.php
@@ -24,22 +24,29 @@ public function __construct(
     public function render(): string|View
     {
         return <<<'HTML'
-            @if($label)
-                <x-form.label for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
-                    {{ str($label)->lower()->ucfirst() }}
-                </x-form.label>
-            @endif
-            <textarea wire:model="{{ $name }}" {{ $attributes->merge([
-                                    'id' => $name . $uuid,
-                                    'rows' => $rows,
-                                ])->class([
-                                    'form-control',
-                                    'is-invalid' => $errors->has($name),
-                            ])
-                        }}
-                    ></textarea>
-            <x-form.error field="{{ $name }}"/>
-            <x-form.hint message="{{ $hint }}"/>
+            <div x-data="{ count: 0 }" x-init="count = $refs.fieldToCount.value.length">
+                @if($label)
+                    <x-form.label for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
+                        {{ str($label)->lower()->ucfirst() }}
+                        @if($attributes->has('maxlength'))
+                            <span class="form-label-description">
+                            <span x-html="count"></span>/<span x-html="$refs.fieldToCount.maxLength"></span></span>
+                        @endif
+                    </x-form.label>
+                @endif
+                <textarea wire:model="{{ $name }}" {{ $attributes->merge([
+                                        'id' => $name . $uuid,
+                                        'rows' => $rows,
+                                    ])->class([
+                                        'form-control',
+                                        'is-invalid' => $errors->has($name),
+                                ])
+                            }}
+                            x-ref="fieldToCount" x-on:keyup="count = $refs.fieldToCount.value.length"
+                        ></textarea>
+                <x-form.error field="{{ $name }}"/>
+                <x-form.hint message="{{ $hint }}"/>
+            </div>
         HTML;
     }
 }