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

<template>
  <text-card-base v-bind="$attrs">
    <template v-slot:header-extra="{ text }">
      <nav class="nav-list ml-auto">
        <ul>
          <template v-if="children">
            <li v-for="child in text.children" :key="child.id">
              <dot-button
                @click="onChildOpen($event, text.id, child.id)"
                :active="children.includes(child.id)" :variant="child.variant"
              >
                {{ $t('variants.' + child.variant) }}
              </dot-button>
            </li>
          </template>

          <li>
            <b-button-close size="sm" @click="onSelfClose($event, text.id)" />
          </li>
        </ul>
      </nav>
    </template>

    <template v-slot:footer-extra="{ text, toCommaList }">
      <b-button
        v-if="text.siblings"
        :id="'siblings-' + text.id"
        size="sm"
      >
        {{ $t('siblings') }}
      </b-button>
      <b-popover
        v-if="text.siblings"
        :target="'siblings-' + text.id" triggers="hover" placement="top"
      >
        <div v-for="sibling in text.siblings" :key="sibling.id">
          <h6 @click="onSiblingOpen($event, sibling.id)" class="clickable">
            <span class="text-authors d-block">{{ toCommaList(sibling.authors) }},</span>
            <span class="text-title d-block">{{ sibling.title }},</span>
            <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.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 }
  },

  methods: {
    onChildOpen (_, id, childId) {
      this.$emit('open', id, childId)
    },

    onSiblingOpen (_, id) {
      this.$emit('open', id)
    },

    onSelfClose (e, id) {
      // stop the click event propagation to avoid other listeners to interact with a soon to be deleted element.
      e.stopPropagation()
      this.$emit('close', id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>