Implemented message and validation message components

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 3px;
+  height: 1.538em;
-  -webkit-border-radius: 3px;
+  line-height: 1.538em;
-  border-radius: 3px;
+  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;

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;
+  top: -0.769em;
-  right: 0.5em;
+  right: -0.769em;
-  font-size: 1.5em;
+  width: 1.538em;
-  -moz-border-radius: 2px;
+  height: 1.538em;
-  -webkit-border-radius: 2px;
+  line-height: 1.538em;
-  border-radius: 2px;
+  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;

src/assets/styles/primevue.css

@@ -25,3 +25,4 @@
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
 @import '../../components/toolbar/Toolbar.css';
+@import '../../components/validationmessage/ValidationMessage.css';

src/components/message/Message.css

@@ -25,3 +25,33 @@
     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;
+}

src/components/message/Message.vue

@@ -1,22 +1,22 @@
 <template>
-    <div :class="containerClass">
+    <transition name="p-messages">
-        <div class="p-messages-wrapper">
+        <div :class="containerClass" v-if="visible">
-            <span :class="iconClass"></span>
+            <div class="p-messages-wrapper">
-            <div class="p-messages-text">
+                <span :class="iconClass"></span>
-                <slot></slot>
+                <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>
-            <button class="p-messages-close p-link">
-                <i class="p-messages-close-icon pi pi-times-circle"></i>
-            </button>   
         </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'
             }];
         }
     }

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;
+}

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>

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,

src/views/message/MessageDemo.vue

@@ -7,13 +7,65 @@
             </div>
         </div>
 
-        <div class="content-section impleme
+        <div class="content-section implementation">
-        ntation">
             <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>
+
+<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>