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 1/3] 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 699724e43..6633ed9d9 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 699724e43..6633ed9d9 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>

From 7b3d625a22100755bfd585ee25bdbf8b937e5f3c Mon Sep 17 00:00:00 2001
From: thewebartisan7 <damir@tuta.io>
Date: Wed, 18 Dec 2024 05:10:11 +0100
Subject: [PATCH 2/3] Fix error with inject/provide

---
 .../registry/default/ui/form/FormControl.vue  | 27 ++++++++++++++++---
 .../lib/registry/default/ui/form/FormItem.vue | 13 ---------
 .../registry/new-york/ui/form/FormControl.vue | 27 ++++++++++++++++---
 .../registry/new-york/ui/form/FormItem.vue    | 13 ---------
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/form/FormControl.vue b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
index 8459cab87..06acd840e 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
-import { useFormField } from './useFormField'
+import { Slot } from "radix-vue";
+import { useFormField } from "./useFormField";
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </template>
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 6633ed9d9..3f4ebbef6 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -3,30 +3,17 @@ 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"];
-  label?: string;
-  description?: string;
 }>();
 
-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/FormControl.vue b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
index 8459cab87..06acd840e 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
-import { useFormField } from './useFormField'
+import { Slot } from "radix-vue";
+import { useFormField } from "./useFormField";
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </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 6633ed9d9..3f4ebbef6 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
@@ -3,30 +3,17 @@ 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"];
-  label?: string;
-  description?: string;
 }>();
 
-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>

From a7f0f7eff2c6d22404f9f4e5e7c0fd7563bf9759 Mon Sep 17 00:00:00 2001
From: thewebartisan7 <damir@tuta.io>
Date: Wed, 18 Dec 2024 05:13:21 +0100
Subject: [PATCH 3/3] Format

---
 .../lib/registry/default/ui/form/FormControl.vue |  4 ++--
 .../lib/registry/default/ui/form/FormItem.vue    | 16 ++++++++--------
 .../registry/new-york/ui/form/FormControl.vue    |  4 ++--
 .../lib/registry/new-york/ui/form/FormItem.vue   | 16 ++++++++--------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/form/FormControl.vue b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
index 06acd840e..3bbc6b0cb 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Slot } from "radix-vue";
-import { useFormField } from "./useFormField";
+import { Slot } from 'radix-vue';
+import { useFormField } from './useFormField';
 
 const props = defineProps<{
   label?: string;
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 3f4ebbef6..699724e43 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,15 +1,15 @@
 <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'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 
-const id = useId();
-provide(FORM_ITEM_INJECTION_KEY, id);
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
index 06acd840e..3bbc6b0cb 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Slot } from "radix-vue";
-import { useFormField } from "./useFormField";
+import { Slot } from 'radix-vue';
+import { useFormField } from './useFormField';
 
 const props = defineProps<{
   label?: string;
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 3f4ebbef6..699724e43 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,15 +1,15 @@
 <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'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 
-const id = useId();
-provide(FORM_ITEM_INJECTION_KEY, id);
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>