fix: useAttrs to prevent class duplication
This commit is contained in:
parent
ec7382bec8
commit
68337c5250
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user