refactor: BootstrapVue components replaced (b-card to html).

Author: woothu

src/components/Sidebar/CSidebarNavLink.vue

@@ -2,17 +2,18 @@
   <div v-if="isExternalLink">
     <a :href="url" :class="classList">
       <i :class="classIcon"></i> {{name}}
-      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+      <c-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</c-badge>
     </a>
   </div>
   <div v-else>
     <router-link :to="url" :class="classList">
       <i :class="classIcon"></i> {{name}}
-      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+      <c-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</c-badge>
     </router-link>
   </div>
 </template>
 
+
 <script>
 export default {
   name: 'CSidebarNavLink',

src/components/Widgets/CWidget01.vue

@@ -1,11 +1,13 @@
 <template>
-  <b-card :class="styleClasses">
-    <div class="h4 m-0">{{header}}</div>
-    <div>{{text}}</div>
-    <b-progress height={} :variant="variant" :value="value"
-                :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-    <small class="text-muted">{{footer}}</small>
-  </b-card>
+  <div class='card' :class="styleClasses">
+    <div class='card-body'>
+      <div class="h4 m-0">{{header}}</div>
+      <div>{{text}}</div>
+      <c-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+      <small class="text-muted">{{footer}}</small>
+    </div>
+  </div>
 </template>
 
 <script>

src/components/Widgets/CWidget02.vue

@@ -1,14 +1,14 @@
 <template>
-  <b-card :no-body="true" footer-class="px-3 py-2">
-    <b-card-body class="p-3 clearfix">
+  <div class='card'>
+    <div class="card-body p-3 clearfix">
       <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
       <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
       <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-    </b-card-body>
-    <div slot="footer" v-if="showLink">
-      <b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
     </div>
-  </b-card>
+    <div class='card-footer px-3 py-2' v-if="showLink">
+      <c-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></c-link>
+    </div>
+  </div>
 </template>
 
 <script>

src/components/Widgets/CWidget03.vue

@@ -1,11 +1,11 @@
 <template>
-  <b-card :no-body="true">
-    <b-card-body class="p-0 clearfix">
+  <div class='card'>
+    <div class='card-body p-0 clearfix'>
       <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
       <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
       <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
-    </b-card-body>
-  </b-card>
+    </div>
+  </div>
 </template>
 
 <script>

src/components/Widgets/CWidget05.vue

@@ -1,13 +1,15 @@
 <template>
-  <b-card :class="styleClasses">
-    <div class="h1 text-muted text-right mb-4">
-      <i :class="iconClasses"></i>
+  <div class="card" :class="styleClasses">
+    <div class="card-body">
+      <div class="h1 text-muted text-right mb-4">
+        <i :class="iconClasses"></i>
+      </div>
+      <div class="h4 mb-0">{{header}}</div>
+      <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
+      <c-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
     </div>
-    <div class="h4 mb-0">{{header}}</div>
-    <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
-    <b-progress height={} :variant="variant" :value="value"
-                :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-  </b-card>
+  </div>
 </template>
 
 <script>

src/components/Widgets/CWidget06.vue

@@ -1,14 +1,14 @@
 <template>
-  <b-card no-body :class="cardClasses">
-    <b-card-body class="pb-0">
+  <div class="card" :class="cardClasses">
+    <div class="card-body pb-0">
       <slot name='dropdown'></slot>
       <h4 class="mb-0">{{header}}</h4>
       <p>{{text}}</p>
-    </b-card-body>
+    </div>
     <div class="chart-wrapper">
       <slot name='chart'></slot>
     </div>
-  </b-card>
+  </div>
 </template>
 
 <script>
@@ -19,8 +19,6 @@ export default {
       backgroundColor: '',
     }
   },
-  created ()  {
-  },
   props: {
     cardClasses: {
       type: String,