11732a6a4b
- Page pages/pensees-ecologiques.vue → pages/media.vue (titre "ATIS Média")
- Labels onglet/menu "Pensées" → "Média" (app.vue, agences, index, filters)
- auteurs-pensees.json reconciled avec 141 docs LightRAG (était 27)
· 28 auteurs (était 18), 64 livres, slugs corrigés (ex: bookchin-ecologie-liberte)
· 12 écoles: 8 familles FRACAS Bonpote + 4 extensions ATIS
· Labels alignés Bonpote: Écologies libertaires (ex eco-anarchisme),
Écologies anti-industrielles (ex technocritique)
· Familles Bonpote ajoutées: Capitalisme vert + Écofascismes
(corpus_status: non_ingere — fidélité carte, critique éditoriale assumée)
V2 Phase 2.3 — corpus réel reflété, alignement Bonpote initial
105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<template>
|
|
<div class="space-y-1">
|
|
<!-- Label + toggle collapse -->
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
|
|
<p class="filter-label" style="margin-bottom: 0;">
|
|
FONCTION
|
|
<span v-if="modelValue.length" style="font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.65rem; margin-left: 4px;">({{ modelValue.length }} active{{ modelValue.length > 1 ? 's' : '' }})</span>
|
|
</p>
|
|
<button
|
|
@click="toggleCollapse"
|
|
style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap;"
|
|
>{{ isOpen ? 'Replier' : 'Fonctions (' + FONCTIONS.length + ')' }}</button>
|
|
</div>
|
|
|
|
<!-- Chips (visible si ouvert ou si des fonctions sont actives) -->
|
|
<div v-if="isOpen" class="chips-row">
|
|
<span
|
|
v-for="fn in FONCTIONS"
|
|
:key="fn"
|
|
class="chip"
|
|
:style="modelValue.includes(fn)
|
|
? '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(fn)"
|
|
>{{ fn }}</span>
|
|
</div>
|
|
|
|
<!-- Effacer (visible même replié si filtres actifs) -->
|
|
<p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
|
|
<button @click="emit('update:modelValue', [])" class="underline hover:opacity-70">Effacer</button>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const FONCTIONS = [
|
|
'Juridique',
|
|
'Technique',
|
|
'Économique',
|
|
'Administratif',
|
|
'Chantier',
|
|
'Comptabilité',
|
|
'Développement',
|
|
'Formation',
|
|
"Gestion d'agence",
|
|
'Santé mentale',
|
|
] as const
|
|
|
|
const props = defineProps<{
|
|
modelValue: string[]
|
|
counts: Record<string, number>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string[]]
|
|
}>()
|
|
|
|
// Replié par défaut, ouvre automatiquement quand des filtres sont actifs
|
|
const manuallyOpen = ref(false)
|
|
|
|
const isOpen = computed(() => {
|
|
return manuallyOpen.value || props.modelValue.length > 0
|
|
})
|
|
|
|
function toggleCollapse() {
|
|
// Si des filtres actifs forcent l'ouverture, on doit gérer le cas « forcer fermer »
|
|
if (isOpen.value) {
|
|
manuallyOpen.value = false
|
|
// Si des fonctions sont actives, le computed va les réouvrir — on les efface
|
|
// Non : on laisse le choix à l'utilisateur. On toggle juste manuallyOpen.
|
|
// Quand replié avec filtres actifs, l'indicateur "(N actives)" reste visible.
|
|
} else {
|
|
manuallyOpen.value = true
|
|
}
|
|
}
|
|
|
|
function toggle(fn: string) {
|
|
if (props.modelValue.includes(fn)) {
|
|
emit('update:modelValue', props.modelValue.filter(f => f !== fn))
|
|
} else {
|
|
emit('update:modelValue', [...props.modelValue, fn])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.filter-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
color: var(--nav-text-muted);
|
|
display: block;
|
|
text-transform: uppercase;
|
|
}
|
|
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
|
|
.chip {
|
|
cursor: pointer;
|
|
padding: 3px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
transition: all 0.15s;
|
|
user-select: none;
|
|
}
|
|
</style>
|