From a1bac4bebb7bc052067ee424622754b202be35ff Mon Sep 17 00:00:00 2001
From: Jim Kriz <jim@kriz.net>
Date: Wed, 5 Apr 2023 07:22:26 -0400
Subject: [PATCH] Update example for alternate avatar placeholder

---
 docs/components/avatar.md                     | 11 ++++++++--
 .../AvatarAlternativePlaceholderExample.vue   |  7 +++++++
 src/components/Avatar/Avatar.vue              | 20 ++++++++-----------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index db113f6..b8a5b3c 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -195,10 +195,17 @@ Use this example if you'd like to specify a different placeholder icon. Specify
 ```vue
 <template>
   <div class="vp-raw flex">
+    <Avatar class="mr-2.5">
+      <template #placeholder>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      </template>
+    </Avatar>
     <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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
         </svg>
       </template>
     </Avatar>
diff --git a/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue b/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
index 49b26f0..0b995de 100644
--- a/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
+++ b/docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="vp-raw flex">
+    <Avatar class="mr-2.5">
+      <template #placeholder>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      </template>
+    </Avatar>
     <Avatar rounded>
       <template #placeholder>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index 7a0fa69..e9ba5c0 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -1,20 +1,16 @@
 <template>
   <div class="relative">
     <img v-if="img && !imageError" :class="avatarClasses" :src="img" :alt="alt" @error="setImageError">
-    <template v-else>
-      <div v-if="initials" :class="avatarPlaceholderWrapperClasses">
-        <div :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
-      </div>
-      <div v-else-if="!initials && !hasPlaceholder" :class="avatarPlaceholderWrapperClasses">
-        <svg :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>
-      <div v-else :class="avatarClasses">
+    <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>
+      <div v-if="!initials && hasPlaceholder" :class="avatarPlaceholderClasses">
         <slot name="placeholder" />
       </div>
-    </template>
-    <span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
+      <div v-else :class="avatarPlaceholderInitialsClasses">{{ initials }}</div>
+      <span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>