| 1 | <template> |
| 2 | <Badge :color="getSeverityColor(severity)" type="splitted" bright> |
| 3 | <template #iconLeft> |
| 4 | <Icon :name="getSeverityIcon(severity)" :size="14" /> |
| 5 | </template> |
| 6 | <template #label>{{ severity }}</template> |
| 7 | <template #value>Severity</template> |
| 8 | </Badge> |
| 9 | </template> |
| 10 | |
| 11 | <script setup lang="ts"> |
| 12 | import type { BadgeColor } from "@/components/common/Badge.vue" |
| 13 | import Badge from "@/components/common/Badge.vue" |
| 14 | import Icon from "@/components/common/Icon.vue" |
| 15 | |
| 16 | const { severity } = defineProps<{ severity: string }>() |
| 17 | |
| 18 | function getSeverityColor(severity: string): BadgeColor | undefined { |
| 19 | switch (severity.toLowerCase()) { |
| 20 | case "low": |
| 21 | return "success" |
| 22 | case "medium": |
| 23 | return "warning" |
| 24 | case "high": |
| 25 | return "danger" |
| 26 | case "critical": |
| 27 | return "danger" |
| 28 | default: |
| 29 | return undefined |
| 30 | } |
| 31 | } |
| 32 | |
| 33 | function getSeverityIcon(severity: string): string { |
| 34 | switch (severity.toLowerCase()) { |
| 35 | case "low": |
| 36 | return "carbon:warning-alt" |
| 37 | case "medium": |
| 38 | return "carbon:warning" |
| 39 | case "high": |
| 40 | return "carbon:warning-filled" |
| 41 | case "critical": |
| 42 | return "carbon:error-filled" |
| 43 | default: |
| 44 | return "carbon:warning" |
| 45 | } |
| 46 | } |
| 47 | </script> |