You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.1 KiB
43 lines
1.1 KiB
<template>
|
|
<div class="flex">
|
|
<router-link
|
|
v-for="(tab, index) in tabs"
|
|
:key="tab.title"
|
|
class="px-4 py-2 font-semibold"
|
|
:class="{
|
|
'text-primary border-b-2 border-primary': selectedTab === index,
|
|
'text-gray-50 border-b-2 border-gray-50 hover:text-primary hover:border-b-2 hover:border-primary': selectedTab !== index,
|
|
}"
|
|
:to="tab.to"
|
|
role="tab"
|
|
:aria-selected="selectedTab === index ? 'true' : 'false'"
|
|
>
|
|
{{ tab.title }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* Component that will render a tab interface WITHOUT content. Every tab should be a router link. So, when user
|
|
* change tab the route of the url will change
|
|
*/
|
|
defineProps({
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
validator: (value) => {
|
|
let isTabsCorrect = value.every(e => Object.hasOwn(e, 'title') && Object.hasOwn(e, 'to'))
|
|
if (!isTabsCorrect) {
|
|
return false
|
|
}
|
|
let titles = value.map(e => e.title)
|
|
return (new Set(titles)).size === titles.length
|
|
}
|
|
},
|
|
selectedTab: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
})
|
|
</script>
|
|
|