maj config : création view pages static, modale réactive contenu soit static soit etape

web/themes/custom/caravane/assets/js/vuejs/Etape.vue

@@ -1,72 +0,0 @@
-<template>
-  <div v-if="etape_number">
-    <header>
-      <h1>{{adresse.locality}}, {{ adresse.postal_code }}</h1>
-      <h2>{{title}}</h2>
-      <div>
-        <p>Étape n°{{etape_number}}</p>
-        <p>Du {{dates.value}} au {{ dates.end_value }}</p>
-      </div>
-      <img :src="vignette.url" :alt="vignette.alt">
-    </header>
-    <main>
-      <div v-for="partie in parties">
-        <h3 v-html="partie.title"></h3>
-        <p v-html="partie.text"></p>
-      </div>
-    </main>
-
-
-
-
-<!--     
-    <div v-if="loading">Loading...</div>
-    <div v-if="error">{{ error }}</div>
- -->
-
-    <div><pre>{{href}}</pre></div>
-
-    
-    <div><pre><b>GEOFIELD</b>{{geofield}}</pre></div>
-    <div><pre><b>GALERIES</b>{{galeries}}</pre></div>
-    <div><pre><b>PARTIES</b>{{parties}}</pre></div>
-    <div><pre><b>SAISON</b>{{saison}}</pre></div>
-    <div><pre><b>THEMATIQUES</b>{{thematiques}}</pre></div>
-
-
-    <div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { storeToRefs } from 'pinia';
-  import { useEtapeStore } from '../stores/etape';
-
-  const store = useEtapeStore();
-
-  const { 
-    loading, error,
-
-    href,
-    title,
-    adresse,
-    etape_number,
-    dates,
-    geofield,
-    galeries,
-    parties,
-    saison,
-    thematiques,
-    vignette,
-
-  } = storeToRefs(store);
-</script>
-
-<style lang="scss">
-  header {
-    img {
-      width: 100%;
-    }
-  }
-</style>

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="etape.etape_number">
+    <header>
+      <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
+      <h2>{{etape.title}}</h2>
+      <div>
+        <p>Étape n°{{etape.etape_number}}</p>
+        <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
+      </div>
+      <img :src="etape.vignette.url" :alt="etape.vignette.alt">
+    </header>
+    <main>
+      <div v-for="partie in etape.parties">
+        <h3 v-html="partie.title"></h3>
+        <p v-html="partie.text"></p>
+      </div>
+    </main>
+
+
+
+
+<!--     
+    <div v-if="loading">Loading...</div>
+    <div v-if="error">{{ error }}</div>
+ -->
+
+    <div><pre>{{etape.href}}</pre></div>
+
+    
+    <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
+    <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
+    <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
+    <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
+    <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
+
+
+    <div>
+    </div>
+  </div>
+  <div v-if="page.title">
+    <header>
+      <h1>{{ page.title }}</h1>
+    </header>
+    <main>
+      <div v-html="page.text"></div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+  import { storeToRefs } from 'pinia';
+  import { useContentStore } from '../stores/content';
+
+  const store = useContentStore();
+
+  const { 
+    loading, error,
+    etape,
+    page,
+
+  } = storeToRefs(store);
+</script>