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): add sm:w-auto content slot

Browse Source 
Resolves #3788
This commit is contained in:
Benjamin Canac
2025-04-04 11:42:47 +02:00
parent cf91f3c4cf
commit abe0859691
3 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1226,7 +1226,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
<div class="absolute top-full left-0 flex w-full justify-center">
<!--v-if-->
<div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-1" aria-labelledby="reka-navigation-menu-v-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-1" aria-labelledby="reka-navigation-menu-v-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full sm:w-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2">
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" 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="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start">
@@ -1262,7 +1262,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
</button></li>
</ul>
</div>
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-2" aria-labelledby="reka-navigation-menu-v-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-2" aria-labelledby="reka-navigation-menu-v-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full sm:w-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2">
<li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" 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="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start">

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

@@ -1226,7 +1226,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
<div class="absolute top-full left-0 flex w-full justify-center">
<!--v-if-->
<div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full sm:w-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2">
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:house size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start">
@@ -1262,7 +1262,7 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
</button></li>
</ul>
</div>
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full sm:w-auto data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2">
<li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start">