fix: QRouteTab count attribute missing QChip quasarframework#947

Author: rstoenescu

src/components/tab/QRouteTab.js

@@ -0,0 +1,53 @@
+import { RouterLinkMixin, routerLinkEvent, routerLinkEventName } from '../../utils/router-link'
+import TabMixin from './tab-mixin'
+
+export default {
+  name: 'q-route-tab',
+  mixins: [TabMixin, RouterLinkMixin],
+  watch: {
+    $route () {
+      this.checkIfSelected()
+    }
+  },
+  methods: {
+    select () {
+      this.$emit('click', this.name)
+      if (!this.disable) {
+        this.$el.dispatchEvent(routerLinkEvent)
+        this.selectTab(this.name)
+      }
+    },
+    checkIfSelected () {
+      this.$nextTick(() => {
+        if (this.$el.classList.contains('router-link-active') || this.$el.classList.contains('router-link-exact-active')) {
+          this.selectTab(this.name)
+        }
+      })
+    }
+  },
+  created () {
+    this.checkIfSelected()
+  },
+  render (h) {
+    return h('router-link', {
+      props: {
+        tag: 'div',
+        to: this.to,
+        replace: this.replace,
+        append: this.append,
+        event: routerLinkEventName
+      },
+      nativeOn: {
+        click: this.select
+      },
+      staticClass: 'q-tab column flex-center relative-position',
+      'class': this.classes,
+      directives: [{
+        name: 'ripple',
+        modifiers: {
+          mat: true
+        }
+      }]
+    }, this.__getTabContent(h))
+  }
+}

src/components/tab/QRouteTab.vue

@@ -0,0 +1,37 @@
+import TabMixin from './tab-mixin'
+
+export default {
+  name: 'q-tab',
+  mixins: [TabMixin],
+  props: {
+    default: Boolean
+  },
+  methods: {
+    select () {
+      this.$emit('click', this.name)
+      if (!this.disable) {
+        this.selectTab(this.name)
+      }
+    }
+  },
+  mounted () {
+    if (this.default && !this.disable) {
+      this.select()
+    }
+  },
+  render (h) {
+    return h('div', {
+      staticClass: 'q-tab column flex-center relative-position',
+      'class': this.classes,
+      on: {
+        click: this.select
+      },
+      directives: [{
+        name: 'ripple',
+        modifiers: {
+          mat: true
+        }
+      }]
+    }, this.__getTabContent(h))
+  }
+}

src/components/tab/QTab.js

@@ -1,5 +1,5 @@
-import QRouteTab from './QRouteTab.vue'
-import QTab from './QTab.vue'
+import QRouteTab from './QRouteTab'
+import QTab from './QTab'
 import QTabPane from './QTabPane'
 import QTabs from './QTabs.vue'
 

src/components/tab/QTab.vue

@@ -1,6 +1,12 @@
 import uid from '../../utils/uid'
+import { QIcon } from '../icon'
+import { QChip } from '../chip'
+import Ripple from '../../directives/ripple'
 
 export default {
+  directives: {
+    Ripple
+  },
   props: {
     label: String,
     icon: String,
@@ -54,5 +60,47 @@ export default {
         return 'display: none;'
       }
     }
+  },
+  methods: {
+    __getTabContent (h) {
+      const child = []
+
+      this.icon && child.push(h(QIcon, {
+        staticClass: 'q-tab-icon',
+        props: {
+          name: this.icon
+        }
+      }))
+
+      this.label && child.push(h('span', {
+        staticClass: 'q-tab-label',
+        domProps: {
+          innerHTML: this.label
+        }
+      }))
+
+      if (this.count) {
+        child.push(h(QChip, {
+          props: {
+            floating: true
+          }
+        }, [ this.count ]))
+      }
+      else if (this.alert) {
+        child.push(h('div', {
+          staticClass: 'q-dot'
+        }))
+      }
+
+      child.push(this.$slots.default)
+      if (this.$q.theme !== 'ios') {
+        child.push(h('div', {
+          staticClass: 'q-tabs-bar',
+          style: this.barStyle
+        }))
+      }
+
+      return child
+    }
   }
 }