Add pointer cursor when hovering notifications

Add option  to render a custom component
Close notification when clicking on it

Author: cristijora

dist/vue-notifyjs.common.js

@@ -1,5 +1,5 @@
 /*!
- * vue-notifyjs v0.1.3
+ * vue-notifyjs v0.1.4
  * (c) 2017-present cristij <[email protected]>
  * Released under the MIT License.
  */
@@ -31,6 +31,9 @@ var Notification = {
       default: function _default() {
         return new Date();
       }
+    },
+    component: {
+      type: [Object, Function]
     }
   },
   data: function data() {
@@ -78,19 +81,21 @@ var Notification = {
       setTimeout(this.close, this.timeout);
     }
   },
-  render: function render() {
-    var h = arguments[0];
-
+  render: function render(h) {
+    var componentName = this.component;
     return h(
       'div',
       {
+        on: {
+          'click': this.close
+        },
         attrs: {
           'data-notify': 'container',
 
           role: 'alert',
 
           'data-notify-position': 'top-center' },
-        'class': ['col-xs-11 col-sm-4 alert open ', { 'alert-with-icon': this.icon }, this.verticalAlign, this.horizontalAlign, this.alertType], style: this.customPosition },
+        'class': ['alert open ', { 'alert-with-icon': this.icon }, this.verticalAlign, this.horizontalAlign, this.alertType], style: this.customPosition },
       [h(
         'button',
         {
@@ -116,7 +121,11 @@ var Notification = {
         {
           attrs: { 'data-notify': 'message' }
         },
-        [this.message]
+        [this.message !== undefined && this.message, this.component !== undefined && h(
+          this.component,
+          null,
+          []
+        )]
       )]
     );
   }
@@ -166,7 +175,8 @@ var Notifications = {
                         icon: notification.icon,
                         message: notification.message,
                         timeout: notification.timeout,
-                        type: notification.type
+                        type: notification.type,
+                        component: notification.component
                     },
                     key: notification, on: {
                         'close': function close() {

dist/vue-notifyjs.js

@@ -1,5 +1,5 @@
 /*!
- * vue-notifyjs v0.1.3
+ * vue-notifyjs v0.1.4
  * (c) 2017-present cristij <[email protected]>
  * Released under the MIT License.
  */
@@ -35,6 +35,9 @@ var Notification = {
       default: function _default() {
         return new Date();
       }
+    },
+    component: {
+      type: [Object, Function]
     }
   },
   data: function data() {
@@ -82,19 +85,21 @@ var Notification = {
       setTimeout(this.close, this.timeout);
     }
   },
-  render: function render() {
-    var h = arguments[0];
-
+  render: function render(h) {
+    var componentName = this.component;
     return h(
       'div',
       {
+        on: {
+          'click': this.close
+        },
         attrs: {
           'data-notify': 'container',
 
           role: 'alert',
 
           'data-notify-position': 'top-center' },
-        'class': ['col-xs-11 col-sm-4 alert open ', { 'alert-with-icon': this.icon }, this.verticalAlign, this.horizontalAlign, this.alertType], style: this.customPosition },
+        'class': ['alert open ', { 'alert-with-icon': this.icon }, this.verticalAlign, this.horizontalAlign, this.alertType], style: this.customPosition },
       [h(
         'button',
         {
@@ -120,7 +125,11 @@ var Notification = {
         {
           attrs: { 'data-notify': 'message' }
         },
-        [this.message]
+        [this.message !== undefined && this.message, this.component !== undefined && h(
+          this.component,
+          null,
+          []
+        )]
       )]
     );
   }
@@ -170,7 +179,8 @@ var Notifications = {
                         icon: notification.icon,
                         message: notification.message,
                         timeout: notification.timeout,
-                        type: notification.type
+                        type: notification.type,
+                        component: notification.component
                     },
                     key: notification, on: {
                         'close': function close() {

dist/vue-notifyjs.min.js

@@ -8,6 +8,12 @@
   </div>
 </template>
 <script>
+  let msg = {
+      functional:true,
+      render(){
+          return (<span> Welcome to <b>Paper Dashboard</b> - a beautiful freebie for every web developer</span>)
+      }
+  }
   import Vue from 'vue'
   import Notifications from '../src/index'
   import Notification from "../src/Notification";
@@ -17,11 +23,11 @@
           addNotification(verticalAlign='top', horizontalAlign='right'){
             this.$notify(
               {
-                message: 'Welcome ',
                 horizontalAlign: horizontalAlign,
                 verticalAlign: verticalAlign,
                 type: "info",
-                timeout: 30000
+                timeout: 30000,
+                component: msg
               })
           }
       }

dist/vue-notifyjs.min.js.map

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import '../themes/_now-ui.scss'
+import '../themes/now-ui.scss'
 
 new Vue({
   el: '#app',

example/App.vue

@@ -22,6 +22,9 @@ export default {
     timestamp:{
       type: Date,
       default: ()=>new Date()
+    },
+    component: {
+      type: [Object, Function]
     }
   },
   data () {
@@ -66,11 +69,12 @@ export default {
       setTimeout(this.close, this.timeout)
     }
   },
-  render(){
-    return (
-      <div
+  render(h){
+      let componentName = this.component
+      return (
+      <div onClick={this.close}
         data-notify="container"
-        class={['col-xs-11 col-sm-4 alert open ',{'alert-with-icon':this.icon}, this.verticalAlign, this.horizontalAlign, this.alertType]}
+        class={['alert open ',{'alert-with-icon':this.icon}, this.verticalAlign, this.horizontalAlign, this.alertType]}
         role="alert"
         style={this.customPosition}
         data-notify-position="top-center">
@@ -85,8 +89,10 @@ export default {
           this.icon &&  <span data-notify="icon" class={['alert-icon', this.icon]}></span>
         }
         <span data-notify="message">
-              {this.message}
-            </span>
+            {this.message!==undefined && this.message}
+            {this.component!==undefined &&
+            <this.component></this.component>}
+        </span>
       </div>
     )
   }

example/index.js

@@ -36,6 +36,7 @@ export default {
                     message={notification.message}
                     timeout={notification.timeout}
                     type={notification.type}
+                    component ={notification.component}
                     key={notification} onClose={() => this.removeNotification(index)}/>
             }
         )

src/Notification.js

@@ -45,8 +45,9 @@ button.close {
   font-size: 14px;
   z-index: 100;
   display: inline-block;
-  position: fixed;
-  transition: all 0.5s ease-in-out; }
+  position: fixed !important;
+  transition: all 0.5s ease-in-out;
+  cursor: pointer; }
   .alert.center {
     left: 0px;
     right: 0px;

src/Notifications.js

@@ -26,8 +26,9 @@ button.close {
   font-size: 14px;
   z-index: 100;
   display: inline-block;
-  position: fixed;
+  position: fixed !important;
   transition: all 0.5s ease-in-out;
+  cursor: pointer;
   &.center {
     left: 0px;
     right: 0px;