From 8e88526450d63688f476c8e3caa5cf30b3d98d20 Mon Sep 17 00:00:00 2001 From: Dustin Wheeler Date: Thu, 30 Apr 2020 01:01:51 -0400 Subject: [PATCH] feat(link): add router-link-inactive --- docs/api/README.md | 7 +++++++ examples/inactive-links/app.js | 30 ++++++++++++++++++++++++++++++ examples/inactive-links/index.html | 14 ++++++++++++++ examples/index.html | 1 + flow/declarations.js | 1 + src/components/link.js | 8 ++++++++ test/e2e/specs/inactive-links.js | 28 ++++++++++++++++++++++++++++ 7 files changed, 89 insertions(+) create mode 100644 examples/inactive-links/app.js create mode 100644 examples/inactive-links/index.html create mode 100644 test/e2e/specs/inactive-links.js diff --git a/docs/api/README.md b/docs/api/README.md index fc30b9e6f..de723981b 100644 --- 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 new file mode 100644 index 000000000..8656ff24f --- /dev/null +++ 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: '

Home

' } +const About = { template: '

About

' } + +const router = new VueRouter({ + mode: 'history', + base: __dirname, + routes: [ + { path: '/', component: Home }, + { path: '/about', component: About } + ] +}) + +new Vue({ + router, + template: ` +
+

Inactive Links

+ + +
+ ` +}).$mount('#app') diff --git a/examples/inactive-links/index.html b/examples/inactive-links/index.html new file mode 100644 index 000000000..b99f5ee5e --- /dev/null +++ b/examples/inactive-links/index.html @@ -0,0 +1,14 @@ + + + +← Examples index +
+ + diff --git a/examples/index.html b/examples/index.html index c0ee5bc16..33acf4989 100644 --- a/examples/index.html +++ b/examples/index.html @@ -14,6 +14,7 @@

Vue Router Examples

  • Named Views
  • Route Matching
  • Active Links
    • +
  • Inactive Links
  • Redirect
  • Route Props
  • Route Alias
    • diff --git a/flow/declarations.js b/flow/declarations.js index 942aa73bf..f82ffd091 100644 --- 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 index c0f22503b..2b5d304f3 100644 --- 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,6 +49,8 @@ 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 @@ -55,12 +58,16 @@ export default { 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 new file mode 100644 index 000000000..155924c5f --- /dev/null +++ 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') + } + } +}