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@10.2.0_vue@3.3.9/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@10.2.0_vue@3.3.9/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
};
