feat: add an option to customize default components for fields

Author: Norbiros

src/runtime/components/AutoForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends z.ZodObject<any>">
 import type { FormSubmitEvent, InferInput, InferOutput } from '@nuxt/ui'
-import type { AutoFormConfig } from '../types'
+import type { AutoFormConfig, ComponentsMap } from '../types'
 import { useAppConfig } from '#app'
 import UButton from '@nuxt/ui/components/Button.vue'
 import UCheckbox from '@nuxt/ui/components/Checkbox.vue'
@@ -43,7 +43,7 @@ interface ComponentDefinition {
   componentProps?: Record<string, any>
 }
 
-const COMPONENTS_MAP: Record<string, (key: string, zodType: any) => ComponentDefinition | null> = {
+const COMPONENTS_MAP: ComponentsMap = {
   number: () => ({ component: UInputNumber }),
   string: () => ({ component: UInput }),
   boolean: () => ({ component: UCheckbox }),
@@ -99,7 +99,7 @@ function parseMeta(meta: any, key: string) {
 
 function mapZodTypeToComponent(key: string, zodType: any): ComponentDefinition | null {
   const zodTypeKey = zodType._def.format ?? zodType._def.type
-  const component = COMPONENTS_MAP[zodTypeKey]
+  const component = defu(useAppConfig().autoForm?.components, COMPONENTS_MAP)[zodTypeKey]
   if (!component) {
     console.warn(`Unsupported Zod type: ${zodTypeKey}`)
     return null

src/runtime/types/index.d.ts

@@ -3,6 +3,8 @@
 import type { ButtonProps } from '@nuxt/ui'
 import type { ConcreteComponent } from '@vue/runtime-core'
 
+export type ComponentsMap = Record<string, (key: string, zodType: any) => ComponentDefinition | null>
+
 export interface AutoFormConfig {
   /** Submit button configuration */
   submit?: {
@@ -15,6 +17,17 @@ export interface AutoFormConfig {
     /** Props to pass to the Nuxt UI `UButton` component */
     props?: ButtonProps
   }
+  /**
+   * Customize the default components used for rendering form fields.
+   *
+   * @example
+   * ```ts
+   * components: {
+   *   email: () => ({ component: UInput, componentProps: { type: 'email' } }),
+   * }
+   * ```
+   */
+  components?: ComponentsMap
 }
 
 declare module 'nuxt/schema' {

src/runtime/types/zod.d.ts

@@ -23,7 +23,7 @@ declare module 'zod' {
       component?: string | Component
       /**
        * Props forwarded to the input component at render time.
-       * These are merged with the module's default props - user props take precedence..
+       * These are merged with the module's default props - user props take precedence.
        */
       props?: Record<string, any>
     }