import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { Fragment as t, createElementBlock as n, createElementVNode as r, guardReactiveProps as i, normalizeClass as a, normalizeProps as o, normalizeStyle as s, openBlock as c, renderList as l, renderSlot as u, toDisplayString as d } from "vue";
//#region src/components/wt-tabs/wt-tabs.vue
var f = {
	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;
			let t = this.$refs[e][0];
			this.activeLineWidth = t.clientWidth, this.activeLineOffset = t.offsetLeft;
		}
	}
}, p = ["value", "onClick"], m = { style: { display: "block" } }, h = { class: "wt-tabs__underline" };
function g(e, f, g, _, v, y) {
	return c(), n("nav", { class: a([{ "wt-tabs--wide": g.wide }, "wt-tabs"]) }, [(c(!0), n(t, null, l(g.tabs, (t) => (c(), n("button", {
		key: t.value,
		class: a([{ "wt-tab--highlight": t.value === g.current.value }, "wt-tab typo-body-1-bold"]),
		value: t.text,
		type: "button",
		onClick: (e) => y.open(t)
	}, [u(e.$slots, t.value, o(i({
		tab: t,
		current: g.current
	})), () => [r("span", m, d(t.text), 1)], !0)], 10, p))), 128)), r("div", h, [r("div", {
		style: s({
			width: `${e.activeLineWidth}px`,
			transform: `translateX(${e.activeLineOffset}px)`
		}),
		class: "wt-tab__underline--highlight"
	}, null, 4)])], 2);
}
var _ = /*#__PURE__*/ e(f, [["render", g], ["__scopeId", "data-v-a6f6f0f3"]]);
//#endregion
export { _ as default };
