forked from nutomic/joinpeertube
60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
||
<b-card no-body :id="accordionId">
|
||
|
||
<b-card-header header-tag="header" role="tab">
|
||
<a :href="href" v-b-toggle="accordionBodyId">
|
||
<slot name="title"></slot>
|
||
</a>
|
||
</b-card-header>
|
||
|
||
<b-collapse :accordion="accordion" :id="accordionBodyId" role="tabpanel">
|
||
<b-card-body>
|
||
|
||
<b-card-text>
|
||
<slot></slot>
|
||
</b-card-text>
|
||
|
||
</b-card-body>
|
||
</b-collapse>
|
||
</b-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'
|
||
|
||
export default {
|
||
components: {
|
||
BCollapse,
|
||
BCard,
|
||
BCardHeader,
|
||
BCardBody,
|
||
BCardText
|
||
},
|
||
|
||
directives: {
|
||
'b-toggle': VBToggle
|
||
},
|
||
|
||
props: {
|
||
title: String,
|
||
id: String,
|
||
accordion: String
|
||
},
|
||
|
||
computed: {
|
||
accordionId: function () {
|
||
return this.id.toLowerCase()
|
||
.replace(/[ /'’]/g, '-')
|
||
.replace(/[?!.,]/g, '')
|
||
},
|
||
|
||
href: function () {
|
||
return '#' + this.accordionId
|
||
},
|
||
|
||
accordionBodyId: function () {
|
||
return this.accordionId + '-body'
|
||
}
|
||
}
|
||
}
|
||
</script>
|