feat: CNav: add inCard prop

Author: woothu

src/components/Nav/CNav.vue

@@ -12,17 +12,21 @@ export default {
     justified: Boolean,
     tabs: Boolean,
     pills: Boolean,
-    vertical: Boolean
+    vertical: Boolean,
+    inCard: Boolean
   },
   computed: {
     navClasses () {
+      const hasTabs = this.tabs && !this.pills
       return {
         'nav' : true,
-        'nav-tabs': this.tabs && !this.pills,
+        'nav-tabs': hasTabs,
         'nav-pills': this.pills,
         'flex-column': this.vertical,
         'nav-fill': this.fill,
-        'nav-justified': this.justified
+        'nav-justified': this.justified,
+        'card-header-tabs': this.inCard && hasTabs,
+        'card-header-pills': this.inCard && this.pills
       }
     }
   },

src/components/Nav/tests/CNav.spec.js

@@ -22,7 +22,8 @@ const customWrapper = mount(Component, {
     fill: true,
     justified: true,
     pills: true,
-    vertical: true
+    vertical: true,
+    inCard: true
   },
   slots: {
     default: [CNavItem, CNavItem, CNavItem, CNavItem]

src/components/Nav/tests/__snapshots__/CNav.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CNav renders correctly 1`] = `
 
 exports[`CNav renders correctly 2`] = `
 <ul
-  class="nav nav-pills flex-column nav-fill nav-justified"
+  class="nav nav-pills flex-column nav-fill nav-justified card-header-pills"
 >
   <li
     class="nav-item"

src/components/index.d.ts

@@ -392,6 +392,7 @@ export declare class CNav extends Vue {
   tabs: boolean
   pills: boolean
   vertical: boolean
+  inCard: boolean
 }
 
 export declare class CNavItem extends CLink {}