feat: Added placeholder avatar

docs/components/avatar/avatar.md

@@ -6,6 +6,8 @@ import AvatarSizeExample from './examples/AvatarSizeExample.vue'
 import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
 import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
 import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
+import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
+import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
 
 </script>
 # Avatar
@@ -46,6 +48,7 @@ import { Avatar } from 'flowbite-vue'
 ```
 
 ## Dot indicator
+Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
 
 <AvatarDotIndicatorExample />
 
@@ -63,27 +66,9 @@ import { Avatar } from 'flowbite-vue'
 </template>
 ```
 
-## Sizes
-
-<AvatarSizeExample />
-
-```vue
-<script setup>
-import { Avatar } from 'flowbite-vue'
-</script>
-<template>
-  <div class="flex items-center">
-    <Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-    <Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
-  </div>
-</template>
-```
-
 ## Dot indicator position
 
+
 <AvatarDotIndicatorPositionExample />
 
 ```vue
@@ -103,11 +88,44 @@ import { Avatar } from 'flowbite-vue'
   </div>
 </template>
 ```
+
+## Sizes
+
+Choose from multiple sizing options for the avatar component from this example.
+
+<AvatarSizeExample />
+
+```vue
+<script setup>
+import { Avatar } from 'flowbite-vue'
+</script>
+<template>
+  <div class="flex items-center">
+    <Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+    <Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+    <Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+    <Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+    <Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
+  </div>
+</template>
+```
+
 ## Alternative text
 
 <AvatarAlternativeTextExample />
 
+```vue
+<script setup>
+import { Avatar } from 'flowbite-vue'
+</script>
+
+<template>
+    <Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
+</template>
+```
+
 ## Stacked avatars
+Use this example if you want to stack a group of users by overlapping the avatar components.
 
 <StackedAvatarsExample />
 
@@ -133,3 +151,37 @@ import { StackedAvatars, Avatar, StackedAvatarsCounter } from 'flowbite-vue'
     </StackedAvatars>
 </template>
 ```
+
+## Placeholder icon
+
+<AvatarPlaceholderExample />
+
+```vue
+<script setup>
+import { Avatar } from 'flowbite-vue'
+</script>
+
+<template>
+  <div class="flex">
+    <Avatar class="mr-2.5" />
+    <Avatar rounded />
+  </div>
+</template>
+```
+
+## Placeholder initials
+
+<AvatarPlaceholderInitialsExample />
+
+```vue
+<script setup>
+import { Avatar } from 'flowbite-vue'
+</script>
+
+<template>
+  <div class="flex">
+    <Avatar initials="JD" class="mr-2.5" />
+    <Avatar initials="JD" rounded />
+  </div>
+</template>
+```

docs/components/avatar/examples/AvatarPlaceholderExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="vp-raw flex">
+    <Avatar class="mr-2.5" />
+    <Avatar rounded />
+  </div>
+</template>
+<script setup>
+import { Avatar } from '../../../../src/index'
+</script>

docs/components/avatar/examples/AvatarPlaceholderInitialsExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="vp-raw flex">
+    <Avatar initials="JD" class="mr-2.5" />
+    <Avatar initials="JD" rounded />
+  </div>
+</template>
+<script setup>
+import { Avatar } from '../../../../src/index'
+</script>

src/components/Avatar/Avatar.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="relative">
-    <img :class="avatarClasses" :src="img" :alt="alt">
+    <div v-if="!img" :class="avatarPlaceholderWrapperClasses">
+      <svg v-if="!initials" :class="avatarPlaceholderClasses" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+      </svg>
+      <div v-else :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
+    </div>
+    <img v-else :class="avatarClasses" :src="img" :alt="alt">
     <span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
   </div>
 </template>
@@ -43,8 +49,12 @@ const props = defineProps({
     type: String as PropType<AvatarStatusPosition>,
     default: 'top-right',
   },
+  initials: {
+    type: String,
+    default: null,
+  },
 })
 
-const { avatarClasses, avatarDotClasses } = useAvatarClasses(toRefs(props))
+const { avatarClasses, avatarDotClasses, avatarPlaceholderClasses, avatarPlaceholderWrapperClasses, avatarPlaceholderInitialsClasses } = useAvatarClasses(toRefs(props))
 
 </script>

src/components/Avatar/composables/useAvatarClasses.ts

@@ -34,6 +34,17 @@ const avatarStatusDotPositionClasses: Record<avatarDotIndicatorPositionClasses,
     'bottom-left-default': '-bottom-1.5 left-0 transform -translate-x-1/2 ',
 }
 
+const avatarPlaceholderDefaultClasses = 'absolute w-auto h-auto text-gray-400'
+const avatarPlaceholderWrapperDefaultClasses = 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600'
+const avatarPlaceholderInitialsDefaultClasses = 'font-medium text-gray-600 dark:text-gray-300'
+const avatarPlaceholderSizes = {
+    xs: 'bottom-0',
+    sm: 'bottom-0',
+    md: '-bottom-1',
+    lg: '-bottom-2',
+    xl: '-bottom-4',
+}
+
 export type UseAvatarClassesProps = {
     status: Ref<AvatarStatus>
     bordered: Ref<boolean>
@@ -48,6 +59,9 @@ export type UseAvatarClassesProps = {
 export function useAvatarClasses(props: UseAvatarClassesProps): {
     avatarClasses: Ref<string>
     avatarDotClasses: Ref<string>
+    avatarPlaceholderClasses: Ref<string>
+    avatarPlaceholderWrapperClasses: Ref<string>
+    avatarPlaceholderInitialsClasses: Ref<string>
 } {
 
     const avatarClasses = computed<string>(() => {
@@ -67,12 +81,32 @@ export function useAvatarClasses(props: UseAvatarClassesProps): {
             avatarStatusDotPositionClasses[avatarType as avatarDotIndicatorPositionClasses],
         )
     })
-    // TODO: Placeholder
+    const avatarPlaceholderClasses = computed<string>(() => {
+        return classNames(
+            avatarPlaceholderDefaultClasses,
+            avatarPlaceholderSizes[props.size.value],
+        )
+    })
+    const avatarPlaceholderWrapperClasses = computed<string>(() => {
+        return classNames(
+            avatarPlaceholderWrapperDefaultClasses,
+            avatarSizeClasses[props.size.value],
+            avatarTypeClasses[props.rounded.value ? 'rounded' : 'default'],
+        )
+    })
+    const avatarPlaceholderInitialsClasses = computed<string>(() => {
+        return classNames(
+            avatarPlaceholderInitialsDefaultClasses,
+        )
+    })
     // TODO: Avatar Initials
 
     return {
         avatarClasses,
         avatarDotClasses,
+        avatarPlaceholderClasses,
+        avatarPlaceholderWrapperClasses,
+        avatarPlaceholderInitialsClasses,
     }
 }