@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
48 lines (47 loc) • 1.96 kB
TypeScript
/**
* OcAvatars - A component for displaying a group of different types of avatars with various display options.
*
* @prop {Array<Object>} items - Users, public links, groups, federated and guests to be displayed with avatar.
* @prop {boolean} [stacked=false] - Asserts whether avatars should be stacked on each other.
* @prop {boolean} [isTooltipDisplayed=false] - Asserts whether tooltip should be displayed on hover/focus.
* @prop {number} [maxDisplayed=null] - Limits the number of avatars which will be displayed.
* @prop {string} [accessibleDescription=null] - A description of the avatar group for screen readers. This is required as the avatar group element
* is hidden for screen readers.
*
* @example
* ```vue
* <!-- Basic usage with users and groups -->
* <oc-avatars
* :items="[
* { username: 'john', displayName: 'doe', shareType: 0, avatar: 'avatar-url' },
* { name: 'Developers', shareType: 1 }
* ]"
* accessible-description="Marie and Developers group have access to this resource"
* />
*
* <!-- Stacked avatars with tooltip and limited display -->
* <oc-avatars
* :items="usersList"
* :stacked="true"
* :is-tooltip-displayed="true"
* :max-displayed="5"
* accessible-description="This resource is shared with multiple users and groups"
* />
* ```
*/
type Item = {
displayName?: string;
name?: string;
shareType?: number;
username?: string;
avatar?: string;
};
interface Props {
items: Item[];
stacked?: boolean;
isTooltipDisplayed?: boolean;
maxDisplayed?: number;
accessibleDescription?: string | null;
}
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
export default _default;