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>