Skip to content

Commit

Permalink
improvement: remove has-slot prop
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: The has-slot prop will no longer be valid. If you enter a slot, will ignore the
other content
  • Loading branch information
@guastallaigor
guastallaigor committed Feb 5, 2020
1 parent 9dbd07e commit f4b1c92
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 138 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ plugins: ["~/plugins/vue-horizontal-timeline.js"];
| content-centered | Boolean | false | Centralizes all the cards content text |
| content-class | String | '' | If you want to set a custom class to the cards content, set it here |
| content-substr | String | 250 | Number of characters to display inside the cards content. Above this, will set a '...' mask |
| has-slot | String | false | Set to true if you pass a `<slot>` to override `title` and `content` attributes |
| min-width | String | '200px' | Min-width of the timeline |
| min-height | String | '' | Min-height of the timeline |
| timeline-padding | String | '' | Padding of the timeline |
Expand Down
10 changes: 3 additions & 7 deletions src/components/VueHorizontalTimeline.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
<ol>
<li v-for="(item, i) in items" :key="i" :style="setLineColor">
<div class="time" :class="getTimeClass(item)" :style="getTimeStyles" @click="cardClicked(item)">
<slot v-if="hasSlot" v-bind:item="item"/>
<slot v-if="$slots.default" v-bind:item="item"/>
<span
class="title"
v-if="!hasSlot && item[titleAttr]"
v-if="!$slots.default && item[titleAttr]"
:class="getTitleClasses">
{{ item[titleAttr] | textSubstr(titleSubstr) }}
</span>
<span
class="content"
v-if="!hasSlot && item[contentAttr]"
v-if="!$slots.default && item[contentAttr]"
:class="getContentClasses">
{{ item[contentAttr] | textSubstr(contentSubstr) }}
</span>
Expand Down Expand Up @@ -73,10 +73,6 @@ export default {
type: Number,
default: 250
},
hasSlot: {
type: Boolean,
default: false
},
minWidth: {
type: String,
default: '200px'
Expand Down
141 changes: 129 additions & 12 deletions stories/index.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,6 @@ timelineStory.add('Default', () => {
type: Number,
default: number('Content substring', 250)
},
hasSlot: {
type: Boolean,
default: boolean('Has slot', false)
},
minWidth: {
type: String,
default: `${number('Timeline min-width', 200)}px`
Expand Down Expand Up @@ -129,7 +125,6 @@ timelineStory.add('Default', () => {
:items="items"
:item-selected.sync="item"
:item-unique-key="itemUniqueKey"
:has-slot="hasSlot"
:title-centered="titleCentered"
:title-attr="titleAttr"
:title-class="titleClass ? 'custom-class' : ''"
Expand All @@ -145,12 +140,134 @@ timelineStory.add('Default', () => {
:line-color="lineColor"
:clickable="clickable"
@click="action"
>
<div style="font-style:17px;font-weight:bold;">
<p>Slot text</p>
<p>Slot text</p>
<p>Slot text</p>
</div>
</vue-horizontal-timeline>`
/>`
}
})
.add('Slot', () => {
const label1 = 'Object 1'
const defaultValue1 = {
title: 'Title example 1',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio. Nullam non condimentum orci, a cursus magna. Suspendisse tempor rutrum eros, non pellentesque odio commodo eu. Donec at volutpat enim. Vivamus mattis volutpat urna, sit amet vulputate mauris sollicitudin et. Proin consequat at dolor in sodales. Vestibulum vel porta turpis. Pellentesque sollicitudin justo est, ut dapibus felis luctus mollis. Suspendisse feugiat, metus ut auctor dictum, nulla dui fringilla nisl, a pulvinar ipsum justo non lacus. Integer vestibulum sapien metus, et congue felis efficitur iaculis. Aliquam et mi quis nulla molestie elementum. Vestibulum in nibh nibh.'
}
const value1 = object(label1, defaultValue1)

const label2 = 'Object 2'
const defaultValue2 = {
title: 'Title example 2',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio. Nullam non condimentum orci, a cursus magna. Suspendisse tempor rutrum eros, non pellentesque odio commodo eu. Donec at volutpat enim. Vivamus mattis volutpat urna, sit amet vulputate mauris sollicitudin et. Proin consequat at dolor in sodales. Vestibulum vel porta turpis. Pellentesque sollicitudin justo est, ut dapibus felis luctus mollis. Suspendisse feugiat, metus ut auctor dictum, nulla dui fringilla nisl, a pulvinar ipsum justo non lacus. Integer vestibulum sapien metus, et congue felis efficitur iaculis. Aliquam et mi quis nulla molestie elementum. Vestibulum in nibh nibh.'
}
const value2 = object(label2, defaultValue2)

const label3 = 'Object 3'
const defaultValue3 = {
title: 'Title example 3',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio. Nullam non condimentum orci, a cursus magna. Suspendisse tempor rutrum eros, non pellentesque odio commodo eu. Donec at volutpat enim. Vivamus mattis volutpat urna, sit amet vulputate mauris sollicitudin et. Proin consequat at dolor in sodales. Vestibulum vel porta turpis. Pellentesque sollicitudin justo est, ut dapibus felis luctus mollis. Suspendisse feugiat, metus ut auctor dictum, nulla dui fringilla nisl, a pulvinar ipsum justo non lacus. Integer vestibulum sapien metus, et congue felis efficitur iaculis. Aliquam et mi quis nulla molestie elementum. Vestibulum in nibh nibh.'
}
const value3 = object(label3, defaultValue3)

const items = [value1, value2, value3]

return {
components: { VueHorizontalTimeline },
methods: { action: action('Card Clicked!') },
props: {
items: {
type: Array,
default: [...items.map(it => ({ ...it }))]
},
item: {
type: Object,
default: object('Item selected', {
title: '',
content: ''
})
},
itemUniqueKey: {
type: String,
default: text('Item unique key', 'title')
},
titleAttr: {
type: String,
default: text('Title attribute', 'title')
},
titleCentered: {
type: Boolean,
default: boolean('Title centered', false)
},
titleClass: {
type: String,
default: text('Set title custom class (color red)', '')
},
titleSubstr: {
type: Number,
default: number('Title substring', 18)
},
contentAttr: {
type: String,
default: text('Content attribute', 'content')
},
contentCentered: {
type: Boolean,
default: boolean('Content centered', false)
},
contentClass: {
type: String,
default: text('Set content custom class (color red)', '')
},
contentSubstr: {
type: Number,
default: number('Content substring', 250)
},
minWidth: {
type: String,
default: `${number('Timeline min-width', 200)}px`
},
minHeight: {
type: String,
default: `${number('Timeline min-height', 0)}px`
},
timelinePadding: {
type: String,
default: `${number('Timeline padding', 0)}px`
},
timelineBackground: {
type: String,
default: text('Timeline background (hex/rgb)', '#E9E9E9')
},
lineColor: {
type: String,
default: text('Line color (hex/rgb)', '#03A9F4')
},
clickable: {
type: [String, Boolean],
default: boolean('Clickable', true)
}
},
template: `<vue-horizontal-timeline
:items="items"
:item-selected.sync="item"
:item-unique-key="itemUniqueKey"
:title-centered="titleCentered"
:title-attr="titleAttr"
:title-class="titleClass ? 'custom-class' : ''"
:title-substr="titleSubstr"
:content-centered="contentCentered"
:content-attr="contentAttr"
:content-class="contentClass ? 'custom-class' : ''"
:content-substr="contentSubstr"
:min-width="minWidth"
:min-height="minHeight"
:timeline-padding="timelinePadding"
:timeline-background="timelineBackground"
:line-color="lineColor"
:clickable="clickable"
@click="action"
>
<div style="font-style:17px;font-weight:bold;">
<p>Slot text</p>
<p>Slot text</p>
<p>Slot text</p>
</div>
</vue-horizontal-timeline>`
}
})
3 changes: 1 addition & 2 deletions tests/unit/vue-horizontal-timeline.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe('When I create the VueHorizontalTimeline component', () => {

it('should print html inside slot', () => {
const html = '<p id="find-this-id">VueHorizontalTimeline</p>'
const wrapper = createTimelineWrapper({ items, hasSlot: true }, html)
const wrapper = createTimelineWrapper({ items }, html)
const slot = wrapper.find('p#find-this-id')

expect(wrapper.exists()).toBe(true)
Expand Down Expand Up @@ -323,7 +323,6 @@ describe('When I create the VueHorizontalTimeline component', () => {
contentCentered: false,
contentClass: '',
contentSubstr: 250,
hasSlot: false,
minWidth: '200px',
minHeight: '',
timelinePadding: '',
Expand Down

0 comments on commit f4b1c92

Please sign in to comment.