Merge pull request #9 from coreui/dev-vnext

v2.0.0-rc.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "CoreUI Vue Bootstrap 4 layout components",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-rc.0",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
   "module": "dist/coreui-vue.esm.js",
@@ -100,7 +100,9 @@
     "vue": "^2.5.16",
     "vue-jest": "^2.6.0",
     "vue-loader": "^14.2.2",
-    "vue-template-compiler": "^2.5.16"
+    "vue-server-renderer": "^2.5.16",
+    "vue-template-compiler": "^2.5.16",
+    "vue-test-utils": "^1.0.0-beta.11"
   },
   "lint-staged": {
     "*.{js,vue}": [

src/components/Aside/AsideToggler.vue

@@ -16,35 +16,34 @@ import toggleClasses from '../../shared/toggle-classes'
 export default {
   name: 'AsideToggler',
   props: {
-    mobile: {
+    defaultOpen: {
       type: Boolean,
       default: false
     },
     display: {
       type: String,
       default: ''
-    }
+    },
+    mobile: {
+      type: Boolean,
+      default: false
+    },
   },
   computed: {
     classList () {
       return [
         'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
       ]
     }
   },
-  mounted: function () {
-    // this.toggle()
-  },
   methods: {
-    toggle () {
+    toggle (force) {
       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)
+      toggleClasses(cssClass, asideMenuCssClasses, force)
     },
     asideToggle (e) {
       e.preventDefault()

src/components/Breadcrumb/Breadcrumb.vue

@@ -1,8 +1,8 @@
 <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 class="breadcrumb-item" :key="index" v-for="(routeObject, index) in routeRecords">
+      <span class="active" v-if="isLast(index)">{{ getName(routeObject) }}</span>
+      <router-link :to="routeObject" v-else>{{ getName(routeObject) }}</router-link>
     </li>
   </ol>
 </template>
@@ -17,17 +17,16 @@ export default {
     }
   },
   methods: {
+    getName (item) {
+      return item.meta && item.meta.label ? item.meta.label : item.name || null
+    },
     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
+    }
+  },
+  computed: {
+    routeRecords: function () {
+      return this.list.filter((route) => route.name || route.meta.label)
     }
   }
 }

src/components/Sidebar/SidebarToggler.vue

@@ -16,35 +16,37 @@ import toggleClasses from '../../shared/toggle-classes'
 export default {
   name: 'SidebarToggler',
   props: {
-    mobile: {
+    defaultOpen: {
       type: Boolean,
-      default: false
+      default: true
     },
     display: {
       type: String,
       default: 'lg'
+    },
+    mobile: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
     classList () {
       return [
         'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
       ]
     }
   },
   mounted: function () {
-    this.toggle()
+    this.toggle(this.defaultOpen)
   },
   methods: {
-    toggle () {
+    toggle (force) {
       const [display, mobile] = [this.display, this.mobile]
       let cssClass = sidebarCssClasses[0]
       if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
         cssClass = `sidebar-${display}-show`
       }
-      toggleClasses(cssClass, sidebarCssClasses)
+      toggleClasses(cssClass, sidebarCssClasses, force)
     },
     sidebarToggle (e) {
       e.preventDefault()

src/shared/toggle-classes.js

@@ -1,6 +1,6 @@
-export default function toggleClasses (toggleClass, classList) {
+export default function toggleClasses (toggleClass, classList, force) {
   const level = classList.indexOf(toggleClass)
   const removeClassList = classList.slice(0, level)
   removeClassList.map((className) => document.body.classList.remove(className))
-  document.body.classList.toggle(toggleClass)
+  document.body.classList.toggle(toggleClass, force)
 }