maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
178 lines (177 loc) • 5.69 kB
JavaScript
import { inject as R, defineComponent as N, defineAsyncComponent as I, ref as d, computed as O, onBeforeMount as V, onMounted as w, watch as W, openBlock as f, createElementBlock as p, normalizeClass as v, createElementVNode as j, normalizeStyle as S, Fragment as q, renderList as H, renderSlot as z, createTextVNode as B, toDisplayString as k, createBlock as U, unref as Q, withCtx as X, createCommentVNode as D } from "vue";
import '../assets/MazTabsBar.yIJ7lCu6.css';function F(n) {
return new Promise((o) => setTimeout(o, n));
}
function G(n, o) {
const l = R(n, o);
if (!l)
throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${n.toString()}`);
return l;
}
const J = ["disabled", "onClick"], K = /* @__PURE__ */ N({
__name: "MazTabsBar",
props: {
items: {},
persistent: { type: Boolean },
queryParam: { default: "tab" },
block: { type: Boolean },
noElevation: { type: Boolean },
autoScroll: { type: Boolean, default: !0 }
},
setup(n) {
const o = n, l = I(() => import("./MazBadge.AdlIDWRs.mjs")), { currentTab: r, updateCurrentTab: c } = G("maz-tabs");
function L(e) {
c(e + 1), o.persistent && $(e + 1);
}
const g = d(), m = d([]);
function y(e) {
return r.value === e + 1;
}
function T({
mazBtn: e,
index: t
}) {
m.value[t] = e && "$el" in e ? e.$el : e;
}
const i = O(
() => o.items.map((e) => ({
label: typeof e == "string" ? e : e.label,
disabled: typeof e == "string" ? !1 : e.disabled ?? !1,
badge: typeof e == "string" ? void 0 : e.badge
}))
), h = d(), b = d(!1);
async function _() {
if (!o.autoScroll)
return;
await F(150);
const e = g.value, t = m.value[r.value - 1];
if (!e || !t)
return;
const a = 50;
if (t.offsetLeft - a < e.scrollLeft || t.offsetLeft + t.offsetWidth > e.scrollLeft + e.clientWidth) {
const A = window.getComputedStyle(e, "padding-left").paddingLeft, E = Number(A.slice(0, -2));
e.scrollTo({
left: t.offsetLeft - E - a,
behavior: b.value ? "smooth" : "instant"
});
}
if (typeof r.value != "number")
return;
const s = (t == null ? void 0 : t.offsetWidth) ?? 0, u = (t == null ? void 0 : t.offsetHeight) ?? 0, M = (t == null ? void 0 : t.offsetLeft) ?? 0;
h.value = {
transform: `translateX(${M}px)`,
width: `${s}px`,
height: `${u}px`
}, b.value = !0;
}
function C(e, t) {
return t ? {} : r.value === e + 1 ? "color: var(--maz-color-text)" : "color: var(--maz-color-muted)";
}
V(() => {
(r.value < 1 || r.value > i.value.length) && console.error(
`[maz-ui](MazTabsBar) The model-value should be between 1 and ${i.value.length}`
);
}), w(() => {
(o.persistent || r.value) && _();
}), W(
() => [r.value, i.value],
() => {
_();
}
);
function P() {
const e = new URL(window.location.href);
return Number(e.searchParams.get(o.queryParam));
}
function $(e) {
const t = new URL(window.location.href);
t.searchParams.set(o.queryParam, String(e)), window.history.replaceState({}, document.title, t.toString());
}
return w(() => {
o.persistent && c(P() || r.value || 1);
}), (e, t) => (f(), p(
"div",
{
ref_key: "tabsBarRef",
ref: g,
class: v(["m-tabs-bar m-reset-css", {
"--block": e.block,
"--elevation": !e.noElevation
}])
},
[
j(
"div",
{
class: v(["m-tabs-bar__indicator", { "--animated": b.value }]),
style: S([h.value])
},
null,
6
/* CLASS, STYLE */
),
(f(!0), p(
q,
null,
H(i.value, (a, s) => (f(), p("button", {
key: s,
ref_for: !0,
ref: (u) => T({ mazBtn: u, index: s }),
class: v([{ "--active": y(s), "--disabled": a.disabled }, "m-tabs-bar__item"]),
disabled: a.disabled,
style: S(C(s, a.disabled)),
onClick: (u) => a.disabled ? void 0 : L(s)
}, [
z(e.$slots, "item", {
item: a,
active: y(s),
index: s
}, () => [
B(
k(a.label) + " ",
1
/* TEXT */
),
a.badge ? (f(), U(Q(l), {
key: 0,
color: a.badge.color,
pastel: a.badge.pastel,
outline: a.badge.outline,
"rounded-size": a.badge.roundedSize,
size: a.badge.size ?? "0.7rem",
class: "m-tabs-bar__item__badge"
}, {
default: X(() => [
z(e.$slots, "badge-content", {
content: a.badge.content
}, () => [
B(
k(a.badge.content),
1
/* TEXT */
)
], !0)
]),
_: 2
/* DYNAMIC */
}, 1032, ["color", "pastel", "outline", "rounded-size", "size"])) : D("v-if", !0)
], !0)
], 14, J))),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
));
}
}), Y = (n, o) => {
const l = n.__vccOpts || n;
for (const [r, c] of o)
l[r] = c;
return l;
}, x = /* @__PURE__ */ Y(K, [["__scopeId", "data-v-004686b3"]]);
export {
x as M,
Y as _
};