import type { ComputedRef, Ref, ShallowRef } from 'vue'; import type { Direction } from '../../utilities/config-provider'; import type { AcceptableValue } from './utils'; import { useContextFactory } from '@robonen/vue'; /** * @deprecated Kept for backward compatibility. The select now accepts any * {@link AcceptableValue} (string/number/boolean/object). `SelectValue` remains * a string alias so existing `string`-typed consumers keep compiling. */ export type SelectValue = string; export interface SelectOption { value: AcceptableValue; disabled?: boolean; textContent: string; } export interface SelectRootContext { value: Ref; onValueChange: (value: AcceptableValue) => void; open: Ref; onOpenChange: (open: boolean) => void; dir: Ref; disabled: Ref; required: Ref; multiple: Ref; by?: string | ((a: AcceptableValue, b: AcceptableValue) => boolean); name: Ref; triggerElement: ShallowRef; onTriggerChange: (el: HTMLElement | undefined) => void; valueElement: ShallowRef; onValueElementChange: (el: HTMLElement | undefined) => void; triggerPointerDownPosRef: Ref<{ x: number; y: number } | null>; contentId: Ref; isEmptyModelValue: ComputedRef; /** * @deprecated Superseded by `optionsSet`. The persisted single-value label * still drives the legacy `displayValue` slot path. */ displayValue: Ref; optionsSet: ShallowRef>; onOptionAdd: (option: SelectOption) => void; onOptionRemove: (option: SelectOption) => void; itemRefCallback: (el: HTMLElement | undefined, value: AcceptableValue, disabled: boolean) => void; itemTextRefCallback: (el: HTMLElement | undefined, value: AcceptableValue) => void; selectedItemRef: ShallowRef; selectedItemTextRef: ShallowRef; } export interface SelectContentContext { viewportRef: ShallowRef; onViewportChange: (el: HTMLElement | undefined) => void; contentRef: ShallowRef; selectedItemRef: ShallowRef; selectedItemTextRef: ShallowRef; onItemLeave: () => void; focusSelectedItem: () => void; itemRefCallback: SelectRootContext['itemRefCallback']; itemTextRefCallback: SelectRootContext['itemTextRefCallback']; isPositioned: Ref; searchRef: Ref; position: 'item-aligned' | 'popper'; } export interface SelectItemAlignedPositionContext { contentWrapper: ShallowRef; shouldExpandOnScrollRef: Ref; onScrollButtonChange: (el: HTMLElement | undefined) => void; } export interface SelectGroupContext { id: Ref; } export interface SelectItemContext { value: AcceptableValue; isSelected: Ref; isDisabled: Ref; isFocused: Ref; textId: Ref; onItemTextChange: (el: HTMLElement | undefined) => void; } const { inject: useSelectRootContext, provide: provideSelectRootContext, } = useContextFactory('SelectRootContext'); const { inject: useSelectContentContext, provide: provideSelectContentContext, } = useContextFactory('SelectContentContext'); const { inject: useSelectItemAlignedPositionContext, provide: provideSelectItemAlignedPositionContext, } = useContextFactory('SelectItemAlignedPositionContext'); const { inject: useSelectGroupContext, provide: provideSelectGroupContext, } = useContextFactory('SelectGroupContext'); const { inject: useSelectItemContext, provide: provideSelectItemContext, } = useContextFactory('SelectItemContext'); export { useSelectRootContext, provideSelectRootContext, useSelectContentContext, provideSelectContentContext, useSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext, useSelectGroupContext, provideSelectGroupContext, useSelectItemContext, provideSelectItemContext, };