fix: button should use primitive

This commit is contained in:
zernonia 2023-12-06 09:53:49 +08:00
parent 58bad186dc
commit bf4e8862c1
2 changed files with 12 additions and 8 deletions

View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { buttonVariants } from '.' import { buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface Props { interface Props extends PrimitiveProps {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant'] variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size'] size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
as?: string as?: string
@ -14,10 +15,11 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<component <Primitive
:is="as" :as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')" :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
> >
<slot /> <slot />
</component> </Primitive>
</template> </template>

View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { buttonVariants } from '.' import { buttonVariants } from '.'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
interface Props { interface Props extends PrimitiveProps {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant'] variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size'] size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
as?: string as?: string
@ -14,10 +15,11 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<component <Primitive
:is="as" :as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')" :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
> >
<slot /> <slot />
</component> </Primitive>
</template> </template>