beans-ui-kit 0.0.1 → 0.0.2
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 +86 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,88 @@
|
|
|
1
|
-
#
|
|
1
|
+
# beansUiKit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Components
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This UI kit provides a set of reusable Vue 3 components built with TypeScript.
|
|
6
|
+
|
|
7
|
+
### Available Components
|
|
8
|
+
|
|
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` при изменении ввода.
|
|
13
|
+
|
|
14
|
+
**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
|
|
22
|
+
|
|
23
|
+
#### 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` со значением и состоянием выбора.
|
|
69
|
+
|
|
70
|
+
**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
|
|
75
|
+
|
|
76
|
+
**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`).
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
import BaseButton from 'beans-ui-kit';
|
|
85
|
+
import BaseInput from 'beans-ui-kit';
|
|
86
|
+
|
|
87
|
+
// Or use the index export (currently exports BaseButton and BaseSelect)
|
|
88
|
+
import { BaseButton, BaseSelect } from 'beans-ui-kit';
|