80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
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="onChildOpen($event, text.id, child.id)"
|
|
:active="children.includes(child.id)"
|
|
>
|
|
{{ child.id }}
|
|
</b-nav-item>
|
|
</template>
|
|
|
|
<b-nav-item>
|
|
<b-button-close @click="onSelfClose($event, 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"
|
|
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>
|