/** * * CommandMenu is a searchable command palette built on top of Menu. It provides an input * for filtering, keyboard navigation via forwarding to the underlying Menu, grouping support, * custom scoring, and slots for header/footer/item/submenulabel/empty content. * * [Live Demo](https://www.primevue.dev/commandmenu/) * * @module commandmenu * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { MenuItem } from 'primevue/menuitem'; import type { PassThroughOptions } from 'primevue/passthrough'; import type { Component, VNode } from 'vue'; export declare type CommandMenuPassThroughOptionType = CommandMenuPassThroughAttributes | ((options: CommandMenuPassThroughMethodOptions) => CommandMenuPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ export interface CommandMenuPassThroughMethodOptions { /** * Defines instance. */ instance: any; /** * Defines valid properties. */ props: CommandMenuProps; /** * Defines current inline state. */ state: CommandMenuState; /** * Defines valid attributes. */ attrs: any; /** * Defines parent options. */ parent: any; /** * Defines passthrough(pt) options in global config. */ global: object | undefined; } /** * Custom passthrough(pt) options. * @see {@link CommandMenuProps.pt} */ export interface CommandMenuPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ root?: CommandMenuPassThroughOptionType; /** * Used to pass attributes to the header's DOM element. */ header?: CommandMenuPassThroughOptionType; /** * Used to pass attributes to the search input's DOM element. */ input?: CommandMenuPassThroughOptionType; /** * Used to pass attributes to the underlying Menu. */ pcMenu?: CommandMenuPassThroughOptionType; /** * Used to pass attributes to the empty message's DOM element. */ emptyMessage?: CommandMenuPassThroughOptionType; /** * Used to pass attributes to the footer's DOM element. */ footer?: CommandMenuPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} */ hooks?: ComponentHooks; } /** * Custom passthrough attributes for each DOM elements. */ export interface CommandMenuPassThroughAttributes { [key: string]: any; } /** * Defines current inline state in CommandMenu component. */ export interface CommandMenuState { /** * Current search string, two-way bound via `v-model:search`. */ d_search: string; /** * ID of the currently focused item inside the underlying Menu, mirrored for aria-activedescendant. */ focusedOptionId: string | null; } /** * A CommandMenu item is a Menu item plus an optional `keywords` field used by the default scorer. */ export interface CommandMenuItem extends MenuItem { /** * Extra terms fed to the default scorer alongside the label. */ keywords?: string | string[]; [key: string]: any; } /** * Custom filter/scoring function. * @param item - The raw item being scored. * @param search - Current search string. * @returns A positive number if the item matches (higher = better rank), or `0` / falsy to filter it out. */ export type CommandMenuFilterFunction = (item: CommandMenuItem, search: string) => number; /** * Select event payload fired when an item is activated via Enter or click. */ export interface CommandMenuSelectEvent { /** * Originating browser event. */ originalEvent: Event; /** * The activated item. */ item: CommandMenuItem; } /** * Defines valid properties in CommandMenu component. */ export interface CommandMenuProps { /** * Menu items to display. Leaf items support `command`, `disabled`, `keywords` and any custom fields. * Groups are expressed as items with nested `items`. */ model?: CommandMenuItem[] | null | undefined; /** * Current search string. Use with `v-model:search` for two-way binding. */ search?: string | null | undefined; /** * Custom scoring function. Replaces the default substring scorer. */ filter?: CommandMenuFilterFunction | null | undefined; /** * Placeholder for the search input. */ placeholder?: string | undefined; /** * Text shown when `model` is empty. Defaults to the locale `emptyMessage`. */ emptyMessage?: string; /** * Text shown when no items match the current search. Defaults to the locale `emptySearchMessage`. */ emptyFilterMessage?: string; /** * Class applied to the underlying Menu, merged with the internal list class. */ menuClass?: string | object | Array | null | undefined; /** * Inline style applied to the underlying Menu. */ menuStyle?: string | object | Array | null | undefined; /** * Accessible label for the underlying Menu. Forwarded as `aria-label`. */ ariaLabel?: string; /** * Id of an external element that labels the underlying Menu. Forwarded as `aria-labelledby`. */ ariaLabelledby?: string; /** * Use to change the HTML tag of root element. * @defaultValue DIV */ as?: string | Component | undefined; /** * When enabled, it changes the default rendered element for the one passed as a child element. * @defaultValue false */ asChild?: boolean | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. * @type {CommandMenuPassThroughOptions} */ pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} */ ptOptions?: PassThroughOptions; /** * When enabled, it removes component related styles in the core. * @defaultValue false */ unstyled?: boolean; } /** * Defines valid slots in CommandMenu component. */ export interface CommandMenuSlots { /** * Default slot is only used when `asChild` is enabled — receives `class`. * @param {Object} scope - default slot's params. */ default(scope: { /** * Computed class name for the root. */ class: string | object | Array; }): VNode[]; /** * Custom header content. Replaces the default search input; use the exposed * `inputProps` to keep the keyboard bridge and ARIA wiring intact. * @param {Object} scope - header slot's params. */ header(scope: { /** * Current search value. */ value: string; /** * Bindings to spread on the custom input element — `role`, `aria-*`, * `placeholder`, `onKeydown` and `onInput` handlers. */ inputProps: Record; }): VNode[]; /** * Custom content rendered below the item list. * @param {Object} scope - footer slot's params. */ footer(scope: { /** * Currently filtered items. */ items: CommandMenuItem[]; }): VNode[]; /** * Custom item rendering (forwarded to Menu's `#item` slot). */ item(scope: { /** * The item being rendered. */ item: CommandMenuItem; /** * Action props provided by Menu for the item's anchor element. */ props: Record; /** * Resolved item label. */ label: string; }): VNode[]; /** * Custom submenu label rendering (forwarded to Menu's `#submenulabel` slot). */ submenulabel(scope: { /** * The group item being rendered. */ item: CommandMenuItem; }): VNode[]; /** * Content shown when `model` is empty. */ empty(): VNode[]; /** * Content shown when the filtered result is empty. */ emptyfilter(): VNode[]; } /** * Defines valid emits in CommandMenu component. */ export interface CommandMenuEmitsOptions { /** * Emitted when the search string changes. * @param value - New search string. */ 'update:search'(value: string): void; /** * Emitted when an item is activated via Enter or click. * @param event - Select event payload. */ select(event: CommandMenuSelectEvent): void; } export declare type CommandMenuEmits = EmitFn; /** * **PrimeVue - CommandMenu** * * _A searchable command palette built on top of Menu._ * * [Live Demo](https://www.primevue.dev/commandmenu/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ declare const CommandMenu: DefineComponent; declare module 'vue' { export interface GlobalComponents { CommandMenu: DefineComponent; } } export default CommandMenu;