adverich-kun-ui/dist/components/KunTabs/src/composables/useTabsGroup.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as h, computed as L, watch as v, nextTick as m } from "vue";
import { useRoute as S, useRouter as $ } from "vue-router";
function k(z) {
  const {
    modelValue: l,
    emit: x,
    tabsWrapper: a,
    tabsContainer: W,
    multiple: c = !1,
    mandatory: b = !1,
    centerActive: y = !1,
    direction: s = "horizontal"
  } = z, i = h(c ? [] : null), r = h([]), p = S();
  $();
  const A = (t) => {
    t && !r.value.includes(t) && r.value.push(t);
  }, d = (t) => r.value.findIndex((e) => {
    var o;
    return ((o = e == null ? void 0 : e.dataset) == null ? void 0 : o.value) == t;
  }), B = () => {
    if (c)
      i.value = (Array.isArray(l) ? l : []).map(d).filter((t) => t >= 0);
    else {
      const t = d(l);
      i.value = t >= 0 ? t : null, y && t >= 0 && w(t);
    }
  }, w = (t) => m(() => {
    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" });
    }
  }), H = L(() => {
    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;
  }), T = h(!1), g = h(!1), f = () => {
    const t = a.value, e = W.value;
    !t || !e || (T.value = s === "horizontal" ? t.scrollLeft > 0 : t.scrollTop > 0, g.value = s === "horizontal" ? e.scrollWidth > t.clientWidth + t.scrollLeft : e.scrollHeight > t.clientHeight + t.scrollTop);
  }, u = 100, P = () => {
    const t = a.value;
    t && (s === "horizontal" ? t.scrollBy({ left: -u, behavior: "smooth" }) : t.scrollBy({ top: -u, behavior: "smooth" }), f());
  }, V = () => {
    const t = a.value;
    t && (s === "horizontal" ? t.scrollBy({ left: u, behavior: "smooth" }) : t.scrollBy({ top: u, behavior: "smooth" }), f());
  }, I = (t) => {
    let e;
    if (c) {
      const o = Array.isArray(l) ? [...l] : [], n = o.indexOf(t);
      n >= 0 ? (b && o.length === 1 || o.splice(n, 1)) && (e = o) : o.push(t) && (e = o);
    } else if (e = t === l && b ? l : t, y) {
      const o = d(e);
      o >= 0 && w(o);
    }
    x("update:modelValue", e);
  };
  return v(() => p.fullPath, () => {
    l !== p.fullPath && x("update:modelValue", p.fullPath);
  }), v(() => l, () => {
    B(), m(f);
  }, { immediate: !0 }), v(r, () => m(f), { deep: !0 }), {
    activeIndexes: i,
    sliderStyle: H,
    registerTab: A,
    showPrev: T,
    showNext: g,
    scrollNext: V,
    scrollPrev: P,
    select: I
  };
}
export {
  k as useTabsGroup
};