vue-simple-notify

    1.0.5 • Public • Published

    Vue Simple Notify

    NPM version VueJS v2.x compatible License Codacy Badge Travis Standard codecov  KB Dependency Status

    Versión en español

    Simple notify handler component for Vue.js.



    Demo

    GitHub

    CodePen

    Quick Start

    NPM

    Install the package:

    $ npm install vue-simple-notify
    

    Register the component:

    import Vue from 'vue'
    import VueSimpleNotify from 'VueSimpleNotify'
     
    Vue.component('VueSimpleNotify', VueSimpleNotify)

    Use the component:

    <vue-simple-notify :items="[]"></vue-simple-notify>

    CDN

    Include styles:

    <link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css">

    Include scripts:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>

    Register the component:

    Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)

    Use the component:

    <vue-simple-notify :items="[]"></vue-simple-notify>

    Examples

    Examples of use for this component:

    - Using CDN:

    <!DOCTYPE html>
    <html>
     
      <head>
        <link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
      </head>
     
      <body>
     
        <div id="app">
          <vue-simple-notify :items="[]"></vue-simple-notify>
        </div>
        
        <script src="https://unpkg.com/vue/dist/vue.js"></script> 
        <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script> 
     
        <script>
          Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)
          new Vue().$mount('#app')
        </script> 
     
      </body>
     
    </html>

    - Adding items:

    <vue-simple-notify
      :items="items"
    ></vue-simple-notify>
    new Vue({
      el: '#app',
      components: { VueSimpleNotify },
      data () {
        return {
          items: [
            {
              message: 'example of error message.'
            },
            {
              type: 'Success',
              color: '#2ecc71',
              dismissable: false,
              message: 'example of success message.'
            }
          ]
        }
      }
    })

    - Setting the delay between notifications:

    <vue-simple-notify
      :items="items"
      :delay="delay"
    ></vue-simple-notify>
    new Vue({
      el: '#app',
      components: { VueSimpleNotify },
      data () {
        return {
          items: [{}, {}, {}],
          delay: 1000
        }
      }
    })

    - Listening to the @onDismiss event:

    <vue-simple-notify
      :items="items"
      @onDismiss="onDismiss"
    ></vue-simple-notify>
    new Vue({
      el: '#app',
      components: { VueSimpleNotify },
      data () {
        return {
          items: [{}]
        }
      },
      methods: {
        onDismiss: function onDismiss (index) {
          console.log(index)
        }
      }
    })

    - Removing items from the component.

    <vue-simple-notify
      :items="items"
      ref="vsn"
    ></vue-simple-notify>
    const vueSimpleNotify = new Vue({
      el: '#app',
      components: { VueSimpleNotify },
      data () {
        return {
          items: [{}, {}, {}]
        }
      }
    }).$refs.vsn
     
    vueSimpleNotify.dismiss(1)

    - Removing all elements.

    <vue-simple-notify
      :items="items"
      ref="vsn"
    ></vue-simple-notify>
    const vueSimpleNotify = new Vue({
      el: '#app',
      components: { VueSimpleNotify },
      data () {
        return {
          items: [{}, {}, {}]
        }
      }
    }).$refs.vsn
     
    vueSimpleNotify.clear()

    Props

    Available props in this component:

    :items

    Description: Notifications array.

    Type: Array

    Required: true

    Default: null

    <vue-simple-notify :items="[]">

    :delay

    Description: Time interval between notifications when displayed.

    Type: Number

    Default: 500

    <vue-simple-notify :items="[]" :delay="1000">

    Events

    Available events in this component:

    @onDismiss

    It is triggered each time a notification is dismissed.

    onDismiss: function onDismiss (index) { }
    Attribute Type Description
    index Number Notification index.
    <vue-simple-notify :items="[]" :delay="1000" @onDismiss="onDismiss">

    Methods

    Available methods in this component:

    dismiss

    Dismiss a notification by a index.

    vueSimpleNotify.dismiss(index)
    Attribute Type Description Required
    index Number Notification index. true

    clear

    Clear all notifications.

    vueSimpleNotify.clear()

    Tests

    Clone the repository:

    $ git clone https://github.com/Josantonius/vue-simple-notify.git vue-simple-notify
    

    Go to the directory:

    $ cd vue-simple-notify
    

    Install dependencies:

    $ npm install
    

    Run unit tests:

    $ npm run test
    

    Run ESLint to ensure that code style is compatible with Standar JavaScript:

    $ npm run lint
    

    Run serve with hot reload:

    $ npm run dev
    

    Build distribution with minification:

    $ npm run bundle
    

    Build demo for production with minification:

    $ npm run build
    

    Run all the above:

    $ npm run finish
    

    ☑ TODO

    • Fix error when trying to pass ESlint tests in Travis CI.
    • Fix error when trying to pass E2E tests in Travis CI.
    • Add new feature.
    • Improve tests.
    • Improve documentation.

    Contribute

    If you would like to help, please take a look at the list of issues or the To Do checklist.

    Pull requests

    License

    This project is licensed under MIT license. See the LICENSE file for more info.

    Copyright

    2018 Josantonius, josantonius.com

    If you find it useful, let me know 😉

    You can contact me on Twitter or through my email.

    Keywords

    none

    Install

    npm i vue-simple-notify

    DownloadsWeekly Downloads

    108

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • josantonius