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

Options for Toast

pull/12/head
cagataycivici 2019-02-08 16:16:00 +03:00
parent 9574459d5b
commit 35b5433d38
5 changed files with 78 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -8,6 +8,9 @@
<app-footer />
</div>
<Toast />
<Toast position="topleft" group="tl" />
<Toast position="bottomleft" group="bl" />
<Toast position="bottomright" group="br" />
</div>
</template>

15
src/components/toast/Toast.vue
View File

@ -12,6 +12,7 @@ var messageIdx = 0;
export default {
props: {
group: String,
position: {
type: String,
default: 'topright'
@ -23,7 +24,19 @@ export default {
}
},
mounted() {
ToastEventBus.$on('add', (message) => this.add(message));
ToastEventBus.$on('add', (message) => {
if (this.group == message.group) {
this.add(message);
}
});
ToastEventBus.$on('remove-group', (group) => {
if (this.group === group) {
this.messages = [];
}
});
ToastEventBus.$on('remove-all-groups', () => {
this.messages = [];
});
},
methods: {
add(message) {

6
src/components/toast/ToastMessage.vue
View File

@ -21,7 +21,11 @@ export default {
message: null
},
mounted() {
if (this.message.life) {
setTimeout(() => {
this.close();
}, this.message.life)
}
},
methods: {
close() {

6
src/components/toast/ToastService.js
View File

@ -6,6 +6,12 @@ const ToastService = {
Vue.prototype.$toast = {
add: (message) => {
ToastEventBus.$emit('add', message);
},
removeGroup: (group) => {
ToastEventBus.$emit('remove-group', group);
},
removeAllGroups: () => {
ToastEventBus.$emit('remove-all-groups');
}
}
}

55
src/views/toast/ToastDemo.vue
View File

@ -23,6 +23,32 @@
<Button label="Error" class="p-button-danger" @click="showError" />
</div>
</div>
<h3>Positions</h3>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<Button label="Top Left" @click="showTopLeft" />
</div>
<div class="p-col-12 p-md-4">
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
</div>
<div class="p-col-12 p-md-4">
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
</div>
</div>
<h3>Options</h3>
<div class="p-grid">
<div class="p-col-12 p-md-6">
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
</div>
<div class="p-col-12 p-md-6">
<Button @click="showSticky" label="Sticky" />
</div>
</div>
<h3>Remove All</h3>
<Button @click="clear" label="Clear" />
</div>
</div>
</template>
@ -32,21 +58,40 @@ export default {
data() {
return {
messages: [],
count: 0
}
},
methods: {
showSuccess() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
},
showInfo() {
this.$toast.add({severity:'info', summary: 'Info Message', detail:'PrimeNG rocks'});
this.$toast.add({severity:'info', summary: 'Info Message', detail:'PrimeVue rocks', life: 3000});
},
showWarn() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes'});
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes', life: 3000});
},
showError() {
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Validation failed'});
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Validation failed', life: 3000});
},
showTopLeft() {
this.$toast.add({severity: 'info', summary: 'Info ', detail: 'You need to close Me', group: 'tl', life: 3000});
},
showBottomLeft() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes', group: 'bl', life: 3000});
},
showBottomRight() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', group: 'br', life: 3000});
},
showSticky() {
this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me'});
},
showMultiple() {
this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
},
clear() {
this.$toast.removeAllGroups();
}
}
}