Merge pull request #12 from coreui/dev-sidebar-clickaway

feat: sidebar hides on click outside mobile sidebar

Author: xidedix

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "CoreUI Vue Bootstrap 4 layout components",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
   "module": "dist/coreui-vue.esm.js",
@@ -59,6 +59,7 @@
     "lint:fix": "eslint --ext .js,.vue . --fix"
   },
   "dependencies": {
+    "vue-clickaway": "^2.2.2",
     "vue-perfect-scrollbar": "^0.1.0"
   },
   "devDependencies": {
@@ -73,9 +74,9 @@
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-plugin-html": "^4.0.3",
     "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jest": "^21.17.0",
+    "eslint-plugin-jest": "^21.18.0",
     "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-vue": "^4.5.0",
+    "eslint-plugin-vue": "^4.7.0",
     "husky": "^0.14.3",
     "jest": "^22.4.4",
     "jest-serializer-html": "^5.0.0",
@@ -84,7 +85,7 @@
     "lint-staged": "^7.1.3",
     "lodash": "^4.17.10",
     "node-sass": "^4.9.2",
-    "prettier": "^1.13.4",
+    "prettier": "^1.13.7",
     "rollup": "^0.59.4",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
@@ -99,7 +100,7 @@
     "uglify-es": "^3.3.9",
     "vue": "^2.5.16",
     "vue-jest": "^2.6.0",
-    "vue-loader": "^14.2.2",
+    "vue-loader": "^15.2.6",
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "vue-test-utils": "^1.0.0-beta.11"

src/components/Sidebar/Sidebar.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="sidebar">
+  <div class="sidebar" v-on-clickaway="hideMobile">
     <slot>Sidebar</slot>
   </div>
 </template>
 <script>
+import { mixin as clickaway } from 'vue-clickaway'
+import { hideMobile } from '../../mixins/hideMobile'
+
 export default {
   name: 'sidebar',
+  mixins: [ clickaway, hideMobile ],
   props: {
     fixed: {
       type: Boolean,

src/components/Sidebar/SidebarNavItem.vue

@@ -5,9 +5,12 @@
 </template>
 
 <script>
+import { hideMobile } from '../../mixins/hideMobile'
+
 export default {
   name: 'sidebar-nav-item',
-  props: {
+    mixins: [ hideMobile ],
+    props: {
     classes: {
       type: String,
       default: ''
@@ -23,13 +26,6 @@ export default {
     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/SidebarToggler.vue

@@ -50,6 +50,7 @@ export default {
     },
     sidebarToggle (e) {
       e.preventDefault()
+      e.stopPropagation()
       this.toggle()
     }
   }

src/mixins/hideMobile.js

@@ -0,0 +1,11 @@
+const hideMobile = {
+  methods: {
+    hideMobile() {
+      if (document.body.classList.contains('sidebar-show')) {
+        document.body.classList.toggle('sidebar-show')
+      }
+    }
+  }
+}
+
+export { hideMobile }