From bd592d2b10429ab10571c23c33dc2eabc62712c5 Mon Sep 17 00:00:00 2001
From: Menci <mencici@msn.com>
Date: Thu, 12 Jun 2025 23:58:14 +0800
Subject: [PATCH] feat(ui): transition for loading / icon button (#206)

---
 .../stage-ui/src/components/Button/Button.vue | 15 +++++++++++---
 .../Misc/BidirectionalTransition.vue          | 20 +++++++++++++++++++
 .../stage-ui/src/components/Misc/index.ts     |  1 +
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 packages/stage-ui/src/components/Misc/BidirectionalTransition.vue

diff --git a/packages/stage-ui/src/components/Button/Button.vue b/packages/stage-ui/src/components/Button/Button.vue
index 6f1a0a438..0f5d93835 100644
--- a/packages/stage-ui/src/components/Button/Button.vue
+++ b/packages/stage-ui/src/components/Button/Button.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { BidirectionalTransition } from '../Misc'
+
 // Define button variants for better type safety and maintainability
 type ButtonVariant = 'primary' | 'secondary' | 'danger'
 
@@ -58,9 +60,16 @@ const baseClasses = computed(() => [
     :disabled="isDisabled"
     :class="baseClasses"
   >
-    <div class="flex flex-row items-center justify-center gap-2">
-      <div v-if="loading" class="i-lucide:loader-circle animate-spin" />
-      <div v-else-if="icon" :class="icon" />
+    <div class="flex flex-row items-center justify-center">
+      <BidirectionalTransition
+        from-class="opacity-0 mr-0! w-0!"
+        active-class="transition-[width,margin] ease-in-out overflow-hidden"
+      >
+        <div v-if="loading || icon" class="mr-2 w-4">
+          <div v-if="loading" class="i-svg-spinners:ring-resize h-4 w-4" />
+          <div v-else-if="icon" class="h-4 w-4" :class="icon" />
+        </div>
+      </BidirectionalTransition>
       <span v-if="label">{{ label }}</span>
       <slot v-else />
     </div>
diff --git a/packages/stage-ui/src/components/Misc/BidirectionalTransition.vue b/packages/stage-ui/src/components/Misc/BidirectionalTransition.vue
new file mode 100644
index 000000000..74e913aa7
--- /dev/null
+++ b/packages/stage-ui/src/components/Misc/BidirectionalTransition.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  fromClass?: string
+  activeClass?: string
+  toClass?: string
+}>()
+</script>
+
+<template>
+  <Transition
+    :enter-from-class="fromClass"
+    :enter-active-class="activeClass"
+    :enter-to-class="toClass"
+    :leave-from-class="toClass"
+    :leave-active-class="activeClass"
+    :leave-to-class="fromClass"
+  >
+    <slot />
+  </Transition>
+</template>
diff --git a/packages/stage-ui/src/components/Misc/index.ts b/packages/stage-ui/src/components/Misc/index.ts
index 58c6d1aaf..41d39695b 100644
--- a/packages/stage-ui/src/components/Misc/index.ts
+++ b/packages/stage-ui/src/components/Misc/index.ts
@@ -1,3 +1,4 @@
+export { default as BidirectionalTransition } from './BidirectionalTransition.vue'
 export { default as Collapsable } from './Collapsable.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export * from './Steppers'