From 037a2fc8fac102871692479888f9b3ab1126f8fa Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 11 Mar 2024 17:38:42 +0100
Subject: [PATCH] chore(Avatar): use `text` prop to prevent breaking change

---
 src/runtime/components/Avatar.vue                 | 13 +++++++------
 test/components/Avatar.spec.ts                    |  2 +-
 test/components/__snapshots__/Avatar.spec.ts.snap |  4 ++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 053b1671..fcc23fc7 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -16,7 +16,7 @@ export interface AvatarProps extends Omit<AvatarRootProps, 'asChild'>, Omit<Avat
   src?: string
   alt?: string
   icon?: string
-  fallback?: string
+  text?: string
   size?: AvatarVariants['size']
   class?: any
   ui?: Partial<typeof avatar.slots>
@@ -30,18 +30,19 @@ import { reactivePick } from '@vueuse/core'
 
 const props = defineProps<AvatarProps>()
 
-const forwardRoot = useForwardProps(reactivePick(props, 'as'))
-const forwardFallback = useForwardProps(reactivePick(props, 'delayMs'))
+const rootProps = useForwardProps(reactivePick(props, 'as'))
+const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
-const fallback = computed(() => props.fallback || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
+const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
 const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: props.size }))
 </script>
 
 <template>
-  <AvatarRoot v-bind="forwardRoot" :class="ui.root({ class: props.class })">
+  <AvatarRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
     <AvatarImage v-if="src" :src="src" :alt="alt" :class="ui.image()" />
-    <AvatarFallback as-child v-bind="forwardFallback">
+
+    <AvatarFallback as-child v-bind="fallbackProps">
       <UIcon v-if="icon" :name="icon" :class="ui.icon()" />
       <span v-else :class="ui.fallback()">{{ fallback }}</span>
     </AvatarFallback>
diff --git a/test/components/Avatar.spec.ts b/test/components/Avatar.spec.ts
index 44993275..c493c9d7 100644
--- a/test/components/Avatar.spec.ts
+++ b/test/components/Avatar.spec.ts
@@ -7,7 +7,7 @@ describe('Avatar', () => {
     ['with src', { props: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }],
     ['with alt', { props: { alt: 'Benjamin Canac' } }],
     ['with class', { props: { class: 'bg-white dark:bg-gray-900' } }],
-    ['with fallback', { props: { fallback: '+1' } }],
+    ['with text', { props: { text: '+1' } }],
     ['with icon', { props: { icon: 'i-heroicons-photo' } }],
     ['with size 3xs', { props: { size: '3xs' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
index 76120b93..8decc896 100644
--- a/test/components/__snapshots__/Avatar.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -4,8 +4,6 @@ exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex it
 
 exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
-exports[`Avatar > renders with fallback correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
-
 exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
 
 exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
@@ -28,4 +26,6 @@ exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-fle
 
 exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
+exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
+
 exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="leading-none text-gray-500 dark:text-gray-400 truncate font-bold"></span></span>"`;