chore: use InjectionKey to type and define injected properties (#90)

src/runtime/components/AvatarGroup.vue

@@ -27,6 +27,7 @@ export interface AvatarGroupSlots {
 import { computed, provide } from 'vue'
 import { Primitive } from 'radix-vue'
 import { UAvatar } from '#components'
+import { avatarGroupInjectionKey } from '#imports'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
@@ -59,7 +60,9 @@ const hiddenCount = computed(() => {
   return children?.length - visibleAvatars.value.length
 })
 
-provide('avatar-size', computed(() => props.size))
+provide(avatarGroupInjectionKey, computed(() => ({
+  size: props.size
+})))
 </script>
 
 <template>

src/runtime/components/Chip.vue

@@ -32,7 +32,7 @@ export interface ChipSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAvatarGroup } from '#imports'
 
@@ -50,8 +50,6 @@ const ui = computed(() => tv({ extend: chip, slots: props.ui })({
   inset: props.inset,
   standalone: props.standalone
 }))
-
-provide('avatar-size', size)
 </script>
 
 <template>

src/runtime/components/Form.vue

@@ -3,9 +3,11 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, FormInjectedOptions, Form, FormErrorWithId } from '#ui/types/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '#ui/types/form'
 import { FormValidationException } from '#ui/types/form'
 
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, useId } from '#imports'
+
 const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
 
 const form = tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) })
@@ -33,8 +35,7 @@ export interface FormSlots {
 
 <script lang="ts" setup generic="T extends object">
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
-import { useEventBus, type UseEventBusReturn } from '@vueuse/core'
-import { useId } from '#imports'
+import { useEventBus } from '@vueuse/core'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '#ui/utils/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
@@ -49,11 +50,11 @@ defineSlots<FormSlots>()
 const formId = props.id ?? useId()
 
 const bus = useEventBus<FormEvent>(`form-${formId}`)
-const parentBus = inject<UseEventBusReturn<FormEvent, string> | undefined>(
-  'form-events',
+const parentBus = inject(
+  formBusInjectionKey,
   undefined
 )
-provide('form-events', bus)
+provide(formBusInjectionKey, bus)
 
 const nestedForms = ref<Map<string | number, { validate: () => any }>>(new Map())
 
@@ -86,17 +87,17 @@ onUnmounted(() => {
   }
 })
 
-const options = {
-  disabled: computed(() => props.disabled),
-  validateOnInputDelay: computed(() => props.validateOnInputDelay)
-}
-provide<FormInjectedOptions>('form-options', options)
+provide(formOptionsInjectionKey, computed(() => ({
+  disabled: props.disabled,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
 
 const errors = ref<FormErrorWithId[]>([])
 provide('form-errors', errors)
 
 const inputs = ref<Record<string, string>>({})
-provide('form-inputs', inputs)
+provide(formInputsInjectionKey, inputs)
+
 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   return errs.map(err => ({
     ...err,
@@ -213,7 +214,8 @@ defineExpose<Form<T>>({
       errors.value = []
     }
   },
-  ...options
+
+  disabled: computed(() => props.disabled)
 })
 </script>
 

src/runtime/components/FormField.vue

@@ -38,8 +38,8 @@ export interface FormFieldSlots {
 <script lang="ts" setup>
 import { computed, ref, inject, provide, type Ref } from 'vue'
 import { Label } from 'radix-vue'
-import type { FormError, FormFieldInjectedOptions } from '#ui/types/form'
-import { useId } from '#imports'
+import type { FormError } from '#ui/types/form'
+import { useId, formFieldInjectionKey } from '#imports'
 
 const props = defineProps<FormFieldProps>()
 defineSlots<FormFieldSlots>()
@@ -60,14 +60,14 @@ const error = computed(() => {
 
 const id = ref(useId())
 
-provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
-  error,
-  id,
-  name: computed(() => props.name),
-  size: computed(() => props.size),
-  eagerValidation: computed(() => props.eagerValidation),
-  validateOnInputDelay: computed(() => props.validateOnInputDelay)
-})
+provide(formFieldInjectionKey, computed(() => ({
+  id: id.value,
+  error: error.value,
+  name: props.name,
+  size: props.size,
+  eagerValidation: props.eagerValidation,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
 </script>
 
 <template>

src/runtime/composables/useAvatarGroup.ts

@@ -1,9 +1,12 @@
-import { inject, provide, computed, type ComputedRef } from 'vue'
+import { inject, provide, computed, type ComputedRef, type InjectionKey } from 'vue'
 import type { AvatarGroupProps } from '#ui/types'
 
+export const avatarGroupInjectionKey: InjectionKey<ComputedRef<{ size: AvatarGroupProps['size'] }>> = Symbol('nuxt-ui.avatar-group')
+
 export function useAvatarGroup(props: { size: AvatarGroupProps['size'] }) {
-  const injectedSize = inject<ComputedRef<AvatarGroupProps['size']> | undefined>('avatar-size', undefined)
-  const size = computed(() => props.size ?? injectedSize?.value)
+  const injectedSize = inject(avatarGroupInjectionKey, undefined)
+
+  const size = computed(() => props.size ?? injectedSize?.value.size)
   provide('avatar-size', size)
 
   return {

src/runtime/composables/useFormField.ts

@@ -1,7 +1,8 @@
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '#ui/types/form'
 import type { GetObjectField } from '#ui/types/utils'
+import type { FormFieldProps } from '#ui/types'
 
 type Props<T> = {
   id?: string
@@ -13,55 +14,60 @@ type Props<T> = {
   disabled?: boolean
 }
 
+export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
+export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>> = Symbol('nuxt-ui.form-events')
+export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = Symbol('nuxt-ui.form-field')
+export const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>> = Symbol('nuxt-ui.form-inputs')
+
 export function useFormField<T>(props?: Props<T>) {
-  const formOptions = inject<FormInjectedOptions | undefined>('form-options', undefined)
-  const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-  const formField = inject<FormFieldInjectedOptions<T> | undefined>('form-field', undefined)
-  const formInputs = inject<any>('form-inputs', undefined)
+  const formOptions = inject(formOptionsInjectionKey, undefined)
+  const formBus = inject(formBusInjectionKey, undefined)
+  const formField = inject(formFieldInjectionKey, undefined)
+  const formInputs = inject(formInputsInjectionKey, undefined)
 
   if (formField) {
     if (props?.id) {
       // Updates for="..." attribute on label if props.id is provided
-      formField.id.value = props?.id
+      formField.value.id = props?.id
     }
 
-    if (formInputs && formField.name.value) {
-      formInputs.value[formField.name.value] = formField.id.value
+    if (formInputs && formField.value.name) {
+      formInputs.value[formField.value.name] = formField.value.id
     }
   }
 
   const blurred = ref(false)
 
-  function emitFormEvent(type: FormInputEvents, name: string) {
-    if (formBus && formField) {
+  function emitFormEvent(type: FormInputEvents, name?: string) {
+    if (formBus && formField && name) {
       formBus.emit({ type, name })
     }
   }
 
   function emitFormBlur() {
-    emitFormEvent('blur', formField?.name.value as string)
+    emitFormEvent('blur', formField?.value.name)
     blurred.value = true
   }
 
   function emitFormChange() {
-    emitFormEvent('change', formField?.name.value as string)
+    emitFormEvent('change', formField?.value.name)
   }
 
   const emitFormInput = useDebounceFn(
     () => {
-      if (blurred.value || formField?.eagerValidation.value) {
-        emitFormEvent('input', formField?.name.value as string)
+      if (blurred.value || formField?.value.eagerValidation) {
+        emitFormEvent('input', formField?.value.name)
       }
     },
-    formField?.validateOnInputDelay.value ?? formOptions?.validateOnInputDelay?.value ?? 0
+    formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   )
 
   return {
-    id: computed(() => props?.id ?? formField?.id.value),
-    name: computed(() => props?.name ?? formField?.name.value),
-    size: computed(() => props?.size ?? formField?.size?.value),
-    color: computed(() => formField?.error?.value ? 'red' : props?.color),
-    disabled: computed(() => formOptions?.disabled?.value || props?.disabled),
+    id: computed(() => props?.id ?? formField?.value.id),
+    name: computed(() => props?.name ?? formField?.value.name),
+    size: computed(() => props?.size ?? formField?.value.size),
+    color: computed(() => formField?.value.error ? 'red' : props?.color),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
     emitFormBlur,
     emitFormInput,
     emitFormChange

src/runtime/types/form.ts

@@ -65,17 +65,17 @@ export type FormEvent =
   | FormChildDetachEvent
 
 export interface FormInjectedOptions {
-  disabled?: ComputedRef<boolean>
-  validateOnInputDelay?: ComputedRef<number>
+  disabled?: boolean
+  validateOnInputDelay?: number
 }
 
 export interface FormFieldInjectedOptions<T> {
-  id: Ref<string | undefined>
-  name: ComputedRef<string | undefined>
-  size: ComputedRef<GetObjectField<T, 'size'>>
-  error: ComputedRef<string | boolean | undefined>
-  eagerValidation: ComputedRef<boolean | undefined>
-  validateOnInputDelay: ComputedRef<number | undefined>
+  id: string
+  name?: string
+  size?: GetObjectField<T, 'size'>
+  error?: string | boolean
+  eagerValidation?: boolean
+  validateOnInputDelay?: number
 }
 
 export class FormValidationException extends Error {