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

2026-01-22 16:00:39 +01:00 · 2023-08-12 17:17:00 +02:00
parent 6d7973f6e1
commit 8880bdc456
47 changed files with 685 additions and 376 deletions
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -4,64 +4,65 @@
    :model-value="modelValue"
    :multiple="multiple"
    :nullable="nullable"
+    :class="wrapperClass"
+    v-bind="attrs"
+    as="div"
    @update:model-value="onSelect"
  >
-    <div :class="ui.wrapper">
-      <div v-show="searchable" :class="ui.input.wrapper">
-        <UIcon v-if="iconName" :name="iconName" :class="iconClass" aria-hidden="true" />
-        <HComboboxInput
-          ref="comboboxInput"
-          :value="query"
-          :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
-          :placeholder="placeholder"
-          autocomplete="off"
-          @change="query = $event.target.value"
-        />
+    <div v-show="searchable" :class="ui.input.wrapper">
+      <UIcon v-if="iconName" :name="iconName" :class="iconClass" aria-hidden="true" />
+      <HComboboxInput
+        ref="comboboxInput"
+        :value="query"
+        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
+        :placeholder="placeholder"
+        autocomplete="off"
+        @change="query = $event.target.value"
+      />

-        <UButton
-          v-if="closeButton"
-          v-bind="{ ...ui.default.closeButton, ...closeButton }"
-          :class="ui.input.closeButton"
-          aria-label="Close"
-          @click="onClear"
-        />
-      </div>
-
-      <HComboboxOptions
-        v-if="groups.length"
-        static
-        hold
-        as="div"
-        aria-label="Commands"
-        :class="ui.container"
-      >
-        <CommandPaletteGroup
-          v-for="group of groups"
-          :key="group.key"
-          :query="query"
-          :group="group"
-          :group-attribute="groupAttribute"
-          :command-attribute="commandAttribute"
-          :selected-icon="selectedIcon"
-          :ui="ui"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </CommandPaletteGroup>
-      </HComboboxOptions>
-
-      <template v-else-if="emptyState">
-        <slot name="empty-state">
-          <div :class="ui.emptyState.wrapper">
-            <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
-            <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
-              {{ query ? emptyState.queryLabel : emptyState.label }}
-            </p>
-          </div>
-        </slot>
-      </template>
+      <UButton
+        v-if="closeButton"
+        v-bind="{ ...ui.default.closeButton, ...closeButton }"
+        :class="ui.input.closeButton"
+        aria-label="Close"
+        @click="onClear"
+      />
    </div>
+
+    <HComboboxOptions
+      v-if="groups.length"
+      static
+      hold
+      as="div"
+      aria-label="Commands"
+      :class="ui.container"
+    >
+      <CommandPaletteGroup
+        v-for="group of groups"
+        :key="group.key"
+        :query="query"
+        :group="group"
+        :group-attribute="groupAttribute"
+        :command-attribute="commandAttribute"
+        :selected-icon="selectedIcon"
+        :ui="ui"
+      >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </CommandPaletteGroup>
+    </HComboboxOptions>
+
+    <template v-else-if="emptyState">
+      <slot name="empty-state">
+        <div :class="ui.emptyState.wrapper">
+          <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+          <p :class="query ? ui.emptyState.queryLabel : ui.emptyState.label">
+            {{ query ? emptyState.queryLabel : emptyState.label }}
+          </p>
+        </div>
+      </slot>
+    </template>
  </HCombobox>
 </template>

@@ -71,7 +72,8 @@ import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
-import { groupBy, map } from 'lodash-es'
+import { twMerge, twJoin } from 'tailwind-merge'
+import { groupBy, map, omit } from 'lodash-es'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
@@ -79,7 +81,7 @@ import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import type { Button } from '../../types/button'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
-import { classNames } from '../../utils'
+import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -96,6 +98,7 @@ export default defineComponent({
    UButton,
    CommandPaletteGroup
  },
+  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Number, Object, Array],
@@ -175,15 +178,15 @@ export default defineComponent({
    },
    ui: {
      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
-      default: () => appConfig.ui.commandPalette
+      default: () => ({})
    }
  },
  emits: ['update:modelValue', 'close'],
-  setup (props, { emit, expose }) {
+  setup (props, { emit, attrs, expose }) {
    // TODO: Remove
    const appConfig = useAppConfig()

-    const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defu({}, props.ui, appConfig.ui.commandPalette))
+    const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defuTwMerge({}, props.ui, appConfig.ui.commandPalette))

    const query = ref('')
    const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
@@ -268,6 +271,8 @@ export default defineComponent({
      }, 0)
    })

+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
    const iconName = computed(() => {
      if ((props.loading || isLoading.value) && props.loadingIcon) {
        return props.loadingIcon
@@ -277,7 +282,7 @@ export default defineComponent({
    })

    const iconClass = computed(() => {
-      return classNames(
+      return twJoin(
        ui.value.input.icon.base,
        ui.value.input.icon.size,
        ((props.loading || isLoading.value) && props.loadingIcon) && 'animate-spin'
@@ -325,12 +330,14 @@ export default defineComponent({
    })

    return {
+      attrs: omit(attrs, ['class']),
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
      // eslint-disable-next-line vue/no-dupe-keys
      groups,
      comboboxInput,
      query,
+      wrapperClass,
      iconName,
      iconClass,
      // eslint-disable-next-line vue/no-dupe-keys
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -113,7 +113,7 @@ export default defineComponent({
    },
    ui: {
      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
-      default: () => appConfig.ui.commandPalette
+      default: () => ({})
    }
  },
  setup (props) {
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="wrapperClass" v-bind="attrs">
    <slot name="prev" :on-click="onClickPrev">
      <UButton
        v-if="prevButton"
@@ -40,8 +40,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 UButton from '../elements/Button.vue'
+import { defuTwMerge } from '../../utils'
 import type { Button } from '../../types/button'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -54,6 +56,7 @@ export default defineComponent({
  components: {
    UButton
  },
+  inheritAttrs: false,
  props: {
    modelValue: {
      type: Number,
@@ -103,15 +106,15 @@ export default defineComponent({
    },
    ui: {
      type: Object as PropType<Partial<typeof appConfig.ui.pagination>>,
-      default: () => appConfig.ui.pagination
+      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
-  setup (props, { emit }) {
+  setup (props, { attrs, emit }) {
    // TODO: Remove
    const appConfig = useAppConfig()

-    const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defu({}, props.ui, appConfig.ui.pagination))
+    const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defuTwMerge({}, props.ui, appConfig.ui.pagination))

    const currentPage = computed({
      get () {
@@ -177,6 +180,8 @@ export default defineComponent({
    const canGoPrev = computed(() => currentPage.value > 1)
    const canGoNext = computed(() => currentPage.value < pages.value.length)

+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
+
    function onClickPage (page: number | string) {
      if (typeof page === 'string') {
        return
@@ -202,6 +207,7 @@ export default defineComponent({
    }

    return {
+      attrs: omit(attrs, ['class']),
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
      currentPage,
@@ -209,6 +215,7 @@ export default defineComponent({
      displayedPages,
      canGoPrev,
      canGoNext,
+      wrapperClass,
      onClickPrev,
      onClickNext,
      onClickPage
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/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
    }
  }
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav :class="ui.wrapper">
+  <nav :class="wrapperClass" v-bind="attrs">
    <ULink
      v-for="(link, index) of links"
      v-slot="{ isActive }"
@@ -40,11 +40,12 @@
 <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 UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULink from '../elements/Link.vue'
+import { defuTwMerge } from '../../utils'
 import type { VerticalNavigationLink } from '../../types/vertical-navigation'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -59,6 +60,7 @@ export default defineComponent({
    UAvatar,
    ULink
  },
+  inheritAttrs: false,
  props: {
    links: {
      type: Array as PropType<VerticalNavigationLink[]>,
@@ -66,18 +68,22 @@ export default defineComponent({
    },
    ui: {
      type: Object as PropType<Partial<typeof appConfig.ui.verticalNavigation>>,
-      default: () => appConfig.ui.verticalNavigation
+      default: () => ({})
    }
  },
-  setup (props) {
+  setup (props, { attrs }) {
    // TODO: Remove
    const appConfig = useAppConfig()

-    const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defu({}, props.ui, appConfig.ui.verticalNavigation))
+    const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defuTwMerge({}, props.ui, appConfig.ui.verticalNavigation))
+
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))

    return {
+      attrs: omit(attrs, ['class']),
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
+      wrapperClass,
      omit
    }
  }