From 27e2e19f4e7df077680aa8337c6ed3ba65191d8e Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 5 Feb 2019 15:18:53 +0300
Subject: [PATCH] Implemented message and validation message components

---
 public/themes/luna-amber/theme.css            | 23 ++++++--
 public/themes/luna-blue/theme.css             | 23 ++++++--
 public/themes/luna-green/theme.css            | 23 ++++++--
 public/themes/luna-pink/theme.css             | 23 ++++++--
 public/themes/nova-colored/theme.css          | 23 ++++++--
 public/themes/nova-dark/theme.css             | 23 ++++++--
 public/themes/nova-light/theme.css            | 23 ++++++--
 public/themes/rhea/theme.css                  | 23 ++++++--
 src/assets/styles/primevue.css                |  3 +-
 src/components/message/Message.css            | 30 ++++++++++
 src/components/message/Message.vue            | 39 ++++++++-----
 .../validationmessage/ValidationMessage.css   | 16 +++++
 .../validationmessage/ValidationMessage.vue   | 47 +++++++++++++++
 src/main.js                                   |  2 +
 src/views/message/MessageDemo.vue             | 58 ++++++++++++++++++-
 15 files changed, 314 insertions(+), 65 deletions(-)
 create mode 100644 src/components/validationmessage/ValidationMessage.css
 create mode 100644 src/components/validationmessage/ValidationMessage.vue

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 0c3254c84..bff9114d5 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 07a5204fa..a6822d5b5 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index aedd8b034..711f0da1a 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index a57b4e8ef..47f2a2845 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index a4f67a5bc..04f7f6ec1 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index c991f5c01..f847d8ee7 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 29595625e..6767d87e1 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #7fbcec;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #b7d8b7;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe399;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #f8b7bd;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 225699a00..c001b9c32 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2774,6 +2774,7 @@ body .p-messages.p-messages-info .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-info .p-messages-close {
+  background-color: #A3DEF8;
   color: #212121;
 }
 body .p-messages.p-messages-success {
@@ -2785,6 +2786,7 @@ body .p-messages.p-messages-success .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-success .p-messages-close {
+  background-color: #A3E2C6;
   color: #212121;
 }
 body .p-messages.p-messages-warn {
@@ -2796,6 +2798,7 @@ body .p-messages.p-messages-warn .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-warn .p-messages-close {
+  background-color: #ffe277;
   color: #212121;
 }
 body .p-messages.p-messages-error {
@@ -2807,20 +2810,28 @@ body .p-messages.p-messages-error .p-messages-icon {
   color: #212121;
 }
 body .p-messages.p-messages-error .p-messages-close {
+  background-color: #ff8b8b;
   color: #212121;
 }
 body .p-messages .p-messages-close {
-  top: 0.25em;
-  right: 0.5em;
-  font-size: 1.5em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  top: -0.769em;
+  right: -0.769em;
+  width: 1.538em;
+  height: 1.538em;
+  line-height: 1.538em;
+  text-align: center;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
   -moz-transition: box-shadow 0.2s;
   -o-transition: box-shadow 0.2s;
   -webkit-transition: box-shadow 0.2s;
   transition: box-shadow 0.2s;
 }
+body .p-messages .p-messages-close .p-messages-close-icon {
+  line-height: inherit;
+  font-size: 1.5em;
+}
 body .p-messages .p-messages-close:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 30b8347ff..8ff11866b 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -24,4 +24,5 @@
 @import '../../components/spinner/Spinner.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
-@import '../../components/toolbar/Toolbar.css';
\ No newline at end of file
+@import '../../components/toolbar/Toolbar.css';
+@import '../../components/validationmessage/ValidationMessage.css';
\ No newline at end of file
diff --git a/src/components/message/Message.css b/src/components/message/Message.css
index d021ac8d6..8c196ab39 100644
--- a/src/components/message/Message.css
+++ b/src/components/message/Message.css
@@ -24,4 +24,34 @@
 .p-messages .p-messages-summary {
     font-weight: bold;
     margin-right: .25em;
+}
+
+.p-messages-close {
+    position: absolute;
+}
+
+.p-messages-enter {
+    opacity: 0;
+}
+
+.p-messages.p-messages-leave-to {
+    max-height: 0;
+    opacity: 0;
+}
+
+.p-messages.p-messages-leave {
+    max-height: 1000px;
+}
+
+.p-messages-enter-active {
+    transition: opacity 1s;
+}
+
+.p-messages-leave-active {
+    overflow: hidden;
+    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .45s;
+}
+
+.p-messages-leave-active .p-messages-close {
+    display: none;
 }
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 47154023b..3f497f7f2 100644
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -1,22 +1,22 @@
 <template>
-    <div :class="containerClass">
-        <div class="p-messages-wrapper">
-            <span :class="iconClass"></span>
-            <div class="p-messages-text">
-                <slot></slot>
-            </div> 
-            <button class="p-messages-close p-link">
-                <i class="p-messages-close-icon pi pi-times-circle"></i>
-            </button>   
+    <transition name="p-messages">
+        <div :class="containerClass" v-if="visible">
+            <div class="p-messages-wrapper">
+                <span :class="iconClass"></span>
+                <div class="p-messages-text">
+                    <slot></slot>
+                </div>
+                <button class="p-messages-close p-link" @click="visible = false" v-if="closable">
+                    <i class="p-messages-close-icon pi pi-times"></i>
+                </button>   
+            </div>
         </div>
-    </div>
+    </transition>
 </template>
 
 <script>
 export default {
     props: {
-        summary: String,
-        detail: String,
         severity: {
             type: String,
             default: 'info'
@@ -34,6 +34,19 @@ export default {
             default: 3000
         }
     },
+    timeout: null,
+    data() {
+        return {
+            visible: true
+        }
+    },
+    mounted() {
+        if (!this.sticky) {
+            setTimeout(() => {
+                this.visible = false;
+            }, this.life);
+        }
+    },
     computed: {
         containerClass() {
             return 'p-messages p-component p-messages-' + this.severity;
@@ -43,7 +56,7 @@ export default {
                 'pi-check': this.severity === 'info',
                 'pi-info-circle': this.severity === 'success',
                 'pi-exclamation-triangle': this.severity === 'warn',
-                'pi-times': this.severity === 'error'
+                'pi-times-circle': this.severity === 'error'
             }];
         }
     }
diff --git a/src/components/validationmessage/ValidationMessage.css b/src/components/validationmessage/ValidationMessage.css
new file mode 100644
index 000000000..6db039aae
--- /dev/null
+++ b/src/components/validationmessage/ValidationMessage.css
@@ -0,0 +1,16 @@
+.p-message {
+    border: 1px solid;
+    margin: 0px .25em;
+    padding: .25em .5em;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.p-message .p-message-icon,
+.p-message .p-message-text {
+    vertical-align: middle;
+}
+
+.p-fluid .p-message {
+    display: block;
+}
\ No newline at end of file
diff --git a/src/components/validationmessage/ValidationMessage.vue b/src/components/validationmessage/ValidationMessage.vue
new file mode 100644
index 000000000..1f5ed8d35
--- /dev/null
+++ b/src/components/validationmessage/ValidationMessage.vue
@@ -0,0 +1,47 @@
+<template>
+    <div aria-live="polite" class="p-message p-component p-message-error">
+        <span :class="iconClass"></span>
+        <span class="p-message-text"><slot></slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        severity: {
+            type: String,
+            default: 'error'
+        }
+    },
+    timeout: null,
+    data() {
+        return {
+            visible: true
+        }
+    },
+    mounted() {
+        if (!this.sticky) {
+            setTimeout(() => {
+                this.visible = false;
+            }, this.life);
+        }
+    },
+    computed: {
+        containerClass() {
+            return 'p-message p-component p-message-' + this.severity;
+        },
+        iconClass() {
+            return ['p-message-icon pi', {
+                'pi-check': this.severity === 'info',
+                'pi-info-circle': this.severity === 'success',
+                'pi-exclamation-triangle': this.severity === 'warn',
+                'pi-times-circle': this.severity === 'error'
+            }];
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index d9325c52c..3e1ed13d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,6 +35,7 @@ import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabview/TabPanel';
 import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
+import ValidationMessage from './components/validationmessage/ValidationMessage';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -76,6 +77,7 @@ Vue.component('Textarea', Textarea);
 Vue.component('Toolbar', Toolbar);
 Vue.component('ToggleButton', ToggleButton);
 Vue.component('TriStateCheckbox', TriStateCheckbox);
+Vue.component('ValidationMessage', ValidationMessage);
 
 new Vue({
   router,
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index f61113255..d546a5e47 100644
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -7,13 +7,65 @@
             </div>
         </div>
 
-        <div class="content-section impleme
-        ntation">
+        <div class="content-section implementation">
             <h3 class="first">Severities</h3>
             <Message severity="success">Order Submitted</Message>
             <Message severity="info">PrimeVue Rocks</Message>
             <Message severity="warn">There are unsaved changes</Message>
             <Message severity="error">Validation Failed</Message>
+
+            <h3>Dynamic</h3>
+            <Button label="Show" @click="addMessages()" />
+            <Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
+            <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
+
+            <h3>Auto Dismiss</h3>
+            <Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
+
+            <h3>Validation Message</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <InputText placeholder="Username" class="p-error" />
+                    <ValidationMessage>Field is required</ValidationMessage>
+                </div>
+                <div class="p-col-12">
+                    <InputText placeholder="Email" class="p-error" :closable="false" />
+                    <ValidationMessage />
+                </div>
+            </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            messages: [],
+            count: 0
+        }
+    },
+    methods: {
+        addMessages() {
+            this.messages = [
+                {severity: 'info', content: 'Dynamic Info Message'},
+                {severity: 'success', content: 'Dynamic Success Message'},
+                {severity: 'warn', content: 'Dynamic Warning Message'}
+            ]
+        },
+        removeMessages() {
+            this.messages = null;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+button.p-button {
+    margin-right: .5em;
+}
+
+.p-inputtext {
+    margin-right: .25em;
+}
+</style>