Skip to content

Commit 4bdf355

Browse files
mariusamariusa
authored
Merge pull request #478 from Trif4/b-list-group-item-to-prop
List group item `to` prop
2 parents 360e0ea + 5f0c942 commit 4bdf355

File tree

4 files changed

+23
-25
lines changed

4 files changed

+23
-25
lines changed

‎docs/components/ListGroup.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ actionable items. see below).
8282
## Actionable list group items
8383

8484
Turn a `<b-list-group-item>` into an actionable _link_ (`<a href="...">`) by specifying either an
85-
`href` prop or ~~[router-link](/docs/reference/router-links) `to`~~ prop.
85+
`href` prop or ~~[router-link](/docs/reference/router-links)~~ `to` prop.
8686

8787
<ClientOnly>
8888
<b-card class="bd-example">
@@ -130,7 +130,7 @@ Or if you prefer `<button>` elements over links, set the `button` prop to `true`
130130

131131
- When the prop `button` is `true`, all [link related props](/docs/components/link) (other than
132132
`active`) and the `tag` prop will have no effect.
133-
- When `href` or ~~`to`~~ are set, the `tag` prop has no effect.
133+
- When `href` or `to` are set, the `tag` prop has no effect.
134134

135135
~~Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
136136
props.~~
@@ -571,16 +571,17 @@ help of [flexbox utility classes](/docs/reference/utility-classes).
571571

572572
#### Properties
573573

574-
| Property | Type | Default | Description |
575-
| ---------- | --------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
576-
| `action` | `Boolean` | `false` | When set, give the item the appearance of having an action. Not needed when props 'to', 'href' or 'button' are used |
577-
| `active` | `Boolean` | `false` | When set to `true`, places the component in the active state with active styling |
578-
| `button` | `Boolean` | `false` | When true renders the list-group-item as a button element |
579-
| `disabled` | `Boolean` | `false` | When set to `true`, disables the component's functionality and places it in a disabled state |
580-
| `href` | `String` | | Denotes the target URL of the link for standard a links |
581-
| `tag` | `String` | `'div'` | Specify the HTML tag to render instead of the default tag |
582-
| `target` | `String` | `'_self'` | Sets the `target` attribute on the rendered link |
583-
| `variant` | `String` | | Applies one of the Bootstrap theme color variants to the component |
574+
| Property | Type | Default | Description |
575+
| ---------- | -------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
576+
| `action` | `Boolean` | `false` | When set, give the item the appearance of having an action. Not needed when props 'to', 'href' or 'button' are used |
577+
| `active` | `Boolean` | `false` | When set to `true`, places the component in the active state with active styling |
578+
| `button` | `Boolean` | `false` | When true renders the list-group-item as a button element |
579+
| `disabled` | `Boolean` | `false` | When set to `true`, disables the component's functionality and places it in a disabled state |
580+
| `href` | `String` | | Denotes the target URL of the link for standard a links |
581+
| `tag` | `String` | `'div'` | Specify the HTML tag to render instead of the default tag |
582+
| `target` | `String` | `'_self'` | Sets the `target` attribute on the rendered link |
583+
| `to` | `Object` or `String` | `_self` | `<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 |
584+
| `variant` | `String` | | Applies one of the Bootstrap theme color variants to the component |
584585

585586
#### Slots
586587

‎docs/reference/parityList.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1258,7 +1258,7 @@ This is a <Badge type="warning" text="non-standard" /> component.
12581258
| `router-component-name` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/0) Completed | |
12591259
| `tag` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/100) Completed | |
12601260
| `target` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/100) Completed | |
1261-
| `to` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/0) Completed | |
1261+
| `to` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/100) Completed | |
12621262
| `variant` | ![](https://us-central1-progress-markdown.cloudfunctions.net/progress/100) Completed | |
12631263

12641264
### Slots

‎src/components/BListGroup/BListGroupItem.vue

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:aria-disabled="disabled ? true : null"
88
:target="link ? target : null"
99
:href="!button ? href : null"
10+
:to="!button ? to : null"
1011
v-bind="computedAttrs"
1112
>
1213
<slot />
@@ -16,7 +17,9 @@
1617
<script setup lang="ts">
1718
// import type {BListGroupItemProps} from '../../types/components'
1819
import {computed, inject, useAttrs} from 'vue'
20+
import type {RouteLocationRaw} from 'vue-router'
1921
import type {ColorVariant, LinkTarget} from '../../types'
22+
import BLink from '../BLink/BLink.vue'
2023
import {injectionKey} from './BListGroup.vue'
2124
2225
interface BListGroupItemProps {
@@ -36,7 +39,7 @@ interface BListGroupItemProps {
3639
// routerComponentName?: String
3740
tag?: string
3841
target?: LinkTarget
39-
//to?: string | Record<string, unknown>
42+
to?: RouteLocationRaw
4043
variant?: ColorVariant
4144
}
4245
@@ -53,17 +56,10 @@ const attrs = useAttrs()
5356
5457
const parentData = inject(injectionKey, null)
5558
56-
const link = computed<boolean>(() => !props.button && !!props.href)
59+
const link = computed<boolean>(() => !props.button && (!!props.href || !!props.to))
5760
58-
const tagComputed = computed<string>(
59-
() =>
60-
parentData?.numbered
61-
? 'li'
62-
: props.button
63-
? 'button'
64-
: !link.value
65-
? props.tag
66-
: 'a' /* BLink */
61+
const tagComputed = computed<string | typeof BLink>(() =>
62+
parentData?.numbered ? 'li' : props.button ? 'button' : !link.value ? props.tag : BLink
6763
)
6864
6965
const classes = computed(() => {

‎src/types/components/BListGroup/BListGroupItem.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type {ColorVariant, LinkTarget} from '../..'
2+
import type {RouteLocationRaw} from 'vue-router'
23

34
// Props
45
export interface Props {
@@ -18,7 +19,7 @@ export interface Props {
1819
// routerComponentName?: String
1920
tag?: string
2021
target?: LinkTarget
21-
//to?: string | Record<string, unknown>
22+
to?: RouteLocationRaw
2223
variant?: ColorVariant
2324
}
2425
// Emits

0 commit comments

Comments
 (0)