feat: add CTabs activeTab prop, change animation logic

Author: woothu

src/components/index.d.ts

@@ -587,12 +587,11 @@ export declare class CTabs extends Vue {
   addTabsWrapperClasses: string | Array<any> | object
   addTabsClasses: string | Array<any> | object
   addTabClasses: string | Array<any> | object
+  activeTab: number
 }
 
-export declare class CTab extends Vue {
-  title: string 
-  active: boolean
-  disabled: boolean
+export declare class CTab extends CLink {
+  title: string
 }
 
 declare class ToastProps extends Vue {

src/components/tabs/CDistributor.vue

@@ -0,0 +1,28 @@
+<template>
+  <component :is="tag">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'CDistributor',
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  provide () {
+    return {
+      distributed: this.props
+    }
+  },
+  computed: {
+    props () {
+      return this.$attrs
+    }
+  }
+}
+</script>

src/components/tabs/CTab.vue

@@ -1,13 +1,93 @@
+<template>
+  <li 
+    v-if="distributed.header"
+    @click="navClick"
+    class="nav-item"
+  >
+    <CLink class="nav-link" v-bind="navLinkProps">
+      <slot name="title">{{title}}</slot>
+    </CLink>
+  </li>
+  <transition
+    v-else
+    :name="tabs.fade ? 'fade' : ''"
+    mode="out-in"
+  >
+    <div
+      v-show="isActive"
+      :class="paneClasses"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
 <script>
+import CLink, { propsFactory } from '../link/CLink'
+
+const props = Object.assign(propsFactory(), {
+  title: String
+})
+
 export default {
   name: 'CTab',
-  props: {
-    title: String, 
-    active: Boolean,
-    disabled: Boolean
+  inject: ['distributed', 'tabs'],
+  components: {
+    CLink
   },
-  render (h) {
-    return h(false)
+  beforeMount () {
+    this.index = Array.from(this.$parent.$children).indexOf(this)
+    if (
+      this.active && this.distributed.header 
+      && typeof this.tabs.activeTab !== 'number'
+    ) {
+      this.distributed.changeTabTo(this.index)
+    }
+  },
+  data () {
+    return {
+      index: null
+    }
+  },
+  props,
+  computed: {
+    navLinkProps () {
+      return Object.assign(
+        {}, this._props, { active: this.isActive }, { title: null }
+      )
+    },
+    paneClasses () {
+      return [
+        this.distributed.addClasses, 
+        'tab-pane',
+        { 'active': this.isActive }
+      ]
+    },
+    isActive () {
+      return this.tabs.activeTab === this.index
+    }
+  },
+  methods: {
+    navClick () {
+      if (!this.isActive && !this.disabled) {
+        this.distributed.changeTabTo(this.index)
+      }
+    }
   }
 }
 </script>
+
+<style scoped>
+  .fade-enter {
+    display: none;
+    opacity: 0;
+  }
+  .fade-enter-active {
+    transition: opacity 0.3s;
+  }
+  .fade-leave, .fade-leave-active {
+    position: absolute;
+    display: none;
+    opacity: 0;
+  }
+</style>

src/components/tabs/CTabContent.vue

@@ -1,49 +1,43 @@
 <template>
   <div :class="wrapperClasses">
     <div :class="navWrapperClasses">
-      <ul :class="navClasses">
-        <CTabNav
-          v-for="(tab, key) in ctabInstances"
-          @click.native="tabClick(tab, key)"
-          v-bind="tab.$attrs"
-          :title="tab.title"
-          :custom-title-slot="tab.$scopedSlots.title"
-          :active="tab === activeTab"
-          :disabled="tab.disabled"
-          :key="key"
-        />
-      </ul>
+      <CDistributor 
+        tag="ul" 
+        :class="navClasses" 
+        :header="true"
+        :changeTabTo="changeTabTo"
+      >
+        <slot></slot>
+      </CDistributor>
     </div>
     <div :class="[addTabsWrapperClasses, gridClasses.content]">
-      <div :class="tabsClasses">
-        <transition :name="fade ? 'fade' : ''" mode="out-in">
-          <KeepAlive>
-            <template v-for="(tab, key) in ctabInstances">
-              <CTabContent
-                v-if="activeTab === tab"
-                :content="tab.$scopedSlots.default"
-                :key="key"
-                :class="[addTabClasses, 'tab-pane active']"
-              />
-            </template>
-          </KeepAlive>
-        </transition>
-      </div>
+      <CDistributor
+        :class="tabsClasses" 
+        :addClasses="addTabClasses"
+      >
+        <slot></slot>
+      </CDistributor>
     </div>
-    <!-- needed to instantiate CTab components, shouldn't render anything -->
-    <slot></slot>
   </div>
 </template>
 
 <script>
-import CTabNav from './CTabNav'
-import CTabContent from './CTabContent'
+import CDistributor from './CDistributor'
 
 export default {
   name: 'CTabs',
   components: {
-    CTabNav,
-    CTabContent
+    CDistributor
+  },
+  provide () {
+    const tabs = {}
+    Object.defineProperty(tabs, 'activeTab', {
+      get: () => this.activeTabIndex
+    })
+    Object.defineProperty(tabs, 'fade', {
+      get: () => this.fade
+    })
+    return { tabs }
   },
   props: {
     fill: Boolean,
@@ -62,12 +56,17 @@ export default {
     addNavClasses: [String, Array, Object],
     addTabsWrapperClasses: [String, Array, Object],
     addTabsClasses: [String, Array, Object],
-    addTabClasses: [String, Array, Object]
+    addTabClasses: [String, Array, Object],
+    activeTab: Number
   },
   data () {
     return {
-      defaultSlotNodes: null,
-      activatedTab: null
+      activeTabIndex: this.activeTab
+    }
+  },
+  watch: {
+    activeTab (val) {
+      this.activeTabIndex = val
     }
   },
   computed: {
@@ -100,51 +99,21 @@ export default {
         }
       ]
     },
-    activeTab () {
-      return this.activatedTab || this.ctabInstances.filter(el => el.active)[0]
-    },
     gridClasses () {
       if (this.vertical === true) {
         return { navs: 'col-sm-4', content: 'col-sm-8'}
       } else {
         return this.vertical || {}
       }
-    },
-    ctabInstances () {
-      if (this.defaultSlotNodes) {
-        return this.defaultSlotNodes.map(node => {
-          const instance = node.componentInstance
-          if (instance && instance.$options._componentTag === 'CTab') {
-            return instance
-          }
-        }).filter(el => el)
-      } else {
-        return []
-      }
     }
   },
-  mounted () {
-    this.defaultSlotNodes = this.$slots.default
-  },
-  updated () {
-    this.defaultSlotNodes = this.$slots.default
-  },
   methods: {
-    tabClick (tab, key) {
-      if (!tab.disabled) {
-        this.activatedTab = tab
-        this.$emit('update:show', key)
-      }
+    changeTabTo (tab) {
+      this.activeTabIndex = tab
+      this.$emit('update:activeTab', tab)
     }
   }
 }
 </script>
 
-<style scoped>
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .3s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-</style>
+

src/components/tabs/CTabNav.vue

@@ -23,7 +23,6 @@ const defaultWrapper = mount(CTabs)
 //     default: [CTab, CTab, customTab]
 //   }
 // })
-
 const App = Vue.extend({
   components: { CTabs, CTab },
   render (h) {
@@ -44,8 +43,8 @@ const App = Vue.extend({
         }
       }, 
       [
-        h('CTab', { props: { active: true, title: 'tab1' }}, ['tab1 content']),
-        h('CTab', { props: { title: 'tab2' }}, ['tab2 content']),
+        h('CTab', { props: { title: 'tab1' }}, ['tab1 content']),
+        h('CTab', { props: { active: true, title: 'tab2' }}, ['tab2 content']),
         h('CTab', { props: { title: 'tab3' }}),
         h(
           'CTab',
@@ -63,6 +62,7 @@ const App = Vue.extend({
 })
 
 const customWrapper = mount(App)
+const tabsComponent = customWrapper.vm.$children[0]
 
 describe(ComponentName, () => {
   it('has a name', () => {
@@ -79,10 +79,14 @@ describe(ComponentName, () => {
     tabs.at(3).trigger('click')
     expect(customWrapper.find('.tab-pane').text()).toBe('tab1 content')
   })
-  it('changes tab on click', () => {
+  it('changes active tab corectly', () => {
     const tabs = customWrapper.findAll('.nav-item')
     tabs.at(2).trigger('click')
-    expect(customWrapper.find('.tab-pane').text()).toBe('')
+    expect(tabsComponent.activeTabIndex).toBe(2)
+    defaultWrapper.setProps({
+      activeTab: 1
+    })
+    expect(defaultWrapper.vm.activeTabIndex).toBe(1)
   })
   it('properly changes vertical classes', () => {
     defaultWrapper.setProps({ vertical: true })