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

feat(Accordion/Breadcrumb/CommandPalette/ContextMenu/DropdownMenu/NavigationMenu/Tabs): add labelKey prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-11 14:39:44 +02:00
parent f6f9823b15
commit acfc6cef2d
23 changed files with 342 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -322,6 +322,47 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
</nav>"
`;
exports[`NavigationMenu > renders with labelKey correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"><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-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-0" aria-controls="radix-navigation-menu-v-0-0-0-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-heroicons-book-open<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
<!---->
<!--teleport start-->
<!---->
<!--teleport end-->
</li>
<li data-menu-item="" class="min-w-0 py-2"><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-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-primary] before:bg-[--ui-bg-elevated]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-1" aria-controls="radix-navigation-menu-v-0-0-0-content-1"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5 text-[--ui-primary]" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
<!---->
<!--teleport start-->
<!---->
<!--teleport end-->
</li>
</ul>
</div>
<!--v-if-->
<div style="position: relative;">
<ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
<li data-menu-item="" class="min-w-0 py-2"><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-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-[--ui-text-dimmed]" aria-hidden="true"></span></span>
<!--v-if-->
</a>
<!--v-if-->
</li>
<li data-menu-item="" class="min-w-0 py-2"><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-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] cursor-not-allowed opacity-75" data-radix-vue-collection-item=""><span class="iconify i-heroicons:question-mark-circle shrink-0 size-5 text-[--ui-text-dimmed]" aria-hidden="true"></span><span class="truncate">i-heroicons-question-mark-circle<!--v-if--></span>
<!--v-if-->
</button>
<!--v-if-->
</li>
</ul>
</div>
<!--v-if-->
<div class="absolute top-full inset-x-0 flex w-full">
<!--v-if-->
<!---->
</div>
</nav>"
`;
exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
<div style="position: relative;">