Implemented message and validation message components
cagataycivici
parent
8c82e73297
commit
27e2e19f4e
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -24,4 +24,5 @@
|
|||
@import '../../components/spinner/Spinner.css';
|
||||
@import '../../components/tabview/TabView.css';
|
||||
@import '../../components/textarea/Textarea.css';
|
||||
@import '../../components/toolbar/Toolbar.css';
|
||||
@import '../../components/toolbar/Toolbar.css';
|
||||
@import '../../components/validationmessage/ValidationMessage.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;
|
||||
}
|
||||
|
|
@ -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'
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue