65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
|
<div v-if="shouldShow && hasContent">
|
|
<div
|
|
class="markdown leading-normal"
|
|
:class="{ 'whitespace-pre-wrap': plainText }"
|
|
v-html="content"
|
|
/>
|
|
</div>
|
|
<div v-else-if="hasContent">
|
|
<div
|
|
v-if="expanded"
|
|
class="markdown leading-normal"
|
|
:class="{ 'whitespace-pre-wrap': plainText }"
|
|
v-html="content"
|
|
/>
|
|
|
|
<a
|
|
v-if="!shouldShow"
|
|
@click="toggle"
|
|
class="cursor-pointer dim inline-block text-primary font-bold"
|
|
:class="{ 'mt-6': expanded }"
|
|
aria-role="button"
|
|
>
|
|
{{ showHideLabel }}
|
|
</a>
|
|
</div>
|
|
<div v-else>—</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
plainText: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
shouldShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
content: {
|
|
type: String,
|
|
},
|
|
},
|
|
|
|
data: () => ({ expanded: false }),
|
|
|
|
methods: {
|
|
toggle() {
|
|
this.expanded = !this.expanded
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
hasContent() {
|
|
return this.content !== '' && this.content !== null
|
|
},
|
|
|
|
showHideLabel() {
|
|
return !this.expanded ? this.__('Show Content') : this.__('Hide Content')
|
|
},
|
|
},
|
|
}
|
|
</script>
|