feat: tests/specification for switch, date. Add get-next-from-toggle-values.ts

Author: Jenesius

docs/ru/inputs/input-date.md

@@ -0,0 +1,92 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+const values = useFormValues(form)
+
+</script>
+
+# Поле date
+
+Поле используется для выбора даты и обрабатывает время в ISO формате.
+
+- Ключевое слово `date`.
+- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date)).
+
+## Параметры
+
+### placeholder <Badge type = "info">Необязательный</Badge>
+
+- Тип `string`
+Строковая метка, отображается, когда в поле нет данных.
+
+### mask <Badge type = "info">Необязательный</Badge>
+
+- Тип `string`.
+- По умолчанию: `YYYY/MM/DD`.
+
+Маска задаёт формат отображение даты. Маска может состоять из символов любых символов, однако 
+ключевыми являются `Y`, `M`, `D`, `H` и `h`. На их позицию будут подставлены соотвествующие значений.
+
+____ 
+
+Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
+
+## Значение
+
+Значение поля выступает строка соответсвующая упрощённому расширенному
+ISO формату [(ISO 8601)](https://en.wikipedia.org/wiki/ISO_8601).
+
+## Спецификация
+
+- Поле доступно при использовании `Tab` и `Shift + Tab`.
+- Ввод даты возможно используя поле ввода.
+- Для выбора даты доступен дополнительный контроллер: календарь.
+- Календарь не должен быть доступен для `Tab` или `Shift + Tab`.
+- Блокировка полей отменяет навигацию используя `Tab`.
+  Также происходит изменение стилистики `date`.
+- При неудачной валидации поле должно изменить стилистику `date`.
+
+## Примеры
+
+Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
+указать лишь `type` и `name`:
+
+::: code-group
+
+```html
+<form-field name = "created" type="date"/>
+```
+
+```ts
+import {FormField} from "jenesius-vue-form";
+
+```
+
+:::
+
+Поле по умолчанию:
+<FormField  type = "date" name = "created" label = "Это администратор" />
+
+____
+
+В заблокированном состоянии:
+<FormField disabled type = "date" name = "created" label = "Заблокированное" />
+
+____
+
+Поле не прошло валидацию:
+<FormField :errors = "['Seleact this fields']" type = "date" name = "created" label = "С ошибкой" />
+
+____
+
+Изменённое значение `mask`:
+<FormField mask = "YYYY_MM" type = "date" name = "deleted" label = "С переданными values" />
+_____
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```

docs/ru/inputs/input-switch.md

@@ -0,0 +1,86 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+const values = useFormValues(form)
+
+</script>
+
+# Поле switch
+
+Поле может использоваться в качестве переключателя или для выбора одного значения
+из двух.
+
+- Ключевое слово `switch`.
+
+## Параметры
+
+### values <Badge type = "info">Необязательный</Badge>
+
+- Тип `[any, any]`.
+  В случае, если данный параметр передан, то включенный параметр будет соответствовать `values[0]`
+  значение, а выключенный `values[1]`.
+____ 
+
+Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
+
+## Значение
+
+Если параметр **values** не был передан, то значение будет **true** - включён, **false** - выключен.
+В случае, когда **values** передаётся, включенному значению будет соответствовать `values[0]`,
+а выключенному оставшееся значение.
+
+## Спецификация
+
+- Поле доступно при использовании `Tab` и `Shift + Tab`.
+- Выбор элемента возможен по щелчку на сам элемент.
+- Выбор возможен по нажатию `Enter` или `Space`.
+- Блокировка полей отменяет навигацию используя `Tab`.
+  Также происходит изменение стилистики `switch`.
+- При неудачной валидации поле должно изменить стилистику `switch`.
+
+## Примеры
+
+Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
+указать лишь `type` и `name`:
+
+::: code-group
+
+```html
+<form-field name = "hasPhone" type="switch"/>
+```
+
+```ts
+import {FormField} from "jenesius-vue-form";
+
+```
+
+:::
+
+Поле по умолчанию:
+<FormField  type = "switch" name = "isAdmin" label = "Это администратор" />
+
+____
+
+В заблокированном состоянии:
+<FormField disabled type = "switch" name = "isAdmin" label = "Заблокированное" />
+
+____
+
+Поле не прошло валидацию:
+<FormField :errors = "['Seleact this fields']" type = "switch" name = "isAdmin" label = "С ошибкой" />
+
+____
+
+Поле с переданными `values`: ```['yes', 'no']```
+<FormField :values = "['yes', 'no']" type = "switch" name = "useMask" label = "С переданными values" />
+_____
+
+
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```

src/types/index.ts

@@ -12,6 +12,7 @@ export type ValidationError = string | false
 export type FormFieldOptions = OptionRow | Record<string, string>
 
 export type OptionRow = IOptionRowWithLabel | IOptionRowWithTitle
+export type ToggleValues = [any, any];
 
 export interface IOptionRowWithLabel {
 	label: string,

src/utils/get-next-from-toggle-values.ts

@@ -0,0 +1,4 @@
+import {ToggleValues} from "../types";
+export default function getNextFormToggleValues(values: ToggleValues, value: any) {
+	return values[0] !== value ? values[0] : values[1]
+}

src/widgets/inputs/input-single-checkbox/widget-input-single-checkbox.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import FieldWrap from "../field-wrap.vue";
 import ElementInputCheckbox from "../input-checkbox/element-input-checkbox.vue";
+import getNextFormToggleValues from "../../../utils/get-next-from-toggle-values";
 
 const props = defineProps<{
 	label?: string,
@@ -33,7 +34,7 @@ const emit = defineEmits<{
 function onInput() {
 	if (props.disabled) return;
 
-	const value = props.values ? props.modelValue === props.values[0] ? props.values[1] : props.values[0] : !props.modelValue;
+	const value = props.values ? getNextFormToggleValues(props.values, props.modelValue) : !props.modelValue;
 	emit('update:modelValue', value)
 }
 

src/widgets/inputs/input-single-radio/widget-input-single-radio.vue

@@ -18,6 +18,7 @@
 <script setup lang = "ts">
 	import ElementInputRadio from "./../input-radio/element-input-radio.vue";
 	import FieldWrap from "../field-wrap.vue";
+	import getNextFormToggleValues from "../../../utils/get-next-from-toggle-values";
 
     const props = defineProps<{
         label?: string,
@@ -34,7 +35,7 @@
     function handleInput() {
 		if (props.disabled) return;
 
-		const value = props.values ? props.modelValue === props.values[0] ? props.values[1] : props.values[0] : !props.modelValue;
+		const value = props.values ? getNextFormToggleValues(props.values, props.modelValue) : !props.modelValue;
 		emit('update:modelValue', value)
     }
 </script>

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

@@ -1,17 +1,21 @@
 <template>
-	<field-wrap>
+	<field-wrap :errors = "errors">
 		<div class="container-input-switch">
 			<div class="input-switch"
-				 @click="onInput()"
+
 				 :class="{
-                     'input-switch_disabled': disabled
+                     'input-switch_disabled': disabled,
+                     'vf-input-switch_error': errors && errors.length !== 0
                  }"
 				 :tabindex=" disabled ? 'none' : 0"
+
+				 @click="onInput()"
 				 @keyup.enter = "onInput()"
+				 @keyup.space = "onInput()"
 			>
 				<div class="input-switch-button"
 					 :class="{
-                    'input-switch-button_active': !!modelValue
+                    'input-switch-button_active': values ? values[0] === modelValue : !!modelValue
                 }"
 				></div>
 			</div>
@@ -23,20 +27,25 @@
 
 <script setup lang="ts">
 import FieldWrap from "../field-wrap.vue";
+import {ToggleValues} from "../../../types";
+import getNextFormToggleValues from "../../../utils/get-next-from-toggle-values";
 
 const props = defineProps<{
 	label?: string,
 	modelValue: any,
-	disabled: boolean
+	disabled: boolean,
+	errors: string[],
+	values?: ToggleValues
 }>()
 
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', v: any): void
 }>()
 
-function onInput(v = !props.modelValue) {
+function onInput(v = props.values ? getNextFormToggleValues(props.values, props.modelValue) : !props.modelValue) {
 	if (props.disabled) return;
+
 	emit('update:modelValue', v)
 }
 
@@ -78,6 +87,9 @@ function onInput(v = !props.modelValue) {
 	background-color: var(--vf-input-active);
 	transform: translateX(18px);
 }
+.vf-input-switch_error {
+	border: var(--vf-input-border-error);
+}
 
 .input-switch-label {
 	margin: 0;