import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui'; import type { VNode } from 'vue'; import type { AppConfig } from '@nuxt/schema'; import type { UseFuseOptions } from '@vueuse/integrations/useFuse'; import theme from '#build/b24ui/command-palette'; import type { UseComponentIconsProps } from '../composables/useComponentIcons'; import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconComponent, LinkPropsKeys } from '../types'; import type { GetItemKeys } from '../types/utils'; import type { ComponentConfig } from '../types/tv'; type CommandPalette = ComponentConfig; export interface CommandPaletteItem extends Omit { prefix?: string; label?: string; suffix?: string; description?: string; /** * @IconComponent */ icon?: IconComponent; avatar?: AvatarProps; chip?: ChipProps; kbds?: KbdProps['value'][] | KbdProps[]; active?: boolean; loading?: boolean; disabled?: boolean; slot?: string; /** * The placeholder to display when the item has children. */ placeholder?: string; children?: CommandPaletteItem[]; onSelect?: (e: Event) => void; class?: any; b24ui?: Pick; [key: string]: any; } export interface CommandPaletteGroup { id: string; label?: string; slot?: string; items?: T[]; /** * Whether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse). * When `true`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.). * @defaultValue false */ ignoreFilter?: boolean; /** Filter group items after the search happened. */ postFilter?: (searchTerm: string, items: T[]) => T[]; /** * The icon displayed when an item is highlighted. * @IconComponent */ highlightedIcon?: IconComponent; } /** * @memo not use loadingIcon */ export interface CommandPaletteProps = CommandPaletteGroup, T extends CommandPaletteItem = CommandPaletteItem> extends Pick, Pick { /** * The element or component this component should render as. * @defaultValue 'div' */ as?: any; /** * @defaultValue 'md' */ size?: CommandPalette['variants']['size']; /** * The icon displayed in the input. * @defaultValue icons.search * @IconComponent */ icon?: IconComponent; /** * The icon displayed on the right side of the input. * @defaultValue icons.search * @IconComponent */ trailingIcon?: IconComponent; /** * The icon displayed when an item is selected. * @defaultValue icons.check * @IconComponent */ selectedIcon?: IconComponent; /** * The icon displayed when an item has children. * @defaultValue icons.chevronRight * @IconComponent */ childrenIcon?: IconComponent; /** * The placeholder text for the input. * @defaultValue t('commandPalette.placeholder') */ placeholder?: InputProps['placeholder']; /** * Automatically focus the input when component is mounted. * @defaultValue true */ autofocus?: boolean; /** * Display a close button in the input (useful when inside a Modal for example). * `{ color: 'air-tertiary-no-accent' }`{lang="ts-type"} * @emits 'update:open' * @defaultValue false */ close?: boolean | Omit; /** * The icon displayed in the close button. * @defaultValue icons.close * @IconComponent */ closeIcon?: IconComponent; /** * Display a button to navigate back in history. * `{ color: 'air-tertiary-accent' }`{lang="ts-type"} * @defaultValue true */ back?: boolean | Omit; /** * The icon displayed in the back button. * @defaultValue icons.arrowLeft * @IconComponent */ backIcon?: IconComponent; /** * Configure the input or hide it with `false`. * @defaultValue true */ input?: boolean | Omit; groups?: G[]; /** * Options for [useFuse](https://vueuse.org/integrations/useFuse). * @defaultValue { fuseOptions: { ignoreLocation: true, threshold: 0.1, keys: ['label', 'description', 'suffix'] }, resultLimit: 12, matchAllWhenSearchEmpty: true } */ fuse?: UseFuseOptions; /** * Enable virtualization for large lists. * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885). * @defaultValue false */ virtualize?: boolean | { /** * Number of items rendered outside the visible area * @defaultValue 12 */ overscan?: number; /** * Estimated size (in px) of each item, or a function that returns the size for a given index * @defaultValue 32 */ estimateSize?: number | ((index: number) => number); }; /** * When `items` is an array of objects, select the field to use as the value instead of the object itself. * @defaultValue undefined */ valueKey?: GetItemKeys; /** * The key used to get the label from the item. * @defaultValue 'label' */ labelKey?: GetItemKeys; /** * The key used to get the description from the item. * @defaultValue 'description' */ descriptionKey?: GetItemKeys; /** * Whether to preserve the order of groups as defined in the `groups` prop when filtering. * When `false`, groups will appear based on item matches. * @defaultValue false */ preserveGroupOrder?: boolean; /** * Delay (in milliseconds) before the search term is passed to Fuse (debounced). * Useful when indexing large datasets where fuzzy search becomes the bottleneck — the input stays responsive while Fuse and the result pipeline only re-run after typing settles. * Set to `0` (the default) to disable. * @defaultValue 0 */ searchDelay?: number; class?: any; b24ui?: CommandPalette['slots']; } export type CommandPaletteEmits = ListboxRootEmits & { 'update:open': [value: boolean]; }; type SlotProps = (props: { item: T; index: number; b24ui: CommandPalette['b24ui']; }) => VNode[]; type GroupSlotProps = CommandPaletteGroup> = (props: { group: G; label: string; b24ui: CommandPalette['b24ui']; }) => VNode[]; type GroupSlots = CommandPaletteGroup> = { 'group-label'?: GroupSlotProps; } & Record<`${string}-group-label`, GroupSlotProps>; export type CommandPaletteSlots = CommandPaletteGroup> = { 'empty'?(props: { searchTerm?: string; }): VNode[]; 'footer'?(props: { b24ui: CommandPalette['b24ui']; }): VNode[]; 'back'?(props: { b24ui: CommandPalette['b24ui']; }): VNode[]; 'close'?(props: { b24ui: CommandPalette['b24ui']; }): VNode[]; 'item'?: SlotProps; 'item-leading'?: SlotProps; 'item-label'?: SlotProps; 'item-description'?: SlotProps; 'item-trailing'?: SlotProps; } & Record> & GroupSlots; declare const _default: typeof __VLS_export; export default _default; declare const __VLS_export: , T extends CommandPaletteItem>(__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable>["expose"], __VLS_setup?: Promise<{ props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps & { searchTerm?: string; }) & { onHighlight?: ((payload: { ref: HTMLElement; value: T; } | undefined) => any) | undefined; "onUpdate:open"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: T) => any) | undefined; onEntryFocus?: ((event: CustomEvent) => any) | undefined; onLeave?: ((event: Event) => any) | undefined; "onUpdate:searchTerm"?: ((value: string) => any) | undefined; }> & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P; } ? P : {}); expose: (exposed: {}) => void; attrs: any; slots: CommandPaletteSlots; emit: (((evt: "highlight", payload: { ref: HTMLElement; value: T; } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => 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]; }) & {};