Spookie/assets/js/components/tabs/TabsGroup.vue

<template lang="html">
	<div class="tabs">
		<ul class="tabs-header">
			<li
				v-for="title in tabTitles"
				:key="title"
				:class="{ selected: title === selectedTitle }"
				class="btn"
				@click="handleClick(title)"
			>
				{{ title }}
			</li>
		</ul>
		<slot/>
	</div>
</template>

<script>
import { ref, provide } from 'vue'

export default {
	name: 'TabsGroup',
	setup(props, { slots }) {
		const tabTitles = ref(slots.default()
			.map((tab) => tab.props.title))
		const selectedTitle = ref(tabTitles.value[0])

		provide('selectedTitle', selectedTitle)
		return {
			selectedTitle,
			tabTitles
		}
	},
	methods: {
		handleClick(title) {
			this.selectedTitle = title
			this.$emit('tabActivated', title)
		}
	},
}
</script>

<style lang="scss">

@import "~styles/app.scss";
.tabs {
	width: auto;
	margin: 0 auto;
}

.tabs-header {
	margin-bottom: 10px;
	list-style: none;
	display: flex;
}

.tabs-header li {
	width: 140px;
	text-align: center;
	padding: 10px 20px;
	margin-right: 10px;
	background-color: #2e2e2e;
	border-radius: 5px;
	color: #999999;
	cursor: pointer;
	transition: 0.4s all ease-out;
}

.tabs-header li.selected {
	background-color: $primary;
	color: $jet-black;
}

.tabs-header li.selected:hover {
	/*border-color: $body-color; */
}

</style>