feat: button loading

docs/components/button.md

@@ -102,6 +102,19 @@
 </template>
 ```
 
+## 方形
+
+```vue preview
+<template>
+  <EButton variant="square">乾</EButton>
+  <EButton variant="square">坤</EButton>
+  <EButton color="primary" variant="square">A+</EButton>
+  <EButton color="success" variant="square">B</EButton>
+  <EButton color="warning" variant="square">C</EButton>
+  <EButton color="error" variant="square">SSS</EButton>
+</template>
+```
+
 ## 图标
 
 使用 `icon` slot 为按钮设置图标

src/EButton/EButton.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computedCls } from '../utils'
 import { computed, useSlots, type PropType } from 'vue'
+import EIcon from '../EIcon/EIcon.vue'
+import LoadingIcon from '../EIcon/Icons/LoadingIcon.vue'
 
 const props = defineProps({
   variant: {
@@ -21,12 +23,16 @@ const props = defineProps({
 
 const slots = useSlots()
 
+const hasIcon = computed(() => slots.icon || props.loading)
 const cls = computedCls(props, 'e-btn', ['variant', 'color', 'size'])
 </script>
 <template>
   <button :class="[cls]" type="button" :disabled="disabled">
-    <span class="e-btn_icon" v-if="slots.icon">
-      <slot name="icon" />
+    <span class="e-btn_icon" v-if="hasIcon">
+      <EIcon v-if="loading" spin><LoadingIcon /></EIcon>
+      <template v-else>
+        <slot name="icon" />
+      </template>
     </span>
     <span class="e-btn_body" v-if="slots.default">
       <slot />

src/EIcon/Icons/LoadingIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>