UNPKG

@inkline/inkline

Version:

Inkline is the Vue.js UI/UX Library built for creating your next design system

446 lines (445 loc) 11.7 kB
import { sizePropValidator } from '../../mixins'; import { SelectOption } from './components/ISelectOption/script'; import { Classes, ElementEvent } from '../../types'; declare const _default: import("vue").DefineComponent<{ /** * The duration of the hide and show animation * @type Number * @default 300 * @name animationDuration */ animationDuration: { type: NumberConstructor; default: number; }; /** * Enable autocomplete functionality * @type Boolean * @default false * @name autocomplete */ autocomplete: { type: BooleanConstructor; default: boolean; }; /** * Displays an arrow on the dropdown pointing to the trigger element * @type Boolean * @default true * @name arrow */ arrow: { type: BooleanConstructor; default: boolean; }; /** * The color variant of the select * @type light | dark * @default light * @name color */ color: { type: StringConstructor; default: () => string; }; /** * Display the select as clearable * @type Boolean * @default false * @name clearable */ clearable: { type: BooleanConstructor; default: boolean; }; /** * The disabled state of the select * @type Boolean * @default false * @name disabled */ disabled: { type: BooleanConstructor; default: boolean; }; /** * The field to be used for identifying the options * @type String * @default id * @name idField */ idField: { type: StringConstructor; default: string; }; /** * The keydown events bound to the trigger element * @type string[] * @default [up, down, enter, space, tab, esc] * @name keydownTrigger */ keydownTrigger: { type: ArrayConstructor; default: () => string[]; }; /** * The keydown events bound to the select option elements * @type string[] * @default [up, down, enter, space, tab, esc] * @name keydownItem */ keydownItem: { type: ArrayConstructor; default: () => string[]; }; /** * Used to extract the label from the select option and select value * @type String | Function * @default label * @name label */ label: { type: (StringConstructor | FunctionConstructor)[]; default: string; }; /** * The loading state of the select * @type Boolean * @default false * @name loading */ loading: { type: BooleanConstructor; default: boolean; }; /** * Used to set the field value * @type Object | String | Number * @default null * @name modelValue */ modelValue: { type: (StringConstructor | NumberConstructor | ObjectConstructor)[]; default: null; }; /** * The minimum input length to open the select dropdown at * @type Number * @default 0 * @name minLength */ minLength: { type: NumberConstructor; default: number; }; /** * The unique identifier of the select * @type String * @default uid() * @name name */ name: { type: (StringConstructor | NumberConstructor)[]; default: () => string; }; /** * The options to be displayed in the select component * @type Array * @default [] * @name options */ options: { type: ArrayConstructor; default: () => SelectOption[]; }; /** * The placeholder of the select input * @type String * @default '' * @name placeholder */ placeholder: { type: StringConstructor; default: string; }; /** * The offset of the dropdown relative to the trigger element * @type Number * @default 6 * @name offset */ offset: { type: NumberConstructor; default: number; }; /** * The placement of the dropdown * @type top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end * @default false * @name placement */ placement: { type: StringConstructor; default: string; }; /** * Used to override the popper.js options used for creating the dropdown * @type Object * @default {} * @name popperOptions */ popperOptions: { type: ObjectConstructor; default: () => any; }; /** * The readonly state of the select * @type Boolean * @default false * @name readonly */ readonly: { type: BooleanConstructor; default: boolean; }; /** * The number of pixels until scroll end before loading the next page * @type Number * @default 160 * @name scrollTolerance */ scrollTolerance: { type: NumberConstructor; default: number; }; /** * Selects the first option when pressing enter * @type Boolean * @default true * @name selectFirstOptionOnEnter */ selectFirstOptionOnEnter: { type: BooleanConstructor; default: boolean; }; /** * The size variant of the select * @type sm | md | lg * @default md * @name size */ size: { type: StringConstructor; default: () => string; validator: typeof sizePropValidator; }; /** * The tabindex of the select * @type Number | String * @default 0 * @name tabindex */ tabindex: { type: (StringConstructor | NumberConstructor)[]; default: number; }; /** * The type of the select * @type String * @default text * @name type */ type: { type: StringConstructor; default: string; }; /** * The total number of options, used for infinite scrolling * @type Number * @default undefined * @name total */ total: { type: NumberConstructor; default: undefined; }; }, unknown, { animating: boolean; visible: boolean; inputValue: string; }, { wrapperClasses(): Classes; popupClasses(): Classes; tabIndex(): number | string; isClearable(): boolean; value(): any; inputPlaceholder(): string; }, { /** * Event bindings * * Input event handlers for changing the value, clearing the value, clicking, * focusing and blurring the input elements. */ onInput(option: SelectOption, label?: string | undefined): void; onClear(): void; onFocus(event: ElementEvent): void; onBlur(event: ElementEvent): void; onClick(): void; onClickOutside(): void; onCaretClick(): void; /** * Infinite scrolling * * Compute scroll offset, viewport height and total height and determine if next set of items needs to be loaded */ onScroll(): void; onWindowResize(): void; /** * Accessibility * * Keyboard bindings for select input and select options */ onTriggerKeyDown(event: KeyboardEvent): void; onItemKeyDown(event: KeyboardEvent): void; onEscape(): void; /** * Visibility * * Hide or show the select options menu */ show(): void; hide(): void; /** * Helper methods */ focus(): void; getFocusableItems(): HTMLElement[]; getElementHeight(node: HTMLElement): number; inputMatchesLabel(value: string): boolean; inputMatchesLength(value: string): boolean; inputShouldShowSelect(value: string): boolean; computeLabel(option: SelectOption): string; }, import("vue").DefineComponent<{}, {}, {}, { isDisabled(): boolean; isReadonly(): boolean; parent(): any; schema(): any; }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}> | import("vue").DefineComponent<{ placement: { type: StringConstructor; default: import("@popperjs/core").Placement; }; offset: { type: NumberConstructor; default: number; }; popperOptions: { type: ObjectConstructor; default: () => {}; }; }, unknown, { popperInstance?: import("@popperjs/core").Instance | undefined; }, {}, { createPopper(): void; destroyPopper(): void; }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ placement?: unknown; offset?: unknown; popperOptions?: unknown; } & { offset: number; placement: string; popperOptions: Record<string, any>; } & {}>, { offset: number; placement: string; popperOptions: Record<string, any>; }>, import("vue").ComponentOptionsMixin, ("search" | "update:modelValue" | "pagination")[], "search" | "update:modelValue" | "pagination", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ animationDuration?: unknown; autocomplete?: unknown; arrow?: unknown; color?: unknown; clearable?: unknown; disabled?: unknown; idField?: unknown; keydownTrigger?: unknown; keydownItem?: unknown; label?: unknown; loading?: unknown; modelValue?: unknown; minLength?: unknown; name?: unknown; options?: unknown; placeholder?: unknown; offset?: unknown; placement?: unknown; popperOptions?: unknown; readonly?: unknown; scrollTolerance?: unknown; selectFirstOptionOnEnter?: unknown; size?: unknown; tabindex?: unknown; type?: unknown; total?: unknown; } & { minLength: number; name: string | number; color: string; size: string; options: unknown[]; modelValue: string | number | Record<string, any>; type: string; offset: number; placement: string; arrow: boolean; animationDuration: number; disabled: boolean; label: string | Function; tabindex: string | number; loading: boolean; readonly: boolean; keydownTrigger: unknown[]; keydownItem: unknown[]; clearable: boolean; autocomplete: boolean; idField: string; placeholder: string; scrollTolerance: number; selectFirstOptionOnEnter: boolean; } & { popperOptions?: Record<string, any> | undefined; total?: number | undefined; }> & { "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; onPagination?: ((...args: any[]) => any) | undefined; onSearch?: ((...args: any[]) => any) | undefined; }, { minLength: number; name: string | number; color: string; size: string; options: unknown[]; modelValue: string | number | Record<string, any>; type: string; offset: number; placement: string; popperOptions: Record<string, any>; arrow: boolean; animationDuration: number; disabled: boolean; label: string | Function; tabindex: string | number; loading: boolean; readonly: boolean; keydownTrigger: unknown[]; keydownItem: unknown[]; clearable: boolean; autocomplete: boolean; idField: string; placeholder: string; scrollTolerance: number; selectFirstOptionOnEnter: boolean; total: number; }>; export default _default;