102 lines
1.9 KiB
Vue
102 lines
1.9 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
|
|
import CardBox from '@/Components/CardBox.vue'
|
|
import BaseLevel from '@/Components/BaseLevel.vue'
|
|
import PillTag from '@/Components/PillTag.vue'
|
|
import UserAvatar from '@/Components/UserAvatar.vue'
|
|
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
login: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
email: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
date: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
})
|
|
|
|
|
|
const pillType = computed(() => {
|
|
if (props.type) {
|
|
return props.type
|
|
}
|
|
|
|
if (props.progress) {
|
|
if (props.progress >= 60) {
|
|
return 'success'
|
|
}
|
|
if (props.progress >= 40) {
|
|
return 'warning'
|
|
}
|
|
|
|
return 'danger'
|
|
}
|
|
|
|
return 'info'
|
|
})
|
|
|
|
const pillIcon = computed(() => {
|
|
return {
|
|
success: mdiTrendingUp,
|
|
warning: mdiTrendingNeutral,
|
|
danger: mdiTrendingDown,
|
|
info: mdiTrendingNeutral,
|
|
}[pillType.value]
|
|
})
|
|
|
|
const pillText = computed(() => props.text ?? `${props.progress}%`)
|
|
</script>
|
|
|
|
<template>
|
|
<CardBox
|
|
class="mb-6 last:mb-0"
|
|
hoverable
|
|
>
|
|
<BaseLevel>
|
|
<BaseLevel type="justify-start">
|
|
<UserAvatar
|
|
class="w-12 h-12 mr-6"
|
|
:username="props.name"
|
|
/>
|
|
<div class="text-center md:text-left overflow-hidden">
|
|
<h4 class="text-xl text-ellipsis ">
|
|
{{ name }}
|
|
</h4>
|
|
<p class="text-gray-500 dark:text-slate-400">
|
|
<!-- {{ date }} @ {{ login }} -->
|
|
{{ email }}
|
|
</p>
|
|
</div>
|
|
</BaseLevel>
|
|
<PillTag
|
|
:type="pillType"
|
|
:text="pillText"
|
|
small
|
|
:icon="pillIcon"
|
|
/>
|
|
</BaseLevel>
|
|
</CardBox>
|
|
</template>
|