Merge pull request #21 from coreui/feat-sidebar-navlink-attributes

v2.1.0

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,34 @@
 ### [@coreui/vue](https://coreui.io/) changelog
 
+##### v2.1.0
+- feat(SidebarNavLink): attributes
+- refactor(SidebarNav*): classes type [String, Array, Object]
+- test: update SidebarNavLabel, SidebarNavLink, SidebarNavDivider
+- refactor: rollup.config.js uglify()
+- chore: update jest.config.js 
+- update `@vue/test-utils` to `^1.0.0-beta.27`
+- update `babel-plugin-dynamic-import-node` to `^2.2.0`
+- update `eslint` to `^5.10.0`
+- update `eslint-config-prettier` to `^3.3.0`
+- update `eslint-plugin-html` to `^5.0.0`
+- update `eslint-plugin-jest` to `^22.1.2`
+- update `eslint-plugin-vue` to `^5.0.0`
+- update `husky` to `^1.2.0`
+- update `lint-staged` to `^8.1.0`
+- update `node-sass` to `^4.11.0`
+- update `prettier` to `^1.15.3`
+- update `rollup` to `^0.67.4`
+- update `rollup-plugin-commonjs` to `^9.2.0`
+- update `rollup-plugin-filesize` to `^5.0.1`
+- update `rollup-plugin-replace` to `^2.1.0`
+- update `rollup-plugin-uglify` to `^6.0.0`
+- update `vue` to `^2.5.19`
+- update `vue-server-renderer` to `^2.5.19`
+- update `vue-template-compiler` to `^2.5.19`
+- update `vue-jest` to `^3.0.1`
+- update `vue-router` to `^3.0.2`
+- update `@coreui/coreui` to `^2.1.4`
+
 ##### v2.0.2
 - fix(AsideToggler): add missing `display { default:'lg' }` prop value
 - fix(AsideToggler): add missing `defaultOpen` prop value handling

README.md

@@ -2,9 +2,9 @@
 
 [![Npm badge](https://img.shields.io/npm/v/@coreui/vue.svg)][npm]
 [![NPM downloads][npm-download]][npm]
-![Rollup badge](https://img.shields.io/badge/Rollup-^0.59.4-ff69b4.svg)
+![Rollup badge](https://img.shields.io/badge/Rollup-^0.67.4-ff69b4.svg)
 ![Jest](https://img.shields.io/badge/Jest-^23.6.0-blue.svg)
-![Vue](https://img.shields.io/badge/Vue-^2.5.17-brightgreen.svg)
+![Vue](https://img.shields.io/badge/Vue-^2.5.19-brightgreen.svg)
 
 [npm]: https://www.npmjs.com/package/@coreui/vue
 [npm-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square

jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
   coverageDirectory: "<rootDir>/coverage",
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
+    "!src/components/index.js",
     "!src/index.umd.js",
     "!**/node_modules/**"
   ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "CoreUI Vue Bootstrap 4 layout components",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
   "module": "dist/coreui-vue.esm.js",
@@ -63,51 +63,51 @@
     "vue-perfect-scrollbar": "^0.1.0"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/test-utils": "^1.0.0-beta.27",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-plugin-dynamic-import-node": "^2.1.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-preset-vue-app": "^2.0.0",
-    "eslint": "^5.6.1",
-    "eslint-config-prettier": "^3.1.0",
+    "eslint": "^5.10.0",
+    "eslint-config-prettier": "^3.3.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-html": "^4.0.6",
+    "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.24.1",
+    "eslint-plugin-jest": "^22.1.2",
     "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-vue": "^5.0.0-beta.3",
-    "husky": "^1.1.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "husky": "^1.2.0",
     "jest": "^23.6.0",
     "jest-serializer-html": "^5.0.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-vue-preprocessor": "^1.4.0",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.1.0",
     "lodash": "^4.17.11",
-    "node-sass": "^4.9.3",
-    "prettier": "^1.14.3",
-    "rollup": "^0.59.4",
+    "node-sass": "^4.11.0",
+    "prettier": "^1.15.3",
+    "rollup": "^0.67.4",
     "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.8",
-    "rollup-plugin-filesize": "^4.0.1",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-filesize": "^5.0.1",
     "rollup-plugin-json": "^3.1.0",
     "rollup-plugin-license": "^0.7.0",
     "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^3.0.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-uglify": "^6.0.0",
     "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.1.0",
     "uglify-es": "^3.3.9",
-    "vue": "^2.5.17",
-    "vue-jest": "^2.6.0",
+    "vue": "^2.5.19",
+    "vue-jest": "^3.0.1",
     "vue-loader": "^15.4.2",
-    "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.17",
-    "vue-template-compiler": "^2.5.17"
+    "vue-router": "^3.0.2",
+    "vue-server-renderer": "^2.5.19",
+    "vue-template-compiler": "^2.5.19"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^2.0.14"
+    "@coreui/coreui": "^2.1.4"
   },
   "lint-staged": {
     "*.{js,vue}": [

rollup.config.js

@@ -7,7 +7,7 @@ import json from "rollup-plugin-json";
 import license from "rollup-plugin-license";
 import resolve from "rollup-plugin-node-resolve";
 import replace from "rollup-plugin-replace";
-import uglify from "rollup-plugin-uglify";
+import { uglify } from "rollup-plugin-uglify";
 import vue from "rollup-plugin-vue";
 import { minify } from "uglify-es";
 

src/components/Breadcrumb/Breadcrumb.vue

@@ -16,18 +16,18 @@ export default {
       default: () => []
     }
   },
+  computed: {
+    routeRecords: function () {
+      return this.list.filter((route) => route.name || route.meta.label)
+    }
+  },
   methods: {
     getName (item) {
       return item.meta && item.meta.label ? item.meta.label : item.name || null
     },
     isLast (index) {
       return index === this.list.length - 1
     }
-  },
-  computed: {
-    routeRecords: function () {
-      return this.list.filter((route) => route.name || route.meta.label)
-    }
   }
 }
 </script>

src/components/Footer/Footer.vue

@@ -13,16 +13,16 @@ export default {
       default: false
     }
   },
-  mounted: function () {
-    this.isFixed()
-  },
   computed: {
     classList () {
       return [
         'app-footer'
       ]
     }
   },
+  mounted: function () {
+    this.isFixed()
+  },
   methods: {
     isFixed () {
       this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')

src/components/Sidebar/SidebarNav.vue

@@ -21,21 +21,21 @@
                     <!-- 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"/>
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="childL2.variant" :attributes="childL2.attributes" />
                       </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"/>
+                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="childL1.variant" :attributes="childL1.attributes"/>
                     </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"/>
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant" :attributes="item.attributes"/>
               </SidebarNavItem>
             </template>
           </template>
@@ -57,13 +57,6 @@ import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
 export default {
   name: 'SidebarNav',
-  props: {
-    navItems: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
   components: {
     SidebarNavDivider,
     SidebarNavDropdown,
@@ -73,6 +66,13 @@ export default {
     SidebarNavLabel,
     VuePerfectScrollbar
   },
+  props: {
+    navItems: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
   data () {
     return {}
   },

src/components/Sidebar/SidebarNavDivider.vue

@@ -1,25 +1,26 @@
 <template>
-  <li :class="classList"></li>
+  <li :class="classList" />
 </template>
 
 <script>
 export default {
-  name: 'sidebar-nav-divider',
+  name: 'SidebarNavDivider',
   props: {
     classes: {
-      type: String,
+      type: [String, Array, Object],
       default: ''
     }
   },
   computed: {
     classList () {
       return [
-        'divider',
+        'nav-divider',
         ...this.itemClasses
       ]
     },
     itemClasses () {
-      return this.classes ? this.classes.split(' ') : ''
+      const classes = this.classes
+      return !classes ? [] : typeof classes === 'string' || classes instanceof String ? classes.split(' ') : Array.isArray(classes) ? classes : Object.keys(classes).filter(i=>classes[i])
     }
   }
 }

src/components/Sidebar/SidebarNavItem.vue

@@ -9,10 +9,10 @@ import { hideMobile } from '../../mixins/hideMobile'
 
 export default {
   name: 'sidebar-nav-item',
-    mixins: [ hideMobile ],
-    props: {
+  mixins: [ hideMobile ],
+  props: {
     classes: {
-      type: String,
+      type: [String, Array, Object],
       default: ''
     }
   },
@@ -24,7 +24,8 @@ export default {
       ]
     },
     itemClasses () {
-      return this.classes ? this.classes.split(' ') : ''
+      const classes = this.classes
+      return !classes ? [] : typeof classes === 'string' || classes instanceof String ? classes.split(' ') : Array.isArray(classes) ? classes : Object.keys(classes).filter(i=>classes[i])
     }
   }
 }

src/components/Sidebar/SidebarNavLabel.vue

@@ -27,7 +27,7 @@ export default {
       default: 'fa fa-circle'
     },
     classes: {
-      type: String,
+      type: [String, Array, Object],
       default: ''
     },
     label: {
@@ -39,7 +39,7 @@ export default {
   computed: {
     classList () {
       const classes = {
-        navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
+        navItem: ['hidden-cn', ...this.itemClasses],
         navLink: 'nav-label',
         icon: [
           this.icon ? this.icon : 'fa fa-circle',
@@ -48,12 +48,11 @@ export default {
         ].join(' ')
       }
       return classes
+    },
+    itemClasses () {
+      const classes = this.classes
+      return !classes ? [] : typeof classes === 'string' || classes instanceof String ? classes.split(' ') : Array.isArray(classes) ? classes : Object.keys(classes).filter(i=>classes[i])
     }
   },
-  methods: {
-    getClasses (classes) {
-      return classes ? classes.split(' ') : []
-    }
-  }
 }
 </script>