Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
  JulesandClaude Sonnet 5
|
4b1340f160 | ||
|
JulesandClaude Sonnet 5
|
0903b8989b |
+32
-16
@@ -3,28 +3,44 @@
|
||||
@tailwind utilities;
|
||||
|
||||
/* ── Palette NAV V2 — Sobre institutionnel ─────────────────────────────── */
|
||||
/* --nav-* sont désormais des ALIAS vers les rôles @transformer/ui (tokens.css
|
||||
+ theme/aep.css, chargés avant ce fichier dans nuxt.config.ts).
|
||||
--nav-primary-raw, --nav-primary-solid et --nav-text-on-primary restent des
|
||||
valeurs PROPRES à nav-carte (non aliasées) :
|
||||
- le DS n'a pas de triplet RGB (--nav-primary-raw) ;
|
||||
- le --text du DS en sombre (#e8ecf5) ne correspond pas à la teinte bleu
|
||||
nuit voulue ici pour --nav-primary-solid (#c8d2f0) ;
|
||||
- --nav-text-on-primary sert de texte de contraste à la fois sur
|
||||
--nav-primary (translucide, alias DS) ET sur --nav-primary-solid (opaque,
|
||||
propre à nav-carte) — deux fonds dont la légèreté s'inverse en sombre
|
||||
(translucide ≈ fond sombre, solid = lavande claire). Le rôle --on-primary
|
||||
du DS ne colle qu'au premier cas ; l'aliaser cassait le contraste du AEP
|
||||
logo, des boutons trouver-du-taf, BandeauBas, SimulateurFeature,
|
||||
FicheDetail (texte clair sur --primary-solid clair en sombre — testé au
|
||||
pixel le 25/09, illisible). Gardé littéral = identique à la prod avant B3.
|
||||
Idem --nav-accent-soft, sans équivalent DS. (B3-M0, 2026-09-25) */
|
||||
:root {
|
||||
/* Fonds */
|
||||
--nav-bg: #f8f6f1;
|
||||
--nav-bg-alt: #eee9df;
|
||||
--nav-surface: #ffffff;
|
||||
--nav-bg: var(--bg);
|
||||
--nav-bg-alt: var(--bg-alt);
|
||||
--nav-surface: var(--surface);
|
||||
|
||||
/* Bleu nuit — 60% d'opacité sur les surfaces */
|
||||
--nav-primary-raw: 26, 34, 56;
|
||||
--nav-primary: rgba(26, 34, 56, 0.6);
|
||||
--nav-primary: var(--primary);
|
||||
--nav-primary-solid: #1a2238;
|
||||
|
||||
/* Accent safran */
|
||||
--nav-accent: #f5b342;
|
||||
--nav-accent: var(--accent);
|
||||
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
||||
|
||||
/* Texte */
|
||||
--nav-text: #1a2238;
|
||||
--nav-text-muted: rgba(26, 34, 56, 0.55);
|
||||
--nav-text: var(--text);
|
||||
--nav-text-muted: var(--text-muted);
|
||||
--nav-text-on-primary: #f8f6f1;
|
||||
|
||||
/* Typographie */
|
||||
--nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--nav-font: var(--font-body);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -58,25 +74,25 @@
|
||||
|
||||
/* Focus ring accessibilité */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--nav-accent);
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Dark mode ──────────────────────────────────────────────────────────── */
|
||||
.dark {
|
||||
--nav-bg: #111520;
|
||||
--nav-bg-alt: #1e2538;
|
||||
--nav-surface: #1a2238;
|
||||
--nav-bg: var(--bg);
|
||||
--nav-bg-alt: var(--bg-alt);
|
||||
--nav-surface: var(--surface);
|
||||
|
||||
--nav-primary-raw: 200, 210, 240;
|
||||
--nav-primary: rgba(200, 210, 240, 0.15);
|
||||
--nav-primary: var(--primary);
|
||||
--nav-primary-solid: #c8d2f0;
|
||||
|
||||
--nav-accent: #f5b342;
|
||||
--nav-accent: var(--accent);
|
||||
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
||||
|
||||
--nav-text: #e8ecf5;
|
||||
--nav-text-muted: rgba(200, 210, 240, 0.55);
|
||||
--nav-text: var(--text);
|
||||
--nav-text-muted: var(--text-muted);
|
||||
--nav-text-on-primary: #111520;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<component
|
||||
:is="as"
|
||||
:type="as === 'button' ? 'button' : undefined"
|
||||
class="chip"
|
||||
:class="[`chip--${variant}`, { 'chip--active': active }]"
|
||||
:aria-pressed="as === 'button' ? active : undefined"
|
||||
@click="as === 'button' && emit('toggle')"
|
||||
>
|
||||
<span class="chip__label">{{ label }}</span>
|
||||
<span v-if="count !== undefined" class="chip__count">{{ count }}</span>
|
||||
<button
|
||||
v-if="removable"
|
||||
type="button"
|
||||
class="chip__remove"
|
||||
:aria-label="`Retirer ${label}`"
|
||||
@click.stop="emit('remove')"
|
||||
>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
label: string
|
||||
variant?: 'echelle' | 'fonction' | 'posture'
|
||||
active?: boolean
|
||||
count?: number
|
||||
as?: 'button' | 'span'
|
||||
removable?: boolean
|
||||
}>(),
|
||||
{
|
||||
variant: 'fonction',
|
||||
active: false,
|
||||
count: undefined,
|
||||
as: 'button',
|
||||
removable: false,
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggle: []
|
||||
remove: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
padding: var(--space-2xs) var(--space-sm);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: var(--lh-tight);
|
||||
font-weight: var(--fw-medium);
|
||||
border: 1.5px solid transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
min-height: 32px;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
transition: background-color var(--dur-fast) var(--ease-out),
|
||||
color var(--dur-fast) var(--ease-out),
|
||||
border-color var(--dur-fast) var(--ease-out),
|
||||
transform var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chip {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.chip:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Échelle : outline bleu, fond transparent, actif = plein ────────────── */
|
||||
.chip--echelle {
|
||||
border-color: var(--primary);
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
}
|
||||
.chip--echelle:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
.chip--echelle.chip--active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
.chip--echelle.chip--active:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* ── Fonction/hashtag : pleine bleu, inactif = bg-alt ────────────────────── */
|
||||
.chip--fonction {
|
||||
border-color: transparent;
|
||||
background: var(--bg-alt);
|
||||
color: var(--text);
|
||||
}
|
||||
.chip--fonction:hover {
|
||||
background: var(--primary-hover);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
.chip--fonction.chip--active {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
.chip--fonction.chip--active:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* ── Posture (préparée pour plus tard) : outline safran ──────────────────── */
|
||||
.chip--posture {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
}
|
||||
.chip--posture:hover {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
.chip--posture.chip--active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
.chip__count {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.chip__remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.chip__remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.chip__remove:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="chip-group" role="group" :aria-label="ariaLabel">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
ariaLabel: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chip-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2xs) var(--space-xs);
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +1,16 @@
|
||||
<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
|
||||
<ChipGroup aria-label="Filtrer par échelle">
|
||||
<Chip
|
||||
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="option"
|
||||
variant="echelle"
|
||||
:active="isSelected(option)"
|
||||
@toggle="toggle(option)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</ChipGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,32 +1,17 @@
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction</p>
|
||||
<div class="space-y-1">
|
||||
<button
|
||||
<ChipGroup aria-label="Filtrer par fonction">
|
||||
<Chip
|
||||
v-for="fn in FONCTIONS"
|
||||
:key="fn"
|
||||
@click="toggle(fn)"
|
||||
:aria-pressed="modelValue.includes(fn)"
|
||||
class="flex items-center gap-2.5 w-full rounded px-1 py-0.5 transition-all text-left hover:opacity-80"
|
||||
:style="modelValue.includes(fn) ? 'background: rgba(26,34,56,0.06);' : ''"
|
||||
>
|
||||
<!-- Case : affiche le rang de priorité si actif, sinon le nombre d'orgs -->
|
||||
<span
|
||||
class="flex items-center justify-center shrink-0 text-xs font-bold transition-all"
|
||||
style="width: 24px; height: 24px; border: 1.5px solid; border-radius: 4px;"
|
||||
:style="modelValue.includes(fn)
|
||||
? 'background: var(--nav-primary); border-color: var(--nav-primary); color: var(--nav-text-on-primary);'
|
||||
: 'background: var(--nav-bg-alt); border-color: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
>
|
||||
{{ modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0) }}
|
||||
</span>
|
||||
<!-- Label -->
|
||||
<span
|
||||
class="text-sm leading-tight"
|
||||
:style="modelValue.includes(fn) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
|
||||
>{{ fn }}</span>
|
||||
</button>
|
||||
</div>
|
||||
:label="fn"
|
||||
variant="fonction"
|
||||
:active="modelValue.includes(fn)"
|
||||
:count="modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0)"
|
||||
@toggle="toggle(fn)"
|
||||
/>
|
||||
</ChipGroup>
|
||||
<p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
|
||||
{{ modelValue.length }} actif{{ modelValue.length > 1 ? 's' : '' }}
|
||||
<button @click="emit('update:modelValue', [])" class="ml-2 underline hover:opacity-70">Effacer</button>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
|
||||
<!-- Filtres famille -->
|
||||
<!-- Filtres famille — couleurs propres par famille (hors grammaire dimension Chip, non touché B3-M1) -->
|
||||
<div style="margin-bottom: 6px;">
|
||||
<span class="filter-label">FAMILLES</span>
|
||||
<div class="chips-row">
|
||||
@@ -25,17 +25,16 @@
|
||||
style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
|
||||
>{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
|
||||
</div>
|
||||
<div v-if="hashtagsVisible" class="chips-row">
|
||||
<span
|
||||
<ChipGroup v-if="hashtagsVisible" aria-label="Filtrer par hashtag">
|
||||
<Chip
|
||||
v-for="tag in props.allHashtags"
|
||||
:key="tag"
|
||||
class="chip chip-small"
|
||||
:style="selectedHashtags.includes(tag)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggleHashtag(tag)"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
:label="tag"
|
||||
variant="fonction"
|
||||
:active="selectedHashtags.includes(tag)"
|
||||
@toggle="toggleHashtag(tag)"
|
||||
/>
|
||||
</ChipGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -93,5 +92,4 @@ function toggleHashtag(tag: string) {
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
.chip-small { font-size: 0.7rem; padding: 2px 8px; }
|
||||
</style>
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<NuxtLink
|
||||
:to="`/fiche/${org.Id}`"
|
||||
class="block bg-white rounded-xl shadow-sm border border-warm-200 hover:shadow-md hover:border-sage-300 transition-all duration-200 p-5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3 mb-2">
|
||||
<h2 class="font-semibold text-gray-900 text-base leading-snug">{{ org.nom }}</h2>
|
||||
<TypeBadge v-if="org.type_org" :type="org.type_org" class="shrink-0 mt-0.5" />
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-3 line-clamp-2">
|
||||
{{ org.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="tags.length" class="flex flex-wrap gap-1.5">
|
||||
<TagBadge
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
:tag="tag"
|
||||
@click="$emit('filter-tag', tag)"
|
||||
/>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
org: {
|
||||
Id: number
|
||||
nom: string
|
||||
type_org?: string
|
||||
description?: string
|
||||
tags?: string
|
||||
lien?: string
|
||||
}
|
||||
}>()
|
||||
|
||||
defineEmits<{ 'filter-tag': [tag: string] }>()
|
||||
|
||||
const tags = computed(() =>
|
||||
props.org.tags
|
||||
? props.org.tags.split(',').map((t) => t.trim()).filter(Boolean)
|
||||
: []
|
||||
)
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<span
|
||||
class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sage-100 text-sage-700 border border-sage-200 cursor-pointer hover:bg-sage-200 transition-colors"
|
||||
@click.prevent="$emit('click', tag)"
|
||||
>{{ tag }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ tag: string }>()
|
||||
defineEmits<{ click: [tag: string] }>()
|
||||
</script>
|
||||
@@ -1,6 +1,8 @@
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/tailwindcss'],
|
||||
css: [
|
||||
'@transformer/ui/tokens.css',
|
||||
'@transformer/ui/theme/aep.css',
|
||||
'~/assets/css/main.css',
|
||||
'leaflet/dist/leaflet.css',
|
||||
'leaflet.markercluster/dist/MarkerCluster.css',
|
||||
|
||||
Generated
+6
@@ -8,6 +8,7 @@
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.23",
|
||||
"@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"d3": "^7.9.0",
|
||||
@@ -3625,6 +3626,11 @@
|
||||
"vue": "^2.7.0 || ^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@transformer/ui": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "git+https://git.trans-former.fr/jules/design-system.git#057de406c804315e09d28fb26f10941d61e461b1",
|
||||
"license": "UNLICENSED"
|
||||
},
|
||||
"node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.23",
|
||||
"@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"d3": "^7.9.0",
|
||||
|
||||
+7
-6
@@ -87,14 +87,15 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
|
||||
<div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
|
||||
<span
|
||||
<ChipGroup v-if="structure.hashtags.length" class="mt-1" :aria-label="`Hashtags de ${structure.nom}`">
|
||||
<Chip
|
||||
v-for="tag in structure.hashtags.slice(0, 2)"
|
||||
:key="tag"
|
||||
class="text-xs"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
as="span"
|
||||
variant="fonction"
|
||||
:label="tag"
|
||||
/>
|
||||
</ChipGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+20
-20
@@ -185,36 +185,36 @@
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<!-- Filtres ÉCHELLE — chips style FONCTION -->
|
||||
<!-- Filtres ÉCHELLE — Chip variant echelle (B3-M1 : alignées sur EchelleFilter.vue,
|
||||
dupliquées ici car la sheet mobile ne passe pas par NavSidebar) -->
|
||||
<div class="mt-2">
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
<ChipGroup aria-label="Filtrer par échelle">
|
||||
<Chip
|
||||
v-for="opt in ECHELLES"
|
||||
:key="opt"
|
||||
class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="echelle.includes(opt)
|
||||
? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
|
||||
: 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
|
||||
@click="toggleEchelle(opt)"
|
||||
>{{ opt }}</span>
|
||||
</div>
|
||||
:label="opt"
|
||||
variant="echelle"
|
||||
:active="echelle.includes(opt)"
|
||||
@toggle="toggleEchelle(opt)"
|
||||
/>
|
||||
</ChipGroup>
|
||||
</div>
|
||||
|
||||
<!-- Filtres FONCTION — chips flex-wrap -->
|
||||
<!-- Filtres FONCTION — Chip variant fonction (B3-M1, idem) -->
|
||||
<div class="mt-2">
|
||||
<span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">FONCTION</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
<ChipGroup aria-label="Filtrer par fonction">
|
||||
<Chip
|
||||
v-for="fn in FONCTIONS"
|
||||
:key="fn"
|
||||
class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
|
||||
:style="fonctions.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="toggleFonction(fn)"
|
||||
>{{ fn }}</span>
|
||||
</div>
|
||||
:label="fn"
|
||||
variant="fonction"
|
||||
:active="fonctions.includes(fn)"
|
||||
:count="fonctions.includes(fn) ? (fonctions.indexOf(fn) + 1) : (fonctionCount[fn] ?? 0)"
|
||||
@toggle="toggleFonction(fn)"
|
||||
/>
|
||||
</ChipGroup>
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
||||
+11
-9
@@ -11,16 +11,18 @@ export default {
|
||||
extend: {
|
||||
colors: {
|
||||
/* Palette NAV V2 — Sobre institutionnel */
|
||||
/* Pointent vers les variables CSS --nav-* (alias des rôles @transformer/ui,
|
||||
voir assets/css/main.css) pour rester cohérentes clair/sombre. (B3-M0) */
|
||||
nav: {
|
||||
bg: '#f8f6f1',
|
||||
'bg-alt':'#eee9df',
|
||||
surface: '#ffffff',
|
||||
primary: 'rgba(26, 34, 56, 0.6)',
|
||||
'primary-solid': '#1a2238',
|
||||
accent: '#f5b342',
|
||||
text: '#1a2238',
|
||||
'text-muted': 'rgba(26, 34, 56, 0.55)',
|
||||
'text-on-primary': '#f8f6f1',
|
||||
bg: 'var(--nav-bg)',
|
||||
'bg-alt':'var(--nav-bg-alt)',
|
||||
surface: 'var(--nav-surface)',
|
||||
primary: 'var(--nav-primary)',
|
||||
'primary-solid': 'var(--nav-primary-solid)',
|
||||
accent: 'var(--nav-accent)',
|
||||
text: 'var(--nav-text)',
|
||||
'text-muted': 'var(--nav-text-muted)',
|
||||
'text-on-primary': 'var(--nav-text-on-primary)',
|
||||
},
|
||||
/* Héritage V1 — gardé pour composants existants */
|
||||
sage: {
|
||||
|
||||
Reference in New Issue
Block a user