fix: useAttrs to prevent class duplication

This commit is contained in:
sadeghbarati 2023-10-02 13:09:04 +03:30
parent ec7382bec8
commit 68337c5250
3 changed files with 23 additions and 4 deletions

View File

@ -1,14 +1,21 @@
<script lang="ts" setup>
import { useAttrs } from 'vue'
import { useFormField } from './useFormField'
import { cn } from '@/lib/utils'
defineOptions({
inheritAttrs: false,
})
const { formDescriptionId } = useFormField()
const { class: className, ...rest } = useAttrs()
</script>
<template>
<p
:id="formDescriptionId"
:class="cn('text-sm text-muted-foreground', $attrs.class ?? '')"
:class="cn('text-sm text-muted-foreground', className ?? '')"
v-bind="rest"
>
<slot />
</p>

View File

@ -6,16 +6,22 @@ export const FORMI_TEM_INJECTION_KEY
</script>
<script lang="ts" setup>
import { provide } from 'vue'
import { provide, useAttrs } from 'vue'
import { useId } from 'radix-vue'
import { cn } from '@/lib/utils'
defineOptions({
inheritAttrs: false,
})
const id = useId()
provide(FORMI_TEM_INJECTION_KEY, id)
const { class: className, ...rest } = useAttrs()
</script>
<template>
<div :class="cn('space-y-2', $attrs.class ?? '')">
<div :class="cn('space-y-2', className ?? '')" v-bind="rest">
<slot />
</div>
</template>

View File

@ -1,11 +1,16 @@
<script lang="ts" setup>
import { useAttrs } from 'vue'
import { Label, type LabelProps } from 'radix-vue'
import { useFormField } from './useFormField'
import { cn } from '@/lib/utils'
defineOptions({
inheritAttrs: false,
})
const props = defineProps<LabelProps>()
const { error, formItemId } = useFormField()
const { class: className, ...rest } = useAttrs()
</script>
<template>
@ -13,9 +18,10 @@ const { error, formItemId } = useFormField()
:class="cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
error && 'text-destructive',
$attrs.class ?? '',
className ?? '',
)"
:for="formItemId"
v-bind="rest"
>
<slot />
</Label>