Skip to content

Commit d63c935

Browse files
JenesiusJenesius
authored
Merge pull request #176 from Jenesius/issue_175
Issue 175
2 parents c6ce4a5 + 8ccd8f0 commit d63c935

File tree

22 files changed

+1149
-200
lines changed

22 files changed

+1149
-200
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const values = useFormValues(form);
2525

2626
- Тип [FormFieldOptions](./../fields/form-field-options).
2727

28-
28+
Набор возможных значений поля.
2929
____
3030

3131
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).

‎docs/ru/inputs/input-date.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup>
2+
import {FormField, Form, useFormValues} from '../../../src';
3+
4+
const form = new Form();
5+
const values = useFormValues(form)
6+
7+
</script>
8+
9+
# Поле date
10+
11+
Поле используется для выбора даты и обрабатывает время в ISO формате.
12+
13+
- Ключевое слово `date`.
14+
- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date)).
15+
16+
## Параметры
17+
18+
### placeholder <Badge type = "info">Необязательный</Badge>
19+
20+
- Тип `string`
21+
Строковая метка, отображается, когда в поле нет данных.
22+
23+
### mask <Badge type = "info">Необязательный</Badge>
24+
25+
- Тип `string`.
26+
- По умолчанию: `YYYY/MM/DD`.
27+
28+
Маска задаёт формат отображение даты. Маска может состоять из символов любых символов, однако
29+
ключевыми являются `Y`, `M`, `D`, `H` и `h`. На их позицию будут подставлены соотвествующие значений.
30+
31+
____
32+
33+
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
34+
35+
## Значение
36+
37+
Значение поля выступает строка соответсвующая упрощённому расширенному
38+
ISO формату [(ISO 8601)](https://en.wikipedia.org/wiki/ISO_8601).
39+
40+
## Спецификация
41+
42+
- Поле доступно при использовании `Tab` и `Shift + Tab`.
43+
- Ввод даты возможно используя поле ввода.
44+
- Для выбора даты доступен дополнительный контроллер: календарь.
45+
- Календарь не должен быть доступен для `Tab` или `Shift + Tab`.
46+
- Блокировка полей отменяет навигацию используя `Tab`.
47+
Также происходит изменение стилистики `date`.
48+
- При неудачной валидации поле должно изменить стилистику `date`.
49+
50+
## Примеры
51+
52+
Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
53+
указать лишь `type` и `name`:
54+
55+
::: code-group
56+
57+
```html
58+
<form-field name = "created" type="date"/>
59+
```
60+
61+
```ts
62+
import {FormField} from "jenesius-vue-form";
63+
64+
```
65+
66+
:::
67+
68+
Поле по умолчанию:
69+
<FormField type = "date" name = "created" label = "Это администратор" />
70+
71+
____
72+
73+
В заблокированном состоянии:
74+
<FormField disabled type = "date" name = "created" label = "Заблокированное" />
75+
76+
____
77+
78+
Поле не прошло валидацию:
79+
<FormField :errors = "['Seleact this fields']" type = "date" name = "created" label = "С ошибкой" />
80+
81+
____
82+
83+
Изменённое значение `mask`:
84+
<FormField mask = "YYYY_MM" type = "date" name = "deleted" label = "С переданными values" />
85+
_____
86+
87+
88+
----
89+
Текущее состояние формы:
90+
```ts-vue
91+
{{values}}
92+
```

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const values = useFormValues(form);
2626

2727
- Тип [FormFieldOptions](./../fields/form-field-options).
2828

29+
Набор возможных значений поля.
2930
____
3031

3132
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть

‎docs/ru/inputs/input-range.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script setup>
2+
import {FormField, Form, useFormValues} from '../../../src';
3+
4+
const form = new Form();
5+
const values = useFormValues(form);
6+
7+
</script>
8+
9+
# Поле number
10+
11+
Поле используется для ввода численных значений.
12+
13+
- Ключевое слово `range`.
14+
- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)).
15+
16+
17+
## Параметры
18+
19+
### autofocus <Badge type = "info">Необязательный</Badge>
20+
21+
- Тип `boolean | 'true' | 'false'`
22+
23+
Если данный параметр передаётся, при установке данного поля, на него будет автоматически передано управление.
24+
25+
### step <Badge type = "info">Необязательный</Badge>
26+
- Тип `number | string`
27+
Данное поле имеет механизм увеличения или уменьшения введённого числа на 1. Для изменения этого параметра
28+
необходимо задать атрибут `step`.
29+
30+
### min <Badge type = "info">Необязательный</Badge>
31+
- Тип `number | string`
32+
33+
Установка нижней границы значения.
34+
35+
36+
### max <Badge type = "info">Необязательный</Badge>
37+
- Тип `number | string`
38+
39+
Установка верхней границы значения.
40+
41+
____
42+
43+
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
44+
45+
## Значение
46+
Данное поле работает со строковым значением.
47+
48+
## Спецификация
49+
50+
- Поле доступно при использовании `Tab` и `Shift + Tab`.
51+
- Блокировка отменяет навигацию через `Tab`.
52+
- Блокировка поля изменяет стилистику `range`.
53+
- Ошибка валидации изменяет стилистику `range`.
54+
- Для ограничения ввода используется `min` и `max` атрибуты.
55+
56+
## Пример
57+
58+
Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
59+
указать лишь `type` и `name`:
60+
61+
::: code-group
62+
```html
63+
<form-field name = "volume" type="range"/>
64+
```
65+
66+
```ts
67+
import {FormField} from "jenesius-vue-form";
68+
```
69+
:::
70+
71+
72+
Поле по умолчанию:
73+
<FormField type = "range" name = "volume" label = "Установите значение" />
74+
75+
____
76+
77+
В заблокированном состоянии:
78+
<FormField type = "range" name = "volume" disabled label = "Заблокированное" />
79+
80+
____
81+
82+
Поле не прошло валидацию:
83+
<FormField type = "range" name = "volume" :errors = "['The password is too simple']" label = "С ошибкой" />
84+
85+
____
86+
87+
Установка границ через `max` и `min`:
88+
<FormField type = "range" name = "volume" max = "10" min= "0" label = "От 0 до 10" />
89+
90+
____
91+
92+
Установка `step` в значение 2:
93+
<FormField type = "range" name = "volume" step = "2" label = "С шагом 2" />
94+
95+
____
96+
97+
Текущее состояние формы:
98+
```ts-vue
99+
{{values}}
100+
```

‎docs/ru/inputs/input-select.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
2+
3+
<script setup>
4+
import {FormField, Form, useFormValues} from '../../../src';
5+
6+
const form = new Form();
7+
const companies = {
8+
'a': "Apple",
9+
'h': "Huawei",
10+
's': "Samsung"
11+
};
12+
const colors = {
13+
white: 'Белый',
14+
black: 'Черный',
15+
red: 'Красный',
16+
yellow: 'Желтый',
17+
orange: 'Оранжевый',
18+
green: 'Зеленый',
19+
blue: 'Синий',
20+
purple: 'Фиолетовый',
21+
pink: 'Розовый',
22+
brown: 'Коричневый',
23+
grey: 'Серый',
24+
};
25+
const values = useFormValues(form);
26+
27+
</script>
28+
29+
30+
# Поле select
31+
32+
Поле используется для выбора единственного значений из предоставленного набора.
33+
34+
- Ключевое слово `select`.
35+
- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#select-button-state-(type=select)).
36+
37+
## Параметры
38+
39+
40+
### options <Badge type = "tip">Обязательный</Badge>
41+
42+
- Тип [FormFieldOptions](./../fields/form-field-options).
43+
44+
Набор возможных значений поля.
45+
46+
### hiddenValues <Badge type = "info">Необязательный</Badge>
47+
48+
- Тип `any[]`
49+
50+
Если данный массив указан, то в выборке будут отсутствовать элементы указанные в `hiddenValues`.
51+
52+
### placeholder <Badge type = "info">Необязательный</Badge>
53+
- Тип `string`
54+
55+
В случае, если значение не выбрано - показывается текстовая метка.
56+
____
57+
58+
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть
59+
на [этой странице](./form-field.md#params).
60+
61+
## Значение
62+
63+
При нажатии или выборе соответствующего `select` элемента, значение будет установлено в
64+
соответствии со значением в поле `value` из переданных `options`.
65+
66+
## Спецификация
67+
68+
- Объект доступен для доступа через `Tab` и `Shift + Tab`.
69+
- Перемещение по объекту возможна используя `ArrowDown` и `ArrowUp`. Перемещение таким способом
70+
изменяет значение поля.
71+
- Выбор элемента возможен по щелчку на соответствующий элемент.
72+
- **Нельзя** выбрать элемент используя `Enter` или `Space`.
73+
- Использование `Enter` или `Space` раскрывает или закрывает выпадающий список.
74+
- Для длинного списка показывается дополнительный контроллер поиска.
75+
- Блокировка полей отменяет навигацию используя `Tab`. Также происходит изменение стилистики `select`.
76+
- При неудачной валидации поле должно изменить стилистику `select`.
77+
78+
## Пример
79+
80+
Для подключения виджета необходимо указать `type` и `options`:
81+
82+
::: code-group
83+
84+
```html
85+
<form-field :options = "companies" type = "select"/>
86+
```
87+
```ts
88+
import {FormField} from "jenesius-vue-form";
89+
90+
const companies = {
91+
'a': "Apple",
92+
'h': "Huawei",
93+
's': "Samsung"
94+
};
95+
const colors = {
96+
white: 'Белый',
97+
black: 'Черный',
98+
red: 'Красный',
99+
yellow: 'Желтый',
100+
orange: 'Оранжевый',
101+
green: 'Зеленый',
102+
blue: 'Синий',
103+
purple: 'Фиолетовый',
104+
pink: 'Розовый',
105+
brown: 'Коричневый',
106+
grey: 'Серый',
107+
};
108+
```
109+
110+
:::
111+
112+
Поле по умолчанию:
113+
<FormField :options = "companies" type = "select" name = "company" label = "Выбери одну из" />
114+
115+
____
116+
117+
В заблокированном состоянии:
118+
<FormField :options = "companies" type = "select" name = "company" disabled label = "Заблокированное" />
119+
120+
____
121+
122+
Поле не прошло валидацию:
123+
<FormField :errors = "['Seleact this fields']" :options = "companies" type = "select" name = "company" label = "С ошибкой" />
124+
125+
____
126+
127+
Поле с большим количеством `options`. Должен отображаться контроллер поиска:
128+
<FormField :options = "colors" type = "select" name = "color" label = "Большое число цветов" />
129+
130+
____
131+
132+
Использование `hiddenValues` и установка значения `['blue', 'purple', 'pink', 'brown', 'grey']`:
133+
<FormField :options = "colors" hiddenValues = "['blue', 'purple', 'pink', 'brown', 'grey']" type = "select" name = "color" label = "Большое число цветов" />
134+
135+
136+
----
137+
Текущее состояние формы:
138+
```ts-vue
139+
{{values}}
140+
```

0 commit comments

Comments
 (0)