misc, text & toc display

src/components/Content/EdText.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="text">
-    <h1>{{ textdata.content.title }}</h1>
+    <!-- <h1>{{ textdata.meta.title }}</h1> -->
     <div class="tei" v-html="textdata.content.tei" />
   </div>
 </template>

src/components/Content/EdToc.vue

@@ -0,0 +1,33 @@
+<template>
+  <section>
+    <ul>
+      <li
+        v-for="item in content"
+        :key="item.uuid"
+      >
+        <TocItem :item="item" :level="1" :editionid="$route.params.id" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+
+import TocItem from './TocItem'
+
+export default {
+  name: 'EdToc',
+  components: {
+    TocItem
+  },
+  props: {
+    content: Object
+  },
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Content/TocItem.vue

@@ -8,6 +8,7 @@
       v-if="title"
       class="toc-title"
       :uuid="item.uuid"
+      v-bind:class="{active: isActive}"
     >
       <a
         :href="'/edition/'+editionid+'/'+item.uuid"
@@ -18,7 +19,11 @@
         {{ title }}
       </a>
     </component>
-    <ul v-if="children.length">
+    <ul
+      v-if="children.length"
+      class="toc-list"
+      v-bind:class="{opened: isOpened}"
+    >
       <li v-for="child in children" :key="child.uuid">
         <TocItem :item="child" :level="nextLevel" :editionid="editionid" />
       </li>
@@ -62,6 +67,14 @@ export default {
     },
     nextLevel () {
       return this.level + 1
+    },
+    isActive () {
+      // console.log('Active', this.$route.params.textid, this.item.uuid)
+      return this.$route.params.textid === this.item.uuid
+    },
+    isOpened () {
+      // console.log('opened', this.$route.params.textid.indexOf(this.item.uuid) >= 0)
+      return this.$route.params.textid.indexOf(this.item.uuid) >= 0
     }
   },
   // beforeCreate () {

src/pages/EditionToc.vue

@@ -1,25 +1,18 @@
 <template>
   <MainContentLayout id="edition-toc">
-    <template v-if="!content" v-slot:header>
+    <template v-if="!content" #header>
       <span>Loading ...</span>
     </template>
-    <template v-if="meta" v-slot:header>
-      <h1>{{ meta.title }}</h1>
-      <section>
-        <ul>
-          <li
-            v-for="item in content"
-            :key="item.uuid"
-          >
-            <TocItem :item="item" :level="1" :editionid="$route.params.id" />
-          </li>
-        </ul>
-      </section>
+    <template v-if="meta" #header>
+      <h1>{{ meta.author }}</h1>
     </template>
 
+    <!-- default slot -->
     <EdText v-if="textdata" :textdata="textdata" />
 
-    <template v-slot:nav />
+    <template #nav>
+      <EdToc  :content="content" />
+    </template>
   </MainContentLayout>
 </template>
 
@@ -27,15 +20,15 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import TocItem from '../components/Content/TocItem'
 import EdText from '../components/Content/EdText'
+import EdToc from '../components/Content/EdToc'
 
 export default {
   name: 'EditionToc',
   components: {
     MainContentLayout,
-    TocItem,
-    EdText
+    EdText,
+    EdToc
   },
   data: () => ({
     content: null,

src/pages/ListCorpus.vue

@@ -10,25 +10,32 @@
         <header>
           <h2>{{ corpus.author.title }}</h2>
           <h3>{{ corpus.author.date }}</h3>
-          <section class="editions">
-            <h4 class="editions-quantity">{{ corpus.author.editionsQuantity }}</h4>
-            <div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/>
-          </section>
-          <h4 class="texts-quantity">{{ corpus.author.textsQuantity }}</h4>
         </header>
-        <ul class="texts-list">
-          <li v-for="text in corpus.editions.content" :key="text.uuid">
-            <h3>
-              <a
-                :href="text.url"
-                :uuid="text.uuid"
-                @click.prevent="onclick"
-                @keyup.enter="onclick"
-                v-html="text.title"
-              />
-            </h3>
-          </li>
-        </ul>
+        <section class="editions">
+          <h4 class="editions-quantity">
+            {{ corpus.author.editionsQuantity.quantity }} {{ corpus.author.editionsQuantity.unit }}
+          </h4>
+          <!-- <div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/> -->
+        </section>
+        <section class="texts">
+          <h4 class="texts-quantity">
+            {{ corpus.author.textsQuantity.quantity }}
+            {{ corpus.author.textsQuantity.unit }}
+          </h4>
+          <ul class="texts-list">
+            <li v-for="text in corpus.editions.content" :key="text.uuid">
+              <h3>
+                <a
+                  :href="text.url"
+                  :uuid="text.uuid"
+                  @click.prevent="onclick"
+                  @keyup.enter="onclick"
+                  v-html="text.title"
+                />
+              </h3>
+            </li>
+          </ul>
+        </section>
         <!-- <CorpusItem :item="item" /> -->
       </li>
     </ul>