50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
<template>
|
|
<UTabs
|
|
:items="tabItems"
|
|
class="w-full"
|
|
:unmount-on-hide="false"
|
|
variant="link"
|
|
>
|
|
<template
|
|
v-for="item in tabItems"
|
|
#[item.slot]="{ item: slotItem }"
|
|
>
|
|
<div class="mt-4">
|
|
<component :is="getSlotContent(slotItem)" />
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TabsItem } from '@nuxt/ui'
|
|
|
|
const slots = useSlots()
|
|
|
|
const slotContents = ref<Record<string, any>>({})
|
|
|
|
const tabItems = computed(() => {
|
|
const defaultSlots = slots.default?.() || []
|
|
return defaultSlots
|
|
.filter(slot => slot.type === 'div' && slot.props)
|
|
.map((slot, index) => {
|
|
const label = slot.props?.label || `Tab ${index + 1}`
|
|
const icon = slot.props?.icon
|
|
const slotName = `tab-${index}`
|
|
|
|
slotContents.value[slotName] = slot
|
|
|
|
return {
|
|
label,
|
|
icon,
|
|
slot: slotName
|
|
} satisfies TabsItem
|
|
})
|
|
})
|
|
|
|
function getSlotContent(item: TabsItem) {
|
|
if (!item.slot) return null
|
|
return slotContents.value[item.slot]
|
|
}
|
|
</script>
|