fix(#3990): use fallback if no src

epicmaxco · Nov 6, 2023 · 3b90f26 · 3b90f26
1 parent aa98a34
commit 3b90f26
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.stories.ts b/packages/ui/src/components/va-avatar/VaAvatar.stories.ts
@@ -10,8 +10,8 @@ export default {
 export const Default = () => ({
   components: { VaAvatar },
   template: `
-    <VaAvatar 
-      src="https://randomuser.me/api/portraits/women/5.jpg" 
+    <VaAvatar
+      src="https://randomuser.me/api/portraits/women/5.jpg"
       alt="image"
     />
   `,
@@ -62,21 +62,21 @@ export const SizesConfig = () => ({
   components: { VaAvatar },
   template: `
     [small: 16px]
-    <VaAvatar 
+    <VaAvatar
       :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
       size="small"
     >
       Text
     </VaAvatar>
     [medium: 24px]
-    <VaAvatar 
+    <VaAvatar
       :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
       size="medium"
     >
       Text
     </VaAvatar>
     [large: 32px]
-    <VaAvatar 
+    <VaAvatar
       :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
       size="large"
     >
@@ -123,6 +123,11 @@ export const FallbackText = () => ({
   template: '<VaAvatar src="https://not-exist" fallbackText="Text"/>',
 })
 
+export const FallbackTextNoSrc = () => ({
+  components: { VaAvatar },
+  template: '<VaAvatar fallbackText="Text" />',
+})
+
 export const fallbackRender = () => ({
   components: { VaAvatar },
   methods: {

diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -24,6 +24,9 @@
         v-else-if="$props.icon"
         :name="$props.icon"
       />
+      <slot v-else name="fallback">
+        <va-fallback v-bind="VaFallbackProps" @fallback="$emit('fallback')" />
+      </slot>
     </slot>
   </div>
 </template>