shadcn-vue/apps/www/.vitepress/theme/components/TabsMarkdown.vue
Sadegh Barati d34c620055
chore: lint and enable Volar hybrid mode (#419)
* chore: update deps

* feat: enable Volar hybrid mode

* chore: lint

* chore: build registry
2024-03-20 22:29:42 +03:30

23 lines
926 B
Vue

<script setup lang="ts">
import { computed, useSlots } from 'vue'
import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
const slots = useSlots()
const tabs = computed(() => slots.default?.()?.map(i => i?.props?.title as string) ?? [])
</script>
<template>
<Tabs :default-value="tabs[0]" class="relative mr-auto w-full">
<div class="flex items-center justify-between">
<TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
<TabsTrigger v-for="tab in tabs" :key="tab" :value="tab" class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none">
{{ tab }}
</TabsTrigger>
</TabsList>
</div>
<slot />
</Tabs>
</template>