beans-ui-kit 0.0.17 → 0.0.18

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.
Files changed (2) hide show
  1. package/README.md +29 -70
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,88 +1,47 @@
1
1
  # beansUiKit
2
2
 
3
- ## Components
3
+ ## О Библиотеке
4
4
 
5
- This UI kit provides a set of reusable Vue 3 components built with TypeScript.
5
+ Библиотека унифицированных компонентов под всевозможные(в будущем) формы. Планирую развивать компоненты исходя из своих рабочих задач.
6
+ Сейчас наиболее функциональный - BaseSelect, последовательно буду доделывать и остальные.
6
7
 
7
- ### Available Components
8
+ ### Доступные компоненты
8
9
 
9
- #### 1. BaseInput.vue
10
- **English**: A versatile input component with label support, value binding, and type customization. Emits `valueChanged` event on input changes.
11
-
12
- **Русский**: Универсальный компонент ввода с поддержкой метки, привязкой значения и настройкой типа. Генерирует событие `valueChanged` при изменении ввода.
10
+ #### 1. BaseSelect.vue
11
+ Максимально унифицированный настраиваемый компонент выпадающего списка с поддержкой динамической передачи различных пропсов, направленный на закрытие любых нюансов. Генерирует событие `valueChanged` при изменении выбора.
13
12
 
14
13
  **Props**:
15
- - `propsClass` (String, default: 'input') - CSS class for the input
16
- - `propsLabel` (String) - Label text for the input
17
- - `propsValue` (String|Number) - Initial value
18
- - `propsType` (String, default: 'text') - Input type (text, number, email, etc.)
19
-
20
- **Events**:
21
- - `valueChanged` - Emitted when input value changes
14
+ - `propsClass` (String, default: 'select') - CSS класс для компонента, по умолчанию передается также следующим элементам:
15
+ ${propsClass}__wrapper - для обертки над всем компонентом, ${propsClass}__inner - только для селекта и его иконки
16
+ - `propsLabel` (String) - Текст лейбла для выпадающего списка, принимает класс - ${propsClass}__label
17
+ - `labelIcon` (Component) - Иконка для лейбла, передается vue компонентом, принимает ${propsClass}__label__icon
18
+ - `propsValue` (String|Number) - Значение списка
19
+ - `propsOptions` (Array<unknown>, default: []) - Массив значений для выпадающего списка, передается либо массивом строк, либо объектом элементов с ключом "value", класс - ${propsClass}__option
20
+ - `markedOptions` (Array<unknown>, default: []) - Массив значений в выпадающем списке, при совпадении элемента с элементом propsOptions - принимается класс ${propsClass}__option--marked
21
+ - `propsPlaceholder` (String) - Текст первого option в выпадающем списке, по умолчанию со значением disabled, принимает ${propsClass}__placeholder
22
+ - `disabled` (Boolean, default: false) - Отключает выпадающий список, список принимает класс ${propsClass}__wrapper--disabled
23
+ - `error` (String) - Текст ошибки, при передаче рендерится блок ${propsClass}__error__wrapper, где внутри ${propsClass}__error
24
+ - `errorIcon` (Component) - Передается vue компонентом, рендерится внутри ${propsClass}__error__wrapper с классом ${propsClass}__error__icon
25
+ - `selectIcon` (Component) - Передается vue компонентом, иконка для селекта, принимает класс - ${propsClass}__select__icon
26
+
27
+ **События**:
28
+ - `valueChanged` - @change обработка - emit('valueChanged', selectValue.value)
22
29
 
23
30
  #### 2. BaseButton.vue
24
- **English**: A button component with label support and click event emission. Customizable class and title.
25
-
26
- **Русский**: Компонент кнопки с поддержкой метки и генерацией события клика. Настраиваемый класс и заголовок.
27
-
28
- **Props**:
29
- - `propsClass` (String, default: 'button') - CSS class for the button
30
- - `propsTitle` (String, default: '') - Button text
31
- - `propsLabel` (String) - Label text above the button
32
-
33
- **Events**:
34
- - `clicked` - Emitted when button is clicked
35
-
36
- #### 3. BaseSelect.vue
37
- **English**: A select dropdown component with options array support, label, and value binding. Emits `valueChanged` event on selection change.
38
-
39
- **Русский**: Компонент выпадающего списка с поддержкой массива опций, метки и привязки значения. Генерирует событие `valueChanged` при изменении выбора.
40
-
41
- **Props**:
42
- - `propsClass` (String, default: '') - CSS class for the select
43
- - `propsText` (String, default: '') - Placeholder text
44
- - `propsLabel` (String) - Label text for the select
45
- - `propsValue` (String|Number) - Selected value
46
- - `propsOptions` (Array<unknown>, default: []) - Array of options (can be strings or objects with 'value' property)
47
-
48
- **Events**:
49
- - `valueChanged` - Emitted when selection changes
50
-
51
- #### 4. BaseRadio.vue
52
- **English**: A radio button component with group name support for radio groups. Emits `valueChanged` event with name and value.
53
-
54
- **Русский**: Компонент радиокнопки с поддержкой имени группы для радио-групп. Генерирует событие `valueChanged` с именем и значением.
55
-
56
- **Props**:
57
- - `propsClass` (String, default: 'radio') - CSS class for the radio button
58
- - `propsLabel` (String) - Label text for the radio button
59
- - `propsValue` (String|Number) - Value of this radio option
60
- - `propsName` (String, default: '') - Group name for radio buttons
61
-
62
- **Events**:
63
- - `valueChanged` - Emitted with (groupName, value) when radio is selected
64
-
65
- #### 5. BaseCheckbox.vue
66
- **English**: A checkbox component with status binding and value emission. Emits `valueChanged` event with value and checked state.
67
-
68
- **Русский**: Компонент чекбокса с привязкой статуса и генерацией значения. Генерирует событие `valueChanged` со значением и состоянием выбора.
31
+ Компонент кнопки. Настраиваемый класс и заголовок.
69
32
 
70
33
  **Props**:
71
- - `propsClass` (String, default: 'checkbox') - CSS class for the checkbox
72
- - `propsLabel` (String) - Label text for the checkbox
73
- - `propsValue` (String|Number) - Value associated with this checkbox
74
- - `propsStatus` (Boolean, default: false) - Initial checked status
34
+ - `propsClass` (String, default: 'button') - класс для кнопки
35
+ - `propsTitle` (String, default: '') - текст внутри кнопки
36
+ - `propsLabel` (String) - текст над кнопкой
75
37
 
76
38
  **Events**:
77
- - `valueChanged` - Emitted with (value, checkedState) when checkbox state changes
78
-
79
- ## Usage
80
-
81
- Components can be imported individually or through the main export file (`src/components/index.ts`).
39
+ - `clicked` - @click обработка - $emit('clicked')
82
40
 
41
+ ## Использование || Usage
83
42
  ```typescript
84
43
  import BaseButton from 'beans-ui-kit';
85
- import BaseInput from 'beans-ui-kit';
44
+ import BaseSelect from 'beans-ui-kit';
86
45
 
87
- // Or use the index export (currently exports BaseButton and BaseSelect)
46
+ // Или
88
47
  import { BaseButton, BaseSelect } from 'beans-ui-kit';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "beans-ui-kit",
3
3
  "private": false,
4
- "version": "0.0.17",
4
+ "version": "0.0.18",
5
5
  "type": "module",
6
6
  "types": "./dist/beansBaseActions.es.d.ts",
7
7
  "files": [