import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectContentEmits, SelectArrowProps } from 'reka-ui'; import type { VNode } from 'vue'; import type { AppConfig } from '@nuxt/schema'; import theme from '#build/b24ui/select'; import type { UseComponentIconsProps } from '../composables/useComponentIcons'; import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types'; import type { ModelModifiers, ApplyModifiers } from '../types/input'; import type { ButtonHTMLAttributes } from '../types/html'; import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils'; import type { ComponentConfig } from '../types/tv'; type Select = ComponentConfig; export type SelectValue = AcceptableValue; export type SelectItem = SelectValue | { label?: string; description?: string; /** * Display an icon on the left side. * @IconComponent */ icon?: IconComponent; avatar?: AvatarProps; color?: Select['variants']['color']; chip?: ChipProps; /** * The item type. * @defaultValue 'item' */ type?: 'label' | 'separator' | 'item'; value?: SelectValue; disabled?: boolean; onSelect?: (e: Event) => void; class?: any; b24ui?: Pick; [key: string]: any; }; type ExcludeItem = { type: 'label' | 'separator'; }; export interface SelectProps = ArrayOrNested, VK extends GetItemKeys = 'value', M extends boolean = false, Mod extends Omit = Omit> extends Omit, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit { id?: string; /** The placeholder text when the select is empty. */ placeholder?: string; /** * @defaultValue 'air-primary' */ color?: Select['variants']['color']; /** * @defaultValue 'md' */ size?: Select['variants']['size']; /** * Removes padding from input * @defaultValue false */ noPadding?: boolean; /** * Removes all borders (rings) * @defaultValue false */ noBorder?: boolean; /** * Removes all borders (rings) except the bottom one * @defaultValue false */ underline?: boolean; /** * Rounds the corners of the select * @defaultValue false */ rounded?: boolean; tag?: string; /** * @defaultValue 'air-primary' */ tagColor?: BadgeProps['color']; /** * The icon displayed to open the menu. * @defaultValue icons.chevronDown * @IconComponent */ trailingIcon?: IconComponent; /** * The icon displayed when an item is selected. * @defaultValue icons.check * @IconComponent */ selectedIcon?: IconComponent; /** * 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 */ 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. * @defaultValue 'value' */ valueKey?: VK; /** * When `items` is an array of objects, select the field to use as the label. * @defaultValue 'label' */ labelKey?: GetItemKeys; /** * When `items` is an array of objects, select the field to use as the description. * @defaultValue 'description' */ descriptionKey?: GetItemKeys; items?: T; /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */ defaultValue?: ApplyModifiers, Mod>; /** The controlled value of the Select. Can be bind as `v-model`. */ modelValue?: ApplyModifiers, Mod>; modelModifiers?: Mod; /** Whether multiple options can be selected or not. */ multiple?: M & boolean; /** Highlight the ring color like a focus state. */ highlight?: boolean; autofocus?: boolean; autofocusDelay?: number; class?: any; b24ui?: Select['slots']; } export interface SelectEmits, VK extends GetItemKeys | undefined, M extends boolean, Mod extends Omit = Omit> extends Omit { 'change': [event: Event]; 'blur': [event: FocusEvent]; 'focus': [event: FocusEvent]; 'update:modelValue': [value: ApplyModifiers, Mod>]; } type SlotProps = (props: { item: T; index: number; b24ui: Select['b24ui']; }) => VNode[]; export interface SelectSlots = ArrayOrNested, VK extends GetItemKeys | undefined = undefined, M extends boolean = false, Mod extends Omit = Omit, T extends NestedItem = NestedItem> { 'leading'?(props: { modelValue: ApplyModifiers, Mod>; open: boolean; b24ui: Select['b24ui']; }): VNode[]; 'default'?(props: { modelValue: ApplyModifiers, Mod>; open: boolean; b24ui: Select['b24ui']; }): VNode[]; 'trailing'?(props: { modelValue: ApplyModifiers, Mod>; open: boolean; b24ui: Select['b24ui']; }): VNode[]; 'item'?: SlotProps; 'item-leading'?: SlotProps; 'item-label'?(props: { item: T; index: number; }): VNode[]; 'item-description'?(props: { item: T; index: number; }): VNode[]; 'item-trailing'?: SlotProps; 'content-top'?: (props?: {}) => VNode[]; 'content-bottom'?: (props?: {}) => VNode[]; } declare const _default: typeof __VLS_export; export default _default; declare const __VLS_export: , VK extends GetItemKeys = "value", M extends boolean = false, Mod extends Omit = Omit>(__VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable>["expose"], __VLS_setup?: Promise<{ props: import("vue").PublicProps & __VLS_PrettifyLocal & { onBlur?: ((event: FocusEvent) => any) | undefined; onChange?: ((event: Event) => any) | undefined; onFocus?: ((event: FocusEvent) => any) | undefined; "onUpdate:open"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: Mod extends { number: true; } ? (Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) extends infer T_1 ? T_1 extends (Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) => any) | undefined; }> & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P; } ? P : {}); expose: (exposed: import("vue").ShallowUnwrapRef<{ triggerRef: Readonly>; viewportRef: Readonly>; }>) => void; attrs: any; slots: SelectSlots>; emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: Mod extends { number: true; } ? (Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) extends infer T_1 ? T_1 extends (Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends { optional: true; } ? (Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) | undefined : Mod extends { nullable: true; } ? GetModelValue | null : GetModelValue) => 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]; }) & {};