shadcn-vue/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
zernonia f8f3fc754f
feat: support tailwind prefix (#619)
* chore: enable tw prefix

* chore: enable tw  prefix during init

* fix: cater for cn function

* fix: prevent transforming importDeclaration

* chore: update registry to make sure tailwind prefix parse correctly

* chore: fix wrong import

* chore: checkpoint

* refactor: goodbye ts-morph

* chore: remove ts-morpg

* chore: update test

* chore: cleanup

* chore: fix test

* fix: move vue-metamorph to dep

* refactor: transform tw prefix by specific case

* fix: transform-sfc not parsing .ts file

* fix: prefix double quote

* chore: patch vue-eslint-parser

* refactor: transform to cater only for class in sfc

* refactor: replace detypes with @unovue/detypes

* chore: update test snapshot

* chore: update pnpm-lock, fix import

* chore: bump detypes version

* chore: update deps
2024-10-14 19:39:58 +08:00

30 lines
1.0 KiB
Vue

<script setup lang="ts">
import { cn } from '@/lib/utils'
import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TabsTrigger
v-bind="forwardedProps"
:class="cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
props.class,
)"
>
<span class="truncate">
<slot />
</span>
</TabsTrigger>
</template>