From 68337c5250d58999a1ea35213f0157c8381e96d5 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 2 Oct 2023 13:09:04 +0330
Subject: [PATCH] fix: useAttrs to prevent class duplication

---
 .../lib/registry/default/ui/form/FormDescription.vue   |  9 ++++++++-
 apps/www/src/lib/registry/default/ui/form/FormItem.vue | 10 ++++++++--
 .../www/src/lib/registry/default/ui/form/FormLabel.vue |  8 +++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
index 53b209ac..070c9064 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index 8b5f94ed..5618d73c 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
index 84f95ae4..a85dbc09 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -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>