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 "neutral";
|
|
default:
|
|
return "neutral";
|
|
}
|
|
});
|
|
|
|
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>
|