vue-timeline-pro

Simple, highly customizable, and no dependency timeline.

Install

npm install vue-timeline-pro --save

How to use

Include plugin in your main.js file.

import VTimelinePro from 'vue-timeline-pro';

Vue.use(VTimelinePro);

/*
By default, the plugin will use "VueTimelinePro" name for the component.

If you need to change it, you can do so by providing "componentName" param.
 
Example:
 
Vue.use(VTimelinePro, { componentName: "foo-timeline-pro" })
...
<foo-timeline-pro updates="updates"></foo-timeline-pro>

*/

Create Basic Timeline

<VueTimelinePro updates="updates"/>

data() {
    return {
        updates: [
            {
                icon: '/awesomeimage.png',
                title: 'My awesome title',
                description: 'Lorem ...',
                date: new Date(),
                url: 'https://wakeupyouneedtomakemoney...'   
            }
        ]
    }
}

Create a editable timeline

<VueTimelinePro updates="updates" :readOnly="false"/>

data() {
    return {
        updates: [...],
    }
}

Listen when is added an item

<VueTimelinePro updates="updates" :readOnly="false" @onAddItem="onAddItem"/>

methods: {
    onAddItem(item, index) {
        console.log(item, index);
    }
}

Listen when is removed an item

<VueTimelinePro updates="updates" :readOnly="false" @onRemoveItem="onRemoveItem"/>

methods: {
    onRemoveItem(item, index) {
        console.log(item, index);
    }
}

Listen when is updated an item

<VueTimelinePro updates="updates" :readOnly="false" @onUpdateItem="onUpdateItem"/>

methods: {
    onUpdateItem(item) {
        console.log(item);
    }
}

Format the date displayed

<VueTimelinePro updates="updates" :formatDate="formatDate"/>

// use your favorite library or simply vanilla
import spacetime from 'spacetime';

...
methods: {
    formatDate(date) {
        return spacetime(date).format('nice');
    }
}

Add custom props to link

<VueTimelinePro updates="updates" :linkProps="{'target': '_blank'}"/>

Redefine update model fields

<VueTimelinePro :updates="updates" :modelItem="updateModel" />

data() {
    return {
        ...
        updateModel: {
          title: 'fooTitle',
          description: 'fooDescription',
          date: 'fooDate',
          icon: 'fooIcon',
          url: 'fooUrl'
        }
    }
},
methods: {
    onAddUpdate(item) {
        console.log(item);
        /*  fooDate: (...),
            fooDescription: (...)
            fooIcon: (...)
            fooTitle: (...)
            fooUrl: (...)
        */
    },
}

Props

| Name | Type | Required | Default | Description | |------------------|---------|----------|------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | updates | Array | false | [] | List of updates. | | readOnly | Boolean | false | true | Is possible edit the list or not? | | suggestiveText | String | false | Add a new update | Text used by first plus. | | linkProps | Object | false | {} | Props assigned to link to each update. | | acceptButtonText | String | false | 'Accept' | Text for accept button when is edited the update. | | cancelButtonText | string | false | 'Cancel' | Text for cancel button when is edited the update. | | formatDate | Func | false | () => {}... | Function used to format a date object. Default format en-US, example: December 05, 2019. | | imageList | Array | false | [] | List of image urls, used to represent an update. | | modelItem | Object | false | title:'title', description:'description', date:'date', icon:'icon', url:'url'} | Update model, will be used to map values of each update. |

Events @

• onAddItem(updateItem) - Event when is added an new update.
  • updateItem: Object added.
• onUpdateItem(updateItem, index) - Trigger when is updated an update.
  • updateItem: Object updated.
  • index: Index of object updated.
• onRemoveItem(removedUpdateItem, index) - Trigger when is removed an update.
  • removedUpdateItem: Object removed.
  • index: Index of object removed.