From d40c9dcc32b1e1e6bb4ed6281f1e2fe58018dc66 Mon Sep 17 00:00:00 2001
From: Jim Kriz <jim@kriz.net>
Date: Wed, 5 Apr 2023 04:51:41 -0400
Subject: [PATCH] Fix styling on non-default placeholder

---
 src/components/Avatar/Avatar.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index 3303cb1..7a0fa69 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="relative">
     <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>
+    <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">
+        <slot name="placeholder" />
+      </div>
+    </template>
     <span v-if="status" :class="avatarDotClasses" :data-pos="statusPosition"></span>
   </div>
 </template>