beans-ui-kit 0.0.21 → 0.0.23
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 +24 -5
- package/dist/beansBaseActions.es.js +41 -41
- package/dist/beansBaseActions.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,15 +14,18 @@
|
|
|
14
14
|
- `propsClass` (String, default: 'select') - CSS класс для компонента, по умолчанию передается также следующим элементам:
|
|
15
15
|
${propsClass}__wrapper - для обертки над всем компонентом, ${propsClass}__inner - только для селекта и его иконки
|
|
16
16
|
- `propsLabel` (String) - Текст лейбла для выпадающего списка, принимает класс - ${propsClass}__label
|
|
17
|
-
- `labelIcon` (Component) - Иконка для лейбла, передается vue компонентом, принимает ${propsClass}__label__icon
|
|
18
17
|
- `propsValue` (String|Number) - Текущее значение списка
|
|
19
18
|
- `propsOptions` (Array<unknown>, default: []) - Массив значений для выпадающего списка, передается либо массивом строк, либо объектом элементов с ключом "value", класс - ${propsClass}__option
|
|
20
19
|
- `markedOptions` (Array<unknown>, default: []) - Массив значений в выпадающем списке, при совпадении элемента с элементом propsOptions - принимается класс ${propsClass}__option--marked
|
|
21
20
|
- `propsPlaceholder` (String) - Текст первого option в выпадающем списке, по умолчанию со значением disabled, принимает ${propsClass}__placeholder
|
|
22
21
|
- `disabled` (Boolean, default: false) - Отключает выпадающий список, список принимает класс ${propsClass}__wrapper--disabled
|
|
23
22
|
- `error` (String) - Текст ошибки, при передаче рендерится блок ${propsClass}__error__wrapper, где внутри ${propsClass}__error
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
|
|
24
|
+
**Слоты || Slots**:
|
|
25
|
+
Есть несколько слотов внутри:
|
|
26
|
+
- `label-icon` - для иконки лейбла, обертка с классом - ${propsClass}__label__icon
|
|
27
|
+
- `select-icon` - для иконки внутри выпадающего списка, обертка с классом - ${propsClass}__select__icon
|
|
28
|
+
- `error-icon` - для иконки у текста ошибки, обертка с классом - ${propsClass}__error__icon
|
|
26
29
|
|
|
27
30
|
**События || Events**:
|
|
28
31
|
- `valueChanged` - @change обработка - emit('valueChanged', selectValue.value)
|
|
@@ -36,7 +39,12 @@ ${propsClass}__wrapper - для обертки над всем компонен
|
|
|
36
39
|
:error="'testError'"
|
|
37
40
|
:disabled="true"
|
|
38
41
|
:propsPlaceholder="'Выберите значение'"
|
|
39
|
-
@valueChanged="console.log('testEmit')"
|
|
42
|
+
@valueChanged="console.log('testEmit')">
|
|
43
|
+
|
|
44
|
+
<template v-slot:label-icon> </template>
|
|
45
|
+
<template v-slot:select-icon> </template>
|
|
46
|
+
<template v-slot:error-icon> </template>
|
|
47
|
+
</BaseSelect>
|
|
40
48
|
```
|
|
41
49
|
|
|
42
50
|
#### 2. BaseButton.vue
|
|
@@ -45,11 +53,22 @@ ${propsClass}__wrapper - для обертки над всем компонен
|
|
|
45
53
|
**Пропсы || Props**:
|
|
46
54
|
- `propsClass` (String, default: 'button') - класс для кнопки
|
|
47
55
|
- `propsLabel` (String) - текст лейбла над кнопкой
|
|
48
|
-
|
|
56
|
+
|
|
57
|
+
**Слоты || Slots**:
|
|
58
|
+
Внутри кнопки один slot, можно использовать под текст и иконку
|
|
49
59
|
|
|
50
60
|
**События || Events**:
|
|
51
61
|
- `clicked` - @click обработка - $emit('clicked')
|
|
52
62
|
|
|
63
|
+
**Пример || Example**:
|
|
64
|
+
```typescript
|
|
65
|
+
<BaseButton :propsLabel="'label'"
|
|
66
|
+
:propsClass="'button'"
|
|
67
|
+
@clicked="console.log('clicked')">
|
|
68
|
+
testTitle
|
|
69
|
+
</BaseButton>
|
|
70
|
+
```
|
|
71
|
+
|
|
53
72
|
## Использование || Usage
|
|
54
73
|
```typescript
|
|
55
74
|
import BaseButton from 'beans-ui-kit';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Fragment as e,
|
|
1
|
+
import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, renderList as c, renderSlot as l, toDisplayString as u, vModelSelect as d, withDirectives as f } from "vue";
|
|
2
2
|
//#region src/components/BaseButton.vue?vue&type=script&lang.ts
|
|
3
|
-
var
|
|
3
|
+
var p = i({
|
|
4
4
|
components: {},
|
|
5
5
|
emits: ["clicked"],
|
|
6
6
|
props: {
|
|
@@ -10,23 +10,23 @@ var h = a({
|
|
|
10
10
|
},
|
|
11
11
|
propsLabel: { type: String }
|
|
12
12
|
}
|
|
13
|
-
}),
|
|
13
|
+
}), m = (e, t) => {
|
|
14
14
|
let n = e.__vccOpts || e;
|
|
15
15
|
for (let [e, r] of t) n[e] = r;
|
|
16
16
|
return n;
|
|
17
17
|
};
|
|
18
18
|
//#endregion
|
|
19
19
|
//#region src/components/BaseButton.vue
|
|
20
|
-
function
|
|
21
|
-
return
|
|
20
|
+
function h(e, i, s, c, d, f) {
|
|
21
|
+
return o(), n("div", { class: a(`${e.propsClass}__wrapper`) }, [e.propsLabel ? (o(), n("label", {
|
|
22
22
|
key: 0,
|
|
23
|
-
class:
|
|
24
|
-
},
|
|
25
|
-
onClick:
|
|
26
|
-
class:
|
|
27
|
-
}, [
|
|
23
|
+
class: a(`${e.propsClass}__label`)
|
|
24
|
+
}, u(e.propsLabel), 3)) : t("", !0), r("button", {
|
|
25
|
+
onClick: i[0] ||= (t) => e.$emit("clicked"),
|
|
26
|
+
class: a(`${e.propsClass}`)
|
|
27
|
+
}, [l(e.$slots, "default")], 2)], 2);
|
|
28
28
|
}
|
|
29
|
-
var
|
|
29
|
+
var g = /* @__PURE__ */ m(p, [["render", h]]), _ = i({
|
|
30
30
|
emits: ["valueChanged"],
|
|
31
31
|
props: {
|
|
32
32
|
propsClass: {
|
|
@@ -54,7 +54,7 @@ var v = /* @__PURE__ */ g(h, [["render", _]]), y = a({
|
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
setup(e, { emit: t }) {
|
|
57
|
-
let n =
|
|
57
|
+
let n = s(e.propsValue || "");
|
|
58
58
|
return {
|
|
59
59
|
selectValue: n,
|
|
60
60
|
valueChanged: () => {
|
|
@@ -62,44 +62,44 @@ var v = /* @__PURE__ */ g(h, [["render", _]]), y = a({
|
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
|
-
}),
|
|
66
|
-
function
|
|
67
|
-
return
|
|
68
|
-
|
|
65
|
+
}), v = ["for"], y = ["disabled", "id"];
|
|
66
|
+
function b(i, s, p, m, h, g) {
|
|
67
|
+
return o(), n("div", { class: a([`${i.propsClass}__wrapper`, i.disabled ? `${i.propsClass}__wrapper--disabled` : ""]) }, [
|
|
68
|
+
i.propsLabel ? (o(), n("label", {
|
|
69
69
|
key: 0,
|
|
70
|
-
class:
|
|
71
|
-
for:
|
|
72
|
-
}, [
|
|
70
|
+
class: a(`${i.propsClass}__label`),
|
|
71
|
+
for: i.propsClass
|
|
72
|
+
}, [r("span", null, u(i.propsLabel), 1), i.$slots["label-icon"] ? (o(), n("div", {
|
|
73
73
|
key: 0,
|
|
74
|
-
class:
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
class:
|
|
78
|
-
disabled:
|
|
79
|
-
id:
|
|
80
|
-
"onUpdate:modelValue":
|
|
81
|
-
onChange:
|
|
82
|
-
}, [
|
|
74
|
+
class: a(`${i.propsClass}__label__icon`)
|
|
75
|
+
}, [l(i.$slots, "label-icon")], 2)) : t("", !0)], 10, v)) : t("", !0),
|
|
76
|
+
r("div", { class: a(`${i.propsClass}__inner`) }, [f(r("select", {
|
|
77
|
+
class: a(`${i.propsClass}`),
|
|
78
|
+
disabled: i.disabled,
|
|
79
|
+
id: i.propsClass,
|
|
80
|
+
"onUpdate:modelValue": s[0] ||= (e) => i.selectValue = e,
|
|
81
|
+
onChange: s[1] ||= (...e) => i.valueChanged && i.valueChanged(...e)
|
|
82
|
+
}, [i.propsPlaceholder ? (o(), n("option", {
|
|
83
83
|
key: 0,
|
|
84
|
-
class:
|
|
84
|
+
class: a(`${i.propsClass}__placeholder`),
|
|
85
85
|
disabled: "true",
|
|
86
86
|
value: ""
|
|
87
|
-
},
|
|
87
|
+
}, u(i.propsPlaceholder), 3)) : t("", !0), (o(!0), n(e, null, c(i.propsOptions, (e, t) => (o(), n("option", {
|
|
88
88
|
key: t,
|
|
89
|
-
class:
|
|
90
|
-
},
|
|
89
|
+
class: a([`${i.propsClass}__option`, i.markedOptions.length && i.markedOptions.includes(e) ? `${i.propsClass}__option--marked` : ""])
|
|
90
|
+
}, u(e && typeof e == "object" && "value" in e ? e.value : e), 3))), 128))], 42, y), [[d, i.selectValue]]), i.$slots["select-icon"] ? (o(), n("div", {
|
|
91
91
|
key: 0,
|
|
92
|
-
class:
|
|
93
|
-
},
|
|
94
|
-
|
|
92
|
+
class: a(`${i.propsClass}__icon`)
|
|
93
|
+
}, [l(i.$slots, "select-icon")], 2)) : t("", !0)], 2),
|
|
94
|
+
i.error ? (o(), n("div", {
|
|
95
95
|
key: 1,
|
|
96
|
-
class:
|
|
97
|
-
}, [
|
|
96
|
+
class: a(`${i.propsClass}__error__wrapper`)
|
|
97
|
+
}, [i.$slots["error-icon"] ? (o(), n("div", {
|
|
98
98
|
key: 0,
|
|
99
|
-
class:
|
|
100
|
-
},
|
|
99
|
+
class: a(`${i.propsClass}__error__icon`)
|
|
100
|
+
}, [l(i.$slots, "error-icon")], 2)) : t("", !0)], 2)) : t("", !0)
|
|
101
101
|
], 2);
|
|
102
102
|
}
|
|
103
|
-
var
|
|
103
|
+
var x = /* @__PURE__ */ m(_, [["render", b]]);
|
|
104
104
|
//#endregion
|
|
105
|
-
export {
|
|
105
|
+
export { g as BaseButton, x as BaseSelect };
|
|
@@ -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`},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.renderSlot)(e.$slots,`default`)],2)],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
|
|
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`},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.renderSlot)(e.$slots,`default`)],2)],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.$slots[`label-icon`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__label__icon`)},[(0,t.renderSlot)(e.$slots,`label-icon`)],2)):(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.$slots[`select-icon`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__icon`)},[(0,t.renderSlot)(e.$slots,`select-icon`)],2)):(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.$slots[`error-icon`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}__error__icon`)},[(0,t.renderSlot)(e.$slots,`error-icon`)],2)):(0,t.createCommentVNode)(``,!0)],2)):(0,t.createCommentVNode)(``,!0)],2)}var u=r(o,[[`render`,l]]);e.BaseButton=a,e.BaseSelect=u});
|