enfrancais-app/src/components/text/TextCard.vue

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