refactor: merge CSidebarNavItem and CSidebarNavLink

Author: woothu

src/components/index.d.ts

@@ -493,16 +493,13 @@ export declare class CSidebarNavDropdown extends Vue {
   show: boolean
 }
 
-export declare class CSidebarNavItem extends Vue {}
-
-export declare class CSidebarNavLink extends CLink {
+export declare class CSidebarNavItem extends CLink {
   name: string
   icon: [string, object]
   fontIcon: string
   badge: object
-  url: string
+  addLinkClasses: string
   label: boolean
-  inNavItem: boolean
 }
 
 export declare class CSidebarNavTitle extends Vue {}

src/components/sidebar/CSidebarNavItem.vue

@@ -1,11 +1,82 @@
 <template>
   <li class="c-sidebar-nav-item">
-    <slot></slot>
+    <slot>
+      <CLink
+        :class="linkClasses"
+        v-bind="computedLinkProps"
+        @click.native="click"
+      >
+        <CIcon v-if="icon" v-bind="computedIcon"/>
+        <i v-if="fontIcon" :class="['c-sidebar-nav-icon', fontIcon]"/>
+        {{name}}
+        <CBadge
+          v-if="badge"
+          v-bind="Object.assign({}, badge, { text: null })"
+        >
+          {{badge.text}}
+        </CBadge>
+      </CLink>
+    </slot>
   </li>
 </template>
 
 <script>
+import CLink, { props as linkProps } from '../link/CLink'
+import CBadge from '../badge/CBadge'
+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
+})
+
 export default {
-  name: 'CSidebarNavItem'
+  name: 'CSidebarNavItem',
+  components: {
+    CLink, 
+    CBadge,
+    CIcon
+  },
+  props,
+  computed: {
+    linkProps () {
+      return Object.keys(linkProps).reduce((props, key) => {
+        props[key] = this[key]
+        return props
+      }, {})
+    },
+    addedLinkProps () {
+      return this.$options.propsData.exact === undefined ? { exact: true } : {}
+    },
+    computedLinkProps () {
+      return Object.assign(this.linkProps, this.addedLinkProps)
+    },
+    linkClasses () {
+      return [
+        this.label ? 'c-sidebar-nav-label' : 'c-sidebar-nav-link',
+        this.addLinkClasses
+      ]
+    },
+    computedIcon () {
+      if (typeof this.icon === 'object') {
+        return Object.assign(
+          { customClasses: 'c-sidebar-nav-icon' },
+          this.icon
+        )
+      } else {
+        return { customClasses: 'c-sidebar-nav-icon', name: this.icon }
+      }
+    }
+  },
+  methods: {
+    click (e) {
+      this.$emit('link-clicked', e)
+    }
+  }
 }
 </script>
+

src/components/sidebar/CSidebarNavLink.vue

@@ -8,8 +8,8 @@ import CSidebarMinimizer from './CSidebarMinimizer'
 import CSidebarNav from './CSidebarNav'
 import CSidebarNavDivider from './CSidebarNavDivider'
 import CSidebarNavDropdown from './CSidebarNavDropdown'
+import CSidebarNavGenerator from './CSidebarNavGenerator'
 import CSidebarNavItem from './CSidebarNavItem'
-import CSidebarNavLink from './CSidebarNavLink'
 import CSidebarNavTitle from './CSidebarNavTitle'
 
 export {
@@ -23,7 +23,7 @@ export {
   CSidebarNav,
   CSidebarNavDivider,
   CSidebarNavDropdown,
+  CSidebarNavGenerator,
   CSidebarNavItem,
-  CSidebarNavLink,
   CSidebarNavTitle
 }

src/components/sidebar/index.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
-import Component from '../CSidebarNavLink'
+import Component from '../CSidebarNavItem'
 
-const ComponentName = 'CSidebarNavLink'
+const ComponentName = 'CSidebarNavItem'
 const wrapper = mount(Component, {
   attachToDocument: true,
   propsData: {

src/components/sidebar/tests/CSidebarNavLink.spec.js renamed to src/components/sidebar/tests/CSidebarNavItem.spec.js

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSidebarNavLink.vue renders correctly 1`] = `
+exports[`CSidebarNavItem.vue renders correctly 1`] = `
 <li
   class="c-sidebar-nav-item"
   id="link"
@@ -31,7 +31,7 @@ exports[`CSidebarNavLink.vue renders correctly 1`] = `
 </li>
 `;
 
-exports[`CSidebarNavLink.vue renders correctly in label mode 1`] = `
+exports[`CSidebarNavItem.vue renders correctly in label mode 1`] = `
 <li
   class="c-sidebar-nav-item"
   id="link"