57 lines
No EOL
1.4 KiB
Vue
57 lines
No EOL
1.4 KiB
Vue
<template>
|
|
<UTooltip :text="tooltipText">
|
|
<UBadge
|
|
:color="badgeColor"
|
|
variant="solid"
|
|
size="sm"
|
|
class="font-medium"
|
|
>
|
|
<UIcon :name="iconName" class="w-3 h-3 mr-1" />
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</UTooltip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
coverageMinPct?: number
|
|
coverageTargetPct?: number
|
|
memberName?: string
|
|
warnIfUnder?: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
warnIfUnder: 100,
|
|
memberName: 'member'
|
|
})
|
|
|
|
const coverage = computed(() => props.coverageMinPct || 0)
|
|
|
|
const badgeColor = computed(() => {
|
|
if (coverage.value >= 100) return 'success'
|
|
if (coverage.value >= 80) return 'warning'
|
|
return 'error'
|
|
})
|
|
|
|
const iconName = computed(() => {
|
|
if (coverage.value >= 100) return 'i-heroicons-check-circle'
|
|
if (coverage.value >= 80) return 'i-heroicons-exclamation-triangle'
|
|
return 'i-heroicons-x-circle'
|
|
})
|
|
|
|
const displayText = computed(() => {
|
|
if (!props.coverageMinPct) return 'No needs set'
|
|
return `${Math.round(coverage.value)}% coverage`
|
|
})
|
|
|
|
const tooltipText = computed(() => {
|
|
if (!props.coverageMinPct) {
|
|
return `${props.memberName} hasn't set their minimum needs yet`
|
|
}
|
|
|
|
const percent = Math.round(coverage.value)
|
|
const status = coverage.value >= 100 ? 'meets' : 'covers'
|
|
|
|
return `${status} ${percent}% of ${props.memberName}'s minimum needs (incl. external income)`
|
|
})
|
|
</script> |