@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
510 lines • 20.4 kB
TypeScript
declare const _default: import('vue').DefineComponent<{}, {
$emit: (event: "close" | "selected-emoji" | "scroll-bottom-reached" | "skin-tone" | "add-emoji", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
tabsetRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
focusTabset: () => void;
$emit: (event: "selected-tabset" | "focus-search-input" | "focus-skin-selector", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {
focusTabset: () => void;
$emit: (event: "selected-tabset" | "focus-search-input" | "focus-skin-selector", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, {}> | null;
searchInputRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
focusSearchInput: () => void;
$emit: (event: "update:modelValue" | "focus-emoji-selector" | "focus-tabset" | "select-first-emoji", ...args: any[]) => void;
modelValue: string;
searchPlaceholderLabel: string;
$props: {
readonly modelValue?: string | undefined;
readonly searchPlaceholderLabel?: string | undefined;
};
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
searchInput: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
name: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
labelVisible: {
type: BooleanConstructor;
default: boolean;
};
description: {
type: StringConstructor;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
inputClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
inputWrapperClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
rootClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
currentLength: {
type: NumberConstructor;
default: null;
};
retainWarning: {
type: BooleanConstructor;
default: boolean;
};
validate: {
type: ObjectConstructor;
default: null;
};
hidden: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onInput?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onFocus?: ((...args: any[]) => any) | undefined;
onFocusin?: ((...args: any[]) => any) | undefined;
onFocusout?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
"onUpdate:length"?: ((...args: any[]) => any) | undefined;
"onUpdate:invalid"?: ((...args: any[]) => any) | undefined;
}>, {}, {
isInputFocused: boolean;
isInvalid: boolean;
defaultLength: number;
hasSlotContent: typeof import('../..').hasSlotContent;
isComposing: boolean;
justEndedComposition: boolean;
labelSizeClasses: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
descriptionSizeClasses: {
lg: string;
xl: string;
};
}, {
isTextarea(): boolean;
isDefaultSize(): boolean;
iconSize(): any;
isValidSize(): boolean;
isValidDescriptionSize(): boolean;
inputComponent(): "input" | "textarea";
inputListeners(): {
compositionstart: () => void;
compositionend: () => void;
input: (event: any) => Promise<void>;
blur: (event: any) => void;
focus: (event: any) => void;
focusin: (event: any) => void;
focusout: (event: any) => void;
};
descriptionKey(): string;
inputState(): string | null;
defaultLengthCalculation(): number;
validationProps(): {
length: {
description: any;
max: any;
warn: any;
message: any;
limitMaxLength: any;
};
};
validationMessages(): any;
showInputState(): string | null;
inputLength(): number;
inputLengthState(): string | null;
shouldValidateLength(): boolean;
shouldLimitMaxLength(): any;
showLengthLimitValidation(): any;
sizeModifierClass(): any;
stateClass(): any[];
}, {
removeClassStyleAttrs: typeof import('../..').removeClassStyleAttrs;
addClassStyleAttrs: typeof import('../..').addClassStyleAttrs;
inputClasses(): any[];
inputWrapperClasses(): (string | unknown[] | Record<string, any>)[];
calculateLength(value: any): number;
inputLengthErrorMessage(): {
message: any;
type: string | null;
};
onBlur(e: any): void;
emitClearEvents(): void;
blur(): void;
focus(): void;
select(): void;
getMessageKey(type: any, index: any): string;
validateLength(length: any): void;
clearInput(): void;
}, {
props: {
messagesClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
messagesChildProps: {
type: ObjectConstructor;
default: () => {};
};
showMessages: {
type: BooleanConstructor;
default: boolean;
};
messages: {
type: ArrayConstructor;
default: () => never[];
validator: (messages: any) => any;
};
};
computed: {
formattedMessages(): any;
};
}, import('vue').ComponentOptionsMixin, ("input" | "blur" | "focus" | "focusin" | "focusout" | "clear" | "update:modelValue" | "update:length" | "update:invalid")[], import('vue').PublicProps, {
label: string;
disabled: boolean;
modelValue: string | number;
name: string;
type: string;
hidden: boolean;
size: string;
description: string;
validate: Record<string, any>;
rootClass: string | unknown[] | Record<string, any>;
labelVisible: boolean;
inputClass: string | unknown[] | Record<string, any>;
inputWrapperClass: string | unknown[] | Record<string, any>;
currentLength: number;
retainWarning: boolean;
}, true, {}, {}, {
DtValidationMessages: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
validationMessages: {
type: ArrayConstructor;
default: () => never[];
validator: (messages: unknown) => any;
};
showMessages: {
type: BooleanConstructor;
default: boolean;
};
}>, {}, {}, {
isFilteredValidationMessagesEmpty(): boolean;
filteredValidationMessages(): any;
validationState(): string | null;
}, {
getMessageKey(type: any, index: any): string;
messageTypeClass(type: any): any;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
validationMessages: {
type: ArrayConstructor;
default: () => never[];
validator: (messages: unknown) => any;
};
showMessages: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
id: string;
validationMessages: unknown[];
showMessages: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
} & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {
formattedMessages(): any;
};
M: import('vue').MethodOptions;
Defaults: {};
} & {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<import('vue').ExtractPropTypes<{
name: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
modelValue: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
label: {
type: StringConstructor;
default: string;
};
labelVisible: {
type: BooleanConstructor;
default: boolean;
};
description: {
type: StringConstructor;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
inputClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
inputWrapperClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
rootClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
currentLength: {
type: NumberConstructor;
default: null;
};
retainWarning: {
type: BooleanConstructor;
default: boolean;
};
validate: {
type: ObjectConstructor;
default: null;
};
hidden: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onInput?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onFocus?: ((...args: any[]) => any) | undefined;
onFocusin?: ((...args: any[]) => any) | undefined;
onFocusout?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
"onUpdate:length"?: ((...args: any[]) => any) | undefined;
"onUpdate:invalid"?: ((...args: any[]) => any) | undefined;
}>, {}, {
isInputFocused: boolean;
isInvalid: boolean;
defaultLength: number;
hasSlotContent: typeof import('../..').hasSlotContent;
isComposing: boolean;
justEndedComposition: boolean;
labelSizeClasses: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
descriptionSizeClasses: {
lg: string;
xl: string;
};
}, {
formattedMessages(): any;
} & {
isTextarea(): boolean;
isDefaultSize(): boolean;
iconSize(): any;
isValidSize(): boolean;
isValidDescriptionSize(): boolean;
inputComponent(): "input" | "textarea";
inputListeners(): {
compositionstart: () => void;
compositionend: () => void;
input: (event: any) => Promise<void>;
blur: (event: any) => void;
focus: (event: any) => void;
focusin: (event: any) => void;
focusout: (event: any) => void;
};
descriptionKey(): string;
inputState(): string | null;
defaultLengthCalculation(): number;
validationProps(): {
length: {
description: any;
max: any;
warn: any;
message: any;
limitMaxLength: any;
};
};
validationMessages(): any;
showInputState(): string | null;
inputLength(): number;
inputLengthState(): string | null;
shouldValidateLength(): boolean;
shouldLimitMaxLength(): any;
showLengthLimitValidation(): any;
sizeModifierClass(): any;
stateClass(): any[];
}, import('vue').MethodOptions & {
removeClassStyleAttrs: typeof import('../..').removeClassStyleAttrs;
addClassStyleAttrs: typeof import('../..').addClassStyleAttrs;
inputClasses(): any[];
inputWrapperClasses(): (string | unknown[] | Record<string, any>)[];
calculateLength(value: any): number;
inputLengthErrorMessage(): {
message: any;
type: string | null;
};
onBlur(e: any): void;
emitClearEvents(): void;
blur(): void;
focus(): void;
select(): void;
getMessageKey(type: any, index: any): string;
validateLength(length: any): void;
clearInput(): void;
}, {
label: string;
disabled: boolean;
modelValue: string | number;
name: string;
type: string;
hidden: boolean;
size: string;
description: string;
validate: Record<string, any>;
rootClass: string | unknown[] | Record<string, any>;
labelVisible: boolean;
inputClass: string | unknown[] | Record<string, any>;
inputWrapperClass: string | unknown[] | Record<string, any>;
currentLength: number;
retainWarning: boolean;
}> | null;
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {
focusSearchInput: () => void;
$emit: (event: "update:modelValue" | "focus-emoji-selector" | "focus-tabset" | "select-first-emoji", ...args: any[]) => void;
modelValue: string;
searchPlaceholderLabel: string;
$props: {
readonly modelValue?: string | undefined;
readonly searchPlaceholderLabel?: string | undefined;
};
}, {}, {}, {}, {}> | null;
emojiSelectorRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
focusEmojiSelector: () => void;
focusLastEmoji: () => void;
$emit: (event: "focus-search-input" | "focus-skin-selector" | "highlighted-emoji" | "selected-emoji" | "scroll-into-tab" | "scroll-bottom-reached", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
listRef: HTMLDivElement;
tabCategoryRef: HTMLDivElement;
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {
focusEmojiSelector: () => void;
focusLastEmoji: () => void;
$emit: (event: "focus-search-input" | "focus-skin-selector" | "highlighted-emoji" | "selected-emoji" | "scroll-into-tab" | "scroll-bottom-reached", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, {}> | null;
skinSelectorRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
focusSkinSelector: () => void;
$emit: (event: "focus-tabset" | "skin-tone" | "focus-last-emoji", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
skinSelectorRef: HTMLButtonElement;
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{}> & Readonly<{}>, {
focusSkinSelector: () => void;
$emit: (event: "focus-tabset" | "skin-tone" | "focus-last-emoji", ...args: any[]) => void;
$props: {
readonly [x: string]: any;
};
}, {}, {}, {}, {}> | null;
}, HTMLDivElement>;
export default _default;
//# sourceMappingURL=emoji_picker.vue.d.ts.map