scinote-web/app/javascript/vue/experiments/renderers/description.vue
2023-12-11 09:26:13 +01:00

32 lines
849 B
Vue

<template>
<div class="group leading-5 relative line-clamp-2 group-hover:marker" :class="{'cursor-pointer': showMoreButton}">
{{ params.data.description }}
<div v-if="showMoreButton" @click.stop="showMore"
class="opacity-0 group-hover:opacity-100 text-xs text-sn-blue absolute bottom-0 right-0
p-0.5 pl-8 bg-gradient-to-r from-transparent from-0% to-sn-super-light-grey to-30%">
{{ i18n.t('experiments.card.more') }}
</div>
</div>
</template>
<script>
export default {
name: 'DescriptionRenderer',
props: {
params: {
required: true,
},
},
computed: {
showMoreButton() {
return this.params.data.description.length > 80;
},
},
methods: {
showMore() {
this.params.dtComponent.$emit('showDescription', null, [this.params.data]);
},
},
};
</script>