83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
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"
|
|
>
|
|
{{ child.families[0].name }}
|
|
</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>
|