chore(projects): merge main to example

src/components/advanced/table-column-setting.vue

@@ -21,10 +21,10 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
         {{ $t('common.columnSetting') }}
       </NButton>
     </template>
-    <VueDraggable v-model="columns">
+    <VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
       <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
-        <icon-mdi-drag class="mr-8px cursor-move text-icon" />
-        <NCheckbox v-model:checked="item.checked">
+        <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
+        <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
           {{ item.title }}
         </NCheckbox>
       </div>

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 {
-  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;
-});
+const DEFAULT_CLASS = 'h-[36px] text-icon';
 </script>
 
 <template>
-  <!-- define component start: Button -->
-  <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">
+  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
     <template #trigger>
-      <Button :class-name="cls" v-bind="$attrs">
-        <slot>
-          <SvgIcon :icon="icon" />
-        </slot>
-      </Button>
+      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
+        <div class="flex-center gap-8px">
+          <slot>
+            <SvgIcon :icon="icon" />
+          </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>