feat(NavigationMenu): new component

src/runtime/components/Link.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { NuxtLinkProps } from '#app'
+import { pick } from '#ui/utils'
 
 export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'> {
   type?: string
@@ -11,6 +12,10 @@ export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'
   exactHash?: boolean
   inactiveClass?: string
 }
+
+export function getNuxtLinkProps (props: NuxtLinkProps) {
+  return pick(props, ['to', 'href', 'target', 'rel', 'noRel', 'prefetch', 'noPrefetch'])
+}
 </script>
 
 <script setup lang="ts">

src/runtime/components/NavigationMenu.vue

@@ -0,0 +1,126 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/navigationMenu'
+import { getNuxtLinkProps, type LinkProps } from '#ui/components/Link.vue'
+import type { AvatarProps } from '#ui/components/Avatar.vue'
+import type { BadgeProps } from '#ui/components/Badge.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
+
+export interface NavigationMenuLink extends LinkProps {
+  label: string | number
+  labelClass?: any
+  icon?: string
+  iconClass?: any
+  avatar?: AvatarProps
+  avatarClass?: any
+  click?: Function
+  class?: any
+  badge?: string | number | BadgeProps
+}
+
+export interface NavigationMenuProps<T extends NavigationMenuLink> extends Omit<NavigationMenuRootProps, 'asChild' | 'dir'> {
+  links: T[][] | T[]
+  class?: any
+  ui?: Partial<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+export interface NavigationMenuSlots<T extends NavigationMenuLink> {
+  avatar(props: { link: T; active: boolean }): any
+  icon(props: { link: T; active: boolean }): any
+  badge(props: { link: T; active: boolean }): any
+  default(props: { link: T; active: boolean }): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends NavigationMenuLink">
+import { computed } from 'vue'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { NuxtLink, UIcon, UAvatar, UBadge } from '#components'
+import { omit } from '../utils'
+
+const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { orientation: 'horizontal' })
+const emits = defineEmits<NavigationMenuEmits>()
+defineSlots<NavigationMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'delayDuration', 'skipDelayDuration', 'orientation'), emits)
+
+const ui = computed(() => tv({ extend: navigationMenu, slots: props.ui })({
+  orientation: props.orientation
+}))
+
+const lists = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as T[][])
+
+function onClick (e: MouseEvent, link: NavigationMenuLink, { href, navigate, isExternal }: { href: string; navigate: Function; isExternal: boolean }) {
+  if (link.click) {
+    link.click(e)
+  }
+
+  if (href && !isExternal) {
+    navigate(e)
+  }
+}
+</script>
+
+<template>
+  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <NavigationMenuList v-for="(list, index) in lists" :key="`list-${index}`" :class="ui.list()">
+      <NavigationMenuItem v-for="(link, subIndex) in list" :key="`list-${index}-${subIndex}`" :class="ui.item()">
+        <NuxtLink v-slot="{ href, target, rel, navigate, isExternal, isActive }" v-bind="getNuxtLinkProps(link)" custom>
+          <NavigationMenuLink as-child :active="isActive">
+            <component
+              :is="href ? 'a' : 'button'"
+              :href="href"
+              :rel="rel"
+              :target="target"
+              :class="ui.base({ active: isActive, class: link.class })"
+              @click="onClick($event, link, { href, navigate, isExternal })"
+            >
+              <slot name="avatar" :link="link" :active="isActive">
+                <UAvatar
+                  v-if="link.avatar"
+                  size="2xs"
+                  v-bind="link.avatar"
+                  :class="ui.avatar({ active: isActive, class: link.avatarClass })"
+                />
+              </slot>
+
+              <slot name="icon" :link="link" :active="isActive">
+                <UIcon
+                  v-if="link.icon"
+                  :name="link.icon"
+                  :class="ui.icon({ active: isActive, class: link.iconClass })"
+                />
+              </slot>
+
+              <slot :link="link" :active="isActive">
+                <span v-if="link.label" :class="ui.label({ class: link.labelClass })">
+                  {{ link.label }}
+                </span>
+              </slot>
+
+              <slot name="badge" :link="link" :active="isActive">
+                <UBadge
+                  v-if="link.badge"
+                  color="gray"
+                  variant="solid"
+                  size="xs"
+                  v-bind="(typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge"
+                  :class="ui.badge()"
+                />
+              </slot>
+            </component>
+          </NavigationMenuLink>
+        </NuxtLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>

src/runtime/utils/index.ts

@@ -1,3 +1,30 @@
+export function omit<Data extends object, Keys extends keyof Data> (
+  data: Data,
+  keys: Keys[]
+): Omit<Data, Keys> {
+  const result = { ...data }
+
+  for (const key of keys) {
+    delete result[key]
+  }
+
+  return result as Omit<Data, Keys>
+}
+
+export function pick<Data extends object, Keys extends keyof Data> (
+  data: Data,
+  keys: Keys[]
+): Pick<Data, Keys> {
+  const result = {} as Pick<Data, Keys>
+
+  for (const key of keys) {
+    result[key] = data[key]
+  }
+
+  return result
+}
+
+
 export function looseToNumber (val: any): any {
   const n = parseFloat(val)
   return isNaN(n) ? val : n

src/theme/index.ts

@@ -11,6 +11,7 @@ export { default as icons } from './icons'
 export { default as input } from './input'
 export { default as kbd } from './kbd'
 export { default as modal } from './modal'
+export { default as navigationMenu } from './navigationMenu'
 export { default as popover } from './popover'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'

src/theme/navigationMenu.ts

@@ -0,0 +1,49 @@
+export default {
+  slots: {
+    root: 'relative',
+    list: '',
+    item: '',
+    base: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute 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 disabled:cursor-not-allowed disabled:opacity-75',
+    icon: 'shrink-0 w-5 h-5 relative',
+    avatar: 'shrink-0 relative',
+    label: 'truncate relative',
+    badge: 'shrink-0 ms-auto relative rounded'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: 'w-full flex items-center justify-between',
+        list: 'flex items-center min-w-0',
+        item: 'min-w-0',
+        base: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
+      },
+      vertical: {
+        root: 'flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200 dark:divide-gray-800',
+        base: 'px-2.5 py-1.5 before:inset-px'
+      }
+    },
+    active: {
+      true: {
+        base: 'text-gray-900 dark:text-white',
+        icon: 'text-gray-700 dark:text-gray-200'
+      },
+      false: {
+        base: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
+        icon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    active: true,
+    class: 'after:bg-primary-500 dark:after:bg-primary-400'
+  }, {
+    orientation: 'vertical',
+    active: true,
+    class: 'before:bg-gray-100 dark:before:bg-gray-800'
+  }, {
+    orientation: 'vertical',
+    active: false,
+    class: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
+  }]
+}