54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<UBadge
|
|
:color="badgeColor"
|
|
:variant="variant"
|
|
:size="size"
|
|
>
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
|
|
|
|
interface Props {
|
|
relationship: PayRelationship
|
|
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'subtle',
|
|
size: 'sm'
|
|
})
|
|
|
|
const badgeColor = computed(() => {
|
|
switch (props.relationship) {
|
|
case 'FullyPaid':
|
|
return 'green'
|
|
case 'Hybrid':
|
|
return 'blue'
|
|
case 'Supplemental':
|
|
return 'yellow'
|
|
case 'VolunteerOrDeferred':
|
|
return 'gray'
|
|
default:
|
|
return 'gray'
|
|
}
|
|
})
|
|
|
|
const displayText = computed(() => {
|
|
switch (props.relationship) {
|
|
case 'FullyPaid':
|
|
return 'Fully Paid'
|
|
case 'Hybrid':
|
|
return 'Hybrid'
|
|
case 'Supplemental':
|
|
return 'Supplemental'
|
|
case 'VolunteerOrDeferred':
|
|
return 'Volunteer'
|
|
default:
|
|
return 'Unknown'
|
|
}
|
|
})
|
|
</script>
|