| |
| Matomo - free/libre analytics platform |
|
|
| @link https://matomo.org |
| @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later |
| --> |
|
|
| <template> |
| <div class="notification-group"> |
| <Notification |
| v-for="(notification, index) in notifications" |
| :key="notification.id || `no-id-${index}`" |
| :notification-id="notification.id" |
| :title="notification.title" |
| :context="notification.context" |
| :type="notification.type" |
| :noclear="notification.noclear" |
| :toast-length="notification.toastLength" |
| :style="notification.style" |
| :animate="notification.animate" |
| :message="notification.message" |
| :notification-instance-id="notification.notificationInstanceId" |
| :css-class="notification.class" |
| @closed="removeNotification(notification.id)" |
| > |
| <div v-html="$sanitize(notification.message)"/> |
| </Notification> |
| </div> |
| </template> |
|
|
| <script lang="ts"> |
| import { defineComponent } from 'vue'; |
| import NotificationsStore from './Notifications.store'; |
| import Notification from './Notification.vue'; |
|
|
| export default defineComponent({ |
| props: { |
| group: String, |
| }, |
| components: { |
| Notification, |
| }, |
| computed: { |
| notifications() { |
| return NotificationsStore.state.notifications.filter((n) => { |
| if (this.group) { |
| return this.group === n.group; |
| } |
|
|
| return !n.group; |
| }); |
| }, |
| }, |
| methods: { |
| removeNotification(id: string) { |
| NotificationsStore.remove(id); |
| }, |
| }, |
| }); |
| </script> |
|
|
