beans-ui-kit 0.0.16 → 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.
package/README.md
CHANGED
|
@@ -1,88 +1,47 @@
|
|
|
1
1
|
# beansUiKit
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## О Библиотеке
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Библиотека унифицированных компонентов под всевозможные(в будущем) формы. Планирую развивать компоненты исходя из своих рабочих задач.
|
|
6
|
+
Сейчас наиболее функциональный - BaseSelect, последовательно буду доделывать и остальные.
|
|
6
7
|
|
|
7
|
-
###
|
|
8
|
+
### Доступные компоненты
|
|
8
9
|
|
|
9
|
-
#### 1.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
**Русский**: Универсальный компонент ввода с поддержкой метки, привязкой значения и настройкой типа. Генерирует событие `valueChanged` при изменении ввода.
|
|
10
|
+
#### 1. BaseSelect.vue
|
|
11
|
+
Максимально унифицированный настраиваемый компонент выпадающего списка с поддержкой динамической передачи различных пропсов, направленный на закрытие любых нюансов. Генерирует событие `valueChanged` при изменении выбора.
|
|
13
12
|
|
|
14
13
|
**Props**:
|
|
15
|
-
- `propsClass` (String, default: '
|
|
16
|
-
-
|
|
17
|
-
- `
|
|
18
|
-
- `
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- `
|
|
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
|
-
|
|
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: '
|
|
72
|
-
- `
|
|
73
|
-
- `
|
|
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
|
-
- `
|
|
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
|
|
44
|
+
import BaseSelect from 'beans-ui-kit';
|
|
86
45
|
|
|
87
|
-
//
|
|
46
|
+
// Или
|
|
88
47
|
import { BaseButton, BaseSelect } from 'beans-ui-kit';
|
|
@@ -51,6 +51,10 @@ var _ = /* @__PURE__ */ h(m, [["render", g]]), v = a({
|
|
|
51
51
|
markedOptions: {
|
|
52
52
|
type: Array,
|
|
53
53
|
default: () => []
|
|
54
|
+
},
|
|
55
|
+
disabled: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: !1
|
|
54
58
|
}
|
|
55
59
|
},
|
|
56
60
|
setup(e, { emit: t }) {
|
|
@@ -62,9 +66,9 @@ var _ = /* @__PURE__ */ h(m, [["render", g]]), v = a({
|
|
|
62
66
|
}
|
|
63
67
|
};
|
|
64
68
|
}
|
|
65
|
-
}), y = ["for"], b = ["id"];
|
|
69
|
+
}), y = ["for"], b = ["disabled", "id"];
|
|
66
70
|
function x(a, c, m, h, g, _) {
|
|
67
|
-
return s(), r("div", { class: o(`${a.propsClass}__wrapper`) }, [
|
|
71
|
+
return s(), r("div", { class: o([`${a.propsClass}__wrapper`, a.disabled ? `${a.propsClass}__wrapper--disabled` : ""]) }, [
|
|
68
72
|
a.propsLabel ? (s(), r("label", {
|
|
69
73
|
key: 0,
|
|
70
74
|
class: o(`${a.propsClass}__label`),
|
|
@@ -72,6 +76,7 @@ function x(a, c, m, h, g, _) {
|
|
|
72
76
|
}, [i("span", null, d(a.propsLabel), 1), a.labelIcon ? (s(), t(u(a.labelIcon), { key: 0 })) : n("", !0)], 10, y)) : n("", !0),
|
|
73
77
|
i("div", { class: o(`${a.propsClass}__inner`) }, [p(i("select", {
|
|
74
78
|
class: o(`${a.propsClass}`),
|
|
79
|
+
disabled: a.disabled,
|
|
75
80
|
id: a.propsClass,
|
|
76
81
|
"onUpdate:modelValue": c[0] ||= (e) => a.selectValue = e,
|
|
77
82
|
onChange: c[1] ||= (...e) => a.valueChanged && a.valueChanged(...e)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.beansBaseActions={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.defineComponent)({components:{},emits:[`clicked`],props:{propsClass:{type:String,default:`button`},propsTitle:{type:String,default:``},propsLabel:{type:String}}}),r=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};function i(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(`${e.propsClass}__wrapper`)},[e.propsLabel?((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__label`)},(0,t.toDisplayString)(e.propsLabel),3)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,{onClick:n[0]||=t=>e.$emit(`clicked`),class:(0,t.normalizeClass)(`${e.propsClass}`)},(0,t.toDisplayString)(e.propsTitle),3)],2)}var a=r(n,[[`render`,i]]),o=(0,t.defineComponent)({emits:[`valueChanged`],props:{propsClass:{type:String,default:`select`},propsLabel:{type:String},propsValue:{type:[String,Number]},propsOptions:{type:Array,default:()=>[]},propsPlaceholder:{type:String},error:{type:String},labelIcon:{type:Object},selectIcon:{type:Object},errorIcon:{type:Object},markedOptions:{type:Array,default:()=>[]}},setup(e,{emit:n}){let r=(0,t.ref)(e.propsValue||``);return{selectValue:r,valueChanged:()=>{n(`valueChanged`,r.value)}}}}),s=[`for`],c=[`id`];function l(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(`${e.propsClass}__wrapper
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.beansBaseActions={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.defineComponent)({components:{},emits:[`clicked`],props:{propsClass:{type:String,default:`button`},propsTitle:{type:String,default:``},propsLabel:{type:String}}}),r=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};function i(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(`${e.propsClass}__wrapper`)},[e.propsLabel?((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__label`)},(0,t.toDisplayString)(e.propsLabel),3)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,{onClick:n[0]||=t=>e.$emit(`clicked`),class:(0,t.normalizeClass)(`${e.propsClass}`)},(0,t.toDisplayString)(e.propsTitle),3)],2)}var a=r(n,[[`render`,i]]),o=(0,t.defineComponent)({emits:[`valueChanged`],props:{propsClass:{type:String,default:`select`},propsLabel:{type:String},propsValue:{type:[String,Number]},propsOptions:{type:Array,default:()=>[]},propsPlaceholder:{type:String},error:{type:String},labelIcon:{type:Object},selectIcon:{type:Object},errorIcon:{type:Object},markedOptions:{type:Array,default:()=>[]},disabled:{type:Boolean,default:!1}},setup(e,{emit:n}){let r=(0,t.ref)(e.propsValue||``);return{selectValue:r,valueChanged:()=>{n(`valueChanged`,r.value)}}}}),s=[`for`],c=[`disabled`,`id`];function l(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`${e.propsClass}__wrapper`,e.disabled?`${e.propsClass}__wrapper--disabled`:``])},[e.propsLabel?((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__label`),for:e.propsClass},[(0,t.createElementVNode)(`span`,null,(0,t.toDisplayString)(e.propsLabel),1),e.labelIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.labelIcon),{key:0})):(0,t.createCommentVNode)(``,!0)],10,s)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)(`${e.propsClass}__inner`)},[(0,t.withDirectives)((0,t.createElementVNode)(`select`,{class:(0,t.normalizeClass)(`${e.propsClass}`),disabled:e.disabled,id:e.propsClass,"onUpdate:modelValue":n[0]||=t=>e.selectValue=t,onChange:n[1]||=(...t)=>e.valueChanged&&e.valueChanged(...t)},[e.propsPlaceholder?((0,t.openBlock)(),(0,t.createElementBlock)(`option`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__placeholder`),disabled:`true`,value:``},(0,t.toDisplayString)(e.propsPlaceholder),3)):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.propsOptions,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`option`,{key:r,class:(0,t.normalizeClass)([`${e.propsClass}__option`,e.markedOptions.length&&e.markedOptions.includes(n)?`${e.propsClass}__option--marked`:``])},(0,t.toDisplayString)(n&&typeof n==`object`&&`value`in n?n.value:n),3))),128))],42,c),[[t.vModelSelect,e.selectValue]]),e.selectIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.selectIcon),{key:0})):(0,t.createCommentVNode)(``,!0)],2),e.error?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:(0,t.normalizeClass)(`${e.propsClass}__error__wrapper`)},[e.errorIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.errorIcon),{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__error__icon`)},null,8,[`class`])):(0,t.createCommentVNode)(``,!0),e.error?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:(0,t.normalizeClass)(`${e.propsClass}__error`)},(0,t.toDisplayString)(e.error),3)):(0,t.createCommentVNode)(``,!0)],2)):(0,t.createCommentVNode)(``,!0)],2)}var u=r(o,[[`render`,l]]);e.BaseButton=a,e.BaseSelect=u});
|
|
@@ -5,6 +5,7 @@ declare const _default: DefineComponent<{
|
|
|
5
5
|
propsValue?: string | number | undefined;
|
|
6
6
|
propsOptions?: unknown[] | undefined;
|
|
7
7
|
propsPlaceholder?: string | undefined;
|
|
8
|
+
disabled?: boolean | undefined;
|
|
8
9
|
error?: string | undefined;
|
|
9
10
|
labelIcon?: Component | undefined;
|
|
10
11
|
selectIcon?: Component | undefined;
|
|
@@ -19,6 +20,7 @@ declare const _default: DefineComponent<{
|
|
|
19
20
|
propsValue?: string | number | undefined;
|
|
20
21
|
propsOptions?: unknown[] | undefined;
|
|
21
22
|
propsPlaceholder?: string | undefined;
|
|
23
|
+
disabled?: boolean | undefined;
|
|
22
24
|
error?: string | undefined;
|
|
23
25
|
labelIcon?: Component | undefined;
|
|
24
26
|
selectIcon?: Component | undefined;
|
|
@@ -30,5 +32,6 @@ declare const _default: DefineComponent<{
|
|
|
30
32
|
propsClass: string;
|
|
31
33
|
propsOptions: unknown[];
|
|
32
34
|
markedOptions: unknown[];
|
|
35
|
+
disabled: boolean;
|
|
33
36
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
34
37
|
export default _default;
|