import { createElementBlock as n, openBlock as r, normalizeClass as o, createElementVNode as a, Fragment as c, renderList as d, renderSlot as f, normalizeProps as h, guardReactiveProps as u, toDisplayString as v, normalizeStyle as m } from "vue";
import { _ as p } from "./install-CMReC2O4.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 || !this.$refs[e] || !this.$refs[e][0])
        return;
      const s = this.$refs[e][0];
      this.activeLineWidth = s.clientWidth, this.activeLineOffset = s.offsetLeft;
    }
  }
}, y = ["value", "onClick"], b = { style: { display: "block" } }, g = { class: "wt-tabs__underline" };
function L(e, s, i, w, $, l) {
  return r(), n("nav", {
    class: o([{
      "wt-tabs--wide": i.wide
    }, "wt-tabs"])
  }, [
    (r(!0), n(c, null, d(i.tabs, (t) => (r(), n("button", {
      key: t.value,
      class: o([{
        "wt-tab--highlight": t.value === i.current.value
      }, "wt-tab typo-body-1-bold"]),
      value: t.text,
      type: "button",
      onClick: (k) => l.open(t)
    }, [
      f(e.$slots, t.value, h(u({ tab: t, current: i.current })), () => [
        a("span", b, v(t.text), 1)
      ], !0)
    ], 10, y))), 128)),
    a("div", g, [
      a("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", L], ["__scopeId", "data-v-7f4be02f"]]);
export {
  O as default
};
