feat(Avatar): new component

playground/pages/avatar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-1.5">
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xs" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xs" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xs" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="sm" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="md" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="lg" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xl" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xl" />
+      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xl" />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UAvatar icon="i-heroicons-photo" size="3xs" />
+      <UAvatar icon="i-heroicons-photo" size="2xs" />
+      <UAvatar icon="i-heroicons-photo" size="xs" />
+      <UAvatar icon="i-heroicons-photo" size="sm" />
+      <UAvatar icon="i-heroicons-photo" size="md" />
+      <UAvatar icon="i-heroicons-photo" size="lg" />
+      <UAvatar icon="i-heroicons-photo" size="xl" />
+      <UAvatar icon="i-heroicons-photo" size="2xl" />
+      <UAvatar icon="i-heroicons-photo" size="3xl" />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UAvatar alt="Benjamin Canac" size="3xs" />
+      <UAvatar alt="Benjamin Canac" size="2xs" />
+      <UAvatar alt="Benjamin Canac" size="xs" />
+      <UAvatar alt="Benjamin Canac" size="sm" />
+      <UAvatar alt="Benjamin Canac" size="md" />
+      <UAvatar alt="Benjamin Canac" size="lg" />
+      <UAvatar alt="Benjamin Canac" size="xl" />
+      <UAvatar alt="Benjamin Canac" size="2xl" />
+      <UAvatar alt="Benjamin Canac" size="3xl" />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UAvatar fallback="+1" size="3xs" />
+      <UAvatar fallback="+1" size="2xs" />
+      <UAvatar fallback="+1" size="xs" />
+      <UAvatar fallback="+1" size="sm" />
+      <UAvatar fallback="+1" size="md" />
+      <UAvatar fallback="+1" size="lg" />
+      <UAvatar fallback="+1" size="xl" />
+      <UAvatar fallback="+1" size="2xl" />
+      <UAvatar fallback="+1" size="3xl" />
+    </div>
+  </div>
+</template>

src/runtime/components/Avatar.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AvatarFallbackProps, AvatarRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar'
+import UIcon from './Icon.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends Omit<AvatarRootProps, 'asChild'>, Omit<AvatarFallbackProps, 'as' | 'asChild'> {
+  src?: string
+  alt?: string
+  icon?: string
+  fallback?: string
+  size?: AvatarVariants['size']
+  class?: any
+  ui?: Partial<typeof avatar.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<AvatarProps>()
+
+const forwardRoot = useForwardProps(reactivePick(props, 'as'))
+const forwardFallback = useForwardProps(reactivePick(props, 'delayMs'))
+
+const fallback = computed(() => props.fallback || (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 })">
+    <AvatarImage v-if="src" :src="src" :alt="alt" :class="ui.image()" />
+    <AvatarFallback as-child v-bind="forwardFallback">
+      <UIcon v-if="icon" :name="icon" :class="ui.icon()" />
+      <span v-else :class="ui.fallback()">{{ fallback }}</span>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

src/theme/avatar.ts

@@ -0,0 +1,51 @@
+export default {
+  slots: {
+    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800',
+    image: 'h-full w-full rounded-[inherit] object-cover',
+    fallback: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
+    icon: 'text-gray-500 dark:text-gray-400 shrink-0'
+  },
+  variants: {
+    size: {
+      '3xs': {
+        root: 'size-4 text-[8px]',
+        icon: 'size-2'
+      },
+      '2xs': {
+        root: 'size-5 text-[10px]',
+        icon: 'size-2.5'
+      },
+      xs: {
+        root: 'size-6 text-xs',
+        icon: 'size-3'
+      },
+      sm: {
+        root: 'size-8 text-sm',
+        icon: 'size-4'
+      },
+      md: {
+        root: 'size-10 text-base',
+        icon: 'size-5'
+      },
+      lg: {
+        root: 'size-12 text-lg',
+        icon: 'size-6'
+      },
+      xl: {
+        root: 'size-14 text-xl',
+        icon: 'size-7'
+      },
+      '2xl': {
+        root: 'size-16 text-2xl',
+        icon: 'size-8'
+      },
+      '3xl': {
+        root: 'size-20 text-3xl',
+        icon: 'size-10'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+}

src/theme/index.ts

@@ -1,3 +1,4 @@
+export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'
 export { default as collapsible } from './collapsible'