diff --git a/src/App.vue b/src/App.vue
index a076bd7b0..633046367 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,9 @@
+
+
+
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index cb04bbe7c..eb6c81a01 100644
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -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) {
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index 966d4797b..d8b0a8908 100644
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -21,7 +21,11 @@ export default {
message: null
},
mounted() {
-
+ if (this.message.life) {
+ setTimeout(() => {
+ this.close();
+ }, this.message.life)
+ }
},
methods: {
close() {
diff --git a/src/components/toast/ToastService.js b/src/components/toast/ToastService.js
index a44f00a10..7d59efa4f 100644
--- a/src/components/toast/ToastService.js
+++ b/src/components/toast/ToastService.js
@@ -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');
}
}
}
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index 452d5758d..878be9a2c 100644
--- a/src/views/toast/ToastDemo.vue
+++ b/src/views/toast/ToastDemo.vue
@@ -23,6 +23,32 @@
+
+
Positions
+
+
+ Options
+
+
+ Remove All
+
@@ -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();
}
}
}