1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <script setup lang="ts">
| import type { ClassType } from '@vben-core/typings';
| import type {
| AvatarFallbackProps,
| AvatarImageProps,
| AvatarRootProps,
| } from 'radix-vue';
|
| import { computed } from 'vue';
|
| import { Avatar, AvatarFallback, AvatarImage } from '../../ui';
|
| interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
| alt?: string;
| class?: ClassType;
| dot?: boolean;
| dotClass?: ClassType;
| }
|
| defineOptions({
| inheritAttrs: false,
| });
|
| const props = withDefaults(defineProps<Props>(), {
| alt: 'avatar',
| as: 'button',
| dot: false,
| dotClass: 'bg-green-500',
| });
|
| const text = computed(() => {
| return props.alt.slice(-2).toUpperCase();
| });
| </script>
|
| <template>
| <div :class="props.class" class="relative flex flex-shrink-0 items-center">
| <Avatar :class="props.class" class="size-full">
| <AvatarImage :alt="alt" :src="src" />
| <AvatarFallback>{{ text }}</AvatarFallback>
| </Avatar>
| <span
| v-if="dot"
| :class="dotClass"
| class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
| >
| </span>
| </div>
| </template>
|
|
