feat: added MultipleAvatar component
This commit is contained in:
parent
c1d51ba188
commit
9a4a7658b9
20
frontend/src/components/MultipleAvatar.vue
Normal file
20
frontend/src/components/MultipleAvatar.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="avatars?.length" class="mr-1.5 flex flex-row-reverse items-center cursor-pointer">
|
||||||
|
<Tooltip :text="avatar.name" v-for="avatar in reverseAvatars" :key="avatar.name">
|
||||||
|
<Avatar
|
||||||
|
class="-mr-1.5 transform border-2 border-white transition hover:z-10 hover:scale-125"
|
||||||
|
shape="circle"
|
||||||
|
:image="avatar.image"
|
||||||
|
:label="avatar.label"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Avatar, Tooltip } from 'frappe-ui'
|
||||||
|
import { computed, defineModel } from 'vue'
|
||||||
|
|
||||||
|
const avatars = defineModel()
|
||||||
|
const reverseAvatars = computed(() => avatars.value.reverse())
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user