separate TextList into sub components

2021-03-15 10:01:59 +01:00
parent 415c955f85
commit 7209b6bbee
3 changed files with 106 additions and 39 deletions
@@ -0,0 +1,62 @@
+<template>
+  <text-card-base v-bind="$attrs">
+    <template v-slot:header-extra="{ text }">
+      <b-nav class="ml-auto flex-nowrap" pills>
+        <template v-if="children">
+          <b-nav-item
+            v-for="child in text.children" :key="child.id"
+            @click="$emit('open', text.id, child.id)"
+            :active="children.includes(child.id)"
+          >
+            {{ child.id }}
+          </b-nav-item>
+        </template>
+
+        <b-nav-item>
+          <b-button-close @click="$emit('close', text.id)" />
+        </b-nav-item>
+      </b-nav>
+    </template>
+
+    <template v-slot:footer-extra="{ text, toCommaList }">
+      <b-button
+        v-if="text.siblings"
+        :id="'siblings-' + text.id"
+      >
+        {{ $t('siblings') }}
+      </b-button>
+      <b-popover
+        v-if="text.siblings"
+        :target="'siblings-' + text.id" triggers="click" placement="top"
+      >
+        <div v-for="sibling in text.siblings" :key="sibling.id">
+          <h6>
+            <span>{{ toCommaList(sibling.authors) }},</span>
+            <span>{{ sibling.title }},</span>
+            <span>{{ sibling.edition }}</span>
+          </h6>
+        </div>
+      </b-popover>
+    </template>
+  </text-card-base>
+</template>
+
+<script>
+import TextCardBase from './TextCardBase'
+
+
+export default {
+  name: 'TextCard',
+
+  components: {
+    TextCardBase
+  },
+
+  props: {
+    children: { type: Array, default: null }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>