Merge branch 'main' of github.com:antd-tiny-vue/antd-tiny-vue into main

components/button/button.tsx

@@ -21,6 +21,7 @@ import {
   isUnBorderedButtonType,
   spaceChildren
 } from './button-helper'
+import LoadingIcon from './loading-icon'
 type Loading = number | boolean
 
 function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@@ -183,7 +184,17 @@ const Button = defineComponent({
         compactItemClassnames.value,
         rootClassName
       )
-      const iconNode = icon && (!innerLoading.value ? icon?.() : <>L</>)
+      const iconNode =
+        icon &&
+        (!innerLoading.value ? (
+          icon?.()
+        ) : (
+          <LoadingIcon
+            existIcon={!!icon}
+            prefixCls={prefixCls.value}
+            loading={!!innerLoading.value}
+          />
+        ))
 
       const kids =
         children || children === 0

components/button/loading-icon.tsx

@@ -0,0 +1,67 @@
+import { Transition, defineComponent, nextTick } from 'vue'
+import { booleanType, someType, stringType } from '@v-c/utils'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+
+export interface LoadingIconProps {
+  prefixCls: string
+  existIcon: boolean
+  loading?: boolean | object
+}
+export const loadingIconProps = {
+  prefixCls: stringType(),
+  existIcon: booleanType(),
+  loading: someType<boolean | object>([Boolean, Object])
+}
+
+const getCollapsedWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  if (node) {
+    node.style.width = '0'
+    node.style.opacity = '0'
+    node.style.transform = 'scale(0)'
+  }
+}
+
+const getRealWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  nextTick(() => {
+    if (node) {
+      node.style.width = `${node.scrollWidth}px`
+      node.style.opacity = '1'
+      node.style.transform = 'scale(1)'
+    }
+  }).then()
+}
+
+const LoadingIcon = defineComponent({
+  name: 'LoadingIcon',
+  props: loadingIconProps,
+  setup(props) {
+    return () => {
+      const { loading, existIcon, prefixCls } = props
+      const visible = !!loading
+      if (existIcon) {
+        return (
+          <span class={`${prefixCls}-loading-icon`}>
+            <LoadingOutlined />
+          </span>
+        )
+      }
+      return (
+        <Transition
+          name={`${prefixCls}-loading-icon-motion`}
+          onBeforeEnter={getCollapsedWidth}
+          onEnter={getRealWidth}
+        >
+          {visible ? (
+            <span class={`${prefixCls}-loading-icon`}>
+              <LoadingOutlined />
+            </span>
+          ) : null}
+        </Transition>
+      )
+    }
+  }
+})
+
+export default LoadingIcon