vue-bulma/notification

Notification component for Vue Bulma

Notification

Notification component for Vue Bulma.

Installation

$ npm install vue-bulma-notification --save

Examples

<template>
  <div>
    <notification :title="'Normal'" :direction="'Down'" :message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit'" :duration="0"></notification>
    <button class="button" @click="openNotificationWithType('')">Normal</button>
    <button class="button is-primary" @click="openNotificationWithType('primary')">Primary</button>
    <button class="button is-info" @click="openNotificationWithType('info')">Info</button>
    <button class="button is-success" @click="openNotificationWithType('success')">Success</button>
    <button class="button is-warning" @click="openNotificationWithType('warning')">Warning</button>
    <button class="button is-danger" @click="openNotificationWithType('danger')">Danger</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Notification from 'vue-bulma-notification'

const NotificationComponent = Vue.extend(Notification)

const openNotification = (propsData = {
  title: '',
  message: '',
  type: '',
  direction: '',
  duration: 4500,
  container: '.notifications'
}) => {
  return new NotificationComponent({
    el: document.createElement('div'),
    propsData
  })
}

export default {
  components: {
    Notification
  },

  mounted () {
    openNotification({
      message: 'Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit',
      type: 'success',
      duration: 0
    })
  },

  methods: {
    openNotificationWithType (type) {
      openNotification({
        title: 'This is a title',
        message: 'This is the message.',
        type: type
      })
    }
  }

}
</script>

Badges

---

fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

notification's Issues

Vue 2.x

Do you plan to add support for version 2?

Bulma 0.7.* support

In addition to #7 there are a few variable changes:

error  in ./node_modules/vue-bulma-notification/src/Notification.vue

Module build failed:
  border: 2px solid $border
                   ^
      Undefined variable: "$border".
      in /app/node_modules/bulma/sass/utilities/mixins.sass (line 240, column 21)

Comes from importing the "wrong" variable set according to stipsan/bulma-loader#6 (comment) AFAIK

Bulma ^0.3

Is this package going to be integrated for Bulma 0.3? Thanks

Issues with the @import statements in the style part.

My Laravel Elixir / Gulp setup didn't want to webpack this module. After a lot of digging around, I found out it was due to the @import statements. This issue only occurs when I also use mix.sass('app.sass'). All in al it's a strange thing, but might be helpful for someone running into the same issue.

The error is get is:

09:49:30] Starting 'all'...
[09:49:30] Starting 'sass'...
[09:49:31] Finished 'sass' after 1.07 s
[09:49:31] Starting 'webpack'...
undefined:0

TypeError: undefined is not a function

I (temporarily) fixed this by forking this repo and removing the @import statements.

If someone has a better idea, please let me know.

'closed-by-user', 'closed-automatically' events were not being triggered

Hi,
'closed-by-user', 'closed-automatically' events were not being triggered on the parent component

Following is my HTML,

<div id="app" class="site">
    <notification-custom v-if="notification.show" />
  </div>

Trying to catch the event like this.

  created: function() {
  // It's not being triggering.
    this.$on('closed-automatically', function(value) {
      console.log('Got it !')
    })
  }

Vue-bulma-notification called from vue-bulma-modal

Is it possible to call vue-bulma-notification from vue-bulma-modal to be show on top of the CardModal, ignoring the modal-background?

Uncaught SyntaxError: Unexpected token <

I'm getting this error after just installing on my project

Edit: as standalone component.

I did the npm install vue-bulma-notification --save and when I try to import Notification from 'vue-bulma-notification' I get this error:

Uncaught SyntaxError: Unexpected token <

Module build failed: @import '~bulma/sass/utilities/variables';

This fails for me on start with:

in ./node_modules/vue-bulma-notification/src/Notification.vue

Module build failed:
@import '~bulma/sass/utilities/variables';
^
File to import not found or unreadable: ~bulma/sass/utilities/variables.
Parent style sheet: stdin
in /Users/will/devprojects/timber/timber-client/node_modules/vue-bulma-notification/src/Notification.vue (line 119, column 1)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1f8f4dfc","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue-bulma-notification/src/Notification.vue 4:14-328 13:3-17:5 14:22-336
@ ./node_modules/vue-bulma-notification/src/Notification.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Views/NoteThis.vue
@ ./src/components/Views/NoteThis.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js