refactor: CSidebarNavDropdown, CSidebarNavLink refactor:

- add inNavLink prop to CSidebarNavLink,
- add fontIcon prop to components,
- change icon generation in components,
- update tests and typings

Author: woothu

src/components/index.d.ts

@@ -491,46 +491,31 @@ export declare class CSidebarHeader extends Vue {}
 
 export declare class CSidebarMinimizer extends Vue {}
 
-export declare class CSidebarNav extends Vue {
-  navItems: Array<any>
-}
+export declare class CSidebarNav extends Vue {}
 
 export declare class CSidebarNavDivider extends Vue {}
 
 export declare class CSidebarNavDropdown extends Vue {
   name: string
   route: string
-  icon: string
+  icon: [string, object]
+  fontIcon: string
   show: boolean
 }
 
-export declare class CSidebarNavItem extends Vue {
-  item: object
-}
-
-export declare class CSidebarNavItems extends Vue {
-  items: Array<any>
-}
-
-export declare class CSidebarNavLabel extends Vue {
-  name: string
-  url: string
-  icon: string
-}
+export declare class CSidebarNavItem extends Vue {}
 
 export declare class CSidebarNavLink extends CLink {
   name: string
-  icon: [string, Array<any>, object]
+  icon: [string, object]
+  fontIcon: string
   badge: object
   url: string
+  label: boolean
+  inNavItem: boolean
 }
 
-export declare class CSidebarNavTitle extends Vue {
-  name: string
-  wrapper: object
-}
-
-export declare class CSidebarNavToggler extends Vue {}
+export declare class CSidebarNavTitle extends Vue {}
 
 export declare class CSpinner extends Vue {
   grow: boolean

src/components/sidebar/CSidebarNavDropdown.vue

@@ -1,7 +1,8 @@
 <template>
   <li :class="dropdownClasses">
-    <a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" @click="handleClick">
+    <a class="c-sidebar-nav-dropdown-toggle" @click="handleClick">
       <CIcon v-if="icon" v-bind="computedIcon"/>
+      <i v-if="fontIcon" :class="['c-sidebar-nav-icon', fontIcon]"></i>
       {{name}}
     </a>
     <ul class="c-sidebar-nav-dropdown-items" @click="itemClicked">
@@ -11,20 +12,21 @@
 </template>
 
 <script>
-// import CIcon from '@coreui/icons/vue'
+import CIcon from '@coreui/icons-vue/CIcon.vue'
 
 export default {
   name:'CSidebarNavDropdown',
-  // components: {
-  //   CIcon
-  // },
+  components: {
+    CIcon
+  },
   props: {
     name: String,
     route: {
       type: String,
       validator: val => val.length > 0
     },
     icon: [String, Object],
+    fontIcon: String,
     show: Boolean
   },
   data () {
@@ -64,7 +66,7 @@ export default {
     },
     dropdownClasses () {
       return [
-        'c-sidebar-nav-item c-sidebar-nav-dropdown',
+        'c-sidebar-nav-dropdown',
         { 'c-show': this.open }
       ]
     },
@@ -75,7 +77,7 @@ export default {
           this.icon
         )
       } else {
-        return { customClasses: [this.icon, 'c-sidebar-nav-icon']}
+        return { customClasses: 'c-sidebar-nav-icon', name: this.icon }
       }
     }
   },

src/components/sidebar/CSidebarNavLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="c-sidebar-nav-item">
+  <li v-if="inNavItem" class="c-sidebar-nav-item">
     <CLink
       :class="linkClasses"
       v-bind="computedLinkProps"
@@ -17,27 +17,45 @@
       </slot>
     </CLink>
   </li>
+  <CLink v-else>
+    <slot>
+      <CIcon v-if="icon" v-bind="computedIcon"/>
+      <i v-if="fontIcon" :class="['c-sidebar-nav-icon', fontIcon]"></i>
+      {{name}}
+      <CBadge
+        v-if="badge"
+        v-bind="Object.assign({}, badge, { text: null })"
+      >
+        {{badge.text}}
+      </CBadge>
+    </slot>
+  </CLink>
 </template>
 
 <script>
 import CLink, { props as linkProps } from '../link/CLink'
 import CBadge from '../badge/CBadge'
-// import CIcon from '@coreui/icons/vue'
+import CIcon from '@coreui/icons-vue/CIcon.vue'
 
 const props = Object.assign(linkProps, {
   name: String,
   icon: [String, Object],
+  fontIcon: String,
   badge: Object,
   addLinkClasses: [String, Array, Object],
-  label: Boolean
+  label: Boolean,
+  inNavItem: {
+    type: Boolean,
+    default: true
+  }
 })
 
 export default {
   name: 'CSidebarNavLink',
   components: {
     CLink, 
     CBadge,
-    // CIcon
+    CIcon
   },
   props,
   computed: {
@@ -66,7 +84,7 @@ export default {
           this.icon
         )
       } else {
-        return { customClasses: [this.icon, 'c-sidebar-nav-icon']}
+        return { customClasses: 'c-sidebar-nav-icon', name: this.icon }
       }
     }
   },

src/components/sidebar/tests/CSidebarNavDropdown.spec.js

@@ -43,7 +43,7 @@ describe(ComponentName, () => {
     expect(wrapper.vm.open).toBe(true)
   })
   it('changes state when clicked on toggle', () => {
-    wrapper.find('.c-sidebar-nav-link').trigger('click')
+    wrapper.find('.c-sidebar-nav-dropdown-toggle').trigger('click')
     expect(wrapper.vm.open).toBe(false)
     expect(wrapper.emitted()['update:show']).toBeTruthy()
   })

src/components/sidebar/tests/__snapshots__/CSidebarNavDropdown.spec.js.snap

@@ -2,14 +2,18 @@
 
 exports[`CSidebarNavDropdown renders correctly 1`] = `
 <li
-  class="c-sidebar-nav-item c-sidebar-nav-dropdown"
+  class="c-sidebar-nav-dropdown"
 >
   <a
-    class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle"
+    class="c-sidebar-nav-dropdown-toggle"
   >
-    <cicon
-      customclasses="cui-settings,c-sidebar-nav-icon"
+    <svg
+      class="c-sidebar-nav-icon"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
     />
+     
+    <!---->
     
     
   

src/components/sidebar/tests/__snapshots__/CSidebarNavLink.spec.js.snap

@@ -10,8 +10,10 @@ exports[`CSidebarNavLink.vue renders correctly 1`] = `
     href="#"
     target="_self"
   >
-    <cicon
-      customclasses="cui-settings,c-sidebar-nav-icon"
+    <svg
+      class="c-sidebar-nav-icon"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
     />
     
       test link
@@ -37,8 +39,10 @@ exports[`CSidebarNavLink.vue renders correctly in label mode 1`] = `
     href="#"
     target="_self"
   >
-    <cicon
-      customclasses="cui-settings,c-sidebar-nav-icon"
+    <svg
+      class="c-sidebar-nav-icon"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
     />
     
       test link