feat: Added stacked avatars

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'