fix: update afcl text area component and add docs

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -333,6 +333,26 @@ import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
   </div>
 </div>
 
+## Textarea
+<div class="split-screen" >
+  <div >
+```ts
+import { Textarea } from '@/afcl'
+```
+
+```ts
+    <Textarea
+      v-model="textAreaInput"
+      placeholder="Enter some text..."
+      class="w-64"
+    />
+```
+  </div>
+  <div>
+    ![AFCL Textarea](textarea.png)
+  </div>
+</div>
+
 ## Tooltip
 
 Wrap an element on which you would like to show a tooltip with the `Tooltip` component and add a `tooltip` slot to it.

adminforth/spa/src/afcl/Textarea.vue

@@ -1,31 +1,30 @@
-<template> 
-
-    <textarea
-      ref="input"
-      class="bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
-      :placeholder="placeholder"
-      :value="modelValue"
-      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      :readonly="readonly"
-    />
-
+<template>
+  <textarea
+    ref="input"
+    class="bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    :placeholder="placeholder"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    :readonly="readonly"
+  />
 </template>
 
 <script setup lang="ts">
-
 import { ref } from 'vue';
 
 const props = defineProps<{
-  modelValue: string,
-  readonly?: boolean,
-  placeholder?: string,
+  modelValue: string
+  readonly?: boolean
+  placeholder?: string
 }>()
 
-const input = ref<HTMLInputElement | null>(null)
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const input = ref<HTMLTextAreaElement | null>(null)
 
 defineExpose({
   focus: () => input.value?.focus(),
-});
-
+})
 </script>
-