From 65d686a8a71d34301cc03dc174896dc9f2f25c6e Mon Sep 17 00:00:00 2001
From: Mahmoud Alghalayini <mahmoud.ghalayini@outlook.com>
Date: Sat, 10 May 2025 16:37:29 +0200
Subject: [PATCH 1/2] feat(FwbListGroupItem): Add href and to support

---
 docs/components/button-group.md               | 20 ++----
 .../FwbButtonGroupExampleDropdown.vue         | 20 +++---
 docs/components/dropdown.md                   |  8 +--
 .../examples/FwbDropdownExampleListGroup.vue  |  9 +--
 docs/components/list-group.md                 | 26 +++++---
 ...eHover.vue => FwbListGroupExampleLink.vue} | 22 +++----
 .../FwbListGroup/FwbListGroupItem.vue         | 62 ++++++++++++++++---
 7 files changed, 106 insertions(+), 61 deletions(-)
 rename docs/components/listGroup/examples/{FwbListGroupExampleHover.vue => FwbListGroupExampleLink.vue} (54%)

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index b48612b7..3f0cdad4 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -80,21 +80,11 @@ You can also mix buttons with dropdowns inside the button group.
     </fwb-dropdown>
     <fwb-dropdown text="Dropdown with list">
       <fwb-list-group>
-        <fwb-list-group-item hover>
-          <a href="#">These</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">are</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">some</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">list</a>
-        </fwb-list-group-item>
-        <fwb-list-group-item hover>
-          <a href="#">items</a>
-        </fwb-list-group-item>
+        <fwb-list-group-item href="#"> These </fwb-list-group-item>
+        <fwb-list-group-item href="#"> are </fwb-list-group-item>
+        <fwb-list-group-item href="#"> some </fwb-list-group-item>
+        <fwb-list-group-item href="#"> list </fwb-list-group-item>
+        <fwb-list-group-item href="#"> items </fwb-list-group-item>
       </fwb-list-group>
     </fwb-dropdown>
   </fwb-button-group>
diff --git a/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue b/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
index 3576133a..29cd2b8e 100644
--- a/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
+++ b/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
@@ -10,20 +10,20 @@
       </fwb-dropdown>
       <fwb-dropdown text="Dropdown with list">
         <fwb-list-group>
-          <fwb-list-group-item hover>
-            <a href="#">These</a>
+          <fwb-list-group-item href="#">
+            These
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">are</a>
+          <fwb-list-group-item href="#">
+            are
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">some</a>
+          <fwb-list-group-item href="#">
+            some
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">list</a>
+          <fwb-list-group-item href="#">
+            list
           </fwb-list-group-item>
-          <fwb-list-group-item hover>
-            <a href="#">items</a>
+          <fwb-list-group-item href="#">
+            items
           </fwb-list-group-item>
         </fwb-list-group>
       </fwb-dropdown>
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index b018e691..fd48f7e6 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -144,16 +144,16 @@ import { FwbDropdown } from 'flowbite-vue'
 <template>
     <fwb-dropdown text="Menu" content-class="rounded-lg">
       <fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item to="#">
           Dashboard
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Settings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Earnings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item @click="signOut">
           Sign out
         </fwb-list-group-item>
       </fwb-list-group>
diff --git a/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue b/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
index 355cc3d2..afb88ca0 100644
--- a/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
+++ b/docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue
@@ -5,16 +5,16 @@
       content-wrapper-class="rounded-lg"
     >
       <fwb-list-group class="text-sm text-gray-700 dark:text-gray-200">
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item to="#">
           Dashboard
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Settings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item href="#">
           Earnings
         </fwb-list-group-item>
-        <fwb-list-group-item class="cursor-pointer border-b-0 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+        <fwb-list-group-item @click="signOut">
           Sign out
         </fwb-list-group-item>
       </fwb-list-group>
@@ -24,4 +24,5 @@
 
 <script lang="ts" setup>
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+const signOut = () => {}
 </script>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index dc2f5fd8..7074bae0 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -1,7 +1,7 @@
 <script setup>
 import FwbListGroupExample from './listGroup/examples/FwbListGroupExample.vue'
 import FwbListGroupExampleDisabled from './listGroup/examples/FwbListGroupExampleDisabled.vue'
-import FwbListGroupExampleHover from './listGroup/examples/FwbListGroupExampleHover.vue'
+import FwbListGroupExampleLink from './listGroup/examples/FwbListGroupExampleLink.vue'
 import FwbListGroupExampleIcon from './listGroup/examples/FwbListGroupExampleIcon.vue'
 </script>
 
@@ -36,17 +36,27 @@ import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 </script>
 ```
 
-## Hover
+## Links
 
-<fwb-list-group-example-hover />
+:::tip
+`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.
+:::
+<fwb-list-group-example-link />
 ```vue
 <template>
   <fwb-list-group>
-    <fwb-list-group-item active hover>Item 1</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 2</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 3</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 4</fwb-list-group-item>
-    <fwb-list-group-item hover>Item 5</fwb-list-group-item>
+    <fwb-list-group-item active href="#">
+      Link with href (active)
+    </fwb-list-group-item>
+    <fwb-list-group-item href="https://flowbite.com" target="__blank">
+      External link (target blank)
+    </fwb-list-group-item>
+    <fwb-list-group-item to="#">
+      Router link
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      Regular item (no hover)
+    </fwb-list-group-item>
   </fwb-list-group>
 </template>
 
diff --git a/docs/components/listGroup/examples/FwbListGroupExampleHover.vue b/docs/components/listGroup/examples/FwbListGroupExampleLink.vue
similarity index 54%
rename from docs/components/listGroup/examples/FwbListGroupExampleHover.vue
rename to docs/components/listGroup/examples/FwbListGroupExampleLink.vue
index aeb64785..c173ee8b 100644
--- a/docs/components/listGroup/examples/FwbListGroupExampleHover.vue
+++ b/docs/components/listGroup/examples/FwbListGroupExampleLink.vue
@@ -3,22 +3,20 @@
     <fwb-list-group>
       <fwb-list-group-item
         active
-        hover
+        href="#"
       >
-        Item 1
+        Link with href (active)
       </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 2
-      </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 3
-      </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 4
+      <fwb-list-group-item
+        href="https://flowbite.com"
+        target="__blank"
+      >
+        External link
       </fwb-list-group-item>
-      <fwb-list-group-item hover>
-        Item 5
+      <fwb-list-group-item to="#">
+        Router link
       </fwb-list-group-item>
+      <fwb-list-group-item> Regular item (no hover) </fwb-list-group-item>
     </fwb-list-group>
   </div>
 </template>
diff --git a/src/components/FwbListGroup/FwbListGroupItem.vue b/src/components/FwbListGroup/FwbListGroupItem.vue
index d70245ae..b332cee6 100644
--- a/src/components/FwbListGroup/FwbListGroupItem.vue
+++ b/src/components/FwbListGroup/FwbListGroupItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <li :class="itemClasses">
+  <component
+    :is="componentTag"
+    :class="itemClasses"
+    :[linkAttr]="linkTarget"
+    :target="showTarget ? target : undefined"
+  >
     <div
       v-if="$slots.prefix"
       class="mr-2"
@@ -13,19 +18,16 @@
     >
       <slot name="suffix" />
     </div>
-  </li>
+  </component>
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
+import { computed, resolveComponent, toRef, useAttrs } from 'vue'
 
 import { useListGroupItemClasses } from './composables/useListGroupItemClasses'
 
+const attrs = useAttrs()
 const props = defineProps({
-  hover: {
-    type: Boolean,
-    default: false,
-  },
   disabled: {
     type: Boolean,
     default: false,
@@ -34,7 +36,51 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  to: {
+    type: [String, Object],
+    default: null,
+  },
+  href: {
+    type: String,
+    default: null,
+  },
+  target: {
+    type: String,
+    default: '_self',
+  },
+  tag: {
+    type: String,
+    default: 'li',
+  },
+})
+
+const isLink = computed(() => !!props.href || !!props.to)
+const isRouterLink = computed(() => props.tag === 'router-link' || props.tag === 'nuxt-link')
+const linkComponent = computed(() => {
+  if (isRouterLink.value) {
+    return resolveComponent(props.tag)
+  }
+  return props.tag !== 'li' ? props.tag : 'a'
 })
+const componentTag = computed(() => {
+  if (!isLink.value) return props.tag
+  if (props.to) {
+    return linkComponent.value
+  }
+  return 'a'
+})
+const linkAttr = computed(() => {
+  if (!isLink.value) return null
+  return isRouterLink.value
+    ? 'to'
+    : 'href'
+})
+const linkTarget = computed(() => props.to || props.href)
+const showTarget = computed(() => !!props.href && !props.to)
+
+const disabled = toRef(props, 'disabled')
+const active = toRef(props, 'active')
+const hover = computed(() => isLink.value || !!attrs.onClick)
 
-const { itemClasses } = useListGroupItemClasses(toRefs(props))
+const { itemClasses } = useListGroupItemClasses({ disabled, active, hover })
 </script>

From ba3604c680e4364af3c101b7b9e53df0278dfbc3 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@gmail.com>
Date: Fri, 18 Jul 2025 09:53:41 +0200
Subject: [PATCH 2/2] fix empty attribute error in FwbListGroupItem

---
 src/components/FwbListGroup/FwbListGroupItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FwbListGroup/FwbListGroupItem.vue b/src/components/FwbListGroup/FwbListGroupItem.vue
index b332cee6..56a9d7fc 100644
--- a/src/components/FwbListGroup/FwbListGroupItem.vue
+++ b/src/components/FwbListGroup/FwbListGroupItem.vue
@@ -2,8 +2,8 @@
   <component
     :is="componentTag"
     :class="itemClasses"
-    :[linkAttr]="linkTarget"
     :target="showTarget ? target : undefined"
+    v-bind="linkAttr ? { [linkAttr]: linkTarget } : {}"
   >
     <div
       v-if="$slots.prefix"