davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import type { FilterChip } from '#shared/types/preferences'
3
4defineProps<{
5 chips: FilterChip[]
6}>()
7
8const emit = defineEmits<{
9 remove: [chip: FilterChip]
10 clearAll: []
11}>()
12</script>
13
14<template>
15 <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
16 <TransitionGroup name="chip">
17 <TagStatic v-for="chip in chips" :key="chip.id" class="gap-2 pe-1">
18 <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
19 <span class="max-w-32 truncate">{{
20 Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
21 }}</span>
22 <button
23 type="button"
24 class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
25 :aria-label="$t('filters.remove_filter', { label: chip.label })"
26 @click="emit('remove', chip)"
27 >
28 <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
29 </button>
30 </TagStatic>
31 </TransitionGroup>
32
33 <button
34 v-if="chips.length > 1"
35 type="button"
36 class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
37 @click="emit('clearAll')"
38 >
39 {{ $t('filters.clear_all') }}
40 </button>
41 </div>
42</template>
43
44<style scoped>
45.chip-enter-active,
46.chip-leave-active {
47 transition:
48 opacity 0.2s ease,
49 transform 0.2s ease;
50}
51
52.chip-enter-from,
53.chip-leave-to {
54 opacity: 0;
55 transform: scale(0.8);
56}
57
58.chip-move {
59 transition: transform 0.2s ease;
60}
61</style>