From 5eced3229bdd6f70641547c40cd09f9410920744 Mon Sep 17 00:00:00 2001
From: Jim Kriz <jim@kriz.net>
Date: Tue, 4 Apr 2023 16:22:40 -0400
Subject: [PATCH] Allow placeholder override

Allow overriding the default placeholder icon, and add error handling to fallback to placeholder icon if the specified `img` cannot be loaded.
---
 docs/components/avatar.md                     | 24 +++++++++++++++++++
 .../AvatarAlternativePlaceholderExample.vue   | 14 +++++++++++
 src/components/Avatar/Avatar.vue              | 21 ++++++++++++----
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue

diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 38b64ab..db113f6 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -1,5 +1,6 @@
 <script setup>
 import AvatarExample from './avatar/examples/AvatarExample.vue'
+import AvatarAlternativePlaceholderExample from './avatar/examples/AvatarAlternativePlaceholderExample.vue'
 import AvatarBorderedExample from './avatar/examples/AvatarBorderedExample.vue'
 import AvatarDotIndicatorExample from './avatar/examples/AvatarDotIndicatorExample.vue'
 import AvatarSizeExample from './avatar/examples/AvatarSizeExample.vue'
@@ -185,3 +186,26 @@ import { Avatar } from 'flowbite-vue'
   </div>
 </template>
 ```
+
+## Alternative Placeholder Icon
+Use this example if you'd like to specify a different placeholder icon. Specify a `#placeholder` template slot to override the default placeholder icon. This has no effect if using initials.
+
+<AvatarAlternativePlaceholderExample />
+
+```vue
+<template>
+  <div class="vp-raw flex">
+    <Avatar rounded>
+      <template #placeholder>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="profile">
+          <path fill="#000" fill-rule="evenodd" d="M338.083 1965c0-2.206-1.831-4-4.083-4-2.252 0-4.083 1.794-4.083 4s1.831 4 4.083 4c2.252 0 4.083-1.794 4.083-4m3.863 14h-1.821a1.01 1.01 0 0 1-1.021-1c0-.552.457-1 1.02-1h.439c.706 0 1.228-.697.96-1.338-1.236-2.964-4.14-4.662-7.523-4.662-3.384 0-6.287 1.698-7.523 4.662-.268.641.254 1.338.96 1.338h.438c.564 0 1.021.448 1.021 1s-.457 1-1.02 1h-1.822c-1.276 0-2.28-1.143-2.01-2.364.743-3.359 3.064-5.838 6.12-6.963-1.394-1.099-2.289-2.783-2.289-4.673 0-3.551 3.148-6.381 6.859-5.958 2.689.306 4.916 2.405 5.32 5.028.346 2.261-.598 4.326-2.218 5.603 3.056 1.125 5.377 3.604 6.12 6.963.27 1.221-.734 2.364-2.01 2.364m-4.884-1c0 .552-.457 1-1.02 1h-4.084a1.01 1.01 0 0 1-1.02-1c0-.552.457-1 1.02-1h4.084c.563 0 1.02.448 1.02 1" transform="translate(-324 -1959)"></path>
+        </svg>
+      </template>
+    </Avatar>
+  </div>
+</template>
+<script setup>
+import { Avatar } from 'flowbite-vue'
+
+</script>
+```
\ No newline at end of file
diff --git a/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue b/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
new file mode 100644
index 0000000..a3360f4
--- /dev/null
+++ b/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="vp-raw flex">
+    <Avatar rounded>
+      <template #placeholder>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="profile">
+          <path fill="#000" fill-rule="evenodd" d="M338.083 1965c0-2.206-1.831-4-4.083-4-2.252 0-4.083 1.794-4.083 4s1.831 4 4.083 4c2.252 0 4.083-1.794 4.083-4m3.863 14h-1.821a1.01 1.01 0 0 1-1.021-1c0-.552.457-1 1.02-1h.439c.706 0 1.228-.697.96-1.338-1.236-2.964-4.14-4.662-7.523-4.662-3.384 0-6.287 1.698-7.523 4.662-.268.641.254 1.338.96 1.338h.438c.564 0 1.021.448 1.021 1s-.457 1-1.02 1h-1.822c-1.276 0-2.28-1.143-2.01-2.364.743-3.359 3.064-5.838 6.12-6.963-1.394-1.099-2.289-2.783-2.289-4.673 0-3.551 3.148-6.381 6.859-5.958 2.689.306 4.916 2.405 5.32 5.028.346 2.261-.598 4.326-2.218 5.603 3.056 1.125 5.377 3.604 6.12 6.963.27 1.221-.734 2.364-2.01 2.364m-4.884-1c0 .552-.457 1-1.02 1h-4.084a1.01 1.01 0 0 1-1.02-1c0-.552.457-1 1.02-1h4.084c.563 0 1.02.448 1.02 1" transform="translate(-324 -1959)"></path>
+        </svg>
+      </template>
+    </Avatar>
+  </div>
+</template>
+<script setup>
+import { Avatar } from '../../../../src/index'
+</script>
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index 1d674fe..f964ef7 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -1,21 +1,30 @@
 <template>
   <div class="relative">
-    <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">
+    <img v-if="img && !imageError" :class="avatarClasses" :src="img" :alt="alt" @error="setImageError">
+    <div v-else :class="avatarPlaceholderWrapperClasses">
+      <svg v-if="!initials && !hasPlaceholder" :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>
+      <slot v-else-if="!initials && hasPlaceholder" name="placeholder" />
       <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>
 <script lang="ts" setup>
-import { toRefs } from 'vue'
+import { computed, ref, toRefs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { AvatarSize, AvatarStatus, AvatarStatusPosition } from './types'
 import { useAvatarClasses } from '@/components/Avatar/composables/useAvatarClasses'
 
+const imageError = ref(false)
+function setImageError() {
+  imageError.value = true
+}
+
+const slots = useSlots()
+const hasPlaceholder = computed(() => slots.placeholder)
+
 const props = defineProps({
   alt: {
     type: String,
@@ -53,6 +62,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  placeholder: {
+    type: Object,
+    default: null,
+  },
 })
 
 const { avatarClasses, avatarDotClasses, avatarPlaceholderClasses, avatarPlaceholderWrapperClasses, avatarPlaceholderInitialsClasses } = useAvatarClasses(toRefs(props))