64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
|
<div class="space-y-1.5">
|
|
<p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Échelle</p>
|
|
<!-- Inline sur 1 ligne — même pattern que FonctionFilter -->
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1.5">
|
|
<label
|
|
v-for="option in ECHELLES"
|
|
:key="option"
|
|
class="flex items-center gap-1.5 cursor-pointer select-none transition-opacity"
|
|
>
|
|
<!-- Case carrée -->
|
|
<span
|
|
class="flex items-center justify-center shrink-0 transition-all"
|
|
style="width: 18px; height: 18px; border: 1.5px solid; border-radius: 3px;"
|
|
:style="isSelected(option)
|
|
? 'background: var(--nav-primary); border-color: var(--nav-primary); color: #ffffff;'
|
|
: 'background: var(--nav-bg-alt); border-color: rgba(26,34,56,0.25); color: transparent;'"
|
|
>
|
|
<svg v-if="isSelected(option)" width="11" height="11" viewBox="0 0 12 12" fill="none">
|
|
<polyline points="2,6 5,9 10,3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<!-- Label -->
|
|
<span
|
|
class="text-sm leading-tight"
|
|
:style="isSelected(option) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
|
|
>{{ option }}</span>
|
|
<!-- Input réel (masqué) -->
|
|
<input
|
|
type="checkbox"
|
|
class="sr-only"
|
|
:checked="isSelected(option)"
|
|
@change="toggle(option)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const ECHELLES = ['National', 'Régional', 'Local'] as const
|
|
|
|
const props = defineProps<{
|
|
modelValue: string[]
|
|
counts: Record<string, number>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string[]]
|
|
}>()
|
|
|
|
function isSelected(option: string): boolean {
|
|
return props.modelValue.includes(option)
|
|
}
|
|
|
|
function toggle(option: string) {
|
|
if (isSelected(option)) {
|
|
emit('update:modelValue', props.modelValue.filter(v => v !== option))
|
|
} else {
|
|
emit('update:modelValue', [...props.modelValue, option])
|
|
}
|
|
}
|
|
</script>
|