adverich-kun-ui
Version:
Una librería de componentes Vue.js con Tailwind CSS
73 lines (72 loc) • 2.68 kB
JavaScript
import { ref as h, computed as S, watch as w, nextTick as d } from "vue";
import { useRoute as V, useRouter as $ } from "vue-router";
function P(T) {
const {
modelValue: l,
emit: g,
tabsWrapper: a,
tabsContainer: z,
multiple: c = !1,
mandatory: v = !1,
centerActive: m = !1,
direction: s = "horizontal"
} = T, i = h(c ? [] : null), r = h([]);
V(), $();
const W = (t) => {
t && !r.value.includes(t) && r.value.push(t);
}, p = (t) => r.value.findIndex((e) => {
var o;
return ((o = e == null ? void 0 : e.dataset) == null ? void 0 : o.value) == t;
}), A = () => {
if (c)
i.value = (Array.isArray(l) ? l : []).map(p).filter((t) => t >= 0);
else {
const t = p(l);
i.value = t >= 0 ? t : null, m && t >= 0 && x(t);
}
}, x = (t) => d(() => {
const e = a.value, o = r.value[t];
if (e && o) {
const n = s === "horizontal" ? o.offsetLeft + o.offsetWidth / 2 - e.clientWidth / 2 : o.offsetTop + o.offsetHeight / 2 - e.clientHeight / 2;
s === "horizontal" ? e.scrollTo({ left: n, behavior: "smooth" }) : e.scrollTo({ top: n, behavior: "smooth" });
}
}), B = S(() => {
if (c || i.value == null) return null;
const t = r.value[i.value];
return t ? s === "horizontal" ? { left: `${t.offsetLeft}px`, width: `${t.offsetWidth}px` } : { top: `${t.offsetTop}px`, height: `${t.offsetHeight}px`, width: "2px", left: "0" } : null;
}), b = h(!1), y = h(!1), f = () => {
const t = a.value, e = z.value;
!t || !e || (b.value = s === "horizontal" ? t.scrollLeft > 0 : t.scrollTop > 0, y.value = s === "horizontal" ? e.scrollWidth > t.clientWidth + t.scrollLeft : e.scrollHeight > t.clientHeight + t.scrollTop);
}, u = 100, H = () => {
const t = a.value;
t && (s === "horizontal" ? t.scrollBy({ left: -u, behavior: "smooth" }) : t.scrollBy({ top: -u, behavior: "smooth" }), f());
}, I = () => {
const t = a.value;
t && (s === "horizontal" ? t.scrollBy({ left: u, behavior: "smooth" }) : t.scrollBy({ top: u, behavior: "smooth" }), f());
}, L = (t) => {
let e;
if (c) {
const o = Array.isArray(l) ? [...l] : [], n = o.indexOf(t);
n >= 0 ? (v && o.length === 1 || o.splice(n, 1)) && (e = o) : o.push(t) && (e = o);
} else if (e = t === l && v ? l : t, m) {
const o = p(e);
o >= 0 && x(o);
}
g("update:modelValue", e);
};
return w(() => l, () => {
A(), d(f);
}, { immediate: !0 }), w(r, () => d(f), { deep: !0 }), {
activeIndexes: i,
sliderStyle: B,
registerTab: W,
showPrev: b,
showNext: y,
scrollNext: I,
scrollPrev: H,
select: L
};
}
export {
P as useTabsGroup
};