import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'; import type { VNode } from 'vue'; import type { AppConfig } from '@nuxt/schema'; import theme from '#build/b24ui/navigation-menu'; import type { AvatarProps, BadgeProps, ChipProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types'; import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'; import type { ComponentConfig } from '../types/tv'; type NavigationMenu = ComponentConfig; /** * @memo only 1 level * @memo not use in NavigationMenuChildItem: `b24ui` | `description` | `avatar` | `children` | `description` */ export interface NavigationMenuChildItem extends Omit { [key: string]: any; } export interface NavigationMenuItem extends Omit { label?: string; /** * Icon is only used when `orientation` is `vertical` * @IconComponent */ icon?: IconComponent; /** * Avatar is only used when `orientation` is `vertical` * @AvatarProps */ avatar?: AvatarProps; /** * Display a badge on the item. * `{ size: 'xs', color: 'air-primary-alert' }`{lang="ts-type"} */ badge?: string | number | BadgeProps; /** * Display a chip around the icon of the item. * `{ inset: true }`{lang="ts-type"} */ chip?: boolean | ChipProps; /** * Display a hint on the item in `horizontal` orientation. */ hint?: string; /** * Display a tooltip on the item with the label of the item. * In `vertical` orientation, only works when the menu is `collapsed`. * In `horizontal` orientation, works on any item. */ tooltip?: boolean | TooltipProps; /** * Display a popover on the item when the menu is collapsed with the children list. * This has priority over the global `popover` prop. */ popover?: boolean | PopoverProps; /** * @IconComponent */ trailingIcon?: IconComponent; /** * The type of the item. * The `label` type is only displayed in `vertical` orientation. * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation. * @defaultValue 'link' */ type?: 'label' | 'trigger' | 'link'; slot?: string; /** * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI. * @defaultValue `item-${index}`, `item-${level}-${index}` for nested children, or `group-${listIndex}-item-${index}` when using grouped items */ value?: string; children?: NavigationMenuChildItem[]; /** * With orientation=`horizontal` if `true` it will position the dropdown menu correctly */ viewportRtl?: boolean; defaultOpen?: boolean; open?: boolean; onSelect?: (e: Event) => void; class?: any; b24ui?: Pick; [key: string]: any; } type SingleOrMultipleType = 'single' | 'multiple'; type Orientation = NavigationMenu['variants']['orientation']; type NavigationMenuModelValue = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[]; /** * @memo remove contentOrientation | highlight | highlightColor | arrow | color | variant (link) -> use variant.pill */ export interface NavigationMenuProps = ArrayOrNested, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick, Pick { /** * 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; /** * 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; /** * The icon displayed to open the menu. * @defaultValue icons.chevronDown * @IconComponent */ trailingIcon?: IconComponent; /** * The icon displayed when the item is an external link. * Set to `false` to hide the external icon. * @defaultValue icons.external * @IconComponent */ externalIcon?: boolean | IconComponent; items?: T; /** * The orientation of the menu. * @defaultValue 'horizontal' */ orientation?: O; /** * Collapse the navigation menu to only show icons. * Only works when `orientation` is `vertical`. * @defaultValue false */ collapsed?: boolean; /** * Display a tooltip on the items with the label of the item. * Only works when `orientation` is `vertical` and `collapsed` is `true`. * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"} * @defaultValue false */ tooltip?: boolean | TooltipProps; /** * Display a popover on the items when the menu is collapsed with the children list. * `{ mode: 'hover', content: { side: 'right', align: 'center', alignOffset: 2 } }`{lang="ts-type"} * @defaultValue false */ popover?: boolean | PopoverProps; /** * The content of the menu. */ content?: Omit & Partial>; /** * The key used to get the value from the item. * @defaultValue 'value' */ valueKey?: GetItemKeys; /** * The key used to get the label from the item. * @defaultValue 'label' */ labelKey?: GetItemKeys; class?: any; b24ui?: NavigationMenu['slots']; } export type NavigationMenuEmits = { /** * 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 | undefined]; }; type SlotProps = (props: { item: T; index: number; active: boolean; b24ui: NavigationMenu['b24ui']; }) => VNode[]; export type NavigationMenuSlots = ArrayOrNested, T extends NestedItem = NestedItem> = { 'item'?: SlotProps; 'item-leading'?: SlotProps; 'item-label'?: (props: { item: T; index: number; active: boolean; }) => VNode[]; 'item-trailing'?: SlotProps; 'item-content'?: (props: { item: T; index: number; active: boolean; b24ui: NavigationMenu['b24ui']; close: (() => void) | undefined; }) => VNode[]; 'list-leading'?: (props?: {}) => VNode[]; 'list-trailing'?: (props?: {}) => VNode[]; } & DynamicSlots, 'label', { index: number; active: boolean; b24ui: NavigationMenu['b24ui']; }> & DynamicSlots, 'leading' | 'trailing' | 'content', { index: number; active: boolean; b24ui: NavigationMenu['b24ui']; }>; declare const _default: typeof __VLS_export; export default _default; declare const __VLS_export: , K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable>["expose"], __VLS_setup?: Promise<{ props: import("vue").PublicProps & __VLS_PrettifyLocal & { "onUpdate:modelValue"?: ((value: NavigationMenuModelValue | undefined) => any) | undefined; }> & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P; } ? P : {}); expose: (exposed: {}) => void; attrs: any; slots: NavigationMenuSlots>; emit: (evt: "update:modelValue", value: NavigationMenuModelValue | undefined) => void; }>) => import("vue").VNode & { __ctx?: Awaited; }; type __VLS_PrettifyLocal = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};