Piped/src/components/CollapsableText.vue

43 lines
1.2 KiB
Vue
Raw Normal View History

2023-07-27 11:46:05 +00:00
<template v-if="text">
<div class="mx-1 whitespace-pre-wrap py-2">
2023-07-27 11:46:05 +00:00
<!-- eslint-disable-next-line vue/no-v-html -->
2023-07-22 16:22:57 +00:00
<span v-if="showFullText" v-html="fullText()" />
2023-07-27 11:46:05 +00:00
<!-- eslint-disable-next-line vue/no-v-html -->
2023-07-22 16:22:57 +00:00
<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="block whitespace-normal font-semibold text-neutral-500 hover:underline"
2023-05-23 16:24:32 +00:00
@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: {
2023-07-27 11:46:05 +00:00
text: {
type: String,
default: null,
},
2023-05-23 16:24:32 +00:00
},
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>