From 2f3b59ef6a9907c0a2b1f2b68e65e67fcb5b4141 Mon Sep 17 00:00:00 2001
From: rev4324 <fevenant13@gmail.com>
Date: Tue, 29 Aug 2023 22:17:28 +0200
Subject: [PATCH] feat: add Avatar component

---
 apps/www/src/App.vue                          |  3 ++
 .../registry/default/examples/AvatarDemo.vue  | 10 ++++++
 .../lib/registry/default/ui/avatar/Avatar.vue | 33 +++++++++++++++++++
 .../default/ui/avatar/AvatarFallback.vue      | 28 ++++++++++++++++
 .../default/ui/avatar/AvatarImage.vue         | 29 ++++++++++++++++
 .../lib/registry/default/ui/avatar/index.ts   |  9 +++++
 6 files changed, 112 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/examples/AvatarDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/avatar/index.ts

diff --git a/apps/www/src/App.vue b/apps/www/src/App.vue
index 7b0960d1..2702efd5 100644
--- a/apps/www/src/App.vue
+++ b/apps/www/src/App.vue
@@ -4,6 +4,7 @@ import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue'
 import DialogDemo from '@/registry/default/examples/DialogDemo.vue'
 import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue'
 import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
+import AvatarDemo from '@/registry/default/examples/AvatarDemo.vue'
 </script>
 
 <template>
@@ -17,5 +18,7 @@ import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
     <AlertDialogDemo />
 
     <SelectDemo />
+
+    <AvatarDemo />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/examples/AvatarDemo.vue b/apps/www/src/lib/registry/default/examples/AvatarDemo.vue
new file mode 100644
index 00000000..df44ab90
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/AvatarDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..9b70624c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { AvatarRoot as AvatarRootPrimitive, type AvatarRootProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'Avatar',
+  inheritAttrs: false,
+})
+
+const props = defineProps<AvatarRootProps>()
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarRootPrimitive
+    :class="cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      attrs.className ?? '',
+    )"
+    v-bind="{ ...attrs.rest, ...props }"
+  >
+    <slot />
+  </AvatarRootPrimitive>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..392554a6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { AvatarFallback as AvatarFallbackPrimitive, type AvatarFallbackProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn } from '@/utils'
+
+defineOptions({
+  name: 'AvatarFallback',
+  inheritAttrs: false,
+})
+
+const props = defineProps<AvatarFallbackProps>()
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarFallbackPrimitive
+    :class="cn('aspect-square h-full w-full', attrs.className ?? '')"
+    v-bind="{ ...attrs.rest, ...props }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..b0e9358d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type AvatarImageEmits, AvatarImage as AvatarImagePrimitive, type AvatarImageProps } from 'radix-vue'
+import { computed, useAttrs } from 'vue'
+import { cn, useEmitAsProps } from '@/utils'
+
+defineOptions({
+  name: 'AvatarImage',
+  inheritAttrs: false,
+})
+const props = defineProps<AvatarImageProps>()
+const emits = defineEmits<AvatarImageEmits>()
+const emitsAsProps = useEmitAsProps(emits)
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest,
+  }
+})
+</script>
+
+<template>
+  <AvatarImagePrimitive
+    :class="cn('flex h-full w-full items-center justify-center rounded-full bg-muted', attrs.className ?? '')"
+    v-bind="{ ...props, ...emitsAsProps, ...attrs.rest }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/src/lib/registry/default/ui/avatar/index.ts
new file mode 100644
index 00000000..a2526d64
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/index.ts
@@ -0,0 +1,9 @@
+import Avatar from './Avatar.vue'
+import AvatarFallback from './AvatarFallback.vue'
+import AvatarImage from './AvatarImage.vue'
+
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+}