From f1a14dd87c3e250a7eaa6729f68201201a476f9f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Nov 2024 13:01:51 +0100
Subject: [PATCH] feat(Avatar): use `NuxtImg` component when available

Resolves nuxt/ui#2078
---
 docs/content/3.components/avatar.md |  4 ++++
 src/runtime/components/Avatar.vue   | 11 ++++++-----
 src/templates.ts                    | 10 ++++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/content/3.components/avatar.md b/docs/content/3.components/avatar.md
index a856223e..bf52e130 100644
--- a/docs/content/3.components/avatar.md
+++ b/docs/content/3.components/avatar.md
@@ -11,6 +11,10 @@ links:
 
 ## Usage
 
+::tip
+The Avatar uses the `NuxtImg` component when `@nuxt/image` is installed, falling back to `img` otherwise.
+::
+
 ### Src
 
 Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index de514b27..726c7e41 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -15,9 +15,9 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'img'
+   * @defaultValue 'span'
    */
-  as?: string | object
+  as?: any
   src?: string
   alt?: string
   icon?: string
@@ -36,10 +36,11 @@ import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-
 import { reactivePick } from '@vueuse/core'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
+import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
@@ -54,10 +55,10 @@ const ui = computed(() => avatar({
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
-      :as="as"
+      :as="ImageComponent"
       :src="src"
       :alt="alt"
       v-bind="$attrs"
diff --git a/src/templates.ts b/src/templates.ts
index 517b8371..cf247f98 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -87,6 +87,16 @@ export {}
 `
   })
 
+  templates.push({
+    filename: 'ui-image-component.ts',
+    write: true,
+    getContents: ({ app }) => {
+      const image = app?.components?.find(c => c.pascalName === 'NuxtImg' && !c.filePath.includes('nuxt/dist/app'))
+
+      return image ? `export { default } from "${image.filePath}"` : 'export default "img"'
+    }
+  })
+
   return templates
 }