maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
270 lines (269 loc) • 8.02 kB
JavaScript
import { openBlock as p, createElementBlock as g, createElementVNode as u, computed as $, useId as V, defineComponent as w, ref as f, onMounted as O, onUnmounted as B, normalizeClass as b, normalizeStyle as k, renderSlot as h, withDirectives as E, vShow as z, mergeModels as A, useModel as x, mergeProps as I, useSlots as L, Fragment as j, renderList as F, createBlock as N, withCtx as M, unref as y, createVNode as S } from "vue";
import './assets/MazAccordion.DHZxplwt.css';const R = {
xmlns: "http://www.w3.org/2000/svg",
width: "1em",
height: "1em",
fill: "none",
viewBox: "0 0 24 24"
};
function P(r, t) {
return p(), g("svg", R, t[0] || (t[0] = [
u(
"path",
{
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: "M12 4.5v15m7.5-7.5h-15"
},
null,
-1
/* HOISTED */
)
]));
}
const T = { render: P };
function U({
componentName: r,
providedId: t
}) {
return $(() => t ?? `${r}-${V().replace(/:/g, "")}`);
}
const q = { class: "inner" }, D = /* @__PURE__ */ w({
__name: "MazCardSpotlight",
props: {
color: { default: "primary" },
noElevation: { type: Boolean, default: !1 },
padding: { type: Boolean, default: !0 },
contentClass: { default: void 0 },
contentStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
innerOpacity: { default: 0.95 }
},
setup(r) {
const t = r, l = f(), o = f(), s = f(!1);
function m({ clientX: d, clientY: c }) {
var e, _, n;
s.value = !0;
const v = (e = o.value) == null ? void 0 : e.getBoundingClientRect();
v && ((n = (_ = l.value) == null ? void 0 : _.animate) == null || n.call(
_,
[
{
transform: `translate(${d - v.left - v.width / 2}px,${c - v.top - v.height / 2}px)`
}
],
{
duration: 300,
fill: "forwards"
}
));
}
const a = $(() => `var(--maz-color-${t.color}-alpha)`), i = $(() => `var(--maz-color-${t.color}-alpha-20)`);
return O(() => {
window.addEventListener("mousemove", m);
}), B(() => {
window.removeEventListener("mousemove", m);
}), (d, c) => (p(), g(
"div",
{
class: b(["m-card-spotlight m-reset-css", { "maz-elevation": !d.noElevation }]),
style: k({ backgroundColor: i.value, "--inner-opacity": d.innerOpacity })
},
[
u("div", q, [
u(
"div",
{
class: b(["content", [{ "maz-p-4": d.padding }, d.contentClass]])
},
[
h(d.$slots, "default", {}, void 0, !0)
],
2
/* CLASS */
)
]),
E(u(
"div",
{
ref_key: "blobElement",
ref: l,
class: "blob",
style: k({ backgroundColor: a.value })
},
null,
4
/* STYLE */
), [
[z, s.value]
]),
E(u(
"div",
{
ref_key: "fakeblobElement",
ref: o,
class: "fakeblob"
},
null,
512
/* NEED_PATCH */
), [
[z, s.value]
])
],
6
/* CLASS, STYLE */
));
}
}), C = (r, t) => {
const l = r.__vccOpts || r;
for (const [o, s] of t)
l[o] = s;
return l;
}, H = /* @__PURE__ */ C(D, [["__scopeId", "data-v-4f773edc"]]), W = ["aria-hidden"], G = /* @__PURE__ */ w({
inheritAttrs: !1,
__name: "MazExpandAnimation",
props: /* @__PURE__ */ A({
duration: { default: "300ms" },
timingFunction: { default: "ease-in-out" }
}, {
modelValue: { type: Boolean },
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(r) {
const t = x(r, "modelValue"), l = f(!t.value), o = f();
function s() {
t.value || (l.value = !0);
}
function m() {
t.value && (l.value = !1);
}
return O(() => {
var a, i;
(a = o.value) == null || a.addEventListener("transitionstart", s, !1), (i = o.value) == null || i.addEventListener("transitionend", m, !1);
}), B(() => {
var a, i;
(a = o.value) == null || a.removeEventListener("transitionstart", s, !1), (i = o.value) == null || i.removeEventListener("transitionend", m, !1);
}), (a, i) => (p(), g("div", {
ref_key: "expandAnimationRef",
ref: o,
class: b(["m-expand-animation m-reset-css", { "m-expand-animation--expanded": t.value }]),
"aria-hidden": !t.value,
role: "region",
style: k([{ "--expand-animation-duration": a.duration, "--expand-animation-timing-function": a.timingFunction }])
}, [
u(
"div",
I({ class: "m-expand-animation__inner" }, a.$attrs, {
class: {
"--overflow-hidden": l.value
}
}),
[
h(a.$slots, "default", {}, void 0, !0)
],
16
/* FULL_PROPS */
)
], 14, W));
}
}), J = /* @__PURE__ */ C(G, [["__scopeId", "data-v-058a2912"]]), K = {
class: "m-accordion m-reset-css",
role: "presentation"
}, Q = ["id", "aria-controls", "aria-expanded", "onClick"], X = /* @__PURE__ */ w({
__name: "MazAccordion",
props: {
id: { default: void 0 },
modelValue: { default: 0 },
contentClass: { default: void 0 }
},
emits: ["update:model-value"],
setup(r, { emit: t }) {
const l = r, o = t, s = U({
componentName: "MazAccordion",
providedId: l.id
}), m = L(), a = $(
() => Object.keys(m).filter((e) => e.startsWith("title-")).length
), i = f(l.modelValue), d = $({
get: () => l.modelValue || i.value,
set: (e) => {
i.value = e, o("update:model-value", e);
}
});
function c(e) {
return d.value === e;
}
function v(e) {
d.value === e ? (i.value = 0, o("update:model-value", 0)) : (i.value = e, o("update:model-value", e));
}
return (e, _) => (p(), g("div", K, [
(p(!0), g(
j,
null,
F(a.value, (n) => (p(), N(
H,
{
key: n,
class: "m-accordion__spotlight",
padding: !1
},
{
default: M(() => [
u("button", {
id: `step-${n}-${y(s)}`,
class: "m-accordion__header",
"aria-controls": `step-${n}-${y(s)}`,
"aria-expanded": c(n),
onClick: (Y) => v(n)
}, [
h(e.$slots, `title-${n}`, {
isOpen: c(n)
}, void 0, !0),
S(y(T), {
class: b(["header-icon", { "--rotate": c(n) }])
}, null, 8, ["class"])
], 8, Q),
S(J, {
"animation-duration": "300ms",
"model-value": c(n),
"aria-labelledby": `step-${n}-${y(s)}`
}, {
default: M(() => [
u(
"div",
{
class: b(["m-accordion__content", e.contentClass])
},
[
h(e.$slots, "content", {
isOpen: c(n)
}, void 0, !0),
h(e.$slots, `content-${n}`, {
isOpen: c(n)
}, void 0, !0)
],
2
/* CLASS */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["model-value", "aria-labelledby"])
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
))),
128
/* KEYED_FRAGMENT */
))
]));
}
}), ee = /* @__PURE__ */ C(X, [["__scopeId", "data-v-6a945de6"]]);
export {
ee as default
};