vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
3,817 lines • 118 kB
JavaScript
import { computed as M, ref as T, provide as Pe, createElementBlock as o, openBlock as n, unref as ee, normalizeClass as q, renderSlot as H, inject as Ne, onMounted as ue, onUnmounted as pe, watch as de, createElementVNode as c, createCommentVNode as k, createTextVNode as ie, toDisplayString as L, normalizeStyle as ce, nextTick as ge, createVNode as se, Transition as qe, withCtx as fe, withDirectives as Te, vShow as Oe, reactive as Le, useSlots as Re, withKeys as Ke, withModifiers as ve, createBlock as ke, Teleport as He, Fragment as le, renderList as ne, resolveDynamicComponent as Ue, createApp as We, h as Ze, createSlots as Xe, vModelDynamic as Ge, TransitionGroup as Qe, mergeProps as Je } from "vue";
let Ae = 0;
function oe(e = "base", _) {
const a = () => (Ae++, `${e}-${Ae}`);
return {
autoId: M(() => _.id || a())
};
}
const et = ["id"], tt = {
__name: "BaseAccordion",
props: {
id: {
type: String,
default: ""
},
multiple: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "bordered", "minimal"].includes(e)
}
},
setup(e) {
const _ = e, { autoId: a } = oe("accordion", _), y = T([]);
return Pe("accordion", {
activeItems: y,
toggleItem: (l) => {
if (_.multiple) {
const u = y.value.indexOf(l);
u === -1 ? y.value.push(l) : y.value.splice(u, 1);
} else
y.value = y.value.includes(l) ? [] : [l];
},
variant: _.variant
}), (l, u) => (n(), o("div", {
class: q(["vsui base-accordion", `base-accordion--${e.variant}`]),
id: ee(a)
}, [
H(l.$slots, "default")
], 10, et));
}
}, at = ["disabled", "aria-expanded"], lt = { class: "base-accordion-item__body" }, st = {
__name: "BaseAccordionItem",
props: {
title: {
type: String,
required: !0
},
disabled: {
type: Boolean,
default: !1
}
},
setup(e) {
const _ = e, a = Ne("accordion"), y = T(Symbol()), t = T("0px"), l = T(null), u = M(() => a.activeItems.value.includes(y.value)), i = M(() => a.variant), b = () => {
_.disabled || a.toggleItem(y.value);
}, d = () => {
l.value && (t.value = u.value ? `${l.value.scrollHeight}px` : "0px");
}, Y = new ResizeObserver(d);
return ue(() => {
l.value && (Y.observe(l.value), d());
}), pe(() => {
Y.disconnect();
}), de(u, d), (h, I) => (n(), o("div", {
class: q(["vsui base-accordion-item", [
`base-accordion-item--${i.value}`,
{
"base-accordion-item--active": u.value,
"base-accordion-item--disabled": e.disabled
}
]])
}, [
c("button", {
class: "base-accordion-item__header",
onClick: b,
disabled: e.disabled,
"aria-expanded": u.value
}, [
h.$slots.icon ? H(h.$slots, "icon", { key: 0 }) : k("", !0),
H(h.$slots, "title", {}, () => [
ie(L(e.title), 1)
]),
H(h.$slots, "chevron", {}, () => [
I[0] || (I[0] = c("svg", {
class: "base-accordion-item__chevron",
viewBox: "0 0 24 24",
width: "1.2em",
height: "1.2em"
}, [
c("path", {
fill: "currentColor",
d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
})
], -1))
])
], 8, at),
c("div", {
class: "base-accordion-item__content",
ref_key: "contentRef",
ref: l,
style: ce({ height: t.value })
}, [
c("div", lt, [
H(h.$slots, "default")
])
], 4)
], 2));
}
}, nt = ["id", "disabled"], ot = {
key: 0,
class: "spinner"
}, ye = /* @__PURE__ */ Object.assign({
inheritAttrs: !1
}, {
__name: "BaseButton",
props: {
id: {
type: String,
default: ""
},
type: {
type: String,
default: "button",
validator: (e) => ["button", "submit", "reset"].includes(e)
},
variant: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "gray", "white", "outline", "outline-red", "ghost"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large", "auto"].includes(e)
},
block: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
iconOnly: {
type: Boolean,
default: !1
},
hideFocusOutline: {
type: Boolean,
default: !1
}
},
emits: ["click"],
setup(e) {
const _ = e, { autoId: a } = oe("button", _);
return (y, t) => (n(), o("button", {
id: ee(a),
class: q(["vsui base-button", [
`base-button--${e.variant}`,
`base-button--${e.size}`,
{
"base-button--block": e.block,
"base-button--disabled": e.disabled,
"base-button--icon-only": e.iconOnly,
"base-button--loading": e.loading,
"base-button--hide-focus-outline": e.hideFocusOutline
},
y.$attrs.class
]]),
disabled: e.disabled,
onClick: t[0] || (t[0] = (l) => y.$emit("click", l))
}, [
c("div", {
class: q(["button-content", [{ hidden: e.loading }]])
}, [
y.$slots.prefix ? H(y.$slots, "prefix", { key: 0 }) : k("", !0),
H(y.$slots, "default"),
y.$slots.suffix ? H(y.$slots, "suffix", { key: 1 }) : k("", !0)
], 2),
e.loading ? (n(), o("div", ot)) : k("", !0)
], 10, nt));
}
}), rt = ["id", "checked", "disabled", "indeterminate"], it = { class: "base-checkbox__checkmark" }, ut = {
key: 0,
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, dt = {
key: 1,
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, ct = {
key: 0,
class: "base-checkbox__label"
}, _e = {
__name: "BaseCheckbox",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [Boolean, Array],
default: !1
},
value: {
type: [String, Number, Boolean, Object],
default: null
},
label: {
type: String,
default: ""
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
},
indeterminate: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("checkbox", a), t = _, l = M(() => Array.isArray(a.modelValue) ? a.modelValue.includes(a.value) : a.modelValue), u = (i) => {
if (Array.isArray(a.modelValue)) {
const b = [...a.modelValue];
if (i.target.checked)
b.push(a.value);
else {
const d = b.indexOf(a.value);
d > -1 && b.splice(d, 1);
}
t("update:modelValue", b);
} else
t("update:modelValue", i.target.checked);
};
return (i, b) => (n(), o("label", {
class: q([
"vsui base-checkbox",
`base-checkbox--${e.size}`,
{
"base-checkbox--disabled": e.disabled,
"base-checkbox--error": e.error
}
])
}, [
c("input", {
id: ee(y),
type: "checkbox",
checked: l.value,
disabled: e.disabled,
indeterminate: e.indeterminate,
class: "base-checkbox__input",
onChange: u
}, null, 40, rt),
c("span", it, [
H(i.$slots, "checkmark", {}, () => [
l.value && !e.indeterminate ? (n(), o("svg", ut, b[0] || (b[0] = [
c("path", {
d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, -1)
]))) : k("", !0),
e.indeterminate ? (n(), o("svg", dt, b[1] || (b[1] = [
c("path", {
d: "M2.91675 7H11.0834",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, -1)
]))) : k("", !0)
])
]),
i.$slots.default || e.label ? (n(), o("span", ct, [
H(i.$slots, "default", {}, () => [
ie(L(e.label), 1)
])
])) : k("", !0)
], 2));
}
}, ft = ["id"], vt = {
__name: "BaseDropdown",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "white", "dark"].includes(e)
},
width: {
type: String,
default: "auto"
},
closeOnClick: {
type: Boolean,
default: !0
},
closeOnClickOutside: {
type: Boolean,
default: !0
}
},
emits: ["update:modelValue"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("dropdown", a), t = _, l = T(null), u = T(null), i = T(a.modelValue), b = () => {
if (!u.value || !l.value) return;
const h = u.value.getBoundingClientRect(), I = l.value.getBoundingClientRect(), R = {
width: window.innerWidth,
height: window.innerHeight
};
u.value.style.top = "100%", u.value.style.bottom = "auto", u.value.style.left = "auto", u.value.style.right = "0", I.right + h.width > R.width && (u.value.style.right = "0", u.value.style.left = "auto"), I.right - h.width < 0 && (u.value.style.left = "0", u.value.style.right = "auto"), I.bottom + h.height > R.height && (u.value.style.bottom = "100%", u.value.style.top = "auto", u.value.style.marginTop = "0", u.value.style.marginBottom = "0.5rem");
};
de(
() => a.modelValue,
(h) => {
i.value = h, h ? (document.addEventListener("click", d), ge(() => {
b();
})) : document.removeEventListener("click", d);
}
);
const d = (h) => {
a.closeOnClickOutside && l.value && !l.value.contains(h.target) && t("update:modelValue", !1);
}, Y = (h) => {
a.closeOnClick && !h.target.closest("[data-prevent-close]") && t("update:modelValue", !1);
};
return ue(() => {
a.modelValue && document.addEventListener("click", d), window.addEventListener("scroll", b, !0), window.addEventListener("resize", b);
}), pe(() => {
document.removeEventListener("click", d), window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b);
}), (h, I) => (n(), o("div", {
ref_key: "dropdownRef",
ref: l,
class: "vsui base-dropdown",
id: ee(y)
}, [
c("div", {
class: "base-dropdown__trigger",
onClick: I[0] || (I[0] = (R) => t("update:modelValue", !e.modelValue))
}, [
H(h.$slots, "trigger")
]),
se(qe, { name: "dropdown" }, {
default: fe(() => [
Te(c("div", {
ref_key: "menuRef",
ref: u,
class: q(["base-dropdown__menu", `base-dropdown__menu--${e.variant}`]),
style: ce({ width: e.width }),
onClick: Y
}, [
H(h.$slots, "default")
], 6), [
[Oe, i.value]
])
]),
_: 3
})
], 8, ft));
}
}, bt = { class: "vsui infinite-scroll" }, mt = { class: "infinite-scroll__loader" }, gt = { key: 0 }, pt = {
key: 0,
class: "infinite-scroll__end"
}, ht = {
__name: "BaseInfiniteScroll",
props: {
loading: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
threshold: {
type: Number,
default: 20
// pixels before the end to trigger
},
container: {
type: String,
default: null
// If null, uses window
},
loadingText: {
type: String,
default: "Loading more items..."
},
endText: {
type: String,
default: "There are no more items to load"
}
},
emits: ["load-more"],
setup(e, { emit: _ }) {
const a = e, y = _, t = T(null), l = T(null), u = () => {
t.value && t.value.disconnect(), t.value = new IntersectionObserver(
(i) => {
i[0].isIntersecting && !a.loading && !a.disabled && y("load-more");
},
{
threshold: 0,
root: a.container ? document.querySelector(a.container) : null,
rootMargin: `0px 0px ${a.threshold}px 0px`
}
), l.value && t.value.observe(l.value);
};
return de(
() => a.loading,
(i, b) => {
b === !0 && i === !1 && setTimeout(() => {
u();
}, 100);
}
), ue(() => {
u();
}), pe(() => {
t.value && t.value.disconnect();
}), (i, b) => (n(), o("div", bt, [
H(i.$slots, "default"),
c("div", {
ref_key: "bottomElement",
ref: l,
class: "infinite-scroll__trigger"
}, [
e.loading ? H(i.$slots, "loading", { key: 0 }, () => [
c("div", mt, [
b[0] || (b[0] = c("div", { class: "spinner" }, null, -1)),
e.loadingText ? (n(), o("span", gt, L(e.loadingText), 1)) : k("", !0)
])
]) : e.disabled ? H(i.$slots, "disabled", { key: 1 }, () => [
e.endText ? (n(), o("div", pt, L(e.endText), 1)) : k("", !0)
]) : k("", !0)
], 512)
]));
}
}, Se = {
required: "This field is required",
email: "Please enter a valid email",
min: (e) => `Must be at least ${e} characters`,
max: (e) => `Must be no more than ${e} characters`,
pattern: "Invalid format",
minValue: (e) => `Value must be at least ${e}`,
maxValue: (e) => `Value must be no more than ${e}`,
hexColor: "Invalid HEX color",
rgbColor: "Invalid RGB color",
rgbaColor: "Invalid RGBA color",
hslColor: "Invalid HSL color"
}, $e = Le({
messages: { ...Se }
}), Fe = () => ({
setValidationMessages: (y) => {
$e.messages = { ...Se, ...y };
},
getValidationMessage: (y, t) => {
const l = $e.messages[y];
return typeof l == "function" ? l(t) : l || Se[y];
},
resetValidationMessages: () => {
$e.messages = { ...Se };
},
validationConfig: $e
}), yt = {
key: 0,
class: "base-input__label"
}, kt = {
key: 0,
class: "base-input__required",
"aria-hidden": "true"
}, wt = {
key: 0,
class: "base-input__prefix"
}, $t = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "aria-required", "maxlength", "min", "max"], xt = {
key: 1,
class: "base-input__suffix"
}, Vt = ["aria-label"], _t = {
key: 0,
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, St = {
key: 1,
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, Be = {
__name: "BaseInput",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [String, Number],
default: ""
},
transparentBg: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled", "outlined"].includes(e)
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
type: {
type: String,
default: "text"
},
label: {
type: String,
default: null
},
placeholder: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
prefixIcon: {
type: String,
default: null
},
suffixIcon: {
type: String,
default: null
},
rules: {
type: Array,
default: () => []
},
validateOnBlur: {
type: Boolean,
default: !0
},
validateOnInput: {
type: Boolean,
default: !1
},
name: {
type: String,
default: ""
},
min: {
type: [Number, String],
default: null
},
max: {
type: [Number, String],
default: null
},
mask: {
type: [String, Object],
default: null
},
rawValue: {
type: Boolean,
default: !0
},
dateDisplayFormat: {
type: String,
default: "DD/MM/YYYY",
validator: (e) => ["DD/MM/YYYY", "MM/DD/YYYY", "YYYY-MM-DD", "YYYY/MM/DD"].includes(e)
},
dateValueFormat: {
type: String,
default: "YYYY-MM-DD",
validator: (e) => ["DD/MM/YYYY", "MM/DD/YYYY", "YYYY-MM-DD", "YYYY/MM/DD"].includes(e)
},
uppercase: {
type: Boolean,
default: !1
},
lowercase: {
type: Boolean,
default: !1
}
},
emits: [
"update:modelValue",
"focus",
"blur",
"input",
"enter",
"validation",
"mounted"
],
setup(e, { emit: _ }) {
const a = Re(), { getValidationMessage: y } = Fe(), t = e, { autoId: l } = oe("input", t), u = _, i = T(null), b = T(!1), d = T(""), Y = T(!1), h = T(!1), I = M(() => ({
"vsui base-input": !0,
[`base-input--${t.variant}`]: !0,
[`base-input--${$.value}`]: $.value,
"base-input--disabled": t.disabled,
"base-input--focused": b.value,
"base-input--with-prefix": t.prefixIcon || a.prefix,
"base-input--with-suffix": t.suffixIcon || a.suffix || t.type === "password"
})), R = M(() => t.type === "password" && h.value ? "text" : t.type), A = () => {
var r;
const s = (r = i.value) == null ? void 0 : r.selectionStart;
h.value = !h.value, s !== void 0 && setTimeout(() => {
var x;
(x = i.value) == null || x.setSelectionRange(s, s);
}, 50);
}, Z = {
required: (s) => ({
valid: !!(s != null && s.toString().trim()),
message: y("required")
}),
email: (s) => ({
valid: !s || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s),
message: y("email")
}),
min: (s, r) => ({
valid: !s || s.length >= r,
message: y("min", r)
}),
max: (s, r) => ({
valid: !s || s.length <= r,
message: y("max", r)
}),
pattern: (s, r) => ({
valid: !s || new RegExp(r).test(s),
message: y("pattern")
}),
minValue: (s, r) => ({
valid: !s || Number(s) >= r,
message: y("minValue", r)
}),
maxValue: (s, r) => ({
valid: !s || Number(s) <= r,
message: y("maxValue", r)
}),
hexColor: (s) => ({
valid: !s || /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(s),
message: y("hexColor")
}),
rgbColor: (s) => ({
valid: !s || /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.test(s),
message: y("rgbColor")
}),
rgbaColor: (s) => ({
valid: !s || /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|0?\.\d+|1(\.0)?)\s*\)$/.test(
s
),
message: y("rgbaColor")
}),
hslColor: (s) => ({
valid: !s || /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/.test(s),
message: y("hslColor")
})
}, X = (s) => {
if (!t.rules.length) return !0;
Y.value = !0;
for (const r of t.rules) {
if (typeof r == "string") {
const x = Z[r];
if (x) {
const F = x(s);
if (!F.valid)
return d.value = F.message, !1;
}
continue;
}
if (typeof r == "object") {
const [x, F] = Object.entries(r)[0], W = Z[x];
if (W) {
const G = W(s, F);
if (!G.valid)
return d.value = r.message || G.message, !1;
}
if (typeof r.validator == "function" && !r.validator(s))
return d.value = r.message || "Invalid value", !1;
}
}
return d.value = "", !0;
}, D = (s, r) => {
if (!s) return null;
const x = s.replace(/\D/g, "").substring(0, 8);
if (x.length < 8) return null;
let F, W, G;
return r === "DD/MM/YYYY" ? (F = x.substring(0, 2), W = x.substring(2, 4), G = x.substring(4, 8)) : r === "MM/DD/YYYY" ? (W = x.substring(0, 2), F = x.substring(2, 4), G = x.substring(4, 8)) : (r === "YYYY-MM-DD" || r === "YYYY/MM/DD") && (G = x.substring(0, 4), W = x.substring(4, 6), F = x.substring(6, 8)), { day: F, month: W, year: G };
}, m = (s, r, x, F) => !s || !r || !x ? "" : F === "DD/MM/YYYY" ? `${s}/${r}/${x}` : F === "MM/DD/YYYY" ? `${r}/${s}/${x}` : F === "YYYY-MM-DD" ? `${x}-${r}-${s}` : F === "YYYY/MM/DD" ? `${x}/${r}/${s}` : "", g = (s, r, x) => {
if (!s || s.replace(/\D/g, "").substring(0, 8).length < 8) return "";
const W = D(s, r);
return W ? m(W.day, W.month, W.year, x) : "";
}, f = {
phone: {
patterns: ["(##) ####-####", "(##) #####-####"],
match: (s) => s.replace(/\D/g, "").length <= 10 ? 0 : 1
},
currency: {
pattern: "currency",
format: (s) => {
if (!s && s !== 0) return "";
const r = typeof s == "string" ? parseFloat(s.replace(/\D/g, "")) / 100 : s;
return isNaN(r) ? "" : new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(r);
},
parse: (s) => {
if (!s) return 0;
const r = s.replace(/[^\d]/g, "");
if (!r) return 0;
const x = parseFloat(r) / 100;
return isNaN(x) ? 0 : x;
}
},
date: "##/##/####",
cpf: "###.###.###-##",
cnpj: "##.###.###/####-##",
cep: "#####-###"
}, p = (s) => {
if (typeof s == "string") {
if (s === "date") {
const r = t.dateDisplayFormat;
if (r === "DD/MM/YYYY" || r === "MM/DD/YYYY") return "##/##/####";
if (r === "YYYY-MM-DD") return "####-##-##";
if (r === "YYYY/MM/DD") return "####/##/##";
}
return f[s] || s;
}
return s;
}, C = (s, r) => {
if (!s) return s;
if (r === "currency" || (r == null ? void 0 : r.pattern) === "currency") {
const x = f.currency.parse(s);
return f.currency.format(x);
}
if (typeof r == "string") return V(s, r);
if (r != null && r.patterns) {
const x = r.match(s);
return V(s, r.patterns[x]);
}
return s;
}, O = (s) => s && (t.uppercase ? s.toUpperCase() : t.lowercase ? s.toLowerCase() : s), N = (s, r) => {
const x = r.includes("#"), F = r.includes("A"), W = r.includes("X");
let G = s;
return W ? G = s.replace(/[^a-zA-Z0-9]/g, "") : F && x ? G = s.replace(/[^a-zA-Z0-9]/g, "") : F ? G = s.replace(/[^a-zA-Z]/g, "") : x ? G = s.replace(/\D/g, "") : G = s, O(G);
}, V = (s, r) => {
if (!r) return s;
const x = N(s, r).split("");
let F = "", W = 0;
for (let G = 0; G < r.length && W < x.length; G++) {
const be = r[G];
if (be === "#")
if (/\d/.test(x[W]))
F += x[W], W++;
else
break;
else if (be === "A")
if (/[a-zA-Z]/.test(x[W]))
F += x[W], W++;
else
break;
else if (be === "X")
if (/[a-zA-Z0-9]/.test(x[W]))
F += x[W], W++;
else
break;
else F += be;
}
return F;
}, K = (s, r) => {
if (!s) return s;
if (r === "currency" || (r == null ? void 0 : r.pattern) === "currency")
return f.currency.parse(s);
if (typeof r == "string") {
const x = r.includes("#"), F = r.includes("A");
if (r.includes("X")) return s.replace(/[^a-zA-Z0-9]/g, "");
if (F && x) return s.replace(/[^a-zA-Z0-9]/g, "");
if (F) return s.replace(/[^a-zA-Z]/g, "");
if (x) return s.replace(/\D/g, "");
}
return s.replace(/\D/g, "");
}, Q = M({
get: () => {
if (!t.mask) {
if (t.modelValue && (t.uppercase || t.lowercase)) {
const r = String(t.modelValue);
if (t.uppercase) return r.toUpperCase();
if (t.lowercase) return r.toLowerCase();
}
return t.modelValue;
}
if (!t.modelValue && t.modelValue !== 0) return t.modelValue;
const s = p(t.mask);
if (t.mask === "currency") return f.currency.format(t.modelValue);
if (t.mask === "date" && t.rawValue) {
if (String(t.modelValue).replace(/\D/g, "").length >= 8) {
const x = g(
t.modelValue,
t.dateValueFormat,
t.dateDisplayFormat
);
if (x) return x;
}
return C(String(t.modelValue), s) || "";
}
return t.rawValue ? C(String(t.modelValue), s) || "" : t.modelValue;
},
set: (s) => u("update:modelValue", s)
}), E = (s) => {
let r = s.target.value, x = r;
if (t.mask) {
const F = p(t.mask), G = C(r, F) || "";
i.value && (i.value.value = G), t.mask === "date" && t.rawValue ? G.replace(/\D/g, "").length >= 8 ? x = g(
G,
t.dateDisplayFormat,
t.dateValueFormat
) || K(r, F) : x = K(r, F) : x = t.rawValue ? K(r, F) : G;
} else
t.uppercase ? (x = r.toUpperCase(), i.value && (i.value.value = x)) : t.lowercase && (x = r.toLowerCase(), i.value && (i.value.value = x));
if (t.type === "email" && x && (x = x.toLowerCase()), u("update:modelValue", x), u("input", { ...s, target: { ...s.target, value: r } }), t.validateOnInput || Y.value) {
const F = X(x);
u("validation", { valid: F, error: d.value });
}
}, z = (s) => {
u("enter", s);
}, te = (s) => {
b.value = !0, u("focus", s);
}, w = (s) => {
if (b.value = !1, u("blur", s), t.validateOnBlur) {
const r = X(Q.value);
u("validation", { valid: r, error: d.value });
}
}, S = () => {
var s;
(s = i.value) == null || s.focus();
}, $ = M(() => d.value ? "error" : t.state), j = M(() => d.value ? d.value : t.errorMessage || t.helperText), U = () => {
const s = X(Q.value);
return u("validation", { valid: s, error: d.value, name: t.name }), s;
}, ae = M(() => t.required ? !0 : t.rules.some((s) => s === "required" ? !0 : typeof s == "object" ? s.required || Object.keys(s)[0] === "required" : !1)), he = M(() => {
if (!t.mask) return;
const s = p(t.mask);
if (typeof s == "string") return s.length;
if (s != null && s.patterns) return Math.max(...s.patterns.map((r) => r.length));
}), we = () => {
if (!t.mask || !i.value || !t.modelValue && t.modelValue !== 0) return;
const s = p(t.mask);
let r;
t.mask === "currency" ? r = f.currency.format(t.modelValue) : t.mask === "date" && t.rawValue && String(t.modelValue).replace(/\D/g, "").length >= 8 ? r = g(
t.modelValue,
t.dateValueFormat,
t.dateDisplayFormat
) : r = C(String(t.modelValue), s);
const x = r || "";
i.value.value !== x && (i.value.value = x);
};
return de(
() => t.modelValue,
() => {
ge(() => {
we();
});
}
), ue(() => {
we(), u("mounted", {
validate: U,
focus: S
});
}), (s, r) => (n(), o("div", {
class: q(I.value)
}, [
e.label ? (n(), o("label", yt, [
ie(L(e.label) + " ", 1),
ae.value ? (n(), o("span", kt, "*")) : k("", !0)
])) : k("", !0),
c("div", {
class: q(["base-input__wrapper", { "base-input__wrapper--transparent": e.transparentBg }])
}, [
s.$slots.prefix || e.prefixIcon ? (n(), o("div", wt, [
H(s.$slots, "prefix", {}, () => [
c("i", {
class: q(e.prefixIcon)
}, null, 2)
])
])) : k("", !0),
c("input", {
id: ee(l),
ref_key: "inputRef",
ref: i,
type: R.value,
value: Q.value,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
required: ae.value,
"aria-required": ae.value,
maxlength: he.value,
min: e.min,
max: e.max,
class: "base-input__field",
onInput: E,
onFocus: te,
onBlur: w,
onKeydown: Ke(z, ["enter"])
}, null, 40, $t),
s.$slots.suffix || e.suffixIcon || e.type === "password" ? (n(), o("div", xt, [
H(s.$slots, "suffix", {}, () => [
e.suffixIcon ? (n(), o("i", {
key: 0,
class: q(e.suffixIcon)
}, null, 2)) : k("", !0)
]),
e.type === "password" ? (n(), o("button", {
key: 0,
type: "button",
class: "base-input__password-toggle",
tabindex: "-1",
onClick: A,
onMousedown: r[0] || (r[0] = ve(() => {
}, ["prevent"])),
"aria-label": h.value ? "Hide password" : "Show password"
}, [
h.value ? (n(), o("svg", _t, r[1] || (r[1] = [
c("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1),
c("line", {
x1: "1",
y1: "1",
x2: "23",
y2: "23"
}, null, -1)
]))) : (n(), o("svg", St, r[2] || (r[2] = [
c("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1),
c("circle", {
cx: "12",
cy: "12",
r: "3"
}, null, -1)
])))
], 40, Vt)) : k("", !0)
])) : k("", !0)
], 2),
j.value ? (n(), o("div", {
key: 1,
class: q(["base-input__helper", { "base-input__helper--error": d.value }])
}, L(j.value), 3)) : k("", !0)
], 2));
}
}, Bt = {
key: 0,
class: "base-popup__header"
}, Ct = { class: "base-popup__content" }, Mt = {
key: 1,
class: "base-popup__footer"
}, It = {
__name: "BasePopup",
props: {
modelValue: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "info", "success", "warning", "error"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
position: {
type: String,
default: "center",
validator: (e) => ["center", "top", "bottom", "left", "right"].includes(e)
},
disableClickOutside: {
type: Boolean,
default: !1
},
closeOnEsc: {
type: Boolean,
default: !0
},
scrollContentOnly: {
type: Boolean,
default: !0
}
},
emits: ["update:modelValue", "close"],
setup(e, { emit: _ }) {
const a = e, y = _, t = T(null), l = (i) => {
!a.disableClickOutside && t.value && !t.value.contains(i.target) && (i.target.closest(".base-popup") || (y("update:modelValue", !1), y("close")));
}, u = (i) => {
a.closeOnEsc && i.key === "Escape" && (y("update:modelValue", !1), y("close"));
};
return ue(() => {
document.addEventListener("mousedown", l), document.addEventListener("keydown", u);
}), pe(() => {
document.removeEventListener("mousedown", l), document.removeEventListener("keydown", u);
}), (i, b) => (n(), ke(He, { to: "body" }, [
e.modelValue ? (n(), o("div", {
key: 0,
class: q(["vsui base-popup-overlay", [`base-popup-overlay--${e.position}`]])
}, [
c("div", {
ref_key: "popupRef",
ref: t,
class: q(["base-popup", [
`base-popup--${e.variant}`,
`base-popup--${e.size}`,
`base-popup--${e.position}`,
{ "base-popup--scroll-content-only": e.scrollContentOnly }
]])
}, [
i.$slots.header ? (n(), o("div", Bt, [
H(i.$slots, "header")
])) : k("", !0),
c("div", Ct, [
H(i.$slots, "default")
]),
i.$slots.footer ? (n(), o("div", Mt, [
H(i.$slots, "footer")
])) : k("", !0),
i.$slots.close ? (n(), o("button", {
key: 2,
class: "base-popup__close",
onClick: b[0] || (b[0] = (d) => i.$emit("update:modelValue", !1))
}, [
H(i.$slots, "close")
])) : k("", !0)
], 2)
], 2)) : k("", !0)
]));
}
}, Me = {
__name: "BaseSkeleton",
props: {
variant: {
type: String,
default: "rectangle",
validator: (e) => ["rectangle", "circle", "text", "heading", "button"].includes(e)
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: null
},
animated: {
type: Boolean,
default: !0
},
rounded: {
type: Boolean,
default: !1
}
},
setup(e) {
return (_, a) => (n(), o("div", {
class: q(["vsui base-skeleton", [
`base-skeleton--${e.variant}`,
{
"base-skeleton--animated": e.animated,
"base-skeleton--rounded": e.rounded
}
]]),
style: ce({
width: e.width,
height: e.height || null
})
}, [
H(_.$slots, "default")
], 6));
}
}, Tt = ["for"], At = {
key: 0,
class: "base-slider__required"
}, Dt = { class: "base-slider__container" }, Yt = { class: "base-slider__extremity-value base-slider__extremity-value--min" }, qt = {
key: 0,
class: "base-slider__mark-label"
}, Ot = ["onMousedown", "onTouchstart", "onKeydown", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled"], Lt = {
key: 0,
class: "base-slider__thumb-value"
}, Rt = { class: "base-slider__extremity-value base-slider__extremity-value--max" }, Ft = {
key: 1,
class: "base-slider__helper"
}, Et = {
__name: "BaseSlider",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [Number, Array],
default: 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
label: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
showValue: {
type: Boolean,
default: !0
},
range: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled"].includes(e)
},
marks: {
type: Array,
default: () => []
},
formatValue: {
type: Function,
default: null
}
},
emits: ["update:modelValue", "change", "mounted"],
setup(e, { emit: _ }) {
const a = e, y = _, { autoId: t } = oe("slider", a), l = T(a.modelValue), u = T(!1), i = T(null), b = T([]), d = M(() => a.range && Array.isArray(a.modelValue)), Y = M(() => a.formatValue ? d.value ? l.value.map((D) => a.formatValue(D)) : a.formatValue(l.value) : l.value), h = M(() => {
if (d.value) {
const [D, m] = l.value, g = (D - a.min) / (a.max - a.min) * 100, f = (m - a.min) / (a.max - a.min) * 100;
return {
left: `${g}%`,
width: `${f - g}%`
};
} else
return {
width: `${(l.value - a.min) / (a.max - a.min) * 100}%`
};
}), I = M(() => d.value ? l.value.map((D) => `${(D - a.min) / (a.max - a.min) * 100}%`) : [`${(l.value - a.min) / (a.max - a.min) * 100}%`]), R = M(() => ({
"base-slider--disabled": a.disabled,
"base-slider--success": a.state === "success",
"base-slider--error": a.state === "error",
"base-slider--warning": a.state === "warning",
"base-slider--filled": a.variant === "filled"
}));
de(
() => a.modelValue,
(D) => {
l.value = D;
}
), de(l, (D) => {
y("update:modelValue", D);
});
const A = (D, m = 0) => {
if (a.disabled) return;
const g = i.value.getBoundingClientRect(), f = D.clientX - g.left, p = Math.min(Math.max(f / g.width, 0), 1), C = a.min + p * (a.max - a.min), O = Math.round(C / a.step) * a.step, N = Math.min(Math.max(O, a.min), a.max);
if (d.value) {
const V = [...l.value];
V[m] = N, m === 0 && V[0] > V[1] ? V[0] = V[1] : m === 1 && V[1] < V[0] && (V[1] = V[0]), l.value = V;
} else
l.value = N;
y("change", l.value);
}, Z = (D, m = 0) => {
if (a.disabled) return;
u.value = !0, A(D, m);
const g = (p) => A(p, m), f = () => {
u.value = !1, document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", f), document.removeEventListener("touchmove", g), document.removeEventListener("touchend", f);
};
document.addEventListener("mousemove", g), document.addEventListener("mouseup", f), document.addEventListener("touchmove", g), document.addEventListener("touchend", f);
}, X = (D, m = 0) => {
if (a.disabled) return;
const g = d.value ? l.value[m] : l.value;
let f = g;
switch (D.key) {
case "ArrowRight":
case "ArrowUp":
f = Math.min(g + a.step, a.max);
break;
case "ArrowLeft":
case "ArrowDown":
f = Math.max(g - a.step, a.min);
break;
case "Home":
f = a.min;
break;
case "End":
f = a.max;
break;
default:
return;
}
if (d.value) {
const p = [...l.value];
p[m] = f, m === 0 && p[0] > p[1] ? p[0] = p[1] : m === 1 && p[1] < p[0] && (p[1] = p[0]), l.value = p;
} else
l.value = f;
y("change", l.value), D.preventDefault();
};
return ue(() => {
d.value && (!Array.isArray(l.value) || l.value.length !== 2) ? l.value = [a.min, a.max] : !d.value && Array.isArray(l.value) && (l.value = a.min), y("mounted", {
id: t.value,
getValue: () => l.value,
setValue: (D) => {
l.value = D;
}
});
}), (D, m) => (n(), o("div", {
class: q(["vsui base-slider", R.value])
}, [
e.label ? (n(), o("label", {
key: 0,
for: ee(t),
class: "base-slider__label"
}, [
ie(L(e.label) + " ", 1),
e.required ? (n(), o("span", At, "*")) : k("", !0)
], 8, Tt)) : k("", !0),
c("div", Dt, [
c("div", Yt, L(e.formatValue ? e.formatValue(e.min) : e.min), 1),
c("div", {
ref_key: "sliderTrack",
ref: i,
class: "base-slider__track",
onMousedown: m[0] || (m[0] = (g) => A(g)),
onTouchstart: m[1] || (m[1] = ve((g) => A(g.touches[0]), ["prevent"]))
}, [
c("div", {
class: "base-slider__track-fill",
style: ce(h.value)
}, null, 4),
(n(!0), o(le, null, ne(e.marks, (g) => (n(), o("div", {
key: g.value,
class: q(["base-slider__mark", {
"base-slider__mark--active": d.value ? g.value >= l.value[0] && g.value <= l.value[1] : g.value <= l.value
}]),
style: ce({ left: `calc(${(g.value - e.min) / (e.max - e.min) * 100}%)` })
}, [
m[2] || (m[2] = c("div", { class: "base-slider__mark-dot" }, null, -1)),
g.label ? (n(), o("div", qt, L(g.label), 1)) : k("", !0)
], 6))), 128)),
(n(!0), o(le, null, ne(I.value, (g, f) => (n(), o("div", {
key: f,
ref_for: !0,
ref_key: "thumbRefs",
ref: b,
class: "base-slider__thumb",
style: ce({ left: g }),
onMousedown: ve((p) => Z(p, f), ["stop"]),
onTouchstart: ve((p) => Z(p.touches[0], f), ["stop", "prevent"]),
onKeydown: (p) => X(p, f),
tabindex: "0",
role: "slider",
"aria-valuemin": e.min,
"aria-valuemax": e.max,
"aria-valuenow": d.value ? l.value[f] : l.value,
"aria-valuetext": d.value ? Y.value[f] : Y.value,
"aria-disabled": e.disabled
}, [
e.showValue ? (n(), o("div", Lt, L(d.value ? Y.value[f] : Y.value), 1)) : k("", !0)
], 44, Ot))), 128))
], 544),
c("div", Rt, L(e.formatValue ? e.formatValue(e.max) : e.max), 1)
]),
e.helperText || e.errorMessage ? (n(), o("div", Ft, L(e.errorMessage || e.helperText), 1)) : k("", !0)
], 2));
}
}, jt = {
key: 0,
class: "base-textarea__label"
}, zt = {
key: 0,
class: "base-textarea__required",
"aria-hidden": "true"
}, Pt = ["id", "value", "rows", "placeholder", "disabled", "readonly", "required", "aria-required"], Nt = {
__name: "BaseTextarea",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: String,
default: ""
},
transparentBg: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled", "outlined"].includes(e)
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
label: {
type: String,
default: null
},
placeholder: {
type: String,
default: ""
},
rows: {
type: [String, Number],
default: 3
},
maxRows: {
type: [String, Number],
default: null
},
disabled: {
type: Boolean,
default: !1
},
block: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
rules: {
type: Array,
default: () => []
},
validateOnBlur: {
type: Boolean,
default: !0
},
validateOnInput: {
type: Boolean,
default: !1
},
name: {
type: String,
default: ""
},
resize: {
type: String,
default: "vertical",
validator: (e) => ["none", "both", "horizontal", "vertical"].includes(e)
},
autoResize: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "focus", "blur", "input", "validation", "mounted"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("textarea", a), t = _, l = T(null), u = T(!1), i = T(""), b = M(() => ({
"vsui base-textarea": !0,
[`base-textarea--${a.variant}`]: !0,
[`base-textarea--${D.value}`]: D.value,
"base-textarea--disabled": a.disabled,
"base-textarea--focused": u.value,
"base-textarea--block": a.block,
[`base-textarea--resize-${a.resize}`]: !0
})), d = {
required: (f) => ({
valid: !!(f != null && f.toString().trim()),
message: "This field is required"
}),
min: (f, p) => ({
valid: !f || f.toString().length >= p,
message: `Must be at least ${p} characters`
}),
max: (f, p) => ({
valid: !f || f.toString().length <= p,
message: `Must be no more than ${p} characters`
})
}, Y = () => {
const f = h(a.modelValue);
return t("validation", { valid: f, error: i.value, name: a.name }), f;
}, h = (f) => {
if (!a.rules.length) return !0;
for (const p of a.rules) {
if (typeof p == "string") {
const C = d[p];
if (C) {
const O = C(f);
if (!O.valid)
return i.value = O.message, !1;
}
continue;
}
if (typeof p == "object") {
const [C, O] = Object.entries(p)[0], N = d[C];
if (N) {
const V = N(f, O);
if (!V.valid)
return i.value = p.message || V.message, !1;
}
if (typeof p.validator == "function" && !p.validator(f))
return i.value = p.message || "Invalid value", !1;
}
}
return i.value = "", !0;
}, I = (f) => {
if (t("update:modelValue", f.target.value), t("input", f), a.validateOnInput) {
const p = h(f.target.value);
t("validation", { valid: p, error: i.value });
}
a.autoResize && Z();
}, R = (f) => {
u.value = !0, t("focus", f);
}, A = (f) => {
if (u.value = !1, t("blur", f), a.validateOnBlur) {
const p = h(f.target.value);
t("validation", { valid: p, error: i.value });
}
}, Z = () => {
if (!l.value) return;
l.value.style.height = "auto";
let f = l.value.scrollHeight + 2;
if (a.maxRows) {
const C = parseInt(getComputedStyle(l.value).lineHeight) * a.maxRows;
f = Math.min(f, C);
}
l.value.style.height = `${f}px`;
}, X = () => {
var f;
(f = l.value) == null || f.focus();
}, D = M(() => i.value ? "error" : a.state), m = M(() => i.value ? i.value : a.errorMessage || a.helperText), g = M(() => a.required ? !0 : a.rules.some(
(f) => f === "required" || typeof f == "object" && f.required
));
return ue(() => {
a.autoResize && Z(), t("mounted", {
validate: Y,
focus: X
});
}), (f, p) => (n(), o("div", {
class: q(b.value)
}, [
e.label ? (n(), o("label", jt, [
ie(L(e.label) + " ", 1),
g.value ? (n(), o("span", zt, "*")) : k("", !0)
])) : k("", !0),
c("div", {
class: q(["base-textarea__wrapper", { "base-textarea__wrapper--transparent": e.transparentBg }])
}, [
c("textarea", {
id: ee(y),
ref_key: "textareaRef",
ref: l,
value: e.modelValue,
rows: e.rows,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
required: g.value,
"aria-required": g.value,
class: "base-textarea__field",
onInput: I,
onFocus: R,
onBlur: A
}, null, 40, Pt)
], 2),
m.value ? (n(), o("div", {
key: 1,
class: q(["base-textarea__helper", { "base-textarea__helper--error": i.value }])
}, L(m.value), 3)) : k("", !0)
], 2));
}
}, Ce = (e, _) => {
const a = e.__vccOpts || e;
for (const [y, t] of _)
a[y] = t;
return a;
}, Kt = {}, Ht = {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
function Ut(e, _) {
return n(), o("svg", Ht, _[0] || (_[0] = [
c("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }, null, -1),
c("polyline", { points: "22 4 12 14.01 9 11.01" }, null, -1)
]));
}
const Wt = /* @__PURE__ */ Ce(Kt, [["render", Ut]]), Zt = {}, Xt = {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
function Gt(e, _) {
return n(), o("svg", Xt, _[0] || (_[0] = [
c("circle", {
cx: "12",
cy: "12",
r: "10"
}, null, -1),
c("line", {
x1: "15",
y1: "9",
x2: "9",
y2: "15"
}, null, -1),
c("line", {
x1: "9",
y1: "9",
x2: "15",
y2: "15"
}, null, -1)
]));
}
const Qt = /* @__PURE__ */ Ce(Zt, [["render", Gt]]), Jt = {}, ea = {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
function ta(e, _) {
return n(), o("svg", ea, _[0] || (_[0] = [
c("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, null, -1),
c("line", {
x1: "12",
y1: "9",
x2: "12",
y2: "13"
}, null, -1),
c("line", {
x1: "12",
y1: "17",
x2: "12.01",
y2: "17"
}, null, -1)
]));
}
const aa = /* @__PURE__ */ Ce(Jt, [["render", ta]]), la = {}, sa = {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
function na(e, _) {
return n(), o("svg", sa, _[0] || (_[0] = [
c("circle", {
cx: "12",
cy: "12",
r: "10"
}, null, -1),
c("line", {
x1: "12",
y1: "16",
x2: "12",
y2: "12"
}, null, -1),
c("line", {
x1: "12",
y1: "8",
x2: "12.01",
y2: "8"
}, null, -1)
]));
}
const De = /* @__PURE__ */ Ce(la, [["render", na]]), oa = ["data-toast-id"], ra = {
key: 0,
class: "base-toast__icon"
}, ia = { class: "base-toast__content" }, ua = {
key: 0,
class: "base-toast__title"
}, da = { class: "base-toast__message" }, Ee = {
__name: "BaseToast",
props: {
id: {
type: [String, Number],
required: !0
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "info", "success", "warning", "error"].includes(e)
},
position: {
type: String,
default: "top-right",
validator: (e) => [
"top-right",
"top-left",
"top-center",
"bottom-right",
"bottom-left",
"bottom-center"
].includes(e)
},
duration: {
type: Number,
default: 3e3
},
closable: {
type: Boolean,
default: !0
},
message: {
type: String,
required: !0
},
title: {
type: String,
default: ""
},
simple: {
type: Boolean,
default: !1
}
},
emits: ["close"],
setup(e, { emit: _ }) {
const a = e, y = _, t = T(!1), l = T(null), u = T("100%"), i = () => {
a.duration > 0 && (u.value = "100%", requestAnimationFrame(() => {
requestAnimationFrame(() => {
u.value = "0%";
});
}));
}, b = () => {
t.value = !1, setTimeout(() => {
y("close");
}, 100);
}, d = () => {
l.value && (l.value.style.animationPlayState = "paused");
}, Y = () => {
l.value && (l.value.style.animationPlayState = "running");
}, h = {
success: Wt,
error: Qt,
warning: aa,
info: De,
default: De
}, I = M(() => h[a.variant] || h.default);
return ue(() => {
var R;
setTimeout(() => {
t.value = !0;
}, 100), a.duration > 0 && (a.simple ? setTimeout(b, a.duration) : (R = l.value) == null || R.addEventListener("animationend", b, { once: !0 })), i();
}), pe(() => {
l.value && l.value.removeEventListener("animationend", b);
}), (R, A) => (n(), o("div", {
"data-toast-id": e.id,
class: q(["vsui base-toast", [
`base-toast--${e.variant}`,
`base-toast--${e.position}`,
{ "base-toast--visible": t.value },
{ "base-toast--simple": e.simple }
]]),
onMouseenter: d,
onMouseleave: Y
}, [
e.simple ? k("", !0) : (n(), o("div", ra, [
(n(), ke(Ue(I.value), { class: "icon" }))
])),
c("div", ia, [
!e.simple && e.title ? (n(), o("div", ua, L(e.title), 1)) : k("", !0),
c("div", da, L(e.message), 1)
]),
e.closable ? (n(), o("button", {
key: 1,
class: "base-toast__close",
onClick: b
}, A[0] || (A[0] = [
c("span", null, "×", -1)
]))) : k("", !0),
!e.simple && e.duration > 0 ? (n(), o("div", {
key: 2,
ref_key: "progressBarRef",
ref: l,
class: q(["progress-bar", `progress-bar--${e.variant}`]),
style: ce({
animationDuration: `${e.duration}ms`
})
}, null, 6)) : k("", !0)
], 42, oa));
}
}, Ie = {
position: "top-right",
duration: 3e3,
closable: !0,
simple: !1
}, xe = Le({
defaults: { ...Ie }
}), ca = () => ({
setToastDefaults: (y) => {
xe.defaults = { ...Ie, ...y };
},
getToastDefaults: () => ({ ...xe.defaults }),
resetToastDefaults: () => {
xe.defaults = { ...Ie };
},
toastConfig: xe
}), Ve = T([]);
let fa = 0, Ye = null;
function va() {
const { getToastDefaults: e } = ca(), _ = () => {
if (Ye) return;
const t = document.createElement("div");
t.id = "toast-container", document.body.appendChild(t), Ye = We({
render: () => Ze(ze)
}).mount(t);
}, a = ({
message: t,
title: l = "",
variant: u = "default",
position: i,
duration: b,
closable: d,
simple: Y
}) => {
_();
const h = e(), I = ++fa;
return Ve.value.push({
id: I,
message: t,
title: l,
variant: u,
position: i ?? h.position,
duration: b ?? h.duration,
closable: d ?? h.closable,
simple: Y ?? h.simple
}), I;
};
return {
toasts: Ve,
addToast: a,
removeToast: (t) => {
const l = Ve.value.findIndex((u) => u.id === t);
l > -1 && Ve.value.splice(l, 1);
},
// Convenience methods
default: (t, l = {}) => a({ ...l, message: t, variant: "default" }),
success: (t, l = {}) => a({ ...l, message: t, variant: "success" }),
error: (t, l = {}) => a({ ...l, message: t, variant: "error" }),
info: (t, l = {}) => a({ ...l, message: t, variant: "info" }),
warning: (t, l = {}) => a({ ...l, message: t, variant: "warning" })
};
}
const ba = { class: "base-switch__wrapper-container" }, ma = ["for"], ga = {
key: 0,
class: "base-switch__required",
"aria-hidden": "true"
}, pa = { class: "base-switch__container" }, ha = ["for"], ya = {
key: 0,
class: "base-switch__required",
"aria-hidden": "true"
}, ka = ["for"], wa = ["id", "checked", "disabled", "required", "aria-required", "aria-checked", "name"], $a = { class: "base-switch__track" }, xa = { class: "base-switch__thumb" }, Va = {
key: 0,
class: "base-switch__spinner"
}, _a = {
key: 0,
class: "base-switch__track-label base-switch__track-label--on"
}, Sa = {
key: 1,
class: "base-switch__track-label base-switch__track-label--off"
}, Ba = ["for"], Ca = {
key: 0,
class: "base-switch__required",
"aria-hidden": "true"
}, Ma = {
__name: "BaseSwitch",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [Boolean, String, Number],
default: !1
},
onValue: {
type: [Boolean, String, Number],
default: !0
},
offValue: {
type: [Boolean, String, Number],
default: !1
},
label: {
type: String,
default: null
},
labelPosition: {
type: String,
default: "right",
validator: (e) => ["top", "left", "right"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled"].includes(e)
},
onLabel: {
type: String,
default: null
},
offLabel: {
type: String,
default: null
},
loading: {
type: Boolean,
default: !1
},
name: {
type: String,
default: ""
}
},
emits: ["update:modelValue", "change", "mounted"],
setup(e, { emit: _ }) {
const a = e, y = _, { autoId: t } = oe("switch", a), l = T(a.modelValue), u = T(!1), i = M(() => l.value === a.onValue), b = M(() => ({
"vsui base-switch": !0,
[`base-switch--${a.size}`]: !0,
[`base-switch--${a.variant}`]: !0,
[`base-switch--${a.state}`]: a.state,
[`base-switch--label-${a.labelPosition}`]: a.label,
"base-switch--disabled": a.disabled || a.loading,
"base-switch--loading": a.loading,
"base-switch--focused": u.value,
"base-switch--on": i.value
})), d = M(() => a.errorMessage || a.helperText);
de(
() => a.modelValue,
(A) => {
l.value = A;
}
);
const Y = () => {
a.disabled || a.loading || (l.value = i.value ? a.offValue : a.onValue, y("update:modelValue", l.value), y("change", l.value));
}, h = (A) => {
a.disabled || a.loading || (A.key === " " || A.key === "Enter") && (A.preventDefault(), Y());
}, I = () => {
u.value = !0;
}, R = () => {
u.value = !1;
};
return ue(() => {
y("mounted", {
id: t.value,
getValue: () => l.value,
setValue: (A) => {
l.value = A, y("update:modelValue", A);
}
});
}), (A, Z) => (n(), o("div", {
class: q(b.value)
}, [
c("div", ba, [
e.label && e.labelPosition === "top" ? (n(), o("label", {
key: 0,
for: ee(t),
class: "base-switch__label base-switch__label--top"
}, [
ie(L(e.label) + " ", 1),
e.required ? (n(), o("span", ga, "*")) : k("", !0)
], 8, ma)) : k("", !0),
c("div", pa, [
e.label && e.labelPosition === "left" ? (n(), o("label", {
key: 0,
for: ee(t),
class: "base-switch__label base-switch__label--left"
}, [
ie(L(e.label) + " ", 1),
e.required ? (n(), o("span", ya, "*")) : k("", !0)
], 8, ha)) : k("", !0),
c("label", {
for: ee(t),
class: "base-switch__wrapper"
}, [
c("input", {
id: ee(t),
ref: "switchRef",
type: "checkbox",
checked: i.value,
disabled: e.disabled || e.loading,
required: e.required,
"aria-required": e.required,
"aria-checked": i.value,
name: e.name,
class: "base-switch__input",
onChange: Y,
onFocus: I,
onBlur: R,
onKeydown: h
}, null, 40, wa),
c("div", $a, [
c("div", xa, [
e.loading ? (n(), o("div", Va)) : k("", !0)
]),
e.onLabel && i.value ? (n(), o("span", _a, L(e.onLabel), 1)) : k("", !0),
e.offLabel && !i.value ? (n(), o("span", Sa, L(e.offLabel), 1)) : k("", !0)
])
], 8, ka),
e.label && e.labelPosition === "right" ? (n(), o("label", {
key: 1,
for: ee(t),
class: "base-switch__label base-switch__label--right"
}, [
ie(L(e.label) + " ", 1),
e.required ? (n(), o("span", Ca, "*")) : k("", !0)
], 8, Ba)) : k("", !0)
])
]),
d.value ? (n(), o("div", {
key: 0,
class: q(["base-switch__helper", { "base-switch__helper--error": e.state === "error" || e.errorMessage }])
}, L(d.value), 3)) : k("", !0)
], 2));
}
}, Ia = { class: "vsui base-segmented-buttons-wrapper" }, Ta = {
key: 0,
class: "base-segmented-buttons__label"
}, Aa = {
key: 0,
class: "base-segmented-buttons__required"
}, Da = ["id"], Ya = ["disabled", "onClick"], qa = {
__name: "BaseSegmentedButtons",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [String, Number, Array],
default: () => []
},
options: {
type: Array,
default: () => [],
required: !0
},
valueKey: {
type: String,
default: "value"
},
labelKey: {
type: String,
default: "label"
},
variant: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "gray"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
block: {
type: Boolean,
default: !1
},
multiple: {
type: Boolean,
default: !1
},
label: {
type: String,
default: null
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
rules: {
type: Array,
default: () => []
},
validateOnChange: {
type: Boolean,
default: !0
}
},
emits: ["update:modelValue", "change", "validation", "mounted"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("segmented-buttons", a), t = _, l = T(""), u = T(!1), i = {
required: (m) => ({
valid: Array.isArray(m) ? m.length > 0 : !!m,
message: "This field is required"
}),
min: (m, g) => ({
valid: !Array.isArray(m) || m.length >= g,
message: `Select at least ${g} option${g > 1 ? "s" : ""}`
}),
max: (m, g) => ({
valid: !Array.isArray(m) || m.length <= g,
message: `Select no more than ${g} option${g > 1 ? "s" : ""}`
})
}, b = (m) => {
if (!a.rules.length) return !0;
for (const g of a.rules) {
if (typeof g == "string") {
if (g.includes(":")) {
const [f, p] = g.split(":"), C = i[f];
if (C) {
const O = C(m, parseInt(p, 10));
if (!O.valid)
return l.value = O.message, !1;
}
} else if (i[g]) {
const f = i[g](m);
if (!f.valid)
return l.value = f.message, !1;
}
continue;
}
if (typeof g == "object") {
if (g.message) {
let f, p;
for (const O in g)
if (O !== "message") {
f = O, p = g[O];
break;
}
const C = i[f];
if (C) {
const O = C(m, p);
if (!O.valid)
return l.value = g.message || O.message, !1;
}
} else if (typeof g.validator == "function" && !g.validator(m))
return l.value = g.message || "Invalid selection", !1;
}
}
return l.value = "", !0;
}, d = M({
get: () => a.modelValue,
set: (m) => {
if (t("update:modelValue", m), t("change", m), a.validateOnChange) {
u.value = !0;
const g = b(m);
t("validation", { valid: g, error: l.value });
}
}
}), Y = M(() => ({
"vsui base-segmented-buttons": !0,
[`base-segmented-buttons--${a.size}`]: !0,
"base-segmented-buttons--block": a.block,
"base-segmented-buttons--disabled": a.disabled,
"base-segmented-buttons--error": l.value && u.value
})), h = (m) => typeof m == "object" && m !== null ? m[a.valueKey] : m, I = (m) => typeof m == "object" && m !== null ? m[a.labelKey] || m[a.valueKey] || String(m) : m, R = (m) => {
const g = h(m);
return a.multiple ? Array.isArray(a.modelValue) ? typeof a.modelValue[0] == "object" && a.modelValue[0] !== null ? a.modelValue.some((f) => h(f) === g) : a.modelValue.includes(g) : !1 : a.modelValue === null ? !1 : typeof a.modelValue == "object" && a.modelValue !== null ? h(a.modelValue) === g : a.modelValue === g;
}, A = (m) => {
if (a.disabled) return;
const g = h(m), f = typeof a.options[0] == "object" && a.options[0] !== null;
if (!a.multiple) {
d.value = R(m) ? null : f ? m : g;
return;
}
const p = Array.isArray(a.modelValue) ? [...a.modelValue] : [];
R(m) ? typeof p[0] == "object" && p[0] !== null ? p.splice(
p.findIndex((O) => h(O) === g),
1
) : p.splice(p.indexOf(g), 1) : p.push(f ? m : g), d.value = p;
}, Z = M(() => a.rules.some((m) => m === "required" ? !0 : typeof m == "object" ? m.required || Object.keys(m)[0] === "required" : !1)), X = M(() => l.value && u.value ? l.value : a.errorMessage || a.helperText), D = () => {
u.value = !0;
const m = b(d.value);
return t("validation", { valid: m, error: l.value }), m;
};
return ue(() => {
t("mounted", {
validate: D
});
}), (m, g) => (n(), o("div", Ia, [
e.label ? (n(), o("label", Ta, [
ie(L(e.label) + " ", 1),
Z.value ? (n(), o("span", Aa, "*")) : k("", !0)
])) : k("", !0),
c("div", {
id: ee(y),
class: q(Y.value)
}, [
(n(!0), o(le, null, ne(e.options, (f, p) => (n(), o("button", {
key: p,
type: "button",
class: q(["base-segmented-buttons__button", [
`base-segmented-buttons__button--${e.variant}`,
{
"base-segmented-buttons__button--selected": R(f),
"base-segmented-buttons__button--first": p === 0,
"base-segmented-buttons__button--last": p === e.options.length - 1,
"base-segmented-buttons__button--middle": p > 0 && p < e.options.length - 1
}
]]),
disabled: e.disabled,
onClick: (C) => A(f)
}, L(I(f)), 11, Ya))), 128))
], 10, Da),
X.value ? (n(), o("div", {
key: 1,
class: q(["base-segmented-buttons__helper", { "base-segmented-buttons__helper--error": l.value && u.value }])
}, L(X.value), 3)) : k("", !0)
]));
}
}, Oa = { class: "base-color-picker__container" }, La = ["value"], Ra = {
key: 0,
class: "base-color-picker__presets"
}, Fa = ["onClick"], Ea = {
__name: "BaseColorPicker",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: String,
default: "#000000"
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled", "outlined"].includes(e)
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
label: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
rules: {
type: Array,
default: () => []
},
name: {
type: String,
default: ""
},
format: {
type: String,
default: "hex",
validator: (e) => ["hex", "rgb", "rgba", "hsl"].includes(e)
},
showPreview: {
type: Boolean,
default: !0
},
presets: {
type: Array,
default: () => []
}
},
emits: ["update:modelValue", "focus", "blur", "input", "validation", "mounted"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("color-picker", a), t = _, l = T(null), u = T(null), i = T(!1), b = M({
get: () => a.modelValue,
set: (C) => t("update:modelValue", C)
}), d = M(() => ({
"vsui base-color-picker": !0,
"base-color-picker--disabled": a.disabled,
"base-color-picker--open": i.value
})), Y = (C) => {
b.value = C, t("input", { target: { value: C } });
}, h = (C) => {
const O = C.target.value;
b.value = O, t("input", { target: { value: O } }), ge(() => {
var N;
(N = u.value) != null && N.validate && u.value.validate();
});
}, I = (C) => {
t("focus", C);
}, R = (C) => {
setTimeout(() => {
var O;
i.value && !((O = l.value) != null && O.contains(document.activeElement)) && (i.value = !1), t("blur", C);
}, 100);
}, A = () => {
!a.disabled && !a.readonly && (i.value = !i.value, i.value && ge(() => {
var C;
(C = l.value) == null || C.focus();
}));
}, Z = (C) => {
let O = C;
if (a.format !== "hex" && C.startsWith("#")) {
const N = C.replace("#", ""), V = parseInt(N.substring(0, 2), 16), K = parseInt(N.substring(2, 4), 16), Q = parseInt(N.substring(4, 6), 16);
if (a.format === "rgb") O = `rgb(${V}, ${K}, ${Q})`;
else if (a.format === "rgba") O = `rgba(${V}, ${K}, ${Q}, 1)`;
else if (a.format === "hsl") {
const E = V / 255, z = K / 255, te = Q / 255, w = Math.max(E, z, te), S = Math.min(E, z, te);
let $, j, U = (w + S) / 2;
if (w === S)
$ = j = 0;
else {
const ae = w - S;
switch (j = U > 0.5 ? ae / (2 - w - S) : ae / (w + S), w) {
case E:
$ = (z - te) / ae + (z < te ? 6 : 0);
break;
case z:
$ = (te - E) / ae + 2;
break;
case te:
$ = (E - z) / ae + 4;
break;
}
$ = Math.round($ * 60), j = Math.round(j * 100), U = Math.round(U * 100);
}
O = `hsl(${$}, ${j}%, ${U}%)`;
}
}
b.value = O, t("input", { target: { value: O } }), ge(() => {
var N;
(N = u.value) != null && N.validate && u.value.validate();
});
}, X = () => {
var C;
(C = u.value) == null || C.focus();
}, D = (C) => {
t("validation", C);
}, m = (C) => {
u.value = C, t("mounted", {
validate: C.validate,
focus: X
});
}, g = [
"#3b82f6",
"#9333ea",
"#22c55e",
"#f59e0b",
"#ef4444",
"#111827",
"#374151",
"#6b7280",
"#f3f4f6",
"#ffffff"
], f = M(() => a.presets.length > 0 ? a.presets : g), p = M(() => {
const O = {
hex: "hexColor",
rgb: "rgbColor",
rgba: "rgbaColor",
hsl: "hslColor"
}[a.format];
return a.rules.some((V) => typeof V == "string" && V === O ? !0 : typeof V == "object" && V !== null ? Object.keys(V).some((K) => K === O) : !1) ? a.rules : [...a.rules, O];
});
return (C, O) => (n(), o("div", {
class: q(d.value)
}, [
c("div", Oa, [
se(Be, {
id: ee(y),
modelValue: b.value,
variant: e.variant,
state: e.state,
label: e.label,
disabled: e.disabled,
readonly: e.readonly,
required: e.required,
helperText: e.helperText,
errorMessage: e.errorMessage,
rules: p.value,
name: e.name,
"onUpdate:modelValue": Y,
onFocus: I,
onBlur: R,
onValidation: D,
onMounted: m
}, Xe({
suffix: fe(() => [
c("div", {
class: "base-color-picker__icon",
onClick: A
}, O[0] || (O[0] = [
c("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
c("circle", {
cx: "12",
cy: "12",
r: "10"
}),
c("circle", {
cx: "12",
cy: "12",
r: "3"
})
], -1)
]))
]),
_: 2
}, [
e.showPreview ? {
name: "prefix",
fn: fe(() => [
c("div", {
class: "base-color-picker__preview",
style: ce({ backgroundColor: b.value }),
onClick: A
}, null, 4)
]),
key: "0"
} : void 0
]), 1032, ["id", "modelValue", "variant", "state", "label", "disabled", "readonly", "required", "helperText", "errorMessage", "rules", "name"]),
i.value ? (n(), o("div", {
key: 0,
ref_key: "colorPickerRef",
ref: l,
class: "base-color-picker__popup",
tabindex: "-1",
onBlur: R
}, [
c("input", {
type: "color",
value: b.value,
class: "base-color-picker__color-input",
onInput: h
}, null, 40, La),
f.value.length > 0 ? (n(), o("div", Ra, [
(n(!0), o(le, null, ne(f.value, (N, V) => (n(), o("div", {
key: V,
class: q(["base-color-picker__preset", { "base-color-picker__preset--active": b.value === N }]),
style: ce({ backgroundColor: N }),
onClick: (K) => Z(N)
}, null, 14, Fa))), 128))
])) : k("", !0)
], 544)) : k("", !0)
])
], 2));
}
}, ja = {
key: 0,
class: "base-combobox__label"
}, za = {
key: 0,
class: "base-combobox__required",
"aria-hidden": "true"
}, Pa = ["tabindex"], Na = {
key: 0,
class: "base-combobox__prefix"
}, Ka = {
key: 1,
class: "base-combobox__tags"
}, Ha = ["onClick"], Ua = ["id", "value", "placeholder", "disabled", "readonly"], Wa = ["id"], Za = { class: "base-combobox__suffix" }, Xa = {
key: 0,
class: "base-combobox__clear-container"
}, Ga = {
key: 1,
class: "base-combobox__spinner"
}, Qa = {
key: 2,
class: "base-combobox__suffix-content"
}, Ja = {
key: 0,
class: "base-combobox__loading"
}, el = {
key: 1,
class: "base-combobox__no-data"
}, tl = {
key: 2,
class: "base-combobox__options"
}, al = ["onClick", "onMouseenter"], ll = {
key: 0,
class: "base-combobox__option-check",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, je = {
__name: "BaseCombobox",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: [String, Number, Object, Array],
default: null
},
options: {
type: Array,
default: () => []
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled", "outlined"].includes(e)
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
label: {
type: String,
default: null
},
placeholder: {
type: String,
default: "Select an option..."
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
prefixIcon: {
type: String,
default: null
},
suffixIcon: {
type: String,
default: null
},
rules: {
type: Array,
default: () => []
},
validateOnBlur: {
type: Boolean,
default: !0
},
validateOnInput: {
type: Boolean,
default: !1
},
name: {
type: String,
default: ""
},
multiple: {
type: Boolean,
default: !1
},
searchable: {
type: Boolean,
default: !1
},
clearable: {
type: Boolean,
default: !1
},
valueKey: {
type: String,
default: "value"
},
labelKey: {
type: String,
default: "label"
},
noDataText: {
type: String,
default: "No options found"
},
maxHeight: {
type: String,
default: "200px"
},
minDropdownWidth: {
type: [String, Number],
default: 200
},
wrapOptionText: {
type: Boolean,
default: !0
},
closeOnSelect: {
type: Boolean,
default: !0
},
loading: {
type: Boolean,
default: !1
},
showTags: {
type: Boolean,
default: !1
},
removeSpecialChars: {
type: Boolean,
default: !1
},
selectedSingleText: {
type: String,
default: "1 item selected"
},
selectedMultipleText: {
type: [String, Function],
default: null
}
},
emits: [
"update:modelValue",
"focus",
"blur",
"input",
"validation",
"mounted",
"search",
"clear",
"select"
],
setup(e, { emit: _ }) {
const a = Re(), { getValidationMessage: y } = Fe(), t = e, { autoId: l } = oe("combobox", t), u = _, i = T(null), b = T(null), d = T(null), Y = T(!1), h = T(!1), I = T(""), R = T(""), A = T(-1), Z = {
required: (v) => ({
valid: !!v || Array.isArray(v) && v.length > 0,
message: y("required")
}),
min: (v, B) => ({
valid: !v || v.length >= B,
message: y("min", B)
}),
max: (v, B) => ({
valid: !v || v.length <= B,
message: y("max", B)
}),
minValue: (v, B) => ({
valid: !v || Number(v) >= B,
message: y("minValue", B)
}),
maxValue: (v, B) => ({
valid: !v || Number(v) <= B,
message: y("maxValue", B)
})
}, X = (v) => {
if (!t.rules.length) return !0;
for (const B of t.rules) {
if (typeof B == "string") {
const P = Z[B];
if (P) {
const J = P(v);
if (!J.valid)
return I.value = J.message, !1;
}
continue;
}
if (typeof B == "object") {
const [P, J] = Object.entries(B)[0], re = Z[P];
if (re) {
const me = re(v, J);
if (!me.valid)
return I.value = B.message || me.message, !1;
}
if (typeof B.validator == "function" && !B.validator(v))
return I.value = B.message || "Invalid value", !1;
}
}
return I.value = "", !0;
}, D = (v) => typeof v == "object" && v !== null ? v[t.valueKey] : v, m = (v) => typeof v == "object" && v !== null && (v[t.labelKey] || v[t.valueKey]) || String(v), g = (v) => v.replace(/[^\w\s]/g, "").toLowerCase().trim(), f = M(() => {
if (!t.searchable || !R.value.trim())
return t.options;
const v = t.removeSpecialChars ? g(R.value) : R.value.toLowerCase().trim();
return t.options.filter((B) => (t.removeSpecialChars ? g(m(B)) : m(B).toLowerCase()).includes(v));
}), p = M(() => {
if (!t.modelValue) return [];
if (t.multiple)
return Array.isArray(t.modelValue) ? t.modelValue.map((v) => typeof v == "object" ? v : t.options.find((B) => D(B) === v) || v) : [];
{
if (typeof t.modelValue == "object") return [t.modelValue];
const v = t.options.find((B) => D(B) === t.modelValue);
return v ? [v] : [];
}
}), C = M(() => t.searchable && Y.value && h.value ? R.value : p.value.length ? t.multiple ? !t.showTags && p.value.length > 0 ? p.value.length === 1 ? t.selectedSingleText : typeof t.selectedMultipleText == "function" ? t.selectedMultipleText(p.value.length) : t.selectedMultipleText ? t.selectedMultipleText.replace("{count}", p.value.length) : `${p.value.length} items selected` : "" : m(p.value[0]) : ""), O = M(() => ({
"vsui base-combobox": !0,
[`base-combobox--${t.variant}`]: !0,
[`base-combobox--${N.value}`]: N.value,
"base-combobox--disabled": t.disabled,
"base-combobox--focused": Y.value,
"base-combobox--open": h.value,
"base-combobox--multiple": t.multiple,
"base-combobox--with-prefix": t.prefixIcon || a.prefix,
"base-combobox--with-suffix": t.suffixIcon || a.suffix || t.clearable
})), N = M(() => I.value ? "error" : t.state), V = M(() => I.value ? I.value : t.errorMessage || t.helperText), K = M(() => t.required ? !0 : t.rules.some((v) => v === "required" ? !0 : typeof v == "object" ? v.required || Object.keys(v)[0] === "required" : !1)), Q = M(() => t.clearable && !t.disabled && !t.readonly && (t.multiple && p.value.length > 0 || !t.multiple && t.modelValue));
let E = null, z = null;
const te = () => {
z || (z = setTimeout(() => {
w(), z = null;
}, 16));
}, w = () => {
if (!d.value || !i.value) return;
const v = i.value.getBoundingClientRect(), B = {
width: window.innerWidth,
height: window.innerHeight
};
(!E || E.width !== B.width || E.height !== B.height) && (E = B);
const P = typeof t.minDropdownWidth == "string" ? parseInt(t.minDropdownWidth) : t.minDropdownWidth, J = Math.max(v.width, P);
d.value.style.width = `${J}px`, d.value.style.top = "100%", d.value.style.bottom = "auto", d.value.style.left = "0", d.value.style.right = "auto", d.value.style.marginTop = "0.25rem", d.value.style.marginBottom = "0", v.left + J > E.width && (d.value.style.right = "0", d.value.style.left = "auto");
const re = d.value.offsetHeight;
v.bottom + re > E.height && (d.value.style.bottom = "100%", d.value.style.top = "auto", d.value.style.marginTop = "0", d.value.style.marginBottom = "0.25rem");
}, S = () => {
t.disabled || t.readonly || (h.value = !0, A.value = -1, ge(() => {
var v;
t.searchable && (R.value = "", (v = b.value) == null || v.focus()), w(), document.addEventListener("click", j);
}));
}, $ = () => {
h.value = !1, A.value = -1, R.value = "", document.removeEventListener("click", j);
}, j = (v) => {
i.value && !i.value.contains(v.target) && d.value && !d.value.contains(v.target) && ($(), he());
}, U = () => {
t.disabled || t.readonly || (h.value ? $() : S());
}, ae = (v) => {
Y.value = !0, u("focus", v);
}, he = (v) => {
if (!h.value && (Y.value = !1, u("blur", v), t.validateOnBlur)) {
const B = X(t.modelValue);
u("validation", { valid: B, error: I.value });
}
}, we = (v) => {
if (R.value = v.target.value, A.value = -1, u("search", R.value), u("input", v), t.validateOnInput) {
const B = X(t.modelValue);
u("validation", { valid: B, error: I.value });
}
}, s = (v) => {
const B = D(v);
let P;
if (t.multiple) {
const J = Array.isArray(t.modelValue) ? [...t.modelValue] : [], re = J.findIndex(
(me) => typeof me == "object" ? D(me) === B : me === B
);
re >= 0 ? J.splice(re, 1) : J.push(B), P = J;
} else
P = B;
u("update:modelValue", P), ge(() => {
if (t.closeOnSelect && ($(), he()), u("select", v), t.validateOnInput) {
const J = X(P);
u("validation", { valid: J, error: I.value });
}
});
}, r = (v) => {
const B = D(v);
return t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.some(
(P) => typeof P == "object" ? D(P) === B : P === B
) : !1 : typeof t.modelValue == "object" ? D(t.modelValue) === B : t.modelValue === B;
}, x = () => {
if (u("update:modelValue", t.multiple ? [] : null), u("clear"), t.validateOnInput) {
const v = X(t.multiple ? [] : null);
u("validation", { valid: v, error: I.value });
}
}, F = (v) => {
if (!t.multiple) return;
const B = Array.isArray(t.modelValue) ? [...t.modelValue] : [], P = D(v), J = B.findIndex(
(re) => typeof re == "object" ? D(re) === P : re === P
);
J >= 0 && (B.splice(J, 1), u("update:modelValue", B));
}, W = (v) => {
if (!(t.disabled || t.readonly))
switch (v.key) {
case "ArrowDown":
v.preventDefault(), h.value ? A.value = Math.min(
A.value + 1,
f.value.length - 1
) : S();
break;
case "ArrowUp":
v.preventDefault(), h.value && (A.value = Math.max(A.value - 1, -1));
break;
case "Enter":
v.preventDefault(), h.value && A.value >= 0 ? s(f.value[A.value]) : h.value || S();
break;
case "Escape":
v.preventDefault(), $();
break;
case "Tab":
h.value && $();
break;
}
}, G = () => {
const v = X(t.modelValue);
return u("validation", { valid: v, error: I.value, name: t.name }), v;
}, be = () => {
var v, B;
t.searchable && h.value ? (v = b.value) == null || v.focus() : (B = i.value) == null || B.focus();
};
return de(
() => t.modelValue,
(v, B) => {
v !== B && t.validateOnInput && X(v);
},
{ deep: !0 }
), ue(() => {
window.addEventListener("scroll", te, !0), window.addEventListener("resize", te), u("mounted", {
validate: G,
focus: be,
open: S,
close: $
});
}), pe(() => {
document.removeEventListener("click", j), window.removeEventListener("scroll", te, !0), window.removeEventListener("resize", te), z && (clearTimeout(z), z = null);
}), (v, B) => (n(), o("div", {
class: q(O.value)
}, [
e.label ? (n(), o("label", ja, [
ie(L(e.label) + " ", 1),
K.value ? (n(), o("span", za, "*")) : k("", !0)
])) : k("", !0),
c("div", {
ref_key: "comboboxRef",
ref: i,
class: "base-combobox__wrapper",
tabindex: e.searchable && h.value ? -1 : 0,
onClick: U,
onFocus: ae,
onKeydown: W
}, [
v.$slots.prefix || e.prefixIcon ? (n(), o("div", Na, [
H(v.$slots, "prefix", {}, () => [
c("i", {
class: q(e.prefixIcon)
}, null, 2)
])
])) : k("", !0),
e.multiple && p.value.length > 0 && e.showTags ? (n(), o("div", Ka, [
(n(!0), o(le, null, ne(p.value, (P) => (n(), o("span", {
key: D(P),
class: "base-combobox__tag"
}, [
ie(L(m(P)) + " ", 1),
c("button", {
type: "button",
class: "base-combobox__tag-remove",
onClick: ve((J) => F(P), ["stop"])
}, " × ", 8, Ha)
]))), 128))
])) : k("", !0),
e.searchable && (!(e.multiple && p.value.length > 0 && e.showTags) || h.value) ? (n(), o("input", {
key: 2,
id: ee(l),
ref_key: "inputRef",
ref: b,
value: C.value,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly || !h.value && !e.searchable,
class: "base-combobox__field",
onInput: we,
onFocus: ae,
onBlur: he
}, null, 40, Ua)) : !e.searchable && !(e.multiple && p.value.length > 0 && e.showTags) ? (n(), o("div", {
key: 3,
id: ee(l),
class: q(["base-combobox__field base-combobox__field--display", { "base-combobox__field--placeholder": !C.value }])
}, L(C.value || e.placeholder), 11, Wa)) : k("", !0),
c("div", Za, [
e.clearable ? (n(), o("div", Xa, [
Q.value ? (n(), o("button", {
key: 0,
type: "button",
class: "base-combobox__clear",
onClick: ve(x, ["stop"])
}, " × ")) : k("", !0)
])) : k("", !0),
e.loading ? (n(), o("div", Ga, B[0] || (B[0] = [
c("div", { class: "spinner" }, null, -1)
]))) : k("", !0),
v.$slots.suffix || e.suffixIcon ? (n(), o("div", Qa, [
H(v.$slots, "suffix", {}, () => [
c("i", {
class: q(e.suffixIcon)
}, null, 2)
])
])) : k("", !0),
c("div", {
class: q(["base-combobox__arrow", { "base-combobox__arrow--open": h.value }])
}, B[1] || (B[1] = [
c("svg", {
viewBox: "0 0 20 20",
fill: "currentColor"
}, [
c("path", {
"fill-rule": "evenodd",
d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
"clip-rule": "evenodd"
})
], -1)
]), 2)
])
], 40, Pa),
se(qe, { name: "combobox-dropdown" }, {
default: fe(() => [
Te(c("div", {
ref_key: "menuRef",
ref: d,
class: "base-combobox__menu",
style: ce({ maxHeight: e.maxHeight })
}, [
e.loading ? (n(), o("div", Ja, B[2] || (B[2] = [
c("div", { class: "spinner" }, null, -1),
c("span", null, "Loading...", -1)
]))) : f.value.length === 0 ? (n(), o("div", el, L(e.noDataText), 1)) : (n(), o("div", tl, [
(n(!0), o(le, null, ne(f.value, (P, J) => (n(), o("div", {
key: D(P),
class: q(["base-combobox__option", {
"base-combobox__option--selected": r(P),
"base-combobox__option--highlighted": A.value === J
}]),
onClick: ve((re) => s(P), ["stop"]),
onMouseenter: (re) => A.value = J
}, [
H(v.$slots, "option", {
option: P,
selected: r(P)
}, () => [
c("span", {
class: q(["base-combobox__option-label", { "base-combobox__option-label--wrap": e.wrapOptionText }])
}, L(m(P)), 3),
r(P) ? (n(), o("svg", ll, B[3] || (B[3] = [
c("path", {
d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, -1)
]))) : k("", !0)
])
], 42, al))), 128))
]))
], 4), [
[Oe, h.value]
])
]),
_: 3
}),
V.value ? (n(), o("div", {
key: 1,
class: q(["base-combobox__helper", { "base-combobox__helper--error": I.value }])
}, L(V.value), 3)) : k("", !0)
], 2));
}
}, sl = {
key: 0,
class: "base-otp__label"
}, nl = {
key: 0,
class: "base-otp__required",
"aria-hidden": "true"
}, ol = { class: "base-otp__wrapper" }, rl = ["id", "type", "onUpdate:modelValue", "disabled", "readonly", "required", "onInput", "onKeydown", "onFocus"], il = {
key: 2,
class: "base-otp__instructions"
}, ul = {
__name: "BaseOTP",
props: {
id: {
type: String,
default: ""
},
modelValue: {
type: String,
default: ""
},
length: {
type: Number,
default: 6
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled"].includes(e)
},
state: {
type: String,
default: null,
validator: (e) => ["success", "error", "warning"].includes(e)
},
label: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
helperText: {
type: String,
default: null
},
errorMessage: {
type: String,
default: null
},
autoFocus: {
type: Boolean,
default: !1
},
type: {
type: String,
default: "number",
validator: (e) => ["text", "number", "password"].includes(e)
},
instructions: {
type: String,
default: "Press Shift+Backspace to clear all fields"
}
},
emits: ["update:modelValue", "complete", "validation", "mounted"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("otp", a), t = _, l = T([]), u = T(!1), i = M(() => u.value), b = T(0), d = T(""), Y = M({
get: () => a.modelValue || "",
set: (V) => t("update:modelValue", V)
}), h = M(() => {
const V = Y.value.split("");
return Array.from({ length: a.length }, (K, Q) => V[Q] || "");
}), I = M(() => ({
"vsui base-otp": !0,
[`base-otp--${a.variant}`]: !0,
[`base-otp--${X.value}`]: X.value,
"base-otp--disabled": a.disabled,
"base-otp--focused": i.value
})), R = M(() => ({
"base-otp__field": !0,
"base-otp__field--focused": u.value
})), A = {
incomplete: "Please enter the complete code",
partialIncomplete: "Please complete the code or leave it empty"
}, Z = () => {
const V = Y.value.length === a.length, Q = !(Y.value.length === 0) && !V;
return a.required && !V ? (d.value = a.errorMessage || A.incomplete, !1) : !a.required && Q ? (d.value = a.errorMessage || A.partialIncomplete, !1) : (d.value = "", !0);
}, X = M(() => d.value ? "error" : a.state), D = M(() => d.value ? d.value : a.errorMessage || a.helperText), m = (V, K) => {
const Q = K.target.value.slice(-1), E = h.value.map((z, te) => te === V ? Q : z).join("");
Y.value = E, Q && V < a.length - 1 && (l.value[V + 1].focus(), b.value = V + 1), E.length === a.length && t("complete", E), Z(), t("validation", { valid: !d.value, error: d.value });
}, g = (V, K) => {
if (K.key === "Backspace") {
if (K.shiftKey) {
Y.value = "", b.value = 0, l.value[0] && l.value[0].focus(), Z(), t("validation", { valid: !d.value, error: d.value });
return;
}
!h.value[V] && V > 0 && (l.value[V - 1].focus(), b.value = V - 1);
} else if (K.key === "Delete" && K.shiftKey) {
Y.value = "", b.value = 0, l.value[0] && l.value[0].focus(), Z(), t("validation", { valid: !d.value, error: d.value });
return;
} else K.key === "ArrowLeft" && V > 0 ? (l.value[V - 1].focus(), b.value = V - 1) : K.key === "ArrowRight" && V < a.length - 1 && (l.value[V + 1].focus(), b.value = V + 1);
}, f = (V) => {
V.preventDefault();
const Q = (V.clipboardData || window.clipboardData).getData("text").slice(0, a.length).split(""), E = Array.from(
{ length: a.length },
(te, w) => Q[w] || h.value[w] || ""
).join("");
Y.value = E;
const z = E.length < a.length ? E.length : a.length - 1;
l.value[z] && (l.value[z].focus(), b.value = z), Z(), t("validation", { valid: !d.value, error: d.value }), E.length === a.length && t("complete", E);
}, p = (V) => {
u.value = !0, b.value = V;
}, C = () => {
u.value = !1, Z(), t("validation", { valid: !d.value, error: d.value });
}, O = () => {
Y.value = "", b.value = 0, d.value = "", l.value[0] && l.value[0].focus();
}, N = () => {
l.value[0] && (l.value[0].focus(), b.value = 0);
};
return de(
() => a.modelValue,
(V) => {
Z(), V === "" && (b.value = 0, d.value = "");
}
), ue(() => {
l.value = Array.from({ length: a.length }), a.autoFocus && setTimeout(() => {
N();
}, 0), t("mounted", {
validate: Z,
focus: N,
reset: O
});
}), (V, K) => (n(), o("div", {
class: q(I.value)
}, [
e.label ? (n(), o("label", sl, [
ie(L(e.label) + " ", 1),
e.required ? (n(), o("span", nl, "*")) : k("", !0)
])) : k("", !0),
c("div", ol, [
(n(!0), o(le, null, ne(a.length, (Q, E) => Te((n(), o("input", {
key: E,
ref_for: !0,
ref: (z) => l.value[E] = z,
id: `${ee(y)}-${E}`,
type: a.type,
"onUpdate:modelValue": (z) => h.value[E] = z,
maxlength: "1",
disabled: a.disabled,
readonly: a.readonly,
required: a.required,
class: q(R.value),
onInput: (z) => m(E, z),
onKeydown: (z) => g(E, z),
onFocus: (z) => p(E),
onBlur: C,
onPaste: f
}, null, 42, rl)), [
[Ge, h.value[E]]
])), 128))
]),
D.value ? (n(), o("div", {
key: 1,
class: q(["base-otp__helper", { "base-otp__helper--error": d.value }])
}, L(D.value), 3)) : k("", !0),
a.instructions && !d.value ? (n(), o("div", il, L(a.instructions), 1)) : k("", !0)
], 2));
}
}, dl = ["id"], cl = {
key: 0,
class: "base-table__header"
}, fl = { class: "base-table__search" }, vl = { class: "base-table__container" }, bl = { class: "base-table__table" }, ml = { class: "base-table__thead" }, gl = { class: "base-table__tr" }, pl = {
key: 0,
class: "base-table__th base-table__th--checkbox"
}, hl = ["onClick"], yl = { class: "base-table__th-content" }, kl = {
key: 0,
class: "base-table__sort-icon"
}, wl = {
key: 0,
class: "base-table__filter"
}, $l = {
key: 1,
class: "base-table__th base-table__th--actions"
}, xl = { class: "base-table__tbody" }, Vl = {
key: 0,
class: "base-table__td"
}, _l = {
key: 1,
class: "base-table__td"
}, Sl = ["onClick"], Bl = {
key: 0,
class: "base-table__td base-table__td--checkbox"
}, Cl = {
key: 1,
class: "base-table__td base-table__td--actions"
}, Ml = { class: "base-table__actions" }, Il = {
key: 2,
class: "base-table__tr base-table__tr--empty"
}, Tl = ["colspan"], Al = { class: "base-table__empty" }, Dl = {
key: 1,
class: "base-table__pagination"
}, Yl = {
key: 0,
class: "base-table__pagination-info"
}, ql = {
key: 1,
class: "base-table__page-size"
}, Ol = { class: "base-table__pagination-nav" }, Ll = { class: "base-table__pagination-pages" }, Rl = /* @__PURE__ */ Object.assign({
inheritAttrs: !1
}, {
__name: "BaseTable",
props: {
id: {
type: String,
default: ""
},
columns: {
type: Array,
required: !0,
validator: (e) => e.every((_) => _.key && _.label)
},
data: {
type: Array,
default: () => []
},
loading: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "striped", "bordered"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
sortable: {
type: Boolean,
default: !0
},
filterable: {
type: Boolean,
default: !1
},
selectable: {
type: Boolean,
default: !1
},
pagination: {
type: Object,
default: () => ({
enabled: !0,
pageSize: 10,
pageSizeOptions: [5, 10, 25, 50, 100],
showTotal: !0,
showPageSizeSelector: !0,
showFirstLastButtons: !0
})
},
responsive: {
type: Boolean,
default: !0
},
emptyMessage: {
type: String,
default: "No data found"
},
loadingRows: {
type: Number,
default: 5
},
scrollOnPageChange: {
type: Boolean,
default: !0
}
},
emits: [
"sort",
"filter",
"select",
"select-all",
"page-change",
"page-size-change",
"row-click",
"action-click"
],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("table", a), t = _, l = T({ column: null, direction: null }), u = T({}), i = T(/* @__PURE__ */ new Set()), b = T(1), d = T(a.pagination.pageSize), Y = T(""), h = T(null), I = M(() => {
let w = [...a.data];
if (Y.value) {
const S = Y.value.toLowerCase();
w = w.filter(
($) => a.columns.some((j) => {
const U = m($, j.key);
return String(U).toLowerCase().includes(S);
})
);
}
return Object.entries(u.value).forEach(([S, $]) => {
$ && (w = w.filter((j) => {
const U = m(j, S);
return String(U).toLowerCase().includes(String($).toLowerCase());
}));
}), l.value.column && w.sort((S, $) => {
const j = m(S, l.value.column), U = m($, l.value.column);
if (j === U) return 0;
const ae = j > U ? 1 : -1;
return l.value.direction === "desc" ? -ae : ae;
}), w;
}), R = M(
() => a.pagination.enabled ? Math.ceil(I.value.length / d.value) : 1
), A = M(() => {
if (!a.pagination.enabled) return I.value;
const w = (b.value - 1) * d.value, S = w + d.value;
return I.value.slice(w, S);
}), Z = M(() => {
if (!a.pagination.enabled) return null;
const w = Math.min((b.value - 1) * d.value + 1, I.value.length), S = Math.min(b.value * d.value, I.value.length), $ = I.value.length;
return { start: w, end: S, total: $ };
}), X = M(
() => A.value.length > 0 && A.value.every((w) => i.value.has(g(w)))
), D = M(() => i.value.size > 0 && !X.value), m = (w, S) => S.split(".").reduce(($, j) => $ == null ? void 0 : $[j], w) ?? "", g = (w, S) => w.id ?? S, f = () => {
a.scrollOnPageChange && h.value && h.value.scrollIntoView({
behavior: "smooth",
block: "start"
});
}, p = () => {
a.scrollOnPageChange && setTimeout(() => {
f();
}, 100);
}, C = (w) => {
!a.sortable || w.sortable === !1 || (l.value.column === w.key ? l.value.direction = l.value.direction === "asc" ? "desc" : "asc" : (l.value.column = w.key, l.value.direction = "asc"), t("sort", { column: w.key, direction: l.value.direction }));
}, O = (w, S) => {
u.value[w] = S, b.value = 1, t("filter", { column: w, value: S });
}, N = (w, S) => {
const $ = g(w, S);
i.value.has($) ? i.value.delete($) : i.value.add($), t("select", {
row: w,
selected: i.value.has($),
selectedRows: Array.from(i.value)
});
}, V = () => {
X.value ? A.value.forEach((w, S) => {
i.value.delete(g(w, S));
}) : A.value.forEach((w, S) => {
i.value.add(g(w, S));
}), t("select-all", {
selected: !X.value,
selectedRows: Array.from(i.value)
});
}, K = (w) => {
b.value = w, t("page-change", w), p();
}, Q = (w) => {
d.value = w, b.value = 1, t("page-size-change", w), p();
}, E = (w, S) => {
t("row-click", { row: w, index: S });
}, z = (w, S, $) => {
t("action-click", { action: w, row: S, index: $ });
}, te = (w) => l.value.column !== w.key ? "↕️" : l.value.direction === "asc" ? "↑" : "↓";
return de(
() => a.data,
() => {
i.value.clear();
},
{ deep: !0 }
), de(
u,
() => {
b.value = 1;
},
{ deep: !0 }
), (w, S) => (n(), o("div", {
id: ee(y),
ref_key: "tableRef",
ref: h,
class: q(["vsui base-table", [
`base-table--${e.variant}`,
`base-table--${e.size}`,
{
"base-table--loading": e.loading,
"base-table--responsive": e.responsive,
"base-table--selectable": e.selectable
},
w.$attrs.class
]])
}, [
e.filterable || w.$slots.header ? (n(), o("div", cl, [
H(w.$slots, "header", {}, () => [
c("div", fl, [
se(Be, {
modelValue: Y.value,
"onUpdate:modelValue": S[0] || (S[0] = ($) => Y.value = $),
placeholder: "Search...",
"prefix-icon": "🔍"
}, null, 8, ["modelValue"])
])
])
])) : k("", !0),
c("div", vl, [
c("table", bl, [
c("thead", ml, [
c("tr", gl, [
e.selectable ? (n(), o("th", pl, [
se(_e, {
"model-value": X.value,
indeterminate: D.value,
"onUpdate:modelValue": V
}, null, 8, ["model-value", "indeterminate"])
])) : k("", !0),
(n(!0), o(le, null, ne(e.columns, ($) => (n(), o("th", {
key: $.key,
class: q(["base-table__th", {
"base-table__th--sortable": e.sortable && $.sortable !== !1,
"base-table__th--sorted": l.value.column === $.key
}]),
onClick: (j) => C($)
}, [
c("div", yl, [
c("span", null, L($.label), 1),
e.sortable && $.sortable !== !1 ? (n(), o("span", kl, L(te($)), 1)) : k("", !0)
]),
e.filterable && $.filterable !== !1 ? (n(), o("div", wl, [
se(Be, {
placeholder: `Filter ${$.label.toLowerCase()}...`,
"model-value": u.value[$.key] || "",
"onUpdate:modelValue": (j) => O($.key, j),
onClick: S[1] || (S[1] = ve(() => {
}, ["stop"]))
}, null, 8, ["placeholder", "model-value", "onUpdate:modelValue"])
])) : k("", !0)
], 10, hl))), 128)),
w.$slots.actions ? (n(), o("th", $l, "Actions")) : k("", !0)
])
]),
c("tbody", xl, [
e.loading ? (n(!0), o(le, { key: 0 }, ne(e.loadingRows, ($) => (n(), o("tr", {
key: `loading-${$}`,
class: "base-table__tr base-table__tr--loading"
}, [
e.selectable ? (n(), o("td", Vl, [
se(_e, { disabled: "" })
])) : k("", !0),
(n(!0), o(le, null, ne(e.columns, (j) => (n(), o("td", {
key: j.key,
class: "base-table__td"
}, [
se(Me, {
variant: "text",
rounded: ""
})
]))), 128)),
w.$slots.actions ? (n(), o("td", _l, [
se(Me, {
variant: "text",
rounded: ""
})
])) : k("", !0)
]))), 128)) : A.value.length > 0 ? (n(!0), o(le, { key: 1 }, ne(A.value, ($, j) => (n(), o("tr", {
key: g($, j),
class: q(["base-table__tr", {
"base-table__tr--selected": e.selectable && i.value.has(g($, j))
}]),
onClick: (U) => E($, j)
}, [
e.selectable ? (n(), o("td", Bl, [
se(_e, {
"model-value": i.value.has(g($, j)),
"onUpdate:modelValue": (U) => N($, j),
onClick: S[2] || (S[2] = ve(() => {
}, ["stop"]))
}, null, 8, ["model-value", "onUpdate:modelValue"])
])) : k("", !0),
(n(!0), o(le, null, ne(e.columns, (U) => (n(), o("td", {
key: U.key,
class: q(["base-table__td", U.class])
}, [
H(w.$slots, `cell-${U.key}`, {
row: $,
column: U,
value: m($, U.key),
index: j
}, () => [
ie(L(U.formatter ? U.formatter(m($, U.key), $) : m($, U.key)), 1)
])
], 2))), 128)),
w.$slots.actions ? (n(), o("td", Cl, [
c("div", Ml, [
H(w.$slots, "actions", {
row: $,
index: j,
handleAction: (U) => z(U, $, j)
})
])
])) : k("", !0)
], 10, Sl))), 128)) : (n(), o("tr", Il, [
c("td", {
colspan: e.columns.length + (e.selectable ? 1 : 0) + (w.$slots.actions ? 1 : 0),
class: "base-table__td base-table__td--empty"
}, [
H(w.$slots, "empty", {}, () => [
c("div", Al, [
c("p", null, L(e.emptyMessage), 1)
])
])
], 8, Tl)
]))
])
])
]),
e.pagination.enabled && !e.loading && A.value.length > 0 ? (n(), o("div", Dl, [
e.pagination.showTotal ? (n(), o("div", Yl, " Showing " + L(Z.value.start) + " - " + L(Z.value.end) + " of " + L(Z.value.total) + " results ", 1)) : k("", !0),
e.pagination.showPageSizeSelector ? (n(), o("div", ql, [
S[7] || (S[7] = c("label", null, "Items per page:", -1)),
se(je, {
"model-value": d.value,
options: e.pagination.pageSizeOptions,
"onUpdate:modelValue": Q,
class: "base-table__page-size-select"
}, null, 8, ["model-value", "options"])
])) : k("", !0),
c("div", Ol, [
e.pagination.showFirstLastButtons && R.value > 2 ? (n(), ke(ye, {
key: 0,
variant: "outline",
size: "small",
disabled: b.value === 1,
onClick: S[3] || (S[3] = ($) => K(1)),
title: "First page"
}, {
default: fe(() => S[8] || (S[8] = [
c("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
c("polyline", { points: "11,17 6,12 11,7" }),
c("polyline", { points: "18,17 13,12 18,7" })
], -1)
])),
_: 1
}, 8, ["disabled"])) : k("", !0),
se(ye, {
variant: "outline",
size: "small",
disabled: b.value === 1,
onClick: S[4] || (S[4] = ($) => K(b.value - 1)),
title: "Previous page"
}, {
default: fe(() => S[9] || (S[9] = [
c("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
c("polyline", { points: "15,18 9,12 15,6" })
], -1)
])),
_: 1
}, 8, ["disabled"]),
c("span", Ll, " Page " + L(b.value) + " of " + L(R.value), 1),
se(ye, {
variant: "outline",
size: "small",
disabled: b.value === R.value,
onClick: S[5] || (S[5] = ($) => K(b.value + 1)),
title: "Next page"
}, {
default: fe(() => S[10] || (S[10] = [
c("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
c("polyline", { points: "9,18 15,12 9,6" })
], -1)
])),
_: 1
}, 8, ["disabled"]),
e.pagination.showFirstLastButtons && R.value > 2 ? (n(), ke(ye, {
key: 1,
variant: "outline",
size: "small",
disabled: b.value === R.value,
onClick: S[6] || (S[6] = ($) => K(R.value)),
title: "Last page"
}, {
default: fe(() => S[11] || (S[11] = [
c("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
c("polyline", { points: "13,17 18,12 13,7" }),
c("polyline", { points: "6,17 11,12 6,7" })
], -1)
])),
_: 1
}, 8, ["disabled"])) : k("", !0)
])
])) : k("", !0)
], 10, dl));
}
}), Fl = ["id", "title"], El = ["src", "alt"], jl = {
key: 1,
class: "base-avatar__initials"
}, zl = {
__name: "BaseAvatar",
props: {
id: {
type: String,
default: ""
},
src: {
type: String,
default: null
},
alt: {
type: String,
default: ""
},
name: {
type: String,
default: ""
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "filled", "outlined"].includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large", "xlarge"].includes(e)
},
shape: {
type: String,
default: "circle",
validator: (e) => ["circle", "square", "rounded"].includes(e)
},
status: {
type: String,
default: null,
validator: (e) => ["online", "offline", "away", "busy"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
fallback: {
type: String,
default: null
}
},
emits: ["error", "load"],
setup(e, { emit: _ }) {
const a = e, { autoId: y } = oe("avatar", a), t = _, l = M(() => !!a.src), u = M(() => {
if (!a.name && !a.fallback) return "?";
const I = (a.name || a.fallback).trim().split(" ");
return I.length === 1 ? I[0].charAt(0).toUpperCase() : (I[0].charAt(0) + I[I.length - 1].charAt(0)).toUpperCase();
}), i = M(() => ({
"vsui base-avatar": !0,
[`base-avatar--${a.variant}`]: !0,
[`base-avatar--${a.size}`]: !0,
[`base-avatar--${a.shape}`]: !0,
"base-avatar--disabled": a.disabled,
"base-avatar--has-image": l.value
})), b = M(() => ({
"base-avatar__status": !0,
[`base-avatar__status--${a.status}`]: a.status
})), d = (h) => {
t("error", h);
}, Y = (h) => {
t("load", h);
};
return (h, I) => (n(), o("div", {
id: ee(y),
class: q(i.value),
title: e.name || e.alt
}, [
l.value ? (n(), o("img", {
key: 0,
src: e.src,
alt: e.alt || e.name,
class: "base-avatar__image",
onError: d,
onLoad: Y
}, null, 40, El)) : (n(), o("div", jl, L(u.value), 1)),
e.status && !e.disabled ? (n(), o("div", {
key: 2,
class: q(b.value)
}, null, 2)) : k("", !0),
H(h.$slots, "default")
], 10, Fl));
}
}, ze = {
__name: "ToastsContainer",
setup(e) {
const { toasts: _, removeToast: a } = va(), y = M(() => {
const t = {
"top-right": [],
"top-left": [],
"top-center": [],
"bottom-right": [],
"bottom-left": [],
"bottom-center": []
};
return _.value.forEach((l) => {
t[l.position].push(l);
}), t;
});
return (t, l) => (n(!0), o(le, null, ne(y.value, (u, i) => (n(), o(le, { key: i }, [
u.length ? (n(), o("div", {
key: 0,
class: q(["vsui toasts-container", `toasts-container--${i}`])
}, [
se(Qe, { name: "toast" }, {
default: fe(() => [
(n(!0), o(le, null, ne(u, (b) => (n(), ke(ee(Ee), Je({
key: b.id,
ref_for: !0
}, b, {
onClose: (d) => ee(a)(b.id)
}), null, 16, ["onClose"]))), 128))
]),
_: 2
}, 1024)
], 2)) : k("", !0)
], 64))), 128));
}
}, Nl = {
install(e) {
e.component("BaseAccordion", tt), e.component("BaseAccordionItem", st), e.component("BaseButton", ye), e.component("BaseCheckbox", _e), e.component("BaseDropdown", vt), e.component("BaseInfiniteScroll", ht), e.component("BaseInput", Be), e.component("BasePopup", It), e.component("BaseSkeleton", Me), e.component("BaseSlider", Et), e.component("BaseTextarea", Nt), e.component("BaseToast", Ee), e.component("ToastsContainer", ze), e.component("BaseSegmentedButtons", qa), e.component("BaseColorPicker", Ea), e.component("BaseCombobox", je), e.component("BaseOTP", ul), e.component("BaseTable", Rl), e.component("BaseAvatar", zl), e.component("BaseSwitch", Ma);
}
};
export {
tt as BaseAccordion,
st as BaseAccordionItem,
zl as BaseAvatar,
ye as BaseButton,
_e as BaseCheckbox,
Ea as BaseColorPicker,
je as BaseCombobox,
vt as BaseDropdown,
ht as BaseInfiniteScroll,
Be as BaseInput,
ul as BaseOTP,
It as BasePopup,
qa as BaseSegmentedButtons,
Me as BaseSkeleton,
Et as BaseSlider,
Ma as BaseSwitch,
Rl as BaseTable,
Nt as BaseTextarea,
Ee as BaseToast,
ze as ToastsContainer,
Nl as default,
va as useToast,
ca as useToastConfig,
Fe as useValidationConfig
};