feat(FwbListGroupItem): Add href and to support

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>

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>

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>

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>

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>
 

docs/components/listGroup/examples/FwbListGroupExampleHover.vue → 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>

src/components/FwbListGroup/FwbListGroupItem.vue

@@ -1,5 +1,10 @@
 <template>
-  <li :class="itemClasses">
+  <component
+    :is="componentTag"
+    :class="itemClasses"
+    :target="showTarget ? target : undefined"
+    v-bind="linkAttr ? { [linkAttr]: linkTarget } : {}"
+  >
     <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>