vuux/dist/es/Tabs/src/hook/useTabs.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { reactive as z, ref as r, computed as x, provide as C, watch as k, onMounted as D, onBeforeUnmount as U, nextTick as S } from "vue";
import { Utils as L } from "@vuux/utils";
const j = (f, w) => {
  const e = z({
    showNavigation: !1,
    disableLeftScroll: !0,
    disableRightScroll: !1,
    scrollOffset: 0
  }), s = r([]), a = r(null), n = r(null), c = r([]), d = r([]), T = x(() => f.position === "top" ? "is-top" : "is-left"), p = x(() => e.showNavigation && f.position === "top"), N = x(() => e.disableLeftScroll), R = (l) => ({
    "is-active": a.value?.id === l.id,
    "is-disabled": !!l.disabled,
    "is-close": f.remove
  }), u = L.debounce(() => {
    const l = n.value;
    if (!l) {
      e.showNavigation = !1;
      return;
    }
    const o = l.offsetWidth, i = l.scrollWidth, t = Math.max(i - o, 0);
    e.showNavigation = i > o, e.scrollOffset > t && (e.scrollOffset = t), e.scrollOffset < 0 && (e.scrollOffset = 0), e.disableLeftScroll = e.scrollOffset <= 0, e.disableRightScroll = e.scrollOffset >= t;
  }, 50), v = L.debounce(() => {
    const l = n.value, o = a.value;
    if (!l || !o)
      return;
    const i = l.offsetWidth, t = Math.max(l.scrollWidth - i, 0), h = s.value.findIndex((y) => y.id === o.id);
    if (h === -1)
      return;
    const O = c.value[h]?.offsetLeft ?? 0, M = O + (d.value[h] ?? c.value[h]?.offsetWidth ?? 0);
    let b = e.scrollOffset;
    O < e.scrollOffset ? b = O : M > e.scrollOffset + i && (b = Math.min(M - i + 20, t)), e.scrollOffset = Math.max(0, Math.min(b, t)), e.disableLeftScroll = e.scrollOffset <= 0, e.disableRightScroll = e.scrollOffset >= t;
  }, 50), m = (l) => {
    l.disabled || a.value?.id !== l.id && (a.value = l, w("select", l), S(() => {
      v();
    }));
  }, g = () => {
    if (s.value.length)
      if (f.active) {
        const l = "name", o = s.value.find((i) => String(i[l]) === String(f.active));
        m(o || s.value[0]);
      } else
        m(s.value[0]);
  }, A = (l) => {
    const o = Array.isArray(l) ? l : [l];
    S(() => {
      for (const i of o)
        s.value.some((t) => t.id === i.id) || s.value.push(i);
      d.value = c.value.map((i) => i.offsetWidth), u(), v(), g();
    });
  }, I = (l) => {
    if (s.value.length <= 1)
      return;
    const o = s.value.findIndex((t) => t.id === l.id);
    if (o === -1)
      return;
    const i = a.value?.id === l.id;
    if (s.value.splice(o, 1), d.value.splice(o, 1), i) {
      const t = s.value[o] ?? s.value[o - 1] ?? s.value[0];
      t && (a.value = t);
    } else if (o < s.value.findIndex((t) => t.id === a.value?.id)) {
      const t = d.value[o] ?? 0;
      e.scrollOffset = Math.max(e.scrollOffset - t, 0);
    }
    w("remove", l), S(() => {
      c.value.length > s.value.length && (c.value.length = s.value.length), u(), v();
    });
  }, E = (l) => {
    if (!n.value)
      return;
    const o = n.value.offsetWidth, i = n.value.scrollWidth - o, t = e.scrollOffset + l * 300;
    e.scrollOffset = Math.min(Math.max(t, 0), i), e.disableLeftScroll = e.scrollOffset === 0, e.disableRightScroll = e.scrollOffset >= i;
  }, W = () => {
    u(), v();
  };
  return C("tabsContext", {
    addTabs: A,
    activeTab: a
  }), k(
    () => s.value.length,
    () => {
      !a.value && s.value.length > 0 && g();
    }
  ), D(() => {
    g(), u(), window.addEventListener("resize", W);
  }), U(() => {
    window.removeEventListener("resize", W);
  }), {
    state: e,
    list: s,
    headDataEl: n,
    headItemEl: c,
    classNames: T,
    isArrow: p,
    isDisabled: N,
    tabClassNames: R,
    handleSelectTab: m,
    handleRemoveTab: I,
    handleScrollTabs: E
  };
};
export {
  j as useTabs
};