@useinsider/ab-components 0.0.1 → 0.0.3
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/dist/{FilledCautionTriangle-cwRIOeCA.js → FilledCautionTriangle-Dxi1xHHx.js} +2 -2
- package/dist/{FilledCautionTriangle-cwRIOeCA.js.map → FilledCautionTriangle-Dxi1xHHx.js.map} +1 -1
- package/dist/{FilledCheckCircle-C_QbmDt7.js → FilledCheckCircle-BZblXEJF.js} +2 -2
- package/dist/{FilledCheckCircle-C_QbmDt7.js.map → FilledCheckCircle-BZblXEJF.js.map} +1 -1
- package/dist/{FilledErrorBox-BjD-Fb7J.js → FilledErrorBox-Czq7e64W.js} +2 -2
- package/dist/{FilledErrorBox-BjD-Fb7J.js.map → FilledErrorBox-Czq7e64W.js.map} +1 -1
- package/dist/{FilledInfoCircle-BIlBGYfB.js → FilledInfoCircle-BC2xa2R2.js} +2 -2
- package/dist/{FilledInfoCircle-BIlBGYfB.js.map → FilledInfoCircle-BC2xa2R2.js.map} +1 -1
- package/dist/{LineCheck-BS3C1-Sl.js → LineCheck-dIF58UgU.js} +2 -2
- package/dist/{LineCheck-BS3C1-Sl.js.map → LineCheck-dIF58UgU.js.map} +1 -1
- package/dist/{LoadingCircle-BsQ7G2K0.js → LoadingCircle-CoRfnES9.js} +2 -2
- package/dist/{LoadingCircle-BsQ7G2K0.js.map → LoadingCircle-CoRfnES9.js.map} +1 -1
- package/dist/{SmartIcon-DJGXMv63.js → SmartIcon-m_MkAWvM.js} +2 -2
- package/dist/{SmartIcon-DJGXMv63.js.map → SmartIcon-m_MkAWvM.js.map} +1 -1
- package/dist/ab-components.cjs.js +1 -1
- package/dist/ab-components.cjs.js.map +1 -1
- package/dist/ab-components.css +1 -1
- package/dist/ab-components.es.js +7 -5
- package/dist/ab-components.iife.js +2 -0
- package/dist/ab-components.iife.js.map +1 -0
- package/dist/ab-components.umd.js +2 -0
- package/dist/ab-components.umd.js.map +1 -0
- package/dist/index-BfxawNec.js +535 -0
- package/dist/index-BfxawNec.js.map +1 -0
- package/dist/index.d.ts +162 -1
- package/package.json +3 -2
- package/dist/FilledCautionTriangle-DrK0oPPV.cjs +0 -2
- package/dist/FilledCautionTriangle-DrK0oPPV.cjs.map +0 -1
- package/dist/FilledCheckCircle-GM-5M2-K.cjs +0 -2
- package/dist/FilledCheckCircle-GM-5M2-K.cjs.map +0 -1
- package/dist/FilledErrorBox-AeXz9hB8.cjs +0 -2
- package/dist/FilledErrorBox-AeXz9hB8.cjs.map +0 -1
- package/dist/FilledInfoCircle-zRwS-Nz9.cjs +0 -2
- package/dist/FilledInfoCircle-zRwS-Nz9.cjs.map +0 -1
- package/dist/LineCheck-CXDtYarM.cjs +0 -2
- package/dist/LineCheck-CXDtYarM.cjs.map +0 -1
- package/dist/LoadingCircle-B9WqQlA9.cjs +0 -2
- package/dist/LoadingCircle-B9WqQlA9.cjs.map +0 -1
- package/dist/SmartIcon-D7zNmV22.cjs +0 -2
- package/dist/SmartIcon-D7zNmV22.cjs.map +0 -1
- package/dist/index-DP-lI-oU.cjs +0 -2
- package/dist/index-DP-lI-oU.cjs.map +0 -1
- package/dist/index-DvF0u09d.js +0 -432
- package/dist/index-DvF0u09d.js.map +0 -1
|
@@ -0,0 +1,535 @@
|
|
|
1
|
+
import { defineComponent as q, computed as j, openBlock as s, createElementBlock as d, normalizeClass as l, unref as e, createBlock as S, createCommentVNode as f, toDisplayString as v, ref as w, onMounted as D, Fragment as F, createElementVNode as k, withDirectives as T, normalizeStyle as G, withModifiers as K, vModelText as ee, renderList as U, defineAsyncComponent as I, resolveDynamicComponent as te, createVNode as ne } from "vue";
|
|
2
|
+
const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8", _e = "_button_hp1t7_1", ae = "_button__label_hp1t7_192", le = "_button__solid_hp1t7_204", se = "_fill_hp1t7_1124", $ = {
|
|
3
|
+
button__size_default: oe,
|
|
4
|
+
button__size_small: re,
|
|
5
|
+
button: _e,
|
|
6
|
+
button__label: ae,
|
|
7
|
+
"button__solid-primary": "_button__solid-primary_hp1t7_204",
|
|
8
|
+
"no-hover-effect": "_no-hover-effect_hp1t7_211",
|
|
9
|
+
"button--selected": "_button--selected_hp1t7_233",
|
|
10
|
+
"button__solid-subtle-primary": "_button__solid-subtle-primary_hp1t7_240",
|
|
11
|
+
"button__solid-secondary": "_button__solid-secondary_hp1t7_276",
|
|
12
|
+
"button__solid-danger": "_button__solid-danger_hp1t7_312",
|
|
13
|
+
"button__solid-warning": "_button__solid-warning_hp1t7_348",
|
|
14
|
+
"button__solid-smart": "_button__solid-smart_hp1t7_384",
|
|
15
|
+
"button__ghost-primary": "_button__ghost-primary_hp1t7_420",
|
|
16
|
+
"button__ghost-subtle-primary": "_button__ghost-subtle-primary_hp1t7_456",
|
|
17
|
+
"button__ghost-secondary": "_button__ghost-secondary_hp1t7_492",
|
|
18
|
+
"button__ghost-danger": "_button__ghost-danger_hp1t7_528",
|
|
19
|
+
"button__ghost-warning": "_button__ghost-warning_hp1t7_564",
|
|
20
|
+
"button__ghost-smart": "_button__ghost-smart_hp1t7_600",
|
|
21
|
+
"button__text-primary": "_button__text-primary_hp1t7_636",
|
|
22
|
+
"button__text-text": "_button__text-text_hp1t7_672",
|
|
23
|
+
"button__text-subtle-primary": "_button__text-subtle-primary_hp1t7_708",
|
|
24
|
+
"button__text-secondary": "_button__text-secondary_hp1t7_744",
|
|
25
|
+
"button__text-danger": "_button__text-danger_hp1t7_780",
|
|
26
|
+
"button__text-warning": "_button__text-warning_hp1t7_816",
|
|
27
|
+
"button__text-smart": "_button__text-smart_hp1t7_852",
|
|
28
|
+
"button__outline-primary": "_button__outline-primary_hp1t7_888",
|
|
29
|
+
"button__outline-subtle-primary": "_button__outline-subtle-primary_hp1t7_925",
|
|
30
|
+
"button__outline-secondary": "_button__outline-secondary_hp1t7_962",
|
|
31
|
+
"button__outline-danger": "_button__outline-danger_hp1t7_999",
|
|
32
|
+
"button__outline-warning": "_button__outline-warning_hp1t7_1036",
|
|
33
|
+
"button__outline-smart": "_button__outline-smart_hp1t7_1073",
|
|
34
|
+
button__solid: le,
|
|
35
|
+
fill: se
|
|
36
|
+
}, ue = ["disabled"], ot = /* @__PURE__ */ q({
|
|
37
|
+
__name: "Button",
|
|
38
|
+
props: {
|
|
39
|
+
variant: {},
|
|
40
|
+
color: {},
|
|
41
|
+
size: { default: "default" },
|
|
42
|
+
leftIconName: {},
|
|
43
|
+
rightIconName: {},
|
|
44
|
+
loadingStatus: { type: Boolean, default: !1 },
|
|
45
|
+
successStatus: { type: Boolean, default: !1 },
|
|
46
|
+
label: {},
|
|
47
|
+
disabled: { type: Boolean, default: !1 },
|
|
48
|
+
fill: { type: Boolean, default: !1 }
|
|
49
|
+
},
|
|
50
|
+
emits: ["click"],
|
|
51
|
+
setup(u, { emit: i }) {
|
|
52
|
+
const _ = u, t = i, a = (o) => {
|
|
53
|
+
_.disabled || t("click", o);
|
|
54
|
+
}, m = j(() => _.loadingStatus ? "LoadingCircle" : _.successStatus ? "LineCheck" : _.leftIconName);
|
|
55
|
+
return (o, n) => (s(), d("button", {
|
|
56
|
+
class: l([
|
|
57
|
+
e($).button,
|
|
58
|
+
e($)[`button__${o.variant}`],
|
|
59
|
+
e($)[`button__${o.variant}-${o.color}`],
|
|
60
|
+
e($)[`button__size_${o.size}`],
|
|
61
|
+
{ [e($).fill]: o.fill }
|
|
62
|
+
]),
|
|
63
|
+
disabled: _.disabled,
|
|
64
|
+
onClick: a
|
|
65
|
+
}, [
|
|
66
|
+
m.value ? (s(), S(e(M), {
|
|
67
|
+
key: 0,
|
|
68
|
+
name: m.value
|
|
69
|
+
}, null, 8, ["name"])) : f("", !0),
|
|
70
|
+
o.label ? (s(), d("span", {
|
|
71
|
+
key: 1,
|
|
72
|
+
class: l(e($).button__label)
|
|
73
|
+
}, v(o.label), 3)) : f("", !0),
|
|
74
|
+
o.rightIconName ? (s(), S(e(M), {
|
|
75
|
+
key: 2,
|
|
76
|
+
name: o.rightIconName
|
|
77
|
+
}, null, 8, ["name"])) : f("", !0)
|
|
78
|
+
], 10, ue));
|
|
79
|
+
}
|
|
80
|
+
}), ie = {
|
|
81
|
+
mounted(u, i) {
|
|
82
|
+
u.clickOutsideEvent = (_) => {
|
|
83
|
+
[u, ...i.value.exclude || []].some((a) => a && (a === _.target || a.contains(_.target))) || i.value.handler();
|
|
84
|
+
}, document.addEventListener("click", u.clickOutsideEvent);
|
|
85
|
+
},
|
|
86
|
+
unmounted(u) {
|
|
87
|
+
u.clickOutsideEvent && document.removeEventListener("click", u.clickOutsideEvent);
|
|
88
|
+
}
|
|
89
|
+
}, de = (u, i) => {
|
|
90
|
+
var t;
|
|
91
|
+
let _ = 0;
|
|
92
|
+
for (const a of u)
|
|
93
|
+
if (a.toLowerCase() === ((t = i[_]) == null ? void 0 : t.toLowerCase()) && _++, _ === i.length)
|
|
94
|
+
return !0;
|
|
95
|
+
return !1;
|
|
96
|
+
}, ce = (u, i, _) => {
|
|
97
|
+
if (!_.trim())
|
|
98
|
+
return u;
|
|
99
|
+
const t = _.toLowerCase();
|
|
100
|
+
return u.filter((a) => {
|
|
101
|
+
const m = String(a[i]);
|
|
102
|
+
return de(m.toLowerCase(), t);
|
|
103
|
+
}).sort((a, m) => {
|
|
104
|
+
const o = String(a[i]).toLowerCase(), n = String(m[i]).toLowerCase();
|
|
105
|
+
return o === t ? -1 : n === t ? 1 : o.startsWith(t) && !n.startsWith(t) ? -1 : !o.startsWith(t) && n.startsWith(t) ? 1 : o.length - n.length;
|
|
106
|
+
});
|
|
107
|
+
}, pe = "_dropdown_zdj6q_169", me = "_dropdown__valueContent_zdj6q_178", he = "_dropdown__label_zdj6q_189", be = "_dropdown__value_zdj6q_178", fe = "_dropdown__placeholder_zdj6q_196", ve = "_dropdown__arrowIcon_zdj6q_204", ge = "_menu_zdj6q_209", we = "_menu__searchContainer_zdj6q_222", ye = "_menu__searchInputWrap_zdj6q_226", Ce = "_menu__searchInput_zdj6q_226", ze = "_menu__errorMessage_zdj6q_247", ke = "_menu__addButton_zdj6q_254", Ie = "_menu__itemContainer_zdj6q_262", xe = "_menu__item_zdj6q_262", h = {
|
|
108
|
+
dropdown: pe,
|
|
109
|
+
dropdown__valueContent: me,
|
|
110
|
+
"dropdown__valueContent--open": "_dropdown__valueContent--open_zdj6q_186",
|
|
111
|
+
dropdown__label: he,
|
|
112
|
+
dropdown__value: be,
|
|
113
|
+
dropdown__placeholder: fe,
|
|
114
|
+
dropdown__arrowIcon: ve,
|
|
115
|
+
menu: ge,
|
|
116
|
+
menu__searchContainer: we,
|
|
117
|
+
menu__searchInputWrap: ye,
|
|
118
|
+
menu__searchInput: Ce,
|
|
119
|
+
"menu__searchInput--error": "_menu__searchInput--error_zdj6q_244",
|
|
120
|
+
menu__errorMessage: ze,
|
|
121
|
+
menu__addButton: ke,
|
|
122
|
+
menu__itemContainer: Ie,
|
|
123
|
+
menu__item: xe,
|
|
124
|
+
"menu__item--active": "_menu__item--active_zdj6q_300"
|
|
125
|
+
}, $e = ["for"], qe = ["placeholder"], Be = ["onClick"], rt = /* @__PURE__ */ q({
|
|
126
|
+
__name: "DropdownMenu",
|
|
127
|
+
props: {
|
|
128
|
+
id: {},
|
|
129
|
+
label: {},
|
|
130
|
+
defaultSelected: { default: "" },
|
|
131
|
+
menuHeight: { default: 154 },
|
|
132
|
+
placeholder: {},
|
|
133
|
+
addable: { type: Boolean },
|
|
134
|
+
addButtonText: {},
|
|
135
|
+
searchable: { type: Boolean },
|
|
136
|
+
searchPlaceHolder: {},
|
|
137
|
+
items: {},
|
|
138
|
+
validateAddItem: { type: Function, default: () => null }
|
|
139
|
+
},
|
|
140
|
+
emits: ["add-error", "item-added", "select-item"],
|
|
141
|
+
setup(u, { emit: i }) {
|
|
142
|
+
const _ = ie, t = u, a = i, m = w(), o = w(), n = w(!0), r = w(null), y = w(""), c = w(null), x = w({ x: 0, y: 0, width: 0, shouldOpenUp: !1, height: t.menuHeight }), L = w([...t.items]), B = w([...t.items]), O = () => {
|
|
143
|
+
if (!m.value)
|
|
144
|
+
return;
|
|
145
|
+
const { offsetTop: p, offsetLeft: b, offsetWidth: g } = m.value, W = window.innerHeight, P = p + m.value.offsetHeight, R = P + t.menuHeight > W;
|
|
146
|
+
x.value = {
|
|
147
|
+
x: b + window.scrollX,
|
|
148
|
+
y: R ? p + window.scrollY : P + window.scrollY,
|
|
149
|
+
width: g,
|
|
150
|
+
shouldOpenUp: R,
|
|
151
|
+
height: t.menuHeight
|
|
152
|
+
};
|
|
153
|
+
}, A = () => {
|
|
154
|
+
O(), n.value = !n.value;
|
|
155
|
+
}, V = () => {
|
|
156
|
+
c.value = null, y.value = "", L.value = [...B.value];
|
|
157
|
+
}, E = () => {
|
|
158
|
+
n.value = !1, V();
|
|
159
|
+
}, Y = (p) => {
|
|
160
|
+
r.value = p, y.value = "", E(), a("select-item", p);
|
|
161
|
+
}, Q = () => {
|
|
162
|
+
const p = y.value.trim(), b = t.validateAddItem(p, B.value);
|
|
163
|
+
if (b) {
|
|
164
|
+
c.value = b, a("add-error", b);
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
const g = {
|
|
168
|
+
text: p,
|
|
169
|
+
value: p
|
|
170
|
+
};
|
|
171
|
+
B.value.push(g), V(), a("item-added", g);
|
|
172
|
+
}, X = () => {
|
|
173
|
+
L.value = ce(B.value, "text", y.value);
|
|
174
|
+
}, Z = () => {
|
|
175
|
+
c.value = "";
|
|
176
|
+
}, J = j(() => ({
|
|
177
|
+
top: x.value.shouldOpenUp ? `${x.value.y - 10}px` : `${x.value.y}px`,
|
|
178
|
+
left: `${x.value.x}px`,
|
|
179
|
+
width: `${x.value.width}px`,
|
|
180
|
+
height: `${t.menuHeight}px`
|
|
181
|
+
}));
|
|
182
|
+
D(() => {
|
|
183
|
+
if (O(), t.defaultSelected) {
|
|
184
|
+
const p = B.value.find((b) => b.value === t.defaultSelected);
|
|
185
|
+
p && (r.value = p, a("select-item", p));
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
const N = j(() => r.value ? r.value.text : "");
|
|
189
|
+
return (p, b) => (s(), d(F, null, [
|
|
190
|
+
k("div", {
|
|
191
|
+
ref_key: "dropdownRef",
|
|
192
|
+
ref: m,
|
|
193
|
+
class: l(e(h).dropdown)
|
|
194
|
+
}, [
|
|
195
|
+
p.label ? (s(), d("label", {
|
|
196
|
+
key: 0,
|
|
197
|
+
class: l(e(h).dropdown__label),
|
|
198
|
+
for: p.id
|
|
199
|
+
}, v(p.label), 11, $e)) : f("", !0),
|
|
200
|
+
k("button", {
|
|
201
|
+
class: l([
|
|
202
|
+
e(h).dropdown__valueContent,
|
|
203
|
+
{
|
|
204
|
+
[e(h)["dropdown__valueContent--open"]]: n.value
|
|
205
|
+
}
|
|
206
|
+
]),
|
|
207
|
+
onClick: A
|
|
208
|
+
}, [
|
|
209
|
+
k("span", {
|
|
210
|
+
class: l(e(h).dropdown__value)
|
|
211
|
+
}, v(N.value), 3),
|
|
212
|
+
p.placeholder && !N.value ? (s(), d("span", {
|
|
213
|
+
key: 0,
|
|
214
|
+
class: l(e(h).dropdown__placeholder)
|
|
215
|
+
}, v(p.placeholder), 3)) : f("", !0),
|
|
216
|
+
(s(), d("svg", {
|
|
217
|
+
fill: "none",
|
|
218
|
+
height: "17",
|
|
219
|
+
viewBox: "0 0 16 17",
|
|
220
|
+
width: "16",
|
|
221
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
222
|
+
class: l(e(h).dropdown__arrowIcon)
|
|
223
|
+
}, b[2] || (b[2] = [
|
|
224
|
+
k("path", {
|
|
225
|
+
d: "M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z",
|
|
226
|
+
fill: "#91949F"
|
|
227
|
+
}, null, -1)
|
|
228
|
+
]), 2))
|
|
229
|
+
], 2)
|
|
230
|
+
], 2),
|
|
231
|
+
n.value ? T((s(), d("div", {
|
|
232
|
+
key: 0,
|
|
233
|
+
ref_key: "menuRef",
|
|
234
|
+
ref: o,
|
|
235
|
+
class: l(e(h).menu),
|
|
236
|
+
style: G(J.value),
|
|
237
|
+
onClick: b[1] || (b[1] = K(() => {
|
|
238
|
+
}, ["prevent"]))
|
|
239
|
+
}, [
|
|
240
|
+
t.searchable ? (s(), d("div", {
|
|
241
|
+
key: 0,
|
|
242
|
+
class: l(e(h).menu__searchContainer)
|
|
243
|
+
}, [
|
|
244
|
+
k("div", {
|
|
245
|
+
class: l(e(h).menu__searchInputWrap)
|
|
246
|
+
}, [
|
|
247
|
+
T(k("input", {
|
|
248
|
+
type: "text",
|
|
249
|
+
class: l([
|
|
250
|
+
e(h).menu__searchInput,
|
|
251
|
+
{
|
|
252
|
+
[e(h)["menu__searchInput--error"]]: c.value
|
|
253
|
+
}
|
|
254
|
+
]),
|
|
255
|
+
placeholder: p.searchPlaceHolder,
|
|
256
|
+
"onUpdate:modelValue": b[0] || (b[0] = (g) => y.value = g),
|
|
257
|
+
onFocus: Z,
|
|
258
|
+
onInput: X
|
|
259
|
+
}, null, 42, qe), [
|
|
260
|
+
[ee, y.value]
|
|
261
|
+
]),
|
|
262
|
+
c.value ? (s(), d("p", {
|
|
263
|
+
key: 0,
|
|
264
|
+
class: l(e(h).menu__errorMessage)
|
|
265
|
+
}, v(c.value), 3)) : f("", !0)
|
|
266
|
+
], 2),
|
|
267
|
+
t.addable ? (s(), d("button", {
|
|
268
|
+
key: 0,
|
|
269
|
+
class: l(e(h).menu__addButton),
|
|
270
|
+
onClick: Q
|
|
271
|
+
}, v(p.addButtonText), 3)) : f("", !0)
|
|
272
|
+
], 2)) : f("", !0),
|
|
273
|
+
k("ul", {
|
|
274
|
+
class: l(e(h).menu__itemContainer)
|
|
275
|
+
}, [
|
|
276
|
+
(s(!0), d(F, null, U(L.value, (g) => (s(), d("li", {
|
|
277
|
+
key: g.value,
|
|
278
|
+
class: l([
|
|
279
|
+
e(h).menu__item,
|
|
280
|
+
{
|
|
281
|
+
[e(h)["menu__item--active"]]: r.value && g.value === r.value.value
|
|
282
|
+
}
|
|
283
|
+
]),
|
|
284
|
+
onClick: (W) => Y(g)
|
|
285
|
+
}, v(g.text), 11, Be))), 128))
|
|
286
|
+
], 2)
|
|
287
|
+
], 6)), [
|
|
288
|
+
[e(_), { handler: E, exclude: [m.value, o.value] }]
|
|
289
|
+
]) : f("", !0)
|
|
290
|
+
], 64));
|
|
291
|
+
}
|
|
292
|
+
}), je = {
|
|
293
|
+
FilledErrorBox: I(() => import("./FilledErrorBox-Czq7e64W.js")),
|
|
294
|
+
LineCheck: I(() => import("./LineCheck-dIF58UgU.js")),
|
|
295
|
+
FilledCheckCircle: I(() => import("./FilledCheckCircle-BZblXEJF.js")),
|
|
296
|
+
LoadingCircle: I(() => import("./LoadingCircle-CoRfnES9.js")),
|
|
297
|
+
FilledInfoCircle: I(() => import("./FilledInfoCircle-BC2xa2R2.js")),
|
|
298
|
+
SmartIcon: I(() => import("./SmartIcon-m_MkAWvM.js")),
|
|
299
|
+
FilledCautionTriangle: I(() => import("./FilledCautionTriangle-Dxi1xHHx.js"))
|
|
300
|
+
}, Se = /* @__PURE__ */ q({
|
|
301
|
+
__name: "Icon",
|
|
302
|
+
props: {
|
|
303
|
+
name: {},
|
|
304
|
+
size: { default: 16 },
|
|
305
|
+
color: {}
|
|
306
|
+
},
|
|
307
|
+
setup(u) {
|
|
308
|
+
const i = u, _ = j(() => typeof i.size == "number" ? `${i.size}px` : i.size);
|
|
309
|
+
return (t, a) => (s(), S(te(e(je)[t.name]), {
|
|
310
|
+
class: "icon",
|
|
311
|
+
style: G({ width: _.value, height: _.value, fill: i.color || "currentColor" })
|
|
312
|
+
}, null, 8, ["style"]));
|
|
313
|
+
}
|
|
314
|
+
}), Me = (u, i) => {
|
|
315
|
+
const _ = u.__vccOpts || u;
|
|
316
|
+
for (const [t, a] of i)
|
|
317
|
+
_[t] = a;
|
|
318
|
+
return _;
|
|
319
|
+
}, M = /* @__PURE__ */ Me(Se, [["__scopeId", "data-v-3e9c3b20"]]), Le = "_container_2joy4_1", He = "_container__text_2joy4_187", Fe = "_container__default_2joy4_191", Ge = "_container__warning_2joy4_199", Oe = "_container__alert_2joy4_207", Ve = "_container__success_2joy4_215", H = {
|
|
320
|
+
container: Le,
|
|
321
|
+
container__text: He,
|
|
322
|
+
container__default: Fe,
|
|
323
|
+
container__warning: Ge,
|
|
324
|
+
container__alert: Oe,
|
|
325
|
+
container__success: Ve
|
|
326
|
+
}, _t = /* @__PURE__ */ q({
|
|
327
|
+
__name: "OnPageMessage",
|
|
328
|
+
props: {
|
|
329
|
+
variant: { default: "default" },
|
|
330
|
+
text: {}
|
|
331
|
+
},
|
|
332
|
+
setup(u) {
|
|
333
|
+
const i = u, _ = j(() => {
|
|
334
|
+
switch (i.variant) {
|
|
335
|
+
case "alert":
|
|
336
|
+
return "FilledErrorBox";
|
|
337
|
+
case "warning":
|
|
338
|
+
return "FilledCautionTriangle";
|
|
339
|
+
case "success":
|
|
340
|
+
return "FilledCheckCircle";
|
|
341
|
+
default:
|
|
342
|
+
return "FilledInfoCircle";
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
return (t, a) => (s(), d("div", {
|
|
346
|
+
class: l([
|
|
347
|
+
e(H).container,
|
|
348
|
+
e(H)[`container__${t.variant}`]
|
|
349
|
+
])
|
|
350
|
+
}, [
|
|
351
|
+
ne(M, {
|
|
352
|
+
name: _.value,
|
|
353
|
+
size: 24
|
|
354
|
+
}, null, 8, ["name"]),
|
|
355
|
+
k("span", {
|
|
356
|
+
class: l(e(H).container__text)
|
|
357
|
+
}, v(t.text), 3)
|
|
358
|
+
], 2));
|
|
359
|
+
}
|
|
360
|
+
}), Ee = "_button__size_default_qxh1r_1", Ne = "_button__size_small_qxh1r_8", We = "_button_qxh1r_1", Pe = "_button__label_qxh1r_191", Re = "_button__solid_qxh1r_328", Te = "_segmentGroup_qxh1r_335", De = "_fill_qxh1r_357", C = {
|
|
361
|
+
button__size_default: Ee,
|
|
362
|
+
button__size_small: Ne,
|
|
363
|
+
button: We,
|
|
364
|
+
button__label: Pe,
|
|
365
|
+
"button--primary": "_button--primary_qxh1r_206",
|
|
366
|
+
"button--selected": "_button--selected_qxh1r_216",
|
|
367
|
+
"button--secondary": "_button--secondary_qxh1r_229",
|
|
368
|
+
"button--danger": "_button--danger_qxh1r_252",
|
|
369
|
+
"button--warning": "_button--warning_qxh1r_275",
|
|
370
|
+
"button--smart": "_button--smart_qxh1r_298",
|
|
371
|
+
button__solid: Re,
|
|
372
|
+
segmentGroup: Te,
|
|
373
|
+
"segmentGroup--vertical": "_segmentGroup--vertical_qxh1r_338",
|
|
374
|
+
"segmentGroup--horizontal": "_segmentGroup--horizontal_qxh1r_347",
|
|
375
|
+
fill: De
|
|
376
|
+
}, Ue = ["disabled", "onClick"], at = /* @__PURE__ */ q({
|
|
377
|
+
__name: "SegmentButton",
|
|
378
|
+
props: {
|
|
379
|
+
color: {},
|
|
380
|
+
size: { default: "default" },
|
|
381
|
+
align: { default: "horizontal" },
|
|
382
|
+
disabled: { type: Boolean, default: !1 },
|
|
383
|
+
segments: {},
|
|
384
|
+
fill: { type: Boolean }
|
|
385
|
+
},
|
|
386
|
+
emits: ["click"],
|
|
387
|
+
setup(u, { emit: i }) {
|
|
388
|
+
const _ = u, t = i, a = w(""), m = (o) => {
|
|
389
|
+
_.disabled || o.disabled || (a.value = o.value, t("click", o.value));
|
|
390
|
+
};
|
|
391
|
+
return (o, n) => (s(), d("div", {
|
|
392
|
+
class: l([
|
|
393
|
+
e(C).segmentGroup,
|
|
394
|
+
e(C)[`segmentGroup--${o.align}`],
|
|
395
|
+
{ [e(C).fill]: o.fill }
|
|
396
|
+
])
|
|
397
|
+
}, [
|
|
398
|
+
(s(!0), d(F, null, U(o.segments, (r) => (s(), d("button", {
|
|
399
|
+
key: r.value,
|
|
400
|
+
class: l([
|
|
401
|
+
e(C).button,
|
|
402
|
+
e(C)[`button--${o.color}`],
|
|
403
|
+
e(C)[`button__size_${o.size}`],
|
|
404
|
+
e(C).fill,
|
|
405
|
+
{
|
|
406
|
+
[e(C)["button--selected"]]: r.value === a.value
|
|
407
|
+
}
|
|
408
|
+
]),
|
|
409
|
+
disabled: r.disabled || _.disabled,
|
|
410
|
+
onClick: (y) => m(r)
|
|
411
|
+
}, [
|
|
412
|
+
r.icon ? (s(), S(e(M), {
|
|
413
|
+
key: 0,
|
|
414
|
+
name: r.icon
|
|
415
|
+
}, null, 8, ["name"])) : f("", !0),
|
|
416
|
+
r.label ? (s(), d("span", {
|
|
417
|
+
key: 1,
|
|
418
|
+
class: l(e(C).button__label)
|
|
419
|
+
}, v(r.label), 3)) : f("", !0)
|
|
420
|
+
], 10, Ue))), 128))
|
|
421
|
+
], 2));
|
|
422
|
+
}
|
|
423
|
+
}), Ae = "_wrapper_1pges_169", Ye = "_wrapper__field_1pges_174", Qe = "_wrapper__label_1pges_208", Xe = "_wrapper__bottom_1pges_216", Ze = "_wrapper__errorMessage_1pges_220", Je = "_wrapper__counter_1pges_225", z = {
|
|
424
|
+
wrapper: Ae,
|
|
425
|
+
wrapper__field: Ye,
|
|
426
|
+
wrapper__label: Qe,
|
|
427
|
+
wrapper__bottom: Xe,
|
|
428
|
+
wrapper__errorMessage: Ze,
|
|
429
|
+
wrapper__counter: Je,
|
|
430
|
+
"wrapper--error": "_wrapper--error_1pges_231"
|
|
431
|
+
}, Ke = ["for"], et = ["id", "maxlength", "name", "placeholder", "value"], tt = ["id", "maxlength", "name", "placeholder", "value"], lt = /* @__PURE__ */ q({
|
|
432
|
+
__name: "TextInput",
|
|
433
|
+
props: {
|
|
434
|
+
id: {},
|
|
435
|
+
name: {},
|
|
436
|
+
modelValue: {},
|
|
437
|
+
label: { default: "" },
|
|
438
|
+
placeholder: { default: "" },
|
|
439
|
+
maxLength: { default: void 0 },
|
|
440
|
+
maxHeight: { default: void 0 },
|
|
441
|
+
error: { default: "" },
|
|
442
|
+
multiline: { type: Boolean, default: !1 },
|
|
443
|
+
autoGrow: { type: Boolean, default: !1 },
|
|
444
|
+
counter: { type: Boolean }
|
|
445
|
+
},
|
|
446
|
+
emits: ["input", "change", "paste", "focus", "blur"],
|
|
447
|
+
setup(u, { emit: i }) {
|
|
448
|
+
const _ = u, t = i, a = w(null), m = () => {
|
|
449
|
+
if (_.autoGrow && a.value) {
|
|
450
|
+
a.value.style.height = "";
|
|
451
|
+
const n = Math.min(a.value.scrollHeight, _.maxHeight || a.value.scrollHeight);
|
|
452
|
+
a.value.style.height = `${n}px`;
|
|
453
|
+
}
|
|
454
|
+
}, o = (n) => {
|
|
455
|
+
t("input", n), m();
|
|
456
|
+
};
|
|
457
|
+
return D(() => {
|
|
458
|
+
m();
|
|
459
|
+
}), (n, r) => {
|
|
460
|
+
var y;
|
|
461
|
+
return s(), d("div", {
|
|
462
|
+
class: l(e(z).wrapper)
|
|
463
|
+
}, [
|
|
464
|
+
n.label ? (s(), d("label", {
|
|
465
|
+
key: 0,
|
|
466
|
+
class: l(e(z).wrapper__label),
|
|
467
|
+
for: n.id
|
|
468
|
+
}, v(n.label), 11, Ke)) : f("", !0),
|
|
469
|
+
n.multiline ? (s(), d("textarea", {
|
|
470
|
+
key: 1,
|
|
471
|
+
id: n.id,
|
|
472
|
+
ref_key: "textareaRef",
|
|
473
|
+
ref: a,
|
|
474
|
+
class: l([
|
|
475
|
+
e(z).wrapper__field,
|
|
476
|
+
{
|
|
477
|
+
[e(z)["wrapper--error"]]: n.error
|
|
478
|
+
}
|
|
479
|
+
]),
|
|
480
|
+
maxlength: n.maxLength,
|
|
481
|
+
name: n.name,
|
|
482
|
+
placeholder: n.placeholder,
|
|
483
|
+
style: G(n.maxHeight ? { maxHeight: `${n.maxHeight}px` } : void 0),
|
|
484
|
+
value: n.modelValue,
|
|
485
|
+
onBlur: r[0] || (r[0] = (c) => t("blur", c)),
|
|
486
|
+
onChange: r[1] || (r[1] = (c) => n.$emit("change", c)),
|
|
487
|
+
onFocus: r[2] || (r[2] = (c) => t("focus", c)),
|
|
488
|
+
onInput: o,
|
|
489
|
+
onPaste: r[3] || (r[3] = (c) => t("paste", c))
|
|
490
|
+
}, null, 46, et)) : (s(), d("input", {
|
|
491
|
+
key: 2,
|
|
492
|
+
id: n.id,
|
|
493
|
+
type: "text",
|
|
494
|
+
class: l([
|
|
495
|
+
e(z).wrapper__field,
|
|
496
|
+
{
|
|
497
|
+
[e(z)["wrapper--error"]]: n.error
|
|
498
|
+
}
|
|
499
|
+
]),
|
|
500
|
+
maxlength: n.maxLength,
|
|
501
|
+
name: n.name,
|
|
502
|
+
placeholder: n.placeholder,
|
|
503
|
+
value: n.modelValue,
|
|
504
|
+
onBlur: r[4] || (r[4] = (c) => t("blur", c)),
|
|
505
|
+
onChange: r[5] || (r[5] = (c) => n.$emit("change", c)),
|
|
506
|
+
onFocus: r[6] || (r[6] = (c) => t("focus", c)),
|
|
507
|
+
onInput: o,
|
|
508
|
+
onPaste: r[7] || (r[7] = (c) => t("paste", c))
|
|
509
|
+
}, null, 42, tt)),
|
|
510
|
+
k("div", {
|
|
511
|
+
class: l(e(z).wrapper__bottom)
|
|
512
|
+
}, [
|
|
513
|
+
n.error ? (s(), d("div", {
|
|
514
|
+
key: 0,
|
|
515
|
+
class: l(e(z).wrapper__errorMessage)
|
|
516
|
+
}, v(n.error), 3)) : f("", !0),
|
|
517
|
+
n.counter ? (s(), d("div", {
|
|
518
|
+
key: 1,
|
|
519
|
+
class: l(e(z).wrapper__counter)
|
|
520
|
+
}, v(((y = n.modelValue) == null ? void 0 : y.toString().length) || 0), 3)) : f("", !0)
|
|
521
|
+
], 2)
|
|
522
|
+
], 2);
|
|
523
|
+
};
|
|
524
|
+
}
|
|
525
|
+
});
|
|
526
|
+
export {
|
|
527
|
+
M as I,
|
|
528
|
+
Me as _,
|
|
529
|
+
ot as a,
|
|
530
|
+
rt as b,
|
|
531
|
+
_t as c,
|
|
532
|
+
at as d,
|
|
533
|
+
lt as e
|
|
534
|
+
};
|
|
535
|
+
//# sourceMappingURL=index-BfxawNec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-BfxawNec.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/icons/index.ts","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n variant: 'solid' | 'ghost' | 'text' | 'outline';\n color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n leftIconName?: IconNames;\n rightIconName?: IconNames;\n loadingStatus?: boolean;\n successStatus?: boolean;\n label?: string;\n disabled?: boolean;\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n fill: false,\n size: 'default',\n});\n\nconst emit = defineEmits<{\n click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n if (props.disabled) {\n return;\n }\n\n emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n if (props.loadingStatus) {\n return 'LoadingCircle';\n } else if (props.successStatus) {\n return 'LineCheck';\n }\n\n return props.leftIconName;\n});\n</script>\n\n<template>\n <button\n :class=\"[\n styles.button,\n styles[`button__${variant}`],\n styles[`button__${variant}-${color}`],\n styles[`button__size_${size}`],\n { [styles.fill]: fill },\n ]\"\n :disabled=\"props.disabled\"\n @click=\"onClick\">\n <Icon\n v-if=\"leftIcon\"\n :name=\"leftIcon\" />\n <span\n v-if=\"label\"\n :class=\"styles.button__label\">\n {{ label }}\n </span>\n <Icon\n v-if=\"rightIconName\"\n :name=\"rightIconName\" />\n </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n el.clickOutsideEvent = (event: Event) => {\n const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n return element && (element === event.target || element.contains(event.target as Node))\n });\n\n if (!isClickInside) {\n binding.value.handler(); // Close handler\n }\n };\n\n document.addEventListener('click', el.clickOutsideEvent);\n },\n unmounted(el: ClickOutsideElement) {\n if (el.clickOutsideEvent) {\n document.removeEventListener('click', el.clickOutsideEvent);\n }\n },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n let searchIndex = 0;\n for (const char of choiceValue) {\n if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n searchIndex++;\n }\n if (searchIndex === searchTerm.length) {\n return true;\n }\n }\n return false;\n};\n\n\nexport const fuzzySearch = <T>(\n choices: T[],\n key: keyof T,\n searchTerm: string,\n): T[] => {\n if (!searchTerm.trim()) {\n return choices;\n }\n\n const normalizedSearchTerm = searchTerm.toLowerCase();\n\n return choices\n .filter(choice => {\n const value = String(choice[key]);\n\n return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n })\n .sort((a, b) => {\n const aValue = String(a[key]).toLowerCase();\n const bValue = String(b[key]).toLowerCase();\n\n if (aValue === normalizedSearchTerm) return -1;\n if (bValue === normalizedSearchTerm) return 1;\n\n if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n return -1;\n if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n return 1;\n\n return aValue.length - bValue.length;\n });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n text: string;\n value: string;\n}\n\ninterface DropdownProps {\n id: string;\n label?: string;\n defaultSelected?: string;\n menuHeight?: number;\n placeholder?: string;\n addable?: boolean;\n addButtonText?: string;\n searchable?: boolean;\n searchPlaceHolder?: string;\n items: MenuItem[];\n validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n (e: 'add-error', error: string): void;\n (e: 'item-added', item: MenuItem): void;\n (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n menuHeight: 154,\n searchBar: false,\n addItem: false,\n defaultSelected: '',\n validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n if (!dropdownRef.value) {\n return;\n }\n\n const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n const viewportHeight = window.innerHeight;\n const bottom = top + dropdownRef.value.offsetHeight;\n const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n menuPosition.value = {\n x: left + window.scrollX,\n y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n width,\n shouldOpenUp,\n height: props.menuHeight,\n };\n};\n\nconst toggleMenu = () => {\n calculateMenuPosition();\n isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n errorMessage.value = null;\n searchQuery.value = '';\n filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n isOpen.value = false;\n\n resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n selectedItem.value = item;\n searchQuery.value = '';\n\n closeMenu();\n\n emit('select-item', item);\n};\n\nconst addItem = () => {\n const query = searchQuery.value.trim();\n const error = props.validateAddItem(query, allItems.value);\n\n if (error) {\n errorMessage.value = error;\n\n emit('add-error', error);\n\n return;\n }\n\n const newItem: MenuItem = {\n text: query,\n value: query,\n };\n\n allItems.value.push(newItem);\n resetSettings();\n\n emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n left: `${menuPosition.value.x}px`,\n width: `${menuPosition.value.width}px`,\n height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n calculateMenuPosition();\n\n if (props.defaultSelected) {\n const defaultItem = allItems.value.find(item => item.value === props.defaultSelected);\n\n if (defaultItem) {\n selectedItem.value = defaultItem;\n emit('select-item', defaultItem);\n }\n }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n <div\n ref=\"dropdownRef\"\n :class=\"styles.dropdown\">\n <label\n v-if=\"label\"\n :class=\"styles.dropdown__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <button\n :class=\"[\n styles.dropdown__valueContent, {\n [styles['dropdown__valueContent--open']]: isOpen,\n },\n ]\"\n @click=\"toggleMenu\">\n <span :class=\"styles.dropdown__value\">\n {{ selectedValue }}\n </span>\n <span\n v-if=\"placeholder && !selectedValue\"\n :class=\"styles.dropdown__placeholder\">\n {{ placeholder }}\n </span>\n <svg\n fill=\"none\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n :class=\"styles.dropdown__arrowIcon\">\n <path\n d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n fill=\"#91949F\" />\n </svg>\n </button>\n </div>\n\n <div\n v-if=\"isOpen\"\n ref=\"menuRef\"\n :class=\"styles.menu\"\n :style=\"menuStyle\"\n v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n @click.prevent>\n <div\n v-if=\"props.searchable\"\n :class=\"styles.menu__searchContainer\">\n <div :class=\"styles.menu__searchInputWrap\">\n <input\n type=\"text\"\n :class=\"[\n styles.menu__searchInput, {\n [styles['menu__searchInput--error']]: errorMessage,\n },\n ]\"\n :placeholder=\"searchPlaceHolder\"\n v-model=\"searchQuery\"\n @focus=\"onFocusSearch\"\n @input=\"onSearch\">\n <p\n v-if=\"errorMessage\"\n :class=\"styles.menu__errorMessage\">\n {{ errorMessage }}\n </p>\n </div>\n <button\n v-if=\"props.addable\"\n :class=\"styles.menu__addButton\"\n @click=\"addItem\">\n {{ addButtonText }}\n </button>\n </div>\n <ul :class=\"styles.menu__itemContainer\">\n <li\n v-for=\"(item) in filteredItems\"\n :key=\"item.value\"\n :class=\"[\n styles.menu__item, {\n [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n },\n ]\"\n @click=\"selectItem(item)\">\n {{ item.text }}\n </li>\n </ul>\n </div>\n</template>\n","import { defineAsyncComponent } from 'vue';\n\nconst iconMap = {\n FilledErrorBox: defineAsyncComponent(() => import('./FilledErrorBox.vue')),\n LineCheck: defineAsyncComponent(() => import('./LineCheck.vue')),\n FilledCheckCircle: defineAsyncComponent(() => import('./FilledCheckCircle.vue')),\n LoadingCircle: defineAsyncComponent(() => import('./LoadingCircle.vue')),\n FilledInfoCircle: defineAsyncComponent(() => import('./FilledInfoCircle.vue')),\n SmartIcon: defineAsyncComponent(() => import('./SmartIcon.vue')),\n FilledCautionTriangle: defineAsyncComponent(() => import('./FilledCautionTriangle.vue')),\n};\n\nexport default iconMap;\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport iconMap from '@/components/Icon/icons';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n name: IconNames;\n size?: 16 | 24;\n color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n <component\n :is=\"iconMap[name]\"\n class=\"icon\"\n :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n display: inline-block;\n line-height: 0;\n vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n variant?: 'default' | 'warning' | 'alert' | 'success';\n text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n switch (props.variant) {\n case 'alert': return 'FilledErrorBox';\n case 'warning': return 'FilledCautionTriangle';\n case 'success': return 'FilledCheckCircle';\n\n default: return 'FilledInfoCircle';\n }\n});\n</script>\n\n<template>\n <div\n :class=\"[\n styles.container,\n styles[`container__${variant}`],\n ]\">\n <Icon\n :name=\"IconName\"\n :size=\"24\" />\n <span :class=\"styles.container__text\">{{ text }}</span>\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n value: string;\n label: string;\n disabled?: boolean;\n icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n align?: 'vertical' | 'horizontal';\n disabled?: boolean;\n segments: SegmentType[];\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n size: 'default',\n align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n if (props.disabled || segment.disabled) {\n return;\n }\n\n selected.value = segment.value;\n\n emit('click', segment.value);\n};\n</script>\n\n<template>\n <div\n :class=\"[\n styles.segmentGroup,\n styles[`segmentGroup--${align}`],\n { [styles.fill]: fill },\n ]\">\n <button\n v-for=\"segment in segments\"\n :key=\"segment.value\"\n :class=\"[\n styles.button,\n styles[`button--${color}`],\n styles[`button__size_${size}`],\n styles.fill,\n {\n [styles[`button--selected`]]: segment.value === selected,\n },\n ]\"\n :disabled=\"segment.disabled || props.disabled\"\n @click=\"setSelect(segment)\">\n <Icon\n v-if=\"segment.icon\"\n :name=\"segment.icon\" />\n <span\n v-if=\"segment.label\"\n :class=\"styles.button__label\">\n {{ segment.label }}\n </span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n id: string;\n name: string;\n modelValue: string | number;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n maxHeight?: number;\n error?: string;\n multiline?: boolean;\n autoGrow?: boolean;\n counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n label: '',\n placeholder: '',\n maxLength: undefined,\n maxHeight: undefined,\n error: '',\n multiline: false,\n autoGrow: false,\n});\n\nconst emit = defineEmits<{\n input: [event: Event];\n change: [event: Event];\n paste: [event: ClipboardEvent];\n focus: [event: FocusEvent];\n blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n if (props.autoGrow && textareaRef.value) {\n textareaRef.value.style.height = '';\n\n const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n textareaRef.value.style.height = `${newHeight}px`;\n }\n};\n\nconst handleInput = (event: Event) => {\n emit('input', event);\n\n autoGrow();\n};\n\nonMounted(() => {\n autoGrow();\n});\n</script>\n\n<template>\n <div :class=\"styles.wrapper\">\n <label\n v-if=\"label\"\n :class=\"styles.wrapper__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <template v-if=\"multiline\">\n <textarea\n :id=\"id\"\n ref=\"textareaRef\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\" />\n </template>\n <template v-else>\n <input\n :id=\"id\"\n type=\"text\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\">\n </template>\n\n <div :class=\"styles.wrapper__bottom\">\n <div\n v-if=\"error\"\n :class=\"styles.wrapper__errorMessage\">\n {{ error }}\n </div>\n <div\n v-if=\"counter\"\n :class=\"styles.wrapper__counter\">\n {{ modelValue?.toString().length || 0 }}\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","textareaRef","autoGrow","newHeight","handleInput"],"mappings":"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"}
|