optimize(components): use tailwind-merge for smarter class merging

src/components/custom/button-icon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import type { PopoverPlacement } from 'naive-ui';
+import { twMerge } from 'tailwind-merge';
 
 defineOptions({
   name: 'ButtonIcon',
@@ -21,38 +21,22 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: 'h-36px text-icon',
+  class: '',
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
   zIndex: 98
 });
 
-interface ButtonProps {
+const [DefineButton, Button] = createReusableTemplate();
-  className: string;
-}
 
-const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
+const DEFAULT_CLASS = 'h-[36px] text-icon';
-
-const cls = computed(() => {
-  let clsStr = props.class;
-
-  if (!clsStr.includes('h-')) {
-    clsStr += ' h-36px';
-  }
-
-  if (!clsStr.includes('text-')) {
-    clsStr += ' text-icon';
-  }
-
-  return clsStr;
-});
 </script>
 
 <template>
   <!-- define component start: Button -->
-  <DefineButton v-slot="{ $slots, className }">
+  <DefineButton v-slot="{ $slots }">
-    <NButton quaternary :class="className">
+    <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
       <div class="flex-center gap-8px">
         <component :is="$slots.default" />
       </div>
@@ -62,7 +46,7 @@ const cls = computed(() => {
 
   <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
     <template #trigger>
-      <Button :class-name="cls" v-bind="$attrs">
+      <Button>
         <slot>
           <SvgIcon :icon="icon" />
         </slot>
@@ -70,7 +54,7 @@ const cls = computed(() => {
     </template>
     {{ tooltipContent }}
   </NTooltip>
-  <Button v-else :class-name="cls" v-bind="$attrs">
+  <Button v-else>
     <slot>
       <SvgIcon :icon="icon" />
     </slot>