Skip to content

Commit 8768a1c

Browse files
Flo0806Flo0806
committed
chore: cleanup styles and types
1 parent ea77dcf commit 8768a1c

5 files changed

Lines changed: 61 additions & 71 deletions

File tree

‎app/components/PackageDependencies.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { SEVERITY_LEVELS } from '~~/shared/types'
3+
import { SEVERITY_COLORS } from '~~/shared/utils/severity'
34
45
const props = defineProps<{
56
packageName: string
@@ -84,15 +85,7 @@ const vulnBreakdownText = computed(() => {
8485
v-if="vulnerabilitySummary"
8586
role="alert"
8687
class="rounded-lg border px-4 py-3 cursor-help"
87-
:class="{
88-
'border-red-500/30 bg-red-500/10 text-red-400':
89-
vulnerabilitySummary.severity === 'critical',
90-
'border-orange-500/30 bg-orange-500/10 text-orange-400':
91-
vulnerabilitySummary.severity === 'high',
92-
'border-yellow-500/30 bg-yellow-500/10 text-yellow-400':
93-
vulnerabilitySummary.severity === 'moderate',
94-
'border-blue-500/30 bg-blue-500/10 text-blue-400': vulnerabilitySummary.severity === 'low',
95-
}"
88+
:class="SEVERITY_COLORS[vulnerabilitySummary.severity]"
9689
:title="`${vulnerabilitySummary.affectedDeps} ${vulnerabilitySummary.affectedDeps === 1 ? 'dependency' : 'dependencies'} affected`"
9790
>
9891
<div class="flex items-center gap-2">

‎app/components/PackageVulnerabilities.vue‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script setup lang="ts">
2-
import type { OsvSeverityLevel, PackageVulnerabilities } from '#shared/types'
2+
import type { PackageVulnerabilities } from '#shared/types'
3+
import { SEVERITY_LEVELS } from '#shared/types'
4+
import { SEVERITY_COLORS, SEVERITY_BADGE_COLORS, getHighestSeverity } from '#shared/utils/severity'
35
46
const props = defineProps<{
57
packageName: string
@@ -38,47 +40,14 @@ const { data: vulnData, status } = useLazyAsyncData(
3840
)
3941
4042
const hasVulnerabilities = computed(() => vulnData.value.counts.total > 0)
41-
42-
// Severity color classes for the banner
43-
const severityColors: Record<OsvSeverityLevel, string> = {
44-
critical: 'text-red-400 bg-red-500/10 border-red-500/30',
45-
high: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
46-
moderate: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
47-
low: 'text-blue-400 bg-blue-500/10 border-blue-500/30',
48-
unknown: 'text-fg-muted bg-bg-subtle border-border',
49-
}
50-
51-
// Severity badge styles - greyscale theme matching the design system
52-
const severityBadgeColors: Record<OsvSeverityLevel, string> = {
53-
critical: 'bg-bg-muted border border-border text-fg',
54-
high: 'bg-bg-muted border border-border text-fg-muted',
55-
moderate: 'bg-bg-muted border border-border text-fg-muted',
56-
low: 'bg-bg-muted border border-border text-fg-subtle',
57-
unknown: 'bg-bg-muted border border-border text-fg-subtle',
58-
}
59-
60-
// Expand/collapse state
6143
const isExpanded = shallowRef(false)
44+
const highestSeverity = computed(() => getHighestSeverity(vulnData.value.counts))
6245
63-
// Get highest severity for banner color
64-
const highestSeverity = computed<OsvSeverityLevel>(() => {
65-
const counts = vulnData.value.counts
66-
if (counts.critical > 0) return 'critical'
67-
if (counts.high > 0) return 'high'
68-
if (counts.moderate > 0) return 'moderate'
69-
if (counts.low > 0) return 'low'
70-
return 'unknown'
71-
})
72-
73-
// Summary text for collapsed view
7446
const summaryText = computed(() => {
75-
const counts = vulnData.value.counts
76-
const parts: string[] = []
77-
if (counts.critical > 0) parts.push(`${counts.critical} critical`)
78-
if (counts.high > 0) parts.push(`${counts.high} high`)
79-
if (counts.moderate > 0) parts.push(`${counts.moderate} moderate`)
80-
if (counts.low > 0) parts.push(`${counts.low} low`)
81-
return parts.join(', ')
47+
const { counts } = vulnData.value
48+
return SEVERITY_LEVELS.filter(s => counts[s] > 0)
49+
.map(s => `${counts[s]} ${s}`)
50+
.join(', ')
8251
})
8352
</script>
8453

@@ -88,7 +57,7 @@ const summaryText = computed(() => {
8857
<div
8958
role="alert"
9059
class="rounded-lg border overflow-hidden"
91-
:class="severityColors[highestSeverity]"
60+
:class="SEVERITY_COLORS[highestSeverity]"
9261
>
9362
<!-- Header (always visible, clickable to expand) -->
9463
<button
@@ -140,7 +109,7 @@ const summaryText = computed(() => {
140109
</a>
141110
<span
142111
class="px-2 py-0.5 text-xs font-mono rounded"
143-
:class="severityBadgeColors[vuln.severity]"
112+
:class="SEVERITY_BADGE_COLORS[vuln.severity]"
144113
>
145114
{{ vuln.severity }}
146115
</span>

‎app/composables/useVulnerableDependencies.ts‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import type { PackageVulnerabilities, OsvSeverityLevel } from '#shared/types'
1+
import type { PackageVulnerabilities } from '#shared/types'
22
import { maxSatisfying, prerelease } from 'semver'
33
import {
44
fetchCachedPackument,
55
constraintIncludesPrerelease,
66
isNonSemverConstraint,
77
} from './useNpmRegistry'
8+
import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
89

910
interface ResolvedPackage {
1011
name: string
@@ -127,27 +128,9 @@ export function getVulnerabilityTooltip(info: PackageVulnerabilities): string {
127128
return `${info.counts.total} ${plural}${breakdown}${idsSuffix}`
128129
}
129130

130-
/**
131-
* Get highest severity from a PackageVulnerabilities
132-
*/
133-
export function getHighestSeverity(info: PackageVulnerabilities): OsvSeverityLevel {
134-
if (info.counts.critical > 0) return 'critical'
135-
if (info.counts.high > 0) return 'high'
136-
if (info.counts.moderate > 0) return 'moderate'
137-
if (info.counts.low > 0) return 'low'
138-
return 'unknown'
139-
}
140-
141131
/**
142132
* Get CSS class for vulnerability severity
143133
*/
144134
export function getVulnerabilitySeverityClass(info: PackageVulnerabilities): string {
145-
const severityClasses: Record<OsvSeverityLevel, string> = {
146-
critical: 'text-red-500',
147-
high: 'text-orange-500',
148-
moderate: 'text-yellow-500',
149-
low: 'text-blue-500',
150-
unknown: 'text-fg-subtle',
151-
}
152-
return severityClasses[getHighestSeverity(info)]
135+
return SEVERITY_TEXT_COLORS[getHighestSeverity(info.counts)]
153136
}

‎server/api/osv/vulnerabilities.post.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ interface VulnerabilitiesResponse {
2222
* POST /api/osv/vulnerabilities
2323
* Body: { packages: [{ name: "lodash", version: "4.17.21" }, ...] }
2424
*
25-
* @returns { results: { "lodash": { count: 2, severity: "high", ... }, ... } }
25+
* @returns { results: { "lodash": { package, version, vulnerabilities, counts }, ... } }
2626
*/
2727
export default defineCachedEventHandler<Promise<VulnerabilitiesResponse>>(
2828
async event => {

‎shared/utils/severity.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { OsvSeverityLevel } from '../types'
2+
import { SEVERITY_LEVELS } from '../types'
3+
4+
/**
5+
* Color classes for severity levels (banner style)
6+
*/
7+
export const SEVERITY_COLORS: Record<OsvSeverityLevel, string> = {
8+
critical: 'text-red-400 bg-red-500/10 border-red-500/30',
9+
high: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
10+
moderate: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
11+
low: 'text-blue-400 bg-blue-500/10 border-blue-500/30',
12+
unknown: 'text-fg-muted bg-bg-subtle border-border',
13+
}
14+
15+
/**
16+
* Color classes for inline severity indicators
17+
*/
18+
export const SEVERITY_TEXT_COLORS: Record<OsvSeverityLevel, string> = {
19+
critical: 'text-red-500',
20+
high: 'text-orange-500',
21+
moderate: 'text-yellow-500',
22+
low: 'text-blue-500',
23+
unknown: 'text-fg-subtle',
24+
}
25+
26+
/**
27+
* Badge color classes for severity levels
28+
*/
29+
export const SEVERITY_BADGE_COLORS: Record<OsvSeverityLevel, string> = {
30+
critical: 'bg-bg-muted border border-border text-fg',
31+
high: 'bg-bg-muted border border-border text-fg-muted',
32+
moderate: 'bg-bg-muted border border-border text-fg-muted',
33+
low: 'bg-bg-muted border border-border text-fg-subtle',
34+
unknown: 'bg-bg-muted border border-border text-fg-subtle',
35+
}
36+
37+
/**
38+
* Get highest severity from counts
39+
*/
40+
export function getHighestSeverity(counts: Record<string, number>): OsvSeverityLevel {
41+
for (const s of SEVERITY_LEVELS) {
42+
if ((counts[s] ?? 0) > 0) return s
43+
}
44+
return 'unknown'
45+
}

0 commit comments

Comments
 (0)