beans-ui-kit 0.0.22 → 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` - для иконки лейбла
27
- - `select-icon` - для иконки внутри выпадающего списка
28
- - `error-icon` - для иконки у текста ошибки
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, vModelSelect as d, withDirectives as f } from "vue";
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 p = i({
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
- }), m = (e, t) => {
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 h(e, i, s, c, d, f) {
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 g = /* @__PURE__ */ m(p, [["render", h]]), _ = i({
29
+ var v = /* @__PURE__ */ g(h, [["render", _]]), y = i({
30
30
  emits: ["valueChanged"],
31
31
  props: {
32
32
  propsClass: {
@@ -62,15 +62,18 @@ var g = /* @__PURE__ */ m(p, [["render", h]]), _ = i({
62
62
  }
63
63
  };
64
64
  }
65
- }), v = ["for"], y = ["disabled", "id"];
66
- function b(i, s, p, m, h, g) {
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,
70
70
  class: a(`${i.propsClass}__label`),
71
71
  for: i.propsClass
72
- }, [r("span", null, u(i.propsLabel), 1), l(i.$slots, "label-icon")], 10, v)) : t("", !0),
73
- r("div", { class: a(`${i.propsClass}__inner`) }, [f(r("select", {
72
+ }, [r("span", null, u(i.propsLabel), 1), i.$slots["label-icon"] ? (o(), n("div", {
73
+ key: 0,
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", {
74
77
  class: a(`${i.propsClass}`),
75
78
  disabled: i.disabled,
76
79
  id: i.propsClass,
@@ -84,13 +87,66 @@ function b(i, s, p, m, h, g) {
84
87
  }, u(i.propsPlaceholder), 3)) : t("", !0), (o(!0), n(e, null, c(i.propsOptions, (e, t) => (o(), n("option", {
85
88
  key: t,
86
89
  class: a([`${i.propsClass}__option`, i.markedOptions.length && i.markedOptions.includes(e) ? `${i.propsClass}__option--marked` : ""])
87
- }, u(e && typeof e == "object" && "value" in e ? e.value : e), 3))), 128))], 42, y), [[d, i.selectValue]]), l(i.$slots, "select-icon")], 2),
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
+ key: 0,
92
+ class: a(`${i.propsClass}__icon__wrapper`)
93
+ }, [l(i.$slots, "select-icon")], 2)) : t("", !0)], 2),
88
94
  i.error ? (o(), n("div", {
89
95
  key: 1,
90
96
  class: a(`${i.propsClass}__error__wrapper`)
91
- }, [l(i.$slots, "error-icon")], 2)) : t("", !0)
97
+ }, [i.$slots["error-icon"] ? (o(), n("div", {
98
+ key: 0,
99
+ class: a(`${i.propsClass}__error__icon__wrapper`)
100
+ }, [l(i.$slots, "error-icon")], 2)) : t("", !0)], 2)) : t("", !0)
101
+ ], 2);
102
+ }
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)
92
148
  ], 2);
93
149
  }
94
- var x = /* @__PURE__ */ m(_, [["render", b]]);
150
+ var O = /* @__PURE__ */ g(w, [["render", D]]);
95
151
  //#endregion
96
- export { g as BaseButton, x as BaseSelect };
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),(0,t.renderSlot)(e.$slots,`label-icon`)],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]]),(0,t.renderSlot)(e.$slots,`select-icon`)],2),e.error?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:(0,t.normalizeClass)(`${e.propsClass}__error__wrapper`)},[(0,t.renderSlot)(e.$slots,`error-icon`)],2)):(0,t.createCommentVNode)(``,!0)],2)}var u=r(o,[[`render`,l]]);e.BaseButton=a,e.BaseSelect=u});
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;
@@ -1,3 +1,4 @@
1
1
  import { default as BaseButton } from './BaseButton.vue';
2
2
  import { default as BaseSelect } from './BaseSelect.vue';
3
- export { BaseButton, BaseSelect };
3
+ import { default as BaseInput } from './BaseInput.vue';
4
+ export { BaseButton, BaseSelect, BaseInput };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "beans-ui-kit",
3
3
  "private": false,
4
- "version": "0.0.22",
4
+ "version": "0.0.24",
5
5
  "type": "module",
6
6
  "types": "./dist/beansBaseActions.es.d.ts",
7
7
  "files": [