Skip to content
Permalink
Browse files
fix(b-link): default new <nuxt-link> prop prefetch to null for …
…true tri-state prop (#5357)

Co-authored-by: Jacob Müller
  • Loading branch information
tmorehouse committed May 12, 2020
1 parent 101faab commit 3f41c91961c29988ba13ca11f4dc8f81810e761f
Showing 10 changed files with 110 additions and 78 deletions.
@@ -231,7 +231,8 @@
"description": "router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default"
},
"prefetch": {
"description": "nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'prefetch' to 'true' or 'false' will overwrite the default value of 'router.prefetchLinks'"
"description": "nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'prefetch' to 'true' or 'false' will overwrite the default value of 'router.prefetchLinks'",
"version": "2.15.0"
},
"noPrefetch": {
"description": "nuxt-link prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'no-prefetch' will disabled this feature for the specific link"
@@ -158,15 +158,18 @@ additional Nuxt.js specific props.
### `prefetch`

- type: `boolean`
- default: `undefined`
- availability: Nuxt.js 2.10.0+
- default: `null`
- availability: Nuxt.js 2.10.0+ and BootstrapVue 2.15.0+

To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within
the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to
`true` or `false` will overwrite the default value of `router.prefetchLinks` configured in the
`nuxt.config.js` configuration file.

**Note:** If you have are using a version of Nuxt.js `< 2.10.0`, then this prop will have no effect.
**Notes:**

- If you have are using a version of Nuxt.js `< 2.10.0`, then this prop will have no effect.
- Remember to `v-bind` the prop value (e.g. `:prefetch="true"` or `:prefetch="false"`).

Prefetching support requires
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
@@ -1,17 +1,17 @@
import Vue from '../../utils/vue'
import pluckProps from '../../utils/pluck-props'
import { mergeData } from 'vue-functional-data-merge'
import { getComponentConfig } from '../../utils/config'
import pluckProps from '../../utils/pluck-props'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import { clone } from '../../utils/object'
import { BLink, props as BLinkProps } from '../link/link'

const NAME = 'BBadge'

const linkProps = linkPropsFactory()
const linkProps = clone(BLinkProps)
delete linkProps.href.default
delete linkProps.to.default

export const props = {
...linkProps,
tag: {
type: String,
default: 'span'
@@ -23,7 +23,8 @@ export const props = {
pill: {
type: Boolean,
default: false
}
},
...linkProps
}

// @vue/component
@@ -2,10 +2,9 @@ import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import pluckProps from '../../utils/pluck-props'
import { htmlOrText } from '../../utils/html'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import { BLink, props as BLinkProps } from '../link/link'

export const props = {
...linkPropsFactory(),
text: {
type: String,
default: null
@@ -17,7 +16,8 @@ export const props = {
ariaCurrent: {
type: String,
default: 'location'
}
},
...BLinkProps
}

// @vue/component
@@ -6,14 +6,20 @@ import { concat } from '../../utils/array'
import { getComponentConfig } from '../../utils/config'
import { addClass, removeClass } from '../../utils/dom'
import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
import { keys } from '../../utils/object'
import { clone } from '../../utils/object'
import { toString } from '../../utils/string'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import { BLink, props as BLinkProps } from '../link/link'

// --- Constants --
// --- Constants ---

const NAME = 'BButton'

// --- Props ---

const linkProps = clone(BLinkProps)
delete linkProps.href.default
delete linkProps.to.default

const btnProps = {
block: {
type: Boolean,
@@ -55,12 +61,7 @@ const btnProps = {
}
}

const linkProps = linkPropsFactory()
delete linkProps.href.default
delete linkProps.to.default
const linkPropKeys = keys(linkProps)

export const props = { ...linkProps, ...btnProps }
export const props = { ...btnProps, ...linkProps }

// --- Helper methods ---

@@ -104,7 +105,7 @@ const computeClass = props => [
]

// Compute the link props to pass to b-link (if required)
const computeLinkProps = props => (isLink(props) ? pluckProps(linkPropKeys, props) : null)
const computeLinkProps = props => (isLink(props) ? pluckProps(linkProps, props) : null)

// Compute the attributes for a button
const computeAttrs = (props, data) => {
@@ -142,6 +143,7 @@ const computeAttrs = (props, data) => {
}
}

// --- Main component ---
// @vue/component
export const BButton = /*#__PURE__*/ Vue.extend({
name: NAME,
@@ -1,10 +1,11 @@
import Vue from '../../utils/vue'
import { requestAF } from '../../utils/dom'
import { clone } from '../../utils/object'
import attrsMixin from '../../mixins/attrs'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import { BLink, props as BLinkProps } from '../link/link'

export const props = linkPropsFactory()
export const props = clone(BLinkProps)

// @vue/component
export const BDropdownItem = /*#__PURE__*/ Vue.extend({
@@ -1,45 +1,17 @@
import Vue from '../../utils/vue'
import pluckProps from '../../utils/pluck-props'
import { concat } from '../../utils/array'
import { attemptBlur, attemptFocus } from '../../utils/dom'
import { isEvent, isFunction, isUndefined } from '../../utils/inspect'
import { isBoolean, isEvent, isFunction, isUndefined } from '../../utils/inspect'
import { computeHref, computeRel, computeTag, isRouterLink } from '../../utils/router'
import { omit } from '../../utils/object'
import attrsMixin from '../../mixins/attrs'
import listenersMixin from '../../mixins/listeners'
import normalizeSlotMixin from '../../mixins/normalize-slot'

/**
* The Link component is used in many other BV components
* As such, sharing its props makes supporting all its features easier
* However, some components need to modify the defaults for their own purpose
* Prefer sharing a fresh copy of the props to ensure mutations
* do not affect other component references to the props
*
* See: https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
*/
export const propsFactory = () => ({
href: {
type: String,
default: null
},
rel: {
type: String,
// Must be `null` if no value provided
default: null
},
target: {
type: String,
default: '_self'
},
active: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
// <router-link> specific props
// --- Props ---

// <router-link> specific props
export const routerLinkProps = {
to: {
type: [String, Object],
default: null
@@ -71,29 +43,61 @@ export const propsFactory = () => ({
routerTag: {
type: String,
default: 'a'
},
// <nuxt-link> specific prop(s)
}
}

// <nuxt-link> specific props
export const nuxtLinkProps = {
prefetch: {
type: Boolean
// Must be `undefined` to fall back to the value defined in the
type: Boolean,
// Must be `null` to fall back to the value defined in the
// `nuxt.config.js` configuration file for `router.prefetchLinks`
// default: undefined
// We convert `null` to `undefined`, so that Nuxt.js will use the
// compiled default. Vue treats `undefined` as default of `false`
// for Boolean props, so we must set it as `null` here to be a
// true tri-state prop
default: null
},
noPrefetch: {
type: Boolean,
default: false
}
})
}

export const props = propsFactory()
export const props = {
href: {
type: String,
default: null
},
rel: {
type: String,
// Must be `null` if no value provided
default: null
},
target: {
type: String,
default: '_self'
},
active: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
...routerLinkProps,
...nuxtLinkProps
}

// --- Main component ---
// @vue/component
export const BLink = /*#__PURE__*/ Vue.extend({
name: 'BLink',
// Mixin order is important!
mixins: [attrsMixin, listenersMixin, normalizeSlotMixin],
inheritAttrs: false,
props: propsFactory(),
props,
computed: {
computedTag() {
// We don't pass `this` as the first arg as we need reactivity of the props
@@ -111,9 +115,16 @@ export const BLink = /*#__PURE__*/ Vue.extend({
return computeHref({ to: this.to, href: this.href }, this.computedTag)
},
computedProps() {
const props = this.isRouterLink ? { ...this.$props, tag: this.routerTag } : {}
// Ensure the `href` prop does not exist for router links
return this.computedHref ? props : omit(props, ['href'])
const prefetch = this.prefetch
return this.isRouterLink
? {
...pluckProps({ ...routerLinkProps, ...nuxtLinkProps }, this.$props),
// Coerce `prefetch` value `null` to be `undefined`
prefetch: isBoolean(prefetch) ? prefetch : undefined,
// Pass `router-tag` as `tag` prop
tag: this.routerTag
}
: {}
},
computedAttrs() {
const {
@@ -1,14 +1,20 @@
import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import Vue from '../../utils/vue'
import pluckProps from '../../utils/pluck-props'
import { arrayIncludes } from '../../utils/array'
import { getComponentConfig } from '../../utils/config'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import { clone } from '../../utils/object'
import { BLink, props as BLinkProps } from '../link/link'

// --- Constants ---

const NAME = 'BListGroupItem'

const actionTags = ['a', 'router-link', 'button', 'b-link']
const linkProps = linkPropsFactory()

// --- Props ---

const linkProps = clone(BLinkProps)
delete linkProps.href.default
delete linkProps.to.default

@@ -31,6 +37,8 @@ export const props = {
},
...linkProps
}

// --- Main component ---
// @vue/component
export const BListGroupItem = /*#__PURE__*/ Vue.extend({
name: NAME,
@@ -1,9 +1,13 @@
import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import { BLink, propsFactory as linkPropsFactory } from '../link/link'
import Vue from '../../utils/vue'
import { clone } from '../../utils/object'
import { BLink, props as BLinkProps } from '../link/link'

// --- Props ---

export const props = linkPropsFactory()
export const props = clone(BLinkProps)

// --- Main component ---
// @vue/component
export const BNavItem = /*#__PURE__*/ Vue.extend({
name: 'BNavItem',
@@ -1,9 +1,10 @@
import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import Vue from '../../utils/vue'
import pluckProps from '../../utils/pluck-props'
import { BLink, propsFactory } from '../link/link'
import { clone } from '../../utils/object'
import { BLink, props as BLinkProps } from '../link/link'

const linkProps = propsFactory()
const linkProps = clone(BLinkProps)
linkProps.href.default = undefined
linkProps.to.default = undefined

0 comments on commit 3f41c91

Please sign in to comment.