Piped/src/components/CollapsableText.vue

39 lines
1.1 KiB
Vue
Raw Normal View History

2023-05-23 16:24:32 +00:00
<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="text" class="whitespace-pre-wrap py-2 mx-1">
2023-07-22 16:22:57 +00:00
<span v-if="showFullText" v-html="fullText()" />
<span v-else v-html="colapsedText()" />
2023-05-23 16:24:32 +00:00
<span v-if="text.length > 100 && !showFullText">...</span>
<button
v-if="text.length > 100"
class="hover:underline font-semibold text-neutral-500 block whitespace-normal"
@click="showFullText = !showFullText"
>
[{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
</button>
</div>
</template>
<script>
2023-07-22 16:22:57 +00:00
import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
2023-05-23 16:24:32 +00:00
export default {
props: {
text: String,
},
data() {
return {
showFullText: false,
};
},
2023-07-22 16:22:57 +00:00
methods: {
fullText() {
return purifyHTML(rewriteDescription(this.text));
},
colapsedText() {
return purifyHTML(rewriteDescription(this.text.slice(0, 100)));
},
},
2023-05-23 16:24:32 +00:00
};
</script>