Skip to content

Commit

Permalink
feat(NavigationMenu): add item-content slot
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjamincanac
benjamincanac committed Oct 31, 2024
1 parent d980115 commit b5ca0d9
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 52 deletions.
88 changes: 88 additions & 0 deletions docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<script setup lang="ts">
const items = [
{
label: 'Docs',
icon: 'i-heroicons-book-open',
slot: 'docs',
children: [
{
label: 'Icons',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Components',
icon: 'i-heroicons-cube-transparent',
slot: 'components',
children: [
{
label: 'Link',
description: 'Use NuxtLink with superpowers.'
},
{
label: 'Modal',
description: 'Display a modal within your application.'
},
{
label: 'NavigationMenu',
description: 'Display a list of links.'
},
{
label: 'Pagination',
description: 'Display a list of pages.'
},
{
label: 'Popover',
description: 'Display a non-modal dialog that floats around a trigger element.'
},
{
label: 'Progress',
description: 'Show a horizontal bar to indicate task progression.'
}
]
},
{
label: 'GitHub'
}
]
</script>

<template>
<UNavigationMenu
:items="items"
class="justify-center"
:ui="{
viewport: 'sm:w-[var(--radix-navigation-menu-viewport-width)]',
childList: 'sm:w-96',
childLinkDescription: 'text-balance line-clamp-2'
}"
>
<template #docs-content="{ item }">
<ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
<li class="row-span-3">
<Placeholder class="size-full min-h-48" />
</li>

<li v-for="child in item.children" :key="child.label">
<ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-[var(--ui-bg-elevated)]/50">
<p class="font-medium text-[var(--ui-text-highlighted)]">
{{ child.label }}
</p>
<p class="text-[var(--ui-text-muted)] line-clamp-2">
{{ child.description }}
</p>
</ULink>
</li>
</ul>
</template>
</UNavigationMenu>
</template>
17 changes: 16 additions & 1 deletion docs/content/3.components/navigation-menu.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,7 @@ You will have access to the following slots:
- `#{{ item.slot }}-leading`{lang="ts-type"}
- `#{{ item.slot }}-label`{lang="ts-type"}
- `#{{ item.slot }}-trailing`{lang="ts-type"}
- `#{{ item.slot }}-content`{lang="ts-type"}

::component-example
---
Expand All @@ -568,7 +569,21 @@ name: 'navigation-menu-custom-slot-example'
::

::tip{to="#slots"}
You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.
::

### With content slot

Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.

::component-example
---
name: 'navigation-menu-content-slot-example'
---
::

::note
In this example, we add the `sm:w-[var(--radix-navigation-menu-viewport-width)]` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
::

## API
Expand Down
58 changes: 31 additions & 27 deletions src/runtime/components/NavigationMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
'item-leading': SlotProps<T>
'item-label': SlotProps<T>
'item-trailing': SlotProps<T>
'item-content': SlotProps<T>
} & DynamicSlots<T, SlotProps<T>>

</script>
Expand Down Expand Up @@ -153,7 +154,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
:class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
/>
<UIcon v-if="item.children?.length" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />

<UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
</slot>
</span>
</slot>
Expand All @@ -172,44 +174,46 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
>
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
<component
:is="(item.children?.length && orientation === 'horizontal') ? NavigationMenuTrigger : NavigationMenuLink"
v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
:is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
as-child
:active="active"
:disabled="item.disabled"
@select="item.onSelect"
>
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
<ReuseItemTemplate :item="(item as T)" :active="active" :index="index" />
</ULinkBase>
</component>

<NavigationMenuContent v-if="item.children?.length && orientation === 'horizontal'" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
<ul :class="ui.childList({ class: props.ui?.childList })">
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />

<div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
<p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
{{ get(childItem, props.labelKey as string) }}

<UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
</p>
<p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
{{ childItem.description }}
</p>
</div>
</ULinkBase>
</NavigationMenuLink>
</ULink>
</li>
</ul>
<NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
<slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
<ul :class="ui.childList({ class: props.ui?.childList })">
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />

<div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
<p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
{{ get(childItem, props.labelKey as string) }}

<UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
</p>
<p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
{{ childItem.description }}
</p>
</div>
</ULinkBase>
</NavigationMenuLink>
</ULink>
</li>
</ul>
</slot>
</NavigationMenuContent>
</ULink>

<template v-if="item.children?.length && orientation === 'vertical'" #content>
<template v-if="orientation === 'vertical' && item.children?.length" #content>
<ul :class="ui.childList({ class: props.ui?.childList })">
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
Expand Down
5 changes: 2 additions & 3 deletions src/theme/navigation-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
childLinkLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]',
childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
separator: 'px-2 h-px bg-[var(--ui-border)]',
viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
// FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewportWrapper: 'absolute top-full left-0 flex w-full justify-center',
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: '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]',
indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]'
Expand Down
Loading

0 comments on commit b5ca0d9

Please sign in to comment.