37 lines
714 B
Vue
37 lines
714 B
Vue
<template>
|
|
<UBadge :color="badgeColor" :variant="variant" :size="size">
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type RiskBand = "Low" | "Medium" | "High";
|
|
|
|
interface Props {
|
|
risk: RiskBand;
|
|
variant?: "solid" | "outline" | "soft" | "subtle";
|
|
size?: "xs" | "sm" | "md" | "lg";
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: "subtle",
|
|
size: "sm",
|
|
});
|
|
|
|
const badgeColor = computed(() => {
|
|
switch (props.risk) {
|
|
case "Low":
|
|
return "green";
|
|
case "Medium":
|
|
return "yellow";
|
|
case "High":
|
|
return "red";
|
|
default:
|
|
return "neutral";
|
|
}
|
|
});
|
|
|
|
const displayText = computed(() => {
|
|
return `${props.risk} Risk`;
|
|
});
|
|
</script>
|