| 1 | <template> |
| 2 | <Badge :color="getSeverityColor(severity)" type="splitted" bright> |
| 3 | <template #iconLeft> |
| 4 | <VulnerabilitySeverityIcon :severity :size="14" /> |
| 5 | </template> |
| 6 | <template #value>{{ severity }}</template> |
| 7 | </Badge> |
| 8 | </template> |
| 9 | |
| 10 | <script setup lang="ts"> |
| 11 | import type { BadgeColor } from "@/components/common/Badge.vue" |
| 12 | import Badge from "@/components/common/Badge.vue" |
| 13 | import { VulnerabilitySeverity } from "@/types/vulnerabilities.d" |
| 14 | import VulnerabilitySeverityIcon from "./VulnerabilitySeverityIcon.vue" |
| 15 | |
| 16 | const { severity } = defineProps<{ severity: VulnerabilitySeverity }>() |
| 17 | |
| 18 | function getSeverityColor(severity: string): BadgeColor | undefined { |
| 19 | const colorMap: Record<string, BadgeColor | undefined> = { |
| 20 | [VulnerabilitySeverity.Critical]: "danger", |
| 21 | [VulnerabilitySeverity.High]: "warning", |
| 22 | [VulnerabilitySeverity.Medium]: "warning", |
| 23 | [VulnerabilitySeverity.Low]: undefined |
| 24 | } |
| 25 | return colorMap[severity] |
| 26 | } |
| 27 | </script> |