update readme

Author: HELMAB

index.js

@@ -18,7 +18,7 @@ export default {
     }
 
     // eslint-disable-next-line no-unused-vars
-    Vue.prototype.$notification = (title, body, dateTime, icon = null, handleClick) => {
+    Vue.prototype.$notification = (title, body, dateTime, icon = null, handleClick = null) => {
       vm.addNewNotification(Math.random(), title, body, dateTime, icon, handleClick)
     }
   }

package.json

@@ -1,15 +1,23 @@
 {
   "name": "vue-notification-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Vue Notification UI",
   "main": "src/notification.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": ["vuejs", "plugins", "notification", "toastr", "notification-ui"],
+  "author": "HEL Mab",
   "license": "ISC",
   "dependencies": {
     "vuex": "^3.5.1"
-  }
+  },
+  "repository": {
+    "type" : "git",
+    "url" : "git+https://github.com/HELMAB/vue-notification-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/HELMAB/vue-notification-ui/issues"
+  },
+  "homepage": "https://github.com/HELMAB/vue-notification-ui#README"
 }

src/Notification.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :class="`notification ${options.position}`">
+  <div :class="`notification ${options.position}`"
+       :style="classPosition">
     <NotificationItem
       :callback="handleClicked"
       :key="key"
@@ -20,19 +21,42 @@ export default {
     return {
       options: {
         position: 'notification-top-right',
-        duration: 2500
+        duration: 2500,
+        top: 20,
+        bottom: 20,
+        left: 20,
+        right: 40,
       },
       handleClick: null,
     }
   },
   computed: {
     ...mapState({
       notifications: state => state.notification.notifications
-    })
+    }),
+    classPosition() {
+      let styles = ''
+      const positions = this.options.position.split('-')
+      if (positions[1] === 'top') {
+        styles += `top: ${this.options.top}px;`
+      } else {
+        styles += `bottom: ${this.options. bottom}px;`
+      }
+
+      if (positions[2] === 'left') {
+        styles += `left: ${this.options.left}px;`
+      } else {
+        styles += `right: ${this.options.right}px;`
+      }
+
+      return styles
+    }
   },
   methods: {
-    handleClicked () {
-      this.handleClick()
+    handleClicked() {
+      if (this.handleClick) {
+        this.handleClick()
+      }
     },
     addNewNotification(id, title, body, dateTime, icon, handleClick) {
       this.handleClick = handleClick

src/components/NotificationItem.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="notification-item" @click="handleClick">
+  <div class="notification-item">
     <div class="notification-icon"
+         @click="handleClick"
          :class="{'no-circle' : notification.icon === null}"
          :style="`background-image: url(${icon});`">
     </div>
-    <div class="notification-content">
+    <div class="notification-content" @click="handleClick">
       <div class="notification-title">
         <div class="notification-title-text">
           <h3 v-html="notification.title"></h3>