Update useListGroupItemClasses.ts

- refactored to use newer `useMergeClasses` composable

Author: Sqrcz

src/components/FwbListGroup/composables/useListGroupItemClasses.ts

@@ -1,11 +1,11 @@
 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 = 'cursor-pointer text-white bg-blue-700 dark:bg-gray-800'
+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>
@@ -16,14 +16,12 @@ export type UseListGroupItemClassesProps = {
 export function useListGroupItemClasses (props: UseListGroupItemClassesProps): {
   itemClasses: Ref<string>
 } {
-  const itemClasses = computed<string>(() => {
-    return simplifyTailwindClasses(
-      defaultItemClasses,
-      props.disabled.value ? disabledItemClasses : '',
-      !props.disabled.value && !props.active.value && props.hover.value ? hoverItemClasses : '',
-      !props.disabled.value && props.active.value ? activeItemClasses : '',
-    )
-  })
+  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,