arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-23 17:16:34 +02:00
parent 4f5a8ee4f6
commit 09d453b5cf
15 changed files with 7 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/content/ComponentCode.vue
View File

@@ -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">

2
docs/app/components/content/ComponentExample.vue
View File

@@ -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>

4
docs/content/3.components/collapsible.md
View File

@@ -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'
---
::

4
docs/content/3.components/command-palette.md
View File

@@ -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'
---
::

4
docs/content/3.components/context-menu.md
View File

@@ -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'
---
::

8
docs/content/3.components/drawer.md
View File

@@ -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'
---
::

7
docs/content/3.components/dropdown-menu.md
View File

@@ -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'
---
::

14
docs/content/3.components/modal.md
View File

@@ -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'
---
::

1
docs/content/3.components/navigation-menu.md
View File

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

7
docs/content/3.components/popover.md
View File

@@ -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'
---
::

1
docs/content/3.components/progress.md
View File

@@ -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'

10
docs/content/3.components/separator.md
View File

@@ -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

13
docs/content/3.components/slideover.md
View File

@@ -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'
---
::

1
docs/content/3.components/slider.md
View File

@@ -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

6
docs/content/3.components/tooltip.md
View File

@@ -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'
---
::