├── .browserslistrc
├── .eslintrc.js
├── .github
    └── workflows
    │   └── main.yml
├── .gitignore
├── .postcssrc.js
├── .prettierrc.js
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    └── index.html
└── src
    ├── App.vue
    ├── components
        ├── Timeline.vue
        ├── TimelineItem.vue
        └── index.js
    └── main.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/recommended',
 8 |     'plugin:prettier/recommended',
 9 |     '@vue/prettier'
10 |   ],
11 |   rules: {
12 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14 |     'vue/no-v-html': 'off'
15 |   },
16 |   parserOptions: {
17 |     parser: 'babel-eslint'
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: 
 6 |       - master
 7 | 
 8 | jobs:
 9 |   build:
10 | 
11 |     runs-on: ubuntu-latest
12 | 
13 |     steps:
14 |     - uses: actions/checkout@master
15 |     - name: Run a one-line script
16 |       run: echo Hello, world!
17 |     - name: Run a multi-line script
18 |       run: |
19 |         echo Add other actions to build,
20 |         echo test, and deploy your project.
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: false,
3 |   printWidth: 80,
4 |   singleQuote: true,
5 |   trailingComma: 'none',
6 |   arrowParens: 'avoid'
7 | }
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Pablo Sirera
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 style="text-align: center;">Timeline Vuejs</h1>
  2 | 
  3 | [![npm](https://img.shields.io/npm/v/timeline-vuejs.svg?colorB=brightgreen)](https://www.npmjs.com/package/timeline-vuejs)
  4 | [![downloads](https://img.shields.io/npm/dw/timeline-vuejs.svg)](https://www.npmjs.com/package/timeline-vuejs)
  5 | [![Twitter](https://img.shields.io/twitter/url/https/www.npmjs.com/package/timeline-vuejs.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ftimeline-vuejs)
  6 | 
  7 | [Demo Timeline Vue](https://codesandbox.io/s/n094ypklvl)
  8 | 
  9 | ## 📦 Install
 10 | 
 11 | ```
 12 | npm install timeline-vuejs --save
 13 | ```
 14 | 
 15 | ```js
 16 | // main.js
 17 | import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'
 18 | ```
 19 | 
 20 | ```html
 21 | // component.vue
 22 | <script>
 23 |   import Timeline from 'timeline-vuejs'
 24 | 
 25 |   export default {
 26 |     // ...
 27 |     components: {
 28 |       Timeline
 29 |     }
 30 |     // ...
 31 |   }
 32 | </script>
 33 | ```
 34 | 
 35 | ## 🔧 Usage
 36 | 
 37 | ```html
 38 | <template>
 39 |   <Timeline
 40 |     :timeline-items="timelineItems"
 41 |     :message-when-no-items="messageWhenNoItems"/>
 42 | </template>
 43 | 
 44 | <script>
 45 | import Timeline from 'timeline-vuejs'
 46 | 
 47 | export default {
 48 |   components: {
 49 |     Timeline
 50 |   }
 51 |   data: () => ({
 52 |     messageWhenNoItems: 'There are not items',
 53 |     timelineItems: [
 54 |       {
 55 |         from: new Date(2018, 7),
 56 |         title: 'Name',
 57 |         description:
 58 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 59 |       },
 60 |       {
 61 |         from: new Date(2016, 1),
 62 |         title: 'Name',
 63 |         description:
 64 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 65 |       },
 66 |       {
 67 |         from: new Date(2016, 6),
 68 |         title: 'Name',
 69 |         description:
 70 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 71 |       },
 72 |       {
 73 |         from: new Date(2012, 1),
 74 |         title: 'Name',
 75 |         description:
 76 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 77 |       }
 78 |     ]
 79 |   })
 80 | }
 81 | </script>
 82 | ```
 83 | 
 84 | ## Available props
 85 | 
 86 | | **Props**          |       **Type**       | **Default**                                            | **Description**                                             |
 87 | | :----------------- | :------------------: | :----------------------------------------------------- | :---------------------------------------------------------- |
 88 | | timelineItems      |        Array         | [ ]                                                    | Items value of the timeline                                 |
 89 | | messageWhenNoItems |        String        |                                                        | Message when there are no items                             |
 90 | | colorDots          |        String        | <span style="background-color:#2da1bf;">#2da1bf</span> | Color of the dots                                           |
 91 | | uniqueTimeline     |       Boolean        | false                                                  | If true, the timeline isn't separated                       |
 92 | | uniqueYear         |       Boolean        | false                                                  | If true, the timeline isn't separated when is the same year |
 93 | | order              | String (desc or asc) |                                                        | Type of order                                               |
 94 | | dateLocale | String | Locale of the browser | Type of locale, for example 'en-US' |
 95 | 
 96 | 
 97 | ## Example with order
 98 | 
 99 | ```html
100 | <template>
101 |   <Timeline
102 |     :timeline-items="timelineItems"
103 |     :message-when-no-items="messageWhenNoItems"
104 |     order="desc"/>
105 | </template>
106 | ...
107 | ```
108 | 
109 | ## Example with unique year
110 | 
111 | ```html
112 | <template>
113 |   <Timeline
114 |     :timeline-items="timelineItems"
115 |     :message-when-no-items="messageWhenNoItems"
116 |     :unique-year="true"
117 |     order="asc"/>
118 | </template>
119 | ...
120 | ```
121 | 
122 | ## Example with day and month on title
123 | 
124 | If you want to show day and month on specific items, send true on prop `showDayAndMonth`
125 | ```html
126 | <script>
127 | export default {
128 |   data: () => ({
129 |     timelineItems: [
130 |       {
131 |         from: new Date(2017, 5, 2),
132 |         title: 'Name',
133 |         description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
134 |         showDayAndMonth: true
135 |       },
136 |       {
137 |         from: new Date(2017, 8, 9),
138 |         title: 'Name',
139 |         description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'
140 |       }
141 |     ]
142 |   })
143 | }
144 | </script>
145 | ```
146 | 
147 | ## Example with diferent colors
148 | ```html
149 | <script>
150 | export default {
151 |   data: () => ({
152 |     timelineItems: [
153 |       {
154 |         from: new Date(2017, 5, 2),
155 |         title: 'Name',
156 |         description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
157 |         color: '#e74c3c'
158 |       },
159 |       {
160 |         from: new Date(2017, 8, 9),
161 |         title: 'Name',
162 |         description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
163 |         color: '#2ecc71',
164 |       }
165 |     ]
166 |   })
167 | }
168 | </script>
169 | ```
170 | 
171 | 
172 | ## License
173 | 
174 | **timeline-vuejs** © [Pablo Sirera](https://pablosirera.com), released under the [MIT](https://github.com/pablosirera/timeline-vuejs/blob/master/LICENSE) License.<br>
175 | Authored and maintained by Pablo Sirera with help from [contributors](https://github.com/pablosirera/timeline-vuejs/contributors).
176 | 
177 | > [pablosirera.com](https://pablosirera.com) · GitHub [Pablo Sirera](https://github.com/pablosirera) · Twitter [@pablosirera](https://twitter.com/pablosirera)
178 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/app']
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "timeline-vuejs",
 3 |   "version": "1.1.7",
 4 |   "main": "dist/timeline-vuejs.umd.js",
 5 |   "description": "Minimalist Timeline with VueJS",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "build-bundle": "vue-cli-service build --target lib --name timeline-vuejs ./src/components/index.js",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "keywords": [
13 |     "timeline",
14 |     "vue-timeline",
15 |     "timeline-vuejs",
16 |     "minimalist timeline",
17 |     "timeline components"
18 |   ],
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/pablosirera/timeline-vuejs"
22 |   },
23 |   "bugs": {
24 |     "url": "https://github.com/pablosirera/timeline-vuejs/issues"
25 |   },
26 |   "homepage": "https://github.com/pablosirera/timeline-vuejs",
27 |   "author": "Pablo Sirera <psirera4@gmail.com>",
28 |   "license": "MIT",
29 |   "dependencies": {
30 |     "vue": "^2.5.17"
31 |   },
32 |   "devDependencies": {
33 |     "@vue/cli-plugin-babel": "^3.0.0",
34 |     "@vue/cli-plugin-eslint": "^3.0.0",
35 |     "@vue/cli-service": "^4.1.1",
36 |     "@vue/eslint-config-prettier": "^4.0.1",
37 |     "eslint": "^5.16.0",
38 |     "eslint-plugin-vue": "^5.0.0",
39 |     "lint-staged": "^7.2.2",
40 |     "node-sass": "^4.9.0",
41 |     "querystringify": ">=2.0.0",
42 |     "sass-loader": "^7.0.1",
43 |     "vue-template-compiler": "^2.5.17"
44 |   },
45 |   "files": [
46 |     "dist/*",
47 |     "src/*",
48 |     "public/*",
49 |     "*.json",
50 |     "*.js"
51 |   ],
52 |   "gitHooks": {
53 |     "pre-commit": "lint-staged"
54 |   },
55 |   "lint-staged": {
56 |     "*.js": [
57 |       "vue-cli-service lint",
58 |       "git add"
59 |     ],
60 |     "*.vue": [
61 |       "vue-cli-service lint",
62 |       "git add"
63 |     ]
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <title>timeline-vuejs</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Timeline
  4 |       :timeline-items="dataTimeline"
  5 |       :message-when-no-items="messageWhenNoItems"
  6 |     />
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | import Timeline from './components/Timeline.vue'
 12 | 
 13 | export default {
 14 |   name: 'App',
 15 |   components: {
 16 |     Timeline
 17 |   },
 18 |   data: () => ({
 19 |     messageWhenNoItems: 'No articles found.',
 20 |     dataTimeline: [
 21 |       {
 22 |         from: new Date(2017, 5, 2),
 23 |         title: 'Name',
 24 |         description:
 25 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.',
 26 |         color: '#2ecc71',
 27 |         showDayAndMonth: true
 28 |       },
 29 |       {
 30 |         from: new Date(2017, 8, 9),
 31 |         title: 'Name',
 32 |         description:
 33 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.',
 34 |         color: '#e74c3c'
 35 |       },
 36 |       {
 37 |         from: new Date(2016, 11, 29),
 38 |         title: 'Name',
 39 |         description:
 40 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.',
 41 |         showDayAndMonth: true
 42 |       },
 43 |       {
 44 |         from: new Date(2018, 7, 14),
 45 |         title: 'Name',
 46 |         description:
 47 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.',
 48 |         showDayAndMonth: true
 49 |       },
 50 |       {
 51 |         from: new Date(2016, 1, 8),
 52 |         title: 'Name',
 53 |         description:
 54 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 55 |       },
 56 |       {
 57 |         from: new Date(2016, 6, 15),
 58 |         title: 'Name',
 59 |         description:
 60 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 61 |       },
 62 |       {
 63 |         from: new Date(2013, 1, 19),
 64 |         title: 'Name',
 65 |         description:
 66 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.',
 67 |         showDayAndMonth: true
 68 |       },
 69 |       {
 70 |         from: new Date(2015, 1, 24),
 71 |         title: 'Name',
 72 |         description:
 73 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 74 |       },
 75 |       {
 76 |         from: new Date(2012, 1, 2),
 77 |         title: 'Name',
 78 |         description:
 79 |           'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
 80 |       }
 81 |     ]
 82 |   })
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="scss">
 87 | * {
 88 |   outline: none;
 89 |   box-sizing: border-box;
 90 | }
 91 | 
 92 | #app {
 93 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 94 |   -webkit-font-smoothing: antialiased;
 95 |   -moz-osx-font-smoothing: grayscale;
 96 |   color: #2c3e50;
 97 |   margin-top: 60px;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/Timeline.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="timeline">
  3 |     <div v-if="hasItems" class="wrapper-timeline">
  4 |       <div
  5 |         v-for="(timelineContent, timelineIndex) in dataTimeline"
  6 |         :key="timelineIndex"
  7 |         :class="wrapperItemClass(timelineIndex)"
  8 |       >
  9 |         <div class="section-year">
 10 |           <p v-if="hasYear(timelineContent)" class="year">
 11 |             {{ getYear(timelineContent) }}
 12 |           </p>
 13 |         </div>
 14 |         <TimelineItem
 15 |           :item-timeline="timelineContent"
 16 |           :date-locale="dateLocale"
 17 |           :color-dots="colorDots"
 18 |         />
 19 |       </div>
 20 |     </div>
 21 |     <p v-else>{{ messageWhenNoItems }}</p>
 22 |   </section>
 23 | </template>
 24 | 
 25 | <script>
 26 | import TimelineItem from './TimelineItem.vue'
 27 | 
 28 | export default {
 29 |   name: 'Timeline',
 30 |   components: {
 31 |     TimelineItem
 32 |   },
 33 |   props: {
 34 |     timelineItems: {
 35 |       type: Array,
 36 |       default: () => []
 37 |     },
 38 |     messageWhenNoItems: {
 39 |       type: String,
 40 |       default: ''
 41 |     },
 42 |     colorDots: {
 43 |       type: String,
 44 |       default: '#2da1bf'
 45 |     },
 46 |     uniqueTimeline: {
 47 |       type: Boolean,
 48 |       default: false
 49 |     },
 50 |     uniqueYear: {
 51 |       type: Boolean,
 52 |       default: false
 53 |     },
 54 |     order: {
 55 |       type: String,
 56 |       default: ''
 57 |     },
 58 |     dateLocale: {
 59 |       type: String,
 60 |       default: ''
 61 |     }
 62 |   },
 63 |   computed: {
 64 |     hasItems() {
 65 |       return !!this.timelineItems.length
 66 |     },
 67 |     dataTimeline() {
 68 |       if (this.order === 'desc')
 69 |         return this.orderItems(this.timelineItems, 'desc')
 70 |       if (this.order === 'asc')
 71 |         return this.orderItems(this.timelineItems, 'asc')
 72 |       return this.timelineItems
 73 |     }
 74 |   },
 75 |   methods: {
 76 |     wrapperItemClass(timelineIndex) {
 77 |       const isSameYearPreviousAndCurrent = this.checkYearTimelineItem(
 78 |         timelineIndex
 79 |       )
 80 |       const isUniqueYear =
 81 |         this.uniqueYear &&
 82 |         isSameYearPreviousAndCurrent &&
 83 |         this.order !== undefined
 84 |       return {
 85 |         'wrapper-item': true,
 86 |         'unique-timeline': this.uniqueTimeline || isUniqueYear
 87 |       }
 88 |     },
 89 |     checkYearTimelineItem(timelineIndex) {
 90 |       const previousItem = this.dataTimeline[timelineIndex - 1]
 91 |       const nextItem = this.dataTimeline[timelineIndex + 1]
 92 |       const currentItem = this.dataTimeline[timelineIndex]
 93 |       if (!previousItem || !nextItem) {
 94 |         return false
 95 |       }
 96 |       const fullPreviousYear = this.getYear(previousItem)
 97 |       const fullNextYear = this.getYear(nextItem)
 98 |       const fullCurrentYear = this.getYear(currentItem)
 99 |       return (
100 |         (fullPreviousYear === fullCurrentYear &&
101 |           fullCurrentYear === fullNextYear) ||
102 |         fullCurrentYear === fullNextYear
103 |       )
104 |     },
105 |     getYear(date) {
106 |       return date.from.getFullYear()
107 |     },
108 |     hasYear(dataTimeline) {
109 |       return (
110 |         dataTimeline.hasOwnProperty('from') && dataTimeline.from !== undefined
111 |       )
112 |     },
113 |     getTimelineItemsAssembled(items) {
114 |       const itemsGroupByYear = []
115 |       items.forEach(item => {
116 |         const fullTime = item.from.getTime()
117 |         if (itemsGroupByYear[fullTime]) {
118 |           return itemsGroupByYear[fullTime].push(item)
119 |         }
120 |         itemsGroupByYear[fullTime] = [item]
121 |       })
122 |       return itemsGroupByYear
123 |     },
124 |     orderItems(items, typeOrder) {
125 |       const itemsGrouped = this.getTimelineItemsAssembled(items)
126 |       const keysItemsGrouped = Object.keys(itemsGrouped)
127 |       const timeItemsOrdered = keysItemsGrouped.sort((a, b) => {
128 |         if (typeOrder === 'desc') {
129 |           return b - a
130 |         }
131 |         return a - b
132 |       })
133 |       const mappedItems = timeItemsOrdered.map(
134 |         timeItem => itemsGrouped[timeItem]
135 |       )
136 |       return [].concat.apply([], mappedItems)
137 |     }
138 |   }
139 | }
140 | </script>
141 | 
142 | <style lang="scss" scoped>
143 | .timeline {
144 |   text-align: left;
145 |   width: 100%;
146 |   max-width: 500px;
147 |   .wrapper-timeline {
148 |     position: relative;
149 |   }
150 |   .wrapper-item {
151 |     display: grid;
152 |     grid-template-columns: 100px 1fr;
153 |     margin-bottom: 20px;
154 |     .section-year {
155 |       display: flex;
156 |       flex-direction: column;
157 |       justify-content: space-between;
158 |       align-items: flex-end;
159 |       padding: 15px;
160 |       font-weight: bold;
161 |       font-size: 18px;
162 |       .year {
163 |         margin: 0;
164 |       }
165 |     }
166 |     &.unique-timeline {
167 |       margin-bottom: 0;
168 |     }
169 |   }
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/components/TimelineItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="timeline-item">
 3 |     <div class="item">
 4 |       <span :style="getBackgroundColour(itemTimeline.color)" class="dot" />
 5 |       <h3 class="date-item">{{ getFormattedDate(itemTimeline) }}</h3>
 6 |       <h4 class="title-item" v-html="itemTimeline.title" />
 7 |       <p class="description-item" v-html="itemTimeline.description" />
 8 |     </div>
 9 |   </section>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'TimelineItem',
15 |   props: {
16 |     itemTimeline: {
17 |       type: Object,
18 |       default: () => ({})
19 |     },
20 |     colorDots: {
21 |       type: String,
22 |       default: '#2da1bf'
23 |     },
24 |     dateLocale: {
25 |       type: String,
26 |       default: ''
27 |     }
28 |   },
29 |   methods: {
30 |     getBackgroundColour(color) {
31 |       return color ? `background:${color}` : `background:${this.colorDots}`
32 |     },
33 |     getFormattedDate(item) {
34 |       const locale = this.dateLocale || window.navigator.language
35 |       const nameMonth = item.from.toLocaleDateString(locale, { month: 'long' })
36 |       if (item.showDayAndMonth) {
37 |         const day = item.from.getDate()
38 |         return `${day}. ${nameMonth}`
39 |       }
40 | 
41 |       return nameMonth
42 |     }
43 |   }
44 | }
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | .timeline-item {
49 |   .item {
50 |     border-left: 5px solid #ccd5db;
51 |     padding: 20px 0 20px 15px;
52 |     position: relative;
53 |   }
54 |   .date-item {
55 |     margin: 0;
56 |     text-transform: uppercase;
57 |     font-size: 16px;
58 |     letter-spacing: 2px;
59 |   }
60 |   .title-item {
61 |     margin: 0;
62 |     padding: 5px 0;
63 |     font-size: 15px;
64 |     font-weight: 500;
65 |   }
66 |   .description-item {
67 |     font-weight: 100;
68 |     margin: 0;
69 |   }
70 |   .dot {
71 |     display: block;
72 |     position: absolute;
73 |     width: 15px;
74 |     height: 15px;
75 |     border-radius: 50%;
76 |     left: -10px;
77 |     top: 26px;
78 |   }
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Timeline from './Timeline.vue'
3 | 
4 | Vue.component(Timeline.name, Timeline)
5 | 
6 | export default Timeline
7 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------