Merge pull request #4 from Ade94/customStyle

Custom Style
adecrown · Feb 21, 2020 · c5a3b2d · c5a3b2d
2 parents 0af3a63 + b6a5ad2
commit c5a3b2d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 6 deletions.
diff --git a/README.md b/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,44 @@ 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 but you can also overide the color of the default statuses by adding it to the statuses array
+```javascript
+  {
+    name: 'error',
+    color: 'black'
+  }
+```
+
diff --git a/src/components/Whoosh/Card.vue b/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:

diff --git a/src/components/Whoosh/Whoosh.vue b/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,