feat: add after-fields and before-fields slots

Author: Norbiros

docs/content/2.customization/2.form.md

@@ -22,8 +22,16 @@ you want to provide submit or edit form feature.
 
 ## Slots
 
-Sometimes you want to use completely different input component than specified in your zod schema.
-To do that you can insert custom components using slots.
+| 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)  |
+| `<field>`       | `{ field: string, state: Ref<Record<string, any> }>`{lang=ts} | **Dynamic** slot for a specific field inside Zod schema.                                                                                    |
+
+### Dynamic 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.
 
 ::code-collapse
 ```vue [MyForm.vue]{11-25}

src/runtime/components/AutoForm.vue

@@ -136,6 +136,8 @@ const submitButtonComponent = computed(() => {
     class="space-y-4"
     @submit="onSubmit"
   >
+    <slot name="before-fields" />
+
     <UFormField
       v-for="field in fields"
       :key="field.key"
@@ -155,6 +157,8 @@ const submitButtonComponent = computed(() => {
       </slot>
     </UFormField>
 
+    <slot name="after-fields" />
+
     <div class="space-y-2">
       <div v-if="submitButtonComponent">
         <component :is="toRaw(submitButtonComponent)" v-bind="{ isButtonEnabled }" />