refactor: components, containers

src/views/Dashboard.vue

@@ -456,7 +456,7 @@ import CardBarChartExample from './dashboard/CardBarChartExample'
 import MainChartExample from './dashboard/MainChartExample'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
-import { Callout } from '../components/'
+import { Callout } from '@coreui/vue'
 
 export default {
   name: 'dashboard',

src/views/dashboard/CalloutChartExample.vue

@@ -1,6 +1,6 @@
 <script>
 import { Line } from 'vue-chartjs'
-import { getStyle } from '@coreui/coreui/js/src/utilities'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
 // const brandPrimary = '#20a8d8'
 // const brandSuccess = '#4dbd74'

src/views/theme/ColorTheme.vue

@@ -0,0 +1,29 @@
+<template>
+  <b-col xl="2" md="4" sm="6" xs="12" class="mb-4">
+    <div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
+    <slot></slot>
+    <color-view/>
+  </b-col>
+</template>
+
+<script>
+import ColorView from './ColorView'
+export default {
+  name: 'ColorTheme',
+  components: { ColorView },
+  props: {
+    classObj: {
+      type: String,
+      default: 'theme-color w-75 rounded mb-3'
+    },
+    color: {
+      type: String,
+      default: 'bg-secondary'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/theme/ColorView.vue

@@ -0,0 +1,46 @@
+<template>
+  <table class="w-100">
+    <tbody>
+    <tr>
+      <td class="text-muted">HEX:</td>
+      <td class="font-weight-bold">{{this.hexColor}}</td>
+    </tr>
+    <tr>
+      <td class="text-muted">RGB:</td>
+      <td class="font-weight-bold">{{this.bgColor}}</td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
+export default {
+  name: 'ColorView',
+  data: function () {
+    return {
+      bgColor: 'rgb(255, 255, 255)'
+    }
+  },
+  computed: {
+    hexColor () {
+      return rgbToHex(this.bgColor)
+    }
+  },
+  methods: {
+    setColor () {
+      const elem = this.$parent.$el.children[0]
+      const color = window.getComputedStyle(elem).getPropertyValue('background-color')
+      this.bgColor = color || this.bgColor
+    }
+  },
+  mounted () {
+    console.log('mounted')
+    this.setColor()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/theme/Colors.vue

@@ -1,102 +1,69 @@
 <template>
   <div class="animated fadeIn">
-    <div class="card">
-      <div class="card-header">
+    <b-card header-tag="header">
+      <div slot="header">
         <i class="icon-drop"></i> Theme colors
       </div>
-      <div class="card-body">
-        <div class="row">
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-primary">Primary</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-secondary">Secondary</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-success">Success</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-danger">Danger</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-warning">Warning</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-info">Info</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-light">Light</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-dark">Dark</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
+      <b-card-body>
+        <b-row>
+          <color-theme color="bg-primary">
+            <h6>Brand Primary Color</h6>
+          </color-theme>
+          <color-theme color="bg-secondary"><h6>Brand Secondary Color</h6></color-theme>
+          <color-theme color="bg-success"><h6>Brand Success Color</h6></color-theme>
+          <color-theme color="bg-danger"><h6>Brand Danger Color</h6></color-theme>
+          <color-theme color="bg-warning"><h6>Brand Warning Color</h6></color-theme>
+          <color-theme color="bg-info"><h6>Brand Info Color</h6></color-theme>
+          <color-theme color="bg-light"><h6>Brand Light Color</h6></color-theme>
+          <color-theme color="bg-dark"><h6>Brand Dark Color</h6></color-theme>
+        </b-row>
+      </b-card-body>
+    </b-card>
+    <b-card header-tag="header">
+      <div slot="header">
         <i class="icon-drop"></i> Grays
       </div>
-      <div class="card-body">
-        <div class="row mb-3">
-          <div class="col-md-4">
-            <div class="p-3 bg-gray-100">100</div>
-            <div class="p-3 bg-gray-200">200</div>
-            <div class="p-3 bg-gray-300">300</div>
-            <div class="p-3 bg-gray-400">400</div>
-            <div class="p-3 bg-gray-500">500</div>
-            <div class="p-3 bg-gray-600">600</div>
-            <div class="p-3 bg-gray-700">700</div>
-            <div class="p-3 bg-gray-800">800</div>
-            <div class="p-3 bg-gray-900">900</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
+      <b-card-body>
+        <b-row>
+          <color-theme color="bg-gray-100"><h6>Brand 100 Color</h6></color-theme>
+          <color-theme color="bg-gray-200"><h6>Brand 200 Color</h6></color-theme>
+          <color-theme color="bg-gray-300"><h6>Brand 300 Color</h6></color-theme>
+          <color-theme color="bg-gray-400"><h6>Brand 400 Color</h6></color-theme>
+          <color-theme color="bg-gray-500"><h6>Brand 500 Color</h6></color-theme>
+          <color-theme color="bg-gray-600"><h6>Brand 600 Color</h6></color-theme>
+          <color-theme color="bg-gray-700"><h6>Brand 700 Color</h6></color-theme>
+          <color-theme color="bg-gray-800"><h6>Brand 800 Color</h6></color-theme>
+          <color-theme color="bg-gray-900"><h6>Brand 900 Color</h6></color-theme>
+        </b-row>
+      </b-card-body>
+    </b-card>
+    <b-card header-tag="header">
+      <div slot="header">
         <i class="icon-drop"></i> Additional colors
       </div>
-      <div class="card-body">
-        <div class="row">
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-blue">Blue</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-indigo">Indigo</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-purple">Purple</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-pink">Pink</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-red">Red</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-orange">Orange</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-yellow">Yellow</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-green">Green</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-teal">Teal</div>
-          </div>
-          <div class="col-md-4">
-            <div class="p-3 mb-3 bg-cyan">Cyan</div>
-          </div>
-        </div>
-      </div>
-    </div>
+      <b-card-body>
+        <b-row>
+          <color-theme color="bg-blue"><h6>Brand Blue Color</h6></color-theme>
+          <color-theme color="bg-indigo"><h6>Brand Indigo Color</h6></color-theme>
+          <color-theme color="bg-purple"><h6>Brand Purple Color</h6></color-theme>
+          <color-theme color="bg-pink"><h6>Brand Pink Color</h6></color-theme>
+          <color-theme color="bg-red"><h6>Brand Red Color</h6></color-theme>
+          <color-theme color="bg-orange"><h6>Brand Orange Color</h6></color-theme>
+          <color-theme color="bg-yellow"><h6>Brand Yellow Color</h6></color-theme>
+          <color-theme color="bg-green"><h6>Brand Green Color</h6></color-theme>
+          <color-theme color="bg-teal"><h6>Brand Teal Color</h6></color-theme>
+          <color-theme color="bg-cyan"><h6>Brand Cyan Color</h6></color-theme>
+        </b-row>
+      </b-card-body>
+    </b-card>
   </div>
 </template>
 
 <script>
+import ColorTheme from './ColorTheme'
+
 export default {
-  name: 'colors'
+  name: 'colors',
+  components: { ColorTheme }
 }
 </script>