Skip to content

Commit 92d1f42

Browse files
author
mahmoud.ghalayini@zariot.com
committed
feat(FwbListGroupItem): Add href and to support
1 parent 570e238 commit 92d1f42

File tree

8 files changed

+117
-92
lines changed

8 files changed

+117
-92
lines changed

‎docs/components/button-group.md

+5-15
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

+5-15
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,11 @@
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>
15-
</fwb-list-group-item>
16-
<fwb-list-group-item hover>
17-
<a href="#">are</a>
18-
</fwb-list-group-item>
19-
<fwb-list-group-item hover>
20-
<a href="#">some</a>
21-
</fwb-list-group-item>
22-
<fwb-list-group-item hover>
23-
<a href="#">list</a>
24-
</fwb-list-group-item>
25-
<fwb-list-group-item hover>
26-
<a href="#">items</a>
27-
</fwb-list-group-item>
13+
<fwb-list-group-item href="#"> These </fwb-list-group-item>
14+
<fwb-list-group-item href="#"> are </fwb-list-group-item>
15+
<fwb-list-group-item href="#"> some </fwb-list-group-item>
16+
<fwb-list-group-item href="#"> list </fwb-list-group-item>
17+
<fwb-list-group-item href="#"> items </fwb-list-group-item>
2818
</fwb-list-group>
2919
</fwb-dropdown>
3020
</fwb-button-group>

‎docs/components/dropdown.md

+4-4
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

+5-4
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 class="cursor-pointer" @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

+18-8
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

-28
This file was deleted.

‎docs/components/listGroup/examples/FwbListGroupExampleLink.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="vp-raw flex flex-col">
3+
<fwb-list-group>
4+
<fwb-list-group-item active href="#">
5+
Link with href (active)
6+
</fwb-list-group-item>
7+
<fwb-list-group-item href="https://flowbite.com" target="__blank">
8+
External link
9+
</fwb-list-group-item>
10+
<fwb-list-group-item to="/some-route"> Router link </fwb-list-group-item>
11+
<fwb-list-group-item> Regular item (no hover) </fwb-list-group-item>
12+
</fwb-list-group>
13+
</div>
14+
</template>
15+
16+
<script lang="ts" setup>
17+
import { FwbListGroup, FwbListGroupItem } from "../../../../src/index";
18+
</script>

‎src/components/FwbListGroup/FwbListGroupItem.vue

+62-18
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
11
<template>
2-
<li :class="itemClasses">
3-
<div
4-
v-if="$slots.prefix"
5-
class="mr-2"
6-
>
2+
<component
3+
:is="componentTag"
4+
:class="itemClasses"
5+
:[linkAttr]="linkTarget"
6+
:target="showTarget ? target : undefined"
7+
>
8+
<div v-if="$slots.prefix" class="mr-2">
79
<slot name="prefix" />
810
</div>
911
<slot />
10-
<div
11-
v-if="$slots.suffix"
12-
class="ml-2"
13-
>
12+
<div v-if="$slots.suffix" class="ml-2">
1413
<slot name="suffix" />
1514
</div>
16-
</li>
15+
</component>
1716
</template>
1817

1918
<script lang="ts" setup>
20-
import { toRefs } from 'vue'
19+
import { computed, resolveComponent, useAttrs, toRef } from "vue";
2120
22-
import { useListGroupItemClasses } from './composables/useListGroupItemClasses'
21+
import { useListGroupItemClasses } from "./composables/useListGroupItemClasses";
2322
23+
const attrs = useAttrs();
2424
const props = defineProps({
25-
hover: {
26-
type: Boolean,
27-
default: false,
28-
},
2925
disabled: {
3026
type: Boolean,
3127
default: false,
@@ -34,7 +30,55 @@ const props = defineProps({
3430
type: Boolean,
3531
default: false,
3632
},
37-
})
33+
to: {
34+
type: [String, Object],
35+
default: null,
36+
},
37+
href: {
38+
type: String,
39+
default: null,
40+
},
41+
target: {
42+
type: String,
43+
default: "_self",
44+
},
45+
tag: {
46+
type: String,
47+
default: "li",
48+
},
49+
});
50+
51+
const isLink = computed(() => !!props.href || !!props.to);
52+
53+
const linkComponent = computed(() => {
54+
if (props.tag === "router-link" || props.tag === "nuxt-link") {
55+
return resolveComponent(props.tag);
56+
}
57+
return props.tag !== "li" ? props.tag : "a";
58+
});
59+
60+
const componentTag = computed(() => {
61+
if (!isLink.value) return props.tag;
62+
if (props.to) {
63+
return linkComponent.value;
64+
}
65+
return "a";
66+
});
67+
68+
const linkAttr = computed(() => {
69+
if (!isLink.value) return null;
70+
return props.tag === "router-link" || props.tag === "nuxt-link"
71+
? "to"
72+
: "href";
73+
});
74+
75+
const linkTarget = computed(() => props.to || props.href);
76+
77+
const showTarget = computed(() => !!props.href && !props.to);
78+
79+
const disabled = toRef(props, "disabled");
80+
const active = toRef(props, "active");
81+
const hover = computed(() => isLink.value || !!attrs.onClick);
3882
39-
const { itemClasses } = useListGroupItemClasses(toRefs(props))
83+
const { itemClasses } = useListGroupItemClasses({ disabled, active, hover });
4084
</script>

0 commit comments

Comments
 (0)