import { createElementBlock as s, openBlock as a, normalizeClass as o, createElementVNode as r, Fragment as c, renderList as d, renderSlot as u, normalizeProps as f, guardReactiveProps as h, toDisplayString as v, normalizeStyle as m } from "vue";
import { _ as p } from "./install-BuMO14Rb.js";
const _ = {
  name: "WtTabs",
  model: {
    prop: "current",
    event: "change"
  },
  props: {
    current: {
      type: Object,
      default: () => ({})
    },
    tabs: {
      type: Array,
      default: () => []
    },
    wide: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    "change"
  ],
  data: () => ({
    activeLineWidth: 0,
    activeLineOffset: 0
  }),
  methods: {
    open(e) {
      this.$emit("change", e), this.moveActiveLine(e);
    },
    moveActiveLine(e) {
      if (!this.current || !this.$refs?.[e]?.[0]) return;
      const i = this.$refs[e][0];
      this.activeLineWidth = i.clientWidth, this.activeLineOffset = i.offsetLeft;
    }
  }
}, y = ["value", "onClick"], b = { style: { display: "block" } }, g = { class: "wt-tabs__underline" };
function w(e, i, n, L, k, l) {
  return a(), s("nav", {
    class: o([{
      "wt-tabs--wide": n.wide
    }, "wt-tabs"])
  }, [
    (a(!0), s(c, null, d(n.tabs, (t) => (a(), s("button", {
      key: t.value,
      class: o([{
        "wt-tab--highlight": t.value === n.current.value
      }, "wt-tab typo-body-1-bold"]),
      value: t.text,
      type: "button",
      onClick: ($) => l.open(t)
    }, [
      u(e.$slots, t.value, f(h({ tab: t, current: n.current })), () => [
        r("span", b, v(t.text), 1)
      ], !0)
    ], 10, y))), 128)),
    r("div", g, [
      r("div", {
        style: m({
          width: `${e.activeLineWidth}px`,
          transform: `translateX(${e.activeLineOffset}px)`
        }),
        class: "wt-tab__underline--highlight"
      }, null, 4)
    ])
  ], 2);
}
const O = /* @__PURE__ */ p(_, [["render", w], ["__scopeId", "data-v-a6f6f0f3"]]);
export {
  O as default
};
