feat: list-group

src/components/ListGroup/ListGroup.vue

@@ -1,17 +1,10 @@
 <template>
-  <ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-    <li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li>
-    <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Settings</li>
-    <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Messages</li>
-    <li class="w-full px-4 py-2 rounded-b-lg">Download</li>
+  <ul :class="containerClasses">
+    <slot />
   </ul>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  
-})
+import { useListGroupClasses } from './composables/useListGroupClasses'
 
+const { containerClasses } = useListGroupClasses()
 </script>

src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <li :class="itemClasses">
+    <div class="mr-2" v-if="$slots.prefix">
+      <slot name="prefix" />
+    </div>
+    <slot />
+    <div class="ml-2" v-if="$slots.suffix">
+      <slot name="suffix" />
+    </div>
+  </li>
+</template>
+<script lang="ts" setup>
+import {
+  useListGroupItemClasses,
+} from './composables/useListGroupItemClasses'
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  hover: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const { itemClasses } = useListGroupItemClasses(toRefs(props))
+</script>

src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
+
+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'
+
+export type UseListGroupItemClassesProps = {
+    hover: Ref<boolean>,
+    disabled: 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 : '',
+        )
+    })
+
+    return {
+        itemClasses,
+    }
+}

src/components/ListGroup/composables/useListGroupClasses.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const defaultContainerClasses = 'overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+
+export function useListGroupClasses(): {
+    containerClasses: Ref<string>,
+} {
+
+    const containerClasses = computed<string>(() => {
+        return classNames(
+            defaultContainerClasses,
+        )
+    })
+
+    return {
+        containerClasses,
+    }
+}