feat: create theme property and document it

Author: Norbiros

docs/app/components/examples/Fields.vue

@@ -17,7 +17,7 @@ const schema = z.object({
     },
   } }),
   style: z.boolean()
-    .meta({ autoForm: { floatRight: true } }),
+    .meta({ theme: { floatRight: true } }),
 })
 </script>
 

docs/app/components/examples/RealWorld.vue

@@ -35,7 +35,7 @@ const schema = z.object({
   marketing_consent: z.boolean()
     .meta({
       title: 'Do you want to receive information about future Hack4Krak events?',
-      autoForm: { floatRight: true },
+      theme: { floatRight: true },
     }),
   referral_source: z
     .array(z.enum(REFERRAL_SOURCES))

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

@@ -103,3 +103,21 @@ Consult the [Submit Button](./submit_button) documentation for more information.
   props?: Record<string, any>
 }
 ```
+
+### `theme`
+
+This option allows you to customize default form themes.
+
+::warning
+This feature is in development!
+::
+
+```ts-type
+{
+  /**
+  * Apply `w-full` class to all input components by default.
+  * @default true
+  */
+  wFull?: boolean
+}
+```

docs/content/2.customization/2.fields.md

@@ -66,16 +66,13 @@ You can customize the appearance of form fields:
 
 ```ts-type
 /** Auto-form specific configuration */
-autoForm?: {
+theme?: {
   /** Float the input box to the right of the label */
   floatRight?: boolean
+  wFull?: boolean
 }
 ```
 
-::caution
-This feature is experimental and may be reworked or removed in future releases.
-::
-
 ## Example
 
 ::component-preview{name="Fields"}

playground/app/components/MyForm.vue

@@ -43,7 +43,7 @@ const schema = z.object({
     .default(true)
     .meta({
       title: 'Boolean Input with floatRight',
-      autoForm: { floatRight: true },
+      theme: { floatRight: true },
     }),
   multiple_input: z
     .array(z.enum(ENUM_MULTIPLE))

playground/tests/e2e/basic.test.ts

@@ -22,7 +22,7 @@ test('test very basic form', async ({ page }) => {
   await page.getByRole('combobox', { name: 'Multiple Enum Input' }).click()
   await page.getByRole('option', { name: 'E' }).click()
   await page.getByRole('option', { name: 'A' }).click()
-  await page.locator('html').click()
-  await page.getByRole('button', { name: 'Send' }).click()
-  await expect(page.getByRole('button', { name: 'Send' })).toBeEnabled()
+  await page.mouse.click(0, 0)
+  await page.getByRole('button', { name: 'My custom send button' }).click()
+  await expect(page.getByRole('button', { name: 'My custom send button' })).toBeEnabled()
 })

src/runtime/components/AutoForm.vue

@@ -37,6 +37,9 @@ const isButtonDisabled = computed(() => !props.schema.safeParse(state).success)
 
 const defaults: Partial<AutoFormConfig> = {
   components: COMPONENTS_MAP,
+  theme: {
+    wFull: true,
+  },
 }
 
 const appConfig = computed<AutoFormConfig>(() => {
@@ -50,6 +53,9 @@ const fields = Object.entries(shape).map(([key, zodType]: [string, any]) => {
 
   const meta = typeof zodType.meta === 'function' ? zodType.meta() || {} : {}
 
+  const defaultProps = {
+    class: appConfig.value?.theme?.wFull ? 'w-full' : '',
+  }
   return {
     key,
     formField: {
@@ -58,7 +64,7 @@ const fields = Object.entries(shape).map(([key, zodType]: [string, any]) => {
       ...parseMeta(meta, key),
     },
     component: meta?.input?.component ?? result.component,
-    props: defu(meta?.input?.props, result.componentProps ?? {}),
+    props: defu(defaultProps, meta?.input?.props, result.componentProps ?? {}),
   }
 }).filter((field): field is NonNullable<typeof field> => field != null)
 
@@ -75,7 +81,7 @@ function parseMeta(meta: any, key: string) {
     description: meta.description,
     hint: meta.hint,
     help: meta.help,
-    class: meta.autoForm?.floatRight ? 'flex items-center justify-between text-left' : '',
+    class: meta.theme?.floatRight ? 'flex items-center justify-between text-left' : '',
   }
 }
 

src/runtime/types/index.d.ts

@@ -18,13 +18,15 @@ export interface AutoFormConfig {
     props?: ButtonProps
   } | false
 
+  /**
+   * Customize default form styles
+   */
   theme?: {
     /**
-     * Use floating labels for form fields
-     * @see https://ui.nuxt.com/components/form-field#description
+     * Apply `w-full` class to all input components by default.
      * @default true
      */
-    floatingLabels?: boolean
+    wFull?: boolean
   }
 
   /**

src/runtime/types/zod.d.ts

@@ -6,9 +6,14 @@ declare module 'zod' {
   /** Global configuration added by `nuxt-auto-form` Nuxt module */
   interface GlobalMeta {
     /** Auto-form specific configuration */
-    autoForm?: {
+    theme?: {
       /** Float the input box to the right of the label */
       floatRight?: boolean
+      /**
+       * Apply `w-full` class to all input components by default.
+       * @default true
+       */
+      wFull?: boolean
     }
 
     /**