From 09d453b5cfdbe5e04cf4d8f1e64dea6ab216841a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 23 Sep 2024 17:16:34 +0200
Subject: [PATCH] docs(ComponentCode/ComponentExample): use `justify-center`
 everywhere

---
 docs/app/components/content/ComponentCode.vue    |  2 +-
 docs/app/components/content/ComponentExample.vue |  2 +-
 docs/content/3.components/collapsible.md         |  4 ----
 docs/content/3.components/command-palette.md     |  4 ----
 docs/content/3.components/context-menu.md        |  4 ----
 docs/content/3.components/drawer.md              |  8 --------
 docs/content/3.components/dropdown-menu.md       |  7 -------
 docs/content/3.components/modal.md               | 14 --------------
 docs/content/3.components/navigation-menu.md     |  1 -
 docs/content/3.components/popover.md             |  7 -------
 docs/content/3.components/progress.md            |  1 -
 docs/content/3.components/separator.md           | 10 +++++-----
 docs/content/3.components/slideover.md           | 13 -------------
 docs/content/3.components/slider.md              |  1 -
 docs/content/3.components/tooltip.md             |  6 ------
 15 files changed, 7 insertions(+), 77 deletions(-)

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 6bad055b..5b1a6b07 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/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">
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 69bed175..b5312929 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/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>
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index 09298f6a..3419cfa2 100644
--- a/docs/content/3.components/collapsible.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md
index 195720cc..eec6bea9 100644
--- a/docs/content/3.components/command-palette.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md
index f3aa3ad3..24e28fac 100644
--- a/docs/content/3.components/context-menu.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index 9e41fcc4..d4857244 100644
--- a/docs/content/3.components/drawer.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index ebe57329..8f2093a5 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index 45a0ba9c..d153e032 100644
--- a/docs/content/3.components/modal.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md
index 8f0f8a68..3024e54f 100644
--- a/docs/content/3.components/navigation-menu.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/popover.md b/docs/content/3.components/popover.md
index 21e87004..2d036c42 100644
--- a/docs/content/3.components/popover.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/progress.md b/docs/content/3.components/progress.md
index df4d8a59..0a484785 100644
--- a/docs/content/3.components/progress.md
+++ b/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'
diff --git a/docs/content/3.components/separator.md b/docs/content/3.components/separator.md
index d3300ebf..1be01b07 100644
--- a/docs/content/3.components/separator.md
+++ b/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
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index 34eab266..962e0cdb 100644
--- a/docs/content/3.components/slideover.md
+++ b/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'
 ---
 ::
 
diff --git a/docs/content/3.components/slider.md b/docs/content/3.components/slider.md
index c26dfba2..ef267657 100644
--- a/docs/content/3.components/slider.md
+++ b/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
diff --git a/docs/content/3.components/tooltip.md b/docs/content/3.components/tooltip.md
index e199912d..fa4abec1 100644
--- a/docs/content/3.components/tooltip.md
+++ b/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'
 ---
 ::