feat: support dynamic form field slots

Author: Norbiros

docs/app/components/examples/Slots.vue

@@ -23,5 +23,13 @@ const schema = z.object({
         ]"
       />
     </template>
+
+    <template #boolean-description>
+      <span class="text-green-500">Green description!</span>
+    </template>
+
+    <template #boolean-hint>
+      <span class="text-purple-500">Purple hint</span>
+    </template>
   </AutoForm>
 </template>

docs/content/2.customization/3.slots.md

@@ -6,14 +6,15 @@ description: Configure specific fields of the form
 Sometimes you may want to customize the rendering of specific fields in your form.
 If all other methods fail you can use slots to achieve this.
 
-| Slot            | Type                                                          | Description                                                                                                                                 |
-|-----------------|---------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
-| `before-fields` |                                                               | Slot inside [`<UForm>`](https://ui.nuxt.com/components/form) before the list of [`<UFormField>`](https://ui.nuxt.com/components/form-field) |
-| `after-fields`  |                                                               | Slot inside [`<UForm>`](https://ui.nuxt.com/components/form) after the list of [`<UFormField>`](https://ui.nuxt.com/components/form-field)  |
-| `submit`        | `{ disabled: boolean }`                                       | Slot for customizing the submit button. `disabled` indicates whether at least one field is invalid.                                         |
-| `<field>`       | `{ field: string, state: Ref<Record<string, any> }>`{lang=ts} | **Dynamic** slot for a specific field inside Zod schema.                                                                                    |
+| Slot                        | Type                                                          | Description                                                                                                                                 |
+|-----------------------------|---------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
+| `before-fields`             |                                                               | Slot inside [`<UForm>`](https://ui.nuxt.com/components/form) before the list of [`<UFormField>`](https://ui.nuxt.com/components/form-field) |
+| `after-fields`              |                                                               | Slot inside [`<UForm>`](https://ui.nuxt.com/components/form) after the list of [`<UFormField>`](https://ui.nuxt.com/components/form-field)  |
+| `submit`                    | `{ disabled: boolean }`                                       | Slot for customizing the submit button. `disabled` indicates whether at least one field is invalid.                                         |
+| `<field>`                   | `{ field: string, state: Ref<Record<string, any> }>`{lang=ts} | **Dynamic** input slot for a specific field inside Zod schema.                                                                              |
+| `<field>-<form field slot>` |                                                               | **Dynamic** sub-slot for a specific `<UFormField>` inside the form.                                                                         |
 
-### Dynamic slots
+### Dynamic input slots
 
 For each field in your Zod schema, `<AutoForm>` generates a dynamic slot.
 You can use these slots to customize the input components for each field.
@@ -52,11 +53,38 @@ const schema = z.object({
 
 And if you want to use a custom component for the submit button, you can do it like this:
 
+```vue [MyForm.vue]{3-17}
+<template>
+  <AutoForm :schema="schema">
+    <template #boolean="{ field, state: stateValue }">
+      <USelect
+        v-model="stateValue[field]"
+        :items="[
+          {
+            label: 'False Value',
+            value: false,
+          },
+          {
+            label: 'True Value',
+            value: true,
+          },
+        ]"
+      />
+    </template>
+  </AutoForm>
+</template>
+```
+
+## Dynamic `UFormField` slots
+
+Beyond dynamic input slots, you can override additional field elements such as `hint` or `description`.
+When the standard [FormField](/customization/fields#formfield-customization) configuration does not provide enough flexibility, use slots to customize these elements.
+
 ```vue [MyForm.vue]{3-5}
 <template>
   <AutoForm :schema="schema">
-    <template #submit="{ disabled }">
-      <SubmitButton :disabled />
+    <template #text-hint>
+      This is a hint for the text field.
     </template>
   </AutoForm>
 </template>

playground/app/components/MyForm.vue

@@ -63,6 +63,11 @@ function onSubmit(data: Record<string, any>) {
     :schema="schema"
     @submit="onSubmit"
   >
+    <template #text-hint>
+      <NuxtLink to="https://norbiros.dev">
+        Who?
+      </NuxtLink>
+    </template>
     <template #custom_bool="{ field, state }">
       <USelect
         v-model="state[field]"

src/runtime/components/AutoForm.vue

@@ -24,6 +24,8 @@ const emit = defineEmits<{
   (e: 'submit', data: InferOutput<T>): void
 }>()
 
+const slots = useSlots()
+
 const state = reactive({ ...props.initialState })
 
 defineExpose({ submit })
@@ -53,13 +55,20 @@ const fields = Object.entries(shape).map(([key, zodType]: [string, any]) => {
     key,
     formField: {
       name: key,
+      slots: findSlots(key),
       ...parseMeta(meta, key),
     },
     component: meta?.input?.component ?? result.component,
     props: defu(meta?.input?.props, result.componentProps ?? {}),
   }
 }).filter((field): field is NonNullable<typeof field> => field != null)
 
+function findSlots(key: string): string[] {
+  return Object.keys(slots)
+    .filter(name => name.startsWith(`${key}-`))
+    .map(name => name.slice(key.length + 1))
+}
+
 function parseMeta(meta: any, key: string) {
   return {
     label: meta.title ?? upperFirst(splitByCase(key).join(' ').toLowerCase()),
@@ -114,6 +123,10 @@ const submitButtonProps = computed(() => {
       :ui="{ description: 'text-left' }"
       v-bind="field.formField"
     >
+      <template v-for="slot in field.formField.slots" #[slot]>
+        <slot :name="`${field.key}-${slot}`" />
+      </template>
+
       <slot
         :name="field.key"
         :field="field.key"