@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
TypeScript
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;