feat: router link components improvements (#1651)

* fix(MdTab): exact router fix exact router for active class fix #1644 * fix(MdList): non-exact router active style keep non-exact list item active when matched * fix(MdBottomBar router): elegant router with active class better router active with class instead of comparing `to` prop * fix(MdTabs): elegant router with active class better router active with class instead of comparing `to` prop * fix(MdBottomBar): fix bugs prevent active bar item directly in sync route mode * docs(WithRouter): discriptions about working with vue router * fix(MdTabs): better setIndicatorStyles performance with throttling * fix(MdTabs): fix bugs * docs(TabRouter): Better example Remove tabs in tabs because that's a bad idea * docs(TabRouter): remove unused codes * feat(MdSteppers): elegant router with active class better router active with class instead of comparing `to` prop * docs(WithRouter): add md-step * feat(MdStep): support all router-link props * refactor(MdThrottling): reduce duplicated code for getting options * fix(MdThrottling): typo * fix(routes): doc production mapRoutes method replace string * refactor(MdButton): lint complexity
vuematerial · Jul 27, 2018 · fee1503 · fee1503
1 parent 2b675c9
commit fee1503
Show file tree

Hide file tree

Showing 21 changed files with 280 additions and 205 deletions.
diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
@@ -52,6 +52,9 @@ export default {
     title: 'Themes - Advanced',
     nav: 'Advanced'
   },
+  withRouter: {
+    title: 'Work with Vue Router'
+  },
   components: {
     title: 'Components',
   },

diff --git a/docs/app/pages/Components/BottomBar/examples/BarRouter.vue b/docs/app/pages/Components/BottomBar/examples/BarRouter.vue
@@ -2,19 +2,26 @@
   <div>
     <div class="phone-viewport">
       <md-bottom-bar md-sync-route>
-        <md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
       </md-bottom-bar>
     </div>
 
     <div class="phone-viewport">
       <md-bottom-bar class="md-accent" md-sync-route>
-        <md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
         <md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
       </md-bottom-bar>
     </div>
+
+    <div class="phone-viewport">
+      <md-bottom-bar class="md-accent" md-sync-route>
+        <md-bottom-bar-item to="/components/bottom-bar/posts/1" md-label="Post 1" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
+        <md-bottom-bar-item to="/components/bottom-bar/posts/2" md-label="Post 2" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
+      </md-bottom-bar>
+    </div>
   </div>
 </template>
 
@@ -34,4 +41,8 @@
     border: 1px solid rgba(#000, .26);
     background: rgba(#000, .06);
   }
+
+  .md-bottom-bar .md-bottom-bar-item.router-link-active {
+    text-shadow: 0 0 5px;
+  }
 </style>
diff --git a/docs/app/pages/Components/List/examples/ListTypes.vue b/docs/app/pages/Components/List/examples/ListTypes.vue
@@ -4,8 +4,12 @@
       <md-list-item>Plain Text</md-list-item>
       <md-list-item @click="alert">Button</md-list-item>
       <md-list-item href="https://google.com" target="_blank">Link</md-list-item>
-      <md-list-item to="/components/list/router">Link Router</md-list-item>
-      <md-list-item to="/components/list">Link Router Active Color</md-list-item>
+      <md-list-item to="/components/list" exact>Router <code>/</code></md-list-item>
+      <md-list-item to="/components/list/router">Router <code>/router/**</code></md-list-item>
+    </md-list>
+    <md-list>
+      <md-list-item to="/components/list/router/1">Router <code>/router/1</code></md-list-item>
+      <md-list-item to="/components/list/router/2">Router <code>/router/2</code></md-list-item>
     </md-list>
   </div>
 </template>
@@ -29,4 +33,8 @@ export default {
     vertical-align: top;
     border: 1px solid rgba(#000, .12);
   }
+
+  .md-list .router-link-active {
+    text-shadow: 0 0 5px;
+  }
 </style>
diff --git a/docs/app/pages/Components/Steppers/examples/StepperRoute.vue b/docs/app/pages/Components/Steppers/examples/StepperRoute.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <md-steppers md-sync-route md-dynamic-height>
-      <md-step id="first" to="/components/steppers/first" md-label="First Step">
+      <md-step id="first" to="/components/steppers" exact md-label="First Step">
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
@@ -12,13 +12,21 @@
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
+        <md-list>
+          <md-list-item to="/components/steppers/second/sub1">Subpage 1</md-list-item>
+          <md-list-item to="/components/steppers/second/sub2">Subpage 2</md-list-item>
+        </md-list>
       </md-step>
 
       <md-step id="third" to="/components/steppers/third" md-label="Third Step">
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
       </md-step>
     </md-steppers>
+    <md-list>
+      <md-list-item to="/components/steppers/second/sub1">Subpage 2-1</md-list-item>
+      <md-list-item to="/components/steppers/second/sub2">Subpage 2-2</md-list-item>
+    </md-list>
   </div>
 </template>
 

diff --git a/docs/app/pages/Components/Tabs/examples/TabContent.vue b/docs/app/pages/Components/Tabs/examples/TabContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <md-tabs md-sync-route>
-      <md-tab id="tab-home" md-label="Home" to="/components/tabs/home">
+      <md-tab id="tab-home" md-label="Home" to="/components/tabs" exact>
         Home Tab
       </md-tab>
 

diff --git a/docs/app/pages/Components/Tabs/examples/TabRouter.vue b/docs/app/pages/Components/Tabs/examples/TabRouter.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
     <md-tabs md-sync-route>
-      <md-tab id="tab-home" md-label="Home" to="/components/tabs/home"></md-tab>
-      <md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages"></md-tab>
+      <md-tab id="tab-home" md-label="Home" to="/components/tabs" exact></md-tab>
+      <md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages">
+        <md-list>
+          <md-list-item to="/components/tabs/pages/1">Go to Subpage 1</md-list-item>
+          <md-list-item to="/components/tabs/pages/2">Go to Subpage 2</md-list-item>
+        </md-list>
+      </md-tab>
       <md-tab id="tab-posts" md-label="Posts" to="/components/tabs/posts"></md-tab>
-      <md-tab id="tab-settings" md-label="Settings" to="/components/tabs/settings"></md-tab>
+      <md-tab id="tab-favorites" md-label="Favorites" to="/components/tabs/favorites"></md-tab>
       <md-tab id="tab-disabled" md-label="Disabled" md-disabled></md-tab>
     </md-tabs>
+    <h2>Mirror Subpage</h2>
+    <md-tabs md-sync-route>
+      <md-tab id="tab-pages-1" md-label="Pages 1" to="/components/tabs/pages/1">Subpage 1</md-tab>
+      <md-tab id="tab-pages-2" md-label="Pages 2" to="/components/tabs/pages/2">Subpage 2</md-tab>
+    </md-tabs>
   </div>
 </template>
 
@@ -15,3 +25,9 @@
     name: 'TabRouter'
   }
 </script>
+
+<style lang="scss" scoped>
+  .md-tabs /deep/ .md-tabs-navigation .md-button.router-link-active {
+    text-shadow: 0 0 5px;
+  }
+</style>
diff --git a/docs/app/pages/WithRouter.vue b/docs/app/pages/WithRouter.vue
@@ -0,0 +1,35 @@
+<template>
+  <page-container centered :title="$t('pages.withRouter.title')">
+    <div class="page-container-section">
+      <h2 class="md-headline">Vue Material Router Link Components</h2>
+      <p>Vue router supported with <code><router-link to="/components/tabs">md-tab</router-link></code>, <code><router-link to="/components/list">md-list-item</router-link></code>, <code><router-link to="/components/bottom-bar">md-bottom-bar-item</router-link></code> and <code><router-link to="/components/steppers">md-step</router-link></code> so far.</p>
+      <p>Vue Material router link components will be auto-generated with the prop <code>to</code>. All <a href="https://router.vuejs.org/en/api/router-link.html"><code>router-link</code> props</a> except <code>tag</code> accepted.</p>
+      <h2 class="md-headline">Work with Router option <code>linkActiveClass</code></h2>
+      <p>Since Vue Router doesn't expose <code>isSameRoute</code> and <code>isIncludedRoute</code> methods, Vue Material cannot detect which links are active. Vue Material inject <code>linkActiveClass</code> with an extra active class to interact with router. Therefore, if you want to using an custom class for active link as default, you need to setup like this:</p>
+      <code-example title="Individual components">
+        const linkActiveClass = 'my-link-active-class'
+
+        // pass custom class to Vue Material
+        Vue.material.router.linkActiveClass = linkActiveClass
+
+        // pass custom class to Vue Router
+        router = new VueRouter({
+          routes,
+          linkActiveClass
+        })
+
+        const app = new Vue({
+          name: 'Root',
+          router,
+        })
+
+      </code-example>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  export default {
+    name: 'WithRouter'
+  }
+</script>
diff --git a/docs/app/routes.js b/docs/app/routes.js
@@ -45,7 +45,7 @@ export const routes = [
     page: 'Components/Datepicker/Datepicker.vue'
   },
   {
-    path: '/components/steppers/:optional?',
+    path: '/components/steppers/:optional?/:sub?',
     name: 'components/steppers',
     page: 'Components/Steppers/Steppers.vue'
   },
@@ -70,12 +70,12 @@ export const routes = [
     page: 'Components/Snackbar/Snackbar.vue'
   },
   {
-    path: '/components/tabs/:optional?',
+    path: '/components/tabs/:optional?/:sub?',
     name: 'components/tabs',
     page: 'Components/Tabs/Tabs.vue'
   },
   {
-    path: '/components/bottom-bar/:optional?',
+    path: '/components/bottom-bar/:optional?/:sub?',
     name: 'components/bottom-bar',
     page: 'Components/BottomBar/BottomBar.vue'
   },
@@ -207,7 +207,7 @@ export const routes = [
     page: 'Components/File/File.vue'
   },
   {
-    path: '/components/list/:optional?',
+    path: '/components/list/:optional?/:sub?',
     name: 'components/list',
     page: 'Components/List/List.vue'
   },
@@ -262,6 +262,11 @@ export const routes = [
     name: 'ui-elements/typography',
     page: 'UiElements/Typography/Typography.vue'
   },
+  {
+    path: '/with-router',
+    name: 'with-router',
+    page: 'WithRouter.vue'
+  },
   {
     path: '*',
     name: 'error',
@@ -274,7 +279,7 @@ export const mapRoutes = () => {
 
   routes.forEach(route => {
     if (!route.redirect && route.path !== '*') {
-      mappedRoutes.push(route.path.replace('/:optional?', ''))
+      mappedRoutes.push(route.path.replace('/:optional?/:sub?', ''))
     }
   })
 

diff --git a/docs/app/template/MainNavContent.vue b/docs/app/template/MainNavContent.vue
@@ -14,6 +14,8 @@
       <router-link to="/themes/advanced">{{ $t('pages.themeAdvanced.nav') }}</router-link>
     </div>
 
+    <router-link to="/with-router">{{ $t('pages.withRouter.title') }}</router-link>
+
     <router-link to="/ui-elements">{{ $t('pages.uiElements.title') }}</router-link>
     <div class="main-nav-level">
       <router-link to="/ui-elements/elevation">{{ $t('pages.elevation.title') }}</router-link>

diff --git a/src/components/MdBottomBar/MdBottomBar.vue b/src/components/MdBottomBar/MdBottomBar.vue
@@ -25,13 +25,16 @@
         ...MdPropValidator('md-type', ['fixed', 'shift'])
       }
     },
-    data: () => ({
-      MdBottomBar: {
-        mouseEvent: null,
-        activeItem: null,
-        items: {}
+    data () {
+      return {
+        MdBottomBar: {
+          mouseEvent: null,
+          activeItem: null,
+          items: {},
+          syncRoute: this.mdSyncRoute
+        }
       }
-    }),
+    },
     provide () {
       return {
         MdBottomBar: this.MdBottomBar
@@ -50,21 +53,12 @@
     watch: {
       activeItem () {
         this.$emit('md-changed', this.activeItem)
+      },
+      mdSyncRoute () {
+        this.MdBottomBar.syncRoute = mdSyncRoute
       }
     },
     methods: {
-      setupWatchers () {
-        if (this.mdSyncRoute) {
-          this.$watch('$route', {
-            deep: true,
-            handler () {
-              if (this.mdSyncRoute) {
-                this.setActiveItemByRoute()
-              }
-            }
-          })
-        }
-      },
       hasActiveItem () {
         return this.MdBottomBar.activeItem || this.mdActiveItem
       },
@@ -84,47 +78,16 @@
         } else {
           this.MdBottomBar.activeItem = this.mdActiveItem
         }
-      },
-      setActiveItemByRoute () {
-        const { items, keys } = this.getItemsAndKeys()
-        let tabIndex = null
-
-        if (this.$router) {
-          keys.forEach((key, index) => {
-            const item = items[key]
-            const toProp = item.props.to
-
-            if (toProp && toProp === this.$route.path) {
-              tabIndex = index
-            }
-          })
-        }
-
-        if (!this.hasActiveItem()) {
-          if (keys[tabIndex]) {
-            this.MdBottomBar.activeItem = keys[tabIndex]
-          } else {
-            this.MdBottomBar.activeItem = keys[0]
-          }
-        } else if (keys[tabIndex]) {
-          this.MdBottomBar.activeItem = keys[tabIndex]
-        }
       }
     },
     created () {
       this.MdBottomBar.type = this.mdType
     },
     mounted () {
       this.$nextTick().then(() => {
-        if (this.mdSyncRoute) {
-          this.setActiveItemByRoute()
-        } else {
+        if (!this.mdSyncRoute) {
           this.setActiveItemByIndex(0)
         }
-
-        window.setTimeout(() => {
-          this.setupWatchers()
-        }, 100)
       })
 
     }

diff --git a/src/components/MdBottomBar/MdBottomBarItem.vue b/src/components/MdBottomBar/MdBottomBarItem.vue
@@ -20,20 +20,20 @@
 
 <script>
   import MdAssetIcon from 'core/mixins/MdAssetIcon/MdAssetIcon'
+  import MdRouterLink from 'core/mixins/MdRouterLink/MdRouterLink'
   import MdUuid from 'core/utils/MdUuid'
   import MdRouterLinkProps from 'core/utils/MdRouterLinkProps'
 
   const ignoredProps = ['id', 'mdLabel', 'mdIcon', 'mdDisabled']
 
   export default {
     name: 'MdBottomBarItem',
-    mixins: [MdAssetIcon],
+    mixins: [MdAssetIcon, MdRouterLink],
     props: {
       id: {
         type: String,
         default: () => 'md-bottom-bar-item-' + MdUuid()
       },
-      to: null,
       mdLabel: String,
       mdIcon: String,
       mdDisabled: Boolean
@@ -101,7 +101,9 @@
         })
       },
       setActiveItem ($event) {
-        this.MdBottomBar.activeItem = this.id
+        if (!this.MdBottomBar.syncRoute) {
+          this.MdBottomBar.activeItem = this.id
+        }
 
         if (this.MdBottomBar.type === 'shift') {
           this.MdBottomBar.mouseEvent = $event