feat: allow customizing input component & props

Author: Norbiros

playground/app/components/InputWithClear.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const modelValue = defineModel<string>({ default: 'Click to clear' })
+</script>
+
+<template>
+  <UInput
+    v-model="modelValue"
+    placeholder="Type something..."
+    :ui="{ trailing: 'pe-1' }"
+  >
+    <template v-if="modelValue?.length" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        icon="i-lucide-circle-x"
+        aria-label="Clear input"
+        @click="modelValue = ''"
+      />
+    </template>
+  </UInput>
+</template>

playground/app/components/MyForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import * as z from 'zod'
+import InputWithClear from '~/components/InputWithClear.vue'
 
 const ENUM_MULTIPLE = [
   'A',
@@ -13,13 +14,26 @@ const ENUM_MULTIPLE = [
 const schema = z.object({
   text: z.string()
     .nonempty()
-    .meta({ title: 'Text Input', required: true }),
+    .meta({
+      title: 'Text Input',
+      required: true,
+      input: {
+        props: {
+          placeholder: 'Placeholder',
+        },
+      },
+    }),
   enum: z.enum(['1', '2', '3'])
-    .meta({ title: 'Enum Input' }),
+    .meta({
+      title: 'Enum Input',
+    }),
   text_description: z.string()
     .meta({
       description: 'with description',
       hint: 'with hint',
+      input: {
+        component: InputWithClear,
+      },
     }),
   custom_bool: z.boolean()
     .meta({ title: 'Input with custom slot' }),

src/runtime/components/AutoForm.vue

@@ -68,25 +68,25 @@ const COMPONENTS_MAP: Record<string, (key: string, zodType: any) => ComponentDef
   email: () => ({ component: UInput, componentProps: { type: 'email' } }),
 }
 
-const fields = Object.entries(shape).map(([key, zodType]) => {
+const fields = Object.entries(shape).map(([key, zodType]: [string, any]) => {
   const result = mapZodTypeToComponent(key, zodType)
   if (!result)
     return null
 
+  const meta = typeof zodType.meta === 'function' ? zodType.meta() || {} : {}
+
   return {
     key,
     formField: {
       name: key,
-      ...parseMeta(zodType, key),
+      ...parseMeta(meta, key),
     },
-    component: result.component,
-    props: result.componentProps ?? {},
+    component: meta?.input?.component ?? result.component,
+    props: defu(meta?.input?.props, result.componentProps ?? {}),
   }
 }).filter((field): field is NonNullable<typeof field> => field != null)
 
-function parseMeta(zodType: any, key: string) {
-  const meta = typeof zodType.meta === 'function' ? zodType.meta() || {} : {}
-
+function parseMeta(meta: any, key: string) {
   return {
     label: meta.title ?? upperFirst(splitByCase(key).join(' ').toLowerCase()),
     required: meta.required,

src/runtime/types/zod.d.ts

@@ -1,5 +1,7 @@
 // Generated by Nuxt Auto Form
 
+import type { Component } from '@vue/runtime-core'
+
 declare module 'zod' {
   /** Global configuration added by `nuxt-auto-form` Nuxt module */
   interface GlobalMeta {
@@ -9,7 +11,22 @@ declare module 'zod' {
       floatRight?: boolean
     }
 
-    input?: object
+    /**
+     * Configuration for the inner Input component.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     */
+    input?: {
+      /**
+       * Vue component or component name used to render the input.
+       */
+      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..
+       */
+      props?: Record<string, any>
+    }
 
     /**
      * Field label displayed in the form's label row.