fix: useAttrs to prevent class duplication
This commit is contained in:
parent
ec7382bec8
commit
68337c5250
|
|
@ -1,14 +1,21 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
import { useFormField } from './useFormField'
|
import { useFormField } from './useFormField'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
|
||||||
const { formDescriptionId } = useFormField()
|
const { formDescriptionId } = useFormField()
|
||||||
|
const { class: className, ...rest } = useAttrs()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<p
|
<p
|
||||||
:id="formDescriptionId"
|
:id="formDescriptionId"
|
||||||
:class="cn('text-sm text-muted-foreground', $attrs.class ?? '')"
|
:class="cn('text-sm text-muted-foreground', className ?? '')"
|
||||||
|
v-bind="rest"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,22 @@ export const FORMI_TEM_INJECTION_KEY
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { provide } from 'vue'
|
import { provide, useAttrs } from 'vue'
|
||||||
import { useId } from 'radix-vue'
|
import { useId } from 'radix-vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
|
||||||
const id = useId()
|
const id = useId()
|
||||||
provide(FORMI_TEM_INJECTION_KEY, id)
|
provide(FORMI_TEM_INJECTION_KEY, id)
|
||||||
|
|
||||||
|
const { class: className, ...rest } = useAttrs()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="cn('space-y-2', $attrs.class ?? '')">
|
<div :class="cn('space-y-2', className ?? '')" v-bind="rest">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,16 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
import { Label, type LabelProps } from 'radix-vue'
|
import { Label, type LabelProps } from 'radix-vue'
|
||||||
import { useFormField } from './useFormField'
|
import { useFormField } from './useFormField'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
const props = defineProps<LabelProps>()
|
const props = defineProps<LabelProps>()
|
||||||
|
|
||||||
const { error, formItemId } = useFormField()
|
const { error, formItemId } = useFormField()
|
||||||
|
const { class: className, ...rest } = useAttrs()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -13,9 +18,10 @@ const { error, formItemId } = useFormField()
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'block text-sm tracking-tight font-medium text-foreground text-left',
|
'block text-sm tracking-tight font-medium text-foreground text-left',
|
||||||
error && 'text-destructive',
|
error && 'text-destructive',
|
||||||
$attrs.class ?? '',
|
className ?? '',
|
||||||
)"
|
)"
|
||||||
:for="formItemId"
|
:for="formItemId"
|
||||||
|
v-bind="rest"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</Label>
|
</Label>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user