docs: add specification for checkbox and single-checkbox.

Author: Jenesius

docs/ru/fields/form-field-options.md

@@ -0,0 +1,65 @@
+# FormFieldOptions
+
+Набор перечислимых измерений. Может быть либо массивом, либо объектом. Рекомендуется использовать
+массив в качестве передаваемых значений (будет рассмотрено далее в этой статье).
+
+- **Array**
+
+В случае, если был передан массив, то каждые элемент данного массива должен иметь следующий вид:
+```ts
+interface OptionRow{
+    label: string,
+    value: any
+}
+```
+### Пример значений
+
+```ts
+[
+    {label: 'Green color', value: 'green'},
+    {label: 'Red color', value: 'red'}
+]
+```
+
+#### label <Badge type = "tip">Строка</Badge>
+
+Текстовая метка, которая будет отображаться в виде заголовка.
+
+#### value <Badge type = "tip">Любое значение</Badge>
+
+Значение, которое будет устанавливаться ячейки.
+
+:::tip Чем полезен массив
+Вы не запутаетесь, где метка, а где значение. В случае с объектом существует вероятность того, что
+тебе придется
+постоянно заходите в документацию, чтобы уточнить расположение метки: справа или слева.
+:::
+
+- **Object**
+
+Перейдем к объекту. Помните: слева — значение, справа — метка (заголовок). При передаче объект ожидается следующий тип:
+```ts
+interface OptionObject {
+	[value: string]: string
+}
+```
+
+### Пример
+
+```json
+{
+  "green": "Green color",
+  "red": "Red color"
+}
+```
+
+Однако в этом случае мы сталкиваемся со следующей проблемой: значение может быть **только** строкой. Даже указанное число
+как значение — будет автоматически преобразовано JavaScript в строку. Есть одна ситуация, когда удобно
+использовать
+или сохраните значение в объекте. Для этого мы предоставили [функцию](./../guide/utils#convertOptionsObject) для
+преобразования объекта в массив.
+
+:::warning Почему значение слева?
+Основная причина тому - ключ в объект является уникальным. То есть нельзя создать объект с двумя одинаковыми ключами. 
+Именно эта валидация побудила использовать ключ, как `value`, а само значение ключа, как `label`.
+:::

docs/ru/inputs/form-field.md

@@ -0,0 +1,13 @@
+
+
+## Параметры {params}
+
+- label
+
+- name
+
+- validation
+
+- type
+
+- disabled

docs/ru/inputs/input-checkbox.md

@@ -0,0 +1,88 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+const options = {
+	r: "Красный",
+    g: "Зелёный",
+    y: "Жёлтый"
+};
+const values = useFormValues(form)
+
+</script>
+
+# Поле checkbox
+
+Поле используется для множественного выбора значений из предоставленного набора.
+
+- Ключевое слово `checkbox`.
+- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)).
+
+## Параметры
+
+
+### options <Badge type = "tip">Обязательный</Badge>
+
+- Тип [FormFieldOptions](./../fields/form-field-options).
+
+
+____ 
+
+Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
+
+## Значение
+
+В качестве значения выступает **массив**, содержащий `value` выбранных элементов,
+т.к. поле предназначено для множественного выбора. 
+
+## Спецификация
+
+- Навигация по объекту осуществляется при помощи нажатия `Tab` и `Shift + Tab`.
+- Навигация **не** доступна по нажатию `ArrowDown` и `ArrowUp`.
+- Выбор элементом возможен по щелчку на соответсвующий элемент,
+а также по нажатию `Enter` или `Space` находясь на нужном элементе.
+- Блокировка полей отменяет навигацию используя `Tab`. Также происходит изменение стилистики `checkbox`.
+- При неудачной валидации поле должно изменить стилистику `checkbox`. 
+
+## Примеры
+
+Для подключения виджета воспользуйтесь стандартной компонентой `FormField`, а также необходимо
+указать атрибуты `type` и `name`:
+```vue
+<template>
+	<form-field
+		name = "color"
+		type = "checkbox"
+		label = "Color"
+		:options = "options"
+	/>
+</template>
+<script setup>
+import {FormField} from "jenesius-vue-form";
+
+const options = {
+	r: "Красный",
+	g: "Зелёный",
+	y: "Жёлтый"
+}
+
+</script>
+```
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```
+
+Поле в обычно состоянии:
+<FormField :options = "options" type = "checkbox" name = "color" label = "Select color" />
+_____
+
+Вид поля при его блокировки:
+<FormField :options = "options" type = "checkbox" name = "color" disabled label = "Disabled status" />
+
+_____
+Вид поля в случае ошибки валидации:
+<FormField :options = "options" type = "checkbox" name = "color" :errors = "['Seleact all options']" label = "With Error" />

docs/ru/inputs/input-single-checkbox.md

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

src/types/index.ts

@@ -9,6 +9,8 @@ export type Value = Values | any;
 export type FormFieldValidationCallback = (values: any) => true | ValidationError
 export type ValidationError = string | false
 
+export type FormFieldOptions = OptionRow | Record<string, string>
+
 export type OptionRow = IOptionRowWithLabel | IOptionRowWithTitle
 
 export interface IOptionRowWithLabel {

src/widgets/inputs/input-checkbox/element-input-checkbox.vue

@@ -58,6 +58,10 @@ defineProps<{
 .element-input-checkbox-button_disabled{
 	cursor: default;
 }
+.element-input-checkbox:has(.element-input-checkbox-button_disabled) {
+	cursor: default;
+}
+
 .element-input-checkbox-button_error {
 	border: var(--vf-input-border-error);
 }

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

@@ -3,6 +3,7 @@
 		<element-input-checkbox
 			:model-value="values ? modelValue === values[0] : modelValue || false"
 			:disabled="disabled"
+			:tabindex="disabled? 'none' : 0"
 			:label="label"
 			@click="onInput"
 			@keyup.enter="onInput"

tests/integrations/input-single-checkbox.spec.ts

@@ -107,4 +107,16 @@ describe("Input single checkbox", () => {
 		await input.trigger('keyup.enter')
 		expect(form.getValueByName(name)).toBe("good")
 	})
+	test("Tabindex should be provided if field is not disabled", async () => {
+		const item = app.find('.element-input-checkbox')
+
+		expect(item.element.getAttribute('tabindex')).toBe('0')
+	})
+	test("Tabindex should be 'none' if field was disabled", async () => {
+		const item = app.find('.element-input-checkbox')
+		form.disable()
+		await app.vm.$nextTick();
+
+		expect(item.element.getAttribute('tabindex')).toBe('none')
+	})
 })