fix(NavigationMenu): proxy modelValue / defaultValue in vertical orientation

Resolves #5392

Author: benjamincanac

src/runtime/components/NavigationMenu.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
 import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types'
@@ -63,12 +63,49 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   [key: string]: any
 }
 
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+type SingleOrMultipleType = 'single' | 'multiple'
+type Orientation = NavigationMenuRootProps['orientation']
+
+type NavigationMenuModelValue<
+  K extends SingleOrMultipleType = SingleOrMultipleType,
+  O extends Orientation = Orientation
+> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[]
+
+export interface NavigationMenuProps<
+  T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
+  K extends SingleOrMultipleType = SingleOrMultipleType,
+  O extends Orientation = Orientation
+> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * Determines whether a "single" or "multiple" items can be selected at a time.
+   *
+   * Only works when `orientation` is `vertical`.
+   * @defaultValue 'multiple'
+   */
+  type?: K
+  /**
+   * The controlled value of the active item(s).
+   * - In horizontal orientation: always `string`
+   * - In vertical orientation with `type="single"`: `string`
+   * - In vertical orientation with `type="multiple"`: `string[]`
+   *
+   * Use this when you need to control the state of the items. Can be binded with `v-model`
+   */
+  modelValue?: NavigationMenuModelValue<K, O>
+  /**
+   * The default active value of the item(s).
+   * - In horizontal orientation: always `string`
+   * - In vertical orientation with `type="single"`: `string`
+   * - In vertical orientation with `type="multiple"`: `string[]`
+   *
+   * Use when you do not need to control the state of the item(s).
+   */
+  defaultValue?: NavigationMenuModelValue<K, O>
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
@@ -95,7 +132,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
    * The orientation of the menu.
    * @defaultValue 'horizontal'
    */
-  orientation?: NavigationMenuRootProps['orientation']
+  orientation?: O
   /**
    * Collapse the navigation menu to only show icons.
    * Only works when `orientation` is `vertical`.
@@ -142,7 +179,18 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
   ui?: NavigationMenu['slots']
 }
 
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+export type NavigationMenuEmits<
+  K extends SingleOrMultipleType = SingleOrMultipleType,
+  O extends Orientation = Orientation
+> = {
+  /**
+   * Event handler called when the value changes.
+   * - In horizontal orientation: emits `string`
+   * - In vertical orientation with `type="single"`: emits `string | undefined`
+   * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+   */
+  'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined]
+}
 
 type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean, ui: NavigationMenu['ui'] }) => any
 
@@ -163,7 +211,7 @@ export type NavigationMenuSlots<
 
 </script>
 
-<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
+<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation">
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
@@ -182,25 +230,23 @@ import UTooltip from './Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
-  orientation: 'horizontal',
+const props = withDefaults(defineProps<NavigationMenuProps<T, K, O>>(), {
+  orientation: 'horizontal' as never,
   contentOrientation: 'horizontal',
   externalIcon: true,
   delayDuration: 0,
-  type: 'multiple',
+  type: 'multiple' as never,
   collapsible: true,
   unmountOnHide: true,
   labelKey: 'label'
 })
-const emits = defineEmits<NavigationMenuEmits>()
+const emits = defineEmits<NavigationMenuEmits<K, O>>()
 const slots = defineSlots<NavigationMenuSlots<T>>()
 
 const appConfig = useAppConfig() as NavigationMenu['AppConfig']
 
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
-  modelValue: props.modelValue,
-  defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
   orientation: props.orientation,
@@ -415,14 +461,27 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <NavigationMenuRoot
+    v-bind="{
+      ...rootProps,
+      ...(orientation === 'horizontal' ? {
+        modelValue: modelValue as string,
+        defaultValue: defaultValue as string
+      } : {}),
+      ...$attrs
+    }"
+    :data-collapsed="collapsed"
+    data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <component
         v-bind="orientation === 'vertical' && !collapsed ? {
           ...accordionProps,
-          defaultValue: getAccordionDefaultValue(list)
+          modelValue,
+          defaultValue: defaultValue ?? getAccordionDefaultValue(list)
         } : {}"
         :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
         as="ul"