mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 15:31:46 +01:00
feat(NavigationMenu): handle content, color, variant, etc.
This commit is contained in:
Benjamin Canac
@@ -1,28 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { tv } from 'tailwind-variants'
|
||||
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuItemProps } from 'radix-vue'
|
||||
import { tv, type VariantProps } from 'tailwind-variants'
|
||||
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuItemProps, NavigationMenuContentProps } from 'radix-vue'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/navigation-menu'
|
||||
import type { AvatarProps, BadgeProps, LinkProps, SeparatorProps } from '#ui/types'
|
||||
import type { AvatarProps, BadgeProps, LinkProps } from '#ui/types'
|
||||
import type { DynamicSlots } from '#ui/types/utils'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
|
||||
|
||||
const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
|
||||
|
||||
export interface NavigationMenuchildItem extends Omit<LinkProps, 'custom'> {
|
||||
label: string
|
||||
description?: string
|
||||
icon?: string
|
||||
select? (e: MouseEvent): void
|
||||
}
|
||||
|
||||
export interface NavigationMenuItem extends Omit<LinkProps, 'custom'>, Pick<NavigationMenuItemProps, 'value'> {
|
||||
label?: string
|
||||
icon?: string
|
||||
avatar?: AvatarProps
|
||||
badge?: string | number | BadgeProps
|
||||
trailingIcon?: string
|
||||
slot?: string
|
||||
children?: NavigationMenuchildItem[]
|
||||
select? (e: MouseEvent): void
|
||||
}
|
||||
|
||||
type NavigationMenuVariants = VariantProps<typeof navigationMenu>
|
||||
|
||||
export interface NavigationMenuProps<T> extends Omit<NavigationMenuRootProps, 'asChild' | 'dir'> {
|
||||
/**
|
||||
* The icon displayed to open the menu.
|
||||
* @defaultValue `appConfig.ui.icons.chevronDown`
|
||||
*/
|
||||
trailingIcon?: string
|
||||
items?: T[] | T[][]
|
||||
separator?: SeparatorProps
|
||||
color?: NavigationMenuVariants['color']
|
||||
variant?: NavigationMenuVariants['variant']
|
||||
content?: Omit<NavigationMenuContentProps, 'asChild' | 'forceMount'>
|
||||
arrow?: boolean
|
||||
class?: any
|
||||
ui?: Partial<typeof navigationMenu.slots>
|
||||
}
|
||||
@@ -40,19 +59,27 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="T extends NavigationMenuItem">
|
||||
import { computed } from 'vue'
|
||||
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, useForwardPropsEmits } from 'radix-vue'
|
||||
import { computed, toRef } from 'vue'
|
||||
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { UIcon, UAvatar, UBadge, ULink, ULinkBase } from '#components'
|
||||
import { pickLinkProps } from '#ui/utils/link'
|
||||
|
||||
const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { orientation: 'horizontal' })
|
||||
const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
|
||||
orientation: 'horizontal',
|
||||
delayDuration: 0
|
||||
})
|
||||
const emits = defineEmits<NavigationMenuEmits>()
|
||||
const slots = defineSlots<NavigationMenuSlots<T>>()
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'delayDuration', 'skipDelayDuration', 'orientation'), emits)
|
||||
const contentProps = toRef(() => props.content)
|
||||
|
||||
const ui = computed(() => tv({ extend: navigationMenu, slots: props.ui })({ orientation: props.orientation }))
|
||||
const ui = computed(() => tv({ extend: navigationMenu, slots: props.ui })({
|
||||
orientation: props.orientation,
|
||||
color: props.color,
|
||||
variant: props.variant
|
||||
}))
|
||||
|
||||
const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
|
||||
</script>
|
||||
@@ -61,41 +88,83 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
|
||||
<NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
|
||||
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
|
||||
<NavigationMenuList :class="ui.list()">
|
||||
<NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.itemWrapper()">
|
||||
<NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.item()">
|
||||
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
|
||||
<NavigationMenuLink as-child :active="active" @select="item.select">
|
||||
<ULinkBase v-bind="slotProps" :class="ui.item({ active, disabled: !!item.disabled })">
|
||||
<component
|
||||
:is="item.children?.length ? NavigationMenuTrigger : NavigationMenuLink"
|
||||
v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
|
||||
as-child
|
||||
:active="active"
|
||||
@select="item.select"
|
||||
>
|
||||
<ULinkBase v-bind="slotProps" :class="ui.link({ active, disabled: !!item.disabled })">
|
||||
<slot :name="item.slot || 'item'" :item="item" :index="index">
|
||||
<slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="active" :index="index">
|
||||
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active, disabled: !!item.disabled })" />
|
||||
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active, disabled: !!item.disabled })" />
|
||||
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active, disabled: !!item.disabled })" />
|
||||
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active, disabled: !!item.disabled })" />
|
||||
</slot>
|
||||
|
||||
<span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel()">
|
||||
<span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel()">
|
||||
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
|
||||
{{ item.label }}
|
||||
</slot>
|
||||
|
||||
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ active })" />
|
||||
</span>
|
||||
|
||||
<span v-if="item.badge || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing()">
|
||||
<span v-if="item.badge || (item.children?.length && orientation === 'horizontal') || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing()">
|
||||
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
|
||||
<UBadge
|
||||
v-if="item.badge"
|
||||
color="white"
|
||||
size="sm"
|
||||
v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
|
||||
:class="ui.itemTrailingBadge()"
|
||||
:class="ui.linkTrailingBadge()"
|
||||
/>
|
||||
<UIcon v-if="item.children?.length && orientation === 'horizontal'" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ active })" />
|
||||
</slot>
|
||||
</span>
|
||||
</slot>
|
||||
</ULinkBase>
|
||||
</NavigationMenuLink>
|
||||
</component>
|
||||
|
||||
<NavigationMenuContent v-if="item.children?.length && orientation === 'horizontal'" v-bind="contentProps" :class="ui.content()">
|
||||
<ul :class="ui.childList()">
|
||||
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem()">
|
||||
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
|
||||
<NavigationMenuLink as-child :active="childActive" @select="childItem.select">
|
||||
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ active: childActive })">
|
||||
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ active: childActive })" />
|
||||
|
||||
<div :class="ui.childLinkWrapper()">
|
||||
<p :class="ui.childLinkLabel({ active: childActive })">
|
||||
{{ childItem.label }}
|
||||
|
||||
<UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkExternalIcon({ active: childActive })" />
|
||||
</p>
|
||||
<p v-if="childItem.description" :class="ui.childLinkDescription({ active: childActive })">
|
||||
{{ childItem.description }}
|
||||
</p>
|
||||
</div>
|
||||
</ULinkBase>
|
||||
</NavigationMenuLink>
|
||||
</ULink>
|
||||
</li>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</ULink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
|
||||
<USeparator v-if="orientation === 'vertical' && listIndex < lists.length - 1" v-bind="separator" orientation="horizontal" :class="ui.separator()" />
|
||||
<div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator()" />
|
||||
</template>
|
||||
|
||||
<div v-if="orientation === 'horizontal'" :class="ui.viewportWrapper()">
|
||||
<NavigationMenuIndicator v-if="arrow" :class="ui.indicator()">
|
||||
<div :class="ui.arrow()" />
|
||||
</NavigationMenuIndicator>
|
||||
|
||||
<NavigationMenuViewport :class="ui.viewport()" />
|
||||
</div>
|
||||
</NavigationMenuRoot>
|
||||
</template>
|
||||
|
||||
@@ -1,75 +1,191 @@
|
||||
export default {
|
||||
export default (config: { colors: string[] }) => ({
|
||||
slots: {
|
||||
root: 'relative flex gap-1.5',
|
||||
list: 'isolate min-w-0',
|
||||
itemWrapper: 'min-w-0',
|
||||
item: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md 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-primary-500 dark:focus-visible:before:ring-primary-400',
|
||||
itemLeadingIcon: 'shrink-0 size-5',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemLabel: 'truncate',
|
||||
itemTrailing: 'ms-auto',
|
||||
itemTrailingBadge: 'shrink-0 rounded',
|
||||
separator: 'px-2'
|
||||
item: 'min-w-0',
|
||||
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md 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-primary-500 dark:focus-visible:before:ring-primary-400',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkLeadingAvatar: 'shrink-0',
|
||||
linkTrailing: 'ms-auto inline-flex',
|
||||
linkTrailingBadge: 'shrink-0 rounded',
|
||||
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
|
||||
linkLabel: 'truncate',
|
||||
linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
|
||||
childList: 'grid grid-cols-2 gap-2 p-2',
|
||||
childItem: '',
|
||||
childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-left',
|
||||
childLinkWrapper: 'flex flex-col items-start',
|
||||
childLinkLabel: 'font-semibold text-sm relative inline-flex',
|
||||
childLinkDescription: 'text-sm text-gray-500 dark:text-gray-400',
|
||||
childLinkIcon: 'size-5 shrink-0',
|
||||
childLinkExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
|
||||
separator: 'px-2 h-px bg-gray-200 dark:bg-gray-800',
|
||||
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 mt-2.5 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] h-[--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]',
|
||||
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] top-full 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-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm'
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
|
||||
black: ''
|
||||
},
|
||||
variant: {
|
||||
pill: '',
|
||||
line: '',
|
||||
link: ''
|
||||
},
|
||||
orientation: {
|
||||
horizontal: {
|
||||
root: 'w-full items-center justify-between',
|
||||
list: 'flex items-center',
|
||||
item: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-0.5 after:mt-2 after:rounded-full'
|
||||
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0'
|
||||
},
|
||||
vertical: {
|
||||
root: 'flex-col',
|
||||
item: 'px-2.5 py-1.5 before:inset-px'
|
||||
link: 'px-2.5 py-1.5 before:inset-y-px before:inset-x-0'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
true: {
|
||||
item: 'text-gray-900 dark:text-white',
|
||||
itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
|
||||
link: 'text-gray-900 dark:text-white',
|
||||
linkLeadingIcon: 'text-gray-700 dark:text-gray-200',
|
||||
childLink: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
|
||||
childLinkIcon: 'text-gray-700 dark:text-gray-200'
|
||||
|
||||
},
|
||||
false: {
|
||||
item: 'text-gray-500 dark:text-gray-400',
|
||||
itemLeadingIcon: 'text-gray-400 dark:text-gray-500'
|
||||
link: 'text-gray-500 dark:text-gray-400',
|
||||
linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
|
||||
childLink: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors',
|
||||
childLinkIcon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
true: {
|
||||
item: 'cursor-not-allowed opacity-75'
|
||||
link: 'cursor-not-allowed opacity-75'
|
||||
}
|
||||
}
|
||||
},
|
||||
compoundVariants: [{
|
||||
variant: 'line',
|
||||
orientation: 'horizontal',
|
||||
class: {
|
||||
link: 'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-0.5 after:rounded-full'
|
||||
}
|
||||
}, {
|
||||
variant: 'line',
|
||||
orientation: 'vertical',
|
||||
class: {
|
||||
link: 'after:absolute after:-left-2 after:inset-y-0.5 after:block after:w-0.5 after:rounded-full'
|
||||
}
|
||||
}, {
|
||||
disabled: false,
|
||||
active: false,
|
||||
variant: 'pill',
|
||||
class: {
|
||||
item: 'hover:text-gray-900 dark:hover:text-white transition-colors',
|
||||
itemLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
link: 'hover:text-gray-900 dark:hover:text-white transition-colors hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors',
|
||||
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
}, ...config.colors.map((color: string) => ({
|
||||
color,
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
class: {
|
||||
item: 'after:bg-primary-500 dark:after:bg-primary-400'
|
||||
link: `text-${color}-500 dark:text-${color}-400 before:bg-gray-100 dark:before:bg-gray-800`,
|
||||
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
|
||||
}
|
||||
})), {
|
||||
color: 'black',
|
||||
variant: 'pill',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
|
||||
linkLeadingIcon: 'text-gray-900 dark:text-white'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
disabled: false,
|
||||
variant: 'line',
|
||||
class: {
|
||||
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
|
||||
link: 'hover:text-gray-900 dark:hover:text-white transition-colors hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors',
|
||||
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
}, ...config.colors.map((color: string) => ({
|
||||
color,
|
||||
variant: 'line',
|
||||
active: true,
|
||||
class: {
|
||||
item: 'before:bg-gray-100 dark:before:bg-gray-800'
|
||||
link: `after:bg-${color}-500 dark:after:bg-${color}-400`
|
||||
}
|
||||
})), {
|
||||
color: 'black',
|
||||
variant: 'line',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'after:bg-gray-900 dark:after:bg-white'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
disabled: false,
|
||||
active: false,
|
||||
disabled: false,
|
||||
variant: 'link',
|
||||
class: {
|
||||
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
|
||||
link: 'hover:text-gray-900 dark:hover:text-white transition-colors',
|
||||
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}, ...config.colors.map((color: string) => ({
|
||||
color,
|
||||
variant: 'link',
|
||||
active: true,
|
||||
class: {
|
||||
link: `text-${color}-500 dark:text-${color}-400`,
|
||||
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
|
||||
}
|
||||
})), {
|
||||
color: 'black',
|
||||
variant: 'link',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'text-gray-900 dark:text-white',
|
||||
linkLeadingIcon: 'text-gray-900 dark:text-white'
|
||||
}
|
||||
}],
|
||||
// compoundVariants: [{
|
||||
// disabled: false,
|
||||
// active: false,
|
||||
// class: {
|
||||
// item: 'hover:text-gray-900 dark:hover:text-white transition-colors',
|
||||
// itemLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
|
||||
// }
|
||||
// }, {
|
||||
// orientation: 'horizontal',
|
||||
// active: true,
|
||||
// class: {
|
||||
// item: 'after:bg-primary-500 dark:after:bg-primary-400'
|
||||
// }
|
||||
// }, {
|
||||
// orientation: 'horizontal',
|
||||
// disabled: false,
|
||||
// class: {
|
||||
// item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
|
||||
// }
|
||||
// }, {
|
||||
// orientation: 'vertical',
|
||||
// active: true,
|
||||
// class: {
|
||||
// item: 'before:bg-gray-100 dark:before:bg-gray-800'
|
||||
// }
|
||||
// }, {
|
||||
// orientation: 'vertical',
|
||||
// active: false,
|
||||
// disabled: false,
|
||||
// class: {
|
||||
// item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
|
||||
// }
|
||||
// }],
|
||||
defaultVariants: {
|
||||
color: 'primary',
|
||||
variant: 'pill'
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user