docs: consistent usage of :component-example

docs/components/content/examples/FormExampleBasic.vue

@@ -20,7 +20,7 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UForm :validate="validate" :state="state" @submit="onSubmit">
+  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleElements.vue

@@ -56,7 +56,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm ref="form" :schema="schema" :state="state" @submit="onSubmit">
+  <UForm ref="form" :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup name="input" label="Input">
       <UInput v-model="state.input" />
     </UFormGroup>

docs/components/content/examples/FormExampleJoi.vue

@@ -21,7 +21,7 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="state" @submit="onSubmit">
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleOnError.vue

@@ -26,7 +26,7 @@ async function onError (event: FormErrorEvent) {
 </script>
 
 <template>
-  <UForm :validate="validate" :state="state" @submit="onSubmit" @error="onError">
+  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit" @error="onError">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleValibot.vue

@@ -21,7 +21,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="state" @submit="onSubmit">
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleYup.vue

@@ -23,7 +23,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="state" @submit="onSubmit">
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleZod.vue

@@ -21,7 +21,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="state" @submit="onSubmit">
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

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
 

docs/content/5.navigation/4.tabs.md

@@ -15,19 +15,37 @@ Pass an array to the `items` prop of the Tabs component. Each item can have the
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
 
-:component-example{component="tabs-example-basic" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'tabs-example-basic'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ### Vertical
 
 You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
 
-:component-example{component="tabs-example-vertical" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'tabs-example-vertical'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ### Default index
 
 You can set the default index of the tabs by setting the `default-index` prop.
 
-:component-example{component="tabs-example-index" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'tabs-example-index'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
   This will have no effect if you are using a `v-model` to control the selected index.
@@ -37,13 +55,25 @@ You can set the default index of the tabs by setting the `default-index` prop.
 
 You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
 
-:component-example{component="tabs-example-change" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'tabs-example-change'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ### Control the selected index
 
 Use a `v-model` to control the selected index.
 
-:component-example{component="tabs-example-v-model" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'tabs-example-v-model'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ::callout{icon="i-heroicons-information-circle"}
 In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.

docs/content/7.layout/1.card.md

@@ -8,7 +8,13 @@ links:
 
 ## Usage
 
-:component-example{component="card-example" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'card-example'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ## Slots
 

docs/content/7.layout/2.container.md

@@ -8,7 +8,13 @@ links:
 
 ## Usage
 
-:component-example{component="container-example" :componentProps='{"class": "w-full"}'}
+::component-example
+---
+component: 'container-example'
+componentProps:
+  class: 'w-full'
+---
+::
 
 ## Props