diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index 87d236e7..4bec61d6 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -3,7 +3,7 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui' import type { AppConfig } from '@nuxt/schema' import theme from '#build/ui/navigation-menu' -import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types' +import type { AvatarProps, BadgeProps, ChipProps, LinkProps, PopoverProps, TooltipProps } from '../types' import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils' type NavigationMenu = ComponentConfig @@ -57,6 +57,11 @@ export interface NavigationMenuItem extends Omit [key: string]: any @@ -137,6 +142,11 @@ export interface NavigationMenuProps * @defaultValue 'label' */ labelKey?: keyof NestedItem + /** + * Display a chip on the item when the menu is collapsed with the children list. + * @defaultValue false + */ + chip?: boolean | ChipProps class?: any ui?: NavigationMenu['slots'] } @@ -208,6 +218,7 @@ const accordionProps = useForwardPropsEmits(reactivePick(props, 'collapsible', ' const contentProps = toRef(() => props.content) const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} : props.tooltip, { delayDuration: 0, content: { side: 'right' } }) as TooltipProps) const popoverProps = toRef(() => defu(typeof props.popover === 'boolean' ? {} : props.popover, { mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }) as PopoverProps) +const chipProps = toRef(() => defu(typeof props.chip === 'boolean' ? {} : props.chip, { size: 'md', color: 'primary' }) as ChipProps) const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>() const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({ @@ -253,6 +264,17 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) { return props.type === 'single' ? indexes[0] : indexes } + +function getChipProps(item: NavigationMenuItem) { + const itemChip = item.chip !== undefined ? item.chip : props.chip + if (itemChip === false) return null + + const baseProps = typeof itemChip === 'boolean' ? {} : itemChip + return defu(baseProps, chipProps.value, { + text: item.children?.length?.toString() || '0', + show: (item.children?.length || 0) > 0 + }) +}