From 6e3eb8d58538e74759c4dc80c6ac19ab1d0c3394 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Sep 2020 14:39:14 +0300
Subject: [PATCH] Updated messages to V3

---
 src/components/message/Message.vue | 10 ++++------
 src/views/message/MessageDemo.vue  | 12 ++++--------
 src/views/message/MessageDoc.vue   | 12 ++++--------
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 0607b56e9..f375dfdff 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -1,5 +1,5 @@
 <template>
-    <transition name="p-message">
+    <transition name="p-message" appear>
         <div :class="containerClass" v-if="visible" role="alert">
             <div class="p-message-wrapper">
                 <span :class="iconClass"></span>
@@ -86,16 +86,15 @@ export default {
     position: relative;
 }
 
-.p-message-enter {
+.p-message-enter-from {
     opacity: 0;
 }
 
 .p-message-enter-active {
-    -webkit-transition: opacity .3s;
     transition: opacity .3s;
 }
 
-.p-message.p-message-leave {
+.p-message.p-message-leave-from {
     max-height: 1000px;
 }
 
@@ -107,8 +106,7 @@ export default {
 
 .p-message-leave-active {
     overflow: hidden;
-    -webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
-    transition: max-height .3 cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
+    transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;
 }
 
 .p-message-leave-active .p-message-close {
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index e1567fcad..50bf6d68e 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -17,22 +17,21 @@
 
                 <h5>Dynamic</h5>
                 <Button label="Show" @click="addMessages()" />
-                <Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
-                <transition-group name="p-messages" tag="div">
+                <transition-group name="p-message" tag="div">
                     <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
                 </transition-group>
 
                 <h5>Auto Dismiss</h5>
-                <Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
+                <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
 
                 <h5>Validation Message</h5>
                 <div class="p-formgroup-inline" style="margin-bottom:.5rem">
-                    <Label for="username" class="p-sr-only">Username</Label>
+                    <label for="username" class="p-sr-only">Username</label>
                     <InputText id="username" placeholder="Username" class="p-invalid" />
                     <InlineMessage>Username is required</InlineMessage>
                 </div>
                 <div class="p-formgroup-inline">
-                    <Label for="email" class="p-sr-only">email</Label>
+                    <label for="email" class="p-sr-only">email</label>
                     <InputText id="email" placeholder="Email" class="p-invalid" />
                     <InlineMessage />
                 </div>
@@ -60,9 +59,6 @@ export default {
                 {severity: 'success', content: 'Dynamic Success Message'},
                 {severity: 'warn', content: 'Dynamic Warning Message'}
             ]
-        },
-        removeMessages() {
-            this.messages = null;
         }
     },
     components: {
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index f3e83eb87..6de3cea14 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -239,22 +239,21 @@ import InlineMessage from 'primevue/inlinemessage';
 
 &lt;h5&gt;Dynamic&lt;/h5&gt;
 &lt;Button label="Show" @click="addMessages()" /&gt;
-&lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt;
-&lt;transition-group name="p-messages" tag="div"&gt;
+&lt;transition-group name="p-message" tag="div"&gt;
     &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
 &lt;/transition-group&gt;
 
 &lt;h5&gt;Auto Dismiss&lt;/h5&gt;
-&lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt;
+&lt;Message severity="warn" :life="3000" :sticky="false"&gt;This message will hide in 3 seconds.&lt;/Message&gt;
 
 &lt;h5&gt;Validation Message&lt;/h5&gt;
 &lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
-    &lt;Label for="username" class="p-sr-only"&gt;Username&lt;/Label&gt;
+    &lt;label for="username" class="p-sr-only"&gt;Username&lt;/label&gt;
     &lt;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
     &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
 &lt;/div&gt;
 &lt;div class="p-formgroup-inline"&gt;
-    &lt;Label for="email" class="p-sr-only"&gt;email&lt;/Label&gt;
+    &lt;label for="email" class="p-sr-only"&gt;email&lt;/label&gt;
     &lt;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
     &lt;InlineMessage /&gt;
 &lt;/div&gt;
@@ -276,9 +275,6 @@ export default {
 				{severity: 'success', content: 'Dynamic Success Message'},
 				{severity: 'warn', content: 'Dynamic Warning Message'}
 			]
-		},
-		removeMessages() {
-			this.messages = null;
 		}
 	}
 }