feat(component): add progress component (#155)

* feat(component): add progress component

* chore: add example for progress component

* docs: add progress component doc

* chore: update

---------

Co-authored-by: yzh990918 <251205668@qq.com>

docs/.vitepress/config.ts

@@ -81,6 +81,10 @@ const components = [
         text: 'Tag',
         link: '/components/tag',
       },
+      {
+        text: 'Progress',
+        link: '/components/progress',
+      },
     ],
   },
   {

docs/components/progress.md

@@ -0,0 +1,101 @@
+---
+title: Progress
+lang: en-US
+---
+
+# Progress <new-badge/>
+
+The Progress component allows you to view the progress of any activity.
+
+## Basic usage
+
+You can control the current `percentage` of progress.
+
+<demo src="../example/progress/basic.vue"></demo>
+
+## StrokeWidth
+
+You can set the height of the progress bar using the `stroke-width` property.
+
+You can also use the `text-inside` property to embed text inside the progress bar.
+
+<demo src="../example/progress/stroke-width.vue"></demo>
+
+## Status
+
+The progress bar has three states, each with a different default style.
+
+<demo src="../example/progress/status.vue"></demo>
+
+## Indeterminate
+
+You can have a Progress bar with indeterminate value with the `indeterminate` property.
+
+You cam control the animation duration by `duration`.
+
+<demo src="../example/progress/indeterminate.vue"></demo>
+
+## Color
+
+You can change the color of the Progress with the property `color`, it accepts color string, function, or array.
+
+<demo src="../example/progress/color.vue"></demo>
+
+You have much more customization.
+
+<demo src="../example/progress/custom-color.vue"></demo>
+
+## BgColor
+
+You can change the background of the Progress with the `bg-color` property.
+
+<demo src="../example/progress/bg-color.vue"></demo>
+
+## Striped
+
+You can add `striped` prop to Progress to apply a stripe over the progress bar's background color.
+
+<demo src="../example/progress/striped.vue"></demo>
+
+## Circular Progress
+
+You can specify `type` property to `circle` to use circular progress bar, and use `width` property to change the size of circle.
+
+<demo src="../example/progress/circle.vue"></demo>
+
+## Dashboard Progress
+
+You also can specify `type` property to `dashboard` to use dashboard progress bar.
+
+<demo src="../example/progress/dashboard.vue"></demo>
+
+## Customized content
+
+Use default slot to add customized content.
+
+<demo src="../example/progress/customize.vue"></demo>
+
+
+## Progress Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| percentage | `number` | `0` | Percentage, required. |
+| type | `'line' \| 'circle' \| 'dashboard'` | `'line'` | The type of progress bar.  |
+| stroke-width | `'xs' \| 'sm' \| 'md' \| 'lg' \| number` | `'sm'` |  The width of progress bar.  |
+| text-inside | `boolean` | `false` | Whether to place the percentage inside progress bar, only works when `type` is 'line'. |
+| status | `'success' \| 'error' \| 'warning'` | `''` | The current status of progress bar. |
+| indeterminate | `boolean` | `false` | Set indeterminate progress. |
+| duration | `number` | `3` | Control the animation duration of indeterminate progress. |
+| color | `string \| function \| array` | `''` | Progress bar color. Overrides `status` prop. |
+| bg-color | `string \| function \| array` | `''` | Progress bar Background color. |
+| striped | `boolean` | `false` | Stripe over the progress bar's color. |
+| not-text-color | `boolean` | `false` | Do not synchronize the text color with the progress bar color. |
+| width | `number` | `126` | The canvas width of circle progress bar. |
+| show-text | `boolean` | `true` | Whether to show percentage. |
+| stroke-linecap | `'butt' \| 'round' \| 'square'` | `'round'` | Circle/Dashboard type shape at the end path. |
+| format | `(percentage: number) => string` | `(percentage: number): string => percentage + '%'` | Custom text format. |
+
+## Progress Slots
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| default | `()` | Customized content, parameter is `{ percentage }` |

docs/example/progress/basic.vue

@@ -0,0 +1,7 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="75" />
+    <o-progress :percentage="55" />
+    <o-progress :percentage="35" />
+  </div>
+</template>

docs/example/progress/bg-color.vue

@@ -0,0 +1,10 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="50" stroke-width="lg" color="primary" bg-color="primary" />
+    <o-progress :percentage="30" stroke-width="lg" color="secondary" bg-color="secondary" />
+    <o-progress :percentage="60" stroke-width="lg" color="success" bg-color="success" />
+    <o-progress :percentage="80" stroke-width="lg" color="warning" bg-color="warning" />
+    <o-progress :percentage="20" stroke-width="lg" color="error" bg-color="error" />
+    <o-progress :percentage="60" stroke-width="lg" color="info" bg-color="info" />
+  </div>
+</template>

docs/example/progress/circle.vue

@@ -0,0 +1,9 @@
+<template>
+  <div fscw gap-2>
+    <o-progress type="circle" :percentage="0" />
+    <o-progress type="circle" :percentage="25" />
+    <o-progress type="circle" :percentage="100" status="success" />
+    <o-progress type="circle" :percentage="70" status="warning" />
+    <o-progress type="circle" :percentage="50" status="error" />
+  </div>
+</template>

docs/example/progress/color.vue

@@ -0,0 +1,11 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="50" stroke-width="lg" color="primary" />
+    <o-progress :percentage="30" stroke-width="lg" color="secondary" />
+    <o-progress :percentage="60" stroke-width="lg" color="success" />
+    <o-progress :percentage="80" stroke-width="lg" color="warning" />
+    <o-progress :percentage="20" stroke-width="lg" color="error" />
+    <o-progress :percentage="60" stroke-width="lg" color="info" />
+    <o-progress :percentage="40" stroke-width="lg" color="linear-gradient(to right, #0c02ba, #00ff95)" />
+  </div>
+</template>

docs/example/progress/custom-color.vue

@@ -0,0 +1,47 @@
+<script setup lang='ts'>
+const percentage = ref(20)
+const customColor = ref('#409eff')
+const customColors = [
+  { color: '#f56c6c', percentage: 20 },
+  { color: '#e6a23c', percentage: 40 },
+  { color: '#5cb87a', percentage: 60 },
+  { color: '#1989fa', percentage: 80 },
+  { color: '#6f7ad3', percentage: 100 },
+]
+const customColorMethod = (percentage: number) => {
+  if (percentage < 30)
+    return '#909399'
+
+  if (percentage < 70)
+    return '#e6a23c'
+
+  return '#67c23a'
+}
+const increase = () => {
+  percentage.value += 10
+  if (percentage.value > 100)
+    percentage.value = 100
+}
+const decrease = () => {
+  percentage.value -= 10
+  if (percentage.value < 0)
+    percentage.value = 0
+}
+</script>
+
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="percentage" :color="customColor" />
+    <o-progress :percentage="percentage" :color="customColorMethod" />
+    <o-progress :percentage="percentage" :color="customColors" />
+    <o-progress :percentage="percentage" :color="customColors" />
+    <div>
+      <o-button class="mr-2" @click="increase">
+        +
+      </o-button>
+      <o-button @click="decrease">
+        -
+      </o-button>
+    </div>
+  </div>
+</template>

docs/example/progress/customize.vue

@@ -0,0 +1,27 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="50">
+      <o-button text type="primary">
+        Content
+      </o-button>
+    </o-progress>
+    <o-progress :percentage="50" :text-inside="true" :stroke-width="20" status="error">
+      <span>Content</span>
+    </o-progress>
+    <div flex gap-2 class="w-fit">
+      <o-progress type="circle" :percentage="100" status="success">
+        <o-button type="success" rounded-full>
+          <template #icon>
+            <div i-carbon-checkmark-filled />
+          </template>
+        </o-button>
+      </o-progress>
+      <o-progress :percentage="80" type="dashboard">
+        <template #default="{ percentage: percentageValue }">
+          <span class="block mt-10px text-28px">{{ percentageValue }}%</span>
+          <span class="block mt-10px text-12px">Progressing</span>
+        </template>
+      </o-progress>
+    </div>
+  </div>
+</template>

docs/example/progress/dashboard.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+const percentage = ref(20)
+const customColors = [
+  { color: '#f56c6c', percentage: 20 },
+  { color: '#e6a23c', percentage: 40 },
+  { color: '#5cb87a', percentage: 60 },
+  { color: '#1989fa', percentage: 80 },
+  { color: '#6f7ad3', percentage: 100 },
+]
+
+onMounted(() => {
+  setInterval(() => {
+    percentage.value = (percentage.value % 100) + 10
+  }, 500)
+})
+</script>
+
+<template>
+  <div fscw gap-2>
+    <o-progress type="dashboard" :percentage="20" :color="customColors" />
+    <o-progress type="dashboard" stroke-width="lg" :percentage="percentage" :color="customColors" />
+  </div>
+</template>

docs/example/progress/indeterminate.vue

@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+const format = percentage => (percentage === 100 ? 'Full' : `${percentage}%`)
+</script>
+
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="50" :indeterminate="true" />
+    <o-progress :percentage="100" :format="format" :indeterminate="true" />
+    <o-progress :percentage="100" status="success" :indeterminate="true" :duration="5" />
+    <o-progress :percentage="100" status="warning" :indeterminate="true" :duration="1" />
+    <o-progress :percentage="50" status="error" :indeterminate="true" />
+  </div>
+</template>

docs/example/progress/status.vue

@@ -0,0 +1,7 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="100" status="success" />
+    <o-progress :percentage="100" status="warning" />
+    <o-progress :percentage="50" status="error" />
+  </div>
+</template>

docs/example/progress/striped.vue

@@ -0,0 +1,7 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="80" stroke-width="lg" color="primary" bg-color="primary" striped />
+    <o-progress :percentage="40" stroke-width="lg" color="secondary" bg-color="secondary" striped />
+    <o-progress :percentage="30" stroke-width="lg" color="success" bg-color="success" striped />
+  </div>
+</template>

docs/example/progress/stroke-width.vue

@@ -0,0 +1,10 @@
+<template>
+  <div flex flex-col gap-2 class="w-1/2">
+    <o-progress :percentage="70" stroke-width="xs" />
+    <o-progress :percentage="70" stroke-width="sm" />
+    <o-progress :percentage="70" stroke-width="md" />
+    <o-progress :percentage="70" stroke-width="lg" />
+    <o-progress :percentage="70" :stroke-width="20" />
+    <o-progress :percentage="70" :stroke-width="30" :text-inside="true" />
+  </div>
+</template>