mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.3 KiB
50 lines
1.3 KiB
1 year ago
|
<script lang="ts" setup>
|
||
|
|
const props = defineProps<{
|
||
|
|
hideLabel?: boolean
|
||
|
|
size?: 'small' | 'medium'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const { user } = useGlobal()
|
||
|
|
|
||
|
|
const backgroundColor = computed(() => (user.value?.id ? stringToColour(user.value?.id) : '#FFFFFF'))
|
||
|
|
|
||
|
|
const size = computed(() => props.size || 'medium')
|
||
|
|
|
||
|
|
const firstName = computed(() => user.value?.firstname ?? '')
|
||
|
|
const lastName = computed(() => user.value?.lastname ?? '')
|
||
|
|
const email = computed(() => user.value?.email ?? '')
|
||
|
|
|
||
|
|
const usernameInitials = computed(() => {
|
||
|
|
if (firstName.value && lastName.value) {
|
||
|
|
return firstName.value[0] + lastName.value[0]
|
||
|
|
} else if (firstName.value) {
|
||
|
|
return firstName.value[0] + (firstName.value.length > 1 ? firstName.value[1] : '')
|
||
|
|
} else if (lastName.value) {
|
||
|
|
return lastName.value[0] + (lastName.value.length > 1 ? lastName.value[1] : '')
|
||
|
|
} else {
|
||
|
|
return email.value[0] + email.value[1]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="flex nc-user-avatar"
|
||
|
|
:class="{
|
||
|
|
'min-w-4 min-h-4': size === 'small',
|
||
|
|
'min-w-6 min-h-6': size === 'medium',
|
||
|
|
}"
|
||
|
|
:style="{ backgroundColor }"
|
||
|
|
>
|
||
|
|
<template v-if="!props.hideLabel">
|
||
|
|
{{ usernameInitials }}
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.nc-user-avatar {
|
||
|
|
@apply rounded-full text-xs flex items-center justify-center text-white uppercase;
|
||
|
|
}
|
||
|
|
</style>
|