opendesk

1<template>
2  <div class="flex items-center gap-2">
3    <Avatar
4      :label="user.name"
5      :image="user.user_image"
6      v-bind="$attrs"
7      v-if="!hideAvatar"
8    />
9    <span
10      v-if="expand"
11      class="truncate capitalize text-base-medium text-ink-gray-9"
12      :class="{
13        'font-medium': strong,
14      }"
15    >
16      {{ name }}
17    </span>
18  </div>
19</template>
20<script setup lang="ts">
21import { useUserStore } from "@/stores/user";
22import { Avatar } from "frappe-ui";
23import { computed } from "vue";
24const userStore = useUserStore();
25
26const props = defineProps({
27  name: {
28    type: String,
29    required: true,
30  },
31  expand: {
32    type: Boolean,
33    default: false,
34  },
35  strong: {
36    type: Boolean,
37    default: false,
38  },
39  hideAvatar: {
40    type: Boolean,
41    default: false,
42  },
43});
44const user = computed(() => userStore.getUser(props.name));
45</script>
46