+251
-142
lines changedFilter options
+251
-142
lines changed Original file line number Diff line number Diff line change
@@ -197,44 +197,49 @@
197 197
"active": {
198 198
"description": "When set to 'true', places the component in the active state with active styling"
199 199
},
200 +
"href": {
201 +
"description": "<b-link> prop: Denotes the target URL of the link for standard a links"
202 +
},
200 203
"rel": {
201 -
"description": "Sets the 'rel' attribute on the rendered link"
204 +
"description": "<b-link> prop: Sets the 'rel' attribute on the rendered link"
202 205
},
203 206
"target": {
204 -
"description": "Sets the 'target' attribute on the rendered link"
205 -
},
206 -
"href": {
207 -
"description": "Denotes the target URL of the link for standard a links"
207 +
"description": "<b-link> prop: Sets the 'target' attribute on the rendered link"
208 208
},
209 209
"to": {
210 -
"description": "router-link prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
210 +
"description": "<router-link> prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
211 211
},
212 212
"replace": {
213 -
"description": "router-link prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record"
213 +
"description": "<router-link> prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record"
214 214
},
215 215
"append": {
216 -
"description": "router-link prop: Setting append prop always appends the relative path to the current path"
216 +
"description": "<router-link> prop: Setting append prop always appends the relative path to the current path"
217 217
},
218 218
"exact": {
219 -
"description": "router-link prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route"
219 +
"description": "<router-link> prop: The default active class matching behavior is inclusive match. Setting this prop forces the mode to exactly match the route"
220 220
},
221 221
"activeClass": {
222 -
"description": "router-link prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'"
222 +
"description": "<router-link> prop: Configure the active CSS class applied when the link is active. Typically you will want to set this to class name 'active'"
223 223
},
224 224
"exactActiveClass": {
225 -
"description": "router-link prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'"
225 +
"description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'"
226 226
},
227 227
"routerTag": {
228 -
"description": "router-link prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value"
228 +
"description": "<router-link> prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value"
229 229
},
230 230
"event": {
231 -
"description": "router-link prop: Specify the event that triggers the link. In most cases you should leave this as the default"
231 +
"description": "<router-link> prop: Specify the event that triggers the link. In most cases you should leave this as the default"
232 232
},
233 233
"prefetch": {
234 -
"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'",
234 +
"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'",
235 235
"version": "2.15.0"
236 236
},
237 237
"noPrefetch": {
238 -
"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"
238 +
"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"
239 +
},
240 +
"routerComponentName": {
241 +
"description": "<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only `<router-link>` specific props are passed to the component)",
242 +
"version": "2.15.0",
243 +
"settings": true
239 244
}
240 245
}
Original file line number Diff line number Diff line change
@@ -10,7 +10,8 @@
10 10
In the following sections, we are using the `<b-link>` component to render router links. `<b-link>`
11 11
is the building block of most of BootstrapVue's _actionable_ components. You could use any other
12 12
component that supports link generation such as [`<b-link>`](/docs/components/link),
13 -
[`<b-button>`](/docs/components/button), [`<b-breadcrumb-item>`](/docs/components/breadcrumb),
13 +
[`<b-button>`](/docs/components/button), [`<b-avatar>`](/docs/components/avatar),
14 +
[`<b-breadcrumb-item>`](/docs/components/breadcrumb),
14 15
[`<b-list-group-item>`](/docs/components/list-group), [`<b-nav-item>`](/docs/components/nav),
15 16
[`<b-dropdown-item>`](/docs/components/dropdown), and
16 17
[`<b-pagination-nav>`](/docs/components/pagination-nav). Note that not all props are available on
@@ -203,3 +204,32 @@ disabled this feature for the specific link.
203 204
**Note:** If you have prefetching disabled in your `nuxt.config.js` configuration
204 205
(`router: { prefetchLinks: false }`), or are using a version of Nuxt.js `< 2.4.0`, then this prop
205 206
will have no effect.
207 + 208 +
## Third-party router link support
209 + 210 +
<span class="badge badge-info small">v2.15.0+</span>
211 + 212 +
BootstrapVue auto detects using `<router-link>` and `<nuxt-link>` link components. Some 3rd party
213 +
frameworks also provide customized versions of `<router-link>`, such as
214 +
[Gridsome's `<g-link>` component](https://gridsome.org/docs/linking/). BootstrapVue can support
215 +
these third party `<router-link>` compatible components via the use of the `router-component-name`
216 +
prop. All `vue-router` props (excluding `<nuxt-link>` specific props) will be passed to the
217 +
specified router link component.
218 + 219 +
**Notes:**
220 + 221 +
- The 3rd party component will only be used when the `to` prop is set.
222 +
- Not all 3rd party components support all props supported by `<router-link>`, nor do not support
223 +
fully qualified domain name URLs, nor hash only URLs. Refer to the 3rd party component
224 +
documentation for details.
225 + 226 +
### `router-component-name`
227 + 228 +
- type: `string`
229 +
- default: `undefined`
230 +
- availability: BootstrapVue 2.15.0+
231 + 232 +
Set this prop to the name of the `<router-link>` compatible component, e.g. `'g-link'` for
233 +
[Gridsome](https://gridsome.org/).
234 + 235 +
If left at the default, BootstrapVue will automatically select `<router-link>` or `<nuxt-link>`.
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ import pluckProps from '../../utils/pluck-props'
3 3
import { getComponentConfig } from '../../utils/config'
4 4
import { isNumber, isString, isUndefinedOrNull } from '../../utils/inspect'
5 5
import { toFloat } from '../../utils/number'
6 +
import { omit } from '../../utils/object'
7 +
import { isLink } from '../../utils/router'
6 8
import { BButton } from '../button/button'
7 9
import { BLink, props as BLinkProps } from '../link/link'
8 10
import { BIcon } from '../../icons/icon'
@@ -25,23 +27,7 @@ const DEFAULT_SIZES = {
25 27
}
26 28 27 29
// --- Props ---
28 -
const linkProps = pluckProps(
29 -
[
30 -
'href',
31 -
'rel',
32 -
'target',
33 -
'disabled',
34 -
'to',
35 -
'append',
36 -
'replace',
37 -
'activeClass',
38 -
'exact',
39 -
'exactActiveClass',
40 -
'prefetch',
41 -
'noPrefetch'
42 -
],
43 -
BLinkProps
44 -
)
30 +
const linkProps = omit(BLinkProps, ['active', 'event', 'routerTag'])
45 31 46 32
const props = {
47 33
src: {
@@ -208,14 +194,14 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
208 194
fontStyle,
209 195
marginStyle,
210 196
computedSize: size,
211 -
button: isButton,
197 +
button,
212 198
buttonType: type,
213 199
badge,
214 200
badgeVariant,
215 201
badgeStyle
216 202
} = this
217 -
const isBLink = !isButton && (this.href || this.to)
218 -
const tag = isButton ? BButton : isBLink ? BLink : 'span'
203 +
const link = !button && isLink(this)
204 +
const tag = button ? BButton : link ? BLink : 'span'
219 205
const alt = this.alt || null
220 206
const ariaLabel = this.ariaLabel || null
221 207
@@ -261,7 +247,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
261 247
staticClass: CLASS_NAME,
262 248
class: {
263 249
// We use badge styles for theme variants when not rendering `BButton`
264 -
[`badge-${variant}`]: !isButton && variant,
250 +
[`badge-${variant}`]: !button && variant,
265 251
// Rounding/Square
266 252
rounded: rounded === true,
267 253
[`rounded-${rounded}`]: rounded && rounded !== true,
@@ -270,8 +256,8 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
270 256
},
271 257
style: { width: size, height: size, ...marginStyle },
272 258
attrs: { 'aria-label': ariaLabel || null },
273 -
props: isButton ? { variant, disabled, type } : isBLink ? pluckProps(linkProps, this) : {},
274 -
on: isBLink || isButton ? { click: this.onClick } : {}
259 +
props: button ? { variant, disabled, type } : link ? pluckProps(linkProps, this) : {},
260 +
on: button || link ? { click: this.onClick } : {}
275 261
}
276 262 277 263
return h(tag, componentData, [$content, $badge])
@@ -2,12 +2,17 @@ import Vue from '../../utils/vue'
2 2
import pluckProps from '../../utils/pluck-props'
3 3
import { mergeData } from 'vue-functional-data-merge'
4 4
import { getComponentConfig } from '../../utils/config'
5 -
import { clone } from '../../utils/object'
5 +
import { omit } from '../../utils/object'
6 +
import { isLink } from '../../utils/router'
6 7
import { BLink, props as BLinkProps } from '../link/link'
7 8 9 +
// --- Constants ---
10 + 8 11
const NAME = 'BBadge'
9 12 10 -
const linkProps = clone(BLinkProps)
13 +
// --- Props ---
14 + 15 +
const linkProps = omit(BLinkProps, ['event', 'routerTag'])
11 16
delete linkProps.href.default
12 17
delete linkProps.to.default
13 18
@@ -27,14 +32,15 @@ export const props = {
27 32
...linkProps
28 33
}
29 34 35 +
// --- Main component ---
30 36
// @vue/component
31 37
export const BBadge = /*#__PURE__*/ Vue.extend({
32 38
name: NAME,
33 39
functional: true,
34 40
props,
35 41
render(h, { props, data, children }) {
36 -
const isBLink = props.href || props.to
37 -
const tag = isBLink ? BLink : props.tag
42 +
const link = isLink(props)
43 +
const tag = link ? BLink : props.tag
38 44 39 45
const componentData = {
40 46
staticClass: 'badge',
@@ -46,7 +52,7 @@ export const BBadge = /*#__PURE__*/ Vue.extend({
46 52
disabled: props.disabled
47 53
}
48 54
],
49 -
props: isBLink ? pluckProps(linkProps, props) : {}
55 +
props: link ? pluckProps(linkProps, props) : {}
50 56
}
51 57 52 58
return h(tag, mergeData(data, componentData), children)
@@ -1,7 +1,8 @@
1 -
import Vue from '../../utils/vue'
2 1
import { mergeData } from 'vue-functional-data-merge'
2 +
import Vue from '../../utils/vue'
3 3
import pluckProps from '../../utils/pluck-props'
4 4
import { htmlOrText } from '../../utils/html'
5 +
import { omit } from '../../utils/object'
5 6
import { BLink, props as BLinkProps } from '../link/link'
6 7 7 8
export const props = {
@@ -17,7 +18,7 @@ export const props = {
17 18
type: String,
18 19
default: 'location'
19 20
},
20 -
...BLinkProps
21 +
...omit(BLinkProps, ['event', 'routerTag'])
21 22
}
22 23 23 24
// @vue/component
@@ -4,10 +4,10 @@ import KeyCodes from '../../utils/key-codes'
4 4
import pluckProps from '../../utils/pluck-props'
5 5
import { concat } from '../../utils/array'
6 6
import { getComponentConfig } from '../../utils/config'
7 -
import { addClass, removeClass } from '../../utils/dom'
7 +
import { addClass, isTag, removeClass } from '../../utils/dom'
8 8
import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
9 -
import { clone } from '../../utils/object'
10 -
import { toString } from '../../utils/string'
9 +
import { omit } from '../../utils/object'
10 +
import { isLink as isLinkStrict } from '../../utils/router'
11 11
import { BLink, props as BLinkProps } from '../link/link'
12 12 13 13
// --- Constants ---
@@ -16,7 +16,7 @@ const NAME = 'BButton'
16 16 17 17
// --- Props ---
18 18 19 -
const linkProps = clone(BLinkProps)
19 +
const linkProps = omit(BLinkProps, ['event', 'routerTag'])
20 20
delete linkProps.href.default
21 21
delete linkProps.to.default
22 22
@@ -65,9 +65,6 @@ export const props = { ...btnProps, ...linkProps }
65 65 66 66
// --- Helper methods ---
67 67 68 -
// Returns `true` if a tag's name equals `name`
69 -
const tagIs = (tag, name) => toString(tag).toLowerCase() === toString(name).toLowerCase()
70 - 71 68
// Focus handler for toggle buttons
72 69
// Needs class of 'focus' when focused
73 70
const handleFocus = evt => {
@@ -80,13 +77,13 @@ const handleFocus = evt => {
80 77 81 78
// Is the requested button a link?
82 79
// If tag prop is set to `a`, we use a <b-link> to get proper disabled handling
83 -
const isLink = props => props.href || props.to || tagIs(props.tag, 'a')
80 +
const isLink = props => isLinkStrict(props) || isTag(props.tag, 'a')
84 81 85 82
// Is the button to be a toggle button?
86 83
const isToggle = props => isBoolean(props.pressed)
87 84 88 85
// Is the button "really" a button?
89 -
const isButton = props => !(isLink(props) || (props.tag && !tagIs(props.tag, 'button')))
86 +
const isButton = props => !(isLink(props) || (props.tag && !isTag(props.tag, 'button')))
90 87 91 88
// Is the requested tag not a button or link?
92 89
const isNonStandardTag = props => !isLink(props) && !isButton(props)
@@ -105,7 +102,7 @@ const computeClass = props => [
105 102
]
106 103 107 104
// Compute the link props to pass to b-link (if required)
108 -
const computeLinkProps = props => (isLink(props) ? pluckProps(linkProps, props) : null)
105 +
const computeLinkProps = props => (isLink(props) ? pluckProps(linkProps, props) : {})
109 106 110 107
// Compute the attributes for a button
111 108
const computeAttrs = (props, data) => {
@@ -1,11 +1,11 @@
1 1
import Vue from '../../utils/vue'
2 2
import { requestAF } from '../../utils/dom'
3 -
import { clone } from '../../utils/object'
3 +
import { omit } from '../../utils/object'
4 4
import attrsMixin from '../../mixins/attrs'
5 5
import normalizeSlotMixin from '../../mixins/normalize-slot'
6 6
import { BLink, props as BLinkProps } from '../link/link'
7 7 8 -
export const props = clone(BLinkProps)
8 +
export const props = omit(BLinkProps, ['event', 'routerTag'])
9 9 10 10
// @vue/component
11 11
export const BDropdownItem = /*#__PURE__*/ Vue.extend({
@@ -97,7 +97,7 @@
97 97
},
98 98
{
99 99
"prop": "splitTo",
100 -
"description": "router-link prop: Denotes the target route of the split button. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
100 +
"description": "<router-link> prop: Denotes the target route of the split button. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
101 101
},
102 102
{
103 103
"prop": "splitVariant",
@@ -26,6 +26,17 @@ If your app is running under [Nuxt.js](https://nuxtjs.org), the
26 26
`<router-link>`. The `<nuxt-link>` component supports all the same features as `<router-link>` (as
27 27
it is a wrapper component for `<router-link>`) and more.
28 28 29 +
### Third party rounter links
30 + 31 +
BootstrapVue auto detects using `<router-link>` and `<nuxt-link>` link components. Some 3rd party
32 +
frameworks also provide customized versions of `<router-link>`, such as
33 +
[Gridsome's `<g-link>` component](https://gridsome.org/docs/linking/). `<b-link>` can support these
34 +
third party `<router-link>` compatible components via the use of the `router-component-name` prop.
35 +
All `vue-router` props (excluding `<nuxt-link>` specific props) will be passed to the specified
36 +
router link component.
37 + 38 +
Note that the 3rd party component will only be used when the `to` prop is set.
39 + 29 40
## Links with `href="#"`
30 41 31 42
Typically `<a href="#">` will cause the document to scroll to the top of page when clicked.
@@ -1,13 +1,18 @@
1 1
import Vue from '../../utils/vue'
2 2
import pluckProps from '../../utils/pluck-props'
3 3
import { concat } from '../../utils/array'
4 +
import { getComponentConfig } from '../../utils/config'
4 5
import { attemptBlur, attemptFocus } from '../../utils/dom'
5 6
import { isBoolean, isEvent, isFunction, isUndefined } from '../../utils/inspect'
6 7
import { computeHref, computeRel, computeTag, isRouterLink } from '../../utils/router'
7 8
import attrsMixin from '../../mixins/attrs'
8 9
import listenersMixin from '../../mixins/listeners'
9 10
import normalizeSlotMixin from '../../mixins/normalize-slot'
10 11 12 +
// --- Constants ---
13 + 14 +
const NAME = 'BLink'
15 + 11 16
// --- Props ---
12 17 13 18
// <router-link> specific props
@@ -87,7 +92,15 @@ export const props = {
87 92
default: false
88 93
},
89 94
...routerLinkProps,
90 -
...nuxtLinkProps
95 +
...nuxtLinkProps,
96 +
// To support 3rd party router links based on `<router-link>` (i.e. `g-link` for Gridsome)
97 +
// Default is to auto choose between `<router-link>` and `<nuxt-link>`
98 +
// Gridsome doesn't provide a mechanism to auto detect and has caveats
99 +
// such as not supporting FQDN URLs or hash only URLs
100 +
routerComponentName: {
101 +
type: String,
102 +
default: () => getComponentConfig(NAME, 'routerComponentName')
103 +
}
91 104
}
92 105 93 106
// --- Main component ---
@@ -101,7 +114,8 @@ export const BLink = /*#__PURE__*/ Vue.extend({
101 114
computed: {
102 115
computedTag() {
103 116
// We don't pass `this` as the first arg as we need reactivity of the props
104 -
return computeTag({ to: this.to, disabled: this.disabled }, this)
117 +
const { to, disabled, routerComponentName } = this
118 +
return computeTag({ to, disabled, routerComponentName }, this)
105 119
},
106 120
isRouterLink() {
107 121
return isRouterLink(this.computedTag)
@@ -118,7 +132,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
118 132
const prefetch = this.prefetch
119 133
return this.isRouterLink
120 134
? {
121 -
...pluckProps({ ...routerLinkProps, ...nuxtLinkProps }, this.$props),
135 +
...pluckProps({ ...routerLinkProps, ...nuxtLinkProps }, this),
122 136
// Coerce `prefetch` value `null` to be `undefined`
123 137
prefetch: isBoolean(prefetch) ? prefetch : undefined,
124 138
// Pass `router-tag` as `tag` prop
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4