diff --git a/package.json b/package.json index 34bb2ad..e009685 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-horizontal-timeline", - "version": "0.11.0", + "version": "0.12.0", "private": false, "description": "Just a simple horizontal timeline component made with Vue.js", "homepage": "https://github.com/guastallaigor/vue-horizontal-timeline#readme", diff --git a/src/components/VueHorizontalTimeline.vue b/src/components/VueHorizontalTimeline.vue index f38acbd..4a21832 100644 --- a/src/components/VueHorizontalTimeline.vue +++ b/src/components/VueHorizontalTimeline.vue @@ -6,26 +6,26 @@ v-for="(item, i) in items" :key="i" :style="setLineColor" - :class="[{'add-step': $scopedSlots.default || item[titleAttr] || item[contentAttr]}, item.stepCssClass]" + :class="[{'add-step': hasSlot || item[titleAttr] || item[contentAttr]}, item.stepCssClass]" >
- + - {{ item[titleAttr] | textSubstr(titleSubstr) }} + {{ textSubstr(item[titleAttr], titleSubstr) }} - {{ item[contentAttr] | textSubstr(contentSubstr) }} + {{ textSubstr(item[contentAttr], contentSubstr) }}
@@ -108,12 +108,11 @@ export default { default: true } }, - filters: { - textSubstr (value, qtd = 250, mask = '...') { - return value && value.length > qtd ? `${value.substring(0, qtd)}${mask}` : value - } - }, + emits: ['click', 'update:itemSelected'], computed: { + hasSlot () { + return '$scopedSlots' in this && this.$scopedSlots?.default ? true : !!this.$slots?.default + }, setTimelineStyles () { const { timelineBackground, timelinePadding } = this const styleObj = {} @@ -158,6 +157,9 @@ export default { } }, methods: { + textSubstr (value, qtd = 250, mask = '...') { + return value && value.length > qtd ? `${value.substring(0, qtd)}${mask}` : value + }, cardClicked (item) { if (!this.clickable) { return