From 1f6b2dd1359b4a9712a960175df2888c2f81d486 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 24 Nov 2020 12:24:39 +0300
Subject: [PATCH] Fixed #672 - New Timeline Component

---
 exports/timeline.d.ts                         |   1 +
 exports/timeline.js                           |   2 +
 public/themes/arya-blue/theme.css             |  25 ++
 public/themes/arya-green/theme.css            |  25 ++
 public/themes/arya-orange/theme.css           |  25 ++
 public/themes/arya-purple/theme.css           |  25 ++
 public/themes/bootstrap4-dark-blue/theme.css  |  25 ++
 .../themes/bootstrap4-dark-purple/theme.css   |  25 ++
 public/themes/bootstrap4-light-blue/theme.css |  25 ++
 .../themes/bootstrap4-light-purple/theme.css  |  25 ++
 public/themes/fluent-light/theme.css          |  25 ++
 public/themes/luna-amber/theme.css            |  25 ++
 public/themes/luna-blue/theme.css             |  25 ++
 public/themes/luna-green/theme.css            |  25 ++
 public/themes/luna-pink/theme.css             |  25 ++
 public/themes/md-dark-deeppurple/theme.css    |  25 ++
 public/themes/md-dark-indigo/theme.css        |  25 ++
 public/themes/md-light-deeppurple/theme.css   |  25 ++
 public/themes/md-light-indigo/theme.css       |  25 ++
 public/themes/mdc-dark-deeppurple/theme.css   |  25 ++
 public/themes/mdc-dark-indigo/theme.css       |  25 ++
 public/themes/mdc-light-deeppurple/theme.css  |  25 ++
 public/themes/mdc-light-indigo/theme.css      |  25 ++
 public/themes/nova-accent/theme.css           |  25 ++
 public/themes/nova-alt/theme.css              |  25 ++
 public/themes/nova-vue/theme.css              |  25 ++
 public/themes/nova/theme.css                  |  25 ++
 public/themes/rhea/theme.css                  |  25 ++
 public/themes/saga-blue/theme.css             |  25 ++
 public/themes/saga-green/theme.css            |  25 ++
 public/themes/saga-orange/theme.css           |  25 ++
 public/themes/saga-purple/theme.css           |  25 ++
 public/themes/vela-blue/theme.css             |  25 ++
 public/themes/vela-green/theme.css            |  25 ++
 public/themes/vela-orange/theme.css           |  25 ++
 public/themes/vela-purple/theme.css           |  25 ++
 src/AppMenu.vue                               |   1 +
 src/assets/styles/app/_menu.scss              |   5 +
 src/components/timeline/Timeline.d.ts         |  13 +
 src/components/timeline/Timeline.vue          | 164 ++++++++
 src/main.js                                   |   2 +
 src/router/index.js                           |   5 +
 src/views/timeline/TimelineDemo.vue           | 165 ++++++++
 src/views/timeline/TimelineDoc.vue            | 360 ++++++++++++++++++
 44 files changed, 1568 insertions(+)
 create mode 100644 exports/timeline.d.ts
 create mode 100644 exports/timeline.js
 create mode 100644 src/components/timeline/Timeline.d.ts
 create mode 100644 src/components/timeline/Timeline.vue
 create mode 100644 src/views/timeline/TimelineDemo.vue
 create mode 100644 src/views/timeline/TimelineDoc.vue

diff --git a/exports/timeline.d.ts b/exports/timeline.d.ts
new file mode 100644
index 000000000..ee9a556a9
--- /dev/null
+++ b/exports/timeline.d.ts
@@ -0,0 +1 @@
+export * from './components/timeline/Timeline';
\ No newline at end of file
diff --git a/exports/timeline.js b/exports/timeline.js
new file mode 100644
index 000000000..31416916c
--- /dev/null
+++ b/exports/timeline.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/timeline/Timeline.vue');
\ No newline at end of file
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 9b0b1e818..fb120681b 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #64B5F6;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1e1e1e;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #383838;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 9b033a1b8..29ab61abb 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #81C784;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1e1e1e;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #383838;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 688ea74a0..17717903e 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #FFD54F;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1e1e1e;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #383838;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 7712e7f1d..cfd659492 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #BA68C8;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1e1e1e;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #383838;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index fcdf63731..ec71ab428 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #8dd0ff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #3f4b5b;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #3f4b5b;
   background: #2a323d;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index d5ffd7e5c..bbd49b491 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #c298d8;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #3f4b5b;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #3f4b5b;
   background: #2a323d;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 15b346b8d..b528f7466 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #007bff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index fcc9b491b..bb542dc0b 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #883cae;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index df4124790..7f2057ff3 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #0078d4;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #a19f9d;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #a19f9d;
   background: #ffffff;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index da0e2f9bf..e2801b2d6 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #FFE082;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #191919;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index ab1ea98b3..06ebdddf8 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #81D4FA;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #191919;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index f9f7f7a53..3c6716f4b 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #C5E1A5;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #191919;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 8758039b2..7794eaf6d 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #F48FB1;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #191919;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 49842a859..f99388c95 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index cf1fa25cc..3c465cc22 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 6df57fd29..db75d5630 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 56d6ee974..729483369 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 267c97a50..004ce8d64 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index be73cd4db..43510c2aa 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 4c8e55918..0ae10dcf2 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 8a70f9184..f4f43e326 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2371,6 +2371,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #bdbdbd;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #bdbdbd;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 4c8e1790f..49902671e 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #e02365;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #c8c8c8;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index f9c39aade..fd3c481a0 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #007ad9;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #c8c8c8;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 381f15100..5bad15699 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #41b883;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #c8c8c8;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 049bf1d1b..f76b4f13f 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2359,6 +2359,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #007ad9;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #c8c8c8;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 761a107f0..aadfb786c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 0 none;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #AFD3C8;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #c8c8c8;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dadada;
   background: #ffffff;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 51d29b707..5e6da29f6 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #2196F3;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #ffffff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 517ac868f..8147df6a7 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #4CAF50;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #ffffff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f2a9be488..7bc7cc140 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #FFC107;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #ffffff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index ccde48182..073013ad1 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #9C27B0;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #ffffff;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #dee2e6;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index e72a611b5..5c0b0791a 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #64B5F6;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1f2d40;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #304562;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index c65492c89..093c5b654 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #81C784;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1f2d40;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #304562;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 379fcf390..d3510edaa 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #FFD54F;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1f2d40;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #304562;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index d0f193f1a..61428364d 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2347,6 +2347,31 @@
     content: "";
   }
 }
+.p-timeline .p-timeline-event-marker {
+  border: 2px solid #BA68C8;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-color: #1f2d40;
+}
+.p-timeline .p-timeline-event-connector {
+  background-color: #304562;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  padding: 0 1rem;
+}
+.p-timeline.p-timeline-vertical .p-timeline-event-connector {
+  width: 2px;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  padding: 1rem 0;
+}
+.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+  height: 2px;
+}
+
 .p-tree {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index b9e6cccf3..b3d249e87 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -119,6 +119,7 @@
                 <router-link to="/organizationchart">OrganizationChart</router-link>
                 <router-link to="/paginator">Paginator</router-link>
                 <router-link to="/picklist">PickList</router-link>
+                <router-link to="/timeline">Timeline <span class="p-tag">New</span></router-link>
                 <router-link to="/tree" v-slot="{isActive}" custom>
                     <div>
                         <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index 54c37d831..891cffc34 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -54,6 +54,11 @@
                 &.router-link-exact-active {
                     font-weight: 700;
                 }
+
+                .p-tag {
+                    padding-top:.125rem;
+                    padding-bottom: .125rem;
+                }
             }
 
             div {
diff --git a/src/components/timeline/Timeline.d.ts b/src/components/timeline/Timeline.d.ts
new file mode 100644
index 000000000..681c1d4ed
--- /dev/null
+++ b/src/components/timeline/Timeline.d.ts
@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+export declare class Timeline extends Vue {
+    value?: any[];
+    align?: string;
+    layout?: string;
+    dataKey?: string;
+    $slots: {
+        content: VNode[];
+        opposite: VNode[];
+        marker: VNode[];
+    }
+}
\ No newline at end of file
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
new file mode 100644
index 000000000..6e205f2b7
--- /dev/null
+++ b/src/components/timeline/Timeline.vue
@@ -0,0 +1,164 @@
+<template>
+    <div :class="containerClass">
+        <div v-for="(item,index) of value" :key="getKey(item, index)" class="p-timeline-event">
+            <div class="p-timeline-event-opposite">
+                <slot name="opposite" :item="item" :index="index"></slot>
+            </div>
+            <div class="p-timeline-event-separator">
+                <slot name="marker" :item="item" :index="index">
+                    <div class="p-timeline-event-marker"></div>
+                </slot>
+                <div v-if="index !== (value.length - 1)" class="p-timeline-event-connector"></div>
+            </div>
+            <div class="p-timeline-event-content">
+                <slot name="content" :item="item" :index="index"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    props: {
+        value: null,
+        align: {
+            mode: String,
+            default: 'left'
+        },
+        layout: {
+            mode: String,
+            default: 'vertical'
+        },
+        dataKey: null
+    },
+    methods: {
+        getKey(item, index) {
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-timeline p-component',
+                'p-timeline-' + this.align,
+                'p-timeline-' + this.layout
+            ];
+        }
+    }
+}
+</script>
+
+<style>
+.p-timeline {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+}
+
+.p-timeline-left .p-timeline-event-opposite {
+    text-align: right;
+}
+
+.p-timeline-left .p-timeline-event-content {
+    text-align: left;
+}
+
+.p-timeline-right .p-timeline-event {
+    flex-direction: row-reverse;
+}
+
+.p-timeline-right .p-timeline-event-opposite {
+    text-align: left;
+}
+
+.p-timeline-right .p-timeline-event-content {
+    text-align: right;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    flex-direction: row-reverse;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+    text-align: right;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+    text-align: left;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+    text-align: left;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+    text-align: right;
+}
+
+.p-timeline-event {
+    display: flex;
+    position: relative;
+    min-height: 70px;
+}
+
+.p-timeline-event:last-child {
+    min-height: 0;
+}
+
+.p-timeline-event-opposite {
+    flex: 1;
+    padding: 0 1rem;
+}
+
+.p-timeline-event-content {
+    flex: 1;
+    padding: 0 1rem;
+}
+
+.p-timeline-event-separator {
+    flex: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.p-timeline-event-marker {
+    display: flex;
+    align-self: baseline;
+}
+
+.p-timeline-event-connector {
+    flex-grow: 1;
+}
+
+.p-timeline-horizontal {
+    flex-direction: row;
+}
+
+.p-timeline-horizontal .p-timeline-event {
+    flex-direction: column;
+    flex: 1;
+}
+
+.p-timeline-horizontal .p-timeline-event:last-child {
+    flex: 0;
+}
+
+.p-timeline-horizontal .p-timeline-event-separator {
+    flex-direction: row;
+}
+
+.p-timeline-horizontal .p-timeline-event-connector  {
+    width: 100%;
+}
+
+.p-timeline-bottom .p-timeline-event {
+    flex-direction: column-reverse;
+}
+
+.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    flex-direction: column-reverse;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index df22e691e..3e7880a21 100644
--- a/src/main.js
+++ b/src/main.js
@@ -66,6 +66,7 @@ import TabPanel from './components/tabpanel/TabPanel';
 import Terminal from './components/terminal/Terminal';
 import Textarea from './components/textarea/Textarea';
 import TieredMenu from './components/tieredmenu/TieredMenu';
+import Timeline from './components/timeline/Timeline';
 import Tree from './components/tree/Tree';
 import TreeTable from './components/treetable/TreeTable';
 import Toast from './components/toast/Toast';
@@ -167,6 +168,7 @@ app.component('TabMenu', TabMenu);
 app.component('Terminal', Terminal);
 app.component('Textarea', Textarea);
 app.component('TieredMenu', TieredMenu);
+app.component('Timeline', Timeline);
 app.component('Toast', Toast);
 app.component('Toolbar', Toolbar);
 app.component('ToggleButton', ToggleButton);
diff --git a/src/router/index.js b/src/router/index.js
index a312c0a25..58a205b5a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -576,6 +576,11 @@ const routes = [
         name: 'tieredmenu',
         component: () => import('../views/tieredmenu/TieredMenuDemo.vue')
     },
+    {
+        path: '/timeline',
+        name: 'timeline',
+        component: () => import('../views/timeline/TimelineDemo.vue')
+    },
     {
         path: '/toast',
         name: 'toast',
diff --git a/src/views/timeline/TimelineDemo.vue b/src/views/timeline/TimelineDemo.vue
new file mode 100644
index 000000000..991c8f78c
--- /dev/null
+++ b/src/views/timeline/TimelineDemo.vue
@@ -0,0 +1,165 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Timeline</h1>
+                <p>Timeline visualizes a series of chained events.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Left Align</h5>
+                <Timeline :value="events1">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Right Align</h5>
+                <Timeline :value="events1" align="right">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Alternate Align</h5>
+                <Timeline :value="events1" align="alternate">
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Opposite Content</h5>
+                <Timeline :value="events1">
+                    <template #opposite="slotProps">
+                        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                    </template>
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Customized</h5>
+                <Timeline :value="events1" align="alternate" class="customized-timeline">
+                     <template #marker="slotProps">
+                        <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                            <i :class="slotProps.item.icon"></i>
+                        </span>
+                    </template>
+                    <template #content="slotProps">
+                        <Card>
+                            <template #title>
+                                {{slotProps.item.status}}
+                            </template>
+                            <template #subtitle>
+                                {{slotProps.item.date}}
+                            </template>
+                            <template #content>
+                                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                                <Button label="Read more" class="p-button-text"></Button>
+                            </template>
+                        </Card>
+                    </template>
+                </Timeline>
+            </div>
+
+            <div class="card">
+                <h5>Horizontal</h5>
+                <h6>Top Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="top">
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+
+                <h6>Bottom Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="bottom">
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+
+                <h6>Alternate Align</h6>
+                <Timeline :value="events2" layout="horizontal" align="alternate">
+                    <template #content="slotProps">
+                        {{slotProps.item}}
+                    </template>
+                </Timeline>
+            </div>
+        </div>
+
+        <TimelineDoc />
+    </div>
+</template>
+
+<script>
+import TimelineDoc from './TimelineDoc';
+
+export default {
+    data() {
+        return {
+            events1: [
+                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+            ],
+            events2: [
+                "2020", "2021", "2022", "2023"
+            ]
+        }
+    },
+    components: {
+        'TimelineDoc': TimelineDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-marker {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+::v-deep(.p-timeline-event-content)
+::v-deep(.p-timeline-event-opposite) {
+    line-height: 1;
+}
+
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+            .p-timeline-event:nth-child(even) {
+                flex-direction: row !important;
+                
+                .p-timeline-event-content {
+                    text-align: left !important;
+                }
+            }
+
+            .p-timeline-event-opposite {
+                flex: 0;
+            }
+
+            .p-card {
+                margin-top: 1rem;
+            }
+        }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
new file mode 100644
index 000000000..ad7151604
--- /dev/null
+++ b/src/views/timeline/TimelineDoc.vue
@@ -0,0 +1,360 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Timeline from 'primevue/timeline';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event.
+					Example below is a sample events array that is used throughout the documentation.</p>
+<pre v-code.script>
+<code>
+export default {
+    data() {
+        return {
+            events: [
+                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+            ],
+            events2: [
+                "2020", "2021", "2022", "2023"
+            ]
+        }
+    }
+}
+
+</code></pre>
+
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<h5>Layout</h5>
+				<p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<h5>Alignment</h5>
+				<p>Location of the timeline bar is defined using the <i>align</i> property.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events" align="right"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events" align="alternate"&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<h5>Opposite</h5>
+				<p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events"&gt;
+	&lt;template #opposite="slotProps"&gt;
+		&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
+	&lt;/template&gt;
+	&lt;template #content="slotProps"&gt;
+		&#123;&#123;slotProps.item.status&#125;&#125;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<h5>Custom Markers</h5>
+				<p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;Timeline :value="events" align="alternate" class="customized-timeline"&gt;
+	&lt;template #marker="slotProps"&gt;
+		&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
+			&lt;i :class="slotProps.item.icon"&gt;&lt;/i&gt;
+		&lt;/span&gt;
+	&lt;/template&gt;
+	&lt;template #content="slotProps"&gt;
+		&lt;Card&gt;
+			&lt;template #title&gt;
+				&#123;&#123;slotProps.item.status&#125;&#125;
+			&lt;/template&gt;
+			&lt;template #subtitle&gt;
+				&#123;&#123;slotProps.item.date&#125;&#125;
+			&lt;/template&gt;
+			&lt;template #content&gt;
+				&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" /&gt;
+				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+					quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
+				&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
+			&lt;/template&gt;
+		&lt;/Card&gt;
+	&lt;/template&gt;
+&lt;/Timeline&gt;
+</template>
+</code></pre>
+
+				<h5>Properties</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+								<td>value</td>
+								<td>array</td>
+								<td>null</td>
+								<td>An array of events to display.</td>
+							</tr>
+							<tr>
+								<td>align</td>
+								<td>string</td>
+								<td>left</td>
+								<td>Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.</td>
+							</tr>
+							<tr>
+								<td>layout</td>
+								<td>string</td>
+								<td>vertical</td>
+								<td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
+							</tr>
+							<tr>
+								<td>dataKey</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Name of the field that uniquely identifies the a record in the data.</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+								<td>p-timeline</td>
+								<td>Container element.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-left</td>
+								<td>Container element when alignment is left.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-right</td>
+								<td>Container element when alignment is right.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-top</td>
+								<td>Container element when alignment is top.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-bottom</td>
+								<td>Container element when alignment is bottom.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-alternate</td>
+								<td>Container element when alignment is alternating.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-vertical</td>
+								<td>Container element of a vertical timeline.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-horizontal</td>
+								<td>Container element of a horizontal timeline.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event</td>
+								<td>Event element.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event-opposite</td>
+								<td>Opposite of an event content.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event-content</td>
+								<td>Event content.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event-separator</td>
+								<td>Separator element of an event.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event-marker</td>
+								<td>Marker element of an event.</td>
+							</tr>
+							<tr>
+								<td>p-timeline-event-connector</td>
+								<td>Connector element of an event.</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;div class="card"&gt;
+	&lt;h5&gt;Left Align&lt;/h5&gt;
+	&lt;Timeline :value="events1"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item.status&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Right Align&lt;/h5&gt;
+	&lt;Timeline :value="events1" align="right"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item.status&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Alternate Align&lt;/h5&gt;
+	&lt;Timeline :value="events1" align="alternate"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item.status&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Opposite Content&lt;/h5&gt;
+	&lt;Timeline :value="events1"&gt;
+		&lt;template #opposite="slotProps"&gt;
+			&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
+		&lt;/template&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item.status&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Customized&lt;/h5&gt;
+	&lt;Timeline :value="events1" align="alternate" class="customized-timeline"&gt;
+		&lt;template #marker="slotProps"&gt;
+			&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
+				&lt;i :class="slotProps.item.icon"&gt;&lt;/i&gt;
+			&lt;/span&gt;
+		&lt;/template&gt;
+		&lt;template #content="slotProps"&gt;
+			&lt;Card&gt;
+				&lt;template #title&gt;
+					&#123;&#123;slotProps.item.status&#125;&#125;
+				&lt;/template&gt;
+				&lt;template #subtitle&gt;
+					&#123;&#123;slotProps.item.date&#125;&#125;
+				&lt;/template&gt;
+				&lt;template #content&gt;
+					&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" /&gt;
+					&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+						quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
+					&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
+				&lt;/template&gt;
+			&lt;/Card&gt;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+	&lt;h5&gt;Horizontal&lt;/h5&gt;
+	&lt;h6&gt;Top Align&lt;/h6&gt;
+	&lt;Timeline :value="events2" layout="horizontal" align="top"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+
+	&lt;h6&gt;Bottom Align&lt;/h6&gt;
+	&lt;Timeline :value="events2" layout="horizontal" align="bottom"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+
+	&lt;h6&gt;Alternate Align&lt;/h6&gt;
+	&lt;Timeline :value="events2" layout="horizontal" align="alternate"&gt;
+		&lt;template #content="slotProps"&gt;
+			&#123;&#123;slotProps.item&#125;&#125;
+		&lt;/template&gt;
+	&lt;/Timeline&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+    data() {
+        return {
+            events1: [
+                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+            ],
+            events2: [
+                "2020", "2021", "2022", "2023"
+            ]
+        }
+    }
+}
+
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>