@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.
345 lines (344 loc) • 8.9 kB
TypeScript
import type { 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;
};
/**
* The color variant of the dropdown
* @type light | dark
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* The disabled state of the dropdown
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to hide the dropdown when clicking or selecting a dropdown item
* @type Boolean
* @default false
* @name hideOnItemClick
*/
hideOnItemClick: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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 dropdown item elements
* @type string[]
* @default [up, down, enter, space, tab, esc]
* @name itemKeyBindings
*/
itemKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* Used to manually control the visibility of the dropdown
* @type Boolean
* @default false
* @name visible
*/
visible: {
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 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: PropType<Placement>;
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 offset of the dropdown relative to the trigger element
* @type Number
* @default 6
* @name offset
*/
offset: {
type: NumberConstructor;
default: number;
};
/**
* Determines whether hover state should be transferred from trigger to popup
* @type Boolean
* @default true
* @name interactable
*/
interactable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to override the floating-ui options used for creating the dropdown
* @type Object
* @default {}
* @name popupOptions
*/
popupOptions: {
type: PropType<Partial<ComputePositionConfig>>;
default: () => {};
};
/**
* The size variant of the dropdown
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* Delay in milliseconds before the popover is hidden on hover
* @name hoverHideDelay
* @type Number
* @default 300
*/
hoverHideDelay: {
type: NumberConstructor;
default: number;
};
}, {
wrapperRef: import("vue").Ref<HTMLElement | null>;
triggerRef: import("vue").Ref<HTMLElement | null>;
popupRef: import("vue").Ref<HTMLElement | null>;
bodyRef: import("vue").Ref<HTMLElement | null>;
arrowRef: import("vue").Ref<HTMLElement | null>;
visible: any;
hide: any;
show: any;
onKeyEscape: any;
focusTrigger: any;
onClick: any;
classes: import("vue").ComputedRef<{
[x: string]: boolean;
}>;
slots: Readonly<{
[name: string]: import("vue").Slot<any> | undefined;
}>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:visible" | "click:outside")[], "update:visible" | "click:outside", 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;
};
/**
* The color variant of the dropdown
* @type light | dark
* @default
* @name color
*/
color: {
type: StringConstructor;
default: undefined;
};
/**
* The disabled state of the dropdown
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to hide the dropdown when clicking or selecting a dropdown item
* @type Boolean
* @default false
* @name hideOnItemClick
*/
hideOnItemClick: {
type: BooleanConstructor;
default: boolean;
};
/**
* 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 dropdown item elements
* @type string[]
* @default [up, down, enter, space, tab, esc]
* @name itemKeyBindings
*/
itemKeyBindings: {
type: ArrayConstructor;
default: () => string[];
};
/**
* Used to manually control the visibility of the dropdown
* @type Boolean
* @default false
* @name visible
*/
visible: {
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 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: PropType<Placement>;
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 offset of the dropdown relative to the trigger element
* @type Number
* @default 6
* @name offset
*/
offset: {
type: NumberConstructor;
default: number;
};
/**
* Determines whether hover state should be transferred from trigger to popup
* @type Boolean
* @default true
* @name interactable
*/
interactable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Used to override the floating-ui options used for creating the dropdown
* @type Object
* @default {}
* @name popupOptions
*/
popupOptions: {
type: PropType<Partial<ComputePositionConfig>>;
default: () => {};
};
/**
* The size variant of the dropdown
* @type sm | md | lg
* @default
* @name size
*/
size: {
type: StringConstructor;
default: undefined;
};
/**
* Delay in milliseconds before the popover is hidden on hover
* @name hoverHideDelay
* @type Number
* @default 300
*/
hoverHideDelay: {
type: NumberConstructor;
default: number;
};
}>> & {
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onClick:outside"?: ((...args: any[]) => any) | undefined;
}, {
color: string;
size: string;
placement: Placement;
disabled: boolean;
visible: boolean;
events: any;
offset: number;
animationDuration: number;
hideOnItemClick: boolean;
triggerKeyBindings: unknown[];
itemKeyBindings: unknown[];
arrow: boolean;
interactable: boolean;
popupOptions: Partial<ComputePositionConfig>;
hoverHideDelay: number;
}, {}>;
export default _default;