Files
dockhand/lib/components/VulnerabilityCriteriaSelector.svelte
Jarek Krochmalski 62e3c6439e Initial commit
2025-12-28 21:16:03 +01:00

86 lines
2.4 KiB
Svelte

<script lang="ts">
import * as Select from '$lib/components/ui/select';
import { Shield, ShieldOff, ShieldAlert, ShieldX } from 'lucide-svelte';
export type VulnerabilityCriteria = 'never' | 'any' | 'critical_high' | 'critical' | 'more_than_current';
interface Props {
value: VulnerabilityCriteria;
onchange?: (value: VulnerabilityCriteria) => void;
class?: string;
}
let {
value = $bindable(),
onchange,
class: className = ''
}: Props = $props();
</script>
<Select.Root
type="single"
bind:value={value}
onValueChange={(v) => {
if (v) {
value = v as VulnerabilityCriteria;
onchange?.(value);
}
}}
>
<Select.Trigger class="w-full h-9 {className}">
<span class="flex items-center gap-2">
{#if value === 'never'}
<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
<span>Never block</span>
{:else if value === 'any'}
<ShieldAlert class="w-3.5 h-3.5 text-amber-500" />
<span>Any vulnerabilities</span>
{:else if value === 'critical_high'}
<ShieldX class="w-3.5 h-3.5 text-orange-500" />
<span>Critical or high</span>
{:else if value === 'critical'}
<ShieldX class="w-3.5 h-3.5 text-red-500" />
<span>Critical only</span>
{:else if value === 'more_than_current'}
<Shield class="w-3.5 h-3.5 text-blue-500" />
<span>More than current image</span>
{:else}
<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
<span>Never block</span>
{/if}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="never">
<div class="flex items-center gap-2">
<ShieldOff class="w-3.5 h-3.5 text-muted-foreground" />
<span>Never block</span>
</div>
</Select.Item>
<Select.Item value="any">
<div class="flex items-center gap-2">
<ShieldAlert class="w-3.5 h-3.5 text-amber-500" />
<span>Any vulnerabilities</span>
</div>
</Select.Item>
<Select.Item value="critical_high">
<div class="flex items-center gap-2">
<ShieldX class="w-3.5 h-3.5 text-orange-500" />
<span>Critical or high</span>
</div>
</Select.Item>
<Select.Item value="critical">
<div class="flex items-center gap-2">
<ShieldX class="w-3.5 h-3.5 text-red-500" />
<span>Critical only</span>
</div>
</Select.Item>
<Select.Item value="more_than_current">
<div class="flex items-center gap-2">
<Shield class="w-3.5 h-3.5 text-blue-500" />
<span>More than current image</span>
</div>
</Select.Item>
</Select.Content>
</Select.Root>