Custom Style

README.md

@@ -49,10 +49,10 @@ this.$whoosh({
   // (optional) Notification message
   message: "I am the message",
 
-  // (optional) This will override the default duration and the provided duration mains.js
+  // (optional) This will override the default duration and the provided prop duration
   duration: 5,
 
-  // (optional) This will override the size and the provided prop size
+  // (optional) This will override the default size and the provided prop size
   size: {
     width: 400,
     height: 250
@@ -72,3 +72,39 @@ All props below are optional.
 | textColor     | String  | black                  | set the text color to what you prefer                                  |
 | progressColor | String  | #dcd9d9                | set the progress color to what you prefer                              |
 | size          | Object  | {width:500,height:210} | use it to set your prefered width and height                           |
+| messageStyle  | Object  |                        | give a custom style to the message section                             |
+| titleStyle    | Object  |                        | give a custom style to the title section                               |
+
+
+
+#### Custom Status
+If the default status (success, error, warn) are not enough or not to your taste, you can create your own custom statuses which is an array of objects status and each object requires a name and color.
+
+  Inside your main.js file add the options parameter like below.
+
+  ```javascript
+  import Whoosh from "@adecrown/whoosh";
+  Vue.use(Whoosh,{
+    statuses:[
+      {
+        name: 'Testing',
+        color: 'red'
+      },
+       {
+        name: 'Testing 3',
+        color: 'green'
+      }
+    ]
+  });
+  ```
+  Use Whoosh as normal to call your custom status
+  ```javascript
+  this.$whoosh({
+    status: "Testing",
+    title: "This is my custom status",
+    message: "Hello Testing"
+  });
+```
+The defualt statuses are still available along with your custom ones
+
+

src/components/Whoosh/Card.vue

@@ -26,8 +26,16 @@
           v-if="!fill"
         ></div>
         <div class="card__body">
-          <div class="card__title" v-if="content.title">{{ content.title }}</div>
-          <div class="card__message" v-if="content.message">{{ content.message }}</div>
+          <div
+            class="card__title"
+            v-if="content.title"
+            :style="titleStyle"
+          >{{ content.title }}</div>
+          <div
+            class="card__message"
+            v-if="content.message"
+            :style="messageStyle"
+          >{{ content.message }}</div>
         </div>
       </div>
     </div>
@@ -54,6 +62,8 @@ export default class Card extends Vue {
   @Prop({ type: Boolean, required: false }) private closeOnClick!: boolean;
   @Prop({ type: Boolean, required: false }) private fill!: boolean;
   @Prop({ type: String, required: false }) private textColor!: string;
+  @Prop({ type: Object, required: false }) private messageStyle!: object;
+  @Prop({ type: Object, required: false }) private titleStyle!: object;
   @Prop({ type: String, required: false }) private progressColor!: string;
   @Prop({ type: Object, required: true }) private size!: CardContent["size"];
 
@@ -111,9 +121,12 @@ export default class Card extends Vue {
 
   get statusColor() {
     if (isCustomStatusesDefined(this.content.statuses)) {
-      return this.content.statuses!.find(
+      const isCustom = this.content.statuses!.find(
         element => element.name === this.content.status
-      )!.color;
+      );
+      if (isCustom) {
+        return isCustom.color;
+      }
     }
     switch (this.content.status) {
       case status.success:

src/components/Whoosh/Whoosh.vue

@@ -15,6 +15,8 @@
         :fill="fill"
         :textColor="textColor"
         :progressColor="progressColor"
+        :messageStyle="messageStyle"
+        :titleStyle="titleStyle"
       />
     </transition-group>
   </div>
@@ -42,6 +44,8 @@ export default class Whoosh extends Vue {
   @Prop({ type: Boolean, default: false }) private closeOnClick!: boolean;
   @Prop({ type: Boolean, default: false }) private fill!: boolean;
   @Prop({ type: String, default: "black" }) private textColor!: string;
+  @Prop({ type: Object, required: false }) private messageStyle!: object;
+  @Prop({ type: Object, required: false }) private titleStyle!: object;
   @Prop({ type: String, required: false }) private progressColor!: string;
   @Prop({
     type: Object,