feat: update test for input-number, add input-number specification

Author: Jenesius

docs/ru/guide/types.md

@@ -0,0 +1,6 @@
+
+## StringModify
+
+```ts
+type StringModify = (v: unknown) => string
+```

docs/ru/inputs/input-number.md

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

docs/ru/inputs/input-textarea.md

@@ -69,7 +69,6 @@ ____
 
 ```ts
 import {FormField} from "jenesius-vue-form";
-
 ```
 
 :::

tests/integrations/input-number.spec.ts …integrations/inputs/input-number.spec.tstests/integrations/input-number.spec.ts renamed to tests/integrations/inputs/input-number.spec.ts tests/integrations/input-number.spec.ts renamed to tests/integrations/inputs/input-number.spec.ts

@@ -1,13 +1,14 @@
 import {defineComponent} from "vue";
-import {InputField, Form} from "../../src/index";
-import {mount, VueWrapper} from "@vue/test-utils";
-import EmptyApp from "./components/EmptyApp.vue";
+import {FormField, Form} from "./../../../src/index";
+import {DOMWrapper, mount, VueWrapper} from "@vue/test-utils";
+import EmptyApp from "../components/EmptyApp.vue";
 import {FormFieldValidationCallback} from "@/types";
 
+const name = 'age'
 function defineNumberComponent() {
 	return defineComponent({
-		template: '<div><input-field type = "number" name = "age"/></div>',
-		components: {InputField}
+		template: `<div><form-field type = "number" name = "${name}" required label = "Numeric" /></div>`,
+		components: {FormField}
 	})
 }
 function defaultMount(component = defineNumberComponent()) {
@@ -22,48 +23,55 @@ function defaultMount(component = defineNumberComponent()) {
 describe("Input number",  () => {
 
 	let wrap: VueWrapper<any>;
-	beforeEach(() => wrap = defaultMount())
+	let form: Form
+	let input: DOMWrapper<HTMLInputElement>
+	beforeEach(() => {
+		wrap = defaultMount()
+		form = (wrap.vm as any).form
+		input = wrap.find('input')
+	})
 
+	test("Should show label", async () => {
+		expect(wrap.text()).toBe("Numeric")
+	})
+	test("Should be empty by default", async () => {
+		expect(input.element.value).toBe("")
+	})
 	test("Should display value from Form", async () => {
-		const form = wrap.vm.form as Form;
 		form.setValues({
 			age: 25
 		})
 		await wrap.vm.$nextTick()
-		expect(wrap.find("input").element.value).toBe("25")
+		expect(input.element.value).toBe("25")
 	})
 	test("Should change form value", async () => {
-		const form = wrap.vm.form as Form;
 		form.setValues({
 			age: 25
 		})
 		await wrap.vm.$nextTick()
-		expect(wrap.find("input").element.value).toBe("25");
+		expect(input.element.value).toBe("25");
 		form.setValues({
 			age: 26
 		})
 		await wrap.vm.$nextTick()
-		expect(wrap.find("input").element.value).toBe("26");
+		expect(input.element.value).toBe("26");
 		form.setValues({
 			age: 27
 		})
 		await wrap.vm.$nextTick()
-		expect(wrap.find("input").element.value).toBe("27");
+		expect(input.element.value).toBe("27");
 	})
 	test("Step Controller Should be hidden if disabled and input should be disabled", async () => {
-		const form = wrap.vm.form as Form;
 		form.setValues({
 			age: 25
 		})
 		form.disable('age')
 
 		await wrap.vm.$nextTick()
-		expect(wrap.find("input").element.disabled).toBe(true);
+		expect(input.element.disabled).toBe(true);
 		expect(wrap.find('.widget-number-step_disabled').exists()).toBe(false);
-
 	})
 	test("Click on button should change the value(up arrow/down arrow)", async () => {
-		const form = wrap.vm.form as Form;
 		form.setValues({
 			age: 25
 		})
@@ -84,14 +92,12 @@ describe("Input number",  () => {
 		expect(form.values).toEqual({age: 25});
 	})
 	test("Press up and down should change the value", async () => {
-		const form = wrap.vm.form as Form;
 		form.setValues({
 			age: 25
 		})
 
 		await wrap.vm.$nextTick()
-
-		const input = wrap.find("input");
+		
 		await input.trigger('keydown.up');
 		await input.trigger('keydown.up');
 
@@ -103,8 +109,8 @@ describe("Input number",  () => {
 	test("If Step was provided it should change onStep", async () => {
 
 		wrap = defaultMount(defineComponent({
-			template: '<div><input-field type = "number" name = "age" step = "10"/></div>',
-			components: {InputField}
+			template: '<div><form-field type = "number" name = "age" step = "10"/></div>',
+			components: {FormField}
 		}))
 
 		const form = wrap.vm.form as Form;
@@ -122,8 +128,8 @@ describe("Input number",  () => {
 	test("If suffix was provided it should be displayed", async () => {
 
 		wrap = defaultMount(defineComponent({
-			template: '<div><input-field type = "number" name = "age" suffix = "Years"/></div>',
-			components: {InputField}
+			template: '<div><form-field type = "number" name = "age" suffix = "Years"/></div>',
+			components: {FormField}
 		}))
 
 		await wrap.vm.$nextTick();
@@ -138,8 +144,8 @@ describe("Input number",  () => {
 		];
 
 		wrap = defaultMount(defineComponent({
-			template: `<div><input-field type = "number" name = "age"  :validation = "${test}" /></div>`,
-			components: {InputField}
+			template: `<div><form-field type = "number" name = "age"  :validation = "${test}" /></div>`,
+			components: {FormField}
 		}))
 		const form = wrap.vm.form as Form;
 		await wrap.vm.$nextTick();
@@ -163,5 +169,34 @@ describe("Input number",  () => {
 		await wrap.vm.$nextTick()
 		expect(wrap.text()).toBe('')
 	})
+	test("If pretty was provided it should change input", async () => {
+		function prettyFn(v?: string | number) {
+			if (v === undefined) return ''
+
+			return `- ${v} _`
+		}
+
+		const app = defaultMount(defineComponent({
+			setup() {
+				return {
+					prettyFn
+				}
+			},
+			template: `<div><form-field type = "number" name = "${name}" required label = "Numeric" :pretty = "prettyFn" /></div>`,
+			components: {FormField}
+		}))
+		const form = (app.vm as any).form as Form;
+		const input = app.find('input')
+		expect(input.element.value).toBe("");
+
+		form.setValues({
+			[name]: 123
+		})
+		await app.vm.$nextTick()
+		expect(input.element.value).toBe(prettyFn('123'))
 
+		await input.setValue(321);
+		expect(input.element.value).toBe(prettyFn('321'))
+
+	})
 })