55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import type { ActivityChip, ChipKey } from '@/lib/activity'
|
|
|
|
defineProps<{
|
|
chips: ActivityChip[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
remove: [key: ChipKey]
|
|
clear: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="chips.length > 0"
|
|
data-testid="activity-chips"
|
|
class="flex flex-wrap items-center gap-2"
|
|
>
|
|
<UBadge
|
|
v-for="chip in chips"
|
|
:key="chip.key"
|
|
color="neutral"
|
|
variant="subtle"
|
|
data-testid="activity-chip"
|
|
:ui="{
|
|
base: 'h-8 gap-1 border border-default bg-elevated py-0 ps-2 pe-1 text-xs font-medium text-highlighted ring-0 md:h-6',
|
|
}"
|
|
>
|
|
{{ chip.label }}
|
|
<template #trailing>
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
icon="i-lucide-x"
|
|
:aria-label="t('Remove filter {0}', [chip.label])"
|
|
class="size-5 justify-center p-0 text-muted hover:bg-accented hover:text-highlighted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
|
|
:ui="{ leadingIcon: 'size-3' }"
|
|
@click="emit('remove', chip.key)"
|
|
/>
|
|
</template>
|
|
</UBadge>
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
class="h-11 px-1.5 text-xs font-medium text-highlighted underline underline-offset-3 hover:bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary md:h-6"
|
|
@click="emit('clear')"
|
|
>
|
|
{{ t('Clear all') }}
|
|
</UButton>
|
|
</div>
|
|
</template>
|