fix(loading): add color for circle type & update doc

packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap

@@ -53,7 +53,7 @@ exports[`test button example 1`] = `
 </button>
 <div class=\\"app-type\\">加载状态</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
   <div class=\\"var--box var-loading var-button__loading\\">
-    <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+    <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px; color: currentColor;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -173,7 +173,7 @@ exports[`test button example 1`] = `
 exports[`test button loading 1`] = `
 "<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
   <div class=\\"var--box var-loading var-button__loading\\">
-    <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+    <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px; color: currentColor;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->

packages/varlet-ui/src/list/__tests__/__snapshots__/index.spec.js.snap

@@ -14,7 +14,7 @@ exports[`test click error text reload 2`] = `
   <div class=\\"var-list__loading\\">
     <div class=\\"var-list__loading-text\\">正在加载</div>
     <div class=\\"var--box var-loading\\">
-      <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 20px; height: 20px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+      <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 20px; height: 20px; color: currentColor;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->

packages/varlet-ui/src/loading/Loading.vue

@@ -4,8 +4,9 @@
       <span
         class="var-loading__circle-block"
         :style="{
-          width: toNumber(radius) * 2 + 'px',
-          height: toNumber(radius) * 2 + 'px',
+          width: getRadius * 2 + 'px',
+          height: getRadius * 2 + 'px',
+          color,
         }"
       >
         <svg viewBox="25 25 50 50">
@@ -28,24 +29,36 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { props } from './props'
 import { toNumber } from '../utils/shared'
+import type { ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'VarLoading',
   props,
-  setup() {
+  setup(props) {
     const loadingTypeDict = {
       wave: 5,
       cube: 4,
       rect: 8,
       disappear: 3,
     }
 
+    const sizeDict = {
+      mini: 9,
+      small: 12,
+      normal: 15,
+      large: 18,
+    }
+
+    const getRadius: ComputedRef<number> = computed(() => {
+      return props.radius ? toNumber(props.radius) : sizeDict[props.size]
+    })
+
     return {
       loadingTypeDict,
-      toNumber,
+      getRadius,
     }
   },
 })

packages/varlet-ui/src/loading/__tests__/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`test circle props 1`] = `
 "<div class=\\"var--box var-loading\\">
-  <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+  <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px; color: rgb(41, 121, 255);\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -45,7 +45,7 @@ exports[`test loading example 1`] = `
     <div class=\\"app-type\\">类型</div>
     <div class=\\"loading-demo__type-block\\">
       <div class=\\"var--box var-loading\\">
-        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 30px; height: 30px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 30px; height: 30px; color: currentColor;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
@@ -108,63 +108,63 @@ exports[`test loading example 1`] = `
   <div class=\\"loading-demo__type\\">
     <div class=\\"app-type\\">颜色</div>
     <div class=\\"loading-demo__type-block\\">
-      <div class=\\"var--box var-loading\\" style=\\"color: rgb(41, 121, 255);\\">
-        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 30px; height: 30px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+      <div class=\\"var--box var-loading\\">
+        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 30px; height: 30px; color: rgb(41, 121, 255);\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class=\\"var--box var-loading\\" style=\\"color: rgb(41, 121, 255);\\">
+      <div class=\\"var--box var-loading\\">
         <!--v-if-->
         <!--v-if-->
         <div class=\\"var-loading__cube var-loading__cube-normal\\">
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__cube-item var-loading__cube-item-normal\\"></div>
         </div>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class=\\"var--box var-loading\\" style=\\"color: rgb(41, 121, 255);\\">
+      <div class=\\"var--box var-loading\\">
         <!--v-if-->
         <div class=\\"var-loading__wave var-loading__wave-normal\\">
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__wave-item var-loading__wave-item-normal\\"></div>
         </div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class=\\"var--box var-loading\\" style=\\"color: rgb(41, 121, 255);\\">
+      <div class=\\"var--box var-loading\\">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <div class=\\"var-loading__rect var-loading__rect-normal\\">
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__rect-item var-loading__rect-item-normal\\"></div>
         </div>
         <!--v-if-->
       </div>
-      <div class=\\"var--box var-loading\\" style=\\"color: rgb(41, 121, 255);\\">
+      <div class=\\"var--box var-loading\\">
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->
         <div class=\\"var-loading__disappear var-loading__disappear-normal\\">
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
-          <div style=\\"background-color: currentColor;\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
+          <div style=\\"background-color: rgb(41, 121, 255);\\" class=\\"var-loading__disappear-item var-loading__disappear-item-normal\\"></div>
         </div>
       </div>
     </div>
@@ -173,7 +173,7 @@ exports[`test loading example 1`] = `
     <div class=\\"app-type\\">大小</div>
     <div class=\\"loading-demo__size-block\\">
       <div class=\\"var--box var-loading\\">
-        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
+        <div class=\\"var-loading__circle\\"><span class=\\"var-loading__circle-block\\" style=\\"width: 24px; height: 24px; color: currentColor;\\"><svg viewBox=\\"25 25 50 50\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"20\\" fill=\\"none\\"></circle></svg></span></div>
         <!--v-if-->
         <!--v-if-->
         <!--v-if-->

packages/varlet-ui/src/loading/docs/en-US.md

@@ -21,11 +21,11 @@ createApp().use(Loading)
 
 ### Color
 ```html
-<var-loading type="circle" style="color: #2979ff" />
-<var-loading type="cube"  style="color: #2979ff"/>
-<var-loading type="wave" style="color: #2979ff" />
-<var-loading type="rect" style="color: #2979ff" />
-<var-loading type="disappear" style="color: #2979ff" />
+<var-loading type="circle" color="#2979ff" />
+<var-loading type="cube" color="#2979ff" />
+<var-loading type="wave" color="#2979ff" />
+<var-loading type="rect" color="#2979ff" />
+<var-loading type="disappear" color="#2979ff" />
 ```
 
 ### Size
@@ -42,8 +42,9 @@ createApp().use(Loading)
 
 ### Props
 
-| prop    | Description                                             | Type     | Default        |
-| ------- | ------------------------------------------------------- | -------- | -------------- |
-| `color` | Loading color                                           | _string_ | `currentColor` |
-| `type`  | Can be set to `circle` `wave` `cube` `rect` `disappear` | _string_ | `circle`       |
-| `size`  | Can be set to `large` `normal` `small` `mini`           | _string_ | `normal`       |
+| prop     | Description                                             | Type     | Default        |
+| -------- | ------------------------------------------------------- | -------- | -------------- |
+| `color`  | Loading color                                           | _string_ | `currentColor` |
+| `type`   | Can be set to `circle` `wave` `cube` `rect` `disappear` | _string_ | `circle`       |
+| `size`   | Can be set to `large` `normal` `small` `mini`           | _string_ | `normal`       |
+| `radius` | Set size when the `type` is `circle`              | _string \| number_  | `-` |

packages/varlet-ui/src/loading/docs/zh-CN.md

@@ -21,11 +21,11 @@ createApp().use(Loading)
 
 ### Loading 颜色
 ```html
-<var-loading type="circle" style="color: #2979ff" />
-<var-loading type="cube"  style="color: #2979ff"/>
-<var-loading type="wave" style="color: #2979ff" />
-<var-loading type="rect" style="color: #2979ff" />
-<var-loading type="disappear" style="color: #2979ff" />
+<var-loading type="circle" color="#2979ff" />
+<var-loading type="cube" color="#2979ff" />
+<var-loading type="wave" color="#2979ff" />
+<var-loading type="rect" color="#2979ff" />
+<var-loading type="disappear" color="#2979ff" />
 ```
 
 ### Loading 大小
@@ -42,8 +42,9 @@ createApp().use(Loading)
 
 ### 属性
 
-| 参数    | 说明                                                               | 类型     | 默认值         |
-| ------- | ------------------------------------------------------------------ | -------- | -------------- |
-| `color` | loading 的颜色                                                     | _string_ | `currentColor` |
-| `type`  | loading 的类型，可选值为 `circle` `wave` `cube` `rect` `disappear` | _string_ | `circle`       |
-| `size`  | loading 的大小，可选值位 `large` `normal` `small` `mini`           | _string_ | `normal`       |
+| 参数     | 说明                                                              | 类型     | 默认值          |
+| -------- | ---------------------------------------------------------------- | -------- | -------------- |
+| `color`  | loading 的颜色                                                    | _string_ | `currentColor` |
+| `type`   | loading 的类型，可选值为 `circle` `wave` `cube` `rect` `disappear` | _string_ | `circle`       |
+| `size`   | loading 的大小，可选值位 `large` `normal` `small` `mini`           | _string_ | `normal`       |
+| `radius` | loading 的类型为`circle`时，可设置其大小                            | _string \| number_  | `-` |

packages/varlet-ui/src/loading/example/index.vue

@@ -13,17 +13,17 @@
     <div class="loading-demo__type">
       <app-type>{{ pack.color }}</app-type>
       <div class="loading-demo__type-block">
-        <var-loading type="circle" style="color: #2979ff" />
-        <var-loading type="cube" style="color: #2979ff" />
-        <var-loading type="wave" style="color: #2979ff" />
-        <var-loading type="rect" style="color: #2979ff" />
-        <var-loading type="disappear" style="color: #2979ff" />
+        <var-loading type="circle" color="#2979ff" />
+        <var-loading type="cube" color="#2979ff" />
+        <var-loading type="wave" color="#2979ff" />
+        <var-loading type="rect" color="#2979ff" />
+        <var-loading type="disappear" color="#2979ff" />
       </div>
     </div>
     <div class="loading-demo__size">
       <app-type>{{ pack.size }}</app-type>
       <div class="loading-demo__size-block">
-        <var-loading type="circle" radius="12" />
+        <var-loading type="circle" size="small" />
         <var-loading type="cube" size="small" />
         <var-loading type="wave" size="small" />
         <var-loading type="rect" size="small" />

packages/varlet-ui/src/loading/props.ts

@@ -21,7 +21,6 @@ export const props = {
   },
   radius: {
     type: [String, Number],
-    default: 15,
   },
   // loading尺寸
   size: {