beans-ui-kit 0.0.23 → 0.0.24
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
|
@@ -23,9 +23,9 @@ ${propsClass}__wrapper - для обертки над всем компонен
|
|
|
23
23
|
|
|
24
24
|
**Слоты || Slots**:
|
|
25
25
|
Есть несколько слотов внутри:
|
|
26
|
-
- `label-icon` - для иконки лейбла, обертка с классом - ${propsClass}
|
|
27
|
-
- `select-icon` - для иконки внутри выпадающего списка, обертка с классом - ${propsClass}
|
|
28
|
-
- `error-icon` - для иконки у текста ошибки, обертка с классом - ${propsClass}
|
|
26
|
+
- `label-icon` - для иконки лейбла, обертка с классом - ${propsClass}__label__icon__wrapper
|
|
27
|
+
- `select-icon` - для иконки внутри выпадающего списка, обертка с классом - ${propsClass}__select__icon__wrapper
|
|
28
|
+
- `error-icon` - для иконки у текста ошибки, обертка с классом - ${propsClass}__error__icon__wrapper
|
|
29
29
|
|
|
30
30
|
**События || Events**:
|
|
31
31
|
- `valueChanged` - @change обработка - emit('valueChanged', selectValue.value)
|
|
@@ -69,6 +69,32 @@ ${propsClass}__wrapper - для обертки над всем компонен
|
|
|
69
69
|
</BaseButton>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
#### 3. BaseInput.vue
|
|
73
|
+
Компонент инпута. Настраиваемый класс и заголовок.
|
|
74
|
+
|
|
75
|
+
**Пропсы || Props**:
|
|
76
|
+
- `propsClass` (String, default: 'input') - класс для кнопки
|
|
77
|
+
- `propsLabel` (String) - текст лейбла над кнопкой
|
|
78
|
+
- `propsType` (String, default: 'text') - тип инпута
|
|
79
|
+
- `propsValue` (String, Number) - значение инпута
|
|
80
|
+
|
|
81
|
+
**Слоты || Slots**:
|
|
82
|
+
Внутри кнопки один slot, можно использовать под иконку
|
|
83
|
+
|
|
84
|
+
**События || Events**:
|
|
85
|
+
- `valueChanged` - стоит watch, отслеживающий изменение input
|
|
86
|
+
|
|
87
|
+
**Пример || Example**:
|
|
88
|
+
```typescript
|
|
89
|
+
<BaseInput :propsClass="'testInput'"
|
|
90
|
+
:propsLabel="'testLabel'"
|
|
91
|
+
:propsType="'testText'"
|
|
92
|
+
:propsValue="'test'"
|
|
93
|
+
@valueChanged="(value) => console.log(value)">
|
|
94
|
+
<template v-slot:input-icon></template>
|
|
95
|
+
</BaseInput>
|
|
96
|
+
```
|
|
97
|
+
|
|
72
98
|
## Использование || Usage
|
|
73
99
|
```typescript
|
|
74
100
|
import BaseButton from 'beans-ui-kit';
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as BaseButton } from './src/components/BaseButton.vue';
|
|
2
|
-
export { default as BaseSelect } from './src/components/BaseSelect.vue';
|
|
2
|
+
export { default as BaseSelect } from './src/components/BaseSelect.vue';
|
|
3
|
+
export { default as BaseInput } from './src/components/BaseInput.vue';
|
|
@@ -1,6 +1,6 @@
|
|
|
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,
|
|
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, vModelDynamic as d, vModelSelect as f, watch as p, withDirectives as m } from "vue";
|
|
2
2
|
//#region src/components/BaseButton.vue?vue&type=script&lang.ts
|
|
3
|
-
var
|
|
3
|
+
var h = i({
|
|
4
4
|
components: {},
|
|
5
5
|
emits: ["clicked"],
|
|
6
6
|
props: {
|
|
@@ -10,14 +10,14 @@ var p = i({
|
|
|
10
10
|
},
|
|
11
11
|
propsLabel: { type: String }
|
|
12
12
|
}
|
|
13
|
-
}),
|
|
13
|
+
}), g = (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
|
|
20
|
+
function _(e, i, s, c, d, f) {
|
|
21
21
|
return o(), n("div", { class: a(`${e.propsClass}__wrapper`) }, [e.propsLabel ? (o(), n("label", {
|
|
22
22
|
key: 0,
|
|
23
23
|
class: a(`${e.propsClass}__label`)
|
|
@@ -26,7 +26,7 @@ function h(e, i, s, c, d, f) {
|
|
|
26
26
|
class: a(`${e.propsClass}`)
|
|
27
27
|
}, [l(e.$slots, "default")], 2)], 2);
|
|
28
28
|
}
|
|
29
|
-
var
|
|
29
|
+
var v = /* @__PURE__ */ g(h, [["render", _]]), y = i({
|
|
30
30
|
emits: ["valueChanged"],
|
|
31
31
|
props: {
|
|
32
32
|
propsClass: {
|
|
@@ -62,8 +62,8 @@ var g = /* @__PURE__ */ m(p, [["render", h]]), _ = i({
|
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
|
-
}),
|
|
66
|
-
function
|
|
65
|
+
}), b = ["for"], x = ["disabled", "id"];
|
|
66
|
+
function S(i, s, d, p, h, g) {
|
|
67
67
|
return o(), n("div", { class: a([`${i.propsClass}__wrapper`, i.disabled ? `${i.propsClass}__wrapper--disabled` : ""]) }, [
|
|
68
68
|
i.propsLabel ? (o(), n("label", {
|
|
69
69
|
key: 0,
|
|
@@ -71,9 +71,9 @@ function b(i, s, p, m, h, g) {
|
|
|
71
71
|
for: i.propsClass
|
|
72
72
|
}, [r("span", null, u(i.propsLabel), 1), i.$slots["label-icon"] ? (o(), n("div", {
|
|
73
73
|
key: 0,
|
|
74
|
-
class: a(`${i.propsClass}
|
|
75
|
-
}, [l(i.$slots, "label-icon")], 2)) : t("", !0)], 10,
|
|
76
|
-
r("div", { class: a(`${i.propsClass}__inner`) }, [
|
|
74
|
+
class: a(`${i.propsClass}__label__icon__wrapper`)
|
|
75
|
+
}, [l(i.$slots, "label-icon")], 2)) : t("", !0)], 10, b)) : t("", !0),
|
|
76
|
+
r("div", { class: a(`${i.propsClass}__inner`) }, [m(r("select", {
|
|
77
77
|
class: a(`${i.propsClass}`),
|
|
78
78
|
disabled: i.disabled,
|
|
79
79
|
id: i.propsClass,
|
|
@@ -87,19 +87,66 @@ function b(i, s, p, m, h, g) {
|
|
|
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
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,
|
|
90
|
+
}, u(e && typeof e == "object" && "value" in e ? e.value : e), 3))), 128))], 42, x), [[f, i.selectValue]]), i.$slots["select-icon"] ? (o(), n("div", {
|
|
91
91
|
key: 0,
|
|
92
|
-
class: a(`${i.propsClass}
|
|
92
|
+
class: a(`${i.propsClass}__icon__wrapper`)
|
|
93
93
|
}, [l(i.$slots, "select-icon")], 2)) : t("", !0)], 2),
|
|
94
94
|
i.error ? (o(), n("div", {
|
|
95
95
|
key: 1,
|
|
96
96
|
class: a(`${i.propsClass}__error__wrapper`)
|
|
97
97
|
}, [i.$slots["error-icon"] ? (o(), n("div", {
|
|
98
98
|
key: 0,
|
|
99
|
-
class: a(`${i.propsClass}
|
|
99
|
+
class: a(`${i.propsClass}__error__icon__wrapper`)
|
|
100
100
|
}, [l(i.$slots, "error-icon")], 2)) : t("", !0)], 2)) : t("", !0)
|
|
101
101
|
], 2);
|
|
102
102
|
}
|
|
103
|
-
var
|
|
103
|
+
var C = /* @__PURE__ */ g(y, [["render", S]]), w = i({
|
|
104
|
+
components: {},
|
|
105
|
+
emits: ["valueChanged"],
|
|
106
|
+
props: {
|
|
107
|
+
propsClass: {
|
|
108
|
+
type: String,
|
|
109
|
+
default: "input"
|
|
110
|
+
},
|
|
111
|
+
propsLabel: { type: String },
|
|
112
|
+
propsValue: {
|
|
113
|
+
type: [String, Number],
|
|
114
|
+
default: null
|
|
115
|
+
},
|
|
116
|
+
propsType: {
|
|
117
|
+
type: String,
|
|
118
|
+
default: "text"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
setup(e, { emit: t }) {
|
|
122
|
+
let n = s(e.propsValue);
|
|
123
|
+
return p(n, () => {
|
|
124
|
+
(n.value || n.value == "") && t("valueChanged", n.value);
|
|
125
|
+
}, {
|
|
126
|
+
deep: !0,
|
|
127
|
+
immediate: !0
|
|
128
|
+
}), { inputValue: n };
|
|
129
|
+
}
|
|
130
|
+
}), T = ["for"], E = ["id", "type"];
|
|
131
|
+
function D(e, i, s, c, f, p) {
|
|
132
|
+
return o(), n("div", { class: a(`${e.propsClass}__wrapper`) }, [
|
|
133
|
+
e.propsLabel ? (o(), n("label", {
|
|
134
|
+
key: 0,
|
|
135
|
+
class: a(`${e.propsClass}__wrapper`),
|
|
136
|
+
for: e.propsClass
|
|
137
|
+
}, u(e.propsLabel), 11, T)) : t("", !0),
|
|
138
|
+
m(r("input", {
|
|
139
|
+
class: a(e.propsClass),
|
|
140
|
+
id: e.propsClass,
|
|
141
|
+
type: e.propsType,
|
|
142
|
+
"onUpdate:modelValue": i[0] ||= (t) => e.inputValue = t
|
|
143
|
+
}, null, 10, E), [[d, e.inputValue]]),
|
|
144
|
+
e.$slots["input-icon"] ? (o(), n("div", {
|
|
145
|
+
key: 1,
|
|
146
|
+
class: a(`${e.propsClass}__icon__wrapper`)
|
|
147
|
+
}, [l(e.$slots, "input-icon")], 2)) : t("", !0)
|
|
148
|
+
], 2);
|
|
149
|
+
}
|
|
150
|
+
var O = /* @__PURE__ */ g(w, [["render", D]]);
|
|
104
151
|
//#endregion
|
|
105
|
-
export {
|
|
152
|
+
export { v as BaseButton, O as BaseInput, C 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.$slots[`label-icon`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(`${e.propsClass}
|
|
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__wrapper`)},[(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__wrapper`)},[(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__wrapper`)},[(0,t.renderSlot)(e.$slots,`error-icon`)],2)):(0,t.createCommentVNode)(``,!0)],2)):(0,t.createCommentVNode)(``,!0)],2)}var u=r(o,[[`render`,l]]),d=(0,t.defineComponent)({components:{},emits:[`valueChanged`],props:{propsClass:{type:String,default:`input`},propsLabel:{type:String},propsValue:{type:[String,Number],default:null},propsType:{type:String,default:`text`}},setup(e,{emit:n}){let r=(0,t.ref)(e.propsValue);return(0,t.watch)(r,()=>{(r.value||r.value==``)&&n(`valueChanged`,r.value)},{deep:!0,immediate:!0}),{inputValue:r}}}),f=[`for`],p=[`id`,`type`];function m(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}__wrapper`),for:e.propsClass},(0,t.toDisplayString)(e.propsLabel),11,f)):(0,t.createCommentVNode)(``,!0),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{class:(0,t.normalizeClass)(e.propsClass),id:e.propsClass,type:e.propsType,"onUpdate:modelValue":n[0]||=t=>e.inputValue=t},null,10,p),[[t.vModelDynamic,e.inputValue]]),e.$slots[`input-icon`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:(0,t.normalizeClass)(`${e.propsClass}__icon__wrapper`)},[(0,t.renderSlot)(e.$slots,`input-icon`)],2)):(0,t.createCommentVNode)(``,!0)],2)}var h=r(d,[[`render`,m]]);e.BaseButton=a,e.BaseInput=h,e.BaseSelect=u});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
|
+
declare const _default: DefineComponent<ExtractPropTypes<{
|
|
3
|
+
propsClass: {
|
|
4
|
+
type: StringConstructor;
|
|
5
|
+
default: string;
|
|
6
|
+
};
|
|
7
|
+
propsLabel: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
};
|
|
10
|
+
propsValue: {
|
|
11
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
12
|
+
default: null;
|
|
13
|
+
};
|
|
14
|
+
propsType: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
}>, {
|
|
19
|
+
inputValue: Ref<string | number, string | number>;
|
|
20
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "valueChanged"[], "valueChanged", PublicProps, Readonly< ExtractPropTypes<{
|
|
21
|
+
propsClass: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
default: string;
|
|
24
|
+
};
|
|
25
|
+
propsLabel: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
};
|
|
28
|
+
propsValue: {
|
|
29
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
30
|
+
default: null;
|
|
31
|
+
};
|
|
32
|
+
propsType: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
default: string;
|
|
35
|
+
};
|
|
36
|
+
}>> & Readonly<{
|
|
37
|
+
onValueChanged?: ((...args: any[]) => any) | undefined;
|
|
38
|
+
}>, {
|
|
39
|
+
propsClass: string;
|
|
40
|
+
propsValue: string | number;
|
|
41
|
+
propsType: string;
|
|
42
|
+
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
43
|
+
export default _default;
|