29 lines
807 B
Vue
29 lines
807 B
Vue
<script setup lang="ts">
|
|
defineProps<{ tabs: { key: string; label: string }[]; modelValue: string }>();
|
|
const emit = defineEmits<{ "update:modelValue": [key: string] }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="border-border flex border-b">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
type="button"
|
|
class="text-muted border-0 border-b-2 border-transparent bg-transparent px-6 py-3 text-sm transition-colors"
|
|
:class="
|
|
tab.key === modelValue
|
|
? 'border-primary text-primary font-semibold'
|
|
: 'hover:text-primary'
|
|
"
|
|
@click="emit('update:modelValue', tab.key)"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
<div class="py-5">
|
|
<slot :active="modelValue" />
|
|
</div>
|
|
</div>
|
|
</template>
|