vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Updated messages to V3

pull/496/head
Cagatay Civici 2020-09-23 14:39:14 +03:00
parent 32cc3b0357
commit 6e3eb8d585
3 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/message/Message.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="p-message"> <transition name="p-message" appear>
<div :class="containerClass" v-if="visible" role="alert"> <div :class="containerClass" v-if="visible" role="alert">
<div class="p-message-wrapper"> <div class="p-message-wrapper">
<span :class="iconClass"></span> <span :class="iconClass"></span>
@ -86,16 +86,15 @@ export default {
position: relative; position: relative;
} }
.p-message-enter { .p-message-enter-from {
opacity: 0; opacity: 0;
} }
.p-message-enter-active { .p-message-enter-active {
-webkit-transition: opacity .3s;
transition: opacity .3s; transition: opacity .3s;
} }
.p-message.p-message-leave { .p-message.p-message-leave-from {
max-height: 1000px; max-height: 1000px;
} }
@ -107,8 +106,7 @@ export default {
.p-message-leave-active { .p-message-leave-active {
overflow: hidden; overflow: hidden;
-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s; transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .15s;
transition: max-height .3 cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
} }
.p-message-leave-active .p-message-close { .p-message-leave-active .p-message-close {

12
src/views/message/MessageDemo.vue
View File

@ -17,22 +17,21 @@
<h5>Dynamic</h5> <h5>Dynamic</h5>
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/> <transition-group name="p-message" tag="div">
<transition-group name="p-messages" tag="div">
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message> <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
</transition-group> </transition-group>
<h5>Auto Dismiss</h5> <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> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <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" /> <InputText id="username" placeholder="Username" class="p-invalid" />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="p-formgroup-inline"> <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" /> <InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage /> <InlineMessage />
</div> </div>
@ -60,9 +59,6 @@ export default {
{severity: 'success', content: 'Dynamic Success Message'}, {severity: 'success', content: 'Dynamic Success Message'},
{severity: 'warn', content: 'Dynamic Warning Message'} {severity: 'warn', content: 'Dynamic Warning Message'}
] ]
},
removeMessages() {
this.messages = null;
} }
}, },
components: { components: {

12
src/views/message/MessageDoc.vue
View File

@ -239,22 +239,21 @@ import InlineMessage from 'primevue/inlinemessage';
&lt;h5&gt;Dynamic&lt;/h5&gt; &lt;h5&gt;Dynamic&lt;/h5&gt;
&lt;Button label="Show" @click="addMessages()" /&gt; &lt;Button label="Show" @click="addMessages()" /&gt;
&lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt; &lt;transition-group name="p-message" tag="div"&gt;
&lt;transition-group name="p-messages" tag="div"&gt;
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&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;/transition-group&gt;
&lt;h5&gt;Auto Dismiss&lt;/h5&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;h5&gt;Validation Message&lt;/h5&gt;
&lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&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;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
&lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt; &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-formgroup-inline"&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;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
&lt;InlineMessage /&gt; &lt;InlineMessage /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -276,9 +275,6 @@ export default {
{severity: 'success', content: 'Dynamic Success Message'}, {severity: 'success', content: 'Dynamic Success Message'},
{severity: 'warn', content: 'Dynamic Warning Message'} {severity: 'warn', content: 'Dynamic Warning Message'}
] ]
},
removeMessages() {
this.messages = null;
} }
} }
} }