From caa1010bc70be0f166f7bebec03e9bfb0089895e Mon Sep 17 00:00:00 2001
From: thewebartisan7 <damir@tuta.io>
Date: Tue, 17 Dec 2024 11:42:37 +0100
Subject: [PATCH] Allow to pass label and description via props

---
 .../lib/registry/default/ui/form/FormItem.vue | 29 ++++++++++++++-----
 .../registry/new-york/ui/form/FormItem.vue    | 29 ++++++++++++++-----
 2 files changed, 42 insertions(+), 16 deletions(-)

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 699724e4..6633ed9d 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,19 +1,32 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { useId } from 'radix-vue'
-import { type HTMLAttributes, provide } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+import { cn } from "@/lib/utils";
+import { useId } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+import { useFormField } from "./useFormField";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+  label?: string;
+  description?: string;
+}>();
 
-const id = useId()
-provide(FORM_ITEM_INJECTION_KEY, id)
+const { error } = useFormField();
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
   <div :class="cn('space-y-2', props.class)">
+    <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
     <slot />
+
+    <FormDescription v-if="props.description && !error">
+      {{ props.description }}
+    </FormDescription>
+
+    <FormMessage v-if="props.description" />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index 699724e4..6633ed9d 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
@@ -1,19 +1,32 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { useId } from 'radix-vue'
-import { type HTMLAttributes, provide } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+import { cn } from "@/lib/utils";
+import { useId } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+import { useFormField } from "./useFormField";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+  label?: string;
+  description?: string;
+}>();
 
-const id = useId()
-provide(FORM_ITEM_INJECTION_KEY, id)
+const { error } = useFormField();
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
   <div :class="cn('space-y-2', props.class)">
+    <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
     <slot />
+
+    <FormDescription v-if="props.description && !error">
+      {{ props.description }}
+    </FormDescription>
+
+    <FormMessage v-if="props.description" />
   </div>
 </template>