Feature: active prop added to the FwbListGroupItem component

+ small `useClasses` refactor

Author: Sqrcz

docs/components/list-group.md

@@ -42,7 +42,7 @@ import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 ```vue
 <template>
   <fwb-list-group>
-    <fwb-list-group-item hover>Item 1</fwb-list-group-item>
+    <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>

docs/components/listGroup/examples/FwbListGroupExampleHover.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="vp-raw flex flex-col">
     <fwb-list-group>
-      <fwb-list-group-item hover>
+      <fwb-list-group-item
+        active
+        hover
+      >
         Item 1
       </fwb-list-group-item>
       <fwb-list-group-item hover>

src/components/FwbListGroup/FwbListGroupItem.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  active: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { itemClasses } = useListGroupItemClasses(toRefs(props))

src/components/FwbListGroup/composables/useListGroupItemClasses.ts

@@ -1,26 +1,27 @@
 import { computed, type Ref } from 'vue'
 
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
 const defaultItemClasses = 'inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600'
 const hoverItemClasses = 'block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white'
 const disabledItemClasses = 'bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400'
+const activeItemClasses = 'text-white bg-blue-700 dark:bg-gray-800 hover:text-white hover:bg-blue-700 hover:dark:bg-gray-800'
 
 export type UseListGroupItemClassesProps = {
   hover: Ref<boolean>
   disabled: Ref<boolean>
+  active: Ref<boolean>
 }
 
 export function useListGroupItemClasses (props: UseListGroupItemClassesProps): {
   itemClasses: Ref<string>
 } {
-  const itemClasses = computed<string>(() => {
-    return simplifyTailwindClasses(
-      defaultItemClasses,
-      props.disabled.value ? disabledItemClasses : '',
-      !props.disabled.value && props.hover.value ? hoverItemClasses : '',
-    )
-  })
+  const itemClasses = computed(() => useMergeClasses([
+    defaultItemClasses,
+    props.disabled.value ? disabledItemClasses : '',
+    !props.disabled.value && props.hover.value ? hoverItemClasses : '',
+    !props.disabled.value && props.active.value ? activeItemClasses : '',
+  ]))
 
   return {
     itemClasses,