optimize (components): ButtonIcon with smarter class merging and tippy (#463)

package.json

@@ -61,6 +61,7 @@
     "naive-ui": "2.38.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
+    "tailwind-merge": "^2.3.0",
     "vue": "3.4.27",
     "vue-draggable-plus": "0.4.1",
     "vue-i18n": "9.13.1",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       pinia:
         specifier: 2.1.7
         version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
+      tailwind-merge:
+        specifier: ^2.3.0
+        version: 2.3.0
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -4295,6 +4298,9 @@ packages:
     resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -9361,6 +9367,10 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.6.2
 
+  tailwind-merge@2.3.0:
+    dependencies:
+      '@babel/runtime': 7.24.5
+
   tapable@2.2.1: {}
 
   tar@6.2.1:

src/components/custom/button-icon.vue

@@ -1,7 +1,6 @@
 <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,60 +20,29 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: 'h-36px text-icon',
+  class: '',
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
   zIndex: 98
 });
 
-interface ButtonProps {
+const DEFAULT_CLASS = 'h-[36px] text-icon';
-  className: string;
-}
-
-const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
-
-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 -->
+  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
-  <DefineButton v-slot="{ $slots, className }">
-    <NButton quaternary :class="className">
-      <div class="flex-center gap-8px">
-        <component :is="$slots.default" />
-      </div>
-    </NButton>
-  </DefineButton>
-  <!-- define component end: Button -->
-
-  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
     <template #trigger>
-      <Button :class-name="cls" v-bind="$attrs">
+      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
-        <slot>
+        <div class="flex-center gap-8px">
-          <SvgIcon :icon="icon" />
+          <slot>
-        </slot>
+            <SvgIcon :icon="icon" />
-      </Button>
+          </slot>
+        </div>
+      </NButton>
     </template>
     {{ tooltipContent }}
   </NTooltip>
-  <Button v-else :class-name="cls" v-bind="$attrs">
-    <slot>
-      <SvgIcon :icon="icon" />
-    </slot>
-  </Button>
 </template>
 
 <style scoped></style>