feat: update input tel, remove '+', add spec/tests for input-tel.

Author: Jenesius

docs/ru/inputs/input-tel.md

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

project/pages/test/App.vue

@@ -6,11 +6,10 @@
 		<div :key = "pureValue">Pure values: {{pureValue}}</div>
 		<div :key = "pureAvailabilities">Pure av: {{pureAvailabilities}}</div>
 
-		<form-field name = "age" type = "number" step = "10" v-if = "show"/>
+		<form-field name = "phone" type = "tel" v-if = "show"/>
 		<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-tel/widget-input-tel.vue

@@ -20,7 +20,7 @@
 import FieldWrap from "../field-wrap.vue";
 import WidgetInputTelCode from "./widget-input-tel-code.vue";
 import {computed, ref} from "vue";
-import {parsePhoneNumber, AsYouType} from 'libphonenumber-js'
+import {AsYouType, parsePhoneNumber} from 'libphonenumber-js'
 
 interface Props {
 	errors: string[],
@@ -40,17 +40,24 @@ const inputTel = ref<HTMLInputElement>();
  * @description Using libphonenumber-js return pretty value of phone number. In Error case return user's target value.
  * */
 const prettyValue = computed(() => prettifyPhoneValue(props.modelValue))
+
+// Метод просто добавляет + в начало строки, если его там ещё нет
+function addPlus(str: string) {
+	if (!str.length) return '';
+	return str.startsWith('+') ? str : '+' + str
+}
+
 function prettifyPhoneValue(value: unknown) {
 	try {
 		if (typeof value !=='string') return '';
-		return new AsYouType().input(value)
+		return new AsYouType().input(addPlus(value))
 	} catch (e) {
 		return props.modelValue;
 	}
 }
 const countryCode = computed(() => {
 	try {
-		return parsePhoneNumber(props.modelValue).country?.toLocaleLowerCase();
+		return parsePhoneNumber(addPlus(props.modelValue)).country?.toLocaleLowerCase();
     } catch (e) {
 		return "";
     }
@@ -63,12 +70,10 @@ function onInput(e: any) {
 }
 
 /**
- * @description Put just numeric and start +
+ * @description Put just numeric
  */
 function parseTelStr(a: string) {
-	const numericStr = a.replace(/\D+/g, '');
-
-	return numericStr.length ? '+' + numericStr : '';
+	return a.replace(/\D+/g, '');
 }
 
 </script>

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

@@ -0,0 +1,97 @@
+import {DOMWrapper, mount, VueWrapper} from "@vue/test-utils";
+import EmptyApp from "../components/EmptyApp.vue";
+import {defineComponent, h} from "vue";
+import {InputField, Form, FormField} from "../../../src/index";
+import STORE from "./../../../src/config/store";
+
+const name = 'phone'
+const label = 'Your phone'
+function defineTelComponent() {
+    return defineComponent({
+        template: `<div><form-field type = "tel" name = "${name}" required label = "${label}" /></div>`,
+        components: {FormField}
+    })
+}
+function defaultMount(component = defineTelComponent()) {
+    return mount(EmptyApp, {
+        slots: { default: component },
+        attachTo: document.body
+    })
+}
+
+describe("Input tel", () => {
+    let app: VueWrapper<any>;
+    let form: Form
+    let input: DOMWrapper<HTMLInputElement>
+    beforeEach(() => {
+        app = defaultMount()
+        form = (app.vm as any).form
+        input = app.find('input')
+    })
+
+    test("По умолчанию поле не должно ничего показывать", async () => {
+        expect(input.element.value).toBe("")
+    })
+    test("В пустом поле отображается должен отображаться лишь label", async () => {
+        expect(app.text()).toBe(label + '?')
+    })
+    test("Ввод поля изменяет form", async () => {
+        await input.setValue("+1234");
+        expect(form.getValueByName(name)).toBe("1234")
+    })
+    test("Установка значения в form меняет поле", async () => {
+        form.setValues({ [name]: "+000" })
+        await app.vm.$nextTick();
+        expect(input.element.value).toBe("+000")
+    })
+    test("Поле должно отображать значение с +, даже если в форме хранится без", async () => {
+        form.setValues({ [name]: "222" })
+        await app.vm.$nextTick();
+        expect(input.element.value).toBe("+222")
+    })
+    test("При удалении значения из формы, поле должно стать пустым", async () => {
+        form.setValues({ [name]: "222" })
+        await app.vm.$nextTick();
+        form.cleanField(name);
+        await app.vm.$nextTick();
+        expect(input.element.value).toBe("")
+    })
+    test("При очистки поля(вставки ''), в форме должна хранится пустая строка.", async () => {
+        await input.setValue("+1234");
+        await input.setValue("");
+        expect(form.getValueByName(name)).toBe("")
+    })
+    test("Блокировка поля блокирует input", async () => {
+        form.disable()
+        await app.vm.$nextTick();
+        expect(input.element.disabled).toBe(true);
+    })
+    test("Блокировка input должна запрещать ввод", async () => {
+        await input.setValue("23");
+        form.disable()
+        await app.vm.$nextTick();
+        await input.setValue("+1234");
+        expect(form.getValueByName(name)).toBe("23")
+    })
+    test("Ошибка валидации должна отображаться", async () => {
+        form.validate()
+        await app.vm.$nextTick();
+        expect(app.text()).toBe(label + '?' + STORE.requiredMessage)
+    })
+    test("Иконка страны должна меняться при установки новых значений", async () => {
+        await input.setValue("4523");
+        const icon = app.find('.input-tel-code') // Иконка появляется только после первой установки
+
+        expect(icon.element.getAttribute('src')?.includes('dk.svg')).toBe(true)
+
+        await input.setValue("35626");
+        expect(icon.element.getAttribute('src')?.includes('mt.svg')).toBe(true)
+
+        await input.setValue("37529");
+        expect(icon.element.getAttribute('src')?.includes('by.svg')).toBe(true)
+
+
+
+    })
+
+})