feat: add specification for textarea

Author: Jenesius

docs/ru/inputs/input-password.md

@@ -67,7 +67,6 @@ ____
 Поле не прошло валидацию:
 <FormField :errors = "['The password is too simple']" type = "password" name = "pass" label = "С ошибкой" />
 
-____
 
 
 ----

docs/ru/inputs/input-textarea.md

@@ -0,0 +1,100 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+const values = useFormValues(form)
+
+</script>
+
+# Поле textarea
+
+Поле используется для ввода длинного текста.
+
+- Ключевое слово `textarea`.
+- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element).
+
+## Параметры
+
+### autofocus <Badge type = "info">Необязательный</Badge>
+
+- Тип `boolean | 'true' | 'false'`
+
+Если данный параметр передаётся, при установке данного поля, на него будет автоматически передано управление.
+
+### autoresize <Badge type = "info">Необязательный</Badge>
+- Тип `boolean | number | string`
+
+После ввода данных поле будет растягиваться, если данный параметр задан. 
+
+Если передать `true`, поле будет
+растягиваться под размер текста внутри него.
+
+Передача численного значения установит максимальное количество
+строк, которое поле будет отображать без прокрутки. При превышении это количества 
+появится вертикальная прокрутка.
+
+### placeholder <Badge type = "info">Необязательный</Badge>
+- Тип `string`
+
+Строковое значение подсказки перед вводом данных.
+
+____ 
+
+Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
+
+## Значение
+
+Данное поле работает со строковыми значениями.
+
+## Спецификация
+
+- Поле доступно при использовании `Tab` и `Shift + Tab`.
+- Блокировка отменяет навигацию через `Tab`.
+- Блокировка поля изменяет стилистику `textarea`.
+- Ошибка валидации изменяет стилистику `textarea`.
+- При установке `autoresize` размер должен всегда проверяться, при изменении
+значения
+
+## Примеры
+
+
+Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
+указать лишь `type` и `name`:
+
+::: code-group
+
+```html
+<form-field name = "pass" type="textarea"/>
+```
+
+```ts
+import {FormField} from "jenesius-vue-form";
+
+```
+
+:::
+
+Поле по умолчанию:
+<FormField  type = "textarea" name = "description" label = "Введите описание" />
+
+____
+
+В заблокированном состоянии:
+<FormField disabled type = "textarea" name = "description" label = "Заблокированное" />
+
+____
+
+Поле не прошло валидацию:
+<FormField :errors = "['The password is too simple']" type = "textarea" name = "description" label = "С ошибкой" />
+
+____
+
+Автоматическое увеличение поля при изменении данных:
+<FormField autoresize type = "textarea" name = "description" label = "Делаем больше" />
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```

project/pages/test/App.vue

@@ -10,6 +10,8 @@
 		<button @click = "show = !show">{{labelButton}}</button>
 		<br>
 
+		<textarea rows="10"/>
+
 		<button @click = "change">change field name</button>
 		<button @click = "clean">clean values</button>
 

src/widgets/inputs/input-textarea/widget-input-textarea.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import FieldWrap from "../field-wrap.vue";
-import {onMounted, ref, watch} from "vue";
+import {nextTick, onMounted, ref, watch} from "vue";
 
 const props = withDefaults(defineProps<{
 	label?: string,
@@ -62,13 +62,11 @@ function resize() {
 }
 
 watch(() => props.modelValue, () => {
-	resize()
+	nextTick(resize)
 }, {
 	immediate: true
 })
-onMounted(() => {
-	resize()
-})
+onMounted(resize)
 
 </script>
 

tests/integrations/inputs/input-textarea.spec.ts

@@ -21,7 +21,7 @@ function defaultMount(component = defineTextareaComponent()) {
 	})
 }
 
-describe("Input checkbox", () => {
+describe("Input Password", () => {
 	let app: VueWrapper<any>
 	let form: Form
 	let input: Omit<DOMWrapper<HTMLTextAreaElement>, "exists">
@@ -58,7 +58,8 @@ describe("Input checkbox", () => {
 		await app.vm.$nextTick();
 		const text = "Information about jenesius"
 		await input.setValue(text);
-		expect(form.getValueByName(name)).toBe(text)
+		await app.vm.$nextTick()
+		expect(form.getValueByName(name)).toBe(undefined)
 	})
 	test("При блокировании поля меняет стилистика", async () => {
 		expect(app.find(".input-textarea:disabled").exists()).toBe(false)
@@ -74,27 +75,4 @@ describe("Input checkbox", () => {
 		expect(app.find('.input-textarea_error').exists()).toBe(true)
 	})
 
-
-	test("При вводе большого текста в поле, оно должно увеличиваться в размере", async () => {
-
-		console.log(input.element.scrollHeight, input.element.clientHeight)
-		const text = `
-			КЛАРА У КАРЛА
-			УКРАЛА
-			КАРАЛЛЫ
-			А
-			КАРЛ
-			У КЛАРЫ
-			УКРАЛ
-			КЛАРНЕТ
-			А Я
-			ПОСЕДЕЛ
-			ПИСАВ
-			ЭТИ ТЕСТЫ И ЭТУ ДОКУ
-		`
-		await input.setValue(text);
-		console.log(input.element.scrollHeight, input.element.clientHeight)
-
-	})
-
 })