maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
428 lines (427 loc) • 14.8 kB
JavaScript
import { computed as M, useId as re, nextTick as Y, inject as le, defineComponent as Z, ref as A, onMounted as se, watchEffect as ie, openBlock as w, createElementBlock as E, mergeProps as I, createCommentVNode as R, defineAsyncComponent as F, watch as K, withDirectives as Q, unref as m, normalizeClass as S, normalizeStyle as X, createElementVNode as J, withModifiers as H, renderSlot as g, createTextVNode as V, toDisplayString as q, createVNode as W, createSlots as ae, withCtx as $, createBlock as D, resolveDynamicComponent as ue, Transition as de, Fragment as ce, renderList as fe, vShow as pe } from "vue";
import '../assets/MazDropdown.CtzsOmDR.css';function me({
componentName: l,
providedId: s
}) {
return M(() => s ?? `${l}-${re().replace(/:/g, "")}`);
}
const O = "__maz-click-outside__";
function _() {
return document.ontouchstart === null ? "touchstart" : "click";
}
async function x(l, s) {
try {
ee(l);
const n = s.instance, f = s.value, p = typeof f == "function";
if (!p)
throw new Error("[maz-ui](vClickOutside) the callback should be a function");
await Y(), l[O] = (h) => {
if ((!l || h.target && !l.contains(h.target)) && f && p)
return f.call(n, h);
};
const v = _();
document.addEventListener(v, l[O], { passive: !0 });
} catch (n) {
console.error("[maz-ui](vClickOutside)", n);
}
}
function ee(l) {
try {
const s = _();
document.removeEventListener(s, l[O], !1), delete l[O];
} catch (s) {
console.error("[maz-ui](vClickOutside)", s);
}
}
function ve(l, s) {
try {
if (s.value === s.oldValue)
return;
x(l, s);
} catch (n) {
console.error("[maz-ui](vClickOutside)", n);
}
}
const ye = {
mounted: x,
updated: ve,
unmounted: ee
};
function we(l, s) {
let n;
return function(...f) {
clearTimeout(n), n = setTimeout(() => {
l.apply(this, f);
}, s);
};
}
function he(l, s) {
const n = le(l, s);
if (!n)
throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${l.toString()}`);
return n;
}
const ge = ["innerHTML"], be = /* @__PURE__ */ Z({
__name: "MazIcon",
props: {
/** The source path of the SVG file - e.g: `/icons/home.svg` */
src: { type: String, default: void 0 },
/** The path of the folder where the SVG files are stored - e.g: `/icons` */
path: { type: String, default: void 0 },
/** The name of the SVG file - e.g: `home` */
name: { type: String, default: void 0 },
/** The size of the SVG file - e.g: `1em` */
size: { type: String, default: void 0 },
/** The title of the SVG file - e.g: `Home` */
title: { type: String, default: void 0 },
/** The function to transform the source of the SVG file - e.g: `(svg) => svg` */
transformSource: {
type: Function,
default: (l) => l
}
},
emits: ["loaded", "unloaded", "error"],
setup(l, { emit: s }) {
const n = l, f = s, p = {}, v = A(), h = A();
function T() {
try {
return he("mazIconPath");
} catch {
return;
}
}
const u = M(() => n.path ?? T()), d = M(() => n.src ? n.src : u.value ? `${u.value}/${n.name}.svg` : `/${n.name}.svg`);
se(() => {
!n.name && !n.src && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
});
function C(t, a) {
const i = t.querySelectorAll("title");
if (i.length > 0)
i[0].textContent = a;
else {
const r = document.createElementNS("http://www.w3.org/2000/svg", "title");
r.textContent = a, t.append(r);
}
}
function y(t) {
return Object.keys(t).reduce((a, i) => (t[i] !== !1 && t[i] !== null && t[i] !== void 0 && (a[i] = t[i]), a), {});
}
function L(t) {
const a = {}, i = t.attributes;
if (!i)
return a;
for (let r = i.length - 1; r >= 0; r--)
a[i[r].name] = i[r].value;
return a;
}
function B(t) {
t.cloneNode(!0);
const a = n.transformSource(t);
return n.title && C(a, n.title), t.innerHTML;
}
async function P(t) {
p[t] || (p[t] = N(t));
try {
v.value = await p[t], await Y(), f("loaded", h.value);
} catch (a) {
v.value && (v.value = void 0, f("unloaded")), delete p[t], f("error", a);
}
}
function N(t) {
return new Promise((a, i) => {
const r = new XMLHttpRequest();
r.open("GET", t, !0), r.addEventListener("load", () => {
if (r.status >= 200 && r.status < 400)
try {
let k = new DOMParser().parseFromString(r.responseText, "text/xml").querySelectorAll("svg")[0];
k ? (k = n.transformSource(k), a(k)) : i(new Error('Loaded file is not valid SVG"'));
} catch (b) {
i(b);
}
else
i(new Error("Error loading SVG"));
}), r.addEventListener("error", (b) => i(b)), r.send();
});
}
return ie(() => P(d.value)), (t, a) => v.value ? (w(), E("svg", I({
key: 0,
ref_key: "svgElem",
ref: h,
class: "m-icon m-reset-css",
width: "1em",
height: "1em"
}, {
...L(v.value),
...y(t.$attrs)
}, {
style: `font-size: ${l.size}`,
innerHTML: B(v.value)
}), null, 16, ge)) : R("v-if", !0);
}
}), ke = ["id"], ze = ["aria-expanded"], Ce = ["id"], Se = ["onClick"], $e = /* @__PURE__ */ Z({
inheritAttrs: !1,
__name: "MazDropdown",
props: {
style: { default: void 0 },
class: { default: void 0 },
items: { default: () => [] },
open: { type: Boolean },
id: { default: void 0 },
trigger: { default: "both" },
color: { default: "transparent" },
position: { default: "bottom left" },
noCloseOnClick: { type: Boolean },
disabled: { type: Boolean },
noChevron: { type: Boolean },
screenReaderDescription: { default: "Open menu dropdown" },
menuPanelClass: {},
menuPanelStyle: {},
block: { type: Boolean },
dropdownIcon: {},
dropdownIconAnimation: { type: Boolean, default: !0 },
size: { default: "md" }
},
emits: ["menuitem-clicked", "update:open"],
setup(l, { emit: s }) {
const n = l, f = s, p = me({
componentName: "MazDropdown",
providedId: n.id
}), v = F(() => import("./MazBtn.h5GSnFKe.mjs")), h = F(() => import("./MazLink.C92ctqOA.mjs")), T = F(() => import("./chevron-down.BkvtON3b.mjs")), u = A(n.open), d = A(), C = M(() => n.size === "xl" ? "maz-text-lg" : n.size === "lg" || n.size === "md" || n.size === "sm" ? "maz-text-base" : n.size === "xs" || n.size === "mini" ? "maz-text-sm" : "maz-text-lg"), y = we((e) => {
r(e);
}, 200);
function L() {
u.value && r(!1);
}
function B() {
r(!u.value);
}
function P() {
["click"].includes(n.trigger) && B();
}
function N() {
["hover", "both"].includes(n.trigger) && r(!0);
}
function t() {
["hover", "both"].includes(n.trigger) && (u.value === !1 ? r(!0) : y(!0));
}
function a() {
["hover", "both"].includes(n.trigger) && y(!1);
}
function i() {
y(!1);
}
function r(e) {
n.disabled || (u.value = e, f("update:open", e));
}
function b(e) {
return "action" in e;
}
function G(e) {
return "href" in e || "to" in e;
}
async function k(e, c) {
var o;
f("menuitem-clicked", c), await ((o = e.action) == null ? void 0 : o.call(e)), n.noCloseOnClick || U();
}
function U() {
n.noCloseOnClick === !1 && r(!1);
}
function j(e) {
e.key === "Escape" ? (e.preventDefault(), r(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? oe(e) : e.key === "Enter" && typeof d.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${p.value} .menuitem`)[d.value].click(), U());
}
function ne(e) {
["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && u.value === !1 && (e.preventDefault(), r(!0));
}
function oe(e) {
var z;
e.preventDefault();
const c = e.key;
u.value || r(!0);
const o = (z = n.items) == null ? void 0 : z.length;
o && (typeof d.value == "number" ? d.value === o - 1 && c === "ArrowDown" ? d.value = 0 : d.value === 0 && c === "ArrowUp" ? d.value = o - 1 : d.value = c === "ArrowDown" ? d.value + 1 : d.value - 1 : d.value = c === "ArrowDown" ? 0 : o - 1);
}
return K(
() => u.value,
(e) => {
e ? document.addEventListener("keydown", j) : document.removeEventListener("keydown", j), d.value = void 0;
}
), K(
() => n.open,
(e) => r(e)
), (e, c) => Q((w(), E("div", {
id: m(p),
class: S(["m-dropdown m-reset-css", [n.class, { "--block": e.block }]]),
style: X(e.style)
}, [
J("div", {
role: "button",
tabindex: "0",
class: "m-dropdown__wrapper",
"aria-expanded": u.value,
"aria-haspopup": "menu",
onClick: H(P, ["stop"]),
onFocus: N,
onBlur: i,
onKeydown: ne,
onMouseenter: t,
onMouseleave: a
}, [
e.screenReaderDescription || e.$slots["screen-reader-description"] ? (w(), E("span", {
key: 0,
id: `${m(p)}-labelspan`,
class: "maz-sr-only"
}, [
g(e.$slots, "screen-reader-description", {}, () => [
V(
q(e.screenReaderDescription),
1
/* TEXT */
)
])
], 8, Ce)) : R("v-if", !0),
g(e.$slots, "element", { isOpen: u.value }, () => [
W(m(v), I({
"aria-labelledby": `${m(p)}-labelspan`,
color: e.color,
disabled: e.disabled
}, e.$attrs, {
tabindex: "-1",
block: e.block,
size: e.size
}), ae({
default: $(() => [
g(e.$slots, "default")
]),
_: 2
/* DYNAMIC */
}, [
e.noChevron ? void 0 : {
name: "right-icon",
fn: $(() => [
g(e.$slots, "dropdown-icon", { isOpen: u.value }, () => [
typeof e.dropdownIcon == "string" ? (w(), D(be, {
key: 0,
name: e.dropdownIcon,
class: S([{ "--open": u.value && e.dropdownIconAnimation }, C.value])
}, null, 8, ["name", "class"])) : e.dropdownIcon ? (w(), D(ue(e.dropdownIcon), {
key: 1,
class: S([[{ "--open": u.value && e.dropdownIconAnimation }, C.value], "m-dropdown__icon"])
}, null, 8, ["class"])) : (w(), D(m(T), {
key: 2,
class: S([[{ "--open": u.value && e.dropdownIconAnimation }, C.value], "m-dropdown__icon"])
}, null, 8, ["class"]))
])
]),
key: "0"
}
]), 1040, ["aria-labelledby", "color", "disabled", "block", "size"])
])
], 40, ze),
W(de, {
name: "maz-scale-fade",
persisted: ""
}, {
default: $(() => [
Q(J(
"div",
{
role: "menu",
"aria-label": "Menu",
class: S(["menu", [{
"--top": e.position.includes("top"),
"--left": e.position.includes("left"),
"--right": e.position.includes("right"),
"--bottom": e.position.includes("bottom")
}, e.menuPanelClass]]),
tabindex: "-1",
style: X(e.menuPanelStyle),
onFocus: c[0] || (c[0] = (o) => m(y)(!0)),
onBlur: c[1] || (c[1] = (o) => m(y)(!1)),
onMouseenter: c[2] || (c[2] = (o) => ["hover", "both"].includes(e.trigger) ? m(y)(!0) : void 0),
onMouseleave: c[3] || (c[3] = (o) => ["hover", "both"].includes(e.trigger) ? m(y)(!1) : void 0)
},
[
g(e.$slots, "dropdown", { items: e.items }, () => [
(w(!0), E(
ce,
null,
fe(e.items, (o, z) => g(e.$slots, "menuitem", {
key: z,
item: o
}, () => [
G(o) ? (w(), D(m(h), I({
key: 0,
target: o.href ? o.target ?? "_self" : void 0,
to: o.to,
href: o.href,
color: o.color ?? "theme",
ref_for: !0
}, o, {
"underline-only-hover": o.underlineOnlyHover ?? !1,
class: ["menuitem", [
{
"--is-keyboard-selected": d.value === z
},
o.class
]],
tabindex: "-1",
onClick: H(U, ["stop"])
}), {
default: $(() => [
g(e.$slots, "menuitem-label", { item: o }, () => [
V(
q(o.label),
1
/* TEXT */
)
])
]),
_: 2
/* DYNAMIC */
}, 1040, ["target", "to", "href", "color", "underline-only-hover", "class"])) : b(o) ? (w(), E("button", I({
key: 1,
tabindex: "-1",
type: "button",
ref_for: !0
}, o, {
class: ["menuitem menuitem__button", [
{
"--is-keyboard-selected": d.value === z
},
o.class,
`--${o.color ?? "theme"}`
]],
onClick: H((te) => k(o, te), ["stop"])
}), [
g(e.$slots, "menuitem-label", { item: o }, () => [
V(
q(o.label),
1
/* TEXT */
)
])
], 16, Se)) : R("v-if", !0)
])),
128
/* KEYED_FRAGMENT */
))
])
],
38
/* CLASS, STYLE, NEED_HYDRATION */
), [
[pe, u.value]
])
]),
_: 3
/* FORWARDED */
})
], 14, ke)), [
[m(ye), L]
]);
}
});
export {
be as _,
$e as a
};