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

src/runtime/components/overlays/ContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isOpen" ref="container" :class="[ui.container, ui.width]">
+  <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <Transition appear v-bind="ui.transition">
       <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
         <slot />
@@ -14,7 +14,10 @@ import type { PropType, Ref } from 'vue'
 import { defu } from 'defu'
 import { onClickOutside } from '@vueuse/core'
 import type { VirtualElement } from '@popperjs/core'
+import { omit } from 'lodash-es'
+import { twMerge, twJoin } from 'tailwind-merge'
 import { usePopper } from '../../composables/usePopper'
+import { defuTwMerge } from '../../utils'
 import type { PopperOptions } from '../../types'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -24,6 +27,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,
@@ -39,15 +43,15 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.contextMenu>>,
-      default: () => appConfig.ui.contextMenu
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.contextMenu>>(() => defu({}, props.ui, appConfig.ui.contextMenu))
+    const ui = computed<Partial<typeof appConfig.ui.contextMenu>>(() => defuTwMerge({}, props.ui, appConfig.ui.contextMenu))
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
@@ -64,14 +68,23 @@ export default defineComponent({
 
     const [, container] = usePopper(popper.value, virtualElement)
 
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.container,
+        ui.value.width
+      ), attrs.class as string)
+    })
+
     onClickOutside(container, () => {
       isOpen.value = false
     })
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       isOpen,
+      wrapperClass,
       container
     }
   }

src/runtime/components/overlays/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="ui.wrapper" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -32,8 +32,10 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -48,6 +50,7 @@ export default defineComponent({
     TransitionRoot,
     TransitionChild
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,
@@ -75,15 +78,15 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
-      default: () => appConfig.ui.modal
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.modal>>(() => defu({}, props.ui, appConfig.ui.modal))
+    const ui = computed<Partial<typeof appConfig.ui.modal>>(() => defuTwMerge({}, props.ui, appConfig.ui.modal))
 
     const isOpen = computed({
       get () {
@@ -94,6 +97,8 @@ export default defineComponent({
       }
     })
 
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {}
@@ -111,9 +116,11 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       isOpen,
+      wrapperClass,
       transitionClass,
       close
     }

src/runtime/components/overlays/Notification.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition appear v-bind="ui.transition">
-    <div :class="[ui.wrapper, ui.background, ui.rounded, ui.shadow]" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
           <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
@@ -41,7 +41,8 @@
 <script lang="ts">
 import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
@@ -49,7 +50,7 @@ import { useTimer } from '../../composables/useTimer'
 import type { NotificationAction } from '../../types'
 import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
-import { classNames } from '../../utils'
+import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -63,6 +64,7 @@ export default defineComponent({
     UAvatar,
     UButton
   },
+  inheritAttrs: false,
   props: {
     id: {
       type: [String, Number],
@@ -109,34 +111,43 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
-      default: () => appConfig.ui.notification
+      default: () => ({})
     }
   },
   emits: ['close'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.notification>>(() => defu({}, props.ui, appConfig.ui.notification))
+    const ui = computed<Partial<typeof appConfig.ui.notification>>(() => defuTwMerge({}, props.ui, appConfig.ui.notification))
 
     let timer: any = null
     const remaining = ref(props.timeout)
 
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper,
+        ui.value.background,
+        ui.value.rounded,
+        ui.value.shadow
+      ), attrs.class as string)
+    })
+
+    const progressClass = computed(() => {
+      return twJoin(
+        ui.value.progress.base,
+        ui.value.progress.background?.replaceAll('{color}', props.color)
+      )
+    })
+
     const progressStyle = computed(() => {
       const remainingPercent = remaining.value / props.timeout * 100
 
       return { width: `${remainingPercent || 0}%` }
     })
 
-    const progressClass = computed(() => {
-      return classNames(
-        ui.value.progress.base,
-        ui.value.progress.background?.replaceAll('{color}', props.color)
-      )
-    })
-
     const iconClass = computed(() => {
-      return classNames(
+      return twJoin(
         ui.value.icon.base,
         ui.value.icon.color?.replaceAll('{color}', props.color)
       )
@@ -199,10 +210,12 @@ export default defineComponent({
     })
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      progressStyle,
+      wrapperClass,
       progressClass,
+      progressStyle,
       iconClass,
       onMouseover,
       onMouseleave,

src/runtime/components/overlays/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[ui.wrapper, ui.position, ui.width]">
+  <div :class="wrapperClass" v-bind="attrs">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification
@@ -20,10 +20,12 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { defu } from 'defu'
-import type { Notification } from '../../types'
-import { useToast } from '../../composables/useToast'
+import { omit } from 'lodash-es'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UNotification from './Notification.vue'
+import { useToast } from '../../composables/useToast'
+import { defuTwMerge } from '../../utils'
+import type { Notification } from '../../types'
 import { useState, useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -35,26 +37,37 @@ export default defineComponent({
   components: {
     UNotification
   },
+  inheritAttrs: false,
   props: {
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.notifications>>,
-      default: () => appConfig.ui.notifications
+      default: () => ({})
     }
   },
-  setup (props) {
+  setup (props, { attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defu({}, props.ui, appConfig.ui.notifications))
+    const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defuTwMerge({}, props.ui, appConfig.ui.notifications))
 
     const toast = useToast()
     const notifications = useState<Notification[]>('notifications', () => [])
 
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper,
+        ui.value.position,
+        ui.value.width
+      ), attrs.class as string)
+    })
+
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       toast,
-      notifications
+      notifications,
+      wrapperClass
     }
   }
 })

src/runtime/components/overlays/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -29,8 +29,11 @@
 import { computed, ref, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
+import { defuTwMerge } from '../../utils'
 import type { PopperOptions } from '../../types'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -45,6 +48,7 @@ export default defineComponent({
     HPopoverButton,
     HPopoverPanel
   },
+  inheritAttrs: false,
   props: {
     mode: {
       type: String,
@@ -71,14 +75,14 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.popover>>,
-      default: () => appConfig.ui.popover
+      default: () => ({})
     }
   },
-  setup (props) {
+  setup (props, { attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defu({}, props.ui, appConfig.ui.popover))
+    const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defuTwMerge({}, props.ui, appConfig.ui.popover))
 
     const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
 
@@ -106,6 +110,8 @@ export default defineComponent({
       return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
     })
 
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
     function onMouseOver () {
       if (props.mode !== 'hover' || !popoverApi.value) {
         return
@@ -147,12 +153,14 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       popover,
       trigger,
       container,
       containerStyle,
+      wrapperClass,
       onMouseOver,
       onMouseLeave
     }

src/runtime/components/overlays/Slideover.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -17,8 +17,10 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
-import { defu } from 'defu'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { omit } from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
+import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -33,6 +35,7 @@ export default defineComponent({
     TransitionRoot,
     TransitionChild
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean as PropType<boolean>,
@@ -61,15 +64,15 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
-      default: () => appConfig.ui.slideover
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'close'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.slideover>>(() => defu({}, props.ui, appConfig.ui.slideover))
+    const ui = computed<Partial<typeof appConfig.ui.slideover>>(() => defuTwMerge({}, props.ui, appConfig.ui.slideover))
 
     const isOpen: WritableComputedRef<boolean> = computed({
       get () {
@@ -80,6 +83,8 @@ export default defineComponent({
       }
     })
 
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {}
@@ -100,9 +105,11 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       isOpen,
+      wrapperClass,
       transitionClass,
       close
     }

src/runtime/components/overlays/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="trigger" :class="ui.wrapper" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover
     </slot>
@@ -27,8 +27,11 @@
 import { computed, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
 import UKbd from '../elements/Kbd.vue'
 import { usePopper } from '../../composables/usePopper'
+import { defuTwMerge } from '../../utils'
 import type { PopperOptions } from '../../types'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -41,6 +44,7 @@ export default defineComponent({
   components: {
     UKbd
   },
+  inheritAttrs: false,
   props: {
     text: {
       type: String,
@@ -68,14 +72,14 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.tooltip>>,
-      default: () => appConfig.ui.tooltip
+      default: () => ({})
     }
   },
-  setup (props) {
+  setup (props, { attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defu({}, props.ui, appConfig.ui.tooltip))
+    const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defuTwMerge({}, props.ui, appConfig.ui.tooltip))
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
@@ -86,6 +90,8 @@ export default defineComponent({
     let openTimeout: NodeJS.Timeout | null = null
     let closeTimeout: NodeJS.Timeout | null = null
 
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
     // Methods
 
     function onMouseOver () {
@@ -121,11 +127,13 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       trigger,
       container,
       open,
+      wrapperClass,
       onMouseOver,
       onMouseLeave
     }