42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">CRITÈRES RÉGÉ</span>
|
|
<div class="flex flex-wrap gap-1">
|
|
<button
|
|
v-for="critere in CRITERES"
|
|
:key="critere.id"
|
|
type="button"
|
|
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
|
:style="modelValue.includes(critere.id)
|
|
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
|
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
|
@click="toggle(critere.id)"
|
|
>
|
|
{{ critere.label }}
|
|
<span v-if="counts && counts[critere.id] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[critere.id] }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CRITERES } from '~/types/pratique'
|
|
|
|
const props = defineProps<{
|
|
modelValue: number[]
|
|
counts?: Record<number, number>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: number[]]
|
|
}>()
|
|
|
|
function toggle(id: number) {
|
|
if (props.modelValue.includes(id)) {
|
|
emit('update:modelValue', props.modelValue.filter(v => v !== id))
|
|
} else {
|
|
emit('update:modelValue', [...props.modelValue, id])
|
|
}
|
|
}
|
|
</script>
|