1<template>
2 <div class="flex items-center justify-between p-5 pb-0">
3 <div class="gap-x-3 flex h-full">
4 <Avatar
5 :size="avatar.size ?? '3xl'"
6 :shape="avatar.shape ?? 'square'"
7 :label="avatar.label"
8 :image="avatar.image"
9 class="h-[52px] w-[52px]"
10 />
11 <div
12 class="flex flex-col h-full gap-1.5"
13 :class="[
14 (isMobileView || !hasDocInfo) && 'flex-1 items-center justify-center',
15 ]"
16 >
17 <div class="flex gap-2 items-center">
18 <p class="text-ink-gray-8 text-xl-medium">
19 {{ avatar.label }}
20 </p>
21 <Tooltip v-if="badge" :text="badge.tooltip ?? ''">
22 <Badge :label="badge.label" :theme="badge.theme ?? 'amber'" />
23 </Tooltip>
24 </div>
25 <div v-if="!isMobileView" class="flex items-center gap-x-1.5">
26 <template v-for="(item, index) in docInfo" :key="index">
27 <template v-if="item.condition !== false">
28 <span
29 v-if="
30 docInfo.slice(0, index).some((i) => i.condition !== false)
31 "
32 class="text-ink-gray-4"
33 >
34 •
35 </span>
36 <div class="flex items-center gap-x-1">
37 <component
38 v-if="item.icon"
39 :is="item.icon"
40 class="h-4 w-4 text-ink-gray-6"
41 />
42 <span v-if="item.value" class="text-sm text-ink-gray-8">{{
43 item.value
44 }}</span>
45 <template v-else-if="item.component">
46 <component :is="item.component" />
47 </template>
48 </div>
49 </template>
50 </template>
51 </div>
52 </div>
53 </div>
54 <slot name="actions" />
55 </div>
56</template>
57
58<script setup lang="ts">
59import { useScreenSize } from "@/composables/screen";
60import { Avatar, Badge, Tooltip, type AvatarProps } from "frappe-ui";
61import { computed } from "vue";
62
63interface DocInfoItem {
64 icon?: any;
65 value?: string;
66 component?: any;
67 condition?: boolean;
68}
69
70interface BadgeInfo {
71 label: string;
72 theme?: "gray" | "blue" | "green" | "amber" | "red";
73 tooltip?: string;
74}
75
76const props = withDefaults(
77 defineProps<{
78 avatar: AvatarProps;
79 docInfo?: DocInfoItem[];
80 badge?: BadgeInfo | null;
81 }>(),
82 {
83 docInfo: () => [],
84 badge: null,
85 }
86);
87
88const { isMobileView } = useScreenSize();
89
90const hasDocInfo = computed(() => {
91 return props.docInfo?.some((item) => item.value) ?? false;
92});
93</script>
94