gradido/frontend/src/components/NotificationPlugin/Notifications.vue

<template>
  <div class="notifications">
    <slide-y-up-transition :duration="transitionDuration" group mode="out-in">
      <notification
        v-for="notification in notifications"
        v-bind="notification"
        :clickHandler="notification.onClick"
        :key="notification.timestamp.getTime()"
        @close="removeNotification"
      ></notification>
    </slide-y-up-transition>
  </div>
</template>
<script>
import Notification from './Notification.vue'
import { SlideYUpTransition } from 'vue2-transitions'

export default {
  components: {
    SlideYUpTransition,
    Notification,
  },
  props: {
    transitionDuration: {
      type: Number,
      default: 200,
    },
    overlap: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      notifications: this.$notifications.state,
    }
  },
  methods: {
    removeNotification(timestamp) {
      this.$notifications.removeNotification(timestamp)
    },
  },
  created() {
    this.$notifications.settings.overlap = this.overlap
  },
  watch: {
    overlap: function (newVal) {
      this.$notifications.settings.overlap = newVal
    },
  },
}
</script>