UNPKG

@lekseek/ui

Version:

Vue 3 components library

1,727 lines (1,726 loc) 223 kB
import { reactive as Qt, computed as T, defineComponent as V, openBlock as d, createElementBlock as h, mergeProps as S, unref as n, renderSlot as w, resolveComponent as ke, createBlock as x, toRefs as $e, resolveDynamicComponent as We, normalizeClass as c, withCtx as de, createCommentVNode as M, createElementVNode as $, createVNode as ee, toDisplayString as F, createTextVNode as re, Transition as Ct, withKeys as Ke, ref as le, resolveDirective as lt, withModifiers as Ve, createSlots as Ts, withDirectives as Te, Fragment as ae, renderList as ge, nextTick as He, useSlots as Is, onMounted as At, normalizeStyle as xt, isRef as kt, vModelCheckbox as Ns, vModelText as As, h as rt, vShow as Mt, onBeforeUnmount as Ms, watch as Rs, vModelRadio as Os, inject as _s } from "vue"; const ct = "__v-click-outside", Ds = typeof window < "u", Ps = typeof navigator < "u", zs = Ds && ("ontouchstart" in window || Ps && navigator.msMaxTouchPoints > 0), Fs = zs ? ["touchstart"] : ["click"], Vs = (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 || Fs, isActive: e.isActive !== !1 }; }, Hs = ({ el: e, event: t, handler: s, middleware: l }) => { const o = t.path || t.composedPath && t.composedPath(); (o ? o.indexOf(e) < 0 : !e.contains(t.target)) && l(t) && s(t); }, es = (e, { value: t }) => { const { events: s, handler: l, middleware: o, isActive: r } = Vs(t); !r || (e[ct] = s.map((a) => ({ event: a, handler: (i) => Hs({ event: i, el: e, handler: l, middleware: o }) })), e[ct].forEach( ({ event: a, handler: i }) => setTimeout(() => { !e[ct] || document.documentElement.addEventListener(a, i, !1); }, 0) )); }, ts = (e) => { (e[ct] || []).forEach( ({ event: s, handler: l }) => document.documentElement.removeEventListener(s, l, !1) ), delete e[ct]; }, Us = (e, { value: t, oldValue: s }) => { JSON.stringify(t) !== JSON.stringify(s) && (ts(e), es(e, { value: t })); }, ot = { beforeMount: es, updated: Us, unmounted: ts }; function yt(e, t, s) { return `${e}${t ? `__${t}` : ""}${s ? `--${s}` : ""}`; } const Ws = { 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" } }, Gs = { 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" } }, js = { 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 ut = /* @__PURE__ */ ((e) => (e.PL = "pl", e.EN = "en", e.UK = "uk", e))(ut || {}); const Be = { left: "left", right: "right", top: "top", bottom: "bottom" }, qs = { locale: ut.PL, locales: { [ut.PL]: Gs, [ut.EN]: Ws, [ut.UK]: js }, t() { return this.locales[this.locale]; } }, Ks = { icons: { prefix: "fa-", type: "fa", values: { edit: "edit", 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" } } }, Xs = { test: { elAttrName: "data-test", elNamePrefix: "" }, testElName(e) { return { [this.test.elAttrName]: `${this.test.elNamePrefix}${e}` }; } }, Ys = { chartColors: { red: "#e02020", green: "#95c11e", gray: "#717171" } }, Vt = { bem: { hyphenate: !0 }, ...Xs, ...qs, ...Ks, ...Ys }, Nt = Symbol("ui"); function Zs(e, t = {}) { const s = t.bem || Vt.bem; e.mixin({ name: "BemMixin", methods: { $bem({ b: o, e: r, m: a }) { const i = (b) => b.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), u = this.$options.name, E = o || s.hyphenate ? i(u) : u, f = a ? typeof a == "string" ? [a] : Array.isArray(a) ? a : Object.keys(a).filter((b) => a[b]) : [], C = yt(E, r), k = f.map((b) => yt(E, r, b)); return [ C, ...k ]; } } }); const l = Qt({ ...Vt, ...t }); e.config.globalProperties.$ui = l, e.provide(Nt, l); } function pe(e, t = !0) { function s({ b: l, e: o, m: r }) { const a = (k) => k.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), i = e, u = l || t ? a(i) : i, E = r ? typeof r == "string" ? [r] : Array.isArray(r) ? r : Object.keys(r).filter((k) => r[k]) : [], f = yt(u, o), C = E.map((k) => yt(u, o, k)); return [ f, ...C ]; } return s; } const at = (e, t) => t ? `has-${e}-${t}` : null, Et = (e) => at("color", e), Re = (e) => at("bg-color", e), Js = (e) => at("hover-color", e), ss = (e) => at("hover-bg-color", e), ns = (e) => at("border-color", e), Qs = (e) => at("gradient", e), ls = "is-elevated", Rt = "is-hoverable", Ye = { bordered: { type: Boolean, default: !1 } }; function _e(e) { return T(() => ({ "is-bordered": e.value })); } const St = { elevated: { type: Boolean, default: !1 } }; function pt(e) { return T(() => ({ "is-elevated": e.value })); } const os = { depressed: { type: Boolean, default: !1 } }; function as(e) { return T(() => ({ "is-depressed": e.value })); } const Ge = { rounded: { type: Boolean, default: !1 }, roundedLg: { type: Boolean, default: !1 }, round: { type: Boolean, default: !1 } }; function Ie(e, t, s) { return T(() => ({ "is-rounded": e.value, "is-rounded-lg": t.value, "is-round": (s == null ? void 0 : s.value) || !1 })); } const je = { dark: { type: Boolean, default: !1 }, light: { type: Boolean, default: !1 } }; function Ne(e, t) { return T(() => ({ "is-dark": e.value, "is-light": t.value })); } const xs = { to: { type: [ Object, String ], default: null }, href: { type: String, default: null }, newWindow: { type: Boolean, default: !1 } }; function is(e, t, s) { return { component: T(() => e.value ? "RouterLink" : t.value ? "a" : "span"), target: T(() => s.value ? "_blank" : "_self") }; } const Ot = { error: { type: Boolean, default: !1 } }; function rs(e) { return { validationBorderClass: T(() => ({ "is-bordered": e.value, "has-border-color-error": e.value })) }; } const en = { padding: { type: String, default: null } }; function tn(e) { return T(() => ({ [`has-padding-${e.value}`]: e.value })); } const _t = { size: { type: String, default: "md" } }, sn = { name: "LsIcon" }, Ee = /* @__PURE__ */ V({ ...sn, props: { name: { default: "" }, prefix: { default: "" }, type: { default: "" }, size: { default: null }, rotate: { default: null }, flip: { default: null }, pulse: { type: Boolean, default: !1 }, spin: { type: Boolean, default: !1 } }, setup(e) { const t = e, s = pe("ls-icon"), l = Le(), o = T(() => t.prefix || l.icons.prefix), r = T(() => t.type || l.icons.type), a = T(() => { let i = []; return i = [ `${o.value}${t.name}`, r.value ], [ ...s({ m: { [`size-${t.size}`]: !!t.size, [`rotate-${t.rotate}`]: !!t.rotate, [`flip-${t.flip}`]: !!t.flip, pulse: t.pulse, spin: t.spin } }), ...i ]; }); return (i, u) => (d(), h("i", S({ class: n(a) }, n(l).testElName("icon")), [ w(i.$slots, "default") ], 16)); } }); const nn = V({ name: "LsSpinner", components: { LsIcon: Ee }, props: { size: { type: String, default: "3x" } } }), ie = (e, t) => { const s = e.__vccOpts || e; for (const [l, o] of t) s[l] = o; return s; }; function ln(e, t, s, l, o, r) { const a = ke("LsIcon"); return d(), x(a, S({ name: e.$ui.icons.values.spinner, spin: "", size: e.size }, e.$ui.testElName("spinner")), null, 16, ["name", "size"]); } const wt = /* @__PURE__ */ ie(nn, [["render", ln]]), on = ["title", "disabled"], an = { name: "LsButton" }, Ue = /* @__PURE__ */ V({ ...an, props: { color: { default: "default" }, disabled: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, leftIcon: { default: null }, rightIcon: { default: null }, title: { default: null }, block: { type: Boolean, default: !1 }, plain: { type: Boolean, default: !1 }, hoverable: { type: Boolean, default: !1 }, uppercase: { type: Boolean, default: !1 }, gradient: { default: null }, theme: { default: null }, dark: { type: Boolean, default: !1 }, light: { type: Boolean, default: !1 }, bordered: { type: Boolean, default: !1 }, elevated: { type: Boolean, default: !1 }, rounded: { type: Boolean, default: !1 }, roundedLg: { type: Boolean, default: !1 }, round: { type: Boolean, default: !1 }, to: { default: null }, href: { default: null }, newWindow: { type: Boolean, default: !1 }, size: { default: "md" } }, setup(e) { const t = e, { dark: s, light: l, bordered: o, rounded: r, roundedLg: a, round: i, to: u, href: E, newWindow: f, elevated: C } = $e(t), { component: k, target: b } = is(u, E, f), O = pe("ls-button"), Q = Le(), X = Ne(s, l), W = _e(o), K = Ie(r, a, i), p = pt(C), L = T(() => { let v = []; const g = t.color && t.color !== "default" ? t.color : null; if (g) { const N = `${g}-darken-1`; v = t.plain ? [ Et(g), Js(N) ] : [ Re(g), ss(N) ]; } return [ ...v, ...O({ m: { [t.size]: !0, disabled: t.disabled || t.loading, block: t.block, [`gradient-${t.gradient}`]: !!t.gradient, uppercase: t.uppercase, [`theme-${t.theme}`]: !!t.theme } }), { [Rt]: t.hoverable }, X.value, W.value, K.value, p.value ]; }); return (v, g) => { var N; return d(), h("button", S({ title: (N = e.title) != null ? N : void 0, class: n(L), type: "button", disabled: e.disabled || e.loading }, n(Q).testElName("button")), [ (d(), x(We(n(k)), { to: n(u), href: n(E), target: n(b), rel: n(f) ? "noopener" : "", class: c(n(O)({ e: "container", m: { "with-icons": !!e.leftIcon || !!e.rightIcon } })) }, { default: de(() => [ w(v.$slots, "container", {}, () => [ e.leftIcon ? (d(), x(n(Ee), { key: 0, name: e.leftIcon, class: c(n(O)({ e: "icon" })) }, null, 8, ["name", "class"])) : M("", !0), $("span", { class: c(n(O)({ e: "content" })) }, [ w(v.$slots, "default"), e.loading ? (d(), x(n(wt), { key: 0, color: n(s) ? "white" : "default", class: c(n(O)({ e: "loader" })), size: "1x" }, null, 8, ["color", "class"])) : M("", !0) ], 2), e.rightIcon ? (d(), x(n(Ee), { key: 1, name: e.rightIcon, class: c(n(O)({ e: "icon" })) }, null, 8, ["name", "class"])) : M("", !0) ]) ]), _: 3 }, 8, ["to", "href", "target", "rel", "class"])) ], 16, on); }; } }); const rn = { key: 0 }, un = { name: "LsAsyncContent" }, dn = /* @__PURE__ */ V({ ...un, props: { loading: { type: Boolean, default: !0 }, spinnerSize: { default: "2x" }, loadingText: { default: "" }, error: { type: Boolean, default: !1 }, errorText: { default: "" }, reloadable: { type: Boolean, default: !1 }, reloadText: { default: "" } }, emits: ["reload"], setup(e, { emit: t }) { const s = e, l = pe("ls-async-content"), o = Le(), r = T(() => s.errorText || o.t().asyncContent.errorText), a = T(() => s.reloadText || o.t().asyncContent.reloadText), i = () => t("reload"); return (u, E) => (d(), h("div", S({ class: n(l)({}) }, n(o).testElName("async-content")), [ e.loading ? (d(), h("div", { key: 0, class: c(n(l)({ e: "loading-wrapper" })) }, [ w(u.$slots, "loader", {}, () => [ ee(n(wt), { class: c(n(l)({ e: "loader" })), size: e.spinnerSize }, null, 8, ["class", "size"]) ]), $("p", { class: c(n(l)({ e: "loading-text" })) }, F(e.loadingText), 3) ], 2)) : e.error ? (d(), h("div", { key: 1, class: c(n(l)({ e: "error-wrapper" })) }, [ ee(n(Ee), { class: c(n(l)({ e: "error-icon" })), size: "3x", name: n(o).icons.values.error }, null, 8, ["class", "name"]), $("p", { class: c(n(l)({ e: "error-text" })) }, F(n(r)), 3), e.reloadable ? (d(), x(n(Ue), S({ key: 0, color: "primary", rounded: "", dark: "", class: n(l)({ e: "reload-button" }) }, n(o).testElName("async-content-reload"), { onClick: i }), { default: de(() => [ re(F(n(a)), 1) ]), _: 1 }, 16, ["class"])) : M("", !0) ], 2)) : M("", !0), ee(Ct, { name: "slide" }, { default: de(() => [ !e.loading && !e.error ? (d(), h("div", rn, [ w(u.$slots, "default") ])) : M("", !0) ]), _: 3 }) ], 16)); } }); const cn = V({ name: "LsInput", components: { LsIcon: Ee }, 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 }, ...je, ...Ye, ...Ge, ...Ot, ...os, ..._t }, 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: o, roundedLg: r, round: a, error: i, depressed: u } = $e(e), { validationBorderClass: E } = rs(i); return { themeClass: Ne(t, s), borderedClass: _e(l), roundedClass: Ie(o, r, a), depressedClass: as(u), validationBorderClass: E }; }, 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 } }), { [ls]: 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 fn = ["autofocus", "type", "min", "max", "maxlength", "required", "step", "value", "readonly", "placeholder", "disabled"]; function hn(e, t, s, l, o, r) { var i, u, E; const a = ke("LsIcon"); return d(), h("span", S({ class: e.classes, style: e.styles }, e.$ui.testElName("input")), [ w(e.$slots, "before"), e.leftIcon ? (d(), h("div", S({ 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] = (...f) => e.onLeftIconClick && e.onLeftIconClick(...f)) }), [ ee(a, { name: e.leftIcon, color: e.leftIconColor }, null, 8, ["name", "color"]) ], 16)) : M("", !0), $("span", { class: c(e.$bem({ e: "content", m: { disabled: e.disabled, ["left-padding"]: !e.leftIcon, ["right-padding"]: !e.rightIcon } })) }, [ e.label && (e.modelValue || e.placeholder) ? (d(), h("span", { key: 0, class: c(e.$bem({ e: "label" })) }, F(e.label), 3)) : M("", !0), w(e.$slots, "before-text"), $("input", S({ ref: "input", autofocus: e.autofocus, type: e.type, min: (i = e.min) != null ? i : void 0, max: (u = e.max) != null ? u : void 0, maxlength: (E = e.maxlength) != null ? E : 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] = (...f) => e.onInput && e.onInput(...f)), onFocus: t[2] || (t[2] = (...f) => e.onFocus && e.onFocus(...f)), onBlur: t[3] || (t[3] = (...f) => e.onBlur && e.onBlur(...f)), onKeydown: t[4] || (t[4] = Ke((...f) => e.enter && e.enter(...f), ["enter"])), onClick: t[5] || (t[5] = (f) => e.$emit("click")), onMouseenter: t[6] || (t[6] = (f) => e.$emit("mouseenter")), onMouseleave: t[7] || (t[7] = (f) => e.$emit("mouseleave")) }), null, 16, fn), w(e.$slots, "after-text") ], 2), e.rightIcon ? (d(), h("div", S({ 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] = (...f) => e.onRightIconClick && e.onRightIconClick(...f)) }), [ ee(a, { name: e.rightIcon, color: e.rightIconColor }, null, 8, ["name", "color"]) ], 16)) : M("", !0), w(e.$slots, "after") ], 16); } const st = /* @__PURE__ */ ie(cn, [["render", hn]]), pn = V({ name: "LsTextarea", components: { LsIcon: Ee }, 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 }, ...je, ...Ye, ...Ge, ...Ot, ...os, ..._t }, 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: o, roundedLg: r, round: a, error: i, depressed: u } = $e(e), { validationBorderClass: E } = rs(i); return { themeClass: Ne(t, s), borderedClass: _e(l), roundedClass: Ie(o, r, a), depressedClass: as(u), validationBorderClass: E }; }, 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 } }), { [ls]: 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 mn = ["readonly", "autofocus", "rows", "required", "value", "placeholder", "maxlength", "disabled"]; function gn(e, t, s, l, o, r) { var i; const a = ke("LsIcon"); return d(), h("span", S({ class: e.classes, style: e.styles }, e.$ui.testElName("textarea")), [ w(e.$slots, "before"), e.leftIcon ? (d(), h("div", S({ 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] = (...u) => e.onLeftIconClick && e.onLeftIconClick(...u)) }), [ ee(a, { name: e.leftIcon, color: e.leftIconColor }, null, 8, ["name", "color"]) ], 16)) : M("", !0), $("span", { class: c(e.$bem({ e: "content", m: { disabled: e.disabled, ["left-padding"]: !e.leftIcon, ["right-padding"]: !e.rightIcon } })) }, [ e.label && (e.modelValue || e.placeholder) ? (d(), h("span", { key: 0, class: c(e.$bem({ e: "label" })) }, F(e.label), 3)) : M("", !0), w(e.$slots, "before-text"), $("textarea", S({ 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] = (...u) => e.input && e.input(...u)), onFocus: t[2] || (t[2] = (...u) => e.onFocus && e.onFocus(...u)), onBlur: t[3] || (t[3] = (...u) => e.onBlur && e.onBlur(...u)), onKeydown: t[4] || (t[4] = Ke((...u) => e.enter && e.enter(...u), ["enter"])) }), null, 16, mn), w(e.$slots, "after-text") ], 2), e.rightIcon ? (d(), h("div", S({ 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] = (...u) => e.onRightIconClick && e.onRightIconClick(...u)) }), [ ee(a, { name: e.rightIcon, color: e.rightIconColor }, null, 8, ["name", "color"]) ], 16)) : M("", !0), w(e.$slots, "after") ], 16); } const bn = /* @__PURE__ */ ie(pn, [["render", gn]]), vn = ["disabled"], yn = { name: "LsBadge" }, us = /* @__PURE__ */ V({ ...yn, props: { color: { default: null }, disabled: { type: Boolean, default: !1 }, size: { default: "md" }, dark: { type: Boolean, default: !1 }, light: { type: Boolean, default: !1 }, bordered: { type: Boolean, default: !1 }, elevated: { type: Boolean, default: !1 }, rounded: { type: Boolean, default: !1 }, roundedLg: { type: Boolean, default: !1 }, round: { type: Boolean, default: !1 } }, emits: ["click"], setup(e, { emit: t }) { const s = e, { dark: l, light: o, bordered: r, elevated: a, rounded: i, roundedLg: u } = $e(s), E = pe("ls-badge"), f = Le(), C = Ne(l, o), k = _e(r), b = Ie(i, u), O = pt(a), Q = T(() => [ ...s.color ? [ Re(s.color), Et("white") ] : [], ...E({ m: { [s.size]: !0, disabled: s.disabled, round: s.round } }), C.value, k.value, O.value, b.value ]); return (X, W) => (d(), h("span", S({ disabled: e.disabled, class: n(Q) }, n(f).testElName("badge")), [ w(X.$slots, "default") ], 16, vn)); } }); const $n = { name: "LsIconButton" }, Oe = /* @__PURE__ */ V({ ...$n, props: { icon: { default: "" }, iconType: { default: void 0 }, iconPrefix: { default: void 0 }, disabled: { type: Boolean, default: !1 }, color: { default: "default" }, title: { default: null }, loading: { type: Boolean, default: !1 }, plain: { type: Boolean, default: !1 }, hoverable: { type: Boolean, default: !1 }, gradient: { default: null }, theme: { default: null }, bordered: { type: Boolean, default: !1 }, dark: { type: Boolean, default: !1 }, light: { type: Boolean, default: !1 }, rounded: { type: Boolean, default: !1 }, roundedLg: { type: Boolean, default: !1 }, round: { type: Boolean, default: !1 }, size: { default: "md" } }, setup(e) { const t = e, s = pe("ls-icon-button"), l = T(() => { const o = [t.size]; return s({ m: o }); }); return (o, r) => (d(), x(n(Ue), S({ class: n(l), 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 }, o.$ui.testElName("icon-button")), { container: de(() => [ e.loading ? M("", !0) : (d(), x(n(Ee), { key: 0, name: e.icon, type: e.iconType, prefix: e.iconPrefix }, null, 8, ["name", "type", "prefix"])), w(o.$slots, "default") ]), _: 3 }, 16, ["class", "bordered", "light", "dark", "rounded", "rounded-lg", "round", "color", "disabled", "size", "title", "loading", "plain", "hoverable", "gradient", "theme"])); } }); const Cn = ["data-item-key"], kn = ["onClick"], En = { name: "LsAutocomplete" }, _a = /* @__PURE__ */ V({ ...En, props: { modelValue: { default: null }, items: null, placeholder: { default: null }, type: { default: "text" }, required: { type: Boolean, default: !1 }, min: { default: null }, max: { default: null }, maxlength: { default: null }, step: { default: 1 }, label: { default: null }, width: { default: null }, leftIcon: { default: null }, leftIconClickable: { type: Boolean, default: !1 }, leftIconColor: { default: null }, disabled: { type: Boolean, default: !1 }, maxHeight: { default: 320 }, listPosition: { default: "bottom" }, itemsLoading: { type: Boolean, default: !1 }, itemsError: { type: Boolean, default: !1 }, itemsReloadable: { type: Boolean, default: !1 }, textarea: { type: Boolean, default: !1 }, rows: { default: null }, noMatchingItemsText: { default: "" }, external: { type: Boolean, default: !1 }, searchDelay: { default: 0 }, multiple: { type: Boolean, default: !1 }, clearable: { type: Boolean, default: !0 }, dark: { type: Boolean, default: !1 }, light: { type: Boolean, default: !1 }, bordered: { type: Boolean, default: !1 }, rounded: { type: Boolean, default: !1 }, roundedLg: { type: Boolean, default: !1 }, round: { type: Boolean, default: !1 }, error: { type: Boolean, default: !1 }, depressed: { type: Boolean, default: !1 }, size: { default: "md" } }, emits: ["update:model-value", "enter", "focus", "blur", "click-left-icon", "click-right-icon", "select", "update", "reload", "search"], setup(e, { emit: t }) { const s = e, l = pe("ls-autocomplete"), o = Le(), { dark: r, light: a, bordered: i, rounded: u, roundedLg: E } = $e(s), f = le(!1), C = le(!1), k = le(!1), b = le(null), O = le(""), Q = le(null), X = le(null), W = le(null), K = Ne(r, a); _e(i), Ie(u, E); const p = T(() => Array.isArray(s.modelValue) ? s.modelValue : s.modelValue ? [s.modelValue] : []), L = T(() => Array.isArray(s.modelValue) ? null : s.modelValue), v = T(() => s.noMatchingItemsText || o.t().autocomplete.noMatchingItems), g = T(() => s.textarea ? bn : st), N = T(() => { const z = s.external ? s.items : s.items.filter((ne) => { var ve; return !O.value || ((ve = ne.text) == null ? void 0 : ve.toLowerCase().includes(O.value.toLowerCase() || "")) || ne.header || ne.divider; }); return z.filter((ne, ve) => { var Ce; const Z = (ne.header || ne.divider) && !ne.key, Me = !((Ce = z[ve + 1]) == null ? void 0 : Ce.key); return !(Z && Me); }); }), R = T(() => [ ...l({ e: "input", m: { expanded: C.value } }) ]), _ = T(() => [ ...l({ e: "items", m: { "theme-default": !a.value && !r.value, [s.listPosition]: !0, rounded: u.value, "rounded-lg": E.value, round: s.round } }), K.value ]), H = (z) => !!z && p.value.map((ne) => ne.key).includes(z), G = (z) => { z.code === "Tab" && j(); }, Y = () => { var z, ne, ve, Z, Me, Ce, mt; if (b.value) { const Je = (ne = (z = X.value) == null ? void 0 : z.offsetHeight) != null ? ne : 0, q = (Z = (ve = X.value) == null ? void 0 : ve.scrollTop) != null ? Z : 0, it = (Me = X.value) == null ? void 0 : Me.querySelectorAll(`[data-item-key="${b.value}"]`)[0], ye = it.offsetTop, fe = it.offsetHeight; ye < q ? (Ce = X.value) == null || Ce.scrollTo({ top: ye }) : ye + fe > Je + q && ((mt = X.value) == null || mt.scrollTo({ top: ye - Je + fe })); } }, ce = () => { we(), He(() => { const z = N.value.filter((Z) => !!Z.key && !Z.disabled); let ne = z.length; b.value && (ne = z.findIndex((Z) => Z.key === b.value)); const ve = z[ne - 1]; ve && (b.value = ve.key || null, Y()); }); }, oe = () => { we(), He(() => { const z = N.value.filter((Z) => !!Z.key && !Z.disabled); let ne = -1; b.value && (ne = z.findIndex((Z) => Z.key === b.value)); const ve = z[ne + 1]; ve && (b.value = ve.key || null, Y()); }); }, he = (z) => { t("update:model-value", z), t("update", z); }, be = (z) => { const ne = p.value.filter((ve) => ve.key !== z.key); he(ne); }, m = (z) => { if (s.multiple) if (H(z.key)) be(z); else { const ne = [ ...p.value, z ]; he(ne); } else (!H(z.key) || Array.isArray(s.modelValue)) && (t("select", z), he(z)), f.value = !1, C.value = !1, k.value = !1; b.value = null; }, B = () => { if (b.value) { const z = s.items.find((ne) => ne.key === b.value); z && m(z); } }, U = () => { C.value ? B() : we(); }, j = () => { f.value = !1, C.value = !1, k.value = !1, b.value = null; }, A = (z) => [ ...l({ e: "item", m: { disabled: z.disabled === !0, active: z.key === b.value, selected: H(z.key) } }), Rt ], y = () => { he(null); }, D = () => { t("reload"); }, te = (z) => { t("search", z); }, se = (z) => { O.value = z, s.searchDelay ? te(z) : (clearTimeout(Q.value), Q.value = setTimeout(() => { te(z); }, s.searchDelay)); }, me = () => { O.value = "", C.value = !0; }, we = () => { t("focus"), f.value = !0, me(); }, Pe = (z) => { var ve; const ne = (ve = W.value) == null ? void 0 : ve.$el; ne && !ne.contains(z.target) && j(); }, ze = (z) => { t("blur", z); }, Ae = (z) => { t("enter", { key: null, text: z }); }; return (z, ne) => { const ve = lt("click-outside"); return d(), h("div", S({ class: n(l)({}) }, n(o).testElName("autocomplete")), [ (d(), x(We(n(g)), S({ ref_key: "input", ref: W, readonly: !C.value, "model-value": C.value ? O.value : !e.multiple && n(L) ? n(L).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.clearable && n(L) && n(L).key ? n(o).icons.values.close : null, "right-icon-clickable": "", disabled: e.disabled, bordered: n(i), dark: n(r), light: n(a), rounded: n(u), "rounded-lg": n(E), round: e.round, error: e.error, class: n(R), depressed: e.depressed, size: e.size, clearable: e.clearable }, n(o).testElName("autocomplete-input"), { onEnter: Ae, onFocus: we, onClick: me, onBlur: ze, onInput: se, onClickLeftIcon: ne[1] || (ne[1] = (Z) => t("click-left-icon")), onClickRightIcon: y, onKeydown: [ Ke(ce, ["up"]), Ke(oe, ["down"]), Ke(Ve(U, ["prevent", "stop"]), ["enter"]), Ke(j, ["esc"]), G ] }), Ts({ after: de(() => [ C.value ? (d(), x(Ct, { key: 0, name: "slide-top" }, { default: de(() => [ Te((d(), h("div", S({ ref_key: "list", ref: X, class: n(_), style: { maxHeight: `${e.maxHeight}px` } }, n(o).testElName("autocomplete-list"), { onClick: ne[0] || (ne[0] = Ve((Z) => k.value = !0, ["stop"])) }), [ ee(n(dn), { loading: e.itemsLoading, error: e.itemsError, reloadable: e.itemsReloadable, onReload: D }, { default: de(() => [ n(N).length === 0 ? (d(), h("div", { key: 0, class: c(n(l)({ e: "no-items-text" })) }, F(n(v)), 3)) : (d(!0), h(ae, { key: 1 }, ge(n(N), (Z, Me) => (d(), h("div", { key: Me, "data-item-key": Z.key }, [ Z.header ? (d(), h("div", { key: 0, class: c(n(l)({ e: "item-header" })) }, F(Z.header), 3)) : M("", !0), Z.key ? (d(), h("div", S({ key: 1, class: A(Z) }, n(o).testElName("autocomplete-list-item"), { onClick: (Ce) => m(Z) }), [ w(z.$slots, "item", { id: Z.key, text: Z.text, metadata: Z.metadata, isActive: H(Z.key) }, () => [ re(F(Z.text), 1) ]) ], 16, kn)) : M("", !0), Z.divider ? (d(), h("div", { key: 2, class: c(n(l)({ e: "item-divider" })) }, null, 2)) : M("", !0) ], 8, Cn))), 128)), w(z.$slots, "additional-item") ]), _: 3 }, 8, ["loading", "error", "reloadable"]) ], 16)), [ [ve, Pe] ]) ]), _: 3 })) : M("", !0) ]), _: 2 }, [ e.multiple ? { name: "before-text", fn: de(() => [ $("div", { class: c(n(l)({ e: "selected-items", m: e.leftIcon ? "has-icon" : "" })) }, [ (d(!0), h(ae, null, ge(n(p), (Z, Me) => (d(), x(n(us), { key: Me, class: c(n(l)({ e: "selected-item-badge" })), color: "primary", round: "" }, { default: de(() => [ w(z.$slots, "selected-item", { id: Z.key, text: Z.text, metadata: Z.metadata }, () => [ $("div", { class: c(n(l)({ e: "selected-item-badge-text" })) }, F(Z.text), 3) ]), ee(n(Oe), { icon: n(o).icons.values.close, size: "sm", round: "", color: "primary", class: c(n(l)({ e: "selected-item-remove" })), onClick: (Ce) => be(Z) }, null, 8, ["icon", "class", "onClick"]) ]), _: 2 }, 1032, ["class"]))), 128)) ], 2) ]) } : void 0 ]), 1040, ["readonly", "model-value", "placeholder", "type", "required", "min", "max", "maxlength", "step", "label", "width", "rows", "left-icon", "left-icon-clickable", "left-icon-color", "right-icon", "disabled", "bordered", "dark", "light", "rounded", "rounded-lg", "round", "error", "class", "depressed", "size", "clearable", "onKeydown"])) ], 16); }; } }); const Sn = { name: "LsCard" }, Da = /* @__PURE__ */ V({ ...Sn, props: { title: { default: "" } }, setup(e) { const t = e, s = pe("ls-card"), l = Le(), o = Is(), r = () => !!o.footer; return (a, i) => (d(), h("div", S({ class: n(s)({}) }, n(l).testElName("card")), [ t.title ? (d(), h("header", { key: 0, class: c(n(s)({ e: "header" })) }, [ $("h3", { class: c(n(s)({ e: "title" })) }, F(t.title), 3) ], 2)) : M("", !0), $("main", S({ class: n(s)({ e: "body" }) }, n(l).testElName("card-body")), [ w(a.$slots, "default") ], 16), r() ? (d(), h("footer", S({ key: 1, class: n(s)({ e: "footer" }) }, n(l).testElName("card-footer")), [ w(a.$slots, "footer") ], 16)) : M("", !0) ], 16)); } }); const wn = { name: "LsChart" }, Pa = /* @__PURE__ */ V({ ...wn, props: { type: null, data: null, legend: { default: () => ({ show: !0, showColorLabel: !0, sort: void 0, layout: "column",