Widgets converted to components

src/views/widgets/SocialMediaWidget.vue

@@ -0,0 +1,60 @@
+<template>
+  <b-col md="3" sm="6">
+    <div class="brand-card">
+      <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+        <i  class="fa" :class="'fa-'+ type"></i>
+        <div class="chart-wrapper">
+          <social-box-chart-example :data="dataPoints" />
+        </div>
+      </div>
+      <div class="brand-card-body">
+        <div>
+          <div class="text-value">{{rightHeader}}</div>
+          <div class="text-uppercase text-muted small">{{rightFooter}}</div>
+        </div>
+        <div>
+          <div class="text-value">{{leftHeader}}</div>
+          <div class="text-uppercase text-muted small">{{leftFooter}}</div>
+        </div>
+      </div>
+    </div>
+  </b-col>
+</template>
+
+<script>
+import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
+
+
+export default {
+  name: 'SocialMediaWidget',
+  components: {
+    SocialBoxChartExample
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'facebook'
+    },
+    dataPoints: {
+      type: Array,
+      default: [65, 59, 84, 84, 51, 55, 40]
+    },
+    rightHeader: {
+      type: String,
+      default: '89k'
+    },
+    rightFooter: {
+      type: String,
+      default: 'friends'
+    },
+    leftHeader: {
+      type: String,
+      default: '459'
+    },
+    leftFooter: {
+      type: String,
+      default: 'feeds'
+    },
+  }
+}
+</script>

src/views/widgets/Widget01.vue

@@ -0,0 +1,51 @@
+<template>
+  <b-col sm="6" lg="3">
+    <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>
+  </b-col>
+</template>
+
+<script>
+export default {
+  name: 'Widget01',
+  data () {
+    return{
+      backgroundColor: '',
+      styleClasses: '',
+    }
+  },
+  created ()  {
+    if(this.variant.includes('background')){
+      this.backgroundColor = this.variant.replace('background-','');
+      this.styleClasses = 'text-white bg-' + this.backgroundColor
+    }
+  },
+  props: {
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    footer: {
+      type: String,
+      default: 'Lorem ipsum dolor sit amet enim.'
+    },
+    value: {
+      type: Number,
+      default: 25
+    },
+  }
+}
+</script>

src/views/widgets/Widget02.vue

@@ -0,0 +1,42 @@
+<template>
+  <b-col cols="12" sm="6" lg="3">
+    <b-card :no-body="true" footer-class="px-3 py-2">
+      <b-card-body class="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>
+  </b-col>
+</template>
+
+<script>
+export default {
+  name: 'Widget02',
+  props: {
+    iconClasses: {
+      type: String,
+      default: 'fa fa-cogs bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Income'
+    },
+    showLink: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+      default: '#'
+    },
+  }
+}
+</script>

src/views/widgets/Widget03.vue

@@ -1,31 +1,31 @@
 <template>
-  <div class={classes}>
-    <div class={classCardHeader}>
-      <i class={icon}></i>
-      {children}
-    </div>
-    <div class={classCardBody}>
-      <div>
-        <div class="text-value">{vals[1]}</div>
-        <div class="text-uppercase text-muted small">{keys[1]}</div>
-      </div>
-      <div>
-        <div class="text-value">{vals[2]}</div>
-        <div class="text-uppercase text-muted small">{keys[2]}</div>
-      </div>
-    </div>
-  </div>
+  <b-col cols="12" sm="6" lg="3">
+    <b-card :no-body="true">
+      <b-card-body class="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>
+  </b-col>
 </template>
 
 <script>
 export default {
   name: 'Widget03',
   props: {
-    value: {
-      type: Boolean,
-      default: true
-    }
+    iconClasses: {
+      type: String,
+      default: 'fa fa-cogs bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Income'
+    },
   }
 }
 </script>
-

src/views/widgets/Widget04.vue

@@ -0,0 +1,51 @@
+<template>
+    <b-card :class="styleClasses">
+      <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>
+      <b-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+    </b-card>
+</template>
+
+<script>
+export default {
+  name: 'Widget04',
+  data () {
+    return{
+      backgroundColor: '',
+      styleClasses: '',
+    }
+  },
+  created ()  {
+    if(this.variant.includes('background')){
+      this.backgroundColor = this.variant.replace('background-','');
+      this.styleClasses = 'text-white bg-' + this.backgroundColor
+    }
+  },
+  props: {
+    iconClasses: {
+      type: String,
+      default: 'icon-people'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Number,
+      default: 25
+    },
+  }
+}
+</script>