feat(link): add router-link-inactive

mdwheele · mdwheele · commit 8e88526450d6 · 2020-04-30T01:24:54.000-04:00
diff --git a/docs/api/README.md b/docs/api/README.md
@@ -133,6 +133,13 @@ If you add a `target="_blank"` to your `a` element, you must omit the `@click="n
 
   Configure the active CSS class applied when the link is active. Note the default value can also be configured globally via the `linkActiveClass` router constructor option.
 
+### inactive-class
+
+- type: `string`
+- default: `"router-link-inactive"`
+
+  Configure the CSS class applied when the link is inactive. Note the default value can also be configured globally via the `linkInactiveClass` router constructor option.
+
 ### exact
 
 - type: `boolean`
diff --git a/examples/inactive-links/app.js b/examples/inactive-links/app.js
@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div><h2>Home</h2></div>' }
+const About = { template: '<div><h2>About</h2></div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+    { path: '/about', component: About }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Inactive Links</h1>
+      <ul>
+        <li><router-link to="/" exact>/</router-link></li>
+        <li><router-link to="/about">/about</router-link></li>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/inactive-links/index.html b/examples/inactive-links/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<style>
+a.router-link-active, li.router-link-active a {
+  color: #f66;
+}
+a.router-link-inactive, li.router-link-inactive a {
+  color: #66f;
+}
+</style>
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/inactive-links.js"></script>
diff --git a/examples/index.html b/examples/index.html
@@ -14,6 +14,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="named-views">Named Views</a></li>
     <li><a href="route-matching">Route Matching</a></li>
     <li><a href="active-links">Active Links</a></li>
+    <li><a href="inactive-links">Inactive Links</a></li>
     <li><a href="redirect">Redirect</a></li>
     <li><a href="route-props">Route Props</a></li>
     <li><a href="route-alias">Route Alias</a></li>
diff --git a/flow/declarations.js b/flow/declarations.js
@@ -37,6 +37,7 @@ declare type RouterOptions = {
   base?: string;
   linkActiveClass?: string;
   linkExactActiveClass?: string;
+  linkInactiveClass?: string;
   parseQuery?: (query: string) => Object;
   stringifyQuery?: (query: Object) => string;
   scrollBehavior?: (
diff --git a/src/components/link.js b/src/components/link.js
@@ -26,6 +26,7 @@ export default {
     append: Boolean,
     replace: Boolean,
     activeClass: String,
+    inactiveClass: String,
     exactActiveClass: String,
     ariaCurrentValue: {
       type: String,
@@ -48,19 +49,25 @@ export default {
     const classes = {}
     const globalActiveClass = router.options.linkActiveClass
     const globalExactActiveClass = router.options.linkExactActiveClass
+    const globalInactiveClass = router.options.linkInactiveClass
+
     // Support global empty active class
     const activeClassFallback =
       globalActiveClass == null ? 'router-link-active' : globalActiveClass
     const exactActiveClassFallback =
       globalExactActiveClass == null
         ? 'router-link-exact-active'
         : globalExactActiveClass
+    const inactiveClassFallback =
+      globalInactiveClass == null ? 'router-link-inactive' : globalInactiveClass
     const activeClass =
       this.activeClass == null ? activeClassFallback : this.activeClass
     const exactActiveClass =
       this.exactActiveClass == null
         ? exactActiveClassFallback
         : this.exactActiveClass
+    const inactiveClass =
+      this.inactiveClass == null ? inactiveClassFallback : this.inactiveClass
 
     const compareTarget = route.redirectedFrom
       ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
@@ -70,6 +77,7 @@ export default {
     classes[activeClass] = this.exact
       ? classes[exactActiveClass]
       : isIncludedRoute(current, compareTarget)
+    classes[inactiveClass] = !classes[activeClass]
 
     const ariaCurrentValue = classes[exactActiveClass] ? this.ariaCurrentValue : null
 
diff --git a/test/e2e/specs/inactive-links.js b/test/e2e/specs/inactive-links.js
@@ -0,0 +1,28 @@
+const bsStatus = require('../browserstack-send-status')
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['history', 'inactive', 'router-link'],
+
+  'inactive links': function (browser) {
+    browser
+      .url('http://localhost:8080/inactive-links/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 2)
+      // assert correct href with base
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/inactive-links/')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/inactive-links/about')
+      .assert.containsText('.view', 'Home')
+
+    assertInactiveLinks(1, 2)
+    assertInactiveLinks(2, 1)
+
+    browser.end()
+
+    function assertInactiveLinks (n, inactive) {
+      browser.click(`li:nth-child(${n}) a`)
+      browser.assert.cssClassPresent(`li:nth-child(${inactive}) a`, 'router-link-inactive')
+    }
+  }
+}
