@indielayer/ui/lib/components/tab/TabGroup.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as B, ref as r, watchEffect as z, reactive as E, computed as o, provide as V, watch as G, onMounted as N, openBlock as $, createElementBlock as q, createElementVNode as f, normalizeClass as v, unref as n, normalizeStyle as F, createVNode as L, withCtx as M, renderSlot as O, withDirectives as W, vShow as X, nextTick as j } from "vue";
import { useMutationObserver as D, useResizeObserver as K } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { injectTabGroupKey as P } from "../../composables/keys.js";
import { useCommon as b } from "../../composables/useCommon.js";
import { useColors as A } from "../../composables/useColors.js";
import { useTheme as H } from "../../composables/useTheme.js";
import I from "../scroll/Scroll.vue.js";
import { useThrottleFn as J } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
const Q = {
  ...b.validators(),
  variant: ["line", "block"],
  align: ["left", "center", "right"]
}, U = {
  ...b.props(),
  ...A.props("primary"),
  modelValue: [String, Number],
  variant: {
    type: String,
    default: "line"
  },
  align: {
    type: String,
    default: "left"
  },
  ghost: Boolean,
  grow: Boolean,
  exact: Boolean,
  fullWidth: {
    type: Boolean,
    default: !0
  }
}, Y = {
  name: "XTabGroup",
  validators: Q
}, ne = /* @__PURE__ */ B({
  ...Y,
  props: U,
  emits: ["update:modelValue"],
  setup(k, { emit: w }) {
    const t = k, g = w, u = r(null), R = r(null), i = r(null), l = r(null), d = r(null), a = r();
    z(() => {
      a.value = t.modelValue;
    });
    const _ = E({
      active: o(() => a.value),
      variant: o(() => t.variant),
      ghost: o(() => t.ghost),
      grow: o(() => t.grow),
      exact: o(() => t.exact),
      size: o(() => t.size),
      color: o(() => t.color)
    });
    function h(e) {
      a.value = e, g("update:modelValue", e);
    }
    V(P, {
      tabsContentRef: d,
      activateTab: h,
      state: _
    });
    const p = J(async (e) => {
      var y;
      if (typeof e > "u")
        return;
      await j();
      const s = (y = l.value) == null ? void 0 : y.querySelector(`[data-value="${e}"]`);
      if (!s || !i.value || (i.value.style.left = `${s.offsetLeft}px`, i.value.style.width = `${s.offsetWidth}px`, !l.value || !u.value))
        return;
      const C = s.offsetLeft - (l.value.getBoundingClientRect().width - s.getBoundingClientRect().width) / 2;
      u.value.scrollEl && u.value.scrollEl.scrollTo({ left: C, behavior: "smooth" });
    }, 100, !0), m = r(!0);
    function S() {
      var e;
      (e = l.value) != null && e.querySelector(".router-link-active") ? m.value = !0 : (h(null), m.value = !1);
    }
    G(() => a.value, (e) => {
      p(e);
    }), N(() => {
      var e;
      (e = l.value) != null && e.querySelector(".x-link") && D(l.value, S, {
        attributes: !0,
        subtree: !0,
        attributeFilter: ["class"]
      }), p(a.value);
    }), K(l, () => {
      p(a.value);
    });
    const { styles: T, classes: c, className: x } = H("TabGroup", {}, t);
    return (e, s) => ($(), q("div", null, [
      f("div", {
        ref_key: "wrapperRef",
        ref: R,
        class: v(["relative", [
          n(x),
          n(c).wrapper
        ]]),
        style: F(n(T))
      }, [
        L(I, {
          ref_key: "scrollRef",
          ref: u,
          scrollbar: !1,
          horizontal: "",
          mousewheel: "",
          class: v(n(c).scroller)
        }, {
          default: M(() => [
            f("div", {
              ref_key: "tabsRef",
              ref: l,
              class: v(["relative", n(c).list])
            }, [
              O(e.$slots, "default")
            ], 2),
            W(f("div", {
              ref_key: "trackerRef",
              ref: i,
              class: v(n(c).tracker)
            }, null, 2), [
              [X, m.value]
            ])
          ]),
          _: 3
        }, 8, ["class"])
      ], 6),
      f("div", {
        ref_key: "tabsContentRef",
        ref: d
      }, null, 512)
    ]));
  }
});
export {
  ne as default
};