notificationItem.vue

<template>
  <div class="notification" :class="classList" transition="notification">
    <div class="notification__progress"></div>
    <div class="notification__close" @click="remove">
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="notification__icon-area">
      {{{ icon }}}
    </div>
    <div class="notification__body">
      <div class="notification__text">{{{ this.$lang(item.body.message, item.body.params) }}}</div>
    </div>
  </div>
</template>

<script>
// Actions.
import {
  notificationsRemove
} from '../../vuex/actions'



// Component export.
export default {

  /**
   * Vuex actions & getters.
   *
   * @type {Object}
   */
  vuex: {

    actions: {
      notificationsRemove
    }

  },



  /**
   * The initial component data.
   *
   * @return {Object} The component's data.
   */
  data() {
    return {
      timer: null
    }
  },



  /**
   * Initialize the item when it's ready in the DOM.
   */
  ready() {

    // Set a timeout so that the notification will automatically disappear.
    this.timer = setTimeout(() => {
      this.remove()
    }, 6000)

  },



  /**
   * Passed down properties.
   *
   * @type {Object}
   */
  props: {
    item: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      reuiqred: true
    }
  },



  /**
   * Computed properties.
   *
   * @type {Object}
   */
  computed: {

    /**
     * Generates a list of classes to use on the component.
     *
     * @return {Object} A map of classes to use.
     */
    classList() {
      return {
        'notification--positive': this.item.type === 'positive',
        'notification--negative': this.item.type === 'negative',
        'notification--warning': this.item.type === 'warning'
      }
    },



    /**
     * Generates the markup for the icon to use.
     *
     * @return {String} The markup for the icon.
     */
    icon() {
      return `<svg class="icon notification__icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-notification-${this.item.type ? this.item.type : 'default'}"></use></svg>`
    }

  },



  /**
   * Component methods.
   *
   * @type {Object}
   */
  methods: {

    /**
     * Removes the current noification.
     */
    remove() {
      clearTimeout(this.timer)
      this.notificationsRemove(0)
    }

  }

}
</script>