<template lang="pug">
  transition(name='alert', enter-active-class="animated zoomIn", leave-active-class="animated fadeOutRight")
    .alert(v-if='shown', v-bind:class='style')
      .alert-icon: i(v-bind:class='icon')
      .alert-msg {{ msg }}
</template>

<script>
export default {
  name: 'alert',
  data () {
    return {}
  },
  computed: {
    shown() { return this.$store.state.alert.shown },
    style() { return 'is-' + this.$store.state.alert.style },
    icon() { return 'nc-icon-outline ' + this.$store.state.alert.icon },
    msg() { return this.$store.state.alert.msg }
  }
}
</script>