feat(NavigationMenu): handle children on vertical orientation (#2384)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/NavigationMenu.vue

@@ -16,6 +16,7 @@ export interface NavigationMenuChildItem extends Omit<LinkProps, 'raw' | 'custom
   label: string
   description?: string
   icon?: string
+  badge?: string | number | BadgeProps
   onSelect?(e: Event): void
 }
 
@@ -87,7 +88,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
 <script setup lang="ts" generic="T extends NavigationMenuItem">
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
@@ -95,6 +96,7 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UBadge from './Badge.vue'
+import UCollapsible from './Collapsible.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   orientation: 'horizontal',
@@ -107,6 +109,8 @@ const slots = defineSlots<NavigationMenuSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'delayDuration', 'skipDelayDuration', 'orientation'), emits)
 const contentProps = toRef(() => props.content)
 
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, active?: boolean, index: number }>()
+
 const ui = computed(() => navigationMenu({
   orientation: props.orientation,
   color: props.color,
@@ -119,47 +123,58 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 </script>
 
 <template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <UAvatar v-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
+      </slot>
+
+      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
+          {{ get(item, props.labelKey as string) }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
+      </span>
+
+      <span v-if="item.badge || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+          <UBadge
+            v-if="item.badge"
+            color="neutral"
+            variant="outline"
+            :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            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 })" />
+        </slot>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
   <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
-        <NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.item({ class: props.ui?.item })">
+        <component
+          :is="(item.children?.length && orientation === 'vertical') ? UCollapsible : NavigationMenuItem"
+          v-for="(item, index) in list"
+          :key="`list-${listIndex}-${index}`"
+          as="li"
+          :value="item.value || String(index)"
+          :class="ui.item({ class: props.ui?.item })"
+        >
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <component
-              :is="item.children?.length ? NavigationMenuTrigger : NavigationMenuLink"
+              :is="(item.children?.length && orientation === 'horizontal') ? NavigationMenuTrigger : NavigationMenuLink"
               v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
               as-child
               :active="active"
               @select="item.onSelect"
             >
               <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], 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">
-                    <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
-                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
-                  </slot>
-
-                  <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
-                    <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
-                      {{ get(item, props.labelKey as string) }}
-                    </slot>
-
-                    <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
-                  </span>
-
-                  <span v-if="item.badge || (item.children?.length && orientation === 'horizontal') || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
-                    <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
-                      <UBadge
-                        v-if="item.badge"
-                        color="neutral"
-                        variant="outline"
-                        :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
-                        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 && orientation === 'horizontal'" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
-                    </slot>
-                  </span>
-                </slot>
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
               </ULinkBase>
             </component>
 
@@ -188,7 +203,21 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
               </ul>
             </NavigationMenuContent>
           </ULink>
-        </NavigationMenuItem>
+
+          <template v-if="item.children?.length && orientation === 'vertical'" #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.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled })">
+                      <ReuseItemTemplate :item="childItem" :active="childActive" :index="childIndex" />
+                    </ULinkBase>
+                  </NavigationMenuLink>
+                </ULink>
+              </li>
+            </ul>
+          </template>
+        </component>
       </NavigationMenuList>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />