61 lines
2.1 KiB
Vue
61 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Groupe Europe -->
|
|
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">PAYS — EUROPE</span>
|
|
<div class="flex flex-wrap gap-1 mb-2">
|
|
<button
|
|
v-for="code in EUROPE_CODES"
|
|
:key="code"
|
|
type="button"
|
|
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
|
:style="modelValue.includes(code)
|
|
? '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(code)"
|
|
>
|
|
{{ PAYS_LABELS[code] ?? code }}
|
|
<span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Groupe Outre-mer -->
|
|
<span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">OUTRE-MER</span>
|
|
<div class="flex flex-wrap gap-1">
|
|
<button
|
|
v-for="code in OUTREMER_CODES"
|
|
:key="code"
|
|
type="button"
|
|
class="px-2 py-0.5 rounded-full text-xs transition-all"
|
|
:style="modelValue.includes(code)
|
|
? '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(code)"
|
|
>
|
|
{{ PAYS_LABELS[code] ?? code }}
|
|
<span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { EUROPE_CODES, OUTREMER_CODES, PAYS_LABELS } from '~/types/pratique'
|
|
|
|
const props = defineProps<{
|
|
modelValue: string[]
|
|
counts?: Record<string, number>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string[]]
|
|
}>()
|
|
|
|
function toggle(code: string) {
|
|
if (props.modelValue.includes(code)) {
|
|
emit('update:modelValue', props.modelValue.filter(v => v !== code))
|
|
} else {
|
|
emit('update:modelValue', [...props.modelValue, code])
|
|
}
|
|
}
|
|
</script>
|