From 0eb8d8f7ec2939c630996346c6e6b6d497fc750b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 10 Nov 2023 11:24:49 +0100
Subject: [PATCH] docs: consistent usage of `:component-example`

---
 .../content/examples/FormExampleBasic.vue     |  2 +-
 .../content/examples/FormExampleElements.vue  |  2 +-
 .../content/examples/FormExampleJoi.vue       |  2 +-
 .../content/examples/FormExampleOnError.vue   |  2 +-
 .../content/examples/FormExampleValibot.vue   |  2 +-
 .../content/examples/FormExampleYup.vue       |  2 +-
 .../content/examples/FormExampleZod.vue       |  2 +-
 docs/content/3.forms/10.form.md               | 57 +++++++++++--
 docs/content/3.forms/4.select-menu.md         | 80 ++++++++++++++++---
 docs/content/3.forms/9.form-group.md          |  8 +-
 docs/content/5.navigation/4.tabs.md           | 40 ++++++++--
 docs/content/7.layout/1.card.md               |  8 +-
 docs/content/7.layout/2.container.md          |  8 +-
 13 files changed, 183 insertions(+), 32 deletions(-)

diff --git a/docs/components/content/examples/FormExampleBasic.vue b/docs/components/content/examples/FormExampleBasic.vue
index 25e5cbb3..728a829d 100644
--- a/docs/components/content/examples/FormExampleBasic.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleElements.vue b/docs/components/content/examples/FormExampleElements.vue
index 3c5c7cbb..a25f3412 100644
--- a/docs/components/content/examples/FormExampleElements.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleJoi.vue b/docs/components/content/examples/FormExampleJoi.vue
index 1a617000..5867af4f 100644
--- a/docs/components/content/examples/FormExampleJoi.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleOnError.vue b/docs/components/content/examples/FormExampleOnError.vue
index 842ee645..11b33daa 100644
--- a/docs/components/content/examples/FormExampleOnError.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleValibot.vue b/docs/components/content/examples/FormExampleValibot.vue
index 8546fd80..de9fe659 100644
--- a/docs/components/content/examples/FormExampleValibot.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleYup.vue b/docs/components/content/examples/FormExampleYup.vue
index 05bb5ba3..7f2f4257 100644
--- a/docs/components/content/examples/FormExampleYup.vue
+++ b/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>
diff --git a/docs/components/content/examples/FormExampleZod.vue b/docs/components/content/examples/FormExampleZod.vue
index 378c83b6..2c05b87b 100644
--- a/docs/components/content/examples/FormExampleZod.vue
+++ b/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>
diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index d6352cc4..7ebb2244 100644
--- a/docs/content/3.forms/10.form.md
+++ b/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
 
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 8ffc92f9..03240068 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/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`
 
diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index 2eb0fce5..b8f7af0b 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/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
 
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
index ac3ba2bc..26c05023 100644
--- a/docs/content/5.navigation/4.tabs.md
+++ b/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.
diff --git a/docs/content/7.layout/1.card.md b/docs/content/7.layout/1.card.md
index 3ea559f9..c8f98a26 100644
--- a/docs/content/7.layout/1.card.md
+++ b/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
 
diff --git a/docs/content/7.layout/2.container.md b/docs/content/7.layout/2.container.md
index aa8252f2..e15fe8ca 100644
--- a/docs/content/7.layout/2.container.md
+++ b/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