fix(CToast): add missing color prop

Author: xidedix

src/components/index.d.ts

@@ -634,6 +634,7 @@ declare class ToastProps extends Vue {
 export declare class CToast extends ToastProps {
   show?: boolean
   header?: string
+  color?: string
 }
 
 export declare class CToaster extends ToastProps {

src/components/toast/CToast.vue

@@ -2,7 +2,7 @@
   <transition :name="props.fade ? 'fade' : null" :appear="true"> 
     <div
       v-if="isShowed"
-      class="toast"
+      :class="toastClasses"
       role="alert"
       aria-live="assertive"
       aria-atomic="true"
@@ -76,6 +76,12 @@ export default {
         computedProps[key] = propIsInherited ? this.injectedProps[key] : this[key]
         return computedProps
       }, {})
+    },
+    toastClasses () {
+      return [
+        'toast',
+        { [`toast-${this.color}`]: !!this.color }
+      ]
     }
   },
   methods: {

src/components/toast/tests/CToast.spec.js

@@ -15,7 +15,8 @@ const customWrapper = mount(Component, {
     show: true,
     position: 'bottom-center',
     header: 'title',
-    autohide: 1000
+    autohide: 1000,
+    color: 'danger'
   },
   slots: {
     default: 'CToast body'

src/components/toast/tests/__snapshots__/CToast.spec.js.snap

@@ -22,7 +22,7 @@ exports[`CToast renders correctly custom wrapper 1`] = `
   appear="true"
   aria-atomic="true"
   aria-live="assertive"
-  class="toast"
+  class="toast toast-danger"
   name="fade"
   position="bottom-center"
   role="alert"
@@ -31,14 +31,14 @@ exports[`CToast renders correctly custom wrapper 1`] = `
     class="toast-header"
   >
     <strong
-      class="mr-auto"
+      class="mfe-auto"
     >
       title
     </strong>
      
     <button
       aria-label="Close"
-      class="ml-2 mb-1 close"
+      class="mfs-2 mb-1 close"
       type="button"
     >
       ×

src/components/toast/toast-props.js

@@ -10,5 +10,9 @@ export const props = {
   fade: {
     type: Boolean,
     default: true
+  },
+  color: {
+    type: String,
+    default: ''
   }
 }