@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
786 lines • 24.4 kB
TypeScript
import { hasSlotContent } from '../../../common/utils';
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
avatarSeed: {
type: StringConstructor;
default: null;
};
showHeader: {
type: BooleanConstructor;
default: boolean;
};
avatarImageUrl: {
type: StringConstructor;
default: string;
};
displayName: {
type: StringConstructor;
default: string;
};
noInitials: {
type: BooleanConstructor;
default: boolean;
};
time: {
type: StringConstructor;
default: string;
};
shortTime: {
type: StringConstructor;
default: string;
};
labelText: {
type: StringConstructor;
default: string;
};
isActive: {
type: BooleanConstructor;
default: boolean;
};
state: {
type: StringConstructor;
default: string;
validator: (state: unknown) => boolean;
};
}>, {}, {
transitionActive: boolean;
}, {
feedListeners(): {
mouseenter: () => void;
mouseleave: () => void;
focusin: () => void;
focusout: () => void;
transitionend: () => void;
keydown: (event: any) => void;
};
listItemClasses(): any[];
hasAttachmentContent(): any;
}, {
transitionComplete(): void;
trapFocus(e: any): void;
setFocus(bool: any): void;
setHover(bool: any): void;
}, {
methods: {
getFirstFocusableElement(el: object): Promise<any>;
focusFirstElement(el?: object): Promise<void>;
focusElementById(elementId: any): Promise<void>;
_getFirstFocusElement(focusableElements: any): any;
_getFocusableElements(el?: object, includeNegativeTabIndex?: bool): any[];
focusTrappedTabPress(e: object, el: object): void;
};
}, import('vue').ComponentOptionsMixin, ("focus" | "keydown" | "hover")[], "focus" | "keydown" | "hover", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
avatarSeed: {
type: StringConstructor;
default: null;
};
showHeader: {
type: BooleanConstructor;
default: boolean;
};
avatarImageUrl: {
type: StringConstructor;
default: string;
};
displayName: {
type: StringConstructor;
default: string;
};
noInitials: {
type: BooleanConstructor;
default: boolean;
};
time: {
type: StringConstructor;
default: string;
};
shortTime: {
type: StringConstructor;
default: string;
};
labelText: {
type: StringConstructor;
default: string;
};
isActive: {
type: BooleanConstructor;
default: boolean;
};
state: {
type: StringConstructor;
default: string;
validator: (state: unknown) => boolean;
};
}>> & Readonly<{
onFocus?: ((...args: any[]) => any) | undefined;
onKeydown?: ((...args: any[]) => any) | undefined;
onHover?: ((...args: any[]) => any) | undefined;
}>, {
time: string;
displayName: string;
isActive: boolean;
state: string;
avatarSeed: string;
showHeader: boolean;
avatarImageUrl: string;
noInitials: boolean;
shortTime: string;
labelText: string;
}, {}, {
DtAvatar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
seed: {
type: StringConstructor;
default: undefined;
};
color: {
type: StringConstructor;
default: undefined;
};
size: {
type: StringConstructor;
default: string;
validator: (size: unknown) => boolean;
};
avatarClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
canvasClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
iconClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
presence: {
type: StringConstructor;
default: string;
validator: (state: unknown) => boolean;
};
presenceProps: {
type: ObjectConstructor;
default: () => {};
};
group: {
type: NumberConstructor;
default: undefined;
validator: (group: unknown) => boolean;
};
overlayText: {
type: StringConstructor;
default: string;
};
overlayClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
imageSrc: {
type: StringConstructor;
default: string;
};
imageAlt: {
type: StringConstructor;
default: undefined;
};
iconSize: {
type: StringConstructor;
default: string;
validator: (size: unknown) => boolean;
};
fullName: {
type: StringConstructor;
default: string;
};
clickable: {
type: BooleanConstructor;
default: boolean;
};
iconAriaLabel: {
type: StringConstructor;
default: undefined;
};
}>, {}, {
AVATAR_SIZE_MODIFIERS: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
AVATAR_KIND_MODIFIERS: {
default: string;
icon: string;
initials: string;
};
AVATAR_PRESENCE_SIZE_MODIFIERS: {
md: string;
lg: string;
};
AVATAR_ICON_SIZES: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
imageLoadedSuccessfully: null;
formattedInitials: string;
initializing: boolean;
hasSlotContent: typeof hasSlotContent;
}, {
hasOverlayIcon(): any;
iconDataQa(): "dt-avatar-icon";
avatarClasses(): any[];
overlayClasses(): (string | unknown[] | Record<string, any>)[];
showGroup(): boolean;
formattedGroup(): number | "99+" | undefined;
validatedSize(): string;
showImage(): string | false;
}, {
isIconType(): any;
setImageListeners(): Promise<void>;
formatInitials(): void;
getColor(): any;
_loadedImageEventHandler(el: any): void;
_erroredImageEventHandler(el: any): void;
validateProps(): void;
handleClick(e: any): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
seed: {
type: StringConstructor;
default: undefined;
};
color: {
type: StringConstructor;
default: undefined;
};
size: {
type: StringConstructor;
default: string;
validator: (size: unknown) => boolean;
};
avatarClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
canvasClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
iconClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
presence: {
type: StringConstructor;
default: string;
validator: (state: unknown) => boolean;
};
presenceProps: {
type: ObjectConstructor;
default: () => {};
};
group: {
type: NumberConstructor;
default: undefined;
validator: (group: unknown) => boolean;
};
overlayText: {
type: StringConstructor;
default: string;
};
overlayClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
imageSrc: {
type: StringConstructor;
default: string;
};
imageAlt: {
type: StringConstructor;
default: undefined;
};
iconSize: {
type: StringConstructor;
default: string;
validator: (size: unknown) => boolean;
};
fullName: {
type: StringConstructor;
default: string;
};
clickable: {
type: BooleanConstructor;
default: boolean;
};
iconAriaLabel: {
type: StringConstructor;
default: undefined;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
id: string;
presence: string;
seed: string;
color: string;
size: string;
avatarClass: string | unknown[] | Record<string, any>;
canvasClass: string | unknown[] | Record<string, any>;
iconClass: string | unknown[] | Record<string, any>;
presenceProps: Record<string, any>;
group: number;
overlayText: string;
overlayClass: string | unknown[] | Record<string, any>;
imageSrc: string;
imageAlt: string;
iconSize: string;
fullName: string;
clickable: boolean;
iconAriaLabel: string;
}, {}, {
DtPresence: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
presence: {
type: StringConstructor;
default: string;
validator: (role: unknown) => boolean;
};
srText: {
type: StringConstructor;
default: null;
};
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
presence: {
type: StringConstructor;
default: string;
validator: (role: unknown) => boolean;
};
srText: {
type: StringConstructor;
default: null;
};
}>> & Readonly<{}>, {
presence: string;
srText: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
DtLazyShow: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
show: {
type: BooleanConstructor;
default: boolean;
};
transition: {
type: StringConstructor;
default: null;
};
appear: {
type: BooleanConstructor;
default: boolean;
};
}>, {}, {
initialized: boolean;
}, {
isCSSEnabled(): boolean;
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
show: {
type: BooleanConstructor;
default: boolean;
};
transition: {
type: StringConstructor;
default: null;
};
appear: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
show: boolean;
appear: boolean;
transition: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
DtListItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
role: {
type: StringConstructor;
default: string;
validator: (role: unknown) => boolean;
};
elementType: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
navigationType: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
wrapperClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
}>, {}, {
injected: boolean;
mouseHighlighted: boolean;
}, {
isDefaultType(): boolean;
listItemListeners(): {
keydown: (event: any) => void;
mousemove: (event: any) => void;
mouseleave: (event: any) => void;
};
isHighlighted(): boolean;
isFocusable(): boolean;
isHoverable(): boolean;
}, {
onClick(e: any): void;
onMouseHover(): void;
onMouseLeave(): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("keydown" | "mouseleave" | "mousemove")[], "keydown" | "mouseleave" | "mousemove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
id: {
type: StringConstructor;
default(): string;
};
role: {
type: StringConstructor;
default: string;
validator: (role: unknown) => boolean;
};
elementType: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
navigationType: {
type: StringConstructor;
default: string;
validator: (t: unknown) => boolean;
};
selected: {
type: BooleanConstructor;
default: boolean;
};
wrapperClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
}>> & Readonly<{
onKeydown?: ((...args: any[]) => any) | undefined;
onMouseleave?: ((...args: any[]) => any) | undefined;
onMousemove?: ((...args: any[]) => any) | undefined;
}>, {
id: string;
type: string;
role: string;
selected: boolean;
elementType: string;
navigationType: string;
wrapperClass: string | unknown[] | Record<string, any>;
}, {}, {
DtItemLayout: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
as: {
type: StringConstructor;
default: string;
};
unstyled: {
type: BooleanConstructor;
default: boolean;
};
leftClass: {
type: StringConstructor;
default: string;
};
contentClass: {
type: StringConstructor;
default: string;
};
titleClass: {
type: StringConstructor;
default: string;
};
subtitleClass: {
type: StringConstructor;
default: string;
};
bottomClass: {
type: StringConstructor;
default: string;
};
rightClass: {
type: StringConstructor;
default: string;
};
selectedClass: {
type: StringConstructor;
default: string;
};
}>, {}, {}, {}, {
dynamicGridTemplateColumns(): string;
hasSlotContent: typeof hasSlotContent;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
as: {
type: StringConstructor;
default: string;
};
unstyled: {
type: BooleanConstructor;
default: boolean;
};
leftClass: {
type: StringConstructor;
default: string;
};
contentClass: {
type: StringConstructor;
default: string;
};
titleClass: {
type: StringConstructor;
default: string;
};
subtitleClass: {
type: StringConstructor;
default: string;
};
bottomClass: {
type: StringConstructor;
default: string;
};
rightClass: {
type: StringConstructor;
default: string;
};
selectedClass: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{}>, {
unstyled: boolean;
contentClass: string;
as: string;
leftClass: string;
titleClass: string;
subtitleClass: string;
bottomClass: string;
rightClass: string;
selectedClass: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
DtIconCheck: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
size: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
ariaLabel: {
type: StringConstructor;
default: undefined;
};
}>, {}, {}, {
iconSizeClass(): any;
ariaHidden(): "true" | "false";
dataQA(): {};
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "loaded"[], "loaded", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
size: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
ariaLabel: {
type: StringConstructor;
default: undefined;
};
}>> & Readonly<{
onLoaded?: ((...args: any[]) => any) | undefined;
}>, {
size: string;
ariaLabel: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
DtBadge: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
iconSize: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
text: {
type: StringConstructor;
default: string;
};
kind: {
type: StringConstructor;
default: string;
validator: (kind: unknown) => boolean;
};
type: {
type: StringConstructor;
default: string;
validator: (type: unknown) => boolean;
};
decoration: {
type: StringConstructor;
default: undefined;
validator: (type: unknown) => boolean;
};
labelClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
subtle: {
type: BooleanConstructor;
default: boolean;
};
outlined: {
type: BooleanConstructor;
default: boolean;
};
}>, {}, {
BADGE_TYPE_MODIFIERS: {
default: string;
info: string;
success: string;
warning: string;
critical: string;
bulletin: string;
ai: string;
};
BADGE_KIND_MODIFIERS: {
label: string;
count: string;
};
BADGE_DECORATION_MODIFIERS: {
'black-400': string;
'black-500': string;
'black-900': string;
'red-200': string;
'red-300': string;
'red-400': string;
'purple-200': string;
'purple-300': string;
'purple-400': string;
'purple-500': string;
'blue-200': string;
'blue-300': string;
'blue-400': string;
'green-300': string;
'green-400': string;
'green-500': string;
'gold-300': string;
'gold-400': string;
'gold-500': string;
'magenta-200': string;
'magenta-300': string;
'magenta-400': string;
};
}, {
hasLeftIcon(): any;
hasRightIcon(): any;
hasIcons(): any;
}, {
validateProps(): void;
validateTypePropCombination(): void;
validateDecorationPropCombination(): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
iconSize: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
text: {
type: StringConstructor;
default: string;
};
kind: {
type: StringConstructor;
default: string;
validator: (kind: unknown) => boolean;
};
type: {
type: StringConstructor;
default: string;
validator: (type: unknown) => boolean;
};
decoration: {
type: StringConstructor;
default: undefined;
validator: (type: unknown) => boolean;
};
labelClass: {
type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
default: string;
};
subtle: {
type: BooleanConstructor;
default: boolean;
};
outlined: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
type: string;
outlined: boolean;
iconSize: string;
text: string;
kind: string;
decoration: string;
labelClass: string | unknown[] | Record<string, any>;
subtle: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
DtIconUser: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
size: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
ariaLabel: {
type: StringConstructor;
default: undefined;
};
}>, {}, {}, {
iconSizeClass(): any;
ariaHidden(): "true" | "false";
dataQA(): {};
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "loaded"[], "loaded", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
size: {
type: StringConstructor;
default: string;
validator: (s: unknown) => boolean;
};
ariaLabel: {
type: StringConstructor;
default: undefined;
};
}>> & Readonly<{
onLoaded?: ((...args: any[]) => any) | undefined;
}>, {
size: string;
ariaLabel: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;
//# sourceMappingURL=feed_item_row.vue.d.ts.map