beans-ui-kit 0.0.18 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# beansUiKit
|
|
2
2
|
|
|
3
|
-
## О Библиотеке
|
|
3
|
+
## О Библиотеке || About
|
|
4
4
|
|
|
5
5
|
Библиотека унифицированных компонентов под всевозможные(в будущем) формы. Планирую развивать компоненты исходя из своих рабочих задач.
|
|
6
6
|
Сейчас наиболее функциональный - BaseSelect, последовательно буду доделывать и остальные.
|
|
7
7
|
|
|
8
|
-
### Доступные компоненты
|
|
8
|
+
### Доступные компоненты || Components
|
|
9
9
|
|
|
10
10
|
#### 1. BaseSelect.vue
|
|
11
11
|
Максимально унифицированный настраиваемый компонент выпадающего списка с поддержкой динамической передачи различных пропсов, направленный на закрытие любых нюансов. Генерирует событие `valueChanged` при изменении выбора.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
**Пропсы || Props**:
|
|
14
14
|
- `propsClass` (String, default: 'select') - CSS класс для компонента, по умолчанию передается также следующим элементам:
|
|
15
15
|
${propsClass}__wrapper - для обертки над всем компонентом, ${propsClass}__inner - только для селекта и его иконки
|
|
16
16
|
- `propsLabel` (String) - Текст лейбла для выпадающего списка, принимает класс - ${propsClass}__label
|
|
17
17
|
- `labelIcon` (Component) - Иконка для лейбла, передается vue компонентом, принимает ${propsClass}__label__icon
|
|
18
|
-
- `propsValue` (String|Number) -
|
|
18
|
+
- `propsValue` (String|Number) - Текущее значение списка
|
|
19
19
|
- `propsOptions` (Array<unknown>, default: []) - Массив значений для выпадающего списка, передается либо массивом строк, либо объектом элементов с ключом "value", класс - ${propsClass}__option
|
|
20
20
|
- `markedOptions` (Array<unknown>, default: []) - Массив значений в выпадающем списке, при совпадении элемента с элементом propsOptions - принимается класс ${propsClass}__option--marked
|
|
21
21
|
- `propsPlaceholder` (String) - Текст первого option в выпадающем списке, по умолчанию со значением disabled, принимает ${propsClass}__placeholder
|
|
@@ -24,18 +24,30 @@ ${propsClass}__wrapper - для обертки над всем компонен
|
|
|
24
24
|
- `errorIcon` (Component) - Передается vue компонентом, рендерится внутри ${propsClass}__error__wrapper с классом ${propsClass}__error__icon
|
|
25
25
|
- `selectIcon` (Component) - Передается vue компонентом, иконка для селекта, принимает класс - ${propsClass}__select__icon
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
**События || Events**:
|
|
28
28
|
- `valueChanged` - @change обработка - emit('valueChanged', selectValue.value)
|
|
29
29
|
|
|
30
|
+
**Пример || Example**:
|
|
31
|
+
```typescript
|
|
32
|
+
<BaseSelect :propsClass="'select'"
|
|
33
|
+
:propsLabel="'selectLabel'"
|
|
34
|
+
:propsOptions="['test1', 'test2']"
|
|
35
|
+
:markedOptions="['test1']"
|
|
36
|
+
:error="'testError'"
|
|
37
|
+
:disabled="true"
|
|
38
|
+
:propsPlaceholder="'Выберите значение'"
|
|
39
|
+
@valueChanged="console.log('testEmit')" />
|
|
40
|
+
```
|
|
41
|
+
|
|
30
42
|
#### 2. BaseButton.vue
|
|
31
43
|
Компонент кнопки. Настраиваемый класс и заголовок.
|
|
32
44
|
|
|
33
|
-
|
|
45
|
+
**Пропсы || Props**:
|
|
34
46
|
- `propsClass` (String, default: 'button') - класс для кнопки
|
|
35
47
|
- `propsTitle` (String, default: '') - текст внутри кнопки
|
|
36
48
|
- `propsLabel` (String) - текст над кнопкой
|
|
37
49
|
|
|
38
|
-
|
|
50
|
+
**События || Events**:
|
|
39
51
|
- `clicked` - @click обработка - $emit('clicked')
|
|
40
52
|
|
|
41
53
|
## Использование || Usage
|