refactor: refactoring template

babel.config.js

@@ -1,5 +1,12 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', {
+      polyfills: [
+        'es6.promise', // already default included now
+        'es6.array.iterator', // already default included now
+        'es6.symbol',
+        'es6.object.assign'
+      ]
+    }]
   ]
 }

package.json

@@ -14,13 +14,13 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.14",
+    "@coreui/coreui": "^2.0.20",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/vue": "^2.0.2",
+    "@coreui/vue": "github:coreui/coreui-vue#vue_cli3",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "chart.js": "^2.7.2",
+    "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
     "flag-icon-css": "^3.2.0",
@@ -33,17 +33,17 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
+    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.4",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
-    "@vue/cli-plugin-eslint": "^3.0.4",
+    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
+    "@vue/cli-plugin-unit-jest": "^3.0.5",
-    "@vue/cli-service": "^3.0.4",
+    "@vue/cli-service": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.17"
   },

src/containers/DefaultAside.vue

@@ -102,7 +102,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <CBadge variant="success" class="avatar-status"/>
             </div>
           </div>
           <div>
@@ -117,7 +117,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="danger" class="avatar-status"></b-badge>
+              <c-badge variant="danger" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -132,7 +132,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="info" class="avatar-status"></b-badge>
+              <c-badge variant="info" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -147,7 +147,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="warning" class="avatar-status"></b-badge>
+              <c-badge variant="warning" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>
@@ -162,7 +162,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <b-badge variant="dark" class="avatar-status"></b-badge>
+              <c-badge variant="dark" class="avatar-status"></c-badge>
             </div>
           </div>
           <div>

src/containers/DefaultContainer.vue

@@ -37,7 +37,7 @@
         <SidebarMinimizer/>
       </AppSidebar>
       <main class="main">
-        <Breadcrumb :list="list"/>
+        <CBreadcrumbRouter/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
@@ -63,7 +63,7 @@
 
 <script>
 import nav from '@/_nav'
-import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
+import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
@@ -75,7 +75,6 @@ export default {
     AppSidebar,
     AppAside,
     TheFooter,
-    Breadcrumb,
     DefaultAside,
     DefaultHeaderDropdownAccnt,
     SidebarForm,
@@ -89,14 +88,6 @@ export default {
     return {
       nav: nav.items
     }
-  },
-  computed: {
-    name () {
-      return this.$route.name
-    },
-    list () {
-      return this.$route.matched.filter((route) => route.name || route.meta.label )
-    }
   }
 }
 </script>

src/containers/DefaultHeaderDropdownAccnt.vue

@@ -1,24 +1,24 @@
 <template>
-  <AppHeaderDropdown right no-caret>
+  <c-nav-item-dropdown no-caret right>
-    <template slot="header">
+    <template slot="button-content">
       <img
         src="img/avatars/6.jpg"
         class="img-avatar"
         alt="admin@bootstrapmaster.com" />
-    </template>\
+    </template>
-    <template slot="dropdown">
+    
     <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
     <b-dropdown-item><i class="fa fa-bell-o" /> Updates
-        <b-badge variant="info">{{ itemsCount }}</b-badge>
+      <c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
-        <b-badge variant="success">{{ itemsCount }}</b-badge>
+      <c-badge variant="success">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-item><i class="fa fa-tasks" /> Tasks
-        <b-badge variant="danger">{{ itemsCount }}</b-badge>
+      <c-badge variant="danger">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-item><i class="fa fa-comments" /> Comments
-        <b-badge variant="warning">{{ itemsCount }}</b-badge>
+      <c-badge variant="warning">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-header
       tag="div"
@@ -28,27 +28,23 @@
     <b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
     <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
     <b-dropdown-item><i class="fa fa-usd" /> Payments
-        <b-badge variant="secondary">{{ itemsCount }}</b-badge>
+      <c-badge variant="secondary">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-item><i class="fa fa-file" /> Projects
-        <b-badge variant="primary">{{ itemsCount }}</b-badge>
+      <c-badge variant="primary">{{ itemsCount }}</c-badge>
     </b-dropdown-item>
     <b-dropdown-divider />
     <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
     <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
-    </template>
+  </c-nav-item-dropdown>
-  </AppHeaderDropdown>
 </template>
 
 <script>
-import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
+
 export default {
   name: 'DefaultHeaderDropdownAccnt',
-  components: {
-    AppHeaderDropdown
-  },
   data: () => {
     return { itemsCount: 42 }
-  }
+  },
 }
 </script>

src/main.js

@@ -3,23 +3,28 @@
 import 'core-js/es6/promise'
 import 'core-js/es6/string'
 import 'core-js/es7/array'
+
 // import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
+import CoreuiVue from '@coreui/vue'
+
+Vue.config.performance = true
 
 // todo
 // cssVars()
-
 Vue.use(BootstrapVue)
+Vue.use(CoreuiVue)
+
 
 /* eslint-disable no-new */
-new Vue({
+var vm = new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: {
     App
-  }
+  },
 })

src/mixins/charts/chartMixins.js

@@ -1,53 +0,0 @@
-import { deepObjectsMerge, getColor } from '@coreui/coreui/dist/js/coreui-utilities'
-
-const generatedLabels = {
-  computed:{
-    generatedLabels() {
-      if(this.labels !== undefined)
-        return this.labels
-      let labels = [];
-      for(let i=1; i<=this.data.length; i++)
-        labels.push('')
-      return labels
-    },
-  },
-}
-const generatedBackgroundColor = {
-  computed:{
-    generatedBackgroundColor(){
-      return getColor(this.backgroundColor)
-    },
-  },
-}
-const generatedBorderColor = {
-  computed:{
-    generatedBorderColor(){
-      return getColor(this.borderColor)
-    },
-  },
-}
-const generatedPointHoverBackgroundColor = {
-  computed:{
-    generatedPointHoverBackgroundColor () {
-     if(this.$options.propsData.pointHoverBackgroundColor === undefined)
-       return this.generatedBorderColor
-     return getColor(this.pointHoverBackgroundColor)
-    },
-  },
-}
-const generatedOptions = {
-  computed:{
-    generatedOptions () {
-     if(this.$options.propsData.options !== undefined)
-       deepObjectsMerge(this.finalOptions, this.options)
-     return this.finalOptions
-    },
-  },
-}
-export{
-  generatedLabels,
-  generatedBackgroundColor,
-  generatedBorderColor,
-  generatedPointHoverBackgroundColor,
-  generatedOptions
-}

src/views/Charts.vue

@@ -2,34 +2,35 @@
   <div class="animated fadeIn">
     <b-card-group columns class="card-columns">
       <b-card header="Line Chart">
-        <div class="chart-wrapper">
+        <line-example/>
-          <line-example chartId="chart-line-01"/>
-        </div>
       </b-card>
       <b-card header="Bar Chart">
-        <div class="chart-wrapper">
+        <bar-example/>
-          <bar-example chartId="chart-bar-01"/>
-        </div>
       </b-card>
       <b-card header="Doughnut Chart">
-        <div class="chart-wrapper">
+        <doughnut-example/>
-          <doughnut-example chartId="chart-doughnut-01"/>
-        </div>
       </b-card>
       <b-card header="Radar Chart">
-        <div class="chart-wrapper">
+        <radar-example/>
-          <radar-example chartId="chart-radar-01"/>
-        </div>
       </b-card>
       <b-card header="Pie Chart">
-        <div class="chart-wrapper">
+        <pie-example/>
-          <pie-example chartId="chart-pie-01"/>
-        </div>
       </b-card>
       <b-card header="Polar Area Chart">
-        <div class="chart-wrapper">
+        <polar-area-example/>
-          <polar-area-example chartId="chart-polar-area-01"/>
+      </b-card>
-        </div>
+      <b-card header="Simple line chart">
+        <c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                     label='Sales' borderColor='success'/>
+      </b-card>
+      <b-card header="Simple pointed chart">
+        <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+                     :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
+                     style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
+      </b-card>
+      <b-card header="Simple bar chart">
+        <c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                    label='Sales' color='danger'/>
       </b-card>
     </b-card-group>
   </div>
@@ -43,7 +44,7 @@ import PieExample from './charts/PieExample'
 import PolarAreaExample from './charts/PolarAreaExample'
 
 export default {
-  name: 'charts',
+  name: 'Charts',
   components: {
     BarExample,
     LineExample,

src/views/Dashboard.vue

@@ -2,9 +2,8 @@
   <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+        <c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
-          <template slot='dropdown'>
+            <b-dropdown slot='dropdown' class="float-right" variant="transparent p-0" right>
-            <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
               </template>
@@ -13,16 +12,14 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-          </template>
+          <c-simple-pointed-chart  class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-          <template slot='chart'>
-            <line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
+                       style='height:70px' label='Members' pointHoverColor='primary'/>
-          </template>
+
-        </widget06>
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+        <c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
               <template slot="button-content">
@@ -34,16 +31,14 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
+            <c-simple-pointed-chart class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
-            <line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                          style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
-                         pointHoverBackgroundColor='info'/>
+                         pointHoverColor='info'/>
-          </template>
+        </c-widget06>
-        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+        <c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -55,17 +50,15 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
+            <c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]'
-            <line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
+                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
+                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-          </template>
+        </c-widget06>
-        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
+        <c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
-          <template name='dropdown'>
+          <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -76,11 +69,9 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template name='chart'>
+            <c-simple-bar-chart :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-            <bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
+        </c-widget06>
-          </template>
-        </widget06>
       </b-col>
     </b-row>
     <b-card>
@@ -100,7 +91,7 @@
           </b-button-toolbar>
         </b-col>
       </b-row>
-      <main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
+      <main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example>
       <div slot="footer">
         <b-row class="text-center">
           <b-col class="mb-sm-2 mb-0">
@@ -133,32 +124,32 @@
     </b-card>
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+          <c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+          <c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+          <c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
+        <c-widget04  variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
+          <c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-row>
@@ -171,9 +162,9 @@
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
+                    <div :style="{ top: '-10px'}">
                       <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -181,8 +172,8 @@
                   <Callout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
+                    <div :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -281,8 +272,8 @@
                   <Callout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
+                    <div :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
                   </Callout>
                 </b-col>
@@ -290,8 +281,8 @@
                   <Callout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
-                    <div class="chart-wrapper" :style="{ top: '-10px'}">
+                    <div :style="{ top: '-10px'}">
-                      <callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -408,27 +399,13 @@
 import MainChartExample from './dashboard/MainChartExample'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
-import { Callout } from '@coreui/vue'
-import Widget04 from './widgets/Widget04'
-import Widget06 from './widgets/Widget06'
-import LineChart1 from './dashboard/LineChart1'
-import LineChart2 from './dashboard/LineChart2'
-
-import BarChart1 from './dashboard/BarChart1'
-
 
 export default {
-  name: 'dashboard',
+  name: 'Dashboard',
   components: {
-    Callout,
     MainChartExample,
     SocialBoxChartExample,
     CalloutChartExample,
-    Widget04,
-    Widget06,
-    LineChart1,
-    LineChart2,
-    BarChart1
   },
   data: function () {
     return {

src/views/Widgets.vue

@@ -1,189 +1,207 @@
 <template>
-  <div class="animated fadeIn" @dblclick="copyTry($event)">
+  <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
-                  variant="success" :value="25"/>
+          <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
+        </c-widget01>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="info" :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-          <widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+          <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                     variant="danger" :value="25"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col sm="6" lg="3">
-        <widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-success" :value="25"/>
+                  variant="success" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-info" :value="25"/>
+                  variant="info" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-warning" :value="25"/>
+                  variant="warning" inverse :value="25"/>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="background-danger" :value="25"/>
+                  variant="danger" inverse :value="25"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" :showLink="true"/>
+        <c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
       </b-col>
       <b-col cols="12" sm="6" lg="3">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
       </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
       </b-col>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
       </b-col>
       <b-col cols="12" sm="6" lg="4">
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+        <c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
       </b-col>
 
     </b-row><!--/.row-->
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
        </b-col>
-       <b-col md="3" sm="6" class="codeContainer" data-code="<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>">
+       <b-col md="3" sm="6" class="codeContainer">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>
+        <c-widget04  variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
+          <i slot="icon" class="fa fa-battery-1"></i>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
+        <c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+          <c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px' color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
+        <c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+          <c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+        <c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+          <c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
                        :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+                       style='height:100px'  color='rgba(255,255,255,.1)'/>
-        </widget04>
+        </c-widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
+        <c-widget04 variant='google-plus'
-          <line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
+                    rightHeader='894'
+                    rightFooter='followers'
+                    leftHeader='92' leftFooter='circles'>
+          <c-simple-line-chart chartId="google-plus"
+                               :data='[35, 23, 56, 22, 97, 23, 64]'
+                               label='Followers'
                                :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+                               style='height:100px'
-        </widget04>
+                               color='rgba(255,255,255,.1)'/>
+        </c-widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-card-group class="mb-4">
-      <widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+    </b-card-group>
+    <b-card-group class="mb-4">
+      <c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
+      <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+      <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+      <c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
+      <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
     </b-card-group>
     <b-row>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
+          <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
+        </c-widget05>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
+        <c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
+        <c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
+        <c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
+        <c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
+        <c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
       </b-col>
       <b-col sm="6" md="2">
-        <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
+        <c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+        <c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -195,36 +213,34 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
+          <c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-            <line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
+                         style='height:70px' label='Members' pointHoverColor='primary'/>
-          </template>
+        </c-widget06>
-        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+        <c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
-          <template slot='dropdown'>
+          <b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
-            <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
+            <i slot="button-content"
-              <template slot="button-content">
+               class="icon-location-pin"
-                <i class="icon-location-pin"></i>
+            ></i>
-              </template>
             <b-dropdown-item>Action</b-dropdown-item>
             <b-dropdown-item>Another action</b-dropdown-item>
             <b-dropdown-item>Something else here...</b-dropdown-item>
             <b-dropdown-item disabled>Disabled action</b-dropdown-item>
           </b-dropdown>
-          </template>
+          <CSimplePointedChart class="px-3"
-          <template slot='chart'>
+                               :data="[1, 18, 9, 17, 34, 22, 11]"
-            <line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
                                :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
-                         style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
+                               style="height:70px"
-                         pointHoverBackgroundColor='info'/>
+                               label="Members"
-          </template>
+                               :options="{elements: {line: {tension: 0.00001}}}"
-        </widget06>
+                               pointHoverColor="info"
+          />
+        </c-widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+        <c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
           <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
@@ -236,17 +252,15 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template slot='chart'>
+          <c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
-            <line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
+                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
+                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-          </template>
+        </c-widget06>
-        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
+        <c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
-          <template name='dropdown'>
+          <template slot="dropdown">
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -257,122 +271,86 @@
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
           </template>
-          <template name='chart'>
+          <c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-            <bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
-                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
+        </c-widget06>
-          </template>
-        </widget06>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="6" lg="3">
-        <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px"
-        </widget07>
+                           :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+                           label="Sales"
+          />
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <c-widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <c-widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        </c-widget07>
       </b-col>
       <b-col sm="6" lg="3">
-        <widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <c-widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </widget07>
+        </c-widget07>
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
+        <c-widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='danger'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
+        <c-widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='primary'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08 header='title' text='1,123'>
+        <c-widget08 header='title' text='1,123'>
-          <line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                       <CSimpleLineChart style="height:40px"
-                       label='Sales' borderColor='success'/>
+                                        :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
-        </widget08>
+                                        label="Sales"
+                                        borderColor="success"
+                       />
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
+        <c-widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='danger'/>
+                      label='Sales' color='danger'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
+        <c-widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='primary'/>
+                      label='Sales' color='primary'/>
-        </widget08>
+        </c-widget08>
       </b-col>
       <b-col sm="4" lg="2">
-        <widget08  header='title' text='1,123'>
+        <c-widget08  header='title' text='1,123'>
-          <bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <c-simple-bar-chart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                      label='Sales' backgroundColor='success'/>
+                      label='Sales' color='success'/>
-        </widget08>
+        </c-widget08>
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
-import Widget01 from './widgets/Widget01'
-import Widget02 from './widgets/Widget02'
-import Widget03 from './widgets/Widget03'
-import Widget04 from './widgets/Widget04'
-import Widget05 from './widgets/Widget05'
-import Widget06 from './widgets/Widget06'
-import Widget07 from './widgets/Widget07'
-import Widget08 from './widgets/Widget08'
-import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
-import LineChart1 from './dashboard/LineChart1'
-import LineChart2 from './dashboard/LineChart2'
-import BarChart1 from './dashboard/BarChart1'
-
 export default {
-  name: 'Widgets',
+  name: 'Widgets'
-  components: {
-    Widget01,
-    Widget02,
-    Widget03,
-    Widget04,
-    Widget05,
-    Widget06,
-    Widget07,
-    Widget08,
-    SocialBoxChartExample,
-    LineChart1,
-    LineChart2,
-    BarChart1,
-  },
-  methods:{
-    copyTry:function($event){
-      var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
-      if(componentCode)
-        console.log(componentCode)
-        const el = document.createElement('textarea');
-        el.value = componentCode;
-        document.body.appendChild(el);
-        el.select();
-        document.execCommand('copy');
-        document.body.removeChild(el);
-    },
-  }
 }
 </script>

src/views/base/Breadcrumbs.vue

@@ -14,7 +14,11 @@
                 </a>
               </div>
             </div>
-            <b-breadcrumb :items="items"/>
+            <CBreadcrumb :items="items"/>
+            <CBreadcrumb :items="items2"/>
+            <CBreadcrumb :items="items3"/>
+            <Breadcrumb :list="items3"/>
+
           </b-card>
         </b-col>
       </b-row>
@@ -23,8 +27,12 @@
 </template>
 
 <script>
+// import CBreadcrumb from './CBreadcrumb'
 export default {
   name: 'breadcrumbs',
+  // components: {
+  //   CBreadcrumb
+  // },
   data () {
     return {
       items: [{
@@ -34,8 +42,33 @@ export default {
         text: 'Manage',
         href: '#'
       }, {
-        text: 'Library',
+        text: 'Library'
-        active: true
+      }],
+      items2: [{
+        text: 'Go to dashboard',
+        to: '/dashboard'
+      }, {
+        text: 'Go to widgets',
+        to: '/Widgets'
+      }, {
+        text: 'Go to Google',
+        href: 'http://google.com'
+      },{
+        text: 'Current page'
+      }],
+      items3: ['sd', {
+        text: 'Link',
+        to: '#2',
+        activeClass: 'bg-info p-1'
+      }, {
+        text: 'Active',
+        to: '#3',
+        activeClass: 'bg-warning p-1'
+      },{
+        text: 'Classes',
+        to: '#4',
+        activeClass: 'bg-danger p-1',
+        current: false
       }]
     }
   }

src/views/base/CLink.js

@@ -0,0 +1,170 @@
+import { mergeData } from 'vue-functional-data-merge'
+
+/**
+ * The Link component is used in many other BV components.
+ * As such, sharing its props makes supporting all its features easier.
+ * However, some components need to modify the defaults for their own purpose.
+ * Prefer sharing a fresh copy of the props to ensure mutations
+ * do not affect other component references to the props.
+ *
+ * https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
+ * @return {{}}
+ */
+export function propsFactory () {
+  return {
+    href: {
+      type: String,
+      default: null
+    },
+    rel: {
+      type: String,
+      default: null
+    },
+    target: {
+      type: String,
+      default: '_self'
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    activeClass: {
+      type: String,
+      default: 'active'
+    },
+    append: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    event: {
+      type: [String, Array],
+      default: 'click'
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    exactActiveClass: {
+      type: String,
+      default: 'active'
+    },
+    replace: {
+      type: Boolean,
+      default: false
+    },
+    routerTag: {
+      type: String,
+      default: 'a'
+    },
+    to: {
+      type: [String, Object],
+      default: null
+    }
+  }
+}
+
+export const props = propsFactory()
+
+
+function computeTag (props, parent) {
+  return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
+}
+
+/*eslint no-unused-vars: ["error", {"args": "none"}]*/
+function computeHref ({ disabled, href, to }, tag) {
+  // We've already checked the parent.$router in computeTag,
+  // so router-link means live router.
+  // When deferring to Vue Router's router-link,
+  // don't use the href attr at all.
+  // Must return undefined for router-link to populate href.
+  if (tag === 'router-link') return void 0
+  // If href explicitly provided
+  if (href) return href
+  // Reconstruct href when `to` used, but no router
+  if (to) {
+    // Fallback to `to` prop (if `to` is a string)
+    if (typeof to === 'string') return to
+    // Fallback to `to.path` prop (if `to` is an object)
+    if (typeof to === 'object' && typeof to.path === 'string') return to.path
+  }
+  // If nothing is provided use '#'
+  return '#'
+}
+
+function computeRel ({ target, rel }) {
+  if (target === '_blank' && rel === null) {
+    return 'noopener'
+  }
+  return rel || null
+}
+
+function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
+  const isRouterLink = tag === 'router-link'
+
+  return function onClick (e) {
+    if (disabled && e instanceof Event) {
+      // Stop event from bubbling up.
+      e.stopPropagation()
+      // Kill the event loop attached to this specific EventTarget.
+      e.stopImmediatePropagation()
+    } else {
+      parent.$root.$emit('clicked::link', e)
+
+      if (isRouterLink && e.target.__vue__) {
+        e.target.__vue__.$emit('click', e)
+      }
+      if (typeof suppliedHandler === 'function') {
+        suppliedHandler(...arguments)
+      }
+    }
+
+    if ((!isRouterLink && href === '#') || disabled) {
+      // Stop scroll-to-top behavior or navigation.
+      e.preventDefault()
+    }
+  }
+}
+
+export default {
+  functional: true,
+  name: 'CLink',
+  props: propsFactory(),
+  render (h, { props, data, parent, children }) {
+    const tag = computeTag(props, parent)
+    const rel = computeRel(props)
+    const href = computeHref(props, tag)
+    const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
+    const suppliedHandler = (data[eventType] || {}).click
+    const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
+
+    const componentData = mergeData(data, {
+      class: [
+        props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
+        { disabled: props.disabled }
+      ],
+      attrs: {
+        rel,
+        href,
+        target: props.target,
+        tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
+        'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
+      },
+      props: Object.assign(props, { tag: props.routerTag })
+    })
+
+    // If href prop exists on router-link (even undefined or null) it fails working on SSR
+    if (!componentData.attrs.href) {
+      delete componentData.attrs.href
+    }
+
+    // We want to overwrite any click handler since our callback
+    // will invoke the supplied handler if !props.disabled
+    componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
+
+    return h(tag, componentData, children)
+  }
+}

src/views/base/CNavItemDropdown.vue

@@ -0,0 +1,90 @@
+<template>
+  <li :class='dropdownClasses' :id="safeId">
+    <a href="#" :id="'C-' + safeId"  aria-haspopup="true" :aria-expanded="visible"
+       :class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
+      <slot name="button-content">{{text}}</slot>
+    </a>
+    <div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
+      <slot></slot>
+      <slot name="dropdown"></slot>
+    </div>
+  </li>
+</template>
+<script>
+
+export default {
+  name: 'CNavItemDropdown',
+  data () {
+    return {
+      visible: this.show
+    }
+  },
+  props: {
+    noCaret: {
+      type: Boolean,
+      default: false
+    },
+    extraToggleClasses: {
+      type: String,
+      default: ''
+    },
+    extraMenuClasses: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: 'Dropdown'
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    dropup: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    right: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods:{
+    toggle (visible) {
+      if(this.disabled)
+        return
+      this.visible = visible
+    }
+  },
+  computed: {
+    dropdownClasses () {
+      return [
+        'nav-item',
+        'dropdown',
+        this.dropup ? 'dropup' : '',
+        this.visible ? 'show' : ''
+      ]
+    },
+    toggleClasses () {
+      return [
+        'nav-link',
+        this.noCaret ? '' : 'dropdown-toggle',
+        this.disabled ? 'disabled' : '',
+        this.extraToggleClasses ? this.extraToggleClasses : ''
+      ]
+    },
+    menuClasses () {
+      return [
+        'dropdown-menu',
+        this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
+        this.visible ? 'show' : '',
+        this.extraMenuClasses ? this.extraMenuClasses : ''
+      ]
+    }
+  },
+}
+</script>

src/views/base/CSwitch.vue

@@ -0,0 +1,116 @@
+<template>
+  <label :class="classList">
+    <input
+      :id="id"
+      :name="name"
+      :type="type"
+      :checked="isChecked"
+      :disabled="disabled"
+      :required="required"
+      :value="value"
+      class="switch-input form-check-input"
+      @change="toggle"
+    >
+    <span
+      :data-checked="dataOn"
+      :data-unchecked="dataOff"
+      class="switch-slider"
+    >
+    </span>
+  </label>
+</template>
+
+<script>
+export default {
+  name:'CSwitch',
+  model: {
+    prop: 'passedValue',
+    event: 'change'
+  },
+  data: function () {
+    return {
+      isChecked: null,
+      passedValue: null
+    }
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'secondary'
+    },
+    outline: {
+      type: [Boolean, String],
+      default: null,
+      validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
+    },
+    shape: {
+      type: String,
+      default: null,
+      validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
+    },
+    id: String,
+    name: String,
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    disabled: Boolean,
+    required: Boolean,
+    value: String,
+    trueValue: [String, Number, Array, Object],
+    falseValue: [String, Number, Array, Object],
+    dataOn: String,
+    dataOff: String,
+    type: {
+      type: String,
+      default: 'checkbox'
+    }
+  },
+  computed: {
+    classList () {
+      return [
+        'switch',
+        this.dataOn || this.dataOff ? 'switch-label' : '',
+        this.size ? `switch-${this.size}` : '',
+        this.shape ? `switch-${this.shape}` : '',
+        `switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
+        'form-check-label'
+      ]
+    }
+  },
+  methods: {
+    toggle (event) {
+      this.setValues(event.target.checked)
+      this.$emit('change', this.passedValue, event);
+    },
+    setValues (checked) {
+      this.isChecked = checked
+      if(checked)
+        this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
+      else
+        this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
+    },
+    detectPassedCheck (modelValue) {
+      if(typeof modelValue === 'boolean')
+        this.isChecked = modelValue
+      else if (modelValue === this.falseValue)
+        this.isChecked = false
+      else if (modelValue === this.trueValue)
+        this.isChecked = true
+      else if (this.type === 'checkbox')
+        console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
+    }
+  },
+  created () {
+    if(this.$vnode.data.model)
+      this.detectPassedCheck(this.$vnode.data.model.value)
+    else
+      this.isChecked = this.checked
+  }
+}
+</script>

src/views/base/Navbars.vue

@@ -33,12 +33,20 @@
                 <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
               </b-nav-form>
 
-              <b-nav-item-dropdown text="Lang" right>
+              <c-nav-item-dropdown text="Lang">
-                <b-dropdown-item href="#">EN</b-dropdown-item>
+                <!-- <template slot="button-content">
-                <b-dropdown-item href="#">ES</b-dropdown-item>
+                  <img
-                <b-dropdown-item href="#">RU</b-dropdown-item>
+                    src="img/avatars/6.jpg"
-                <b-dropdown-item href="#">FA</b-dropdown-item>
+                    class="img-avatar"
-              </b-nav-item-dropdown>
+                    alt="admin@bootstrapmaster.com" />
+                </template> -->
+                <template slot="dropdown">
+                  <a href="#" class='dropdown-item'>EN</a>
+                  <a href="#" class='dropdown-item'>ES</a>
+                  <a href="#" class='dropdown-item'>RU</a>
+                  <a href="#" class='dropdown-item'>FA</a>
+                </template>
+              </c-nav-item-dropdown>
 
               <b-nav-item-dropdown right>
                 <!-- Using button-content slot -->
@@ -157,8 +165,12 @@
 </template>
 
 <script>
+import CNavItemDropdown from './CNavItemDropdown'
+
 export default {
-  name: 'navbars'
+  name: 'navbars',
+  components:{
+    CNavItemDropdown
+  }
 }
 </script>
-

src/views/base/ProgressBars.vue

@@ -13,12 +13,12 @@
           </div>
         </div>
         <div>
-          <b-progress :value="counter" :max="max" show-progress animated></b-progress>
+          <c-progress :value="counter" :max="max" show-progress animated></c-progress>
-          <b-progress class="mt-1" :max="max" show-value>
+          <CProgress class="mt-1" :max="max" show-value>
-            <b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
+            <CProgressBar :value="counter*(6/10)" color="success"/>
-            <b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
+            <CProgressBar :value="counter*(2.5/10)" color="warning"/>
-            <b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
+            <CProgressBar :value="counter*(1.5/10)" color="danger"/>
-          </b-progress>
+          </CProgress>
           <b-btn class="mt-4" @click="clicked">Click me</b-btn>
         </div>
       </b-card>
@@ -200,4 +200,3 @@ export default {
   }
 }
 </script>
-

src/views/base/Switches.vue

@@ -1,5 +1,36 @@
 <template>
   <div class="animated fadeIn">
+    <!-- <p>myFlag1: {{radio}}</p>
+    <p>myFlag1: {{myFlag1}}</p>
+    <p>myFlag2: {{myFlag2}}</p>
+    <CSwitch v-model="myFlag1"/>
+    <CSwitch v-model="myFlag2" checked @change="test" /> -->
+    <b-row>
+      <b-col xs="12" md="6">
+        <b-card>
+          <div slot="header">
+            <h5>
+               Radio switches
+              <b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
+              <b-badge variant="danger" class="float-right">NEW</b-badge>
+            </h5>
+          </div>
+          <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/>
+          <CSwitch class="mx-1"
+                   :key="key"
+                   :variant="variant"
+                   shape="3d"
+                   outline="alt"
+                   v-bind="labelIcon"
+                   type="radio"
+                   name="radio"
+                   v-model="radio"
+                   :trueValue="variant"
+                   v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
+          />
+        </b-card>
+      </b-col>
+    </b-row>
     <b-row>
       <b-col xs="12" md="6">
         <b-card>
@@ -7,15 +38,22 @@
             Switch default
             <b-badge variant="primary">{{checker}}</b-badge>
           </div>
-          <c-switch class="mx-1" color="primary" checked name="switch1" v-model="checker" value="yes" uncheckedValue="no"/>
+          <CSwitch class="mx-1"
-          <c-switch class="mx-1" color="secondary" checked />
+            variant="primary"
-          <c-switch class="mx-1" color="success" checked />
+            checked
-          <c-switch class="mx-1" color="warning" checked />
+            name="switch1"
-          <c-switch class="mx-1" color="info" checked />
+            v-model="checker"
-          <c-switch class="mx-1" color="danger" checked />
+            value="someValue"
-          <c-switch class="mx-1" color="light" checked />
+            trueValue="yes"
-          <c-switch class="mx-1" color="dark" checked />
+            falseValue="no"
-          <c-switch class="mx-1" color="primary" disabled />
+          />
+          <CSwitch class="mx-1"
+                   :variant="variant"
+                   checked
+                   :key="key"
+                   v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
+          />
+          <CSwitch class="mx-1" variant="primary" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -23,15 +61,15 @@
           <div slot="header">
             Switch pills
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="pill" />
+          <c-switch class="mx-1" variant="primary" checked  shape="pill"/>
-          <c-switch class="mx-1" color="secondary" checked variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked  shape="pill" />
-          <c-switch class="mx-1" color="success" checked variant="pill" />
+          <c-switch class="mx-1" variant="success" checked  shape="pill" />
-          <c-switch class="mx-1" color="warning" checked variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked  shape="pill" />
-          <c-switch class="mx-1" color="info" checked variant="pill" />
+          <c-switch class="mx-1" variant="info" checked  shape="pill" />
-          <c-switch class="mx-1" color="danger" checked variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked  shape="pill" />
-          <c-switch class="mx-1" color="light" checked variant="pill" />
+          <c-switch class="mx-1" variant="light" checked  shape="pill" />
-          <c-switch class="mx-1" color="dark" checked variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked  shape="pill" />
-          <c-switch class="mx-1" color="primary" disabled variant="pill" />
+          <c-switch class="mx-1" variant="primary" disabled  shape="pill" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -39,15 +77,15 @@
           <div slot="header">
             3d Switch
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" />
-          <c-switch class="mx-1" color="success" checked variant="3d" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" />
-          <c-switch class="mx-1" color="warning" checked variant="3d" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" />
-          <c-switch class="mx-1" color="info" checked variant="3d" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" />
-          <c-switch class="mx-1" color="danger" checked variant="3d" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" />
-          <c-switch class="mx-1" color="light" checked variant="3d" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" />
-          <c-switch class="mx-1" color="dark" checked variant="3d" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -55,15 +93,15 @@
           <div slot="header">
             3d Switch <small><code>disabled</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="success" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="success" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="warning" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="info" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="info" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="danger" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="light" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="light" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="dark" checked variant="3d" disabled />
+          <c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" />
+          <c-switch class="mx-1" variant="primary" disabled shape="3d" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -71,15 +109,15 @@
           <div slot="header">
             3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="success" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="warning" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="info" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="danger" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="light" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="dark" checked variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -87,47 +125,47 @@
           <div slot="header">
             3d Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            3d Switch <small><code>outline="alt" label</code></small>
+            3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            3d Switch <small><code>outline="alt" label</code></small>
+            3d Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
-          <c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label />
+          <c-switch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -135,31 +173,31 @@
           <div slot="header">
             Switch <small><code>outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline />
+          <c-switch class="mx-1" variant="primary" checked outline />
-          <c-switch class="mx-1" color="secondary" checked outline />
+          <c-switch class="mx-1" variant="secondary" checked outline />
-          <c-switch class="mx-1" color="success" checked outline />
+          <c-switch class="mx-1" variant="success" checked outline />
-          <c-switch class="mx-1" color="warning" checked outline />
+          <c-switch class="mx-1" variant="warning" checked outline />
-          <c-switch class="mx-1" color="info" checked outline />
+          <c-switch class="mx-1" variant="info" checked outline />
-          <c-switch class="mx-1" color="danger" checked outline />
+          <c-switch class="mx-1" variant="danger" checked outline />
-          <c-switch class="mx-1" color="light" checked outline />
+          <c-switch class="mx-1" variant="light" checked outline />
-          <c-switch class="mx-1" color="dark" checked outline />
+          <c-switch class="mx-1" variant="dark" checked outline />
-          <c-switch class="mx-1" color="primary" outline disabled />
+          <c-switch class="mx-1" variant="primary" outline disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>outline variant="pill"</code></small>
+            Switch <small><code>outline  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline variant="pill"/>
+          <c-switch class="mx-1" variant="primary" checked outline  shape="pill"/>
-          <c-switch class="mx-1" color="secondary" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="success" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="success" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="warning" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="info" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="info" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="danger" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="light" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="light" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="dark" checked outline variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline  shape="pill" />
-          <c-switch class="mx-1" color="primary" outline variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" outline  shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -167,31 +205,31 @@
           <div slot="header">
             Switch <small><code>outline="alt"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline="alt" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
-          <c-switch class="mx-1" color="success" checked outline="alt" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" />
-          <c-switch class="mx-1" color="warning" checked outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" />
-          <c-switch class="mx-1" color="info" checked outline="alt" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" />
-          <c-switch class="mx-1" color="danger" checked outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" />
-          <c-switch class="mx-1" color="light" checked outline="alt" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" />
-          <c-switch class="mx-1" color="dark" checked outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" />
-          <c-switch class="mx-1" color="primary" outline="alt" disabled />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>outline="alt" variant="pill"</code></small>
+            Switch <small><code>outline="alt"  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked outline="alt" variant="pill"/>
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
-          <c-switch class="mx-1" color="secondary" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="success" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="warning" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="info" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="danger" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="light" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="dark" checked outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="primary" outline="alt" variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -199,31 +237,31 @@
           <div slot="header">
             Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label />
+          <c-switch class="mx-1" variant="primary" checked />
-          <c-switch class="mx-1" color="secondary" checked label />
+          <c-switch class="mx-1" variant="secondary" checked />
-          <c-switch class="mx-1" color="success" checked label />
+          <c-switch class="mx-1" variant="success" checked />
-          <c-switch class="mx-1" color="warning" checked label />
+          <c-switch class="mx-1" variant="warning" checked />
-          <c-switch class="mx-1" color="info" checked label />
+          <c-switch class="mx-1" variant="info" checked />
-          <c-switch class="mx-1" color="danger" checked label />
+          <c-switch class="mx-1" variant="danger" checked />
-          <c-switch class="mx-1" color="light" checked label />
+          <c-switch class="mx-1" variant="light" checked />
-          <c-switch class="mx-1" color="dark" checked label />
+          <c-switch class="mx-1" variant="dark" checked />
-          <c-switch class="mx-1" color="primary" label disabled />
+          <c-switch class="mx-1" variant="primary" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>label variant="pill"</code></small>
+            Switch <small><code>label  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label variant="pill" />
+          <c-switch class="mx-1" variant="primary" checked shape="pill" />
-          <c-switch class="mx-1" color="secondary" checked label variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked shape="pill" />
-          <c-switch class="mx-1" color="success" checked label variant="pill" />
+          <c-switch class="mx-1" variant="success" checked shape="pill" />
-          <c-switch class="mx-1" color="warning" checked label variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked shape="pill" />
-          <c-switch class="mx-1" color="info" checked label variant="pill" />
+          <c-switch class="mx-1" variant="info" checked shape="pill" />
-          <c-switch class="mx-1" color="danger" checked label variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked shape="pill" />
-          <c-switch class="mx-1" color="light" checked label variant="pill" />
+          <c-switch class="mx-1" variant="light" checked shape="pill" />
-          <c-switch class="mx-1" color="dark" checked label variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked shape="pill" />
-          <c-switch class="mx-1" color="primary" label variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -231,15 +269,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline />
+          <c-switch class="mx-1" variant="primary" checked outline />
-          <c-switch class="mx-1" color="secondary" checked label outline />
+          <c-switch class="mx-1" variant="secondary" checked outline />
-          <c-switch class="mx-1" color="success" checked label outline />
+          <c-switch class="mx-1" variant="success" checked outline />
-          <c-switch class="mx-1" color="warning" checked label outline />
+          <c-switch class="mx-1" variant="warning" checked outline />
-          <c-switch class="mx-1" color="info" checked label outline />
+          <c-switch class="mx-1" variant="info" checked outline />
-          <c-switch class="mx-1" color="danger" checked label outline />
+          <c-switch class="mx-1" variant="danger" checked outline />
-          <c-switch class="mx-1" color="light" checked label outline />
+          <c-switch class="mx-1" variant="light" checked outline />
-          <c-switch class="mx-1" color="dark" checked label outline />
+          <c-switch class="mx-1" variant="dark" checked outline />
-          <c-switch class="mx-1" color="primary" label outline disabled />
+          <c-switch class="mx-1" variant="primary" outline disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -247,15 +285,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="primary" checked outline shape="pill" />
-          <c-switch class="mx-1" color="secondary" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
-          <c-switch class="mx-1" color="success" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="success" checked outline shape="pill" />
-          <c-switch class="mx-1" color="warning" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline shape="pill" />
-          <c-switch class="mx-1" color="info" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="info" checked outline shape="pill" />
-          <c-switch class="mx-1" color="danger" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline shape="pill" />
-          <c-switch class="mx-1" color="light" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="light" checked outline shape="pill" />
-          <c-switch class="mx-1" color="dark" checked label outline variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline shape="pill" />
-          <c-switch class="mx-1" color="primary" label outline variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -263,15 +301,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" />
-          <c-switch class="mx-1" color="primary" label outline="alt" disabled />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -279,15 +317,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-          <c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
         </b-card>
       </b-col>
 
@@ -296,31 +334,31 @@
           <div slot="header">
             Switch <small><code>label</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label dataOn="yes" dataOff="no"/>
+          <c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
-          <c-switch class="mx-1" color="secondary" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
-        </b-card>
+        </b-card>shape
       </b-col>
       <b-col xs="12" md="6">
         <b-card>
           <div slot="header">
-            Switch <small><code>label variant="pill"</code></small>
+            Switch <small><code>label  shape="pill"</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -328,15 +366,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -344,15 +382,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -360,15 +398,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline="alt" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
       <b-col xs="12" md="6">
@@ -376,15 +414,15 @@
           <div slot="header">
             Switch <small><code>label outline</code></small>
           </div>
-          <c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" v-bind="labelTxt" />
+          <c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-          <c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-          <c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled v-bind="labelIcon" />
+          <c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
         </b-card>
       </b-col>
 
@@ -410,18 +448,18 @@
 </template>
 
 <script>
-import { Switch as cSwitch } from '@coreui/vue'
+// import CSwitch from './CSwitch'
 
 export default {
   name: 'switches',
-  components: {
-    cSwitch
-  },
   computed: {
     icon (icon) {
       return icon
     }
   },
+  // components: {
+  //   CSwitch
+  // },
   data: () => {
     return {
       fields: [
@@ -435,6 +473,9 @@ export default {
         {size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
       ],
       checker: 'yes',
+      radio: 'primary',
+      myFlag1: true,
+      myFlag2: false,
       picker: '',
       labelIcon: {
         dataOn: '\u2713',
@@ -445,6 +486,13 @@ export default {
         dataOff: 'no'
       }
     }
+  },
+  methods: {
+    test (a, event) {
+      console.log(a)
+      console.log(typeof a)
+      console.log(event)
+    }
   }
 }
 </script>

src/views/base/Tables.vue

@@ -3,7 +3,7 @@
 
     <b-row>
       <b-col lg="6">
-        <c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
+        <c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
       </b-col><!--/.col-->
 
       <b-col lg="6">

src/views/buttons/Dropdowns.vue

@@ -233,6 +233,6 @@
 
 <script>
 export default {
-  name: 'dropdowns'
+  name: 'Dropdowns'
 }
 </script>

src/views/charts/BarExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Bar } from 'vue-chartjs'
+import { Bar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {

src/views/charts/DoughnutExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Doughnut } from 'vue-chartjs'
+import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
 
 export default {
   name: 'DoughnutExample',

src/views/charts/LineExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 

src/views/charts/PieExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Pie } from 'vue-chartjs'
+import { Pie } from '@coreui/vue/src/extends/BaseCharts'
 
 export default {
   extends: Pie,

src/views/charts/PolarAreaExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { PolarArea } from 'vue-chartjs'
+import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {

src/views/charts/RadarExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Radar } from 'vue-chartjs'
+import { Radar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {

src/views/dashboard/BarChart1.vue

@@ -1,75 +0,0 @@
-<script>
-import { Bar } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'BarChart',
-  extends: Bar,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    backgroundColor:{
-      type: String,
-      default: 'rgba(0,0,0,.2)'
-    },
-    labels: Array,
-    options:Object,
-    finalOptions:{
-      type: Object,
-      default: () => ({
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false,
-            categoryPercentage: 1,
-            barPercentage: 0.5
-          }],
-          yAxes: [{
-            display: false
-          }]
-        }
-      })
-    }
-  },
-  mounted () {
-    const dataset = [
-      {
-        label: this.label,
-        backgroundColor: this.generatedBackgroundColor,
-        borderColor: this.generatedBorderColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: dataset
-      },
-      this.generatedOptions
-    )
-  }
-}
-</script>

src/views/dashboard/CalloutChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 

src/views/dashboard/CardBarChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Bar } from 'vue-chartjs'
+import { Bar } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {

src/views/dashboard/CardLine1ChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 

src/views/dashboard/CardLine2ChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 

src/views/dashboard/CardLine3ChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {

src/views/dashboard/LineChart1.vue

@@ -1,89 +0,0 @@
-<script>
-import { Line } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'LineChart1',
-  extends: Line,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    labels: Array,
-    backgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    pointHoverBackgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    options:Object,
-    finalOptions:{
-      type: Object,
-      default: () => ({
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false
-          }],
-          yAxes: [{
-            display: false
-          }]
-        },
-        elements: {
-          line: {
-            borderWidth: 2
-          },
-          point: {
-            radius: 0,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      })
-    }
-  },
-  mounted () {
-    const datasets = [
-      {
-        label: this.label,
-        borderColor: this.generatedBorderColor,
-        backgroundColor: this.generatedBackgroundColor,
-        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: datasets
-      },
-      this.generatedOptions
-    )
-  },
-}
-</script>

src/views/dashboard/LineChart2.vue

@@ -1,105 +0,0 @@
-<script>
-import { Line } from 'vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-
-export default {
-  name: 'LineChart2',
-  extends: Line,
-  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: Number,
-      default: 40
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    borderColor:{
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    labels: Array,
-    backgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    pointHoverBackgroundColor:{
-      type: String,
-      default: 'transparent'
-    },
-    options:Object,
-  },
-  computed:{
-    finalOptions () {
-      return{
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, this.data) - 5,
-                max: Math.max.apply(Math, this.data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    }
-  },
-  mounted () {
-    const datasets1 = [
-      {
-        label: this.label,
-        borderColor: this.generatedBorderColor,
-        backgroundColor: this.generatedBackgroundColor,
-        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.generatedLabels,
-        datasets: datasets1
-      },
-      this.generatedOptions
-    )
-  }
-}
-</script>

src/views/dashboard/MainChartExample.vue

@@ -1,5 +1,5 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 

src/views/dashboard/SocialBoxChartExample.vue

@@ -1,8 +1,9 @@
 <script>
-import { Line } from 'vue-chartjs'
+import { Line } from '@coreui/vue/src/extends/BaseCharts'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
+  name: 'SocialBoxChartExample',
   extends: Line,
   props: {
     data: {

src/views/notifications/Alerts.vue

@@ -15,14 +15,15 @@
               </div>
             </div>
             <div>
-              <b-alert show variant="primary">Primary Alert</b-alert>
+              <p></p>
-              <b-alert show variant="secondary">Secondary Alert</b-alert>
+              <CAlert show variant="primary">Primary Alert</CAlert>
-              <b-alert show variant="success">Success Alert</b-alert>
+              <CAlert show variant="secondary">Secondary Alert</CAlert>
-              <b-alert show variant="danger">Danger Alert</b-alert>
+              <CAlert show variant="success">Success Alert</CAlert>
-              <b-alert show variant="warning">Warning Alert</b-alert>
+              <CAlert show variant="danger">Danger Alert</CAlert>
-              <b-alert show variant="info">Info Alert</b-alert>
+              <CAlert show variant="warning">Warning Alert</CAlert>
-              <b-alert show variant="light">Light Alert</b-alert>
+              <CAlert show variant="info">Info Alert</CAlert>
-              <b-alert show variant="dark">Dark Alert</b-alert>
+              <CAlert show variant="light">Light Alert</CAlert>
+              <CAlert show variant="dark">Dark Alert</CAlert>
             </div>
           </b-card>
         </b-col>
@@ -35,32 +36,32 @@
               <small> use <code>.alert-link</code> to provide links</small>
             </div>
             <div>
-              <b-alert show variant="primary">
+              <CAlert show variant="primary">
                 Primary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="secondary">
+              <CAlert show variant="secondary">
                 Secondary Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="success">
+              <CAlert show variant="success">
                 Success Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="danger">
+              <CAlert show variant="danger">
                 Danger Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="warning">
+              <CAlert show variant="warning">
                 Warning Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="info">
+              <CAlert show variant="info">
                 Info Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="light">
+              <CAlert show variant="light">
                 Light Alert with <a href="#" class="alert-link">an example link</a>.
-              </b-alert>
+              </CAlert>
-              <b-alert show variant="dark">
+              <CAlert show variant="dark">
                 Dark Alert with
                 <b-link href="#" class="alert-link">an example link</b-link>
                 .
-              </b-alert>
+              </CAlert>
             </div>
           </b-card>
         </b-col>
@@ -71,7 +72,7 @@
             <div slot="header">
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
             </div>
-            <b-alert show variant="success">
+            <CAlert show variant="success">
               <h4 class="alert-heading">Well done!</h4>
               <p>
                 Aww yeah, you successfully read this important alert message.
@@ -82,7 +83,7 @@
               <p class="mb-0">
                 Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
               </p>
-            </b-alert>
+            </CAlert>
           </b-card>
         </b-col>
         <b-col cols="12" md="6">
@@ -93,15 +94,30 @@
               <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
             </div>
             <div>
-              <b-alert show dismissible>
+              <CAlert :show="true" dismissible disabled>
                 Dismissible Alert!
-              </b-alert>
+              </CAlert>
-            <b-alert variant="danger"
+              <!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
+              <CAlert :show="true"
+                      dismissible>
+                Dismissible Alert!
+                <CButtonClose slot-scope="{ dismiss }"
+                              @click="dismiss"
+                              aria-label="close it"
+                              style="color:red">
+                  ok
+                </CButtonClose>
+              </CAlert>
+              <CAlert show dismissible>
+                Dismissible Alert!
+              </CAlert>
+            <CAlert variant="danger"
                      dismissible
+                     fade
                      :show="showDismissibleAlert"
                      @dismissed="showDismissibleAlert=false">
               Dismissible Alert!
-            </b-alert>
+            </CAlert>
             <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
               Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
             </b-btn>
@@ -114,14 +130,15 @@
               <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
             </div>
             <div>
-              <b-alert :show="dismissCountDown"
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="warning"
                        @dismissed="dismissCountdown=0"
                        @dismiss-count-down="countDownChanged">
                 Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
-              </b-alert>
+              </CAlert>
-              <b-alert :show="dismissCountDown"
+
+              <CAlert :show="dismissCountDown"
                        dismissible
                        variant="info"
                        @dismissed="dismissCountdown=0"
@@ -132,7 +149,7 @@
                             :value="dismissCountDown"
                             height="4px">
                 </b-progress>
-              </b-alert>
+              </CAlert>
               <b-btn @click="showAlert" variant="info" class="m-1">
                 Show alert with timer
               </b-btn>
@@ -145,8 +162,14 @@
 </template>
 
 <script>
+// import CAlert from './CAlert'
+// import CButtonClose from './CButtonClose'
 export default {
   name: 'alerts',
+  // components: {
+  //   CAlert,
+  //   CButtonClose
+  // },
   data () {
     return {
       dismissSecs: 10,

src/views/notifications/CAlert.js

@@ -0,0 +1,120 @@
+import CButtonClose from './CButtonClose'
+
+export default {
+  name: 'CAlert',
+  components: {CButtonClose},
+  render (h) {
+    if (!this.localShow) {
+      // If not showing, render placeholder
+      return h(false)
+    }
+    let dismissBtn = h(false)
+    if (this.dismissible) {
+      dismissBtn = this.$scopedSlots.default ?
+                   this.$scopedSlots.default({dismiss: this.dismiss}) :
+                    h(
+                      'CButtonClose',
+                      { on: { click: this.dismiss }},
+                      [ this.$slots.dismiss ]
+                    )
+    }
+    const alert = h(
+      'div',
+      {class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
+      [dismissBtn, this.$slots.default]
+    )
+    return !this.fade ? alert : h(
+      'transition',
+      { props: { name: 'fade', appear: true } },
+      [ alert ]
+    )
+  },
+  model: {
+    prop: 'show',
+    event: 'input'
+  },
+  data () {
+    return {
+      countDownTimerId: null,
+      dismissed: false
+    }
+  },
+  computed: {
+    classObject () {
+      return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
+    },
+    localShow () {
+      return !this.dismissed && (this.countDownTimerId || this.show)
+    }
+  },
+  props: {
+    variant: {
+      type: String,
+      default: 'info'
+    },
+    dismissible: {
+      type: [Boolean, Object],
+      default: false
+    },
+    show: {
+      type: [Boolean, Number],
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    show () {
+      this.showChanged()
+    }
+  },
+  mounted () {
+    this.showChanged()
+  },
+  destroyed /* istanbul ignore next */ () {
+    this.clearCounter()
+  },
+  methods: {
+    dismiss () {
+      this.clearCounter()
+      this.dismissed = true
+      this.$emit('dismissed')
+      this.$emit('input', false)
+      if (typeof this.show === 'number') {
+        this.$emit('dismiss-count-down', 0)
+        this.$emit('input', 0)
+      } else {
+        this.$emit('input', false)
+      }
+    },
+    clearCounter () {
+      if (this.countDownTimerId) {
+        clearInterval(this.countDownTimerId)
+        this.countDownTimerId = null
+      }
+    },
+    showChanged () {
+      // Reset counter status
+      this.clearCounter()
+      // Reset dismiss status
+      this.dismissed = false
+      // No timer for boolean values
+      if (this.show === true || this.show === false || this.show === null || this.show === 0) {
+        return
+      }
+      // Start counter (ensure we have an integer value)
+      let dismissCountDown = parseInt(this.show, 10) || 1
+      this.countDownTimerId = setInterval(() => {
+        if (dismissCountDown < 1) {
+          this.dismiss()
+          return
+        }
+        dismissCountDown--
+        this.$emit('dismiss-count-down', dismissCountDown)
+        this.$emit('input', dismissCountDown)
+      }, 1000)
+    }
+  }
+}

src/views/notifications/CButtonClose.js

@@ -0,0 +1,17 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  name: 'CButtonClose',
+  functional: true,
+  render (h, { data, props, slots }) {
+    const componentData = {
+      staticClass: 'close',
+      attrs: {
+        type: props.type || 'button',
+        'aria-label': props.ariaLabel || 'Close'
+      }
+    }
+    if (!slots().default)
+      componentData.domProps = { innerHTML: '×' }
+    return h('button', mergeData(data, componentData), slots().default)
+  }
+}

src/views/widgets/Widget01.md

@@ -1,17 +0,0 @@
-### Widget01
-
-This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
-
-Value is the procentage value of displayed progress-bar.
-
-prop | default
---- | ---
-variant  | `''`
-value | `25`
-header| `'header:string'`
-text   | `'text:string'`
-footer    | `'footer:string'`
-
-#### Example:
->        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
->                  variant="info" :value="30"/>

src/views/widgets/Widget01.vue

@@ -1,49 +0,0 @@
-<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>
-</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: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    footer: {
-      type: String,
-      default: 'footer:string'
-    },
-    value: {
-      type: Number,
-      default: 25
-    },
-  }
-}
-</script>

src/views/widgets/Widget02.md

@@ -1,14 +0,0 @@
-### Widget02
-This widget can be display with or without link. If you want to display link set showLink property to true.
-
-prop | default
---- | ---
-iconClasses  | `'fa fa-cogs bg-primary'`
-showLink | `true`
-header| `'header:string'`
-text   | `'text:string'`
-link    | `'#'`
-
-#### Example:
->     <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
-              :showLink="true" link="#"/>

src/views/widgets/Widget02.vue

@@ -1,40 +0,0 @@
-<template>
-  <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>
-</template>
-
-<script>
-export default {
-  name: 'Widget02',
-  props: {
-    iconClasses: {
-      type: String,
-      default: 'fa fa-cogs bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    showLink: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: String,
-      default: '#'
-    },
-  }
-}
-</script>

src/views/widgets/Widget03.md

@@ -1,11 +0,0 @@
-### Widget03
-This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
-
-prop | default
---- | ---
-iconClasses  | `'fa fa-cogs bg-primary'`
-header| `'header:string'`
-text   | `'text:string'`
-
-#### Example:
->     <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>

src/views/widgets/Widget03.vue

@@ -1,29 +0,0 @@
-<template>
-  <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>
-</template>
-
-<script>
-export default {
-  name: 'Widget03',
-  props: {
-    iconClasses: {
-      type: String,
-      default: 'fa fa-cogs bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-  }
-}
-</script>

src/views/widgets/Widget04.md

@@ -1,15 +0,0 @@
-### Widget04
-This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is default slot for placing data chart.
-
-prop | default
---- | ---
-type  | `facebook`
-rightHeader   | `'rightHeader:string'`
-rightFooter   | `'rightFooter:string'`
-leftHeader   | `'leftHeader:string'`
-leftFooter   | `'leftFooter:string'`
-
-
-#### Example:
->             <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts"
->                       leftHeader="292" leftFooter="feeds"/>

src/views/widgets/Widget04.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="brand-card">
-    <div :class="'bg-' + type" class="brand-card-header">
-      <i  class="fa" :class="'fa-'+ type"></i>
-      <div class="chart-wrapper">
-        <slot></slot>
-      </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>
-</template>
-
-<script>
-export default {
-  name: 'Widget04',
-  props: {
-    type: {
-      type: String,
-      default: 'facebook'
-    },
-    rightHeader: {
-      type: String,
-      default: 'rightHeader:string'
-    },
-    rightFooter: {
-      type: String,
-      default: 'rightFooter:string'
-    },
-    leftHeader: {
-      type: String,
-      default: 'leftHeader:string'
-    },
-    leftFooter: {
-      type: String,
-      default: 'leftFooter:string'
-    },
-  }
-}
-</script>

src/views/widgets/Widget05.md

@@ -1,15 +0,0 @@
-### Widget05
-
-This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
-
-Value is the procentage value of displayed progress-bar.
-
-prop | default
---- | ---
-variant  | `success`
-value | `30`
-iconClasses  |  `icon-people`
-header| `header:string`
-text   | `text:string`
-
->     <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>

src/views/widgets/Widget05.vue

@@ -1,51 +0,0 @@
-<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: 'Widget05',
-  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: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: Number,
-      default: 25
-    },
-  }
-}
-</script>

src/views/widgets/Widget06.md

@@ -1,21 +0,0 @@
-### Widget06
-
-This widget can style is defined by cardClasses. Inside component there is additional slot for chart (name="chart").
-
-prop | default
---- | ---
-cardClasses  | `''`
-header| `header:string`
-text   | `text:string`
-
->     <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
-      <b-dropdown class="float-right" variant="transparent p-0" right>
-        <template slot="button-content">
-          <i class="icon-settings"></i>
-        </template>
-        <b-dropdown-item>Action</b-dropdown-item>
-        <b-dropdown-item>Another action</b-dropdown-item>
-        <b-dropdown-item>Something else here...</b-dropdown-item>
-        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
-      </b-dropdown>
-    </widget06>

src/views/widgets/Widget06.vue

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

src/views/widgets/Widget07.md

@@ -1,19 +0,0 @@
-### Widget07
-
-This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
-
-prop | default
---- | ---
-cardClasses | `'bg-primary'`
-rightHeader | `'rightHeader:string'`
-rightFooter | `'rightFooter:string'`
-leftHeader  | `'leftHeader:string'`
-leftFooter  | `'leftFooter:string'`
-
->       <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
-                leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-        <line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
-        <bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
-      </widget07>

src/views/widgets/Widget07.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="card">
-    <div :class="cardClasses" class="card-header">
-      <div class="font-weight-bold">
-        <span>{{rightHeader}}</span>
-        <span class="float-right">{{leftHeader}}</span>
-      </div>
-      <div>
-        <span>
-          <small>{{rightFooter}}</small>
-        </span>
-        <span class="float-right">
-          <small>{{leftFooter}}</small>
-        </span>
-      </div>
-      <div class="chart-wrapper">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Widget07',
-  props: {
-    cardClasses: {
-      type: String,
-      default: 'bg-primary'
-    },
-    rightHeader: {
-      type: String,
-      default: 'rightHeader:string'
-    },
-    rightFooter: {
-      type: String,
-      default: 'rightFooter:string'
-    },
-    leftHeader: {
-      type: String,
-      default: 'leftHeader:string'
-    },
-    leftFooter: {
-      type: String,
-      default: 'leftFooter:string'
-    },
-  }
-}
-</script>

src/views/widgets/Widget08.md

@@ -1,19 +0,0 @@
-### Widget08
-
-This widget can style is defined by cardClasses. Inside component there is default slot for additional data (i.e. chart).
-
-prop | default
---- | ---
-cardClasses | `'bg-primary'`
-rightHeader | `'rightHeader:string'`
-rightFooter | `'rightFooter:string'`
-leftHeader  | `'leftHeader:string'`
-leftFooter  | `'leftFooter:string'`
-
->       <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM'
-                leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-        <line-chart1 style="height:40px" chartId="widget07_line1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' />
-        <bar-chart1 style="height:40px" chartId="widget07_bar1" label='Sales'
-                    :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'/>
-      </widget07>

src/views/widgets/Widget08.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="card">
-    <div class="card-body text-center">
-      <div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
-        <div class="h2 py-3">{{text}}</div>
-          <div class="chart-wrapper">
-            <slot></slot>
-          </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Widget08',
-  props: {
-    cardClasses: {
-      type: String,
-      default: 'bg-primary'
-    },
-    header: {
-      type: String,
-      default: 'header:string'
-    },
-    text: {
-      type: String,
-      default: 'text:string'
-    },
-  }
-}
-</script>

tests/unit/Plugin.spec.js

@@ -0,0 +1,38 @@
+// import Vue from 'vue'
+import CoreuiVueModule from '@coreui/vue'
+// Vue.use(CoreuiVueModule)
+
+test("Should register all components when installed", () => {
+
+  const component = jest.fn();
+  const Vue = { component };
+
+  CoreuiVueModule.install(Vue);
+
+  // Test if a particular component was registered
+  expect(component).toBeCalledWith("Aside", expect.any(Object));
+  expect(component).toBeCalledWith("AsideToggler", expect.any(Object));
+  expect(component).toBeCalledWith("Breadcrumb", expect.any(Object));
+  expect(component).toBeCalledWith("Callout", expect.any(Object));
+  expect(component).toBeCalledWith("Footer", expect.any(Object));
+  expect(component).toBeCalledWith("Header", expect.any(Object));
+  expect(component).toBeCalledWith("HeaderDropdown", expect.any(Object));
+  expect(component).toBeCalledWith("Sidebar", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarFooter", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarForm", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarHeader", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarMinimizer", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNav", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavDivider", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavItem", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavDropdown", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavLabel", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavLink", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarNavTitle", expect.any(Object));
+  expect(component).toBeCalledWith("SidebarToggler", expect.any(Object));
+  expect(component).toBeCalledWith("Switch", expect.any(Object));
+
+  // Test how many times component got registered
+  // const totalOfComponents = 21;
+  // expect(component).toHaveBeenCalledTimes(totalOfComponents);
+});

tests/unit/widgets/Widget01.spec.js

@@ -1,37 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget01'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget01'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('has a created hook', () => {
-    expect(typeof Component.data).toMatch('function')
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.backgroundColor).toBe('')
-    expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.variant).toBe('')
-    expect(vm.footer).toBe('footer:string')
-    expect(vm.value == 25).toBe(true)
-  })
-  it('correctly sets variant when background is not white', () => {
-    const Constructor = Vue.extend(Component)
-    const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
-    expect(vm.backgroundColor).toBe('success')
-    expect(vm.styleClasses).toBe('text-white bg-success')
-  })
-})

tests/unit/widgets/Widget02.spec.js

@@ -1,26 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget02'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget02'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.link).toBe('#')
-    expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
-    expect(vm.showLink).toBe(false)
-  })
-})

tests/unit/widgets/Widget03.spec.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget03'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget03'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
-  })
-})

tests/unit/widgets/Widget04.spec.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget04'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget04'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    expect(wrapper.props().rightHeader).toBe('rightHeader:string')
-    expect(wrapper.props().rightFooter).toBe('rightFooter:string')
-    expect(wrapper.props().leftHeader).toBe('leftHeader:string')
-    expect(wrapper.props().leftFooter).toBe('leftFooter:string')
-  })
-})

tests/unit/widgets/Widget05.spec.js

@@ -1,36 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget05'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget05'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('has a created hook', () => {
-    expect(typeof Component.data).toMatch('function')
-  })
-  it('correctly sets default props and data when created', () => {
-    const vm = new Vue(Component).$mount()
-    expect(vm.backgroundColor).toBe('')
-    expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text:string')
-    expect(vm.variant).toBe('')
-    expect(vm.value == 25).toBe(true)
-  })
-  it('correctly sets variant when background is not white', () => {
-    const Constructor = Vue.extend(Component)
-    const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
-    expect(vm.backgroundColor).toBe('success')
-    expect(vm.styleClasses).toBe('text-white bg-success')
-  })
-})

tests/unit/widgets/Widget06.spec.js

@@ -1,23 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget06'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget06'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('correctly sets default props and data when created', () => {
-    expect(wrapper.props().cardClasses).toBe('')
-    expect(wrapper.props().header).toBe('header:string')
-    expect(wrapper.props().text).toBe('text:string')
-  })
-})

tests/unit/widgets/Widget07.spec.js

@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget07'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget07'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-})

tests/unit/widgets/Widget08.spec.js

@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/widgets/Widget08'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'Widget08'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-})