docs: add specification for radio(also single). Add values props for single-radio

Author: Jenesius

docs/ru/inputs/input-checkbox.md

@@ -7,7 +7,7 @@ const options = {
     g: "Зелёный",
     y: "Жёлтый"
 };
-const values = useFormValues(form)
+const values = useFormValues(form);
 
 </script>
 

docs/ru/inputs/input-radio.md

@@ -0,0 +1,91 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+const companies = {
+	'a': "Apple",
+    'h': "Huawei",
+    's': "Samsung"
+};
+const values = useFormValues(form);
+
+</script>
+
+
+# Поле radio
+
+Поле используется для выбора единственного значений из предоставленного набора.
+
+- Ключевое слово `radio`.
+- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio)).
+
+## Параметры
+
+
+### options <Badge type = "tip">Обязательный</Badge>
+
+- Тип [FormFieldOptions](./../fields/form-field-options).
+
+____ 
+
+Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть
+на [этой странице](./form-field.md#params).
+
+## Значение
+
+При нажатии или выборе соответствующего `radio` элемента, значение будет установлено в
+соответствии со значением в поле `value` из переданных `options`.
+
+## Спецификация
+
+- Объект доступен для доступа через `Tab` и `Shift + Tab`.
+- Перемещение по объекту возможна используя `ArrowDown` и `ArrowUp`. Перемещение таким способом
+изменяет значение поля.
+- Выбор элемента возможен по щелчку на соответствующий элемент.
+- **Нельзя** выбрать элемент используя `Enter` или `Space`.
+- Блокировка полей отменяет навигацию используя `Tab`. Также происходит изменение стилистики `radio`.
+- При неудачной валидации поле должно изменить стилистику `radio`. 
+
+## Пример
+
+Для подключения виджета необходимо указать `type` и `options`:
+
+::: code-group
+
+```html
+<form-field :options = "companies" type = "radio"/>
+```
+```ts
+import {FormField} from "jenesius-vue-form";
+
+const companies = {
+	'a': "Apple",
+	'h': "Huawei",
+	's': "Samsung"
+};
+```
+
+:::
+
+
+Поле по умолчанию:
+<FormField :options = "companies" type = "radio" name = "company" label = "Выбери одну из" />
+
+____
+
+В заблокированном состоянии:
+<FormField :options = "companies" type = "radio" name = "company" disabled label = "Заблокированное" />
+
+____
+
+Поле не прошло валидацию:
+<FormField :errors = "['Seleact this fields']" :options = "companies" type = "radio" name = "company" label = "С ошибкой" />
+
+____
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```

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

@@ -0,0 +1,85 @@
+<script setup>
+import {FormField, Form, useFormValues} from '../../../src';
+
+const form = new Form();
+
+const values = useFormValues(form);
+</script>
+
+
+# Поле single-radio
+
+Поле может использоваться в качестве переключателя или для выбора одного значения
+из двух.
+
+
+- Ключевое слово `single-radio`.
+- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio)).
+
+## Параметры
+
+### 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-radio`.
+- При неудачной валидации поле должно изменить стилистику `single-radio`.
+
+## Пример
+
+Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
+указать лишь `type` и `name`:
+
+::: code-group
+
+```html
+<form-field name = "hasPhone" type = "single-radio"/>
+```
+```ts
+import {FormField} from "jenesius-vue-form";
+```
+
+:::
+
+
+Поле по умолчанию:
+<FormField :options = "companies" type = "single-radio" name = "hasPhone" label = "Вы используете телефон?" />
+
+____
+
+В заблокированном состоянии:
+<FormField :options = "companies" type = "single-radio" name = "hasPhone" disabled label = "Заблокированное" />
+
+____
+
+Поле не прошло валидацию:
+<FormField :errors = "['Seleact this fields']" :options = "companies" type = "single-radio" name = "hasPhone" label = "С ошибкой" />
+
+____
+
+Поле с переданными `values`: ```['yes', 'no']```
+<FormField :values = "['yes', 'no']" type = "single-radio" name = "isAdmin" label = "С переданными values" />
+
+
+----
+Текущее состояние формы:
+```ts-vue
+{{values}}
+```

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

@@ -1,7 +1,7 @@
 <template>
     <field-wrap :errors = "errors">
 		<element-input-radio
-			:model-value="!!modelValue"
+			:model-value="values ? modelValue === values[0] : modelValue || false"
 			:disabled="disabled"
 			:label="label"
 			:error="!!errors.length"
@@ -24,15 +24,18 @@
         modelValue: any,
         disabled: boolean,
 		errors: string[],
+		values?: [any, any],
     }>()
 
     const emit = defineEmits<{
         (e: 'update:modelValue', v: any): void
     }>()
 
     function handleInput() {
-        if (props.disabled) return;
-        emit('update:modelValue', !props.modelValue)
+		if (props.disabled) return;
+
+		const value = props.values ? props.modelValue === props.values[0] ? props.values[1] : props.values[0] : !props.modelValue;
+		emit('update:modelValue', value)
     }
 </script>
 

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

@@ -85,4 +85,25 @@ describe("Input single radio", () => {
 		await input.trigger('keyup.enter')
 		expect(form.getValueByName(name)).toBe(true)
 	})
+	test("If values was provided, modelValue should be or first or second value", async () => {
+		const app = defaultMount(defineComponent({
+			template: `<div><form-field 
+				type = "single-radio" name = "${name}" label = "Select" required
+				:values = "['good', 'bad']"
+			/></div>`,
+			components:  {FormField}
+		}))
+		const form = (app.vm as any).form
+
+		const input = app.get('.element-input-radio')
+
+		await input.trigger('click')
+		expect(form.getValueByName(name)).toBe("good")
+
+		await input.trigger('click')
+		expect(form.getValueByName(name)).toBe("bad")
+
+		await input.trigger('click')
+		expect(form.getValueByName(name)).toBe("good")
+	})
 })