arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 17:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(content): improve examples

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-14 12:42:07 +02:00
parent 0a3cc5a25d
commit d5bcb0da59
14 changed files with 248 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue
View File

@@ -11,7 +11,6 @@ const items = shallowRef<AccordionItem[]>([
{ {
label: 'Colors', label: 'Colors',
icon: 'i-lucide-swatch-book', icon: 'i-lucide-swatch-book',
slot: 'colors' as const,
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.' content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
}, },
{ {

49
docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue
View File

@@ -1,26 +1,35 @@
<script setup lang="ts"> <script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui' import type { BreadcrumbItem } from '@nuxt/ui'
const items = [{ const items = [
label: 'Home', {
to: '/' label: 'Home',
}, { to: '/'
slot: 'dropdown' as const, },
icon: 'i-lucide-ellipsis', {
children: [{ slot: 'dropdown' as const,
label: 'Documentation' icon: 'i-lucide-ellipsis',
}, { children: [
label: 'Themes' {
}, { label: 'Documentation'
label: 'GitHub' },
}] {
}, { label: 'Themes'
label: 'Components', },
to: '/components' {
}, { label: 'GitHub'
label: 'Breadcrumb', }
to: '/components/breadcrumb' ]
}] satisfies BreadcrumbItem[] },
{
label: 'Components',
to: '/components'
},
{
label: 'Breadcrumb',
to: '/components/breadcrumb'
}
] satisfies BreadcrumbItem[]
</script> </script>
<template> <template>

24
docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
View File

@@ -1,16 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { BreadcrumbItem } from '@nuxt/ui' import type { BreadcrumbItem } from '@nuxt/ui'
const items: BreadcrumbItem[] = [{ const items: BreadcrumbItem[] = [
label: 'Home', {
to: '/' label: 'Home',
}, { to: '/'
label: 'Components', },
to: '/components' {
}, { label: 'Components',
label: 'Breadcrumb', to: '/components'
to: '/components/breadcrumb' },
}] {
label: 'Breadcrumb',
to: '/components/breadcrumb'
}
]
</script> </script>
<template> <template>

41
docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue
View File

@@ -1,23 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui' import type { DropdownMenuItem } from '@nuxt/ui'
const items: DropdownMenuItem[] = [{ const items: DropdownMenuItem[] = [
label: 'Team', {
icon: 'i-lucide-users' label: 'Team',
}, { icon: 'i-lucide-users'
label: 'Invite users', },
icon: 'i-lucide-user-plus', {
children: [{ label: 'Invite users',
label: 'Invite by email', icon: 'i-lucide-user-plus',
icon: 'i-lucide-send-horizontal' children: [
}, { {
label: 'Invite by link', label: 'Invite by email',
icon: 'i-lucide-link' icon: 'i-lucide-send-horizontal'
}] },
}, { {
label: 'New team', label: 'Invite by link',
icon: 'i-lucide-plus' icon: 'i-lucide-link'
}] }
]
},
{
label: 'New team',
icon: 'i-lucide-plus'
}
]
</script> </script>
<template> <template>

147
docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue
View File

@@ -1,76 +1,79 @@
<script setup lang="ts"> <script setup lang="ts">
const groups = [{ const groups = [
id: 'settings', {
items: [ id: 'settings',
{ items: [
label: 'Profile', {
icon: 'i-lucide-user', label: 'Profile',
kbds: ['meta', 'P'] icon: 'i-lucide-user',
}, kbds: ['meta', 'P']
{ },
label: 'Billing', {
icon: 'i-lucide-credit-card', label: 'Billing',
kbds: ['meta', 'B'], icon: 'i-lucide-credit-card',
slot: 'billing' as const kbds: ['meta', 'B'],
}, slot: 'billing' as const
{ },
label: 'Notifications', {
icon: 'i-lucide-bell' label: 'Notifications',
}, icon: 'i-lucide-bell'
{ },
label: 'Security', {
icon: 'i-lucide-lock' label: 'Security',
} icon: 'i-lucide-lock'
] }
}, { ]
id: 'users', },
label: 'Users', {
slot: 'users' as const, id: 'users',
items: [ label: 'Users',
{ slot: 'users' as const,
label: 'Benjamin Canac', items: [
suffix: 'benjamincanac', {
to: 'https://github.com/benjamincanac', label: 'Benjamin Canac',
target: '_blank' suffix: 'benjamincanac',
}, to: 'https://github.com/benjamincanac',
{ target: '_blank'
label: 'Sylvain Marroufin', },
suffix: 'smarroufin', {
to: 'https://github.com/smarroufin', label: 'Sylvain Marroufin',
target: '_blank' suffix: 'smarroufin',
}, to: 'https://github.com/smarroufin',
{ target: '_blank'
label: 'Sébastien Chopin', },
suffix: 'atinux', {
to: 'https://github.com/atinux', label: 'Sébastien Chopin',
target: '_blank' suffix: 'atinux',
}, to: 'https://github.com/atinux',
{ target: '_blank'
label: 'Romain Hamel', },
suffix: 'romhml', {
to: 'https://github.com/romhml', label: 'Romain Hamel',
target: '_blank' suffix: 'romhml',
}, to: 'https://github.com/romhml',
{ target: '_blank'
label: 'Haytham A. Salama', },
suffix: 'Haythamasalama', {
to: 'https://github.com/Haythamasalama', label: 'Haytham A. Salama',
target: '_blank' suffix: 'Haythamasalama',
}, to: 'https://github.com/Haythamasalama',
{ target: '_blank'
label: 'Daniel Roe', },
suffix: 'danielroe', {
to: 'https://github.com/danielroe', label: 'Daniel Roe',
target: '_blank' suffix: 'danielroe',
}, to: 'https://github.com/danielroe',
{ target: '_blank'
label: 'Neil Richter', },
suffix: 'noook', {
to: 'https://github.com/noook', label: 'Neil Richter',
target: '_blank' suffix: 'noook',
} to: 'https://github.com/noook',
] target: '_blank'
}] }
]
}
]
</script> </script>
<template> <template>

20
docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
View File

@@ -3,14 +3,18 @@ import type { ContextMenuItem } from '@nuxt/ui'
const loading = ref(true) const loading = ref(true)
const items: ContextMenuItem[] = [{ const items = [
label: 'Refresh the Page', {
slot: 'refresh' label: 'Refresh the Page',
}, { slot: 'refresh' as const
label: 'Clear Cookies and Refresh' },
}, { {
label: 'Clear Cache and Refresh' label: 'Clear Cookies and Refresh'
}] },
{
label: 'Clear Cache and Refresh'
}
] satisfies ContextMenuItem[]
</script> </script>
<template> <template>

8
docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
View File

@@ -1,23 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui' import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[] = [ const items = [
{ {
label: 'Guide', label: 'Guide',
icon: 'i-lucide-book-open' icon: 'i-lucide-book-open'
}, },
{ {
label: 'Composables', label: 'Composables',
icon: 'i-lucide-database' icon: 'i-lucide-database'
}, },
{ {
label: 'Components', label: 'Components',
icon: 'i-lucide-box', icon: 'i-lucide-box',
slot: 'components' slot: 'components' as const
} }
] ] satisfies NavigationMenuItem[]
</script> </script>
<template> <template>

10
docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue
View File

@@ -1,23 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import type { StepperItem } from '@nuxt/ui' import type { StepperItem } from '@nuxt/ui'
const items: StepperItem[] = [ const items = [
{ {
slot: 'address', slot: 'address' as const,
title: 'Address', title: 'Address',
description: 'Add your address here', description: 'Add your address here',
icon: 'i-lucide-house' icon: 'i-lucide-house'
}, { }, {
slot: 'shipping', slot: 'shipping' as const,
title: 'Shipping', title: 'Shipping',
description: 'Set your preferred shipping method', description: 'Set your preferred shipping method',
icon: 'i-lucide-truck' icon: 'i-lucide-truck'
}, { }, {
slot: 'checkout', slot: 'checkout' as const,
title: 'Checkout', title: 'Checkout',
description: 'Confirm your order' description: 'Confirm your order'
} }
] ] satisfies StepperItem[]
</script> </script>
<template> <template>

3
docs/app/components/content/examples/stepper/StepperWithControlsExample.vue
View File

@@ -3,17 +3,14 @@ import type { StepperItem } from '@nuxt/ui'
const items: StepperItem[] = [ const items: StepperItem[] = [
{ {
slot: 'address',
title: 'Address', title: 'Address',
description: 'Add your address here', description: 'Add your address here',
icon: 'i-lucide-house' icon: 'i-lucide-house'
}, { }, {
slot: 'shipping',
title: 'Shipping', title: 'Shipping',
description: 'Set your preferred shipping method', description: 'Set your preferred shipping method',
icon: 'i-lucide-truck' icon: 'i-lucide-truck'
}, { }, {
slot: 'checkout',
title: 'Checkout', title: 'Checkout',
description: 'Confirm your order' description: 'Confirm your order'
} }

32
docs/app/components/content/examples/tree/TreeCustomSlotExample.vue
View File

@@ -6,21 +6,23 @@ const items = [
label: 'app/', label: 'app/',
slot: 'app' as const, slot: 'app' as const,
defaultExpanded: true, defaultExpanded: true,
children: [{ children: [
label: 'composables/', {
children: [ label: 'composables/',
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' }, children: [
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' } { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
] { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
}, ]
{ },
label: 'components/', {
defaultExpanded: true, label: 'components/',
children: [ defaultExpanded: true,
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' }, children: [
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' } { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
] { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
}] ]
}
]
}, },
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' }, { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' } { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

34
docs/app/components/content/examples/tree/TreeExpandedExample.vue
View File

@@ -5,22 +5,24 @@ const items: TreeItem[] = [
{ {
label: 'app/', label: 'app/',
value: 'app', value: 'app',
children: [{ children: [
label: 'composables/', {
value: 'composables', label: 'composables/',
children: [ value: 'composables',
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' }, children: [
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' } { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
] { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
}, ]
{ },
label: 'components/', {
value: 'components', label: 'components/',
children: [ value: 'components',
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' }, children: [
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' } { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
] { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
}] ]
}
]
}, },
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' }, { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' } { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

32
docs/app/components/content/examples/tree/TreeModelValueExample.vue
View File

@@ -5,21 +5,23 @@ const items: TreeItem[] = [
{ {
label: 'app/', label: 'app/',
defaultExpanded: true, defaultExpanded: true,
children: [{ children: [
label: 'composables/', {
children: [ label: 'composables/',
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' }, children: [
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' } { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
] { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
}, ]
{ },
label: 'components/', {
defaultExpanded: true, label: 'components/',
children: [ defaultExpanded: true,
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' }, children: [
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' } { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
] { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
}] ]
}
]
}, },
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' }, { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' } { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

32
docs/app/components/content/examples/tree/TreeOnSelectExample.vue
View File

@@ -8,21 +8,23 @@ const items: TreeItem[] = [
onSelect: (e: Event) => { onSelect: (e: Event) => {
e.preventDefault() e.preventDefault()
}, },
children: [{ children: [
label: 'composables/', {
children: [ label: 'composables/',
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' }, children: [
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' } { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
] { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
}, ]
{ },
label: 'components/', {
defaultExpanded: true, label: 'components/',
children: [ defaultExpanded: true,
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' }, children: [
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' } { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
] { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
}] ]
}
]
}, },
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' }, { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' } { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

32
docs/app/components/content/examples/tree/TreeOnToggleExample.vue
View File

@@ -8,21 +8,23 @@ const items: TreeItem[] = [
onToggle: (e: Event) => { onToggle: (e: Event) => {
e.preventDefault() e.preventDefault()
}, },
children: [{ children: [
label: 'composables/', {
children: [ label: 'composables/',
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' }, children: [
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' } { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
] { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
}, ]
{ },
label: 'components/', {
defaultExpanded: true, label: 'components/',
children: [ defaultExpanded: true,
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' }, children: [
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' } { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
] { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
}] ]
}
]
}, },
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' }, { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' } { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }