feat(button): fixed the icon abnormality caused by setting the size i…

…n the loading state
devlive-community · Nov 25, 2024 · 6d4bd4f · 6d4bd4f
1 parent ba29ece
commit 6d4bd4f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,6 +8,11 @@
 
       Button
     </ShadcnButton>
+    <ShadcnButton circle size="large" loading />
+    <ShadcnButton round loading>Round</ShadcnButton>
+    <ShadcnButton size="small" loading>Small</ShadcnButton>
+    <ShadcnButton size="default" loading>Default</ShadcnButton>
+    <ShadcnButton size="large" loading>Large</ShadcnButton>
   </ShadcnSpace>
 </template>
 

diff --git a/src/ui/button/ShadcnButton.vue b/src/ui/button/ShadcnButton.vue
@@ -1,20 +1,26 @@
 <template>
   <component :is="to ? ShadcnLink : 'button'"
              v-bind="buttonProps">
-    <div class="inline-flex items-center justify-center gap-1.5">
+    <div class="inline-flex items-center justify-center" :class="{'gap-1.5': !circle}">
       <!-- Loading State -->
-      <div v-if="loading" class="mr-1.5">
+      <div v-if="loading" :class="{'mr-1.5': !circle && (text || $slots.default)}">
         <slot name="loading">
-          <Loader2 class="animate-spin"/>
+          <Loader2 :class="['animate-spin',
+                              {
+                                'w-3 h-3': finalSize === 'small',
+                                'w-4 h-4': finalSize === 'default',
+                                'w-5 h-5': finalSize === 'large',
+                              }
+                           ]"/>
         </slot>
       </div>
 
       <!-- Icon -->
       <slot v-if="!loading && $slots.icon" name="icon"/>
 
       <!-- Text Content -->
-      <span v-if="text" :class="{'ml-0': !$slots.icon && !loading}">{{ text }}</span>
-      <slot v-else/>
+      <span v-if="text && !circle" :class="{'ml-0': !$slots.icon && !loading}">{{ text }}</span>
+      <slot v-if="!circle"/>
     </div>
   </component>
 </template>