docs: consistent usage of :component-example

docs/content/3.forms/10.form.md

@@ -17,7 +17,13 @@ The Form component requires the `validate` and `state` props for form validation
   - `message` - the error message to display.
   - `path` - the path to the form element matching the `name`.
 
-:component-example{component="form-example-basic" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-basic'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ## Schema
 
@@ -25,19 +31,43 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi), [Valibot]
 
 ### Yup
 
-:component-example{component="form-example-yup" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-yup'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ### Zod
 
-:component-example{component="form-example-zod" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-zod'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ### Joi
 
-:component-example{component="form-example-joi" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-joi'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ### Valibot
 
-:component-example{component="form-example-valibot" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-valibot'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ## Other libraries
 
@@ -131,7 +161,14 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 
 The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
 
-:component-example{component="form-example-elements" :componentProps='{"class": "space-y-4 w-60"}' hiddenCode }
+::component-example
+---
+component: 'form-example-elements'
+componentProps:
+  class: 'w-60'
+hiddenCode: true
+---
+::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue" target="_blank"}
 Take a look at the component!
@@ -147,7 +184,13 @@ You can listen to the `@error` event to handle errors. This event is triggered w
 
 Here is an example of how to focus the first form element with an error:
 
-:component-example{component="form-example-on-error" :componentProps='{"class": "space-y-4 w-60"}'}
+::component-example
+---
+component: 'form-example-on-error'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ## Props