Release 0.2.0

README.md

@@ -1,24 +1,71 @@
-# whoosh
+# Whoosh
 
 ## Project setup
 ```
-npm install
+npm install @adecrown/whoosh
 ```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
+## Basic Usage
+Inside your main.js file
+```javascript
+import Whoosh from '@adecrown/whoosh'
+Vue.use(Whoosh)
 ```
 
-### Compiles and minifies for production
+then inside your App.vue file use Whoosh like this
 ```
-npm run build
+<Whoosh/>
 ```
 
-### Lints and fixes files
-```
-npm run lint
+Whoosh can then be called anywhere like this
+```javascript
+this.$whoosh({
+    status:'error',
+    title:'Something went wrong',
+    message:'We could not find the id'
+})
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### API
+
+```javascript
+  this.$whoosh({
+    // (optional)
+    // Notification status 'success,warn,error'
+    // custom status can also be passed here
+    status: 'success',
+
+    // (optional)
+    // Notification title
+    title: 'I am the title',
+
+    // Notification message
+    message: 'I am the message',
+
+    // (optional)
+    // This will override the default duration and the provided duration mains.js
+    duration: 5,
+
+    // (optional)
+     // This will override the size and the provided prop size
+    size: {
+        width:400,
+        height:250
+    }
+
+  })
+  ```
+
+
+### Props Table
+
+All props are optional.
+
+| Name             | Type    | Default      | Description |
+| ---              | ---     | ---          | ---         |
+| duration         | Number  | 5            | how long you want the notification to stay on for (5 equals 5 seconds) |
+| fill             | Boolean | false        | fill the whole card with the status color |
+| closeOnClick     | Boolean | false        | notification will only close when it's clicked on |
+| textColor        | String  | black        | set the text color to what you prefer | 
+| size             | Object  | {width:500,height:200}| use it to set your prefered  width and height|
+
+

package.json

@@ -1,6 +1,11 @@
 {
   "name": "@adecrown/whoosh",
-  "version": "0.1.10",
+  "description": "A Simple Vue.js Notification Library",
+  "author": {
+    "name": "adecrown",
+    "url": "http://adecrown.com"
+  },
+  "version": "0.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,10 +14,26 @@
     "build-bundle": "vue-cli-service build --target lib --name @adecrown/whoosh ./src/components/index.js",
     "release": "release-it"
   },
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vuejs",
+    "notification",
+    "vue notification",
+    "vue notifications",
+    "vuejs notifications",
+    "web",
+    "toast",
+    "vue toast",
+    "whoosh"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/adecrown/whoosh.git"
   },
+  "bugs": {
+    "url": "https://github.com/adecrown/whoosh/issues"
+  },
   "release-it": {
     "hooks": {
       "after:bump": "npm run build-bundle"
@@ -60,7 +81,7 @@
       "parser": "babel-eslint"
     },
     "rules": {
-      "no-unused-vars":"off"
+      "no-unused-vars": "off"
     }
   },
   "browserslist": [

src/components/Whoosh/Card.vue

@@ -2,55 +2,103 @@
   <transition name="slide-fade">
     <div
       class="card"
-      :style="{'margin-bottom':setMargin}"
+      :style="{'margin-bottom':setMargin,'color':textColor,'background-color': fill ? statusColor : white,width:setWidth,height:setHeight}"
       @mouseover="paused = true"
       @mouseleave="paused = false"
       @click="$emit('click')"
     >
       <div
         class="card__status"
-        :style="{'background-color': statusColor}"
+        :style="{'background-color': statusColor,height:setStatusHeight}"
+        v-if="!fill"
       ></div>
       <div class="card__body">
-        <div class="card__title">{{content.title}}</div>
-        <div class="card__message">{{content.message}}</div>
+        <div class="card__title" v-if="content.title">{{content.title}}</div>
+        <div class="card__message" v-if="content.message">{{content.message}}</div>
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-import { TimerCup } from './Util'
-import { status } from './Constant'
-import { thistle } from 'color-name';
+import { TimerCup, isCustomStatusesDefined } from './Util'
+import { status, DEFAULT_HEIGHT,MARGIN_GAP } from './Constant'
 export default {
   props: {
     position: {
       type: Number,
       required: false,
       default: 0
     },
+    list: {
+      type: Array,
+      required: false
+    },
     content: {
       type: Object,
       required: true
     },
     masterDuration: {
       type: Number,
-      required: false,
-      default: 0
+      required: true,
     },
     closeOnClick: {
       type: Boolean,
       required: false,
       default: false
+    },
+    fill: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    textColor: {
+      type: String,
+      required: false,
+      default: 'black'
+    },
+    size:{
+      type: Object,
+      required: true,
     }
   },
   computed: {
+    heightWasDefined(){
+      return this.content.size && this.content.size.height
+    },
     setMargin() {
-      const marg = this.position * 210
+      let marg = this.position * (DEFAULT_HEIGHT + MARGIN_GAP)
+        let whatsBelowSize = 0;
+        const notMe = this.list.filter((x,index) => index < this.position);
+        whatsBelowSize = notMe.reduce((a, b) => a + (this.add(b) || 0), 0);
+        if(whatsBelowSize > 0){
+        marg =  whatsBelowSize + MARGIN_GAP
+      }
+      
       return this.position > 0 ? marg + 'px' : '0px'
     },
+    setWidth(){
+      if(this.content.size && this.content.size.width){
+        return this.content.size.width+'px' 
+      }
+      return  this.size.width+'px'
+    },
+     setHeight(){
+      if(this.content.size && this.content.size.height){
+        return this.content.size.height+'px' 
+      }
+      return  this.size.height+'px'
+    },
+    setStatusHeight(){
+      if(this.content.size && this.content.size.height){
+        return (this.content.size.height - MARGIN_GAP)+'px' 
+      }
+      return (this.size.height - MARGIN_GAP)+'px'
+    },
     statusColor() {
+      if(isCustomStatusesDefined(this.content.statuses)){
+        return this.content.statuses.find(element => element.name === this.content.status).color;
+      }
       switch (this.content.status) {
         case status.success:
           return "green";
@@ -66,12 +114,10 @@ export default {
   data() {
     return {
       timer: {},
-      paused: false,
-      duration: 5, // 5 seconds
+      paused: false
     }
   },
   mounted() {
-    console.log(this.content)
     if (!this.closeOnClick) {
       this.close()
     }
@@ -80,26 +126,27 @@ export default {
     paused(newVal, old) {
       if (!this.closeOnClick) {
         if (newVal) {
-          console.log('pausedW')
           this.timer.pause()
         } else {
-          console.log('resumeW')
           this.timer.resume()
         }
       }
     }
   },
   methods: {
     close() {
-      const useDuration = this.content.duration ?
-        this.content.duration
-        :
-        this.masterDuration > 0 ? this.masterDuration : this.duration
-      console.log(useDuration);
+      const useDuration = this.content.duration ? this.content.duration : this.masterDuration;
       this.timer = new TimerCup(() => {
         this.$emit('close', this.content);
       }, useDuration * 1000);
     },
+
+    add(whatsBelow){
+      let whatsBelowSize = 0;
+      whatsBelowSize = this.size.height;
+      whatsBelow.size && whatsBelow.size.height ? whatsBelowSize = whatsBelow.size.height : null
+      return whatsBelowSize
+    }
   }
 }
 </script>
@@ -126,9 +173,10 @@ export default {
   width: 100%;
   margin: 10px;
   text-align: left;
+  font-weight: 500;
 }
 .card__title {
-  border-bottom: black 1px solid;
+  border-bottom: #0000001a 1px solid;
   padding-bottom: 8px;
 }
 .card__message {

src/components/Whoosh/Constant.js

@@ -2,4 +2,9 @@ export const status = {
   success: "success",
   warning: "warning",
   error: "error"
-}
+}
+
+export const DEFAULT_WIDTH = 500
+export const DEFAULT_HEIGHT = 200
+
+export const MARGIN_GAP = 10

src/components/Whoosh/Util.js

@@ -1,6 +1,9 @@
 export const generateId = (i => () => i++)(0)
 
-
+export const isCustomStatusesDefined = (statuses) =>{
+    return Array.isArray(statuses) && statuses.length
+  }
+
 
 export class TimerCup {
     constructor(fn, countdown) {