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

feat(NavigationMenu): handle children on vertical orientation (#2384)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-22 22:52:38 +02:00
committed by GitHub
parent 69d7b57825
commit 34bddd45be
22 changed files with 277 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
View File

@@ -1,5 +1,5 @@
<template>
<UCollapsible class="w-48">
<UCollapsible class="flex flex-col gap-2 w-48">
<UButton
class="group"
label="Open"

2
docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
View File

@@ -7,7 +7,7 @@ defineShortcuts({
</script>
<template>
<UCollapsible v-model:open="open" class="w-48">
<UCollapsible v-model:open="open" class="flex flex-col gap-2 w-48">
<UButton
label="Open"
color="neutral"

37
docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
View File

@@ -37,22 +37,22 @@ const items = [
children: [
{
label: 'defineShortcuts',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Define shortcuts for your application.'
},
{
label: 'useModal',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a modal within your application.'
},
{
label: 'useSlideover',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a slideover within your application.'
},
{
label: 'useToast',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a toast within your application.'
}
]
@@ -63,45 +63,50 @@ const items = [
children: [
{
label: 'Link',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Use NuxtLink with superpowers.'
},
{
label: 'Modal',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a modal within your application.'
},
{
label: 'NavigationMenu',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a list of links.'
},
{
label: 'Pagination',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a list of pages.'
},
{
label: 'Popover',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Display a non-modal dialog that floats around a trigger element.'
},
{
label: 'Progress',
icon: 'i-heroicons-document-text-20-solid',
icon: 'i-heroicons-document-text',
description: 'Show a horizontal bar to indicate task progression.'
}
]
}
]
const active = ref('0')
const active = ref()
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
active.value = String((Number(active.value) + 1) % items.length)
}, 2000)
defineShortcuts({
1: () => {
active.value = '0'
},
2: () => {
active.value = '1'
},
3: () => {
active.value = '2'
}
})
</script>

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

@@ -21,7 +21,7 @@ prettier: true
ignore:
- class
props:
class: 'w-48'
class: 'flex flex-col gap-2 w-48'
slots:
default: |
@@ -48,7 +48,7 @@ prettier: true
ignore:
- class
props:
class: 'w-48'
class: 'flex flex-col gap-2 w-48'
disabled: true
slots:
default: |
@@ -79,7 +79,7 @@ name: 'collapsible-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Collapsible.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
::
::tip

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

@@ -259,7 +259,7 @@ name: 'drawer-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Drawer.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
::
::tip

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

@@ -284,7 +284,7 @@ name: 'dropdown-menu-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the DropdownMenu.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
::
### With custom slot

2
docs/content/3.components/input-menu.md
View File

@@ -608,7 +608,7 @@ name: 'input-menu-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the InputMenu.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
::
### Control open state on focus

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

@@ -287,7 +287,7 @@ name: 'modal-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Modal.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
::
::tip

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

@@ -63,19 +63,19 @@ props:
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
@@ -84,27 +84,27 @@ props:
active: true
children:
- label: Link
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
- label: GitHub
@@ -137,10 +137,14 @@ Each item can take a `children` array of objects with the following properties t
Use the `orientation` prop to change the orientation of the NavigationMenu.
When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children.
::component-code
---
collapse: true
ignore:
- items
- class
external:
- items
props:
@@ -148,19 +152,78 @@ props:
items:
- - label: Guide
icon: i-heroicons-book-open
to: /getting-started
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-heroicons-home
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-heroicons-cloud-arrow-down
- label: 'Icons'
icon: 'i-heroicons-face-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-heroicons-circle-stack
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-heroicons-cube-transparent
to: /components
active: true
children:
- label: Link
icon: i-heroicons-document-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
- - label: GitHub
icon: i-simple-icons-github
badge: 3.8k
to: https://github.com/nuxt/ui
target: _blank
- label: Help
icon: i-heroicons-question-mark-circle
disabled: true
class: 'data-[orientation=vertical]:w-48'
---
::
@@ -322,19 +385,19 @@ props:
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
@@ -343,27 +406,27 @@ props:
active: true
children:
- label: Link
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
class: 'justify-center'
@@ -414,19 +477,19 @@ props:
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
@@ -435,27 +498,27 @@ props:
active: true
children:
- label: Link
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text-20-solid
icon: i-heroicons-document-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
class: 'justify-center'
@@ -479,6 +542,10 @@ name: 'navigation-menu-model-value-example'
---
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
::
::tip
You can also pass the `value` of one of the items if provided.
::

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

@@ -174,7 +174,7 @@ name: 'popover-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Popover.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
::
### With command palette

2
docs/content/3.components/select-menu.md
View File

@@ -654,7 +654,7 @@ name: 'select-menu-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the SelectMenu.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
::
### Control search term

2
docs/content/3.components/select.md
View File

@@ -596,7 +596,7 @@ name: 'select-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Select.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
::
### With rotating icon

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

@@ -286,7 +286,7 @@ name: 'slideover-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Slideover.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
::
::tip

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

@@ -182,7 +182,7 @@ name: 'tooltip-open-example'
::
::note
In this example, press :kbd{value="O"} to toggle the Tooltip.
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
::
## API