feat: Added stacked avatars

docs/components/avatar/avatar.md

@@ -4,6 +4,9 @@ import AvatarBorderedExample from './examples/AvatarBorderedExample.vue'
 import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue'
 import AvatarSizeExample from './examples/AvatarSizeExample.vue'
 import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
+import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
+import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
+
 </script>
 # Avatar
 Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
@@ -100,3 +103,33 @@ import { Avatar } from 'flowbite-vue'
   </div>
 </template>
 ```
+## Alternative text
+
+<AvatarAlternativeTextExample />
+
+## Stacked avatars
+
+<StackedAvatarsExample />
+
+```vue
+<script setup>
+import { StackedAvatars, Avatar, StackedAvatarsCounter } from 'flowbite-vue'
+</script>
+
+<template>
+    <StackedAvatars>
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
+    </StackedAvatars>
+    <StackedAvatars class="mt-2.5">
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
+      <StackedAvatarsCounter total="99" href="#" />
+    </StackedAvatars>
+</template>
+```

docs/components/avatar/examples/AvatarAlternativeTextExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw flex">
+    <Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
+  </div>
+</template>
+<script setup>
+import { Avatar } from '../../../../src/index'
+</script>

docs/components/avatar/examples/StackedAvatarsExample.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw flex-col">
+    <StackedAvatars>
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
+    </StackedAvatars>
+    <StackedAvatars class="mt-2.5">
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded />
+      <Avatar stacked img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded />
+      <StackedAvatarsCounter total="99" href="#" />
+    </StackedAvatars>
+  </div>
+</template>
+<script setup>
+import { StackedAvatars, Avatar, StackedAvatarsCounter } from '../../../../src/index'
+</script>

src/components/Avatar/StackedAvatars.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex -space-x-4">
+    <slot name="default" />
+  </div>
+</template>

src/components/Avatar/StackedAvatarsCounter.vue

@@ -0,0 +1,15 @@
+<template>
+  <a class="relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800" :href="href">+{{ total }}</a>
+</template>
+<script setup>
+defineProps({
+  total: {
+    type: Number,
+    default: 1,
+  },
+  href: {
+    type: String,
+    default: '#',
+  },
+})
+</script>

src/components/Avatar/composables/useAvatarClasses.ts

@@ -56,6 +56,7 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
             avatarSizeClasses[props.size.value],
             avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
             props.bordered.value ? avatarBorderedClasses : '',
+            props.stacked.value ? 'border-2 border-white dark:border-gray-800' : '',
         )
     })
     const avatarDotClasses = computed<string>(() => {
@@ -67,7 +68,6 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
         )
     })
     // TODO: Placeholder
-    // TODO: Stacked avatars
     // TODO: Avatar Initials
 
     return {

src/index.ts

@@ -7,9 +7,11 @@ export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
 export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
 export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
-
-export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Avatar } from './components/Avatar/Avatar.vue'
+export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
+export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+
 export { default as Badge } from './components/Badge/Badge.vue'
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
 export { default as Card } from './components/Card/Card.vue'