@empathyco/x-components
Version:
Empathy X Components
93 lines • 3.59 kB
TypeScript
import type { Identifiable } from '@empathyco/x-types';
import type { PropType } from 'vue';
type DropdownItem = string | number | Identifiable;
/**
* Dropdown component that mimics a Select element behavior, but with the option
* to customize the toggle button and each item contents.
*/
declare const _default: import("vue").DefineComponent<{
/** List of items to display.*/
items: {
type: PropType<DropdownItem[]>;
required: true;
};
/** The selected item. */
modelValue: {
type: PropType<DropdownItem | null>;
validator: (v: any) => boolean;
required: true;
};
/** Description of what the dropdown is used for. */
ariaLabel: StringConstructor;
/**
* Animation component to use for expanding the dropdown. This is a single element animation,
* so only `<transition>` components are allowed.
*/
animation: {
type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any>;
};
/** Time to wait without receiving any keystroke before resetting the items search query. */
searchTimeoutMs: {
type: NumberConstructor;
default: number;
};
}, {
hasToggleSlot: boolean;
closeAndFocusToggleButton: () => void;
dropdownCSSClasses: import("vue").ComputedRef<{
'x-dropdown--is-open': import("vue").Ref<boolean>;
}>;
emitSelectedItemChanged: (item: DropdownItem) => void;
highlightFirstItem: () => void;
highlightLastItem: () => void;
highlightNextItem: () => void;
highlightPreviousItem: () => void;
highlightedItemIndex: import("vue").Ref<number>;
isOpen: import("vue").Ref<boolean>;
itemsButtonRefs: import("vue").Ref<HTMLButtonElement[]>;
itemsCSSClasses: import("vue").ComputedRef<{
'x-dropdown__item--is-selected': boolean;
'x-dropdown__item--is-highlighted': boolean;
}[]>;
listId: string;
open: () => boolean;
rootRef: import("vue").Ref<HTMLElement | undefined>;
toggle: () => boolean;
toggleButtonRef: import("vue").Ref<HTMLButtonElement | undefined>;
updateSearchBuffer: (event: KeyboardEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/** List of items to display.*/
items: {
type: PropType<DropdownItem[]>;
required: true;
};
/** The selected item. */
modelValue: {
type: PropType<DropdownItem | null>;
validator: (v: any) => boolean;
required: true;
};
/** Description of what the dropdown is used for. */
ariaLabel: StringConstructor;
/**
* Animation component to use for expanding the dropdown. This is a single element animation,
* so only `<transition>` components are allowed.
*/
animation: {
type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any>;
};
/** Time to wait without receiving any keystroke before resetting the items search query. */
searchTimeoutMs: {
type: NumberConstructor;
default: number;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
animation: string | Function | Record<string, any>;
searchTimeoutMs: number;
}, {}>;
export default _default;
//# sourceMappingURL=base-dropdown.vue?vue&type=script&lang.d.ts.map