feat: CNav, CNavItem refactor:

- add possibility for disabled CNavItem item to be active,
- remove side effects from CNav, provide active nav instead,
- add posibility to use CNavItem without CNav
- simplify CNav children activation mechanism

Author: woothu

src/components/nav/CNav.vue

@@ -17,38 +17,36 @@ export default {
     vertical: Boolean,
     inCard: Boolean
   },
+  provide () {
+    const nav = {}
+    Object.defineProperty(nav, 'active', {
+      get: () => this.activeItemInstance
+    })
+    return { nav }
+  },
+  data () {
+    return {
+      activeItemInstance: null
+    }
+  },
   computed: {
     navClasses () {
       return {
         'nav': true,
-        'nav-tabs': this.variant === 'tabs',
-        'nav-pills': this.variant === 'pills',
+        [`nav-${this.variant}`]: this.variant,
         'flex-column': this.vertical,
         'nav-fill': this.fill,
         'nav-justified': this.justified,
-        'card-header-tabs': this.inCard && this.variant === 'tabs',
-        'card-header-pills': this.inCard && this.variant === 'pills'
+        [`card-header-${this.variant}`]: this.inCard && this.variant
       }
     }
   },
   methods: {
     onClick (e) {
-      const clickedItem = this.getClickedItem(e)
-      clickedItem ? this.activateItem(clickedItem) : null
-    },
-    getClickedItem (e) {
-      return this.$children.filter(item => this.itemWasActivated(item, e))[0]
-    },
-    itemWasActivated (item, e) {
-      return item.$el.contains(e.target) && 
-             !item.disabled && 
-             item.isActive !== undefined
-    },
-    activateItem (itemToActivate) {
-      // Works on CNavItem, CTab, CDropdown and every component that have 
-      // 'isActive' data prop that determines active state
       this.$children.forEach(item => {
-        return item.isActive = item === itemToActivate ? true : false
+        if (item.$el.contains(e.target) && !item.disabled) {
+          this.activeItemInstance = item
+        }
       })
     }
   }

src/components/nav/CNavItem.vue

@@ -17,10 +17,11 @@ export default {
   components: {
     CLink
   },
+  inject: { nav: { default: {} }},
   props,
-  data () {
-    return {
-      isActive: this.disabled ? null : this.active
+  computed: {
+    isActive () {
+      return this.nav.active ? this.nav.active === this : this.active
     }
   }
 }