Width can now set custom units. Timeout for notification hide can now be custom

Author: hazzo

README.md

@@ -24,13 +24,14 @@ npm install vue-notify-me --save
 | Properties                    | Type      | Values     |
 | :---------------              | :-------  | :--------- |
 |  `event-bus`                  | Object    | <b>Central event Bus </b>|
-|  `event-show` (not required)  | String    | <b>Default </b> 'notify-me'|
-|  `event-hide` (not required)  | String    | <b>Default </b> 'hide-notify-me'|
-|  `close` (not required)       | String    | <b>Default </b>'bulma', options: bootstrap or any other class for the closing icon|
+|  `event-show` (not required)  | String    | <b>Default </b> `notify-me`|
+|  `event-hide` (not required)  | String    | <b>Default </b> `hide-notify-me`|
+|  `close` (not required)       | String    | <b>Default </b>`bulma`, options: bootstrap or any other class for the closing icon|
 |  `permanent` (not required)   | Bool      | <b>Default </b>false|
-|  `container` (not required)   | String    | <b>Default </b>'notification', (Class for the notification container)|
-|  `status` (not required)      | String    | <b>Default </b>'is-success', (Class for the notification status)|
-|  `width` (not required)       | String    | <b>Default </b>'350'    |
+|  `container` (not required)   | String    | <b>Default </b>`notification`, (Class for the notification container)|
+|  `status` (not required)      | String    | <b>Default </b>`is-success`, (Class for the notification status)|
+|  `width` (not required)       | String    | <b>Default </b>`350px`. It's **mandatory** to set the **unit** for the width. For example: `rem`, `em`, `px`    |
+|  `timeout` (not required)       | Number    | <b>Default `4000`</b>. If notification is not `permanent` you can set the timeout for it    |
 
 ##  Examples
 

demo/App.vue

@@ -99,6 +99,14 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="column">
+                                        <div class="field">
+                                            <label class="label">Timeout</label>
+                                            <div class="control">
+                                                <input v-model="timeout" class="input" type="number">
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div class="columns">
                                     <div class="column">
@@ -139,7 +147,7 @@
         </footer>
         <notify-me
             :event-bus="bus">
-            <template slot="content" scope="{data}">
+            <template slot="content" slot-scope="{data}">
                 <div style="width: 100%; word-break: break-all; text-align: left">
                     <h4><b>{{data.title}}</b></h4>
                     <p style="margin: 0">{{data.text}}</p>
@@ -174,6 +182,7 @@
                 status: 'is-success',
                 permanent: false,
                 text: 'Coded slow but effective',
+                timeout: 4000,
                 bus
             }
         },
@@ -182,6 +191,7 @@
                 this.bus.$emit('notify-me', {
                     permanent: this.permanent,
                     status: this.status,
+                    timeout: parseInt(this.timeout),
                     data: {
                         title: 'The pygmy team :)',
                         text: this.text

dist/build.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-notify-me",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Stackable notification Alert for Vue",
   "main": "src/index.js",
   "repository": {

dist/build.js.map

@@ -3,7 +3,7 @@
             enter-active-class="animated quick fadeInRight"
             leave-active-class="animated quick fadeOutRight"
     >
-        <div v-if="show" :class="[container,status, 'notify-me']" :style="{ width: width + 'px' }">
+        <div v-if="show" :class="[container,status, 'notify-me']" :style="{ width: width }">
             <slot name="content"></slot>
             <button v-if="close === 'bulma'" class="delete" @click="hideMe"></button>
             <button v-else-if="close === 'bootstrap'" type="button" class="close" aria-label="Close" @click="hideMe">
@@ -30,8 +30,12 @@
                 default: 'alert-success'
             },
             width: {
+                type: String,
+                default: '350px'
+            },
+            timeout: {
                 type: Number,
-                default: 350
+                default: 4000
             }
 
         },
@@ -49,7 +53,7 @@
             if (!this.permanent) {
                 setTimeout(() => {
                     this.hideMe();
-                }, 4000)
+                }, this.timeout)
             }
 
         }

package.json

@@ -5,6 +5,7 @@
                       :container="item.container"
                       :status="item.status"
                       :width="item.width"
+                      :timeout="item.timeout"
                       :close="item.close"
                       :content="item.content"
                       @hide="hideChild(key)">
@@ -39,8 +40,12 @@
                 default: 'is-success'
             },
             width: {
+                type: String,
+                default: '350px'
+            },
+            timeout: {
                 type: Number,
-                default: 350
+                default: 4000
             },
             // central event bus
             eventBus: {
@@ -68,7 +73,8 @@
                     content: obj.data,
                     container: obj.container || this.container,
                     status: obj.status || this.status,
-                    width: obj.width || this.width
+                    width: obj.width || this.width,
+                    timeout: obj.timeout || this.timeout
                 };
                 this.list.push(item);
             },