feat(Alert): new component (#449)

docs/content/2.elements/3.avatar.md

@@ -0,0 +1,108 @@
+---
+description: Display an image that represents a resource or a group of resources.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Avatar.vue
+---
+
+## Usage
+
+::component-card
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Avatar.
+
+::component-card
+---
+props:
+  size: 'sm'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Chip
+
+Use the `chip-color`, `chip-text` and `chip-position` props to display a chip on the Avatar.
+
+::component-card
+---
+props:
+  chipColor: 'primary'
+  chipText: ''
+  chipPosition: 'top-right'
+  size : 'sm'
+extraColors:
+  - gray
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Placeholder
+
+If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
+
+If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
+
+::component-card
+---
+props:
+  alt: 'Benjamin Canac'
+  size: 'sm'
+---
+::
+
+### Group
+
+To stack avatars as a group, use the `AvatarGroup` component.
+
+- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
+- To size all the avatars equally, pass the `size` prop
+- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
+
+::component-card{slug="AvatarGroup"}
+---
+props:
+  size: 'sm'
+  max: 2
+ui:
+  size:
+    '3xs': ''
+    '2xs': ''
+    xs: ''
+    sm: ''
+    md: ''
+    lg: ''
+    xl: ''
+    '2xl': ''
+    '3xl': ''
+code: |
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset