feat(b3): M2 — FicheMiniCard + adaptateur Org/Structure, story de test

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-25 12:10:54 +02:00
parent 4b1340f160
commit b2b8c13fee
3 changed files with 337 additions and 0 deletions
@@ -0,0 +1,150 @@
+<!--
+  Page de dev — story de test FicheMiniCard (B3-M2)
+  Sert uniquement à la vérification visuelle. Aucun lien vers cette page
+  nulle part dans l'app (pas dans app.vue, pas dans les pages) : navigation
+  directe par URL uniquement (/dev/fiche-mini-card).
+-->
+<template>
+  <div class="story">
+    <h1 class="story__title">FicheMiniCard — story de test (B3-M2)</h1>
+
+    <section class="story__section">
+      <h2 class="story__heading">Org — cas nominal</h2>
+      <div class="story__grid">
+        <FicheMiniCard :fiche="orgNominal" @open="log('org-nominal')" />
+      </div>
+    </section>
+
+    <section class="story__section">
+      <h2 class="story__heading">Structure — cas nominal</h2>
+      <div class="story__grid">
+        <FicheMiniCard :fiche="structureNominal" @open="log('structure-nominal')" />
+      </div>
+    </section>
+
+    <section class="story__section">
+      <h2 class="story__heading">Cas limites</h2>
+      <div class="story__grid">
+        <FicheMiniCard :fiche="nomLong" @open="log('nom-long')" />
+        <FicheMiniCard :fiche="sansDescription" @open="log('sans-description')" />
+        <FicheMiniCard :fiche="sansChips" @open="log('sans-chips')" />
+        <FicheMiniCard :fiche="sansGeoloc" @open="log('sans-geoloc')" />
+      </div>
+    </section>
+
+    <section class="story__section">
+      <h2 class="story__heading">Dernier événement « open »</h2>
+      <p class="story__log">{{ lastOpen ?? '(aucun clic pour le moment)' }}</p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MiniFiche } from '~/composables/useFicheAdapter'
+
+definePageMeta({ layout: false })
+
+const lastOpen = ref<string | null>(null)
+function log(label: string) {
+  lastOpen.value = label
+}
+
+const orgNominal: MiniFiche = {
+  id: 1,
+  nom: 'Réseau Bâti Vivant',
+  resume: 'Un réseau national d\'accompagnement juridique et technique pour les collectifs d\'auto-construction.',
+  chips: ['Juridique', 'Technique'],
+  echelle: 'National',
+  geoloc: true,
+  kind: 'org',
+}
+
+const structureNominal: MiniFiche = {
+  id: 'f1-rotor',
+  nom: 'Rotor',
+  resume: 'Rotor invente en Belgique le protocole de la déconstruction sélective comme geste politique contre la culture du tout-neuf.',
+  chips: ['#reemploi-structurel', '#plateforme-materiaux'],
+  geoloc: true,
+  kind: 'structure',
+}
+
+const nomLong: MiniFiche = {
+  id: 2,
+  nom: 'Collectif Régional de Réemploi et d\'Accompagnement des Chantiers Participatifs du Grand Ouest',
+  resume: 'Nom volontairement long pour vérifier l\'ellipse sur une ligne.',
+  chips: ['Chantier'],
+  echelle: 'Régional',
+  geoloc: true,
+  kind: 'org',
+}
+
+const sansDescription: MiniFiche = {
+  id: 3,
+  nom: 'Structure sans description',
+  resume: '',
+  chips: ['Formation'],
+  echelle: 'Local',
+  geoloc: true,
+  kind: 'org',
+}
+
+const sansChips: MiniFiche = {
+  id: 4,
+  nom: 'Structure sans chips',
+  resume: 'Une organisation dont aucune fonction ni hashtag n\'est renseigné dans la source.',
+  chips: [],
+  geoloc: true,
+  kind: 'org',
+}
+
+const sansGeoloc: MiniFiche = {
+  id: 5,
+  nom: 'Structure sans localisation',
+  resume: 'Une fiche nationale sans latitude ni longitude — invisible sur la carte, visible ici.',
+  chips: ['Administratif', 'Comptabilité'],
+  echelle: 'National',
+  geoloc: false,
+  kind: 'org',
+}
+</script>
+
+<style scoped>
+.story {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: var(--space-lg);
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+}
+
+.story__title {
+  font-size: var(--fs-xl);
+  font-weight: var(--fw-bold);
+  margin-bottom: var(--space-lg);
+}
+
+.story__section {
+  margin-bottom: var(--space-xl);
+}
+
+.story__heading {
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--text-muted);
+  margin-bottom: var(--space-sm);
+}
+
+.story__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--space-sm);
+}
+
+.story__log {
+  font-size: var(--fs-sm);
+  color: var(--text-muted);
+}
+</style>