forked from vikunja/frontend
91 lines
1.6 KiB
Vue
91 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type {IUser} from '@/modelTypes/IUser'
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
|
import User from '@/components/misc/user.vue'
|
|
import {computed} from 'vue'
|
|
|
|
const {
|
|
assignees,
|
|
remove,
|
|
disabled,
|
|
avatarSize = 30,
|
|
inline = false,
|
|
} = defineProps<{
|
|
assignees: IUser[],
|
|
remove?: (user: IUser) => void,
|
|
disabled?: boolean,
|
|
avatarSize?: number,
|
|
inline?: boolean,
|
|
}>()
|
|
|
|
const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="assignees-list" :class="{'is-inline': inline}">
|
|
<span
|
|
v-for="user in assignees"
|
|
class="assignee"
|
|
:key="user.id"
|
|
>
|
|
<User
|
|
:key="'user'+user.id"
|
|
:avatar-size="avatarSize"
|
|
:show-username="false"
|
|
:user="user"
|
|
:class="{'m-2': hasDelete, 'mr-3': !hasDelete}"
|
|
/>
|
|
<BaseButton
|
|
:key="'delete'+user.id"
|
|
v-if="hasDelete"
|
|
@click="remove(user)"
|
|
class="remove-assignee"
|
|
>
|
|
<icon icon="times"/>
|
|
</BaseButton>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.assignees-list {
|
|
display: flex;
|
|
|
|
&.is-inline :deep(.user) {
|
|
display: inline;
|
|
}
|
|
|
|
&:hover .assignee:not(:first-child) {
|
|
margin-left: -1rem;
|
|
}
|
|
}
|
|
|
|
.assignee {
|
|
position: relative;
|
|
transition: all $transition;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: -1.5rem;
|
|
}
|
|
|
|
:deep(.user img) {
|
|
border: 2px solid var(--white);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.remove-assignee {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 2px;
|
|
color: var(--danger);
|
|
background: var(--white);
|
|
padding: 0 4px;
|
|
display: block;
|
|
border-radius: 100%;
|
|
font-size: .75rem;
|
|
width: 18px;
|
|
height: 18px;
|
|
z-index: 100;
|
|
}
|
|
</style> |