Skip to content

Commit fd0e40e

Browse files
mahmoud.ghalayini@zariot.comMahmoudGhalayini
[email protected]
authored and
MahmoudGhalayini
committed
feat(FwbListGroupItem): Add href and to support
1 parent 570e238 commit fd0e40e

File tree

7 files changed

+106
-61
lines changed

7 files changed

+106
-61
lines changed

‎docs/components/button-group.md‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,21 +80,11 @@ You can also mix buttons with dropdowns inside the button group.
8080
</fwb-dropdown>
8181
<fwb-dropdown text="Dropdown with list">
8282
<fwb-list-group>
83-
<fwb-list-group-item hover>
84-
<a href="#">These</a>
85-
</fwb-list-group-item>
86-
<fwb-list-group-item hover>
87-
<a href="#">are</a>
88-
</fwb-list-group-item>
89-
<fwb-list-group-item hover>
90-
<a href="#">some</a>
91-
</fwb-list-group-item>
92-
<fwb-list-group-item hover>
93-
<a href="#">list</a>
94-
</fwb-list-group-item>
95-
<fwb-list-group-item hover>
96-
<a href="#">items</a>
97-
</fwb-list-group-item>
83+
<fwb-list-group-item href="#"> These </fwb-list-group-item>
84+
<fwb-list-group-item href="#"> are </fwb-list-group-item>
85+
<fwb-list-group-item href="#"> some </fwb-list-group-item>
86+
<fwb-list-group-item href="#"> list </fwb-list-group-item>
87+
<fwb-list-group-item href="#"> items </fwb-list-group-item>
9888
</fwb-list-group>
9989
</fwb-dropdown>
10090
</fwb-button-group>

‎docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,20 @@
1010
</fwb-dropdown>
1111
<fwb-dropdown text="Dropdown with list">
1212
<fwb-list-group>
13-
<fwb-list-group-item hover>
14-
<a href="#">These</a>
13+
<fwb-list-group-item href="#">
14+
These
1515
</fwb-list-group-item>
16-
<fwb-list-group-item hover>
17-
<a href="#">are</a>
16+
<fwb-list-group-item href="#">
17+
are
1818
</fwb-list-group-item>
19-
<fwb-list-group-item hover>
20-
<a href="#">some</a>
19+
<fwb-list-group-item href="#">
20+
some
2121
</fwb-list-group-item>
22-
<fwb-list-group-item hover>
23-
<a href="#">list</a>
22+
<fwb-list-group-item href="#">
23+
list
2424
</fwb-list-group-item>
25-
<fwb-list-group-item hover>
26-
<a href="#">items</a>
25+
<fwb-list-group-item href="#">
26+
items
2727
</fwb-list-group-item>
2828
</fwb-list-group>
2929
</fwb-dropdown>

‎docs/components/dropdown.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,16 +144,16 @@ import { FwbDropdown } from 'flowbite-vue'
144144
<template>
145145
<fwb-dropdown text="Menu" content-class="rounded-lg">
146146
<fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
147-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
147+
<fwb-list-group-item to="#">
148148
Dashboard
149149
</fwb-list-group-item>
150-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
150+
<fwb-list-group-item href="#">
151151
Settings
152152
</fwb-list-group-item>
153-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
153+
<fwb-list-group-item href="#">
154154
Earnings
155155
</fwb-list-group-item>
156-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
156+
<fwb-list-group-item @click="signOut">
157157
Sign out
158158
</fwb-list-group-item>
159159
</fwb-list-group>

‎docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
content-wrapper-class="rounded-lg"
66
>
77
<fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
8-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
8+
<fwb-list-group-item to="my-dashboard">
99
Dashboard
1010
</fwb-list-group-item>
11-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
11+
<fwb-list-group-item href="#">
1212
Settings
1313
</fwb-list-group-item>
14-
<fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
14+
<fwb-list-group-item href="#">
1515
Earnings
1616
</fwb-list-group-item>
17-
<fwb-list-group-item class="cursor-pointer border-b-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
17+
<fwb-list-group-item @click="signOut">
1818
Sign out
1919
</fwb-list-group-item>
2020
</fwb-list-group>
@@ -24,4 +24,5 @@
2424

2525
<script lang="ts" setup>
2626
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
27+
const signOut = () => {}
2728
</script>

‎docs/components/list-group.md‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import FwbListGroupExample from './listGroup/examples/FwbListGroupExample.vue'
33
import FwbListGroupExampleDisabled from './listGroup/examples/FwbListGroupExampleDisabled.vue'
4-
import FwbListGroupExampleHover from './listGroup/examples/FwbListGroupExampleHover.vue'
4+
import FwbListGroupExampleLink from './listGroup/examples/FwbListGroupExampleLink.vue'
55
import FwbListGroupExampleIcon from './listGroup/examples/FwbListGroupExampleIcon.vue'
66
</script>
77

@@ -36,17 +36,27 @@ import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
3636
</script>
3737
```
3838

39-
## Hover
39+
## Links
4040

41-
<fwb-list-group-example-hover />
41+
:::tip
42+
`href` prop is used for external links. `to` prop is used for internal links. `target` prop is used to set the target attribute for external links, the hover effect is automatically enabled.
43+
:::
44+
<fwb-list-group-example-link />
4245
```vue
4346
<template>
4447
<fwb-list-group>
45-
<fwb-list-group-item active hover>Item 1</fwb-list-group-item>
46-
<fwb-list-group-item hover>Item 2</fwb-list-group-item>
47-
<fwb-list-group-item hover>Item 3</fwb-list-group-item>
48-
<fwb-list-group-item hover>Item 4</fwb-list-group-item>
49-
<fwb-list-group-item hover>Item 5</fwb-list-group-item>
48+
<fwb-list-group-item active href="#">
49+
Link with href (active)
50+
</fwb-list-group-item>
51+
<fwb-list-group-item href="https://flowbite.com" target="__blank">
52+
External link (target blank)
53+
</fwb-list-group-item>
54+
<fwb-list-group-item to="#">
55+
Router link
56+
</fwb-list-group-item>
57+
<fwb-list-group-item>
58+
Regular item (no hover)
59+
</fwb-list-group-item>
5060
</fwb-list-group>
5161
</template>
5262

docs/components/listGroup/examples/FwbListGroupExampleHover.vue renamed to docs/components/listGroup/examples/FwbListGroupExampleLink.vue

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,20 @@
33
<fwb-list-group>
44
<fwb-list-group-item
55
active
6-
hover
6+
href="#"
77
>
8-
Item 1
8+
Link with href (active)
99
</fwb-list-group-item>
10-
<fwb-list-group-item hover>
11-
Item 2
12-
</fwb-list-group-item>
13-
<fwb-list-group-item hover>
14-
Item 3
15-
</fwb-list-group-item>
16-
<fwb-list-group-item hover>
17-
Item 4
10+
<fwb-list-group-item
11+
href="https://flowbite.com"
12+
target="__blank"
13+
>
14+
External link
1815
</fwb-list-group-item>
19-
<fwb-list-group-item hover>
20-
Item 5
16+
<fwb-list-group-item to="#">
17+
Router link
2118
</fwb-list-group-item>
19+
<fwb-list-group-item> Regular item (no hover) </fwb-list-group-item>
2220
</fwb-list-group>
2321
</div>
2422
</template>

‎src/components/FwbListGroup/FwbListGroupItem.vue‎

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<li :class="itemClasses">
2+
<component
3+
:is="componentTag"
4+
:class="itemClasses"
5+
:[linkAttr]="linkTarget"
6+
:target="showTarget ? target : undefined"
7+
>
38
<div
49
v-if="$slots.prefix"
510
class="mr-2"
@@ -13,19 +18,16 @@
1318
>
1419
<slot name="suffix" />
1520
</div>
16-
</li>
21+
</component>
1722
</template>
1823

1924
<script lang="ts" setup>
20-
import { toRefs } from 'vue'
25+
import { computed, resolveComponent, toRef, useAttrs } from 'vue'
2126
2227
import { useListGroupItemClasses } from './composables/useListGroupItemClasses'
2328
29+
const attrs = useAttrs()
2430
const props = defineProps({
25-
hover: {
26-
type: Boolean,
27-
default: false,
28-
},
2931
disabled: {
3032
type: Boolean,
3133
default: false,
@@ -34,7 +36,51 @@ const props = defineProps({
3436
type: Boolean,
3537
default: false,
3638
},
39+
to: {
40+
type: [String, Object],
41+
default: null,
42+
},
43+
href: {
44+
type: String,
45+
default: null,
46+
},
47+
target: {
48+
type: String,
49+
default: '_self',
50+
},
51+
tag: {
52+
type: String,
53+
default: 'li',
54+
},
55+
})
56+
57+
const isLink = computed(() => !!props.href || !!props.to)
58+
const isRouterLink = computed(() => props.tag === 'router-link' || props.tag === 'nuxt-link')
59+
const linkComponent = computed(() => {
60+
if (isRouterLink.value) {
61+
return resolveComponent(props.tag)
62+
}
63+
return props.tag !== 'li' ? props.tag : 'a'
3764
})
65+
const componentTag = computed(() => {
66+
if (!isLink.value) return props.tag
67+
if (props.to) {
68+
return linkComponent.value
69+
}
70+
return 'a'
71+
})
72+
const linkAttr = computed(() => {
73+
if (!isLink.value) return null
74+
return isRouterLink.value
75+
? 'to'
76+
: 'href'
77+
})
78+
const linkTarget = computed(() => props.to || props.href)
79+
const showTarget = computed(() => !!props.href && !props.to)
80+
81+
const disabled = toRef(props, 'disabled')
82+
const active = toRef(props, 'active')
83+
const hover = computed(() => isLink.value || !!attrs.onClick)
3884
39-
const { itemClasses } = useListGroupItemClasses(toRefs(props))
85+
const { itemClasses } = useListGroupItemClasses({ disabled, active, hover })
4086
</script>

0 commit comments

Comments
 (0)