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

fix(NavigationMenu): disable collapsible with collapsed prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-01-30 14:19:13 +01:00
parent 6c20f8a9ea
commit 07e1b4f1f4
5 changed files with 101 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
playground/app/pages/components/navigation-menu.vue
View File

@@ -42,6 +42,7 @@ const items = [
}, {
label: 'Components',
icon: 'i-lucide-box',
to: '/components',
active: true,
defaultOpen: true,
children: [{
@@ -108,7 +109,7 @@ const items = [
:color="color"
:variant="variant"
:orientation="orientation"
:viewport-orientation="contentOrientation"
:content-orientation="contentOrientation"
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"

8
src/runtime/components/NavigationMenu.vue
View File

@@ -239,17 +239,17 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<DefineItemTemplate v-slot="{ item, index, level = 0 }">
<component
:is="(orientation === 'vertical' && item.children?.length) ? UCollapsible : NavigationMenuItem"
:is="(orientation === 'vertical' && item.children?.length && !collapsed) ? UCollapsible : NavigationMenuItem"
as="li"
:value="item.value || String(index)"
:default-open="item.defaultOpen"
:unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
:unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
:open="item.open"
>
<div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
<ReuseLinkTemplate :item="(item as T)" :index="index" />
</div>
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
<component
:is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
as-child
@@ -290,7 +290,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
</NavigationMenuContent>
</ULink>
<template v-if="orientation === 'vertical' && item.children?.length" #content>
<template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
<ul :class="ui.childList({ class: props.ui?.childList })">
<ReuseItemTemplate
v-for="(childItem, childIndex) in item.children"

1
test/components/NavigationMenu.spec.ts
View File

@@ -88,6 +88,7 @@ describe('NavigationMenu', () => {
['with labelKey', { props: { ...props, labelKey: 'icon' } }],
['with arrow', { props: { ...props, arrow: true, modelValue: '0' } }],
['with orientation vertical', { props: { ...props, orientation: 'vertical' as const, modelValue: '0' } }],
['with orientation vertical and collapsed', { props: { ...props, orientation: 'vertical' as const, modelValue: '0', collapsed: true } }],
['with content orientation vertical', { props: { ...props, contentOrientation: 'vertical' as const, modelValue: '0' } }],
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),

47
test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
View File

@@ -785,6 +785,53 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
</nav>"
`;
exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>
</li>
<li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
<li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)] px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
</ul>
</div>
<div class="px-2 h-px bg-[var(--ui-border)]"></div>
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</a>
<!--v-if-->
</li>
<li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
</ul>
</div>
<!--v-if-->
<!--v-if-->
</nav>"
`;
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">

47
test/components/__snapshots__/NavigationMenu.spec.ts.snap
View File

@@ -785,6 +785,53 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
</nav>"
`;
exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>
</li>
<li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
<li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)] px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
</ul>
</div>
<div class="px-2 h-px bg-[var(--ui-border)]"></div>
<div style="position: relative;">
<ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</a>
<!--v-if-->
</li>
<li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
</li>
</ul>
</div>
<!--v-if-->
<!--v-if-->
</nav>"
`;
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
<div style="position: relative;">