refactor: CNav, CButton: mix variantable props to prop 'variant'

Author: woothu

src/components/button/CButton.vue

@@ -7,8 +7,10 @@ const btnProps = {
   block: Boolean,
   pill: Boolean,
   square: Boolean,
-  ghost: Boolean,
-  outline: Boolean,
+  variant: {
+    type: String,
+    validator: val => ['', 'ghost', 'outline'].includes(val)
+  },
   size: {
     type: String,
     validator: value => ['', 'sm', 'lg'].includes(value)
@@ -34,10 +36,11 @@ function isToggle (props) {
 }
 
 function computeClasses (props) {
+  const outlineSuffix = props.variant === 'outline' ? 'outline-' : ''
   return {
-    [`btn-${props.outline ? 'outline-' : ''}${props.color}`]: props.color,
+    [`btn-${outlineSuffix}${props.color}`]: props.color,
     [`btn-${props.size}`]: Boolean(props.size),
-    [`btn-ghost-${props.color}`]: props.ghost,
+    [`btn-ghost-${props.color}`]: props.variant === 'ghost',
     'btn-block': props.block,
     'btn-pill': props.pill,
     'btn-square': props.square && !props.pill,

src/components/button/tests/CButton.spec.js

@@ -12,8 +12,7 @@ const toggleWrapper = mount(Component, {
       type: 'input',
       size: 'lg',
       color: 'info',
-      outline: true,
-      ghost: true,
+      variant: 'outline',
       block: true,
       square: true
     }
@@ -32,7 +31,7 @@ const routerLinkWrapper = mount(Component, {
       to: '/dashboard',
       size: 'sm',
       color: 'success',
-      ghost: true,
+      variant: 'ghost',
       pill: true
     }
   },

src/components/button/tests/__snapshots__/CButton.spec.js.snap

@@ -23,7 +23,7 @@ exports[`CButton renders correctly toggle button 1`] = `
 <button
   aria-pressed="true"
   autocomplete="off"
-  class="btn btn-outline-info btn-lg btn-ghost-info btn-block btn-square active"
+  class="btn btn-outline-info btn-lg btn-block btn-square active"
   type="input"
 >
   <template>

src/components/index.d.ts

@@ -29,8 +29,7 @@ export declare class CButton extends CLink {
   block: boolean
   pill: boolean
   square: boolean
-  ghost: boolean
-  outline: boolean
+  variant: string
   size: string
   color: string
   type: string
@@ -396,8 +395,7 @@ export declare class CModal extends Vue {
 export declare class CNav extends Vue {
   fill: boolean
   justified: boolean
-  tabs: boolean
-  pills: boolean
+  variant: string
   vertical: boolean
   inCard: boolean
 }

src/components/nav/CNav.vue

@@ -8,25 +8,26 @@
 export default {
   name: 'CNav',
   props: {
+    variant: {
+      type: String,
+      validator: val => ['', 'tabs', 'pills'].includes(val)
+    },
     fill: Boolean,
     justified: Boolean,
-    tabs: Boolean,
-    pills: Boolean,
     vertical: Boolean,
     inCard: Boolean
   },
   computed: {
     navClasses () {
-      const hasTabs = this.tabs && !this.pills
       return {
-        'nav' : true,
-        'nav-tabs': hasTabs,
-        'nav-pills': this.pills,
+        'nav': true,
+        'nav-tabs': this.variant === 'tabs',
+        'nav-pills': this.variant === 'pills',
         'flex-column': this.vertical,
         'nav-fill': this.fill,
         'nav-justified': this.justified,
-        'card-header-tabs': this.inCard && hasTabs,
-        'card-header-pills': this.inCard && this.pills
+        'card-header-tabs': this.inCard && this.variant === 'tabs',
+        'card-header-pills': this.inCard && this.variant === 'pills'
       }
     }
   },

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

@@ -6,7 +6,7 @@ import CNavItem from '../CNavItem'
 const ComponentName = 'CNav'
 const wrapper = mount(Component, {
   propsData: {
-    tabs: true,
+    variant: 'tabs',
   },
   slots: {
     default: 'CNav items'
@@ -21,7 +21,7 @@ const customWrapper = mount(Component, {
   propsData: {
     fill: true,
     justified: true,
-    pills: true,
+    variant: 'pills',
     vertical: true,
     inCard: true
   },