@inkline/inkline
Version:
Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
656 lines (655 loc) • 16.7 kB
TypeScript
import type { ComponentPublicInstance, PropType } from 'vue';
import type { Placement } from '@floating-ui/dom';
import type { ComputePositionConfig } from '@floating-ui/core';
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;
};
/**
* 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
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* 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 error state of the checkbox, computed based on schema by default.
* @type Boolean | Array
* @default ['touched', 'dirty', 'invalid']
* @TODO use propDefaultValue to set default value
* @name error
*/
error: {
type: PropType<boolean | string[]>;
default: () => string[];
};
/**
* The events used to trigger the dropdown
* @type hover | focus | click | manual
* @default [click]
* @name trigger
*/
events: {
type: PropType<any>;
default: () => string[];
};
/**
* 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 triggerKeyBindings
*/
triggerKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* The keydown events bound to the select option elements
* @type string[]
* @default [up, down, enter, space, tab, esc]
* @name itemKeyBindings
*/
itemKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* Determines whether hover state should be transferred from trigger to popup
* @type Boolean
* @default true
* @name interactable
*/
interactable: {
type: BooleanConstructor;
default: boolean;
};
/**
* The label of the select. Can be a string, number, render function, or component
* @type String | Number | Boolean | Function | Object
* @default undefined
* @name label
*/
label: {
type: PropType<SelectOption>;
default: undefined;
};
/**
* The loading state of the select
* @type Boolean
* @default false
* @name loading
*/
loading: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to set the field value
* @type String, Number, Boolean
* @default null
* @name modelValue
*/
modelValue: {
type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
default: null;
};
/**
* Used to manually control the visibility of the select dropdown
* @type Boolean
* @default false
* @name visible
*/
visible: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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;
default: () => string;
};
/**
* The options to be displayed in the select component
* @type Array
* @default []
* @name options
*/
options: {
type: PropType<SelectOption[]>;
default: () => never[];
};
/**
* 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 select 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: PropType<Placement>;
default: string;
};
/**
* Used to override the floating-ui options used for creating the dropdown
* @type Object
* @default { strategy: 'absolute' }
* @name popupOptions
*/
popupOptions: {
type: PropType<Partial<ComputePositionConfig>>;
default: () => {};
};
/**
* The readonly state of the select
* @type Boolean
* @default false
* @name readonly
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* 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;
};
/**
* Delay in milliseconds before the popover is hidden on hover
* @name hoverHideDelay
* @type Number
* @default 300
*/
hoverHideDelay: {
type: NumberConstructor;
default: number;
};
/**
* Enable select validation using schema
* @type Boolean
* @default true
* @name validateSchema
*/
validate: {
type: BooleanConstructor;
default: boolean;
};
}, {
value: import("vue").ComputedRef<any>;
disabled: import("vue").ComputedRef<boolean>;
readonly: import("vue").ComputedRef<boolean>;
clearable: import("vue").ComputedRef<boolean>;
tabindex: import("vue").ComputedRef<string | number>;
wrapperClasses: import("vue").ComputedRef<{
[x: string]: any;
'-disabled': boolean;
'-readonly': boolean;
'-error': any;
}>;
inputLabel: import("vue").ComputedRef<any>;
arrowRef: import("vue").Ref<HTMLElement | null>;
wrapperRef: import("vue").Ref<HTMLElement | null>;
triggerRef: import("vue").Ref<ComponentPublicInstance | null>;
bodyRef: import("vue").Ref<HTMLElement | null>;
optionsRef: import("vue").Ref<HTMLElement | null>;
popupRef: import("vue").Ref<HTMLElement | null>;
visible: any;
inputPlaceholder: import("vue").ComputedRef<any>;
selectedOption: import("vue").ComputedRef<any>;
focusInput: () => void;
onClickCaret: (event: MouseEvent) => void;
onTriggerKeyDown: (event: KeyboardEvent) => void;
onItemKeyDown: (event: KeyboardEvent) => void;
onBlur: (event: MouseEvent) => void;
onInput: (option: SelectOption) => void;
onClear: () => void;
onEscape: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:visible" | "click:outside" | "clear" | "pagination")[], "update:modelValue" | "update:visible" | "click:outside" | "clear" | "pagination", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The duration of the hide and show animation
* @type Number
* @default 300
* @name animationDuration
*/
animationDuration: {
type: NumberConstructor;
default: number;
};
/**
* 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
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* 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 error state of the checkbox, computed based on schema by default.
* @type Boolean | Array
* @default ['touched', 'dirty', 'invalid']
* @TODO use propDefaultValue to set default value
* @name error
*/
error: {
type: PropType<boolean | string[]>;
default: () => string[];
};
/**
* The events used to trigger the dropdown
* @type hover | focus | click | manual
* @default [click]
* @name trigger
*/
events: {
type: PropType<any>;
default: () => string[];
};
/**
* 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 triggerKeyBindings
*/
triggerKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* The keydown events bound to the select option elements
* @type string[]
* @default [up, down, enter, space, tab, esc]
* @name itemKeyBindings
*/
itemKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* Determines whether hover state should be transferred from trigger to popup
* @type Boolean
* @default true
* @name interactable
*/
interactable: {
type: BooleanConstructor;
default: boolean;
};
/**
* The label of the select. Can be a string, number, render function, or component
* @type String | Number | Boolean | Function | Object
* @default undefined
* @name label
*/
label: {
type: PropType<SelectOption>;
default: undefined;
};
/**
* The loading state of the select
* @type Boolean
* @default false
* @name loading
*/
loading: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to set the field value
* @type String, Number, Boolean
* @default null
* @name modelValue
*/
modelValue: {
type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
default: null;
};
/**
* Used to manually control the visibility of the select dropdown
* @type Boolean
* @default false
* @name visible
*/
visible: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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;
default: () => string;
};
/**
* The options to be displayed in the select component
* @type Array
* @default []
* @name options
*/
options: {
type: PropType<SelectOption[]>;
default: () => never[];
};
/**
* 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 select 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: PropType<Placement>;
default: string;
};
/**
* Used to override the floating-ui options used for creating the dropdown
* @type Object
* @default { strategy: 'absolute' }
* @name popupOptions
*/
popupOptions: {
type: PropType<Partial<ComputePositionConfig>>;
default: () => {};
};
/**
* The readonly state of the select
* @type Boolean
* @default false
* @name readonly
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* 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;
};
/**
* Delay in milliseconds before the popover is hidden on hover
* @name hoverHideDelay
* @type Number
* @default 300
*/
hoverHideDelay: {
type: NumberConstructor;
default: number;
};
/**
* Enable select validation using schema
* @type Boolean
* @default true
* @name validateSchema
*/
validate: {
type: BooleanConstructor;
default: boolean;
};
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onClick:outside"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
onPagination?: ((...args: any[]) => any) | undefined;
}, {
color: string;
size: string;
options: SelectOption[];
name: string;
placement: Placement;
label: SelectOption;
error: boolean | string[];
disabled: boolean;
readonly: boolean;
minLength: number;
modelValue: string | number | boolean;
type: string;
visible: boolean;
tabindex: string | number;
events: any;
loading: boolean;
validate: boolean;
offset: number;
animationDuration: number;
triggerKeyBindings: unknown[];
itemKeyBindings: unknown[];
arrow: boolean;
interactable: boolean;
popupOptions: Partial<ComputePositionConfig>;
hoverHideDelay: number;
clearable: boolean;
idField: string;
placeholder: string;
selectFirstOptionOnEnter: boolean;
}, {}>;
export default _default;