Skip to content

Commit 18fd651

Browse files
JenesiusJenesius
authored
Merge pull request #174 from Jenesius/issue_173
Issue 173
2 parents 80d7f01 + ed4ee51 commit 18fd651

File tree

16 files changed

+741
-180
lines changed

16 files changed

+741
-180
lines changed

‎docs/ru/guide/types.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
## StringModify
3+
4+
```ts
5+
type StringModify = (v: unknown) => string
6+
```

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

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

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
# Поле password
10+
11+
Поле используется для ввода пароля.
12+
13+
- Ключевое слово `password`.
14+
- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#password-state-(type=password)).
15+
16+
## Параметры
17+
18+
### autofocus <Badge type = "info">Необязательный</Badge>
19+
20+
- Тип `boolean | 'true' | 'false'`
21+
22+
Если данный параметр передаётся, при установке данного поля, на него будет автоматически передано управление.
23+
____
24+
25+
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
26+
27+
## Значение
28+
29+
Данное поле работает со строковыми значениями.
30+
31+
## Спецификация
32+
33+
- Поле доступно при использовании `Tab` и `Shift + Tab`.
34+
- Переключение режимов ввода изменяется переключателем.
35+
- Блокировка отменяет навигацию через `Tab`.
36+
- Блокировка поля изменяет стилистику `password`.
37+
- Ошибка валидации изменяет стилистику `password`.
38+
39+
## Примеры
40+
41+
Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
42+
указать лишь `type` и `name`:
43+
44+
::: code-group
45+
46+
```html
47+
<form-field name = "pass" type="password"/>
48+
```
49+
50+
```ts
51+
import {FormField} from "jenesius-vue-form";
52+
53+
```
54+
55+
:::
56+
57+
Поле по умолчанию:
58+
<FormField type = "password" name = "pass" label = "Введите пароль" />
59+
60+
____
61+
62+
В заблокированном состоянии:
63+
<FormField disabled type = "password" name = "pass" label = "Заблокированное" />
64+
65+
____
66+
67+
Поле не прошло валидацию:
68+
<FormField :errors = "['The password is too simple']" type = "password" name = "pass" label = "С ошибкой" />
69+
70+
71+
72+
----
73+
Текущее состояние формы:
74+
```ts-vue
75+
{{values}}
76+
```

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ ____
2828
## Значение
2929

3030
Если параметр **values** не был передан, то значение будет **true** - включён, **false** - выключен.
31-
В случае, когда **values** передаётся, Включенному знаю будет соответствовать `values[0]`,
31+
В случае, когда **values** передаётся, включенному значению будет соответствовать `values[0]`,
3232
а выключенному оставшееся значение.
3333

3434
## Спецификация
3535

36+
- Поле доступно при использовании `Tab` и `Shift + Tab`.
3637
- Выбор элемента возможен по щелчку на сам элемент.
3738
- Выбор возможен по нажатию `Enter` или `Space`.
3839
- Блокировка полей отменяет навигацию используя `Tab`.

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script setup>
2+
import {FormField, Form, useFormValues} from '../../../src';
3+
4+
const form = new Form();
5+
const values = useFormValues(form);
6+
7+
function prettyFn(v) {
8+
if (!v) return '';
9+
return `- ${v} - `;
10+
}
11+
function modifyFn(v) {
12+
if (!v) return '';
13+
return v.replace(/[^qwerty]/gi, '');
14+
}
15+
16+
</script>
17+
18+
# Поле text
19+
20+
Поле используется для ввода текста.
21+
22+
- Ключевое слово `text`. Используется по умолчанию.
23+
- WhatWG [Спецификация](https://html.spec.whatwg.org/multipage/input.html#text-(type=text)-state-and-search-state-(type=search)).
24+
25+
## Параметры
26+
27+
### autofocus <Badge type = "info">Необязательный</Badge>
28+
29+
- Тип `boolean | 'true' | 'false'`.
30+
31+
Если данный параметр передаётся, при установке данного поля, на него будет автоматически передано управление.
32+
33+
### placeholder <Badge type = "info">Необязательный</Badge>
34+
- Тип `string`
35+
36+
Строковое значение подсказки перед вводом данных.
37+
38+
### maxlength <Badge type = "info">Необязательный</Badge>
39+
- Тип 'string | number'
40+
Ограничивает максимальный размер вводимых данных.
41+
42+
### prefix <Badge type = "info">Необязательный</Badge>
43+
- Тип 'string'
44+
Если данный атрибут передан, он будет отображаться перед вводимым значением.
45+
46+
### numeric <Badge type = "info">Необязательный</Badge>
47+
- Тип `boolean`
48+
Если данный атрибут указан, ввод будет приводиться к валидному числу. Обратите внимание,
49+
что тип возвращаемого значения остаётся строковым.
50+
51+
### pretty <Badge type = "info">Необязательный</Badge>
52+
- Тип [StringModify](./../guide/types#StringModify).
53+
54+
Используется для изменения отображения поля. Не изменяет значение, хранимое в форме.
55+
Данные правила принимаются только после того, как поле стало не активным.
56+
57+
### modify <Badge type = "info">Необязательный</Badge>
58+
- Тип [StringModify](./../guide/types#StringModify).
59+
60+
Функция для изменения вводимого значения. В отличие от `pretty`, работает перманентно.
61+
Изменяет значение хранимое в форме.
62+
63+
____
64+
65+
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть на [этой странице](./form-field.md#params).
66+
67+
## Значение
68+
69+
Данное поле работает со строковыми значениями.
70+
71+
## Спецификация
72+
73+
- Поле доступно при использовании `Tab` и `Shift + Tab`.
74+
- Блокировка отменяет навигацию через `Tab`.
75+
- Блокировка поля изменяет стилистику `text`.
76+
- Ошибка валидации изменяет стилистику `text`.
77+
- Аттрибут `maxlength` влияет на ограничения только при вводе значения. Если значение
78+
будет установлено из формы и по длине будет превышать значение `maxlength`, оно не будет
79+
обрезано в поле, а выведется полностью.
80+
81+
82+
## Примеры
83+
84+
85+
Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо
86+
указать лишь `name`, т.к. атрибут `type` по умолчанию имеет значение `text`. Функции `pretty`
87+
и `modify` находятся во вкладке `ts`:
88+
89+
::: code-group
90+
```html
91+
<form-field name = "username"/>
92+
```
93+
94+
```ts
95+
import {FormField} from "jenesius-vue-form";
96+
97+
function prettyFn(v) {
98+
if (!v) return '';
99+
return `- ${v} - `;
100+
}
101+
function modifyFn(v) {
102+
if (!v) return '';
103+
return v.replace(/[^qwerty]/gi, '');
104+
}
105+
```
106+
:::
107+
108+
Поле по умолчанию:
109+
<FormField name = "username" label = "Введите Username" />
110+
111+
____
112+
113+
В заблокированном состоянии:
114+
<FormField disabled name = "username" label = "Заблокированное" />
115+
116+
____
117+
118+
Поле не прошло валидацию:
119+
<FormField :errors = "['The password is too simple']" name = "username" label = "С ошибкой" />
120+
121+
____
122+
123+
Ограничение длинны поля используя `maxlength`:
124+
<FormField name = "username" label = "Введите Длинне 5" maxlength = 5 />
125+
126+
____
127+
128+
Использование `prefix`:
129+
<FormField name = "username" label = "Введите значение" prefix = "username:" />
130+
131+
____
132+
133+
Ввод строки приводимой к числу, использование атрибута `numeric`:
134+
<FormField name = "username" label = "Введите значение" numeric />
135+
136+
____
137+
138+
Изменение только отображаемого значения при помощи `pretty`:
139+
<FormField name = "username" label = "Ввод красивого значения" :pretty = "prettyFn" />
140+
141+
____
142+
Изменения ввода через `modify`:
143+
<FormField name = "username" label = "Используй только q w e r t y" :modify = "modifyFn" />
144+
145+
----
146+
Текущее состояние формы:
147+
```ts-vue
148+
{{values}}
149+
```

0 commit comments

Comments
 (0)