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

Initiated messages component

pull/12/head
cagataycivici 2019-02-05 13:23:06 +03:00
parent 8235da2b37
commit 8c82e73297
9 changed files with 122 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title> <title>PrimeVUE</title>
<link rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css"> <link rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3
src/AppMenu.vue
View File

@ -129,7 +129,8 @@
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 8, 'submenushow': activeMenuIndex === 8}"> <div :class="{'submenuhide': activeMenuIndex !== 8, 'submenushow': activeMenuIndex === 8}">
<div> <div>
<router-link to="/">&#9679; Link</router-link> <router-link to="/message">&#9679; Message</router-link>
<router-link to="/toast">&#9679; Toast</router-link>
</div> </div>
</div> </div>

1
src/assets/styles/primevue.css
View File

@ -11,6 +11,7 @@
@import '../../components/inputtext/InputText.css'; @import '../../components/inputtext/InputText.css';
@import '../../components/inputswitch/InputSwitch.css'; @import '../../components/inputswitch/InputSwitch.css';
@import '../../components/listbox/Listbox.css'; @import '../../components/listbox/Listbox.css';
@import '../../components/message/Message.css';
@import '../../components/multiselect/MultiSelect.css'; @import '../../components/multiselect/MultiSelect.css';
@import '../../components/overlaypanel/OverlayPanel.css'; @import '../../components/overlaypanel/OverlayPanel.css';
@import '../../components/panel/Panel.css'; @import '../../components/panel/Panel.css';

27
src/components/message/Message.css Normal file
View File

@ -0,0 +1,27 @@
.p-messages-wrapper {
padding: 1em;
position: relative;
}
.p-messages-icon-container,
.p-messages-close-container {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.p-messages-text {
display: inline-block;
vertical-align: middle;
}
.p-messages-icon {
padding: 0;
margin-right: .25em;
vertical-align: middle;
}
.p-messages .p-messages-summary {
font-weight: bold;
margin-right: .25em;
}

55
src/components/message/Message.vue Normal file
View File

@ -0,0 +1,55 @@
<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>
</div>
</div>
</template>
<script>
export default {
props: {
summary: String,
detail: String,
severity: {
type: String,
default: 'info'
},
closable: {
type: Boolean,
default: true
},
sticky: {
type: Boolean,
default: true
},
life: {
type: Number,
default: 3000
}
},
computed: {
containerClass() {
return 'p-messages p-component p-messages-' + this.severity;
},
iconClass() {
return ['p-messages-icon pi', {
'pi-check': this.severity === 'info',
'pi-info-circle': this.severity === 'success',
'pi-exclamation-triangle': this.severity === 'warn',
'pi-times': this.severity === 'error'
}];
}
}
}
</script>
<style>
</style>

4
src/main.js
View File

@ -16,8 +16,9 @@ import FullCalendar from './components/fullcalendar/FullCalendar';
import InputSwitch from './components/inputswitch/InputSwitch'; import InputSwitch from './components/inputswitch/InputSwitch';
import InputText from './components/inputtext/InputText'; import InputText from './components/inputtext/InputText';
import Fieldset from './components/fieldset/Fieldset'; import Fieldset from './components/fieldset/Fieldset';
import MultiSelect from './components/multiselect/MultiSelect';
import Listbox from './components/listbox/Listbox'; import Listbox from './components/listbox/Listbox';
import Message from './components/message/Message';
import MultiSelect from './components/multiselect/MultiSelect';
import OverlayPanel from './components/overlaypanel/OverlayPanel'; import OverlayPanel from './components/overlaypanel/OverlayPanel';
import Panel from './components/panel/Panel'; import Panel from './components/panel/Panel';
import Password from './components/password/Password'; import Password from './components/password/Password';
@ -57,6 +58,7 @@ Vue.component('InputSwitch', InputSwitch);
Vue.component('InputText', InputText); Vue.component('InputText', InputText);
Vue.component('Listbox', Listbox); Vue.component('Listbox', Listbox);
Vue.component('Fieldset', Fieldset); Vue.component('Fieldset', Fieldset);
Vue.component('Message', Message);
Vue.component('MultiSelect', MultiSelect); Vue.component('MultiSelect', MultiSelect);
Vue.component('OverlayPanel', OverlayPanel); Vue.component('OverlayPanel', OverlayPanel);
Vue.component('Panel', Panel); Vue.component('Panel', Panel);

5
src/router.js
View File

@ -131,6 +131,11 @@ export default new Router({
name: 'listbox', name: 'listbox',
component: () => import('./views/listbox/ListboxDemo.vue') component: () => import('./views/listbox/ListboxDemo.vue')
}, },
{
path: '/message',
name: 'message',
component: () => import('./views/message/MessageDemo.vue')
},
{ {
path: '/multiselect', path: '/multiselect',
name: 'multiselect', name: 'multiselect',

18
src/views/flexgrid/FlexGridDemo.vue
View File

@ -23,8 +23,8 @@
</div> </div>
<h3>Dynamic</h3> <h3>Dynamic</h3>
<p-button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" /> <Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
<p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /> <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
<div style="margin-top: .5em"> <div style="margin-top: .5em">
<transition-group name="dynamic-box" tag="div" class="p-grid"> <transition-group name="dynamic-box" tag="div" class="p-grid">
@ -352,28 +352,28 @@
<h3>Panels</h3> <h3>Panels</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col"> <div class="p-col">
<p-panel header="Godfather"> <Panel header="Godfather">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel> </Panel>
</div> </div>
<div class="p-col"> <div class="p-col">
<p-panel header="Godfather"> <Panel header="Godfather">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel> </Panel>
</div> </div>
<div class="p-col"> <div class="p-col">
<p-panel header="Godfather"> <Panel header="Godfather">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel> </Panel>
</div> </div>
</div> </div>
@ -466,7 +466,7 @@ export default {
.vertical-container { .vertical-container {
margin: 0; margin: 0;
height: 200px; height: 200px;
background: #f1f1f1; background: #c0c0c0;
border-radius: 4px; border-radius: 4px;
} }

19
src/views/message/MessageDemo.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Message</h1>
<p>Messages is used to display inline messages with various severities.</p>
</div>
</div>
<div class="content-section impleme
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>
</div>
</div>
</template>