feat(progress): support linear gradient color when mode is circle

packages/varlet-ui/src/progress/Progress.vue

@@ -6,13 +6,13 @@
         :style="{ height: toSizeUnit(lineWidth), background: trackColor }"
       >
         <div v-if="indeterminate" :class="classes([indeterminate, n('linear-indeterminate')])">
-          <div :class="classes(n(`linear--${type}`))" :style="{ background: color }"></div>
-          <div :class="classes(n(`linear--${type}`))" :style="{ background: color }"></div>
+          <div :class="classes(n(`linear--${type}`))" :style="{ background: progressColor }"></div>
+          <div :class="classes(n(`linear--${type}`))" :style="{ background: progressColor }"></div>
         </div>
         <div
           v-else
           :class="classes(n('linear-certain'), n(`linear--${type}`), [ripple, n('linear-ripple')])"
-          :style="{ background: color, width: linearProps.width }"
+          :style="{ background: progressColor, width: linearProps.width }"
         ></div>
       </div>
       <div :class="classes(n('linear-label'), [labelClass, labelClass])" v-if="label">
@@ -27,33 +27,41 @@
       :class="classes(n('circle'), [indeterminate, n('circle-indeterminate')])"
       :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }"
     >
-      <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
-        <circle
+      <svg :class="n('circle-svg')" :viewBox="circleProps.viewBox">
+        <defs v-if="isPlainObject(color)">
+          <linearGradient :id="id" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop
+              v-for="(progress, idx) in linearGradientProgress"
+              :key="idx"
+              :offset="progress"
+              :stop-color="color[progress]"
+            ></stop>
+          </linearGradient>
+        </defs>
+        <path
           v-if="track"
           :class="n('circle-background')"
-          cx="50%"
-          cy="50%"
-          :r="RADIUS"
+          :d="circleProps.path"
           fill="transparent"
           :stroke-width="circleProps.strokeWidth"
           :stroke-dasharray="CIRCUMFERENCE"
           :style="{
             stroke: trackColor,
           }"
-        ></circle>
-        <circle
+        ></path>
+        <path
           :class="classes(n('circle-certain'), n(`circle--${type}`), [indeterminate, n('circle-overlay')])"
-          cx="50%"
-          cy="50%"
-          :r="RADIUS"
+          :d="circleProps.path"
           fill="transparent"
           :stroke-width="circleProps.strokeWidth"
           :stroke-dasharray="CIRCUMFERENCE"
           :stroke-dashoffset="circleProps.strokeOffset"
           :style="{
-            stroke: color,
+            stroke: progressColor,
+            transform: `rotateZ(${rotate}deg)`,
+            transformOrigin: '50% 50%',
           }"
-        ></circle>
+        ></path>
       </svg>
 
       <div :class="classes(n('circle-label'), [labelClass, labelClass])" v-if="label">
@@ -68,7 +76,8 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
-import { toNumber } from '@varlet/shared'
+import { isPlainObject, toNumber } from '@varlet/shared'
+import { useId } from '@varlet/use'
 import { toSizeUnit, toPxNum } from '../utils/elements'
 import { createNamespace } from '../utils/components'
 
@@ -82,6 +91,7 @@ export default defineComponent({
   name,
   props,
   setup(props) {
+    const id = useId()
     const linearProps = computed(() => {
       const value = toNumber(props.value)
       const width = value > ONE_HUNDRED ? ONE_HUNDRED : value
@@ -92,6 +102,7 @@ export default defineComponent({
         roundValue: `${roundValue}%`,
       }
     })
+
     const circleProps = computed(() => {
       const { size, lineWidth, value } = props
 
@@ -101,19 +112,44 @@ export default defineComponent({
       const strokeOffset = `${((ONE_HUNDRED - roundValue) / ONE_HUNDRED) * CIRCUMFERENCE}`
       const strokeWidth = (toPxNum(lineWidth) / toPxNum(size)) * diameter
 
+      const beginPositionX = 0
+      const beginPositionY = -RADIUS
+      const endPositionX = 0
+      const endPositionY = -2 * RADIUS
+      const path = `M ${diameter / 2} ${diameter / 2} m ${beginPositionX} ${beginPositionY} a ${RADIUS} ${RADIUS} 
+        0 1 1 ${endPositionX} ${-endPositionY} a ${RADIUS} ${RADIUS} 0 1 1 ${-endPositionX} ${endPositionY}`
+
       return {
         strokeWidth,
         viewBox,
         strokeOffset,
         roundValue: `${roundValue}%`,
+        path,
       }
     })
 
+    const progressColor = computed(() => {
+      // set linear gradient color for circle progress
+      if (isPlainObject(props.color)) {
+        return `url(#${id.value})`
+      }
+
+      return props.color
+    })
+
+    const linearGradientProgress = computed(() =>
+      Object.keys(props.color!).sort((a, b) => parseFloat(a) - parseFloat(b))
+    )
+
     return {
+      id,
       linearProps,
       CIRCUMFERENCE,
       RADIUS,
       circleProps,
+      progressColor,
+      linearGradientProgress,
+      isPlainObject,
       n,
       classes,
       toSizeUnit,

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

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test progress component props > test circle progress color 1`] = `
+"<div class=\\"var-progress\\">
+  <!--v-if-->
+  <div class=\\"var-progress__circle\\" style=\\"width: 40px; height: 40px;\\"><svg class=\\"var-progress__circle-svg\\" viewBox=\\"0 0 44.44444444444444 44.44444444444444\\">
+      <defs>
+        <linearGradient id=\\"var-progress\\" x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\">
+          <stop offset=\\"0%\\" stop-color=\\"#3fecff\\"></stop>
+          <stop offset=\\"100%\\" stop-color=\\"#6149f6\\"></stop>
+        </linearGradient>
+      </defs>
+      <path class=\\"var-progress__circle-background\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
+        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\"></path>
+      <path class=\\"var-progress__circle-certain var-progress__circle--primary\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
+        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress); transform: rotateZ(0deg); transform-origin: 50% 50%;\\"></path>
+    </svg>
+    <!--v-if-->
+  </div>
+</div>"
+`;

packages/varlet-ui/src/progress/__tests__/index.spec.js

@@ -53,7 +53,7 @@ describe('test progress component props', () => {
     wrapper.unmount()
   })
 
-  test('test progress color', () => {
+  test('test linear progress color', () => {
     const wrapper = mount(VarProgress, {
       props: {
         color: 'red',
@@ -64,6 +64,21 @@ describe('test progress component props', () => {
     wrapper.unmount()
   })
 
+  test('test circle progress color', () => {
+    const wrapper = mount(VarProgress, {
+      props: {
+        color: {
+          '0%': '#3fecff',
+          '100%': '#6149f6',
+        },
+        mode: 'circle',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
+
   test('test progress track-color', () => {
     const wrapper = mount(VarProgress, {
       props: {
@@ -134,7 +149,8 @@ describe('test progress component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-progress__circle-svg').attributes('style')).toContain('transform: rotate(-80deg);')
+    expect(wrapper.find('.var-progress__circle-certain').attributes('style')).toContain('transform: rotateZ(10deg);')
+    expect(wrapper.find('.var-progress__circle-certain').attributes('style')).toContain('transform-origin: 50% 50%;')
     wrapper.unmount()
   })
 

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

@@ -8,21 +8,21 @@ Display the current progress of an operation flow.
 
 ```html
 <script setup>
-  import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
-  const value = ref(0)
-  const interval = ref(0)
+const value = ref(0)
+const interval = ref(0)
 
-  onMounted(() => {
-    interval.value = window.setInterval(() => {
-      if (value.value >= 100) value.value = 0
-      else value.value += 20
-    }, 1000)
-  })
+onMounted(() => {
+  interval.value = window.setInterval(() => {
+    if (value.value >= 100) value.value = 0
+    else value.value += 20
+  }, 1000)
+})
 
-  onUnmounted(() => {
-    window.clearInterval(interval.value)
-  })
+onUnmounted(() => {
+  window.clearInterval(interval.value)
+})
 </script>
 
 <template>
@@ -39,11 +39,17 @@ Display the current progress of an operation flow.
 Set the line width, progress bar color and track color through the attributes of `type`, `line-width`, `color`, `track-color`.
 
 ```html
+<script setup>
+import { ref } from 'vue'
+
+const gradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
+</script>
 <template>
   <var-space direction="column" :size="[12, 12]">
+    <var-progress :value="40" :color="gradientColor"/>
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
-    <var-progress value="80" line-width="8" color="#ff9f00" track-color="#f5cb90" />
+    <var-progress :value="80" :line-width="8" color="#ff9f00" track-color="#f5cb90" />
   </var-space>
 </template>
 ```
@@ -52,25 +58,30 @@ Set the line width, progress bar color and track color through the attributes of
 
 ```html
 <script setup>
-  import { ref, onMounted, onUnmounted } from 'vue'
-
-  const value = ref(0)
-  const interval = ref(0)
-
-  onMounted(() => {
-    interval.value = window.setInterval(() => {
-      if (value.value >= 100) value.value = 0
-      else value.value += 20
-    }, 1000)
-  })
-
-  onUnmounted(() => {
-    window.clearInterval(interval.value)
-  })
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const value = ref(0)
+const interval = ref(0)
+const gradientColor = ref({
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+})
+
+onMounted(() => {
+  interval.value = window.setInterval(() => {
+    if (value.value >= 100) value.value = 0
+    else value.value += 20
+  }, 1000)
+})
+
+onUnmounted(() => {
+  window.clearInterval(interval.value)
+})
 </script>
 
 <template>
   <var-space :size="[20, 20]">
+    <var-progress mode="circle" :value="50" :size="60"  :color="gradientColor" />
     <var-progress mode="circle" :value="75" :size="60" :track="false" />
     <var-progress mode="circle" label :value="value" :line-width="5" :size="60" />
     <var-progress mode="circle" type="success" label :value="100" :line-width="5" :size="60">
@@ -108,7 +119,7 @@ Enable indeterminate animation through the `indeterminate` attribute when loadin
 | `type`        | Progress type, Can be set to `default` `primary` `info` `success` `warning` `danger` | _string_  | `primary` |
 | `value`       | Completion value                                                                    | _string \| number_   |  `0`  |
 | `line-width`  | Width of the progress bar                                                           | _string \| number_   | `4` |
-| `color`       | Color of the progress bar                                                           | _string_ | `#005CAF` |
+| `color`       | Color of the progress bar (The circular progress bar sets the gradient color, please use object)                                    | _string \| object_ | `-` |
 | `track-color` | Color of the progress track                                                         | _string_ | `#d8d8d8` |
 | `label`       | Whether the label is visible or not                                                 | _boolean_ | `false`   |
 | `label-class` | Custom label class name                                                             | _string_ | `-`       |

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

@@ -39,8 +39,14 @@ onUnmounted(() => {
 通过 `type`、`line-width`、`color`、`track-color` 属性设置线宽、进度条颜色、轨道颜色。
 
 ```html
+<script setup>
+import { ref } from 'vue'
+
+const gradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
+</script>
 <template>
   <var-space direction="column" :size="[12, 12]">
+    <var-progress :value="40" :color="gradientColor"/>
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
     <var-progress :value="80" :line-width="8" color="#ff9f00" track-color="#f5cb90" />
@@ -56,6 +62,10 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const value = ref(0)
 const interval = ref(0)
+const gradientColor = ref({
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+})
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -71,6 +81,7 @@ onUnmounted(() => {
 
 <template>
   <var-space :size="[20, 20]">
+    <var-progress mode="circle" :value="50" :size="60"  :color="gradientColor" />
     <var-progress mode="circle" :value="75" :size="60" :track="false" />
     <var-progress mode="circle" label :value="value" :line-width="5" :size="60" />
     <var-progress mode="circle" type="success" label :value="100" :line-width="5" :size="60">
@@ -108,7 +119,7 @@ onUnmounted(() => {
 | `type`        | 类型，可选值为 `default` `primary` `info` `success` `warning` `danger` | _string_ | `primary`      |
 | `value`       | `progress` 的进度                                                  | _string \| number_   |  `0`  |
 | `line-width`  | `progress` 的线宽                                                  | _string \| number_   | `4` |
-| `color`       | `progress` 的颜色                                                  | _string_ | `#005CAF` |
+| `color`       | `progress` 的颜色 (环形进度条设置渐变色请使用object)                                                  | _string \| object_ | `-` |
 | `track-color` | `progress` 轨道的颜色                                                | _string_ | `#d8d8d8` |
 | `label`       | 是否显示 `label`                                                    | _boolean_ | `false`   |
 | `label-class` | 自定义 `label` 的类名                                                 | _string_ | `-`       |

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

@@ -8,6 +8,11 @@ import { pack, use } from './locale'
 
 const value = ref(0)
 const interval = ref(0)
+const circleGradientColor = ref({
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+})
+const linearGradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -34,13 +39,15 @@ onUnmounted(() => {
 
   <app-type>{{ pack.style }}</app-type>
   <var-space direction="column" :size="['3vh', '3vh']">
+    <var-progress :value="40" :color="linearGradientColor" />
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
     <var-progress value="80" line-width="8" color="#ff9f00" track-color="#f5cb90" />
   </var-space>
 
   <app-type>{{ pack.circle }}</app-type>
   <var-space :size="['8vmin', '8vmin']">
+    <var-progress mode="circle" :value="100" size="18vmin" :color="circleGradientColor" />
     <var-progress mode="circle" :value="75" size="18vmin" :track="false" />
     <var-progress mode="circle" label :value="value" line-width="5" size="18vmin" />
     <var-progress mode="circle" type="success" label :value="100" line-width="5" size="18vmin"> success </var-progress>

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

@@ -13,7 +13,7 @@ export const props = {
     type: [Number, String],
     default: 4,
   },
-  color: String,
+  color: [String, Object] as PropType<string | Record<string, string>>,
   trackColor: String,
   ripple: Boolean,
   value: {