fix(tab-bar): add a built-in scroller if the default slot is not a scroller (#313)

fixes #312

Author: tychenjiajun

components/tabs/TabBar.vue

@@ -4,7 +4,18 @@
     role="tablist"
     @MDCTabBar:activated="onActivated"
   >
-    <slot />
+    <slot v-if="$slots.default[0].tag.includes('m-tab-scroller')" />
+    <!-- todo: it doesn't work with <div class='mdc-tab-scroller'> but only work with our own m-tab-scroller component. This need to be enhanced. -->
+    <div
+      v-else
+      class="mdc-tab-scroller"
+    >
+      <div class="mdc-tab-scroller__scroll-area">
+        <div class="mdc-tab-scroller__scroll-content">
+          <slot />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -53,6 +64,7 @@ export default {
     }
   },
   mounted () {
+    console.log(this.$slots.default[0].tag)
     this.mdcTabBar = MDCTabBar.attachTo(this.$el)
     this.mdcTabBar.focusOnActivate = this.focusOnActivate
     this.mdcTabBar.useAutomaticActivation = this.useAutomaticActivation

components/tabs/TabIndicator.vue

@@ -15,7 +15,6 @@ import { MDCTabIndicator } from '@material/tab-indicator'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  name: 'TabIndicator',
   mixins: [baseComponentMixin, themeClassMixin],
   props: {
     fade: {

components/tabs/TabScroller.vue

@@ -13,7 +13,6 @@ import { MDCTabScroller } from '@material/tab-scroller'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  name: 'TabScroller',
   mixins: [baseComponentMixin, themeClassMixin],
   data () {
     return {