refactor: move COMPONENTS_MAP to a separate file

Author: Norbiros

docs/content/2.customization/1.config.md

@@ -44,26 +44,31 @@ You can do this by passing a `config` prop to the `<AutoForm>` component:
 
 ### `components`
 
-When a field in a form is rendered, the module automatically generates key
-```ts
-zodType._def.format ?? zodType._def.type
-```
-
-This key is used to look up the component to render the field.
-You can override the default components used for rendering fields by specifying a mapping in the `components` option.
-
 ::caution
 If you use string to define the component it **must** be [globally registered](https://nuxt.com/docs/4.x/guide/directory-structure/app/components#dynamic-components) to work.
 To do this, name your component with the `.global.vue` suffix, or place it in `components/global/` directory.
 ::
 
+This is one of the most important configuration options.
+It allows you to specify which Vue component should be used to render each field type in the form.
+
+When a field in a form is rendered, the module automatically generates a key:
+```ts
+zodType._def.format ?? zodType._def.type
+```
+
+This key is used to look up the component to render the field from the `components` mapping.
+By providing a custom mapping you can override or add support for additional field types.
+
 ```ts-type
 components: {
   email: () => ({ component: 'UInput', componentProps: { type: 'email' } }),
 }
 ```
 
-For default values consult the source code.
+::tip
+For default implementation and inspiration consult the [source code](https://github.com/Norbiros/nuxt-auto-form/tree/master/src/utils/components_map.ts).
+::
 
 ### `submit`
 

src/runtime/components/AutoForm.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts" generic="T extends z.ZodObject<any>">
 import type { FormSubmitEvent, InferInput, InferOutput } from '@nuxt/ui'
-import type { AutoFormConfig, ComponentsMap } from '../types'
+import type * as z from 'zod'
+import type { AutoFormConfig } from '../types'
 import { useAppConfig } from '#app'
 import UButton from '@nuxt/ui/components/Button.vue'
-import UCheckbox from '@nuxt/ui/components/Checkbox.vue'
 import UForm from '@nuxt/ui/components/Form.vue'
 import UFormField from '@nuxt/ui/components/FormField.vue'
-import UInput from '@nuxt/ui/components/Input.vue'
-import UInputNumber from '@nuxt/ui/components/InputNumber.vue'
-import USelect from '@nuxt/ui/components/Select.vue'
 
 import defu from 'defu'
 import { splitByCase, upperFirst } from 'scule'
 import { computed, reactive, ref, toRaw, useTemplateRef } from 'vue'
-import * as z from 'zod'
+import { COMPONENTS_MAP, mapZodTypeToComponent } from '../../utils/components_map'
 
 const props = withDefaults(defineProps<{
   schema: T
@@ -37,45 +34,6 @@ const shape = (props.schema as z.ZodObject<any>).shape
 
 const isButtonDisabled = computed(() => !props.schema.safeParse(state).success)
 
-interface ComponentDefinition {
-  // FIXME: Try using proper types for components
-  component: any
-  componentProps?: Record<string, any>
-}
-
-const COMPONENTS_MAP: ComponentsMap = {
-  number: () => ({ component: UInputNumber }),
-  string: () => ({ component: UInput }),
-  boolean: () => ({ component: UCheckbox }),
-  enum: (_key, zodType) => ({
-    component: USelect,
-    componentProps: {
-      items: Object.values(zodType.def.entries),
-    },
-  }),
-  array: (key, zodType) => {
-    const innerType = zodType.def.element
-    if (innerType instanceof z.ZodEnum) {
-      const result = mapZodTypeToComponent(key, zodType.unwrap()) as any
-      result.componentProps.multiple = true
-      return result
-    }
-  },
-  default: (key, zodType) => {
-    (state as any)[key] = zodType.def.defaultValue
-    return mapZodTypeToComponent(key, zodType.unwrap())
-  },
-  email: (key, _) => {
-    const stringComponent = mapZodTypeToComponent(key, 'string')!
-
-    return defu({
-      componentProps: {
-        type: 'email',
-      },
-    }, stringComponent)
-  },
-}
-
 const defaults: Partial<AutoFormConfig> = {
   components: COMPONENTS_MAP,
 }
@@ -85,7 +43,7 @@ const appConfig = computed<AutoFormConfig>(() => {
 })
 
 const fields = Object.entries(shape).map(([key, zodType]: [string, any]) => {
-  const result = mapZodTypeToComponent(key, zodType)
+  const result = mapZodTypeToComponent(key, zodType, appConfig.value, state)
   if (!result)
     return null
 
@@ -113,16 +71,6 @@ function parseMeta(meta: any, key: string) {
   }
 }
 
-function mapZodTypeToComponent(key: string, zodType: any): ComponentDefinition | null {
-  const zodTypeKey = zodType._def.format ?? zodType._def.type
-  const component = appConfig.value.components?.[zodTypeKey]
-  if (!component) {
-    console.warn(`Unsupported Zod type: ${zodTypeKey}`)
-    return null
-  }
-  return component(key, zodType)
-}
-
 async function onSubmit(event: FormSubmitEvent<InferOutput<T>>) {
   event.preventDefault()
   loading.value = true

src/runtime/types/index.d.ts

@@ -3,7 +3,7 @@
 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 type ComponentsMap = Record<string, (params: { key: string, state: any, zodType: any, config: AutoFormConfig }) => ComponentDefinition | null>
 
 export interface AutoFormConfig {
   /** Submit button configuration */
@@ -17,6 +17,16 @@ export interface AutoFormConfig {
     /** Props to pass to the Nuxt UI `UButton` component */
     props?: ButtonProps
   }
+
+  theme: {
+    /**
+     * Use floating labels for form fields
+     * @see https://ui.nuxt.com/components/form-field#description
+     * @default true
+     */
+    floatingLabels?: boolean
+  }
+
   /**
    * Customize the default components used for rendering form fields.
    *

src/utils/components_map.ts

@@ -0,0 +1,58 @@
+import type { AutoFormConfig, ComponentsMap } from '../runtime/types'
+import UCheckbox from '@nuxt/ui/components/Checkbox.vue'
+import UInput from '@nuxt/ui/components/Input.vue'
+import UInputNumber from '@nuxt/ui/components/InputNumber.vue'
+import USelect from '@nuxt/ui/components/Select.vue'
+import defu from 'defu'
+import * as z from 'zod'
+
+export interface ComponentDefinition {
+  // FIXME: Try using proper types for components
+  component: any
+  componentProps?: Record<string, any>
+}
+
+export const COMPONENTS_MAP: ComponentsMap = {
+  number: () => ({ component: UInputNumber }),
+  string: () => ({ component: UInput }),
+  boolean: () => ({ component: UCheckbox }),
+  enum: ({ zodType }) => ({
+    component: USelect,
+    componentProps: {
+      items: Object.values(zodType.def.entries),
+    },
+  }),
+  array: ({ key, zodType, config, state }) => {
+    const innerType = zodType.def.element
+    if (innerType instanceof z.ZodEnum) {
+      const result = mapZodTypeToComponent(key, zodType.unwrap(), config, state) as any
+      result.componentProps.multiple = true
+      return result
+    }
+  },
+  default: ({ key, zodType, state, config }) => {
+    (state as any)[key] = zodType.def.defaultValue
+    return mapZodTypeToComponent(key, zodType.unwrap(), config, state)
+  },
+  email: ({ key, config, state }) => {
+    const stringComponent = mapZodTypeToComponent(key, 'string', config, state)!
+
+    return defu({
+      componentProps: {
+        type: 'email',
+      },
+    }, stringComponent)
+  },
+}
+
+export function mapZodTypeToComponent(key: string, zodType: any, config: AutoFormConfig, state: any): ComponentDefinition | null {
+  const zodTypeKey = zodType._def.format ?? zodType._def.type
+  const component = config.components?.[zodTypeKey]
+  if (!component) {
+    console.warn(`Unsupported Zod type: ${zodTypeKey}`)
+    console.warn('Please update your @norbiros/nuxt-auto-form configuration')
+    console.warn('Or report it here https://github.com/Norbiros/nuxt-auto-form')
+    return null
+  }
+  return component({ key, zodType, config, state })
+}