import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui'; import type { AppConfig } from '@nuxt/schema'; import theme from '#build/ui/select-menu'; import type { UseComponentIconsProps } from '../composables/useComponentIcons'; import type { AvatarProps, ChipProps, InputProps } from '../types'; import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'; type SelectMenu = ComponentConfig; interface _SelectMenuItem { label?: string; /** * @IconifyIcon */ icon?: string; avatar?: AvatarProps; chip?: ChipProps; /** * The item type. * @defaultValue 'item' */ type?: 'label' | 'separator' | 'item'; disabled?: boolean; onSelect?(e?: Event): void; class?: any; ui?: Pick; [key: string]: any; } export type SelectMenuItem = _SelectMenuItem | AcceptableValue | boolean; export interface SelectMenuProps = ArrayOrNested, VK extends GetItemKeys | undefined = undefined, M extends boolean = false> extends Pick, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps { id?: string; /** The placeholder text when the select is empty. */ placeholder?: string; /** * Whether to display the search input or not. * Can be an object to pass additional props to the input. * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"} * @defaultValue true */ searchInput?: boolean | InputProps; /** * @defaultValue 'primary' */ color?: SelectMenu['variants']['color']; /** * @defaultValue 'outline' */ variant?: SelectMenu['variants']['variant']; /** * @defaultValue 'md' */ size?: SelectMenu['variants']['size']; required?: boolean; /** * The icon displayed to open the menu. * @defaultValue appConfig.ui.icons.chevronDown * @IconifyIcon */ trailingIcon?: string; /** * The icon displayed when an item is selected. * @defaultValue appConfig.ui.icons.check * @IconifyIcon */ selectedIcon?: string; /** * The content of the menu. * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' } */ content?: Omit & Partial>; /** * Display an arrow alongside the menu. * @defaultValue false * @IconifyIcon */ arrow?: boolean | Omit; /** * Render the menu in a portal. * @defaultValue true */ portal?: boolean | string | HTMLElement; /** * When `items` is an array of objects, select the field to use as the value instead of the object itself. * @defaultValue undefined */ valueKey?: VK; /** * When `items` is an array of objects, select the field to use as the label. * @defaultValue 'label' */ labelKey?: keyof NestedItem; items?: T; /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */ defaultValue?: GetModelValue; /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */ modelValue?: GetModelValue; /** Whether multiple options can be selected or not. */ multiple?: M & boolean; /** Highlight the ring color like a focus state. */ highlight?: boolean; /** * Determines if custom user input that does not exist in options can be added. * @defaultValue false */ createItem?: boolean | 'always' | { position?: 'top' | 'bottom'; when?: 'empty' | 'always'; }; /** * Fields to filter items by. * @defaultValue [labelKey] */ filterFields?: string[]; /** * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.). * @defaultValue false */ ignoreFilter?: boolean; class?: any; ui?: SelectMenu['slots']; } export type SelectMenuEmits, VK extends GetItemKeys | undefined, M extends boolean> = Pick & { change: [payload: Event]; blur: [payload: FocusEvent]; focus: [payload: FocusEvent]; create: [item: string]; /** Event handler when highlighted element changes. */ highlight: [ payload: { ref: HTMLElement; value: GetModelValue; } | undefined ]; } & GetModelValueEmits; type SlotProps = (props: { item: T; index: number; }) => any; export interface SelectMenuSlots = ArrayOrNested, VK extends GetItemKeys | undefined = undefined, M extends boolean = false, T extends NestedItem = NestedItem> { 'leading'(props: { modelValue?: GetModelValue; open: boolean; ui: { [K in keyof Required]: (props?: Record) => string; }; }): any; 'default'(props: { modelValue?: GetModelValue; open: boolean; }): any; 'trailing'(props: { modelValue?: GetModelValue; open: boolean; ui: { [K in keyof Required]: (props?: Record) => string; }; }): any; 'empty'(props: { searchTerm?: string; }): any; 'item': SlotProps; 'item-leading': SlotProps; 'item-label': SlotProps; 'item-trailing': SlotProps; 'content-top': (props?: {}) => any; 'content-bottom': (props?: {}) => any; 'create-item-label'(props: { item: string; }): any; } declare const _default: , VK extends GetItemKeys | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable>["expose"], __VLS_setup?: Promise<{ props: __VLS_PrettifyLocal & Omit<{ readonly onBlur?: ((payload: FocusEvent) => any) | undefined; readonly onChange?: ((payload: Event) => any) | undefined; readonly onFocus?: ((payload: FocusEvent) => any) | undefined; readonly onCreate?: ((item: string) => any) | undefined; readonly "onUpdate:open"?: ((value: boolean) => any) | undefined; readonly "onUpdate:modelValue"?: ((payload: GetModelValue) => any) | undefined; readonly onHighlight?: ((payload: { ref: HTMLElement; value: GetModelValue; } | undefined) => any) | undefined; readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined; } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (SelectMenuProps & { searchTerm?: string; }) & Partial<{}>> & import("vue").PublicProps; expose(exposed: import("vue").ShallowUnwrapRef<{}>): void; attrs: any; slots: SelectMenuSlots>; emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue) => void) & ((evt: "highlight", payload: { ref: HTMLElement; value: GetModelValue; } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void); }>) => import("vue").VNode & { __ctx?: Awaited; }; export default _default; type __VLS_PrettifyLocal = { [K in keyof T]: T[K]; } & {};