nav-carte/pages/dev/fiche-mini-card.vue

<!--
  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>