feat(module)!: use tailwind-merge for class merging (#509)

src/runtime/components/navigation/Tabs.vue

@@ -1,5 +1,12 @@
 <template>
-  <HTabGroup :vertical="orientation === 'vertical'" :selected-index="selectedIndex" as="div" :class="ui.wrapper" @change="onChange">
+  <HTabGroup
+    :vertical="orientation === 'vertical'"
+    :selected-index="selectedIndex"
+    as="div"
+    :class="wrapperClass"
+    v-bind="attrs"
+    @change="onChange"
+  >
     <HTabList
       ref="listRef"
       :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, ui.list.width, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
@@ -45,7 +52,9 @@ import { ref, computed, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
-import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
+import { defuTwMerge } from '../../utils'
 import type { TabItem } from '../../types/tabs'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -62,6 +71,7 @@ export default defineComponent({
     HTabPanels,
     HTabPanel
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Number,
@@ -82,15 +92,15 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.tabs>>,
-      default: () => appConfig.ui.tabs
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defu({}, props.ui, appConfig.ui.tabs))
+    const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defuTwMerge({}, props.ui, appConfig.ui.tabs))
 
     const listRef = ref<HTMLElement>()
     const itemRefs = ref<HTMLElement[]>([])
@@ -98,6 +108,8 @@ export default defineComponent({
 
     const selectedIndex = ref(props.modelValue || props.defaultIndex)
 
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
     // Methods
 
     function calcMarkerSize (index: number) {
@@ -137,12 +149,14 @@ export default defineComponent({
     onMounted(() => calcMarkerSize(selectedIndex.value))
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       listRef,
       itemRefs,
       markerRef,
       selectedIndex,
+      wrapperClass,
       onChange
     }
   }