feat(types): support custom values from app.config.ts (#863)

src/runtime/components/forms/Input.vue

@@ -41,11 +41,10 @@ import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
-import type { NestedKeyOf, Strategy } from '../../types'
+import type { InputSize, InputColor, InputVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input } from '#ui/ui.config'
-import colors from '#ui-colors'
 
 const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
 
@@ -124,21 +123,21 @@ export default defineComponent({
       default: true
     },
     size: {
-      type: String as PropType<keyof typeof config.size>,
+      type: String as PropType<InputSize>,
       default: null,
       validator (value: string) {
         return Object.keys(config.size).includes(value)
       }
     },
     color: {
-      type: String as PropType<keyof typeof config.color | typeof colors[number]>,
+      type: String as PropType<InputColor>,
       default: () => config.default.color,
       validator (value: string) {
         return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
       }
     },
     variant: {
-      type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
+      type: String as PropType<InputVariant>,
       default: () => config.default.variant,
       validator (value: string) {
         return [
@@ -171,7 +170,7 @@ export default defineComponent({
     const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config)
 
     const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
-    
+
     const input = ref<HTMLInputElement | null>(null)
 
     const autoFocus = () => {