feat: add multiple UFormField configuration options

Author: Norbiros

playground/app/components/MyForm.vue

@@ -13,12 +13,13 @@ const ENUM_MULTIPLE = [
 const schema = z.object({
   text: z.string()
     .nonempty()
-    .meta({ title: 'Text Input' }),
+    .meta({ title: 'Text Input', required: true }),
   enum: z.enum(['1', '2', '3'])
     .meta({ title: 'Enum Input' }),
   text_description: z.string()
     .meta({
       description: 'with description',
+      hint: 'with hint',
     }),
   custom_bool: z.boolean()
     .meta({ title: 'Input with custom slot' }),

playground/tests/e2e/basic.test.ts

@@ -9,6 +9,8 @@ test('test very basic form', async ({ page }) => {
   await page.getByRole('combobox', { name: 'Enum Input', exact: true }).click()
   await page.getByRole('option', { name: '2' }).click()
   await page.getByRole('textbox', { name: 'Text description' }).click()
+  await expect(page.getByText('with description')).toBeVisible()
+  await expect(page.getByText('with hint')).toBeVisible()
   await page.locator('form div').filter({ hasText: 'Input with custom slot' }).getByRole('combobox').click()
   await page.getByLabel('True').getByText('True').click()
   await expect(page.locator('#v-4-error')).toContainText('Invalid input')

src/runtime/components/AutoForm.vue

@@ -89,7 +89,10 @@ function parseMeta(zodType: any, key: string) {
 
   return {
     label: meta.title ?? upperFirst(splitByCase(key).join(' ').toLowerCase()),
+    required: meta.required,
     description: meta.description,
+    hint: meta.hint,
+    help: meta.help,
     class: meta.autoForm?.floatRight ? 'flex items-center justify-between text-left' : '',
   }
 }

src/runtime/types/zod.d.ts

@@ -1,12 +1,58 @@
 // Generated by Nuxt Auto Form
 
 declare module 'zod' {
+  /** Global configuration added by `nuxt-auto-form` Nuxt module */
   interface GlobalMeta {
-    /** Configuration related to `nuxt-auto-form` Nuxt module */
+    /** Auto-form specific configuration */
     autoForm?: {
-      /** Float input box to the right of the label */
+      /** Float the input box to the right of the label */
       floatRight?: boolean
     }
+
+    input?: object
+
+    /**
+     * Field label displayed in the form's label row.
+     * Maps directly to `UFormField.label`.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     * @default Field name in PascalCase with spaces
+     * @see https://ui.nuxt.com/components/form-field#description
+     */
+    title?: string
+
+    /**
+     * Marks the field as required in the UI (asterisk, aria-required).
+     * Validation is not enforced here; use `zod` refinements for that.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     * @see https://ui.nuxt.com/components/form-field#required
+     */
+    required?: boolean
+
+    /**
+     * Supporting text displayed between the label and the input control.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     * @see https://ui.nuxt.com/components/form-field#description
+     */
+    description?: string
+
+    /**
+     * Short inline hint shown next to the label.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     * @see https://ui.nuxt.com/components/form-field#hint
+     */
+    hint?: string
+
+    /**
+     * Help text displayed below the input field.
+     *
+     * @remarks Added by `nuxt-auto-form`
+     * @see https://ui.nuxt.com/components/form-field#help
+     */
+    help?: string
   }
 }