refactor: refactors in sidebar components

- rework of CSidebar component,
- fix passing exact prop in CSidebarNavLink,
- add CSidebarClose component,
- change CSidebarNavDropdown open prop to show
- update tests and typings

Author: woothu

src/components/Sidebar/CSidebar.vue

@@ -1,32 +1,35 @@
 <template>
-  <div :class="sidebarClasses">
-    <slot>Sidebar</slot>
+  <div :class="sidebarClasses" @click="sidebarClick">
+    <slot></slot>
   </div>
 </template>
 
 <script>
-import elementResizeDetectorMaker from 'element-resize-detector'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
 export default {
   name: 'CSidebar',
   props: {
     fixed: Boolean,
+    unfoldable: Boolean,
     breakpoint: {
-      type: String,
+      type: [String, Boolean],
       default: 'lg',
-      validator: val => ['sm', 'md', 'lg', 'xl'].includes(val)
+      validator: val => [false, '', 'sm', 'md', 'lg', 'xl'].includes(val)
     },
     minimize: Boolean,
     show: {
+      type: Boolean,
+      default: null
+    },
+    hideOnMobileClick: {
       type: Boolean,
       default: true
     },
-    showOnMobile: Boolean,
-    noHideOnMobileClick: Boolean,
     aside: Boolean,
-    light: Boolean,
-    dropdownStateOnRouteChange: {
+    colorScheme: {
+      type: String,
+      default: 'dark'
+    },
+    dropdownMode: {
       type: String,
       default: 'openActive',
       validator: (mode) => {
@@ -37,142 +40,68 @@ export default {
     }
   },
   provide () {
-    const state = {}
-    Object.defineProperty(state, 'minimized', {
-      get: () => this.minimized
-    })
-    Object.defineProperty(state, 'open', {
-      get: () => this.open
-    })
-    Object.defineProperty(state, 'mobileOpen', {
-      get: () => this.mobileOpen
-    })
-    const dropdownStateOnRouteChange = this.dropdownStateOnRouteChange
-    return { state, dropdownStateOnRouteChange }
+    return { dropdownMode: this.dropdownMode }
   },
   data () {
     return {
       open: this.show,
-      mobileOpen: this.showOnMobile,
-      minimized: this.minimize,
-      erd: elementResizeDetectorMaker(),
-      bodyWidth: undefined,
     }
   },
-  mounted () {
-    this.erd.listenTo(document.body, (el) => this.bodyWidth = el.clientWidth)
-
-    this.$root.$on(this.listenedEvents, () => {
-      if (this.isOnMobile) {
-        this.switchState('mobileOpen')
-      } else {
-        this.switchState('open')
-      }
-    })
-  },
   watch: {
     show (val) {
       this.open = val
-    },
-    open: {
-      immediate: true,
-      handler (val) {
-        this.emitCurrentState('show', val)
-      }
-    },
-    showOnMobile (val) {
-      this.mobileOpen = val
-    },
-    mobileOpen: {
-      immediate: true,
-      handler (val) {
-        this.emitCurrentState('showOnMobile', val)
-      }
-    },
-    minimize (val) {
-      this.minimized = val
-    },
-    minimized: {
-      immediate: true,
-      handler (val) {
-        this.emitCurrentState('minimize', val)
-      }
-    },
-    isOnMobile: {
-      immediate: true,
-      handler (val, oldVal) {
-        if (val === true && val !== oldVal) {
-          document.body.addEventListener('click', this.mobileClick)
-        } else if (oldVal === true) {
-          document.body.removeEventListener('click', this.mobileClick)
-        }
-        
-        if (val !== undefined) {
-          this.$root.$emit('c-sidebar-mobile-state', val)
-        }
-      }
     }
   },
   computed: {
-    listenedEvents () {
-      const componentEvent = this.aside ? 'c-aside-toggle' : 'c-sidebar-toggle'
-      if (this.$attrs.id) {
-        return [componentEvent, this.$attrs.id]
+    displayClasses () {
+      const breakpointPrefix = this.breakpoint === false ? '' : `-${this.breakpoint}`
+      const responsiveClass = `c-sidebar${breakpointPrefix}-show`
+      if (this.open === false) {
+        return null
+      } else if (this.open === true) {
+        return ['c-sidebar-show', breakpointPrefix ? responsiveClass : '' ]
+      } else if (this.open === null) {
+        return responsiveClass
       }
-      return componentEvent
     },
+
     sidebarClasses () {
-      const mobileClasses = {
-        'c-sidebar-show': this.mobileOpen,
-      }
-      const desktopClasses = {
-        'c-sidebar-minimized': this.minimized,
-        [`c-sidebar-${this.breakpoint}-show`]: this.open,
-      }
       return [
-        this.isOnMobile ? mobileClasses : desktopClasses,
         'c-sidebar',
-        `c-sidebar-${this.light ? 'light' : 'dark'}`,
+        `c-sidebar-${this.colorScheme}`,
+        this.displayClasses,
         {
           'c-sidebar-fixed': this.fixed,
-          'c-sidebar-right': this.aside
+          'c-sidebar-right': this.aside,
+          'c-sidebar-minimized': this.minimize && !this.unfoldable,
+          'c-sidebar-minimized-unfoldable': this.minimize && this.unfoldable
         }
       ]
-    },
-    breakpoints () {
-      return {
-        'sm': getStyle('--breakpoint-sm') || '576px',
-        'md': getStyle('--breakpoint-md') || '768px',
-        'lg': getStyle('--breakpoint-lg') || '992px',
-        'xl': getStyle('--breakpoint-xl') || '1200px'
-      }
-    },
-    isOnMobile () {
-      const mobileWidth = parseFloat(this.breakpoints[this.breakpoint])
-      return this.bodyWidth && (this.bodyWidth < mobileWidth)
     }
   },
   methods: {
-    mobileClick (event) {
-      if (!this.mobileOpen || this.noHideOnMobileClick) {
-        return
-      }
-      const classList = Array.from(event.target.classList).join()
-      const clickedOutsideSidebar = !this.$el.contains(event.target)
+    sidebarClick (event) {
+      const hiddingElementClicked = event.target.tagName === 'A'
       if (
-        (clickedOutsideSidebar && !classList.includes('c-header-toggler')) || 
-        (!clickedOutsideSidebar && event.target.tagName === 'A')
+        hiddingElementClicked &&
+        this.hideOnMobileClick &&
+        this.isOnMobile(event)
       ) {
-        this.switchState('mobileOpen')
+        this.open = false
+        this.$emit('update:show', false)
       }
     },
-    switchState (variable) {
-      this[variable] = !this[variable]
-    },
-    emitCurrentState (variableName, value) {
-      this.$emit(`update:${variableName}`, value)
-      this.$root.$emit(`c-sidebar-${variableName}-state`, value)
+    isOnMobile (event) {
+      return Boolean(getComputedStyle(this.$el).getPropertyValue('--on-mobile'))
     }
   }
 }
 </script>
+
+<style scoped>
+@media (max-width: 992px) {
+  .c-sidebar-lg-show {
+    --on-mobile: true;
+  }
+}
+</style>

src/components/Sidebar/CSidebarClose.vue

@@ -0,0 +1,13 @@
+<template>
+  <CButtonClose buttonClasses="c-sidebar-close"/>
+</template>
+
+<script>
+import CButtonClose from '../Button/CButtonClose'
+export default {
+  name: 'CSidebarClose',
+  components: {
+    CButtonClose
+  }
+}
+</script>

src/components/Sidebar/CSidebarNavDropdown.vue

@@ -20,32 +20,32 @@ export default {
       validator: val => val.length > 0
     },
     icon: String,
-    open: Boolean
+    show: Boolean
   },
   data () {
     return {
-      isOpen: this.open
+      open: this.show
     }
   },
   inject: {
-    dropdownStateOnRouteChange: {
+    dropdownMode: {
       default: 'openActive'
     }
   },
   watch: {
-    open (val) {
-      this.isOpen = val
+    show (val) {
+      this.open = val
     },
     $route: {
       immediate: true,
       handler (route) {
-        const mode = this.dropdownStateOnRouteChange
+        const mode = this.dropdownMode
         if (mode === 'close') {
-          this.isOpen = false
+          this.open = false
         } else if (mode === 'closeInactive' && this.route) {
-          this.isOpen = route.fullPath.includes(this.route)
-        }  else if (mode === 'openActive' && !this.isOpen && this.route) {
-          this.isOpen = route.fullPath.includes(this.route)
+          this.open = route.fullPath.includes(this.route)
+        }  else if (mode === 'openActive' && !this.open && this.route) {
+          this.open = route.fullPath.includes(this.route)
         }
         // else if (mode === 'noAction') {
         //   return
@@ -60,15 +60,15 @@ export default {
     dropdownClasses () {
       return [
         'c-nav-item c-nav-dropdown',
-        { 'c-open': this.isOpen }
+        { 'c-open': this.open }
       ]
     }
   },
   methods: {
     handleClick (e) {
       e.preventDefault()
-      this.isOpen = !this.isOpen
-      this.$emit('update:open', this.isOpen)
+      this.open = !this.open
+      this.$emit('update:show', this.open)
     },
     itemClicked (e) {
       this.$emit('item-clicked', e)

src/components/Sidebar/CSidebarNavLink.vue

@@ -2,8 +2,7 @@
   <li class="c-nav-item">
     <CLink
       :class="linkClasses"
-      :exact="true"
-      v-bind="linkProps"
+      v-bind="computedLinkProps"
       @click.native="click"
     >
       <slot>
@@ -44,6 +43,12 @@ export default {
         return props
       }, {})
     },
+    addedLinkProps () {
+      return this.$options.propsData.exact === undefined ? { exact: true } : {}
+    },
+    computedLinkProps () {
+      return Object.assign(this.linkProps, this.addedLinkProps)
+    },
     linkClasses () {
       return [
         this.label ? 'c-nav-label' : 'c-nav-link',

src/components/Sidebar/index.js

@@ -1,10 +1,11 @@
 import CSidebar from './CSidebar'
 import CSidebarBrand from './CSidebarBrand'
+import CSidebarClose from './CSidebarClose'
 import CSidebarFooter from './CSidebarFooter'
 import CSidebarForm from './CSidebarForm'
 import CSidebarHeader from './CSidebarHeader'
-import CSidebarNav from './CSidebarNav'
 import CSidebarMinimizer from './CSidebarMinimizer'
+import CSidebarNav from './CSidebarNav'
 import CSidebarNavDivider from './CSidebarNavDivider'
 import CSidebarNavDropdown from './CSidebarNavDropdown'
 import CSidebarNavLink from './CSidebarNavLink'
@@ -14,6 +15,7 @@ import CSidebarToggler from './CSidebarToggler'
 export {
   CSidebar,
   CSidebarBrand,
+  CSidebarClose,
   CSidebarFooter,
   CSidebarForm,
   CSidebarHeader,