@nuxt/ui 3.0.2 → 3.1.0

package/dist/runtime/components/NavigationMenu.vue

@@ -1,171 +1,50 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/navigation-menu'
-import { tv } from '../utils/tv'
-import type { AvatarProps, BadgeProps, LinkProps } from '../types'
-import type {
-  ArrayOrNested,
-  DynamicSlots,
-  MergeTypes,
-  NestedItem,
-  PartialString,
-  EmitsToProps
-} from '../types/utils'
-
-const appConfigNavigationMenu = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
-
-const navigationMenu = tv({ extend: tv(theme), ...(appConfigNavigationMenu.ui?.navigationMenu || {}) })
-
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
-  /** Description is only used when `orientation` is `horizontal`. */
-  description?: string
-  [key: string]: any
-}
-
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
-  label?: string
-  /**
-   * @IconifyIcon
-   */
-  icon?: string
-  avatar?: AvatarProps
-  /**
-   * Display a badge on the item.
-   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
-   */
-  badge?: string | number | BadgeProps
-  /**
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  /**
-   * The type of the item.
-   * The `label` type only works on `vertical` orientation.
-   * @defaultValue 'link'
-   */
-  type?: 'label' | 'link'
-  slot?: string
-  value?: string
-  children?: NavigationMenuChildItem[]
-  onSelect?(e: Event): void
-  [key: string]: any
-}
-
-type NavigationMenuVariants = VariantProps<typeof navigationMenu>
-
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The icon displayed to open the menu.
-   * @defaultValue appConfig.ui.icons.chevronDown
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  /**
-   * The icon displayed when the item is an external link.
-   * Set to `false` to hide the external icon.
-   * @defaultValue appConfig.ui.icons.external
-   * @IconifyIcon
-   */
-  externalIcon?: boolean | string
-  items?: T
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: NavigationMenuVariants['color']
-  /**
-   * @defaultValue 'pill'
-   */
-  variant?: NavigationMenuVariants['variant']
-  /**
-   * The orientation of the menu.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: NavigationMenuRootProps['orientation']
-  /**
-   * Collapse the navigation menu to only show icons.
-   * Only works when `orientation` is `vertical`.
-   * @defaultValue false
-   */
-  collapsed?: boolean
-  /** Display a line next to the active item. */
-  highlight?: boolean
-  /**
-   * @defaultValue 'primary'
-   */
-  highlightColor?: NavigationMenuVariants['highlightColor']
-  /** The content of the menu. */
-  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
-  /**
-   * The orientation of the content.
-   * Only works when `orientation` is `horizontal`.
-   * @defaultValue 'horizontal'
-   */
-  contentOrientation?: NavigationMenuVariants['contentOrientation']
-  /**
-   * Display an arrow alongside the menu.
-   * @defaultValue false
-   */
-  arrow?: boolean
-  /**
-   * The key used to get the label from the item.
-   * @defaultValue 'label'
-   */
-  labelKey?: keyof NestedItem<T>
-  class?: any
-  ui?: PartialString<typeof navigationMenu.slots>
-}
-
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
-
-type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type NavigationMenuSlots<
-  A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,
-  T extends NestedItem<A> = NestedItem<A>
-> = {
-  'item': SlotProps<T>
-  'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
-  'item-trailing': SlotProps<T>
-  'item-content': SlotProps<T>
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', { index: number, active?: boolean }>
-
+<script>
+import theme from "#build/ui/navigation-menu";
 </script>
 
-<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
-import { computed, toRef } from 'vue'
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'reka-ui'
-import { createReusableTemplate } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { get, isArrayOfArray } from '../utils'
-import { pickLinkProps } from '../utils/link'
-import ULinkBase from './LinkBase.vue'
-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',
-  contentOrientation: 'horizontal',
-  externalIcon: true,
-  delayDuration: 0,
-  unmountOnHide: true,
-  labelKey: 'label'
-})
-const emits = defineEmits<NavigationMenuEmits>()
-const slots = defineSlots<NavigationMenuSlots<T>>()
-
+<script setup>
+import { computed, toRef } from "vue";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get, isArrayOfArray } from "../utils";
+import { tv } from "../utils/tv";
+import { pickLinkProps } from "../utils/link";
+import ULinkBase from "./LinkBase.vue";
+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 = defineProps({
+  as: { type: null, required: false },
+  trailingIcon: { type: String, required: false },
+  externalIcon: { type: [Boolean, String], required: false, default: true },
+  items: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  collapsed: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  highlightColor: { type: null, required: false },
+  content: { type: Object, required: false },
+  contentOrientation: { type: null, required: false, default: "horizontal" },
+  arrow: { type: Boolean, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  delayDuration: { type: Number, required: false, default: 0 },
+  disableClickTrigger: { type: Boolean, required: false },
+  disableHoverTrigger: { type: Boolean, required: false },
+  skipDelayDuration: { type: Number, required: false },
+  disablePointerLeaveClose: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
   modelValue: props.modelValue,
@@ -177,27 +56,17 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disableHoverTrigger: props.disableHoverTrigger,
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
-})), emits)
-
-const contentProps = toRef(() => props.content)
-
-const appConfig = useAppConfig()
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<
-  { item: NavigationMenuItem, index: number, active?: boolean },
-  NavigationMenuSlots<T>
->()
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<
-  { item: NavigationMenuItem, index: number, level?: number },
-  NavigationMenuSlots<T>
->({
+})), emits);
+const contentProps = toRef(() => props.content);
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: Object,
     index: Number,
     level: Number
   }
-})
-
-const ui = computed(() => navigationMenu({
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.navigationMenu || {} })({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
   collapsed: props.collapsed,
@@ -205,48 +74,43 @@ const ui = computed(() => navigationMenu({
   variant: props.variant,
   highlight: props.highlight,
   highlightColor: props.highlightColor || props.color
-}))
-
-const lists = computed<NavigationMenuItem[][]>(() =>
-  props.items?.length
-    ? isArrayOfArray(props.items)
-      ? props.items
-      : [props.items]
-    : []
-)
+}));
+const lists = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
 </script>
 
 <template>
   <DefineLinkTemplate v-slot="{ item, active, index }">
-    <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index">
-      <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :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 })" />
+    <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="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" 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="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>])"
+        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
         :class="ui.linkLabel({ class: props.ui?.linkLabel })"
       >
-        <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey as string) }}
+        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
+          {{ get(item, props.labelKey) }}
         </slot>
 
         <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
       </span>
 
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
-        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!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"
+            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            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="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+          <UIcon v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
           <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
         </slot>
       </span>
@@ -255,19 +119,19 @@ const lists = computed<NavigationMenuItem[][]>(() =>
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? UCollapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && item.children?.length && !collapsed ? UCollapsible : NavigationMenuItem"
       as="li"
       :value="item.value || String(index)"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
       :open="item.open"
     >
       <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
@@ -278,8 +142,8 @@ const lists = computed<NavigationMenuItem[][]>(() =>
           </ULinkBase>
         </component>
 
-        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
-          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
             <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>
@@ -289,7 +153,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
 
                       <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
                         <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
-                          {{ get(childItem, props.labelKey as string) }}
+                          {{ get(childItem, props.labelKey) }}
 
                           <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
                         </p>
@@ -322,6 +186,8 @@ const lists = computed<NavigationMenuItem[][]>(() =>
   </DefineItemTemplate>
 
   <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <slot name="list-leading" />
+
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
         <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: props.ui?.item })" />
@@ -330,6 +196,8 @@ const lists = computed<NavigationMenuItem[][]>(() =>
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
     </template>
 
+    <slot name="list-trailing" />
+
     <div v-if="orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
       <NavigationMenuIndicator v-if="arrow" :class="ui.indicator({ class: props.ui?.indicator })">
         <div :class="ui.arrow({ class: props.ui?.arrow })" />

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -0,0 +1,159 @@
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/navigation-menu';
+import type { AvatarProps, BadgeProps, LinkProps } from '../types';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+    /** Description is only used when `orientation` is `horizontal`. */
+    description?: string;
+    [key: string]: any;
+}
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps;
+    /**
+     * Display a badge on the item.
+     * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     */
+    badge?: string | number | BadgeProps;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The type of the item.
+     * The `label` type only works on `vertical` orientation.
+     * @defaultValue 'link'
+     */
+    type?: 'label' | 'link';
+    slot?: string;
+    value?: string;
+    children?: NavigationMenuChildItem[];
+    onSelect?(e: Event): void;
+    [key: string]: any;
+}
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed to open the menu.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when the item is an external link.
+     * Set to `false` to hide the external icon.
+     * @defaultValue appConfig.ui.icons.external
+     * @IconifyIcon
+     */
+    externalIcon?: boolean | string;
+    items?: T;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: NavigationMenu['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: NavigationMenu['variants']['variant'];
+    /**
+     * The orientation of the menu.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: NavigationMenuRootProps['orientation'];
+    /**
+     * Collapse the navigation menu to only show icons.
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue false
+     */
+    collapsed?: boolean;
+    /** Display a line next to the active item. */
+    highlight?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    highlightColor?: NavigationMenu['variants']['highlightColor'];
+    /** The content of the menu. */
+    content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>;
+    /**
+     * The orientation of the content.
+     * Only works when `orientation` is `horizontal`.
+     * @defaultValue 'horizontal'
+     */
+    contentOrientation?: NavigationMenu['variants']['contentOrientation'];
+    /**
+     * Display an arrow alongside the menu.
+     * @defaultValue false
+     */
+    arrow?: boolean;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    class?: any;
+    ui?: NavigationMenu['slots'];
+}
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {
+}
+type SlotProps<T extends NavigationMenuItem> = (props: {
+    item: T;
+    index: number;
+    active?: boolean;
+}) => any;
+export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+    'item-content': SlotProps<T>;
+    'list-leading': (props?: {}) => any;
+    'list-trailing': (props?: {}) => any;
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing' | 'content', {
+    index: number;
+    active?: boolean;
+}>;
+declare const _default: <T extends ArrayOrNested<NavigationMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<any & NavigationMenuProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+        'item-content': SlotProps<NestedItem<T>>;
+        'list-leading': (props?: {}) => any;
+        'list-trailing': (props?: {}) => any;
+    } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "content" | "label", {
+        index: number;
+        active?: boolean;
+    }>> & {
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+        'item-content': SlotProps<NestedItem<T>>;
+        'list-leading': (props?: {}) => any;
+        'list-trailing': (props?: {}) => any;
+    } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "content" | "label", {
+        index: number;
+        active?: boolean;
+    }>;
+    emit: (evt: "update:modelValue", value: string) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/OverlayProvider.vue

@@ -1,19 +1,15 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useOverlay, type Overlay } from '../composables/useOverlay'
-
-const { overlays, unMount, close } = useOverlay()
-
-const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
-
-const onAfterLeave = (id: symbol) => {
-  close(id)
-  unMount(id)
-}
-
-const onClose = (id: symbol, value: any) => {
-  close(id, value)
-}
+<script setup>
+import { computed } from "vue";
+import { useOverlay } from "../composables/useOverlay";
+const { overlays, unMount, close } = useOverlay();
+const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted));
+const onAfterLeave = (id) => {
+  close(id);
+  unMount(id);
+};
+const onClose = (id, value) => {
+  close(id, value);
+};
 </script>
 
 <template>
@@ -22,8 +18,8 @@ const onClose = (id: symbol, value: any) => {
     v-for="overlay in mountedOverlays"
     :key="overlay.id"
     v-bind="overlay.props"
-    v-model:open="overlay.modelValue"
-    @close="(value:any) => onClose(overlay.id, value)"
+    v-model:open="overlay.isOpen"
+    @close="(value) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />
 </template>

package/dist/runtime/components/OverlayProvider.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;