From 75861dba01c0b21671f1dc9b93b0846731f37e5d Mon Sep 17 00:00:00 2001
From: HEL Mab <mabhelitc@gmail.com>
Date: Fri, 6 Nov 2020 23:17:07 +0700
Subject: [PATCH] update readme

---
 index.js                            |  2 +-
 package.json                        | 16 ++++++++++----
 src/Notification.vue                | 34 ++++++++++++++++++++++++-----
 src/components/NotificationItem.vue |  5 +++--
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/index.js b/index.js
index f8f86d8..73060f7 100644
--- a/index.js
+++ b/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)
     }
   }
diff --git a/package.json b/package.json
index 3cba408..3a9c60f 100644
--- a/package.json
+++ b/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"
 }
diff --git a/src/Notification.vue b/src/Notification.vue
index b582903..dd2ace8 100644
--- a/src/Notification.vue
+++ b/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,7 +21,11 @@ export default {
     return {
       options: {
         position: 'notification-top-right',
-        duration: 2500
+        duration: 2500,
+        top: 20,
+        bottom: 20,
+        left: 20,
+        right: 40,
       },
       handleClick: null,
     }
@@ -28,11 +33,30 @@ export default {
   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
diff --git a/src/components/NotificationItem.vue b/src/components/NotificationItem.vue
index 7e16564..8210f6a 100644
--- a/src/components/NotificationItem.vue
+++ b/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>