docs(ComponentCode/ComponentExample): use justify-center everywhere

docs/app/components/content/ComponentCode.vue

@@ -251,7 +251,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
         </template>
       </div>
 
-      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class]">
+      <div class="flex justify-center border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class]">
         <component :is="name" v-bind="componentProps" @update:model-value="!!componentProps.modelValue && setComponentProp('modelValue', $event)">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <ContentSlot :name="slot" unwrap="p">

docs/app/components/content/ComponentExample.vue

@@ -128,7 +128,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
           </UFormField>
         </div>
 
-        <div class="flex p-4" :class="props.class">
+        <div class="flex justify-center p-4" :class="props.class">
           <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>

docs/content/3.components/collapsible.md

@@ -20,7 +20,6 @@ Then, use the `#content` slot to add the content displayed when the Collapsible
 prettier: true
 ignore:
   - class
-class: 'justify-center'
 props:
   class: 'w-48'
 slots:
@@ -48,7 +47,6 @@ Use the `disabled` prop to disable the Collapsible.
 prettier: true
 ignore:
   - class
-class: 'justify-center'
 props:
   class: 'w-48'
   disabled: true
@@ -77,7 +75,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'collapsible-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -96,7 +93,6 @@ Here is an example with a rotating icon in the Button that indicates the open st
 ::component-example
 ---
 name: 'collapsible-icon-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/command-palette.md

@@ -467,7 +467,6 @@ You can use the CommandPalette component inside a [Popover](/components/popover)
 ---
 collapse: true
 name: 'popover-command-palette-example'
-class: 'justify-center'
 ---
 ::
 
@@ -479,7 +478,6 @@ You can use the CommandPalette component inside a [Modal](/components/modal)'s c
 ---
 collapse: true
 name: 'modal-command-palette-example'
-class: 'justify-center'
 ---
 ::
 
@@ -491,7 +489,6 @@ You can use the CommandPalette component inside a [Drawer](/components/drawer)'s
 ---
 collapse: true
 name: 'drawer-command-palette-example'
-class: 'justify-center'
 ---
 ::
 
@@ -503,7 +500,6 @@ When using the `close` prop, you can listen to the `update:open` event when the
 ---
 collapse: true
 name: 'command-palette-open-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/context-menu.md

@@ -39,7 +39,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   items:
     - - label: Appearance
@@ -119,7 +118,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   size: xl
   items:
@@ -153,7 +151,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   disabled: true
   items:
@@ -191,7 +188,6 @@ You will have access to the following slots:
 ::component-example
 ---
 name: 'context-menu-custom-slot-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/drawer.md

@@ -18,7 +18,6 @@ Then, use the `#content` slot to add the content displayed when the Drawer is op
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 slots:
   default: |
 
@@ -44,7 +43,6 @@ Use the `title` prop to set the title of the Drawer's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   title: 'Drawer with title'
 slots:
@@ -70,7 +68,6 @@ Use the `description` prop to set the description of the Drawer's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
 props:
@@ -99,7 +96,6 @@ Use the `overlay` prop to control whether the Drawer has an overlay or not. Defa
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   overlay: false
 slots:
@@ -125,7 +121,6 @@ Use the `should-scale-background` prop to scale the background when the Drawer i
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   shouldScaleBackground: true
 slots:
@@ -180,7 +175,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'drawer-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -199,7 +193,6 @@ Use the `#footer` slot to add content after the Drawer's body.
 ::component-example
 ---
 name: 'drawer-footer-slot-example'
-class: 'justify-center'
 ---
 ::
 
@@ -211,7 +204,6 @@ You can use a [CommandPalette](/components/command-palette) component inside the
 ---
 collapse: true
 name: 'drawer-command-palette-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/dropdown-menu.md

@@ -39,7 +39,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   items:
     - - label: Benjamin
@@ -128,7 +127,6 @@ items:
     - left
     - top
     - bottom
-class: 'justify-center'
 props:
   items:
     - label: Profile
@@ -164,7 +162,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   arrow: true
   items:
@@ -197,7 +194,6 @@ ignore:
   - content.align
 external:
   - items
-class: 'justify-center'
 props:
   size: xl
   items:
@@ -239,7 +235,6 @@ ignore:
   - class
 external:
   - items
-class: 'justify-center'
 props:
   disabled: true
   items:
@@ -268,7 +263,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'dropdown-menu-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -290,7 +284,6 @@ You will have access to the following slots:
 ::component-example
 ---
 name: 'dropdown-menu-custom-slot-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/modal.md

@@ -18,7 +18,6 @@ Then, use the `#content` slot to add the content displayed when the Modal is ope
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 slots:
   default: |
 
@@ -44,7 +43,6 @@ Use the `title` prop to set the title of the Modal's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   title: 'Modal with title'
 slots:
@@ -70,7 +68,6 @@ Use the `description` prop to set the description of the Modal's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
 props:
@@ -101,7 +98,6 @@ You can pass all the props of the [Button](/components/button) component to cust
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
   - close.color
@@ -139,7 +135,6 @@ Use the `close-icon` prop to customize the close button [Icon](/components/icon)
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
 props:
@@ -174,7 +169,6 @@ Use the `overlay` prop to control whether the Modal has an overlay or not. Defau
 prettier: true
 ignore:
   - title
-class: 'justify-center'
 props:
   overlay: false
   title: 'Modal without overlay'
@@ -203,7 +197,6 @@ Use the `transition` prop to control whether the Modal is animated or not. Defau
 prettier: true
 ignore:
   - title
-class: 'justify-center'
 props:
   transition: false
   title: 'Modal without transition'
@@ -233,7 +226,6 @@ prettier: true
 ignore:
   - title
   - fullscreen
-class: 'justify-center'
 props:
   fullscreen: true
   title: 'Modal fullscreen'
@@ -263,7 +255,6 @@ prettier: true
 ignore:
   - title
   - preventClose
-class: 'justify-center'
 props:
   preventClose: true
   title: 'Modal prevent close'
@@ -292,7 +283,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'modal-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -326,7 +316,6 @@ Then, use it in your app:
 ::component-example
 ---
 name: 'modal-programmatic-example'
-class: 'justify-center'
 ---
 ::
 
@@ -341,7 +330,6 @@ You can nest modals within each other.
 ::component-example
 ---
 name: 'modal-nested-example'
-class: 'justify-center'
 ---
 ::
 
@@ -352,7 +340,6 @@ Use the `#footer` slot to add content after the Modal's body.
 ::component-example
 ---
 name: 'modal-footer-slot-example'
-class: 'justify-center'
 ---
 ::
 
@@ -364,7 +351,6 @@ You can use a [CommandPalette](/components/command-palette) component inside the
 ---
 collapse: true
 name: 'modal-command-palette-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/navigation-menu.md

@@ -497,7 +497,6 @@ You will have access to the following slots:
 ::component-example
 ---
 name: 'navigation-menu-custom-slot-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/popover.md

@@ -18,7 +18,6 @@ Then, use the `#content` slot to add the content displayed when the Popover is o
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 slots:
   default: |
 
@@ -42,7 +41,6 @@ Use the `mode` prop to change the mode of the Popover. Defaults to `click`.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 items:
   mode:
     - click
@@ -76,7 +74,6 @@ When using the `hover` mode, you can use the `open-delay` and `close-delay` prop
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - mode
 props:
@@ -106,7 +103,6 @@ Use the `content` prop to control how the Popover content is rendered, like its
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 items:
   content.align:
     - start
@@ -145,7 +141,6 @@ Use the `arrow` prop to display an arrow on the Popover.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - arrow
 props:
@@ -175,7 +170,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'popover-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -191,7 +185,6 @@ You can use a [CommandPalette](/components/command-palette) component inside the
 ---
 collapse: true
 name: 'popover-command-palette-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/progress.md

@@ -102,7 +102,6 @@ Use the `orientation` prop to change the orientation of the Progress. Defaults t
 ---
 ignore:
   - class
-class: 'justify-center'
 props:
   orientation: vertical
   class: 'h-48'

docs/content/3.components/separator.md

@@ -27,7 +27,7 @@ Use the `orientation` prop to change the orientation of the Separator. Defaults
 ---
 ignore:
   - class
-class: 'p-8 justify-center'
+class: 'p-8'
 props:
   orientation: vertical
   class: 'h-48'
@@ -40,7 +40,7 @@ Use the `label` prop to display a label in the middle of the Separator.
 
 ::component-code
 ---
-class: 'p-8 justify-center'
+class: 'p-8'
 props:
   label: 'Hello World'
 ---
@@ -52,7 +52,7 @@ Use the `icon` prop to display an icon in the middle of the Separator.
 
 ::component-code
 ---
-class: 'p-8 justify-center'
+class: 'p-8'
 props:
   icon: 'i-simple-icons-nuxtdotjs'
 ---
@@ -65,7 +65,7 @@ Use the `avatar` prop to display an avatar in the middle of the Separator.
 ::component-code
 ---
 prettier: true
-class: 'p-8 justify-center'
+class: 'p-8'
 props:
   avatar:
     src: 'https://github.com/benjamincanac.png'
@@ -78,7 +78,7 @@ Use the `color` prop to change the color of the Separator. Defaults to `gray`.
 
 ::component-code
 ---
-class: 'p-8 justify-center'
+class: 'p-8'
 props:
   color: 'primary'
   type: solid

docs/content/3.components/slideover.md

@@ -18,7 +18,6 @@ Then, use the `#content` slot to add the content displayed when the Slideover is
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 slots:
   default: |
 
@@ -44,7 +43,6 @@ Use the `title` prop to set the title of the Slideover's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   title: 'Slideover with title'
 slots:
@@ -70,7 +68,6 @@ Use the `description` prop to set the description of the Slideover's header.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
 props:
@@ -101,7 +98,6 @@ You can pass all the props of the [Button](/components/button) component to cust
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
   - close.color
@@ -139,7 +135,6 @@ Use the `close-icon` prop to customize the close button [Icon](/components/icon)
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - title
 props:
@@ -174,7 +169,6 @@ Use the `side` prop to set the side of the screen where the Slideover will slide
 prettier: true
 ignore:
   - title
-class: 'justify-center'
 props:
   side: 'left'
   title: 'Slideover with side'
@@ -203,7 +197,6 @@ Use the `overlay` prop to control whether the Slideover has an overlay or not. D
 prettier: true
 ignore:
   - title
-class: 'justify-center'
 props:
   overlay: false
   title: 'Slideover without overlay'
@@ -232,7 +225,6 @@ Use the `transition` prop to control whether the Slideover is animated or not. D
 prettier: true
 ignore:
   - title
-class: 'justify-center'
 props:
   transition: false
   title: 'Slideover without transition'
@@ -262,7 +254,6 @@ prettier: true
 ignore:
   - title
   - preventClose
-class: 'justify-center'
 props:
   preventClose: true
   title: 'Slideover prevent close'
@@ -291,7 +282,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'slideover-open-example'
-class: 'justify-center'
 ---
 ::
 
@@ -325,7 +315,6 @@ Then, use it in your app:
 ::component-example
 ---
 name: 'slideover-programmatic-example'
-class: 'justify-center'
 ---
 ::
 
@@ -340,7 +329,6 @@ You can nest slideovers within each other.
 ::component-example
 ---
 name: 'slideover-nested-example'
-class: 'justify-center'
 ---
 ::
 
@@ -351,7 +339,6 @@ Use the `#footer` slot to add content after the Slideover's body.
 ::component-example
 ---
 name: 'slideover-footer-slot-example'
-class: 'justify-center'
 ---
 ::
 

docs/content/3.components/slider.md

@@ -100,7 +100,6 @@ Use the `orientation` prop to change the orientation of the Slider. Defaults to
 ignore:
   - defaultValue
   - class
-class: 'justify-center'
 props:
   orientation: vertical
   defaultValue: 50

docs/content/3.components/tooltip.md

@@ -28,7 +28,6 @@ Use the `text` prop to set the content of the Tooltip.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 props:
   text: 'Open on GitHub'
 slots:
@@ -75,7 +74,6 @@ Use the `delay-duration` prop to change the delay before the Tooltip appears. Fo
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - text
 props:
@@ -101,7 +99,6 @@ Use the `content` prop to control how the Tooltip content is rendered, like its
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - text
 items:
@@ -136,7 +133,6 @@ Use the `arrow` prop to display an arrow on the Tooltip.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - text
   - arrow
@@ -159,7 +155,6 @@ Use the `disabled` prop to disable the Tooltip.
 ::component-code
 ---
 prettier: true
-class: 'justify-center'
 ignore:
   - text
 props:
@@ -183,7 +178,6 @@ You can control the open state by using the `default-open` prop or the `v-model:
 ::component-example
 ---
 name: 'tooltip-open-example'
-class: 'justify-center'
 ---
 ::