feat: change layout styles to version 3

Author: woothu

package.json

@@ -55,7 +55,7 @@
     "clear_jest": "jest --clearCache"
   },
   "dependencies": {
-    "@coreui/coreui": "coreui/coreui#component-prefixes",
+    "@coreui/coreui": "next",
     "core-js": "^2.5.7",
     "element-resize-detector": "^1.2.0",
     "popper.js": "^1.14.7",

src/components/Aside/CAside.vue

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

src/components/Aside/CAsideToggler.vue

@@ -30,13 +30,13 @@ export default {
       const itemProps = isLast ? lastItemProps : linkItemProps
       return h('li',
              {
-               staticClass: 'breadcrumb-item',
+               staticClass: 'c-breadcrumb-item',
                class: { active: isLast },
                attrs: { role: 'presentation' }
              },
              [h(tag, itemProps)])
     })
-    return h('ol', mergeData(data, { staticClass: 'breadcrumb' }), childNodes)
+    return h('ol', mergeData(data, { staticClass: 'c-breadcrumb' }), childNodes)
   }
 }
 </script>

src/components/Aside/index.js

@@ -8,25 +8,19 @@
 export default {
   name: 'CFooter',
   props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted: function () {
-    this.isFixed()
+    fixed: Boolean
   },
   computed: {
     classList () {
       return [
-        'app-footer'
+        'c-app-footer c-footer',
+        { 'c-footer-fixed': this.fixed }
       ]
     }
-  },
-  methods: {
-    isFixed () {
-      this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')
-    }
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import "~@coreui/coreui/scss/partials/footer.scss";
+</style>

src/components/Breadcrumb/CBreadcrumb.vue

@@ -1,6 +1,5 @@
 <template>
-  <header
-    :class="classList">
+  <header :class="classList">
     <slot>Header</slot>
   </header>
 </template>
@@ -9,27 +8,19 @@
 export default {
   name: 'CHeader',
   props: {
-    fixed: {
-      type: Boolean,
-      default: false
-    }
+    fixed: Boolean
   },
   computed: {
     classList () {
       return [
-        'app-header',
-        'navbar'
+        'c-header c-app-header c-header-light',
+        { 'c-header-fixed': this.fixed}
       ]
     }
-  },
-  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>
+
+<style scoped lang="scss">
+  @import "~@coreui/coreui/scss/partials/header.scss";
+</style>

src/components/Footer/CFooter.vue

@@ -18,12 +18,12 @@ export default {
   computed: {
     navClasses () {
       return {
-        'nav' : true,
-        'nav-tabs': this.tabs && !this.pills,
-        'nav-pills': this.pills,
-        'flex-column': this.vertical,
-        'nav-fill': this.fill,
-        'nav-justified': this.justified
+        'c-nav' : true,
+        'c-nav-tabs': this.tabs && !this.pills,
+        'c-nav-pills': this.pills,
+        'c-flex-column': this.vertical,
+        'c-nav-fill': this.fill,
+        'c-nav-justified': this.justified
       }
     }
   },

src/components/Header/CHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <li class="nav-item">
+  <li class="c-nav-item">
     <CLink
-      class="nav-link"
+      class="c-nav-link"
       v-bind="$props"
       :active="isActive"
     >

src/components/Nav/CNav.vue

@@ -15,10 +15,10 @@ export default {
     return h(
       props.tag,
       mergeData(data, {
-        staticClass: 'navbar-nav',
+        staticClass: 'c-navbar-nav',
         class: {
-          'nav-fill': props.fill,
-          'nav-justified': props.justified
+          'c-nav-fill': props.fill,
+          'c-nav-justified': props.justified
         }
       }),
       children