@lekseek/ui
Version:
Vue 3 components library
1,985 lines • 167 kB
JavaScript
import { reactive as lt, defineComponent as b, openBlock as o, createElementBlock as u, mergeProps as p, renderSlot as f, resolveComponent as I, createBlock as E, computed as L, toRefs as H, resolveDynamicComponent as ue, normalizeClass as a, withCtx as M, createCommentVNode as y, createElementVNode as m, createVNode as T, toDisplayString as C, createTextVNode as z, Transition as Ae, withKeys as de, nextTick as ae, resolveDirective as be, withModifiers as re, createSlots as $t, withDirectives as Z, Fragment as P, renderList as R, vModelCheckbox as yt, unref as h, ref as le, onMounted as bt, vModelText as vt, h as Te, vShow as Ye, normalizeStyle as Ct, watch as kt, isRef as ot, vModelRadio as St, inject as wt } from "vue";
function We(e, t, s) {
return `${e}${t ? `__${t}` : ""}${s ? `--${s}` : ""}`;
}
const Lt = {
asyncContent: {
errorText: "Something went wrong",
reloadText: "Try again"
},
autocomplete: {
noMatchingItems: "No matching items"
},
infiniteScroll: {
loadingText: "Loading...",
completeText: "That is all!",
errorText: "Loading data failed"
},
phoneInput: {
errorText: "Type valid phone number"
},
pagination: {
page: "Page",
total: "of"
},
select: {
placeholder: "Select",
search: "Search",
noMatchingItems: "No matching items"
},
image: {
downloadFailed: "Image download failed",
checkNetwork: "Check your network connection and try again",
downloadImage: "Download image"
},
fileUploader: {
selectFromDisk: "Select from disk",
dropAreaText: "Move the file here",
dropAreaTextWhenDragging: "Drop the file",
dropAreaTextWhenDisabled: "Area disabled",
title: "File add",
validationError: "Invalid file",
sizeError: "Invalid file size"
},
weekdays: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
timeline: {
noItems: "No items to show"
},
table: {
loading: "Loading",
noItems: "No items to show"
}
}, It = {
asyncContent: {
errorText: "Co\u015B posz\u0142o nie tak.",
reloadText: "Spr\xF3buj ponownie"
},
autocomplete: {
noMatchingItems: "Brak pasuj\u0105cych wynik\xF3w"
},
infiniteScroll: {
loadingText: "\u0141adowanie danych",
completeText: "To ju\u017C wszystko!",
errorText: "B\u0142\u0105d \u0142adowania danych"
},
phoneInput: {
errorText: "Podaj poprawny numer"
},
pagination: {
page: "Strona:",
total: "z"
},
select: {
placeholder: "Wybierz",
search: "Szukaj",
noMatchingItems: "Brak pasuj\u0105cych wynik\xF3w"
},
image: {
downloadFailed: "Nie uda\u0142o si\u0119 pobra\u0107 grafiki",
checkNetwork: "Sprawd\u017A, czy masz po\u0142\u0105czenie z Internetem i spr\xF3buj ponownie",
downloadImage: "Pobierz grafik\u0119"
},
fileUploader: {
selectFromDisk: "Wybierz z dysku",
dropAreaText: "Przeci\u0105gnij plik tutaj",
dropAreaTextWhenDragging: "Upu\u015B\u0107 plik",
dropAreaTextWhenDisabled: "Obszar nieaktywny",
title: "Dodawanie pliku",
validationError: "Plik jest nieprawid\u0142owy",
sizeError: "Nieprawid\u0142owy rozmiar pliku"
},
weekdays: [
"Poniedzia\u0142ek",
"Wtorek",
"\u015Aroda",
"Czwartek",
"Pi\u0105tek",
"Sobota",
"Niedziela"
],
months: [
"Stycze\u0144",
"Luty",
"Marzec",
"Kwiecie\u0144",
"Maj",
"Czerwiec",
"Lipiec",
"Sierpie\u0144",
"Wrzesie\u0144",
"Pa\u017Adziernik",
"Listopad",
"Grudzie\u0144"
],
timeline: {
noItems: "Brak element\xF3w do wy\u015Bwietlenia"
},
table: {
loading: "\u0141adowanie danych",
noItems: "Brak element\xF3w do wy\u015Bwietlenia"
}
}, Bt = {
asyncContent: {
errorText: "\u0412\u0438\u043D\u0438\u043A\u043B\u0430 \u043F\u043E\u043C\u0438\u043B\u043A\u0430.",
reloadText: "\u0421\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0449\u0435 \u0440\u0430\u0437"
},
autocomplete: {
noMatchingItems: "\u041D\u0435\u043C\u0430\u0454 \u0432\u0456\u0434\u043F\u043E\u0432\u0456\u0434\u043D\u0438\u0445 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0456\u0432"
},
infiniteScroll: {
loadingText: "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u0430\u043D\u0438\u0445",
completeText: "\u0426\u0435 \u0432\u0441\u0435!",
errorText: "\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u043F\u0440\u0438 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u0456 \u0434\u0430\u043D\u0438\u0445"
},
phoneInput: {
errorText: "\u0412\u0432\u0435\u0434\u0456\u0442\u044C \u0434\u0456\u0439\u0441\u043D\u0438\u0439 \u043D\u043E\u043C\u0435\u0440"
},
pagination: {
page: "\u0421\u0442\u043E\u0440\u0456\u043D\u043A\u0430:",
total: "\u0437"
},
select: {
placeholder: "\u0412\u0438\u0431\u0440\u0430\u0442\u0438",
search: "\u041F\u043E\u0448\u0443\u043A",
noMatchingItems: "\u041D\u0435\u043C\u0430\u0454 \u0432\u0456\u0434\u043F\u043E\u0432\u0456\u0434\u043D\u0438\u0445 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0456\u0432"
},
image: {
downloadFailed: "\u041D\u0435 \u0432\u0434\u0430\u043B\u043E\u0441\u044F \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u043D\u044F",
checkNetwork: "\u041F\u0435\u0440\u0435\u0432\u0456\u0440\u0442\u0435, \u0447\u0438 \u043F\u0456\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u043E \u0432\u0438 \u0434\u043E \u0406\u043D\u0442\u0435\u0440\u043D\u0435\u0442\u0443, \u0456 \u043F\u043E\u0432\u0442\u043E\u0440\u0456\u0442\u044C \u0441\u043F\u0440\u043E\u0431\u0443",
downloadImage: "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0438\u0442\u0438 \u0456\u043B\u044E\u0441\u0442\u0440\u0430\u0446\u0456\u044E"
},
fileUploader: {
selectFromDisk: "\u0412\u0438\u0431\u0435\u0440\u0430\u0442\u0438 \u0437 \u0434\u0438\u0441\u043A\u0430",
dropAreaText: "\u041F\u0435\u0440\u0435\u0442\u044F\u0433\u043D\u0456\u0442\u044C \u0444\u0430\u0439\u043B \u0441\u044E\u0434\u0438",
dropAreaTextWhenDragging: "\u0421\u043A\u0438\u043D\u044C\u0442\u0435 \u0444\u0430\u0439\u043B",
dropAreaTextWhenDisabled: "\u041D\u0435\u0430\u043A\u0442\u0438\u0432\u043D\u0430 \u0437\u043E\u043D\u0430",
title: "\u0414\u043E\u0434\u0430\u0432\u0430\u043D\u043D\u044F \u0444\u0430\u0439\u043B\u0443",
validationError: "\u0424\u0430\u0439\u043B \u043D\u0435\u0434\u0456\u0439\u0441\u043D\u0438\u0439",
sizeError: "\u043D\u0435\u0434\u0456\u0439\u0441\u043D\u0438\u0439 \u0440\u043E\u0437\u043C\u0456\u0440 \u0444\u0430\u0439\u043B\u0443"
},
weekdays: [
"\u041F\u043E\u043D\u0435\u0434\u0456\u043B\u043E\u043A",
"\u0412\u0456\u0432\u0442\u043E\u0440\u043E\u043A",
"\u0421\u0435\u0440\u0435\u0434\u0430",
"\u0427\u0435\u0442\u0432\u0435\u0440",
"\u041F'\u044F\u0442\u043D\u0438\u0446\u044F",
"\u0421\u0443\u0431\u043E\u0442\u0430",
"\u041D\u0435\u0434\u0456\u043B\u044F"
],
months: [
"\u0421\u0456\u0447\u0435\u043D\u044C",
"\u041B\u044E\u0442\u0438\u0439",
"\u0411\u0435\u0440\u0435\u0437\u0435\u043D\u044C",
"\u041A\u0432\u0456\u0442\u0435\u043D\u044C",
"\u041C\u0430\u0439",
"\u0427\u0435\u0440\u0432\u0435\u043D\u044C",
"\u041B\u0438\u043F\u0435\u043D\u044C",
"\u0421\u0435\u0440\u043F\u0435\u043D\u044C",
"\u0412\u0435\u0440\u0435\u0441\u0435\u043D\u044C",
"\u0416\u043E\u0432\u0442\u0435\u043D\u044C",
"\u041B\u0438\u0441\u0442\u043E\u043F\u0430\u0434",
"\u0413\u0440\u0443\u0434\u0435\u043D\u044C"
],
timeline: {
noItems: "\u041D\u0435\u043C\u0430\u0454 \u0435\u043B\u0435\u043C\u0435\u043D\u0442\u0456\u0432 \u0434\u043B\u044F \u0432\u0456\u0434\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u043D\u044F"
},
table: {
loading: "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u0434\u0430\u043D\u0438\u0445",
noItems: "\u041D\u0435\u043C\u0430\u0454 \u0435\u043B\u0435\u043C\u0435\u043D\u0442\u0456\u0432 \u0434\u043B\u044F \u0432\u0456\u0434\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u043D\u044F"
}
};
var Ee = /* @__PURE__ */ ((e) => (e.PL = "pl", e.EN = "en", e.UK = "uk", e))(Ee || {});
const Tt = {
locale: Ee.PL,
locales: {
[Ee.PL]: It,
[Ee.EN]: Lt,
[Ee.UK]: Bt
},
t() {
return this.locales[this.locale];
}
}, Et = {
icons: {
prefix: "fa-",
type: "fa",
values: {
error: "exclamation-triangle",
spinner: "spinner",
check: "check",
previous: "chevron-left",
next: "chevron-right",
expand: "chevron-down",
collapse: "chevron-up",
file: "file-import",
close: "times",
hamburger: "bars"
}
}
}, Nt = {
test: {
elAttrName: "data-test",
elNamePrefix: ""
},
testElName(e) {
return {
[this.test.elAttrName]: `${this.test.elNamePrefix}${e}`
};
}
}, _e = {
bem: {
hyphenate: !0
},
...Nt,
...Tt,
...Et
}, Xe = Symbol("ui");
function Dt(e, t = {}) {
const s = t.bem || _e.bem;
e.mixin({
name: "BemMixin",
methods: {
$bem({ b: n, e: d, m: r }) {
const i = (D) => D.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), c = this.$options.name, k = n || s.hyphenate ? i(c) : c, $ = r ? typeof r == "string" ? [r] : Array.isArray(r) ? r : Object.keys(r).filter((D) => r[D]) : [], v = We(k, d), N = $.map((D) => We(k, d, D));
return [
v,
...N
];
}
}
});
const l = lt({
..._e,
...t
});
e.config.globalProperties.$ui = l, e.provide(Xe, l);
}
const At = b({
name: "LsIcon",
props: {
name: {
type: String,
default: ""
},
prefix: {
type: String,
default: ""
},
type: {
type: String,
default: ""
},
size: {
type: String,
default: null
},
rotate: {
type: String,
default: null
},
flip: {
type: String,
default: null
},
pulse: {
type: Boolean,
default: !1
},
spin: {
type: Boolean,
default: !1
}
},
computed: {
computedPrefix() {
return this.prefix || this.$ui.icons.prefix;
},
computedType() {
return this.type || this.$ui.icons.type;
},
classes() {
let e = [];
return e = [
`${this.computedPrefix}${this.name}`,
this.computedType
], [
...this.$bem({
m: {
[`size-${this.size}`]: !!this.size,
[`rotate-${this.rotate}`]: !!this.rotate,
[`flip-${this.flip}`]: !!this.flip,
pulse: this.pulse,
spin: this.spin
}
}),
...e
];
}
}
});
const S = (e, t) => {
const s = e.__vccOpts || e;
for (const [l, n] of t)
s[l] = n;
return s;
};
function Mt(e, t, s, l, n, d) {
return o(), u("i", p({ class: e.classes }, e.$ui.testElName("icon")), [
f(e.$slots, "default")
], 16);
}
const Y = /* @__PURE__ */ S(At, [["render", Mt]]), Pt = b({
name: "LsSpinner",
components: {
LsIcon: Y
},
props: {
size: {
type: String,
default: "3x"
}
}
});
function Ft(e, t, s, l, n, d) {
const r = I("LsIcon");
return o(), E(r, p({
name: e.$ui.icons.values.spinner,
spin: "",
size: e.size
}, e.$ui.testElName("spinner")), null, 16, ["name", "size"]);
}
const qe = /* @__PURE__ */ S(Pt, [["render", Ft]]), ve = (e, t) => t ? `has-${e}-${t}` : null, je = (e) => ve("color", e), oe = (e) => ve("bg-color", e), zt = (e) => ve("hover-color", e), nt = (e) => ve("hover-bg-color", e), it = (e) => ve("border-color", e), Vt = (e) => ve("gradient", e), at = "is-elevated", Je = "is-hoverable", Q = {
bordered: {
type: Boolean,
default: !1
}
};
function te(e) {
return L(() => ({
"is-bordered": e.value
}));
}
const me = {
elevated: {
type: Boolean,
default: !1
}
};
function Me(e) {
return L(() => ({
"is-elevated": e.value
}));
}
const Ze = {
depressed: {
type: Boolean,
default: !1
}
};
function rt(e) {
return L(() => ({
"is-depressed": e.value
}));
}
const U = {
rounded: {
type: Boolean,
default: !1
},
roundedLg: {
type: Boolean,
default: !1
},
round: {
type: Boolean,
default: !1
}
};
function _(e, t, s) {
return L(() => ({
"is-rounded": e.value,
"is-rounded-lg": t.value,
"is-round": (s == null ? void 0 : s.value) || !1
}));
}
const G = {
dark: {
type: Boolean,
default: !1
},
light: {
type: Boolean,
default: !1
}
};
function x(e, t) {
return L(() => ({
"is-dark": e.value,
"is-light": t.value
}));
}
const ut = {
to: {
type: [
Object,
String
],
default: null
},
href: {
type: String,
default: null
},
newWindow: {
type: Boolean,
default: !1
}
};
function dt(e, t, s) {
return {
component: L(() => e.value ? "RouterLink" : t.value ? "a" : "span"),
target: L(() => s.value ? "_blank" : "_self")
};
}
const Pe = {
error: {
type: Boolean,
default: !1
}
};
function ct(e) {
return {
validationBorderClass: L(() => ({
"is-bordered": e.value,
"has-border-color-error": e.value
}))
};
}
const Rt = {
padding: {
type: String,
default: null
}
};
function Ot(e) {
return L(() => ({
[`has-padding-${e.value}`]: e.value
}));
}
const Ce = {
size: {
type: String,
default: "md"
}
}, Ht = b({
name: "LsButton",
components: {
LsSpinner: qe,
LsIcon: Y
},
props: {
color: {
type: String,
default: "default"
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
leftIcon: {
type: String,
default: null
},
rightIcon: {
type: String,
default: null
},
title: {
type: String,
default: null
},
block: {
type: Boolean,
default: !1
},
plain: {
type: Boolean,
default: !1
},
hoverable: {
type: Boolean,
default: !1
},
uppercase: {
type: Boolean,
default: !1
},
gradient: {
type: String,
default: null
},
theme: {
type: String,
default: null
},
...G,
...Q,
...U,
...ut,
...me,
...Ce
},
setup(e) {
const {
dark: t,
light: s,
bordered: l,
rounded: n,
roundedLg: d,
round: r,
to: i,
href: c,
newWindow: k,
elevated: $
} = H(e), {
component: v,
target: N
} = dt(i, c, k);
return {
themeClass: x(t, s),
borderedClass: te(l),
roundedClass: _(n, d, r),
elevatedClass: Me($),
component: v,
target: N
};
},
data() {
return {
isFocused: !1
};
},
computed: {
classes() {
let e = [];
return this.color && this.color !== "default" && (this.plain ? e = [
je(this.color),
zt(`${this.color}-darken-1`)
] : e = [
oe(this.color),
nt(`${this.color}-darken-1`)
]), [
...e,
...this.$bem({
m: {
[this.size]: !0,
disabled: this.disabled || this.loading,
block: this.block,
[`gradient-${this.gradient}`]: !!this.gradient,
uppercase: this.uppercase,
[`theme-${this.theme}`]: !!this.theme
}
}),
{
[Je]: this.hoverable
},
this.themeClass,
this.borderedClass,
this.roundedClass,
this.elevatedClass
];
}
}
});
const Wt = ["title", "disabled"];
function qt(e, t, s, l, n, d) {
var c;
const r = I("LsIcon"), i = I("LsSpinner");
return o(), u("button", p({
title: (c = e.title) != null ? c : void 0,
class: e.classes,
type: "button",
disabled: e.disabled || e.loading
}, e.$ui.testElName("button")), [
(o(), E(ue(e.component), {
to: e.to,
href: e.href,
target: e.target,
rel: e.newWindow ? "noopener" : "",
class: a(e.$bem({ e: "container", m: { "with-icons": !!e.leftIcon || !!e.rightIcon } }))
}, {
default: M(() => [
f(e.$slots, "container", {}, () => [
e.leftIcon ? (o(), E(r, {
key: 0,
name: e.leftIcon,
class: a(e.$bem({ e: "icon" }))
}, null, 8, ["name", "class"])) : y("", !0),
m("span", {
class: a(e.$bem({ e: "content" }))
}, [
f(e.$slots, "default"),
e.loading ? (o(), E(i, {
key: 0,
color: e.dark ? "white" : "default",
class: a(e.$bem({ e: "loader" })),
size: "1x"
}, null, 8, ["color", "class"])) : y("", !0)
], 2),
e.rightIcon ? (o(), E(r, {
key: 1,
name: e.rightIcon,
class: a(e.$bem({ e: "icon" }))
}, null, 8, ["name", "class"])) : y("", !0)
])
]),
_: 3
}, 8, ["to", "href", "target", "rel", "class"]))
], 16, Wt);
}
const ye = /* @__PURE__ */ S(Ht, [["render", qt]]), jt = b({
name: "LsAsyncContent",
components: {
LsSpinner: qe,
LsIcon: Y,
LsButton: ye
},
props: {
loading: {
type: Boolean,
required: !0
},
spinnerSize: {
type: String,
default: "2x"
},
loadingText: {
type: String,
default: ""
},
error: {
type: Boolean,
default: !1
},
errorText: {
type: String,
default: ""
},
reloadable: {
type: Boolean,
default: !1
},
reloadText: {
type: String,
default: ""
}
},
emits: ["reload"],
computed: {
computedErrorText() {
return this.errorText || this.$ui.t().asyncContent.errorText;
},
computedReloadText() {
return this.reloadText || this.$ui.t().asyncContent.reloadText;
}
},
methods: {
reload() {
this.$emit("reload");
}
}
});
const Ut = { key: 0 };
function Kt(e, t, s, l, n, d) {
const r = I("LsSpinner"), i = I("LsIcon"), c = I("LsButton");
return o(), u("div", p({
class: e.$bem({})
}, e.$ui.testElName("async-content")), [
e.loading ? (o(), u("div", {
key: 0,
class: a(e.$bem({ e: "loading-wrapper" }))
}, [
f(e.$slots, "loader", {}, () => [
T(r, {
class: a(e.$bem({ e: "loader" })),
size: e.spinnerSize
}, null, 8, ["class", "size"])
]),
m("p", {
class: a(e.$bem({ e: "loading-text" }))
}, C(e.loadingText), 3)
], 2)) : e.error ? (o(), u("div", {
key: 1,
class: a(e.$bem({ e: "error-wrapper" }))
}, [
T(i, {
class: a(e.$bem({ e: "error-icon" })),
size: "3x",
name: e.$ui.icons.values.error
}, null, 8, ["class", "name"]),
m("p", {
class: a(e.$bem({ e: "error-text" }))
}, C(e.computedErrorText), 3),
e.reloadable ? (o(), E(c, p({
key: 0,
color: "primary",
rounded: "",
dark: "",
class: e.$bem({ e: "reload-button" })
}, e.$ui.testElName("async-content-reload"), { onClick: e.reload }), {
default: M(() => [
z(C(e.computedReloadText), 1)
]),
_: 1
}, 16, ["class", "onClick"])) : y("", !0)
], 2)) : y("", !0),
T(Ae, { name: "slide" }, {
default: M(() => [
!e.loading && !e.error ? (o(), u("div", Ut, [
f(e.$slots, "default")
])) : y("", !0)
]),
_: 3
})
], 16);
}
const Gt = /* @__PURE__ */ S(jt, [["render", Kt]]), Xt = b({
name: "LsInput",
components: {
LsIcon: Y
},
props: {
modelValue: {
type: [
String,
Number
],
default: null
},
placeholder: {
type: String,
default: null
},
type: {
type: String,
default: "text"
},
required: {
type: Boolean,
default: !1
},
min: {
type: Number,
default: null
},
max: {
type: Number,
default: null
},
maxlength: {
type: Number,
default: null
},
step: {
type: Number,
default: 1
},
label: {
type: String,
default: null
},
width: {
type: Number,
default: null
},
leftIcon: {
type: String,
default: null
},
rightIcon: {
type: String,
default: null
},
leftIconClickable: {
type: Boolean,
default: !1
},
rightIconClickable: {
type: Boolean,
default: !1
},
leftIconColor: {
type: String,
default: null
},
rightIconColor: {
type: String,
default: null
},
rememberCaretPosition: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
autofocus: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
...G,
...Q,
...U,
...Pe,
...Ze,
...Ce
},
emits: [
"update:modelValue",
"enter",
"focus",
"blur",
"click-left-icon",
"click-right-icon",
"click",
"mouseenter",
"mouseleave",
"input"
],
setup(e) {
const {
dark: t,
light: s,
bordered: l,
rounded: n,
roundedLg: d,
round: r,
error: i,
depressed: c
} = H(e), {
validationBorderClass: k
} = ct(i);
return {
themeClass: x(t, s),
borderedClass: te(l),
roundedClass: _(n, d, r),
depressedClass: rt(c),
validationBorderClass: k
};
},
data() {
return {
isFocused: !1
};
},
computed: {
widthStyle() {
return this.width ? { width: `${this.width}px` } : {};
},
styles() {
return {
...this.widthStyle
};
},
classes() {
return [
...this.$bem({
m: {
[this.size]: !0,
light: this.light,
dark: this.dark,
disabled: this.disabled,
round: this.round,
rounded: this.rounded,
"rounded-lg": this.roundedLg
}
}),
{
[at]: this.isFocused
},
this.borderedClass,
this.validationBorderClass,
this.roundedClass,
this.depressedClass
];
}
},
methods: {
setFocusStatus(e) {
this.isFocused = e;
},
onFocus() {
this.setFocusStatus(!0), this.$emit("focus");
},
onBlur(e) {
this.setFocusStatus(!1), this.$emit("blur", e);
},
onInput(e) {
const t = e.target.value;
this.$emit("update:modelValue", t), this.$emit("input", t);
},
enter(e) {
const t = e.target.value;
this.$emit("enter", t);
},
onLeftIconClick() {
this.leftIconClickable && this.$emit("click-left-icon");
},
onRightIconClick() {
this.rightIconClickable && this.$emit("click-right-icon");
},
focus() {
this.$refs.input.focus();
}
}
});
const Yt = ["autofocus", "type", "min", "max", "maxlength", "required", "step", "value", "readonly", "placeholder", "disabled"];
function Jt(e, t, s, l, n, d) {
var i, c, k;
const r = I("LsIcon");
return o(), u("span", p({
class: e.classes,
style: e.styles
}, e.$ui.testElName("input")), [
f(e.$slots, "before"),
e.leftIcon ? (o(), u("div", p({
key: 0,
class: [...e.$bem({ e: "icon", m: { clickable: e.leftIconClickable, round: e.round } }), e.roundedClass]
}, e.$ui.testElName("input-icon-left"), {
onClick: t[0] || (t[0] = (...$) => e.onLeftIconClick && e.onLeftIconClick(...$))
}), [
T(r, {
name: e.leftIcon,
color: e.leftIconColor
}, null, 8, ["name", "color"])
], 16)) : y("", !0),
m("span", {
class: a(e.$bem({
e: "content",
m: {
disabled: e.disabled,
["left-padding"]: !e.leftIcon,
["right-padding"]: !e.rightIcon
}
}))
}, [
e.label && (e.modelValue || e.placeholder) ? (o(), u("span", {
key: 0,
class: a(e.$bem({ e: "label" }))
}, C(e.label), 3)) : y("", !0),
f(e.$slots, "before-text"),
m("input", p({
ref: "input",
autofocus: e.autofocus,
type: e.type,
min: (i = e.min) != null ? i : void 0,
max: (c = e.max) != null ? c : void 0,
maxlength: (k = e.maxlength) != null ? k : void 0,
required: e.required,
step: e.step,
value: e.modelValue || void 0,
readonly: e.readonly,
placeholder: e.placeholder || e.label || void 0,
class: e.$bem({ e: "input", m: { "with-label": !!e.label && (!!e.modelValue || !!e.placeholder) } }),
disabled: e.disabled,
"data-test": "field"
}, e.$ui.testElName("input-field"), {
onInput: t[1] || (t[1] = (...$) => e.onInput && e.onInput(...$)),
onFocus: t[2] || (t[2] = (...$) => e.onFocus && e.onFocus(...$)),
onBlur: t[3] || (t[3] = (...$) => e.onBlur && e.onBlur(...$)),
onKeydown: t[4] || (t[4] = de((...$) => e.enter && e.enter(...$), ["enter"])),
onClick: t[5] || (t[5] = ($) => e.$emit("click")),
onMouseenter: t[6] || (t[6] = ($) => e.$emit("mouseenter")),
onMouseleave: t[7] || (t[7] = ($) => e.$emit("mouseleave"))
}), null, 16, Yt),
f(e.$slots, "after-text")
], 2),
e.rightIcon ? (o(), u("div", p({
key: 1,
class: [...e.$bem({ e: "icon", m: { clickable: e.rightIconClickable, round: e.round } }), e.roundedClass]
}, e.$ui.testElName("input-icon-right"), {
onClick: t[8] || (t[8] = (...$) => e.onRightIconClick && e.onRightIconClick(...$))
}), [
T(r, {
name: e.rightIcon,
color: e.rightIconColor
}, null, 8, ["name", "color"])
], 16)) : y("", !0),
f(e.$slots, "after")
], 16);
}
const ce = /* @__PURE__ */ S(Xt, [["render", Jt]]), Zt = b({
name: "LsTextarea",
components: {
LsIcon: Y
},
props: {
modelValue: {
type: [
String,
Number
],
default: null
},
placeholder: {
type: String,
default: null
},
type: {
type: String,
default: "text"
},
required: {
type: Boolean,
default: !1
},
maxlength: {
type: Number,
default: null
},
rows: {
type: Number,
default: null
},
label: {
type: String,
default: null
},
leftIcon: {
type: String,
default: null
},
rightIcon: {
type: String,
default: null
},
leftIconClickable: {
type: Boolean,
default: !1
},
rightIconClickable: {
type: Boolean,
default: !1
},
leftIconColor: {
type: String,
default: null
},
rightIconColor: {
type: String,
default: null
},
width: {
type: Number,
default: null
},
disabled: {
type: Boolean,
default: !1
},
autofocus: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
...G,
...Q,
...U,
...Pe,
...Ze,
...Ce
},
emits: [
"enter",
"focus",
"blur",
"update:modelValue",
"click-left-icon",
"click-right-icon",
"enter-no-shift",
"enter-shift",
"input"
],
setup(e) {
const {
dark: t,
light: s,
bordered: l,
rounded: n,
roundedLg: d,
round: r,
error: i,
depressed: c
} = H(e), {
validationBorderClass: k
} = ct(i);
return {
themeClass: x(t, s),
borderedClass: te(l),
roundedClass: _(n, d, r),
depressedClass: rt(c),
validationBorderClass: k
};
},
data() {
return {
isFocused: !1
};
},
computed: {
widthStyle() {
return this.width ? { width: `${this.width}px` } : {};
},
styles() {
return {
...this.widthStyle
};
},
classes() {
return [
...this.$bem({
m: {
[this.size]: !0,
light: this.light,
dark: this.dark,
disabled: this.disabled,
rounded: this.rounded,
"rounded-lg": this.roundedLg,
round: this.round
}
}),
{
[at]: this.isFocused
},
this.borderedClass,
this.validationBorderClass,
this.roundedClass,
this.depressedClass
];
}
},
methods: {
setFocusStatus(e) {
this.isFocused = e;
},
onFocus() {
this.setFocusStatus(!0), this.$emit("focus");
},
onBlur() {
this.setFocusStatus(!1), this.$emit("blur");
},
input(e) {
const t = e.target.value;
this.$emit("update:modelValue", t), this.$emit("input", t);
},
onLeftIconClick() {
this.leftIconClickable && this.$emit("click-left-icon");
},
onRightIconClick() {
this.rightIconClickable && this.$emit("click-right-icon");
},
enter(e) {
const t = e.target.value;
e.shiftKey ? this.$emit("enter-shift", e) : this.$emit("enter-no-shift", e), this.$emit("enter", t);
},
focus() {
this.$refs.textarea.focus();
}
}
});
const Qt = ["readonly", "autofocus", "rows", "required", "value", "placeholder", "maxlength", "disabled"];
function _t(e, t, s, l, n, d) {
var i;
const r = I("LsIcon");
return o(), u("span", p({
class: e.classes,
style: e.styles
}, e.$ui.testElName("textarea")), [
f(e.$slots, "before"),
e.leftIcon ? (o(), u("div", p({
key: 0,
class: ["is-hoverable", [...e.$bem({ e: "icon", m: { clickable: e.leftIconClickable, round: e.round } }), e.roundedClass]]
}, e.$ui.testElName("textarea-icon-left"), {
onClick: t[0] || (t[0] = (...c) => e.onLeftIconClick && e.onLeftIconClick(...c))
}), [
T(r, {
name: e.leftIcon,
color: e.leftIconColor
}, null, 8, ["name", "color"])
], 16)) : y("", !0),
m("span", {
class: a(e.$bem({
e: "content",
m: {
disabled: e.disabled,
["left-padding"]: !e.leftIcon,
["right-padding"]: !e.rightIcon
}
}))
}, [
e.label && (e.modelValue || e.placeholder) ? (o(), u("span", {
key: 0,
class: a(e.$bem({ e: "label" }))
}, C(e.label), 3)) : y("", !0),
f(e.$slots, "before-text"),
m("textarea", p({
ref: "textarea",
readonly: e.readonly,
autofocus: e.autofocus,
rows: e.rows,
required: e.required,
value: e.modelValue || void 0,
placeholder: e.placeholder || e.label || void 0,
maxlength: (i = e.maxlength) != null ? i : void 0,
class: e.$bem({ e: "textarea", m: { "with-label": !!e.label && (!!e.modelValue || !!e.placeholder) } }),
"data-test": "field",
disabled: e.disabled
}, e.$ui.testElName("textarea-field"), {
onInput: t[1] || (t[1] = (...c) => e.input && e.input(...c)),
onFocus: t[2] || (t[2] = (...c) => e.onFocus && e.onFocus(...c)),
onBlur: t[3] || (t[3] = (...c) => e.onBlur && e.onBlur(...c)),
onKeydown: t[4] || (t[4] = de((...c) => e.enter && e.enter(...c), ["enter"]))
}), null, 16, Qt),
f(e.$slots, "after-text")
], 2),
e.rightIcon ? (o(), u("div", p({
key: 1,
class: ["is-hoverable", [...e.$bem({ e: "icon", m: { clickable: e.rightIconClickable, round: e.round } }), e.roundedClass]]
}, e.$ui.testElName("textarea-icon-right"), {
onClick: t[5] || (t[5] = (...c) => e.onRightIconClick && e.onRightIconClick(...c))
}), [
T(r, {
name: e.rightIcon,
color: e.rightIconColor
}, null, 8, ["name", "color"])
], 16)) : y("", !0),
f(e.$slots, "after")
], 16);
}
const xe = /* @__PURE__ */ S(Zt, [["render", _t]]), xt = b({
name: "LsBadge",
props: {
color: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
size: {
type: String,
default: "md"
},
...G,
...Q,
...me,
...U
},
emits: ["click"],
setup(e) {
const {
dark: t,
light: s,
bordered: l,
rounded: n,
roundedLg: d,
elevated: r
} = H(e);
return {
themeClass: x(t, s),
borderedClass: te(l),
elevatedClass: Me(r),
roundedClass: _(n, d)
};
},
computed: {
classes() {
return [
...this.color ? [
oe(this.color),
je("white")
] : [],
...this.$bem({
m: {
[this.size]: !0,
disabled: this.disabled,
round: this.round
}
}),
this.themeClass,
this.borderedClass,
this.elevatedClass,
this.roundedClass
];
}
}
});
const es = ["disabled"];
function ts(e, t, s, l, n, d) {
return o(), u("span", p({
disabled: e.disabled,
class: e.classes
}, e.$ui.testElName("badge")), [
f(e.$slots, "default")
], 16, es);
}
const mt = /* @__PURE__ */ S(xt, [["render", ts]]), ss = b({
name: "LsIconButton",
components: {
LsButton: ye,
LsIcon: Y
},
props: {
icon: {
type: String,
default: ""
},
iconType: {
type: String,
default: void 0
},
iconPrefix: {
type: String,
default: void 0
},
disabled: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "default"
},
title: {
type: String,
default: null
},
loading: {
type: Boolean,
default: !1
},
plain: {
type: Boolean,
default: !1
},
hoverable: {
type: Boolean,
default: !1
},
gradient: {
type: String,
default: null
},
theme: {
type: String,
default: null
},
...Q,
...G,
...U,
...Ce
},
computed: {
classes() {
const e = [this.size];
return this.$bem({
m: e
});
}
}
});
function ls(e, t, s, l, n, d) {
const r = I("LsIcon"), i = I("LsButton");
return o(), E(i, p({
class: e.classes,
bordered: e.bordered,
light: e.light,
dark: e.dark,
rounded: e.rounded,
"rounded-lg": e.roundedLg,
round: e.round,
color: e.color,
disabled: e.disabled,
size: e.size,
title: e.title,
loading: e.loading,
plain: e.plain,
hoverable: e.hoverable,
gradient: e.gradient,
theme: e.theme
}, e.$ui.testElName("icon-button")), {
container: M(() => [
e.loading ? y("", !0) : (o(), E(r, {
key: 0,
name: e.icon,
type: e.iconType,
prefix: e.iconPrefix
}, null, 8, ["name", "type", "prefix"])),
f(e.$slots, "default")
]),
_: 3
}, 16, ["class", "bordered", "light", "dark", "rounded", "rounded-lg", "round", "color", "disabled", "size", "title", "loading", "plain", "hoverable", "gradient", "theme"]);
}
const ne = /* @__PURE__ */ S(ss, [["render", ls]]), De = "__v-click-outside", os = typeof window < "u", ns = typeof navigator < "u", is = os && ("ontouchstart" in window || ns && navigator.msMaxTouchPoints > 0), as = is ? ["touchstart"] : ["click"];
function rs(e) {
const t = typeof e == "function";
if (!t && typeof e != "object")
throw new Error(
"v-click-outside: Binding value must be a function or an object"
);
return {
handler: t ? e : e.handler,
middleware: e.middleware || ((s) => s),
events: e.events || as,
isActive: e.isActive !== !1
};
}
function us({ el: e, event: t, handler: s, middleware: l }) {
const n = t.path || t.composedPath && t.composedPath();
(n ? n.indexOf(e) < 0 : !e.contains(t.target)) && l(t) && s(t);
}
function pt(e, { value: t }) {
const { events: s, handler: l, middleware: n, isActive: d } = rs(
t
);
!d || (e[De] = s.map((r) => ({
event: r,
handler: (i) => us({ event: i, el: e, handler: l, middleware: n })
})), e[De].forEach(
({ event: r, handler: i }) => setTimeout(() => {
!e[De] || document.documentElement.addEventListener(r, i, !1);
}, 0)
));
}
function ht(e) {
(e[De] || []).forEach(
({ event: s, handler: l }) => document.documentElement.removeEventListener(s, l, !1)
), delete e[De];
}
function ds(e, { value: t, oldValue: s }) {
JSON.stringify(t) !== JSON.stringify(s) && (ht(e), pt(e, { value: t }));
}
const ke = {
beforeMount: pt,
updated: ds,
unmounted: ht
}, cs = b({
name: "LsAutocomplete",
components: {
LsInput: ce,
LsTextarea: xe,
LsAsyncContent: Gt,
LsBadge: mt,
LsIconButton: ne
},
directives: {
ClickOutside: ke
},
props: {
modelValue: {
type: [
Object,
Array
],
default: null
},
items: {
type: Array,
required: !0
},
placeholder: {
type: String,
default: null
},
type: {
type: String,
default: "text"
},
required: {
type: Boolean,
default: !1
},
min: {
type: Number,
default: null
},
max: {
type: Number,
default: null
},
maxlength: {
type: Number,
default: null
},
step: {
type: Number,
default: 1
},
label: {
type: String,
default: null
},
width: {
type: Number,
default: null
},
leftIcon: {
type: String,
default: null
},
leftIconClickable: {
type: Boolean,
default: !1
},
leftIconColor: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
maxHeight: {
type: Number,
default: 320
},
listPosition: {
type: String,
default: "bottom",
validator: (e) => [
"top",
"bottom"
].includes(e)
},
itemsLoading: {
type: Boolean,
default: !1
},
itemsError: {
type: Boolean,
default: !1
},
itemsReloadable: {
type: Boolean,
default: !1
},
textarea: {
type: Boolean,
default: !1
},
rows: {
type: Number,
default: null
},
noMatchingItemsText: {
type: String,
default: ""
},
external: {
type: Boolean,
default: !1
},
searchDelay: {
type: Number,
default: 0
},
multiple: {
type: Boolean,
default: !1
},
...G,
...Q,
...U,
...Pe,
...Ze,
...Ce
},
emits: [
"update:modelValue",
"enter",
"focus",
"blur",
"click-left-icon",
"click-right-icon",
"select",
"update",
"reload",
"search"
],
setup(e) {
const {
dark: t,
light: s,
bordered: l,
rounded: n,
roundedLg: d
} = H(e);
return {
themeClass: x(t, s),
borderedClass: te(l),
roundedClass: _(n, d)
};
},
data() {
return {
isFocused: !1,
isExpanded: !1,
listClicked: !1,
activeItemKey: null,
searchText: "",
searchTimeout: null
};
},
computed: {
selectedItems() {
return Array.isArray(this.modelValue) ? this.modelValue : this.modelValue ? [this.modelValue] : [];
},
selectedItem() {
return Array.isArray(this.modelValue) ? null : this.modelValue;
},
computedNoMatchingItemsText() {
return this.noMatchingItemsText || this.$ui.t().autocomplete.noMatchingItems;
},
component() {
return this.textarea ? xe : ce;
},
filteredItems() {
const e = this.external ? this.items : this.items.filter((t) => {
var s;
return !this.searchText || ((s = t.text) == null ? void 0 : s.toLowerCase().includes(this.searchText.toLowerCase() || "")) || t.header || t.divider;
});
return e.filter((t, s) => {
var d;
const l = (t.header || t.divider) && !t.key, n = !((d = e[s + 1]) == null ? void 0 : d.key);
return !(l && n);
});
},
inputClasses() {
return [
...this.$bem({
e: "input",
m: {
expanded: this.isExpanded
}
})
];
},
itemsClasses() {
return [
...this.$bem({
e: "items",
m: {
"theme-default": !this.light && !this.dark,
[this.listPosition]: !0,
rounded: this.rounded,
"rounded-lg": this.roundedLg,
round: this.round
}
}),
this.themeClass
];
}
},
methods: {
isItemSelected(e) {
return !!e && this.selectedItems.map((t) => t.key).includes(e);
},
onKeydown(e) {
e.code === "Tab" && this.closeList();
},
scrollToActiveItem() {
if (this.activeItemKey) {
const e = this.$refs.list, t = e.offsetHeight, s = e.scrollTop, l = e.querySelectorAll(`[data-item-key="${this.activeItemKey}"]`)[0], n = l.offsetTop, d = l.offsetHeight;
n < s ? e.scrollTo({
top: n
}) : n + d > t + s && e.scrollTo({
top: n - t + d
});
}
},
goToPrevious() {
this.focus(), ae(() => {
const e = this.filteredItems.filter((l) => !!l.key && !l.disabled);
let t = e.length;
this.activeItemKey && (t = e.findIndex((l) => l.key === this.activeItemKey));
const s = e[t - 1];
s && (this.activeItemKey = s.key || null, this.scrollToActiveItem());
});
},
goToNext() {
this.focus(), ae(() => {
const e = this.filteredItems.filter((l) => !!l.key && !l.disabled);
let t = -1;
this.activeItemKey && (t = e.findIndex((l) => l.key === this.activeItemKey));
const s = e[t + 1];
s && (this.activeItemKey = s.key || null, this.scrollToActiveItem());
});
},
update(e) {
this.$emit("update:modelValue", e), this.$emit("update", e);
},
removeItemFromSelected(e) {
const t = this.selectedItems.filter((s) => s.key !== e.key);
this.update(t);
},
handleItemClick(e) {
if (this.multiple)
if (this.isItemSelected(e.key))
this.removeItemFromSelected(e);
else {
const t = [
...this.selectedItems,
e
];
this.update(t);
}
else
(!this.isItemSelected(e.key) || Array.isArray(this.modelValue)) && (this.$emit("select", e), this.update(e)), this.isFocused = !1, this.isExpanded = !1, this.listClicked = !1;
this.activeItemKey = null;
},
selectActiveItem() {
if (this.activeItemKey) {
const e = this.items.find((t) => t.key === this.activeItemKey);
e && this.handleItemClick(e);
}
},
handleInputEnter() {
this.isExpanded ? this.selectActiveItem() : this.focus();
},
closeList() {
this.isFocused = !1, this.isExpanded = !1, this.listClicked = !1, this.activeItemKey = null;
},
itemClasses(e) {
return [
...this.$bem({
e: "item",
m: {
disabled: e.disabled === !0,
active: e.key === this.activeItemKey,
selected: this.isItemSelected(e.key)
}
}),
Je
];
},
cleanSelection() {
this.update(null);
},
reload() {
this.$emit("reload");
},
search(e) {
this.$emit("search", e);
},
handleInput(e) {
this.searchText = e, this.searchDelay ? (clearTimeout(this.searchTimeout), this.searchTimeout = setTimeout(() => {
this.search(e);
}, this.searchDelay)) : this.search(e);
},
expand() {
this.searchText = "", this.isExpanded = !0;
},
focus() {
this.$emit("focus"), this.isFocused = !0, this.expand();
},
clickOutsideHandler(e) {
this.$refs.input.$el.contains(e.target) || this.closeList();
},
blur(e) {
this.$emit("blur", e);
},
enter(e) {
this.$emit("enter", {
key: null,
text: e
});
}
}
});
const ms = ["data-item-key"], ps = ["onClick"];
function hs(e, t, s, l, n, d) {
const r = I("LsIconButton"), i = I("LsBadge"), c = I("LsAsyncContent"), k = be("click-outside");
return o(), u("div", p({
class: e.$bem({})
}, e.$ui.testElName("autocomplete")), [
(o(), E(ue(e.component), p({
ref: "input",
readonly: !e.isExpanded,
"model-value": e.isExpanded ? e.searchText : !e.multiple && e.selectedItem ? e.selectedItem.text : "",
placeholder: e.placeholder,
type: e.type,
required: e.required,
min: e.min,
max: e.max,
maxlength: e.maxlength,
step: e.step,
label: e.label,
width: e.width,
rows: e.rows,
"left-icon": e.leftIcon,
"left-icon-clickable": e.leftIconClickable,
"left-icon-color": e.leftIconColor,
"right-icon": e.selectedItem && e.selectedItem.key ? e.$ui.icons.values.close : null,
"right-icon-clickable": "",
disabled: e.disabled,
bordered: e.bordered,
dark: e.dark,
light: e.light,
rounded: e.rounded,
"rounded-lg": e.roundedLg,
round: e.round,
error: e.error,
class: e.inputClasses,
depressed: e.depressed,
size: e.size
}, e.$ui.testElName("autocomplete-input"), {
onEnter: e.enter,
onFocus: e.focus,
onClick: e.expand,
onBlur: e.blur,
onInput: e.handleInput,
onClickLeftIcon: t[1] || (t[1] = ($) => e.$emit("click-left-icon")),
onClickRightIcon: e.cleanSelection,
onKeydown: [
de(e.goToPrevious, ["up"]),
de(e.goToNext, ["down"]),
de(re(e.handleInputEnter, ["prevent", "stop"]), ["enter"]),
de(e.closeList, ["esc"]),
e.onKeydown
]
}), $t({
after: M(() => [
e.isExpanded ? (o(), E(Ae, {
key: 0,
name: "slide-top"
}, {
default: M(() => [
Z((o(), u("div", p({
ref: "list",
class: e.itemsClasses,
style: { maxHeight: `${e.maxHeight}px` }
}, e.$ui.testElName("autocomplete-list"), {
onClick: t[0] || (t[0] = re(($) => e.listClicked = !0, ["stop"]))
}), [
T(c, {
loading: e.itemsLoading,
error: e.itemsError,
reloadable: e.itemsReloadable,
onReload: e.reload
}, {
default: M(() => [
e.filteredItems.length === 0 ? (o(), u("div", {
key: 0,
class: a(e.$bem({ e: "no-items-text" }))
}, C(e.computedNoMatchingItemsText), 3)) : (o(!0), u(P, { key: 1 }, R(e.filteredItems, ($, v) => (o(), u("div", {
key: v,
"data-item-key": $.key
}, [
$.header ? (o(), u("div", {
key: 0,
class: a(e.$bem({ e: "item-header" }))
}, C($.header), 3)) : y("", !0),
$.key ? (o(), u("div", p({
key: 1,
class: e.itemClasses($)
}, e.$ui.testElName("autocomplete-list-item"), {
onClick: (N) => e.handleItemClick($)
}), [
f(e.$slots, "item", {
id: $.key,
text: $.text,
metadata: $.metadata,
isActive: e.isItemSelected($.key)
}, () => [
z(C($.text), 1)
])
], 16, ps)) : y("", !0),
$.divider ? (o(), u("div", {
key: 2,
class: a(e.$bem({ e: "item-divider" }))
}, null, 2)) : y("", !0)
], 8, ms))), 128))
]),
_: 3
}, 8, ["loading", "error", "reloadable", "onReload"])
], 16)), [
[k, e.clickOutsideHandler]
])
]),
_: 3
})) : y("", !0)
]),
_: 2
}, [
e.multiple ? {
name: "before-text",
fn: M(() => [
m("div", {
class: a(e.$bem({ e: "selected-items" }))
}, [
(o(!0), u(P, null, R(e.selectedItems, ($, v) => (o(), E(i, {
key: v,
class: a(e.$bem({ e: "selected-item-badge" })),
color: "primary",
round: ""
}, {
default: M(() => [
f(e.$slots, "selected-item", {
id: $.key,
text: $.text,
metadata: $.metadata
}, () => [
m("div", {
class: a(e.$bem({ e: "selected-item-badge-text" }))
}, C($.text), 3)
]),
T(r, {
icon: e.$ui.icons.values.close,
size: "sm",
round: "",
color: "primary",
class: a(e.$bem({ e: "selected-item-remove" })),
onClick: (N) => e.removeItemFromSelected($)
}, null, 8, ["icon", "class", "onClick"])
]),
_: 2
}, 1032, ["class"]))), 128))
], 2)
])
} : void 0
]), 1040, ["readonly", "model-value", "placeholder", "type", "req