8000 docs: update `ru` info about input-select · Jenesius/vue-form@3c4350b · GitHub
[go: up one dir, main page]
< 10000 a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content

Commit 3c4350b

Browse files
JenesiusJenesius
committed
docs: update ru info about input-select
1 parent 7d7f21f commit 3c4350b

File tree

3 files changed

+55
-12
lines changed

3 files changed

+55
-12
lines changed

‎docs/inputs/input-select.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,20 @@ according to the value in the `value` field of the passed `options`. Если у
8282
- Moving around the object is possible using `ArrowDown` and `ArrowUp`. Moving this way
8383
changes the value of a field.
8484
- Selecting an element is possible by clicking on the corresponding element.
85-
- **Cannot** select an element using `Enter` or `Space`.
86-
- Using `Enter` or `Space` expands or closes the dropdown list.
85+
- **Cannot** select an element using `Enter`.
86+
- Using `Enter` expands or closes the dropdown list.
8787
- An additional search controller is shown for a long list.
8888
- Blocking fields cancels navigation using `Tab`. There is also a change in the style of `select`.
8989
- If the validation fails, the field should change the style of the `select`.
9090
- При использовании аттрибута `multiple` выборка не должна закрывать выпадающий список.
91+
- В режиме `miltiple:true` с зажатой `Shift` используется следующий порядок переходов (`_` означение состояние
92+
в котором ни один элемент не выбран, `->` - переход с одного элемента на другой, `0` - элемент не выбран, `1` - элемент
93+
уже был выбран):
94+
- _ -> 0 = _ , 1
95+
- 1 -> 0 = 1 , 1
96+
- 1 -> 1 = 0 , 1
97+
- 0 -> 0 = 1 , 1
98+
- 0 -> 1 = 0 , 0
9199

92100

93101
## Examples

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

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,20 @@ const values = useFormValues(form);
5353
- Тип `string`
5454

5555
В случае, если значение не выбрано - показывается текстовая метка.
56+
57+
### multiple <Badge type = "info">Optional</Badge>
58+
59+
- Type `boolean`
60+
61+
Данный параметр позволяет использовать множественную выборку. В таком случае modelValue будет обрабатываться как массив.
62+
63+
### limit <Badge type = "info">Optional</Badge>
64+
65+
- Type `number`
66+
67+
Данный параметр устанавливает предельное количество выбираемых элементов, если используется атрибут `multiple`.
68+
69+
5670
____
5771

5872
Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть
@@ -69,12 +83,22 @@ ____
6983
- Перемещение по объекту возможна используя `ArrowDown` и `ArrowUp`. Перемещение таким способом
7084
изменяет значение поля.
7185
- Выбор элемента возможен по щелчку на соответствующий элемент.
72-
- **Нельзя** выбрать элемент используя `Enter` или `Space`.
73-
- Использование `Enter` или `Space` раскрывает или закрывает выпадающий список.
86+
- **Нельзя** выбрать элемент используя `Enter`.
87+
- Использование `Enter` раскрывает или закрывает выпадающий список.
7488
- Для длинного списка показывается дополнительный контроллер поиска.
7589
- Блокировка полей отменяет навигацию используя `Tab`. Также происходит изменение стилистики `select`.
7690
- При неудачной валидации поле должно изменить стилистику `select`.
77-
91+
- При использовании аттрибута `multiple` выборка не должна закрывать выпадающий список.
92+
- `Space` используется для выборки элементов.
93+
- В режиме `miltiple:true` с зажатой `Shift` используется следующий порядок переходов (`_` означение состояние
94+
в котором ни один элемент не выбран, `->` - переход с одного элемента на другой, `0` - элемент не выбран, `1` - элемент
95+
уже был выбран):
96+
- _ -> 0 = _ , 1
97+
- 1 -> 0 = 1 , 1
98+
- 1 -> 1 = 0 , 1
99+
- 0 -> 0 = 1 , 1
100+
- 0 -> 1 = 0 , 0
101+
78102
## Пример
79103

80104
Для подключения виджета необходимо указать `type` и `options`:
@@ -132,6 +156,17 @@ ____
132156
Использование `hiddenValues` и установка значения `['blue', 'purple', 'pink', 'brown', 'grey']`:
133157
<FormField :options = "colors" hiddenValues = "['blue', 'purple', 'pink', 'brown', 'grey']" type = "select" name = "color" label = "Отфильтрованные цвета" />
134158

159+
----
160+
161+
Использование `multiple`:
162+
<FormField :options = "colors" type = "select" name = "multiple-color" multiple label = "Multiple colors" />
163+
164+
----
165+
166+
Использование `limit` = `2` вместе с `multiple`:
167+
<FormField :options = "colors" type = "select" name = "multiple-color" multiple label = "Multiple colors" limit = "2" />
168+
169+
135170

136171
----
137172
Текущее состояние формы:

‎src/widgets/inputs/input-select/input-select.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<div class="container-input-select">
44
<div class="input-select"
55
:class="{
6-
'input-select_disabled': disabled,
7-
'input-select_error': errors.length,
8-
'input-select_active': isActive,
6+
'vf-input-select_disabled': disabled,
7+
'vf-input-select_error': errors.length,
8+
'vf-input-select_active': isActive,
99
'vf-input-select_multi': !!multiple
1010
}"
1111
:tabindex="!disabled ? 0 : 'none' "
@@ -272,11 +272,11 @@ function isActiveItem(value: any) {
272272
.input-select:focus {
273273
border: var(--vf-input-border-focus);
274274
}
275-
.input-select_error {
275+
.vf-input-select_error {
276276
border: var(--vf-input-border-error);
277277
}
278278
279-
.input-select_disabled {
279+
.vf-input-select_disabled {
280280
background-color: var(--vf-input-background-disabled);
281281
cursor: default;
282282
}
@@ -323,13 +323,13 @@ function isActiveItem(value: any) {
323323
Для блока целиком - чтобы в момент активации он был выше сверстников
324324
*/
325325
.input-select-option,
326-
.input-select_active{
326+
.vf-input-select_active{
327327
z-index: 1;
328328
}
329329
/**
330330
При активации - чтобы был выше предыдуще активированного блока.
331331
*/
332-
.input-select_active:has(.height-resize-enter-active) {
332+
.vf-input-select_active:has(.height-resize-enter-active) {
333333
z-index: 2;
334334
}
335335

0 commit comments

Comments
 (0)
0