maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
858 lines (857 loc) • 31.1 kB
JavaScript
import { computed as p, useId as Te, defineComponent as he, defineAsyncComponent as B, ref as I, onMounted as Ee, useSlots as Oe, openBlock as m, createElementBlock as k, normalizeClass as M, normalizeStyle as ee, unref as b, toDisplayString as Q, createCommentVNode as g, createElementVNode as T, renderSlot as P, createBlock as L, resolveDynamicComponent as ve, withDirectives as ge, mergeProps as ze, toHandlers as De, vModelDynamic as Fe, withModifiers as N, withCtx as te, createVNode as H, onBeforeMount as Ne, nextTick as ue, Transition as He, Fragment as ye, renderList as Pe } from "vue";
import '../assets/MazSelect.KhiI70iv.css';function ke({
componentName: u,
providedId: r
}) {
return p(() => r ?? `${u}-${Te().replace(/:/g, "")}`);
}
const Ue = {
removeAccents: !0,
caseSensitive: !1,
replaceSpaces: !0,
removeSpecialCharacters: !1,
trim: !0,
normalizeSpaces: !0,
removeNumbers: !1,
customNormalizationForms: ["NFC", "NFKD"]
};
function oe(u, r) {
const l = { ...Ue, ...r }, t = {
À: "A",
Á: "A",
Â: "A",
Ã: "A",
Ä: "A",
Å: "A",
à: "a",
á: "a",
â: "a",
ã: "a",
ä: "a",
å: "a",
È: "E",
É: "E",
Ê: "E",
Ë: "E",
è: "e",
é: "e",
ê: "e",
ë: "e",
Î: "I",
Ï: "I",
í: "I",
î: "i",
ï: "i",
Ô: "O",
Õ: "O",
Ö: "O",
Ø: "O",
ô: "o",
õ: "o",
ö: "o",
ø: "o",
Ù: "U",
Ú: "U",
Û: "U",
Ü: "U",
ù: "u",
ú: "u",
û: "u",
ü: "u",
Ç: "C",
ç: "c",
ÿ: "y",
Ñ: "N",
ñ: "n",
ó: "o"
};
let s = u.toString();
if (l.trim && (s = s.trim()), l.normalizeSpaces && (s = s.replaceAll(/\s+/g, " ")), l.replaceSpaces && (s = s.replaceAll(" ", "-")), l.removeNumbers && (s = s.replaceAll(/\d/g, "")), l.removeAccents && (s = s.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (c) => t[c] || c), s = s.replaceAll(/[\u0300-\u036F]/g, "")), l.caseSensitive === !1 && (s = s.toLowerCase()), l.removeSpecialCharacters && (s = s.replaceAll(/[^\dA-Z-]/gi, "")), l.trim && (s = s.trim()), l.customNormalizationForms)
for (const c of l.customNormalizationForms)
s = s.normalize(c);
return s;
}
function qe(u, r) {
const l = u.length, t = r.length, s = [];
for (let c = 0; c <= l; c++)
s[c] = [c];
for (let c = 0; c <= t; c++)
s[0][c] = c;
for (let c = 1; c <= l; c++)
for (let v = 1; v <= t; v++) {
const A = u[c - 1] === r[v - 1] ? 0 : 1;
s[c][v] = Math.min(
s[c - 1][v] + 1,
s[c][v - 1] + 1,
s[c - 1][v - 1] + A
);
}
return s[l][t];
}
function Ve(u, r) {
const l = qe(u, r), t = Math.max(u.length, r.length);
return 1 - l / t;
}
function We(u, r, l = 0.75) {
return Ve(u, r) >= l;
}
function re(u, r, l = 0.75) {
const t = p(
() => oe(typeof u == "string" ? u : u.value)
), s = p(
() => oe(typeof r == "string" ? r : r.value)
), c = p(() => typeof l == "number" ? l : l.value), v = p(() => Ve(t.value, s.value));
return {
isMatching: p(
() => We(t.value, s.value, c.value)
),
score: v
};
}
function Ie(u, r, l) {
var v, A;
u.stopPropagation();
const t = typeof l.value == "function" ? l.value : l.value.handler, s = typeof l.value == "object" ? l.value.exclude : void 0;
let c = !1;
if (s && s.length > 0) {
for (const E of s)
if (!c && u.target instanceof HTMLElement) {
const z = (v = document.querySelector(E)) == null ? void 0 : v.getAttribute("id");
c = (u.target.getAttribute("id") === z || ((A = document.querySelector(E)) == null ? void 0 : A.contains(u.target))) ?? !1;
}
}
!r.contains(u.target) && !c && (t == null || t(u));
}
function we() {
return document.ontouchstart === null ? "touchstart" : "click";
}
function je(u, r) {
const l = we();
document.removeEventListener(l, (t) => Ie(t, u, r));
}
function Qe(u, r) {
if (typeof r.value != "function" && typeof r.value == "object" && typeof r.value.handler != "function") {
console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
return;
}
const l = we();
document.addEventListener(l, (t) => Ie(t, u, r));
}
const Re = {
mounted: Qe,
unmounted: je
};
let ce = null;
function Ge(u, r) {
ce && clearTimeout(ce), ce = setTimeout(u, r);
}
function Ze(u, r) {
let l;
return function(...t) {
clearTimeout(l), l = setTimeout(() => {
u.apply(this, t);
}, r);
};
}
const Je = ["for"], Xe = {
key: 0,
class: "m-input-wrapper-left"
}, Ye = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], xe = {
key: 1,
class: "m-input-wrapper-right"
}, _e = /* @__PURE__ */ he({
inheritAttrs: !1,
__name: "MazInput",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
topLabel: {},
assistiveText: {},
name: { default: void 0 },
color: { default: "primary" },
type: { default: "text" },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
id: { default: void 0 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
inputClasses: { default: void 0 },
noBorder: { type: Boolean, default: !1 },
noRadius: { type: Boolean, default: !1 },
inputmode: { default: "text" },
size: { default: "md" },
debounce: { type: [Boolean, Number], default: !1 },
debounceDelay: { default: 500 },
validButton: { type: Boolean, default: !1 },
validButtonLoading: { type: Boolean, default: !1 },
autoFocus: { type: Boolean, default: !1 },
borderActive: { type: Boolean, default: !1 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
roundedSize: { default: void 0 },
block: { type: Boolean },
autocomplete: {}
},
emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
setup(u, { emit: r }) {
const l = u, t = r, s = B(() => import("./MazBtn.CJYzU-Jj.mjs")), c = B(() => import("./MazIcon.Cq1v4J3r.mjs")), v = B(() => import("./eye-slash.BoO00xzs.mjs")), A = B(() => import("./eye.f8zAUc30.mjs")), E = B(() => import("./check.C9Q_W85g.mjs")), z = I(!1), f = I(!1), O = I(), R = ke({
componentName: "MazInput",
providedId: l.id
});
Ee(() => {
var o;
l.autoFocus && ((o = O.value) == null || o.focus());
});
const G = p(() => l.type === "password"), le = p(() => z.value ? "text" : l.type), w = p(() => {
if (!l.noBorder) {
if (l.error)
return "maz-border-danger";
if (l.success)
return "maz-border-success";
if (l.warning)
return "maz-border-warning";
if (f.value || l.borderActive) {
if (l.color === "black")
return "maz-border-black";
if (l.color === "danger")
return "maz-border-danger";
if (l.color === "info")
return "maz-border-info";
if (l.color === "primary")
return "maz-border-primary";
if (l.color === "secondary")
return "maz-border-secondary";
if (l.color === "success")
return "maz-border-success";
if (l.color === "warning")
return "maz-border-warning";
if (l.color === "white")
return "maz-border-white";
}
return "--default-border";
}
}), U = Oe(), Z = p(() => S.value !== void 0 && S.value !== ""), J = Ze(
(o) => {
t("update:model-value", o);
},
typeof l.debounce == "number" ? l.debounce : l.debounceDelay ?? 500
);
function X(o) {
if (l.debounce)
return J(o);
t("update:model-value", o);
}
const S = p({
get: () => l.modelValue,
set: (o) => X(o)
}), D = p(() => (!!l.label || !!l.hint) && (f.value || !!Z.value || !!l.placeholder || ["date", "month", "week"].includes(l.type))), Y = p(() => !!l.label || !!l.hint);
function q() {
return !!U["right-icon"] || G.value || !!U["valid-button"] || l.validButton || !!l.rightIcon;
}
function x() {
return !!U["left-icon"] || !!l.leftIcon;
}
function _(o) {
t("focus", o), f.value = !0;
}
function C(o) {
t("blur", o), f.value = !1;
}
function W(o) {
return t("change", o);
}
function ae(o) {
return t("input", o);
}
return (o, h) => (m(), k(
"div",
{
class: M(["m-input", [
{
"--is-focused": f.value || o.borderActive,
"--should-up": D.value,
"--has-label": Y.value,
"--is-disabled": o.disabled,
"--is-readonly": o.readonly,
"--has-z-2": o.error || o.warning || o.success,
"--has-state": o.error || o.warning || o.success,
"--block": o.block
},
l.class,
`--${o.color}`
]]),
style: ee(o.style)
},
[
o.topLabel ? (m(), k("label", {
key: 0,
for: b(R),
class: "m-input-top-label"
}, Q(o.topLabel), 9, Je)) : g("v-if", !0),
T(
"div",
{
class: M(["m-input-wrapper m-reset-css", [
o.inputClasses,
w.value,
o.roundedSize ? `--rounded-${o.roundedSize}` : { "maz-rounded": !o.noRadius },
{ "--block": o.block }
]])
},
[
x() ? (m(), k("div", Xe, [
o.$slots["left-icon"] || o.leftIcon ? P(o.$slots, "left-icon", { key: 0 }, () => [
typeof o.leftIcon == "string" ? (m(), L(b(c), {
key: 0,
name: o.leftIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : o.leftIcon ? (m(), L(ve(o.leftIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : g("v-if", !0)
], !0) : g("v-if", !0)
])) : g("v-if", !0),
T(
"div",
{
class: M(["m-input-wrapper-input", [`--${o.size}`, { "--top-label": !!o.topLabel }]])
},
[
ge(T("input", ze({ id: b(R) }, o.$attrs, {
ref_key: "input",
ref: O,
"onUpdate:modelValue": h[0] || (h[0] = (V) => S.value = V),
name: o.name,
placeholder: o.placeholder,
"aria-label": o.label || o.placeholder,
type: le.value,
inputmode: o.inputmode,
disabled: o.disabled,
readonly: o.readonly,
autocomplete: o.autocomplete,
required: o.required,
class: "m-input-input"
}, De({
blur: C,
focus: _,
change: W,
input: ae
}, !0), {
onClick: h[1] || (h[1] = (V) => o.$emit("click", V))
}), null, 16, Ye), [
[Fe, S.value]
]),
o.label || o.hint ? (m(), k(
"span",
{
key: 0,
class: M(["m-input-label", [
{
"maz-text-danger-600": o.error,
"maz-text-success-600": o.success,
"maz-text-warning-600": o.warning
}
]])
},
Q(o.hint || o.label),
3
/* TEXT, CLASS */
)) : g("v-if", !0)
],
2
/* CLASS */
),
q() ? (m(), k("div", xe, [
o.$slots["right-icon"] || o.rightIcon ? P(o.$slots, "right-icon", { key: 0 }, () => [
typeof o.rightIcon == "string" ? (m(), L(b(c), {
key: 0,
name: o.rightIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : o.rightIcon ? (m(), L(ve(o.rightIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : g("v-if", !0)
], !0) : g("v-if", !0),
G.value ? (m(), L(b(s), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: h[2] || (h[2] = N((V) => z.value = !z.value, ["stop"]))
}, {
default: te(() => [
z.value ? (m(), L(b(v), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (m(), L(b(A), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
/* STABLE */
})) : g("v-if", !0),
o.$slots["valid-button"] || o.validButton ? P(o.$slots, "valid-button", { key: 2 }, () => [
H(b(s), {
color: "transparent",
disabled: o.disabled,
tabindex: "-1",
loading: o.validButtonLoading,
class: "m-input-valid-button",
size: "mini",
type: "submit"
}, {
default: te(() => [
H(b(E), { class: "maz-text-2xl maz-text-normal" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "loading"])
], !0) : g("v-if", !0)
])) : g("v-if", !0)
],
2
/* CLASS */
),
o.assistiveText ? (m(), k(
"div",
{
key: 1,
class: M(["m-input-bottom-text", [
{
"maz-text-danger-600": o.error,
"maz-text-success-600": o.success,
"maz-text-warning-600": o.warning,
"maz-text-muted": !o.error && !o.success && !o.warning
}
]])
},
Q(o.assistiveText),
3
/* TEXT, CLASS */
)) : g("v-if", !0)
],
6
/* CLASS, STYLE */
));
}
}), Se = (u, r) => {
const l = u.__vccOpts || u;
for (const [t, s] of r)
l[t] = s;
return l;
}, be = /* @__PURE__ */ Se(_e, [["__scopeId", "data-v-8def99c5"]]), et = ["aria-label"], tt = { class: "m-select-list__no-results" }, ot = {
key: 2,
class: "m-select-list__scroll-wrapper",
tabindex: "-1"
}, lt = { class: "m-select-list-optgroup" }, at = ["onClick"], nt = /* @__PURE__ */ he({
inheritAttrs: !1,
__name: "MazSelect",
props: {
style: { default: void 0 },
class: { default: void 0 },
id: { default: void 0 },
modelValue: { default: void 0 },
options: { default: void 0 },
optionValueKey: { default: "value" },
optionLabelKey: { default: "label" },
optionInputValueKey: { default: "label" },
listPosition: { default: "bottom left" },
itemHeight: { default: void 0 },
maxListHeight: { default: 240 },
maxListWidth: { default: void 0 },
minListHeight: { default: void 0 },
minListWidth: { default: void 0 },
size: { default: "md" },
color: { default: "primary" },
search: { type: Boolean },
searchPlaceholder: { default: "Search in options" },
searchFunction: {},
searchThreshold: { default: 0.75 },
open: { type: Boolean },
multiple: { type: Boolean, default: void 0 },
required: { type: Boolean },
disabled: { type: Boolean },
block: { type: Boolean },
excludeSelectors: { default: void 0 },
autocomplete: { default: "off" }
},
emits: ["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"],
setup(u, { expose: r, emit: l }) {
const t = u, s = l, c = B(() => import("./MazCheckbox.L0nhQFjM.mjs")), v = B(() => import("./magnifying-glass.-nBiyXot.mjs")), A = B(() => import("./chevron-down.BkvtON3b.mjs")), E = B(() => import("./no-symbol.CIgKzsrB.mjs"));
r({
/** Method to open the option list */
openList: j,
/** Method to close the option list */
closeList: F
});
const z = I(!1), f = I(), O = p(
() => ["black", "transparent", "white"].includes(t.color)
), R = p(
() => O.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
), G = p(
() => O.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
), le = p(
() => O.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
), w = p(() => z.value || t.open), U = ke({
componentName: "MazSelect",
providedId: t.id
});
function Z(e) {
return {
[t.optionValueKey]: e,
[t.optionLabelKey]: e,
[t.optionInputValueKey]: e
};
}
function J(e) {
return {
...e,
[t.optionValueKey]: e[t.optionValueKey],
[t.optionLabelKey]: e[t.optionLabelKey],
[t.optionInputValueKey]: e[t.optionInputValueKey]
};
}
function X(e) {
const a = [];
if (!(e != null && e.length))
return [];
for (const n of e)
typeof n == "string" || typeof n == "number" || typeof n == "boolean" ? a.push(Z(n)) : typeof n == "object" && "options" in n && Array.isArray(n.options) ? a.push(
{ label: n.label, isOptGroup: !0 },
...n.options.map(
(i) => typeof i == "string" || typeof i == "number" || typeof i == "boolean" ? Z(i) : J(i)
)
) : a.push(J(n));
return a;
}
const S = p(() => X(t.options ?? [])), D = p(
() => {
var e;
return ((e = S.value) == null ? void 0 : e.filter((a) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(a[t.optionValueKey]) && !C(a[t.optionValueKey]) : !1 : t.modelValue === a[t.optionValueKey] && !C(a[t.optionValueKey]))) ?? [];
}
);
Ne(() => {
var e;
(e = t.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ie();
});
const Y = I(), q = I(), x = I(), _ = I();
function C(e) {
return e == null;
}
function W(e) {
var n;
return (((n = D.value) == null ? void 0 : n.some(
(i) => i[t.optionValueKey] === e[t.optionValueKey]
)) ?? !1) && !C(e[t.optionValueKey]);
}
const ae = p(() => {
var a;
if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
return t.modelValue.map(
(n) => {
var i, d;
return (d = (i = S.value) == null ? void 0 : i.find((y) => y[t.optionValueKey] === n)) == null ? void 0 : d[t.optionInputValueKey];
}
).join(", ");
const e = (a = S.value) == null ? void 0 : a.find(
(n) => n[t.optionValueKey] === t.modelValue
);
return C(t.modelValue) || e == null ? void 0 : e[t.optionInputValueKey];
}), o = p(
() => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
), h = I(""), V = I("");
function ne(e, a) {
return a && e && oe(e).includes(oe(a));
}
function de(e) {
var a;
return e ? (a = S.value) == null ? void 0 : a.filter((n) => {
const i = n[t.optionLabelKey], d = n[t.optionValueKey], y = n[t.optionInputValueKey], K = t.searchThreshold;
return ne(i, e) || ne(y, e) || ne(d, e) || typeof i == "string" && re(i, e, K).isMatching.value || typeof y == "string" && re(y, e, K).isMatching.value || typeof d == "string" && re(d, e, K).isMatching.value;
}) : S.value;
}
const $ = p(() => t.searchFunction && t.search && h.value ? X(t.searchFunction(h.value, t.options ?? []) ?? []) : de(h.value));
async function F(e) {
var n, i;
if (!w.value)
return;
if (e && ("relatedTarget" in e && ((n = Y.value) != null && n.contains(e.relatedTarget)) || e.type === "keydown"))
return e.preventDefault();
const a = e && "relatedTarget" in e && e.relatedTarget instanceof HTMLElement && e.relatedTarget.getAttribute("id");
if ((i = t.excludeSelectors) != null && i.includes(`#${a}`))
return e == null ? void 0 : e.preventDefault();
await ue(), z.value = !1, f.value = 0, s("close", e);
}
async function j(e) {
t.disabled || w.value || (e == null || e.preventDefault(), z.value = !0, await se(), s("focus", e), s("open", z.value));
}
function pe() {
var e, a;
(a = ((e = q.value) == null ? void 0 : e.$el).querySelector("input")) == null || a.focus();
}
function Ke() {
var e, a;
(a = ((e = q.value) == null ? void 0 : e.$el).querySelector("input")) == null || a.dispatchEvent(new Event("input"));
}
function Ae(e) {
z.value ? F(e) : pe();
}
function $e(e) {
var a, n;
h.value = e, (n = ((a = x.value) == null ? void 0 : a.$el).querySelector("input")) == null || n.focus();
}
function Le(e) {
var n;
e === "Backspace" && V.value.length > 0 ? V.value = V.value.slice(0, -1) : V.value += e;
const a = de(V.value);
a != null && a.length && (f.value = (n = $.value) == null ? void 0 : n.findIndex(
(i) => i[t.optionValueKey] === a[0][t.optionValueKey]
), typeof f.value == "number" && f.value >= 0 && se(f.value)), Ge(() => {
V.value = "";
}, 1e3);
}
function Be(e) {
const a = e.key;
/^[\dA-Za-z\u0400-\u04FF]$/.test(a) ? (e.preventDefault(), j(e), t.search ? $e(a) : Le(a)) : fe(e);
}
function fe(e, a = !0) {
const n = e.code, i = ["ArrowUp", "ArrowDown"].includes(n), d = (a ? ["Enter", "Space"] : ["Enter"]).includes(n), y = n === "Escape" && w.value;
i ? Ce(e, f.value) : d ? Me(e, f.value) : y && F(e);
}
function Ce(e, a) {
var d;
e.preventDefault();
const n = e.code;
w.value || j(e);
const i = (d = $.value) == null ? void 0 : d.length;
i && (typeof a == "number" ? a === i - 1 && n === "ArrowDown" ? f.value = 0 : a === 0 && n === "ArrowUp" ? f.value = i - 1 : f.value = n === "ArrowDown" ? a + 1 : a - 1 : f.value = n === "ArrowDown" ? 0 : i - 1, se(f.value));
}
function Me(e, a) {
var i, d, y;
if (!w.value)
return;
e.preventDefault();
const n = a ? ((i = $.value) == null ? void 0 : i[a]) ?? ((d = $.value) == null ? void 0 : d[0]) : (y = $.value) == null ? void 0 : y[0];
C(n) || me(n);
}
async function se(e) {
var n, i;
await ue(), typeof e != "number" && ie();
const a = e ?? f.value;
if (typeof a == "number" && a >= 0) {
const d = (n = _.value) == null ? void 0 : n.querySelectorAll(".m-select-list-item");
(i = d == null ? void 0 : d[a]) == null || i.scrollIntoView({
behavior: "auto",
block: "nearest",
inline: "start"
});
}
}
function ie(e) {
var n;
const a = (n = $.value) == null ? void 0 : n.findIndex((i) => {
var d, y;
return t.multiple && Array.isArray(t.modelValue) ? e ? e[t.optionValueKey] === i[t.optionValueKey] : [...t.modelValue].reverse()[0] === i[t.optionValueKey] : ((y = (d = D.value) == null ? void 0 : d[0]) == null ? void 0 : y[t.optionValueKey]) === i[t.optionValueKey];
});
f.value = a && a >= 0 ? a : 0;
}
function me(e, a = !0) {
var y;
a && !t.multiple && ue(() => F()), h.value = "";
const n = (y = D.value) == null ? void 0 : y.some(
(K) => K[t.optionValueKey] === e[t.optionValueKey]
);
let i = D.value;
n && t.multiple ? i = i == null ? void 0 : i.filter(
(K) => K[t.optionValueKey] !== e[t.optionValueKey]
) : t.multiple ? i.push(e) : i = [e];
const d = i.map((K) => K[t.optionValueKey]);
s("update:model-value", t.multiple ? d : d[0]), s("selected-option", e), Ke(), ie(e), pe();
}
return (e, a) => ge((m(), k(
"div",
{
ref_key: "mazSelectElement",
ref: Y,
class: M(["m-select m-reset-css", [
{ "--is-open": w.value, "--disabled": e.disabled, "--block": e.block },
t.class,
`--${e.size}`
]]),
style: ee([e.style, { "--keyboard-selected-bg-color": le.value, "--selected-bg-color": G.value, "--selected-text-color": R.value }])
},
[
H(be, ze({
id: b(U),
ref_key: "mazInputComponent",
ref: q,
class: "m-select-input"
}, e.$attrs, {
required: e.required,
"border-active": z.value,
color: e.color,
"model-value": ae.value,
size: e.size,
block: "",
autocomplete: e.autocomplete,
disabled: e.disabled,
onFocus: N(j, ["prevent", "stop"]),
onBlur: N(F, ["prevent", "stop"]),
onClick: N(j, ["prevent", "stop"]),
onChange: a[0] || (a[0] = (n) => s("change", n)),
onInput: a[1] || (a[1] = (n) => s("input", n)),
onKeydown: Be
}), {
"right-icon": te(() => [
T("button", {
tabindex: "-1",
type: "button",
class: "m-select-input__toggle-button maz-custom",
"aria-label": `${w.value ? "collapse" : "expand"} list of options`,
onClick: N(Ae, ["stop"])
}, [
H(b(A), { class: "m-select-chevron maz-text-xl" })
], 8, et)
]),
_: 1
/* STABLE */
}, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
H(He, { name: o.value }, {
default: te(() => [
w.value ? (m(), k(
"div",
{
key: 0,
ref_key: "optionListElement",
ref: _,
class: M(["m-select-list", {
"--top": e.listPosition.includes("top"),
"--left": e.listPosition.includes("left"),
"--right": e.listPosition.includes("right"),
"--bottom": e.listPosition.includes("bottom")
}]),
style: ee({
maxHeight: `${e.maxListHeight}px`,
maxWidth: `${e.maxListWidth}px`,
minHeight: `${e.minListHeight}px`,
minWidth: `${e.minListWidth}px`
})
},
[
e.search ? (m(), L(be, {
key: 0,
ref_key: "searchInputComponent",
ref: x,
modelValue: h.value,
"onUpdate:modelValue": [
a[2] || (a[2] = (n) => h.value = n),
a[4] || (a[4] = (n) => f.value = 0)
],
size: "sm",
color: e.color,
placeholder: e.searchPlaceholder,
name: "search",
inputmode: "search",
block: "",
autocomplete: "off",
tabindex: "-1",
class: "m-select-list__search-input maz-flex-none",
"left-icon": b(v),
onKeydown: a[3] || (a[3] = (n) => fe(n, !1))
}, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : g("v-if", !0),
!$.value || $.value.length <= 0 ? P(e.$slots, "no-results", { key: 1 }, () => [
T("span", tt, [
H(b(E), { class: "maz-h-6 maz-w-6 maz-text-normal" })
])
], !0) : (m(), k("div", ot, [
(m(!0), k(
ye,
null,
Pe($.value, (n, i) => (m(), k(
ye,
{ key: i },
[
n.label && n.isOptGroup ? P(e.$slots, "optgroup", {
key: 0,
label: n.label
}, () => [
T(
"span",
lt,
Q(n.label),
1
/* TEXT */
)
], !0) : (m(), k("button", {
key: 1,
tabindex: "-1",
type: "button",
class: M(["m-select-list-item maz-custom maz-flex-none", [
{
"--is-keyboard-selected": f.value === i,
"--is-selected": W(n),
"--is-none-value": C(n[e.optionValueKey])
}
]]),
style: ee(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
onClick: N((d) => me(n), ["prevent", "stop"])
}, [
e.multiple ? (m(), L(b(c), {
key: 0,
tabindex: "-1",
"model-value": W(n),
size: "sm",
color: e.color
}, null, 8, ["model-value", "color"])) : g("v-if", !0),
P(e.$slots, "default", {
option: n,
isSelected: W(n)
}, () => [
T(
"span",
null,
Q(n[e.optionLabelKey]),
1
/* TEXT */
)
], !0)
], 14, at))
],
64
/* STABLE_FRAGMENT */
))),
128
/* KEYED_FRAGMENT */
))
]))
],
6
/* CLASS, STYLE */
)) : g("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["name"])
],
6
/* CLASS, STYLE */
)), [
[b(Re), {
exclude: e.excludeSelectors,
handler: F
}]
]);
}
}), it = /* @__PURE__ */ Se(nt, [["__scopeId", "data-v-98157b75"]]);
export {
it as M,
Se as _,
ke as u
};