refactor: components, containers

CHANGELOG.md

@@ -1,64 +1,28 @@
 ## [vue](./README.md) version `changelog`
 
-##### `v1.0.10`
+##### `v2.0.0-alpha.0`
-- fix: `className` -> `class`
+- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
-- refactor: `<b-input-group-prepend>`
+- refactor: project structure change
-- refactor: `<b-input-group-append>`
+- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
-- refactor: `<b-input-group-text>`
+- chore: moved to [Semantic Versioning](https://semver.org/)
-- refactor: remove `<b-input-group-button>`
+- refactor: move to [CoreUI-Vue](https://github.com/coreui/coreui-vue) components `v2`
-- test: initial `Dashboard` unit test added
+- refactor: rename containers
-- update: bootstrap-vue to `2.0.0-rc.1`
+- refactor(Colors): view layout, sub-components
-- chore: dependencies update
+- refactor(Switches): move to `Switch component v2`
 
-###### `v1.0.9`
+other:  
-- refactor: Sidebar structure
-- test: initial e2e test added
-- chore: dependencies update
-
-###### `v1.0.8`
-- update: vue to `2.5.13`
-- update: Bootstrap to `4.0.0-beta.3`
-- update: bootstrap-vue to `1.4.0`
-- chore: dependencies update
-- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
-- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
-- feature: some Bootstrap4 components added
-- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton` 
-- refactor(checkboxes, radios, labels): temp tweaks 
-- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
-
-###### `v1.0.6`
-- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
-- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
-- refactor: Modal's ok-button variants
-- refactor: forms with validation feedback
-- update: bootstrap-vue to `1.1.0`
-- update: to vue: `2.5.6`
-
-###### `v1.0.5`
-- update: bootstrap-vue to `1.0.x`
-- fix: use `<b-form-radio-group>` instead of `<b-form-radio>`  **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
-- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
-- refactor: extract `Table` component from `Tables`
-- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
-- fix: add `table-responsive-sm` class to `Tables` #26
-- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
-- fix: `b-progress` `height` property workaround (bootstrap-vue)
-- chore: dependencies update
-
-###### `v1.0.4`
-- refactor: import Bootstrap 4 SCSS files from node_modules
-- fix: callouts styles
-
-###### `v1.0.3`
-- update: Bootstrap version to `4.0.0-beta.2`
-- update: vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
-
-###### `v1.0.2`
-- update: to vue: `^2.5.x`
-- update: bootstrap-vue to `1.0.0-beta.9`
-- refactor: (vue `v2.5.x`) deprecated `<template scope="props">` replace with `<div slot-scope="props">`
-- refactor: `HeaderDropdown` component added to `Header`
-- refactor: `b-badge` component added (bootstrap-vue)
-- chore: `package.json` project dependencies update
 
+- feat: app-footer fixed
+- refactor(dashboard): brand-card, progress-group-bars 
+- refactor(social-box-chart-example): props
+- feat(forms): new `<b-form-input type="date">` example added
+- refactor(cards): Card outline, Card accent - title variants added
+- feat: card-header-actions
+- feat(_nav): Navbars example added
+- update: vuejs-templates/webpack to v1.3.1
+- fix: eslint `valid template root`
+- refactor: card header title spacing
+- refactor: btn-brand 
+- test(e2e): update
+- refactor: sidebar
+- refactor: chart examples 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@coreui/vue",
+  "name": "@coreui/coreui-free-vue-admin-template",
   "version": "2.0.0-alpha.0",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
@@ -18,9 +18,12 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.1",
+    "@coreui/vue": "^2.0.0-alpha.0",
     "bootstrap": "^4.1.1",
-    "bootstrap-vue": "^2.0.0-rc.9",
+    "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.2",
+    "core-js": "^2.5.6",
+    "css-vars-ponyfill": "^1.7.2",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
     "perfect-scrollbar": "^1.3.0",
@@ -31,30 +34,30 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.2.5",
+    "autoprefixer": "^8.5.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "chai": "^4.1.2",
-    "chalk": "^2.3.2",
+    "chalk": "^2.4.1",
-    "chromedriver": "^2.37.0",
+    "chromedriver": "^2.38.3",
-    "copy-webpack-plugin": "^4.3.1",
+    "copy-webpack-plugin": "^4.5.1",
-    "cross-env": "^5.1.4",
+    "cross-env": "^5.1.5",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
     "eslint-config-standard": "^11.0.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^2.0.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
@@ -64,40 +67,40 @@
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^2.30.1",
     "inject-loader": "^3.0.1",
-    "karma": "^2.0.0",
+    "karma": "^2.0.2",
-    "karma-coverage": "^1.1.1",
+    "karma-coverage": "^1.1.2",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-phantomjs-shim": "^1.5.0",
-    "karma-sinon-chai": "^1.3.3",
+    "karma-sinon-chai": "^1.3.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "^2.0.9",
-    "mocha": "^5.0.5",
+    "mocha": "^5.2.0",
-    "nightwatch": "0.9.20",
+    "nightwatch": "^1.0.6",
     "node-notifier": "^5.1.2",
-    "node-sass": "^4.8.3",
+    "node-sass": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^2.0.0",
+    "ora": "^2.1.0",
     "phantomjs-prebuilt": "^2.1.16",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.3",
+    "postcss-loader": "^2.1.5",
     "postcss-url": "^7.3.2",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.7",
-    "selenium-server": "3.11.0",
+    "selenium-server": "^3.12.0",
     "semver": "^5.5.0",
-    "shelljs": "^0.8.1",
+    "shelljs": "^0.8.2",
     "sinon": "^4.5.0",
     "sinon-chai": "^2.14.0",
-    "uglifyjs-webpack-plugin": "^1.1.1",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.1",
     "vue-loader": "^14.2.2",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^3.6.0",
+    "webpack": "^3.12.0",
-    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-bundle-analyzer": "^2.13.0",
     "webpack-dev-server": "^2.11.2",
     "webpack-merge": "^4.1.2"
   },
@@ -108,6 +111,6 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not ie <= 9"
   ]
 }

src/components/Aside/Aside.vue

@@ -1,48 +0,0 @@
-<template>
-  <aside class="aside-menu">
-    <slot>Aside</slot>
-  </aside>
-</template>
-
-<script>
-// import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
-
-export default {
-  name: 'AppAside',
-  props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    display: {
-      type: String,
-      default: ''
-    },
-    offCanvas: {
-      type: Boolean,
-      default: true
-    }
-  },
-  mounted: function () {
-    this.isFixed(this.fixed)
-    this.isOffCanvas(this.offCanvas)
-    // this.displayBreakpoint(this.display)
-  },
-  methods: {
-    isFixed (fixed) {
-      fixed ? document.body.classList.add('aside-menu-fixed') : document.body.classList.remove('aside-menu-fixed')
-      return fixed
-    },
-    isOffCanvas (offCanvas) {
-      offCanvas ? document.body.classList.add('aside-menu-off-canvas') : document.body.classList.remove('aside-menu-off-canvas')
-    }
-    // displayBreakpoint (display) {
-    //   let cssClass = asideMenuCssClasses[0]
-    //   if (display && checkBreakpoint(display, validBreakpoints)) {
-    //     cssClass = `aside-menu-${display}-show`
-    //   }
-    //   document.body.classList.add(cssClass)
-    // }
-  }
-}
-</script>

src/components/Aside/AsideToggler.vue

@@ -1,55 +0,0 @@
-<template>
-  <button
-    :display="display"
-    :mobile="mobile"
-    :class="classList"
-    type="button"
-    @click="asideToggle">
-    <span class="navbar-toggler-icon" />
-  </button>
-</template>
-
-<script>
-import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
-import toggleClasses from '../../shared/toggle-classes'
-
-export default {
-  name: 'AsideToggler',
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false
-    },
-    display: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
-      ]
-    }
-  },
-  mounted: function () {
-    // this.toggle()
-  },
-  methods: {
-    toggle () {
-      const [display, mobile] = [this.display, this.mobile]
-      let cssClass = asideMenuCssClasses[0]
-      if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
-        cssClass = `aside-menu-${display}-show`
-      }
-      toggleClasses(cssClass, asideMenuCssClasses)
-    },
-    asideToggle (e) {
-      e.preventDefault()
-      this.toggle()
-    }
-  }
-}
-</script>

src/components/Aside/index.js

@@ -1,7 +0,0 @@
-import Aside from './Aside'
-import AsideToggler from './AsideToggler'
-
-export {
-  Aside,
-  AsideToggler
-}

src/components/Breadcrumb/Breadcrumb.vue

@@ -1,34 +0,0 @@
-<template>
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
-      <span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
-      <router-link :to="item" v-else>{{ showName(item) }}</router-link>
-    </li>
-  </ol>
-</template>
-
-<script>
-export default {
-  props: {
-    list: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  methods: {
-    isLast (index) {
-      return index === this.list.length - 1
-    },
-    showName (item) {
-      if (item.meta && item.meta.label) {
-        item = item.meta && item.meta.label
-      }
-      if (item.name) {
-        item = item.name
-      }
-      return item
-    }
-  }
-}
-</script>

src/components/Callout/Callout.vue

@@ -1,27 +0,0 @@
-<template>
-  <div :class="classList">
-    <slot>Callout</slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    variant: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'callout',
-        this.calloutVariant
-      ]
-    },
-    calloutVariant () {
-      return this.variant ? `callout-${this.variant}` : ''
-    }
-  }
-}
-</script>

src/components/Footer/Footer.vue

@@ -1,41 +0,0 @@
-<template>
-  <footer :class="classList">
-    <slot>
-      <div>
-        <a href="https://coreui.io">CoreUI</a>
-        <span>&copy; 2018 creativeLabs.</span>
-      </div>
-      <div class="ml-auto">
-        <span>Powered by</span>
-        <a href="https://coreui.io">CoreUI for Vue</a>
-      </div>
-    </slot>
-  </footer>
-</template>
-
-<script>
-export default {
-  name: 'AppFooter',
-  props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted: function () {
-    this.isFixed()
-  },
-  computed: {
-    classList () {
-      return [
-        'app-footer'
-      ]
-    }
-  },
-  methods: {
-    isFixed () {
-      this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')
-    }
-  }
-}
-</script>

src/components/Header/Header.vue

@@ -1,35 +0,0 @@
-<template>
-  <header
-    :class="classList">
-    <slot>Header</slot>
-  </header>
-</template>
-
-<script>
-export default {
-  name: 'AppHeader',
-  props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'app-header',
-        'navbar'
-      ]
-    }
-  },
-  mounted: function () {
-    this.isFixed(this.fixed)
-  },
-  methods: {
-    isFixed (fixed) {
-      fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
-      return fixed
-    }
-  }
-}
-</script>

src/components/Header/HeaderDropdown.vue

@@ -1,33 +0,0 @@
-<template>
-  <b-nav-item-dropdown :right="right" :no-caret="noCaret">
-    <template slot="button-content">
-      <slot name="button-content">
-        <img
-          src="static/img/avatars/6.jpg"
-          class="img-avatar"
-          alt="admin@bootstrapmaster.com" />
-      </slot>
-    </template>
-    <slot>
-      <div :style="{ right: 'auto', height: '400px' }">dropdown</div>
-    </slot>
-  </b-nav-item-dropdown>
-</template>
-<script>
-export default {
-  name: 'HeaderDropdown',
-  props: {
-    right: {
-      type: Boolean,
-      default: false
-    },
-    noCaret: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: () => {
-    return { itemsCount: 42 }
-  }
-}
-</script>

src/components/Header/index.js

@@ -1,7 +0,0 @@
-import Header from './Header'
-import HeaderDropdown from './HeaderDropdown'
-
-export {
-  Header,
-  HeaderDropdown
-}

src/components/Sidebar/Sidebar.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="sidebar">
-    <slot>Sidebar</slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'sidebar',
-  props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted: function () {
-    this.isFixed()
-  },
-  methods: {
-    isFixed () {
-      this.fixed ? document.body.classList.add('sidebar-fixed') : document.body.classList.remove('sidebar-fixed')
-      return this.fixed
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarFooter.vue

@@ -1,11 +0,0 @@
-/* eslint-disable */
-<template>
-  <div></div>
-  <!--<div class="sidebar-footer"></div>-->
-</template>
-
-<script>
-export default {
-  name: 'sidebar-footer'
-}
-</script>

src/components/Sidebar/SidebarForm.vue

@@ -1,11 +0,0 @@
-/* eslint-disable */
-<template>
-  <div></div>
-  <!-- <div class="sidebar-form"></div> -->
-</template>
-<script>
-
-export default {
-  name: 'sidebar-form'
-}
-</script>

src/components/Sidebar/SidebarHeader.vue

@@ -1,11 +0,0 @@
-/* eslint-disable */
-<template>
-  <div></div>
-  <!-- <div class="sidebar-header"></div> -->
-</template>
-<script>
-
-export default {
-  name: 'sidebar-header'
-}
-</script>

src/components/Sidebar/SidebarMinimizer.vue

@@ -1,17 +0,0 @@
-<template>
-  <button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
-</template>
-<script>
-
-export default {
-  name: 'sidebar-minimizer',
-  methods: {
-    sidebarMinimize () {
-      document.body.classList.toggle('sidebar-minimized')
-    },
-    brandMinimize () {
-      document.body.classList.toggle('brand-minimized')
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarNav.vue

@@ -1,97 +0,0 @@
-<template>
-  <nav class="sidebar-nav">
-    <VuePerfectScrollbar class="scroll-area" :settings="psSettings" @ps-scroll-y="scrollHandle">
-    <ul class="nav">
-      <template v-for="(item, index) in navItems">
-        <template v-if="item.title">
-          <SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
-        </template>
-        <template v-else-if="item.divider">
-          <SidebarNavDivider :key="index" :classes="item.class"/>
-        </template>
-        <template v-else-if="item.label">
-          <SidebarNavLabel :key="index" :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
-        </template>
-        <template v-else>
-          <template v-if="item.children">
-            <!-- First level dropdown -->
-            <SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
-              <template v-for="(childL1, index1) in item.children">
-                <template v-if="childL1.children">
-                  <!-- Second level dropdown -->
-                  <SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
-                    <li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
-                      <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
-                    </li>
-                  </SidebarNavDropdown>
-                </template>
-                <template v-else>
-                  <SidebarNavItem :key="index1" :classes="item.class">
-                    <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
-                  </SidebarNavItem>
-                </template>
-              </template>
-            </SidebarNavDropdown>
-          </template>
-          <template v-else>
-            <SidebarNavItem :key="index" :classes="item.class">
-              <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
-            </SidebarNavItem>
-          </template>
-        </template>
-      </template>
-    </ul>
-    <slot></slot>
-    </VuePerfectScrollbar>
-  </nav>
-</template>
-
-<script>
-import SidebarNavDivider from './SidebarNavDivider'
-import SidebarNavDropdown from './SidebarNavDropdown'
-import SidebarNavLink from './SidebarNavLink'
-import SidebarNavTitle from './SidebarNavTitle'
-import SidebarNavItem from './SidebarNavItem'
-import SidebarNavLabel from './SidebarNavLabel'
-import VuePerfectScrollbar from 'vue-perfect-scrollbar'
-
-export default {
-  name: 'SidebarNav',
-  props: {
-    navItems: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  components: {
-    SidebarNavDivider,
-    SidebarNavDropdown,
-    SidebarNavLink,
-    SidebarNavTitle,
-    SidebarNavItem,
-    SidebarNavLabel,
-    VuePerfectScrollbar
-  },
-  data () {
-    return {
-      psSettings: {
-        maxScrollbarLength: 200
-      }
-    }
-  },
-  methods: {
-    scrollHandle (evt) {
-      // console.log(evt)
-    }
-  }
-}
-</script>
-
-<style scoped lang="css">
-  .scroll-area {
-    position: relative;
-    height: 100%;
-    margin: auto;
-  }
-</style>

src/components/Sidebar/SidebarNavDivider.vue

@@ -1,26 +0,0 @@
-<template>
-  <li :class="classList"></li>
-</template>
-
-<script>
-export default {
-  name: 'sidebar-nav-divider',
-  props: {
-    classes: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'divider',
-        ...this.itemClasses
-      ]
-    },
-    itemClasses () {
-      return this.classes ? this.classes.split(' ') : ''
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarNavDropdown.vue

@@ -1,47 +0,0 @@
-<template>
-  <router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
-    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="classIcon"></i> {{name}}</div>
-    <ul class="nav-dropdown-items">
-      <slot></slot>
-    </ul>
-  </router-link>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classIcon () {
-      return [
-        'nav-icon',
-        this.icon
-      ]
-    }
-  },
-  methods: {
-    handleClick (e) {
-      e.preventDefault()
-      e.target.parentElement.classList.toggle('open')
-    }
-  }
-}
-</script>
-
-<style scoped lang="css">
-  .nav-link {
-    cursor:pointer;
-  }
-</style>

src/components/Sidebar/SidebarNavItem.vue

@@ -1,35 +0,0 @@
-<template>
-  <li :class="classList" @click="hideMobile">
-    <slot></slot>
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'sidebar-nav-item',
-  props: {
-    classes: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'nav-item',
-        ...this.itemClasses
-      ]
-    },
-    itemClasses () {
-      return this.classes ? this.classes.split(' ') : ''
-    }
-  },
-  methods: {
-    hideMobile () {
-      if (document.body.classList.contains('sidebar-show')) {
-        document.body.classList.toggle('sidebar-show')
-      }
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarNavLabel.vue

@@ -1,59 +0,0 @@
-<template>
-  <SidebarNavItem :classes="classList.navItem">
-    <a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
-  </SidebarNavItem>
-</template>
-
-<script>
-import SidebarNavItem from './SidebarNavItem'
-import SidebarNavLink from './SidebarNavLink'
-export default {
-  name: 'sidebar-nav-label',
-  components: {
-    SidebarNavItem,
-    SidebarNavLink
-  },
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: '#'
-    },
-    icon: {
-      type: String,
-      default: 'fa fa-circle'
-    },
-    classes: {
-      type: String,
-      default: ''
-    },
-    label: {
-      type: Object,
-      required: true,
-      default: () => {}
-    }
-  },
-  computed: {
-    classList () {
-      const classes = {
-        navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
-        navLink: 'nav-label',
-        icon: [
-          this.icon ? this.icon : 'fa fa-circle',
-          this.label.variant ? `text-${this.label.variant}` : '',
-          this.label.class ? this.label.class : ''
-        ].join(' ')
-      }
-      return classes
-    }
-  },
-  methods: {
-    getClasses (classes) {
-      return classes ? classes.split(' ') : []
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarNavLink.vue

@@ -1,74 +0,0 @@
-<template>
-  <div v-if="isExternalLink">
-    <a :href="url" :class="classList">
-      <i :class="classIcon"></i> {{name}}
-      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
-    </a>
-  </div>
-  <div v-else>
-    <router-link :to="url" :class="classList">
-      <i :class="classIcon"></i> {{name}}
-      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
-    </router-link>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'sidebar-nav-link',
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    badge: {
-      type: Object,
-      default: () => {}
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    classes: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'nav-link',
-        this.linkVariant,
-        ...this.itemClasses
-      ]
-    },
-    classIcon () {
-      return [
-        'nav-icon',
-        this.icon
-      ]
-    },
-    linkVariant () {
-      return this.variant ? `nav-link-${this.variant}` : ''
-    },
-    itemClasses () {
-      return this.classes ? this.classes.split(' ') : []
-    },
-    isExternalLink () {
-      if (this.url.substring(0, 4) === 'http') {
-        return true
-      } else {
-        return false
-      }
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarNavTitle.vue

@@ -1,42 +0,0 @@
-<template>
-  <li :class="classList">
-    <template v-if="wrapper && wrapper.element">
-      <component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
-        {{name}}
-      </component>
-    </template>
-    <template v-else>
-      {{name}}
-    </template>
-  </li>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    classes: {
-      type: String,
-      default: ''
-    },
-    wrapper: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'nav-title',
-        ...this.itemClasses
-      ]
-    },
-    itemClasses () {
-      return this.classes ? this.classes.split(' ') : ''
-    }
-  }
-}
-</script>

src/components/Sidebar/SidebarToggler.vue

@@ -1,55 +0,0 @@
-<template>
-  <button
-    :display="display"
-    :mobile="mobile"
-    :class="classList"
-    type="button"
-    @click="sidebarToggle">
-    <span class="navbar-toggler-icon" />
-  </button>
-</template>
-
-<script>
-import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
-import toggleClasses from '../../shared/toggle-classes'
-
-export default {
-  name: 'SidebarToggler',
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false
-    },
-    display: {
-      type: String,
-      default: 'lg'
-    }
-  },
-  computed: {
-    classList () {
-      return [
-        'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
-      ]
-    }
-  },
-  mounted: function () {
-    this.toggle()
-  },
-  methods: {
-    toggle () {
-      const [display, mobile] = [this.display, this.mobile]
-      let cssClass = sidebarCssClasses[0]
-      if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
-        cssClass = `sidebar-${display}-show`
-      }
-      toggleClasses(cssClass, sidebarCssClasses)
-    },
-    sidebarToggle (e) {
-      e.preventDefault()
-      this.toggle()
-    }
-  }
-}
-</script>

src/components/Sidebar/index.js

@@ -1,17 +0,0 @@
-import Sidebar from './Sidebar.vue'
-import SidebarFooter from './SidebarFooter'
-import SidebarForm from './SidebarForm'
-import SidebarHeader from './SidebarHeader'
-import SidebarMinimizer from './SidebarMinimizer'
-import SidebarNav from './SidebarNav'
-import SidebarNavDivider from './SidebarNavDivider'
-import SidebarNavDropdown from './SidebarNavDropdown'
-import SidebarNavItem from './SidebarNavItem'
-import SidebarNavLabel from './SidebarNavLabel'
-import SidebarNavLink from './SidebarNavLink'
-import SidebarNavTitle from './SidebarNavTitle'
-import SidebarToggler from './SidebarToggler'
-
-export {
-  Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler
-}

src/components/Switch/Switch.vue

@@ -1,110 +0,0 @@
-<template>
-  <label :class="classList">
-    <input
-      :value="value"
-      :checked="isChecked"
-      :disabled="isDisabled"
-      type="checkbox"
-      class="switch-input"
-      @change="handleChange">
-    <template v-if="isOn">
-      <span
-        :data-on="on"
-        :data-off="off"
-        class="switch-label" />
-    </template>
-    <template v-else>
-      <span class="switch-label" />
-    </template>
-    <span class="switch-handle" />
-  </label>
-</template>
-
-<script>
-export default {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  props: {
-    value: {
-      type: Boolean,
-      default: true
-    },
-    uncheckedValue: {
-      type: Boolean,
-      default: false
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'default'
-    },
-    variant: {
-      type: String,
-      default: ''
-    },
-    pill: {
-      type: Boolean,
-      default: false
-    },
-    on: {
-      type: String,
-      default: null
-    },
-    off: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-
-  },
-  computed: {
-    classList () {
-      return [
-        'switch',
-        this.switchType,
-        this.switchVariant,
-        this.switchPill,
-        this.switchSize
-      ]
-    },
-    switchType () {
-      return this.type ? `switch-${this.type}` : `switch-default`
-    },
-    switchVariant () {
-      return this.variant ? `switch-${this.variant}` : `switch-secondary`
-    },
-    switchPill () {
-      return this.pill ? `switch-pill` : null
-    },
-    switchSize () {
-      return this.size ? `switch-${this.size}` : ''
-    },
-    isChecked () {
-      return this.checked === this.value
-    },
-    isDisabled () {
-      return this.disabled ? true : null
-    },
-    isOn () {
-      return this.on ? true : null
-    }
-  },
-  methods: {
-    handleChange ({ target: { checked } }) {
-      this.$emit('change', checked ? this.value : this.uncheckedValue)
-    }
-  }
-}
-</script>

src/components/index.js

@@ -1,32 +0,0 @@
-import Breadcrumb from './Breadcrumb/Breadcrumb'
-import Callout from './Callout/Callout'
-import Footer from './Footer/Footer'
-import Switch from './Switch/Switch'
-
-import { Aside, AsideToggler } from './Aside'
-import { Header, HeaderDropdown } from './Header'
-import { Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler } from './Sidebar'
-
-export {
-  Aside,
-  AsideToggler,
-  Breadcrumb,
-  Callout,
-  Footer,
-  Header,
-  HeaderDropdown,
-  Sidebar,
-  SidebarFooter,
-  SidebarForm,
-  SidebarHeader,
-  SidebarMinimizer,
-  SidebarNav,
-  SidebarNavDivider,
-  SidebarNavItem,
-  SidebarNavDropdown,
-  SidebarNavLabel,
-  SidebarNavLink,
-  SidebarNavTitle,
-  SidebarToggler,
-  Switch
-}

src/containers/DafaultAside.vue

@@ -8,7 +8,7 @@
         <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
           Today
         </b-list-group-item>
-        <b-list-group-item class="list-group-item list-group-item-accent-warning list-group-item-divider">
+        <b-list-group-item href="#" class="list-group-item-accent-warning list-group-item-divider">
           <div class="avatar float-right">
             <img class="img-avatar" src="static/img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
           </div>
@@ -22,7 +22,7 @@
             <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
           </small>
         </b-list-group-item>
-        <b-list-group-item class="list-group-item-accent-info">
+        <b-list-group-item href="#" class="list-group-item-accent-info">
           <div class="avatar float-right">
             <img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
           </div>
@@ -35,7 +35,7 @@
         <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
           Tomorrow
         </b-list-group-item>
-        <b-list-group-item class="list-group-item-accent-danger list-group-item-divider">
+        <b-list-group-item href="#" class="list-group-item-accent-danger list-group-item-divider">
           <div>New UI Project - <strong>deadline</strong>
           </div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
@@ -58,12 +58,12 @@
             </div>
           </div>
         </b-list-group-item>
-        <b-list-group-item class="list-group-item-accent-success list-group-item-divider">
+        <b-list-group-item href="#" class="list-group-item-accent-success list-group-item-divider">
           <div><strong>#10 Startups.Garden</strong> Meetup</div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
           <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
         </b-list-group-item>
-        <b-list-group-item class="list-group-item-accent-primary list-group-item-divider">
+        <b-list-group-item href="#" class="list-group-item-accent-primary list-group-item-divider">
           <div><strong>Team meeting</strong></div>
           <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
           <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
@@ -183,7 +183,7 @@
         <div class="aside-options">
           <div class="clearfix mt-4">
             <small><b>Option 1</b></small>
-            <c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true" />
+            <c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
           </div>
           <div>
             <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -192,7 +192,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 2</b></small>
-            <c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" />
+            <c-switch color="success" label variant="pill" size="sm" class="float-right" />
           </div>
           <div>
             <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -201,7 +201,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 3</b></small>
-            <c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" disabled />
+            <c-switch color="success" label variant="pill" size="sm" class="float-right" disabled defaultChecked/>
           </div>
           <div>
             <small class="text-muted">Disabled option.</small>
@@ -210,7 +210,7 @@
         <div class="aside-options">
           <div class="clearfix mt-3">
             <small><b>Option 4</b></small>
-            <c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" checked />
+            <c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
           </div>
         </div>
         <hr>
@@ -241,9 +241,9 @@
 </template>
 
 <script>
-import {Switch as cSwitch} from '../components'
+import { Switch as cSwitch } from '@coreui/vue'
 export default {
-  name: 'FullAside',
+  name: 'DafaultAside',
   components: {
     cSwitch
   }

src/containers/DefaultContainer.vue

@@ -82,19 +82,21 @@
       </main>
       <AppAside fixed>
         <!--aside-->
-        <FullAside/>
+        <DafaultAside/>
       </AppAside>
     </div>
-    <AppFooter fixed>
+    <TheFooter>
       <!--footer-->
-    </AppFooter>
+    </TheFooter>
   </div>
 </template>
 
 <script>
 import nav from '../_nav'
-import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as AppFooter, Breadcrumb } from '../components/'
+import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
-import FullAside from './FullAside'
+// import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Breadcrumb } from '../components/'
+// import { Footer as TheFooter } from '@coreui/vue'
+import DafaultAside from './DafaultAside'
 
 export default {
   name: 'full',
@@ -104,9 +106,9 @@ export default {
     AppHeaderDropdown,
     AppSidebar,
     AppAside,
-    AppFooter,
+    TheFooter,
     Breadcrumb,
-    FullAside,
+    DafaultAside,
     SidebarForm,
     SidebarFooter,
     SidebarToggler,

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // Containers
-import Full from '@/containers/Full'
+import DefaultContainer from '@/containers/DefaultContainer'
 
 // Views
 import Dashboard from '@/views/Dashboard'
@@ -63,7 +63,7 @@ export default new Router({
       path: '/',
       redirect: '/dashboard',
       name: 'Home',
-      component: Full,
+      component: DefaultContainer,
       children: [
         {
           path: 'dashboard',
@@ -187,7 +187,7 @@ export default new Router({
         },
         {
           path: 'buttons',
-          redirect: '/buttons/buttons',
+          redirect: '/buttons/standard-buttons',
           name: 'Buttons',
           component: {
             render (c) { return c('router-view') }
@@ -195,7 +195,7 @@ export default new Router({
           children: [
             {
               path: 'standard-buttons',
-              name: 'Buttons',
+              name: 'Standard Buttons',
               component: StandardButtons
             },
             {

src/views/Dashboard.vue

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

src/views/dashboard/CalloutChartExample.vue

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

src/views/theme/ColorTheme.vue

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

src/views/theme/ColorView.vue

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

src/views/theme/Colors.vue

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