refactor: FormItem single script setup (#573)

* refactor(form): move FORM_ITEM_INJECTION_KEY to a different module

By exporting the  from the  file, we can remove the need of having
multiple script tags inside the component.
This change helps with the linters and formatters, expecially with  defaults.

apps/www/src/lib/registry/default/ui/form/FormItem.vue

@@ -1,13 +1,7 @@
-<script lang="ts">
-import type { HTMLAttributes, InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>
-</script>
-
 <script lang="ts" setup>
-import { provide } from 'vue'
+import { type HTMLAttributes, provide } from 'vue'
 import { useId } from 'radix-vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{

apps/www/src/lib/registry/default/ui/form/index.ts

@@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
 export { default as FormDescription } from './FormDescription.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'

apps/www/src/lib/registry/default/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

apps/www/src/lib/registry/default/ui/form/useFormField.ts

@@ -1,6 +1,6 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)

apps/www/src/lib/registry/new-york/ui/form/FormItem.vue

@@ -1,13 +1,7 @@
-<script lang="ts">
-import type { HTMLAttributes, InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>
-</script>
-
 <script lang="ts" setup>
-import { provide } from 'vue'
+import { type HTMLAttributes, provide } from 'vue'
 import { useId } from 'radix-vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{

apps/www/src/lib/registry/new-york/ui/form/index.ts

@@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
 export { default as FormDescription } from './FormDescription.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'

apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

apps/www/src/lib/registry/new-york/ui/form/useFormField.ts

@@ -1,6 +1,6 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)

apps/www/src/public/registry/index.json

@@ -464,6 +464,7 @@
       "ui/form/FormLabel.vue",
       "ui/form/FormMessage.vue",
       "ui/form/index.ts",
+      "ui/form/injectionKeys.ts",
       "ui/form/useFormField.ts"
     ],
     "type": "components:ui"

apps/www/src/public/registry/styles/default/form.json

@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -32,11 +32,15 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\n"
+      "content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+    },
+    {
+      "name": "injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"

apps/www/src/public/registry/styles/new-york/form.json

@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -32,11 +32,15 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\n"
+      "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+    },
+    {
+      "name": "injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"