43 lines
997 B
Vue
43 lines
997 B
Vue
<template>
|
|
<div>
|
|
<nav class="tabs tabs-bordered mb-6 overflow-x-auto flex-nowrap" role="tablist" :aria-label="ariaLabel">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
type="button"
|
|
class="tab"
|
|
:class="{ 'tab-active': modelValue === tab.key }"
|
|
role="tab"
|
|
:aria-selected="modelValue === tab.key"
|
|
@click="emit('update:modelValue', tab.key)"
|
|
>
|
|
{{ tab.label }}
|
|
<span v-if="tab.count !== undefined && tab.count > 0" class="badge badge-outline badge-xs ml-1.5">
|
|
{{ tab.count }}
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
<div role="tabpanel">
|
|
<slot :name="`tab-${modelValue}`" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export interface TabDefinition {
|
|
key: string
|
|
label: string
|
|
count?: number
|
|
}
|
|
|
|
defineProps<{
|
|
tabs: TabDefinition[]
|
|
modelValue: string
|
|
ariaLabel?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
</script>
|