From a26dd7a949fab28c9f2b1b2c07fe6f51e1f9d4ed Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Fri, 9 Jan 2026 18:46:30 +0800
Subject: [PATCH] fix: fix the issue with NoobButton rendering its icon off
 center when in `circle` mode.

---
 .claude/settings.local.json              |  6 +++-
 packages/base/item/button.vue            | 25 +++++++++++++++--
 packages/base/item/buttonWithTooltip.vue | 35 +++++++++++++++++++-----
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 02b8f36..82de073 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -17,7 +17,11 @@
       "mcp__chrome-devtools__list_console_messages",
       "Bash(dir:*)",
       "Bash(curl:*)",
-      "Bash(xargs cat:*)"
+      "Bash(xargs cat:*)",
+      "mcp__chrome-devtools__fill_form",
+      "Bash(npm run build:lib:*)",
+      "Bash(bun run build:lib:*)",
+      "Bash(bun run dev)"
     ],
     "deny": [],
     "ask": []
diff --git a/packages/base/item/button.vue b/packages/base/item/button.vue
index b844dcf..780771c 100644
--- a/packages/base/item/button.vue
+++ b/packages/base/item/button.vue
@@ -1,14 +1,15 @@
 <template>
     <el-button :class="type || state.style.name" :size="state.size.size" :type="type" :icon="icon" :disabled="disabled"
         :plain="plain" :round="round" :circle="circle" :loading="loading" :text="text" :link="link">
-        <slot />
+        <slot v-if="hasSlotContent" />
     </el-button>
 </template>
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { reactive, onMounted, ref } from "vue";
+import { reactive, onMounted, ref, useSlots, computed } from "vue";
 const { state } = useStore();
+const slots = useSlots();
 
 const prop = defineProps({
     type: {
@@ -49,6 +50,20 @@ const prop = defineProps({
     }
 });
 
+const hasSlotContent = computed(() => {
+  if (!slots.default) return false;
+  const content = slots.default();
+  // Filter out comments and empty text nodes
+  const meaningfulContent = content.filter(vnode => {
+    // Comment nodes
+    if (vnode.type === Symbol.for('v-cmt')) return false;
+    // Text nodes that are empty or whitespace only
+    if (vnode.type === Symbol.for('v-txt') && (!vnode.children || String(vnode.children).trim() === '')) return false;
+    return true;
+  });
+  return meaningfulContent.length > 0;
+});
+
 onMounted(() => { });
 </script>
 <style lang="scss" scoped>
@@ -61,4 +76,10 @@ onMounted(() => { });
     --el-button-hover-border-color: v-bind('state.style.itemBg');
     --el-button-hover-text-color: v-bind('state.style.color');
 }
+</style>
+<style>
+/* Global style to fix icon centering in circle buttons by hiding empty slot spans */
+.el-button.is-circle > span[class=""] {
+  display: none !important;
+}
 </style>
\ No newline at end of file
diff --git a/packages/base/item/buttonWithTooltip.vue b/packages/base/item/buttonWithTooltip.vue
index 12c073f..4b5823a 100644
--- a/packages/base/item/buttonWithTooltip.vue
+++ b/packages/base/item/buttonWithTooltip.vue
@@ -1,24 +1,21 @@
 <template>
   <el-tooltip
-    v-if="props.tooltip"
     :content="props.tooltip"
-    :disabled="props.disabled"
+    :disabled="props.disabled || !props.tooltip"
     :show-after="0"
     :hide-after="0"
     :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
     popper-class="non-interactive-tooltip"
   >
-    <NoobButton :disabled="props.disabled" v-bind="buttonProps">
+    <NoobButton v-if="!hasSlotContent" :disabled="props.disabled" v-bind="buttonProps" />
+    <NoobButton v-else :disabled="props.disabled" v-bind="buttonProps">
       <slot />
     </NoobButton>
   </el-tooltip>
-  <NoobButton v-else :disabled="props.disabled" v-bind="buttonProps">
-    <slot />
-  </NoobButton>
 </template>
 
 <script setup lang="ts">
-import { useAttrs } from "vue";
+import { useAttrs, useSlots } from "vue";
 import { ElTooltip } from "element-plus";
 import { computed } from "vue";
 import { NoobButton } from "noob-mengyxu";
@@ -32,15 +29,39 @@ interface Props {
 
 const props = defineProps<Props>();
 const attrs = useAttrs();
+const slots = useSlots();
 
 const buttonProps = computed(() => {
   const { class: _, ...rest } = attrs;
   return rest;
 });
+
+const hasSlotContent = computed(() => {
+  if (!slots.default) return false;
+  const content = slots.default();
+  // Filter out comments and empty text nodes
+  const meaningfulContent = content.filter(vnode => {
+    // Comment nodes
+    if (vnode.type === Symbol.for('v-cmt')) return false;
+    // Text nodes that are empty or whitespace only
+    if (vnode.type === Symbol.for('v-txt') && (!vnode.children || String(vnode.children).trim() === '')) return false;
+    return true;
+  });
+  return meaningfulContent.length > 0;
+});
 </script>
 
 <style>
 .non-interactive-tooltip {
   pointer-events: none !important;
 }
+
+/* Hide empty span in circle buttons - use !important to override element-plus styles */
+.el-button.is-circle > span:empty,
+.el-button.is-circle > span.el-button__text:empty,
+.el-button.is-circle > span[class=""]:empty {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
 </style>