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
 

docs/content/3.forms/4.select-menu.md

@@ -16,23 +16,47 @@ The `SelectMenu` component renders by default a [Select](/forms/select) componen
 
 Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
 
-:component-example{component="select-menu-example-basic" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-basic'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### Multiple
 
 You can use the `multiple` prop to select multiple values.
 
-:component-example{component="select-menu-example-multiple" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-multiple'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### Objects
 
 You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
 
-:component-example{component="select-menu-example-objects" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-objects'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.
 
-:component-example{component="select-menu-example-objects-value-attribute" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-objects-value-attribute'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### Icon
 
@@ -81,7 +105,13 @@ Pass a function to the `searchable` prop to customize the search behavior and fi
 
 Use the `debounce` prop to adjust the delay of the function.
 
-:component-example{component="select-menu-example-async-search" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-async-search'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### Create option
 
@@ -89,7 +119,13 @@ Use the `creatable` prop to enable the creation of new options when the search d
 
 Try to search for something that doesn't exist in the example below.
 
-:component-example{component="select-menu-example-creatable" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-creatable'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ## Popper
 
@@ -113,25 +149,49 @@ Use the `popper` prop to customize the popper instance.
 
 You can override the `#label` slot and handle the display yourself.
 
-:component-example{component="select-menu-example-multiple-slot" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-multiple-slot'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### `default`
 
 You can also override the `#default` slot entirely.
 
-:component-example{component="select-menu-example-button" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-button'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### `option`
 
 Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
 
-:component-example{component="select-menu-example-option-slot" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-option-slot'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### `option-empty`
 
 Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
 
-:component-example{component="select-menu-example-option-empty-slot" :componentProps='{"class": "w-full lg:w-40"}'}
+::component-example
+---
+component: 'select-menu-example-option-empty-slot'
+componentProps:
+  class: 'w-full lg:w-40'
+---
+::
 
 ### `option-create`
 

docs/content/3.forms/9.form-group.md

@@ -247,7 +247,13 @@ props:
 
 Use the `#error` slot to set the custom content for error.
 
-:component-example{component="form-group-error-slot-example" :componentProps='{"class": "w-60"}'}
+::component-example
+---
+component: 'form-group-error-slot-example'
+componentProps:
+  class: 'w-60'
+---
+::
 
 ## Props