Skip to content
This repository was archived by the owner on Jan 8, 2025. It is now read-only.

Commit 85ed28b

Browse files
ayangwebayangweb
committed
feat(ui/progress): add component progress
1 parent cc342dc commit 85ed28b

File tree

12 files changed

+729
-2
lines changed

12 files changed

+729
-2
lines changed

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

+33-2
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,43 @@ import { toNumber } from '../utils/shared'
6565
export default defineComponent({
6666
name: 'VarProgress',
6767
68+
inheritAttrs: false,
69+
6870
props,
6971
7072
computed: {
71-
value() {
72-
return toNumber(this.props.value)
73+
linearProps() {
74+
const value = toNumber(this.value)
75+
const width = `${value > 100 ? 100 : value}%`
76+
const roundValue = `${value > 100 ? 100 : Math.round(value)}%`
77+
78+
return {
79+
width,
80+
roundValue,
81+
}
82+
},
83+
84+
circleProps() {
85+
const { size, lineWidth, value } = this
86+
const viewBox = `0 0 ${size} ${size}`
87+
const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
88+
const radius = (size - toNumber(lineWidth)) / 2
89+
const perimeter = 2 * Math.PI * radius
90+
const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
91+
92+
return {
93+
viewBox,
94+
roundValue: `${roundValue}%`,
95+
radius,
96+
perimeter,
97+
strokeDasharray,
98+
}
7399
},
74100
},
75101
})
76102
</script>
103+
104+
<style lang="less">
105+
@import '../styles/common';
106+
@import './progress';
107+
</style>

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

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`test circle progress prop 1`] = `
4+
"<div class=\\"var-progress\\">
5+
<!---->
6+
<div class=\\"var-progress-circle\\" style=\\"width: 50px; height: 50px;\\"><svg viewBox=\\"0 0 50 50\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-80deg);\\">
7+
<circle cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" class=\\"var-progress-circle__background\\" style=\\"stroke-dasharray: 131.94689145077132; stroke: #f5cb90;\\"></circle>
8+
<circle cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 39.5840674352314, 131.94689145077132; stroke: #ff9800;\\"></circle>
9+
</svg>
10+
<div class=\\"var-progress-circle__label\\">
11+
30%
12+
</div>
13+
</div>
14+
</div>"
15+
`;
16+
17+
exports[`test linear progress prop 1`] = `
18+
"<div class=\\"var-progress\\">
19+
<div class=\\"var-progress-linear\\">
20+
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
21+
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
22+
<div class=\\"var-progress-linear__certain var-progress-linear__ripple\\" style=\\"background: rgb(255, 152, 0); width: 30%;\\"></div>
23+
</div>
24+
<div class=\\"var-progress-linear__label\\">
25+
<div>success</div>
26+
</div>
27+
</div>
28+
<!---->
29+
</div>"
30+
`;
31+
32+
exports[`test progress example 1`] = `
33+
"<div class=\\"var-progress-outer\\">
34+
<div class=\\"space\\"></div>
35+
<div class=\\"progress-demo__basic\\">
36+
<div class=\\"app-type\\">基本使用</div>
37+
<div class=\\"var-progress\\">
38+
<div class=\\"var-progress-linear\\">
39+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
40+
<!---->
41+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 20%;\\"></div>
42+
</div>
43+
<!---->
44+
</div>
45+
<!---->
46+
</div>
47+
<div class=\\"var-progress\\">
48+
<div class=\\"var-progress-linear\\">
49+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
50+
<!---->
51+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 0%;\\"></div>
52+
</div>
53+
<!---->
54+
</div>
55+
<!---->
56+
</div>
57+
<div class=\\"var-progress\\">
58+
<div class=\\"var-progress-linear\\">
59+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
60+
<!---->
61+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 100%;\\"></div>
62+
</div>
63+
<!---->
64+
</div>
65+
<!---->
66+
</div>
67+
</div>
68+
<div class=\\"progress-demo__label\\">
69+
<div class=\\"app-type\\">显示标签</div>
70+
<div class=\\"var-progress\\">
71+
<div class=\\"var-progress-linear\\">
72+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
73+
<div class=\\"var-progress-linear__background\\"></div>
74+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 30%;\\"></div>
75+
</div>
76+
<div class=\\"var-progress-linear__label\\">
77+
30%
78+
</div>
79+
</div>
80+
<!---->
81+
</div>
82+
<div class=\\"var-progress\\">
83+
<div class=\\"var-progress-linear\\">
84+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
85+
<div class=\\"var-progress-linear__background\\"></div>
86+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 0%;\\"></div>
87+
</div>
88+
<div class=\\"var-progress-linear__label\\">
89+
0%
90+
</div>
91+
</div>
92+
<!---->
93+
</div>
94+
<div class=\\"var-progress\\">
95+
<div class=\\"var-progress-linear\\">
96+
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
97+
<div class=\\"var-progress-linear__background\\"></div>
98+
<div class=\\"var-progress-linear__certain\\" style=\\"width: 100%;\\"></div>
99+
</div>
100+
<div class=\\"var-progress-linear__label\\">success</div>
101+
</div>
102+
<!---->
103+
</div>
104+
</div>
105+
<div class=\\"progress-demo__style\\">
106+
<div class=\\"app-type\\">自定义样式</div>
107+
<div class=\\"var-progress\\">
108+
<div class=\\"var-progress-linear\\">
109+
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
110+
<div class=\\"var-progress-linear__background\\"></div>
111+
<div class=\\"var-progress-linear__certain\\" style=\\"background: rgb(255, 159, 0); width: 30%;\\"></div>
112+
</div>
113+
<!---->
114+
</div>
115+
<!---->
116+
</div>
117+
<div class=\\"var-progress\\">
118+
<div class=\\"var-progress-linear\\">
119+
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
120+
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
121+
<div class=\\"var-progress-linear__certain\\" style=\\"background: rgb(255, 159, 0); width: 60%;\\"></div>
122+
</div>
123+
<!---->
124+
</div>
125+
<!---->
126+
</div>
127+
<div class=\\"var-progress\\">
128+
<div class=\\"var-progress-linear\\">
129+
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
130+
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
131+
<div class=\\"var-progress-linear__certain var-progress-linear__ripple\\" style=\\"background: rgb(255, 159, 0); width: 80%;\\"></div>
132+
</div>
133+
<!---->
134+
</div>
135+
<!---->
136+
</div>
137+
</div>
138+
<div class=\\"app-type\\">环形进度条</div>
139+
<div class=\\"progress-demo__circle\\">
140+
<div class=\\"var-progress\\">
141+
<!---->
142+
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg viewBox=\\"0 0 56 56\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\">
143+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__background\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
144+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 48.06636759992383, 160.22122533307945;\\"></circle>
145+
</svg>
146+
<!---->
147+
</div>
148+
</div>
149+
<div class=\\"space\\"></div>
150+
<div class=\\"var-progress\\">
151+
<!---->
152+
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg viewBox=\\"0 0 56 56\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\">
153+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__background\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
154+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 0, 160.22122533307945;\\"></circle>
155+
</svg>
156+
<div class=\\"var-progress-circle__label\\">
157+
0%
158+
</div>
159+
</div>
160+
</div>
161+
<div class=\\"space\\"></div>
162+
<div class=\\"var-progress\\">
163+
<!---->
164+
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg viewBox=\\"0 0 56 56\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\">
165+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__background\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
166+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 160.22122533307945, 160.22122533307945;\\"></circle>
167+
</svg>
168+
<div class=\\"var-progress-circle__label\\">
169+
100%
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
<div class=\\"app-type\\">隐藏轨道</div>
175+
<div class=\\"progress-demo__circle\\">
176+
<div class=\\"var-progress\\">
177+
<!---->
178+
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg viewBox=\\"0 0 56 56\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\">
179+
<!---->
180+
<circle cx=\\"28\\" cy=\\"28\\" r=\\"26\\" fill=\\"transparent\\" stroke-width=\\"4\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 81.68140899333463, 163.36281798666926;\\"></circle>
181+
</svg>
182+
<!---->
183+
</div>
184+
</div>
185+
</div>
186+
</div>"
187+
`;

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

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import example from '../example'
2+
import Vue from 'vue'
3+
import Progress from '..'
4+
import VarProgress from '../Progress'
5+
import { mount } from '@vue/test-utils'
6+
7+
test('test progress example', () => {
8+
const wrapper = mount(example)
9+
expect(wrapper.html()).toMatchSnapshot()
10+
})
11+
12+
test('test progress plugin', () => {
13+
Vue.use(Progress)
14+
expect(Vue.component(Progress.name)).toBeTruthy()
15+
})
16+
17+
test('test linear progress prop', () => {
18+
const wrapper = mount(VarProgress, {
19+
propsData: {
20+
value: 30,
21+
lineWidth: 8,
22+
color: '#ff9800',
23+
trackColor: '#f5cb90',
24+
ripple: true,
25+
label: true,
26+
},
27+
scopedSlots: {
28+
default: '<div>success</div>',
29+
},
30+
})
31+
32+
expect(wrapper.html()).toMatchSnapshot()
33+
})
34+
35+
test('test circle progress prop', () => {
36+
const wrapper = mount(VarProgress, {
37+
propsData: {
38+
mode: 'circle',
39+
value: 30,
40+
lineWidth: 8,
41+
color: '#ff9800',
42+
trackColor: '#f5cb90',
43+
size: 50,
44+
rotate: 10,
45+
label: true,
46+
},
47+
})
48+
49+
expect(wrapper.html()).toMatchSnapshot()
50+
})

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

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Progress
2+
3+
### Intro
4+
5+
Display the current progress of an operation flow.
6+
7+
### Install
8+
9+
```js
10+
import Vue from 'vue'
11+
import { Progress } from '@varlet-vue2/ui'
12+
13+
Vue.use(Progress)
14+
```
15+
16+
### Basic Usage
17+
18+
Set the current progress through the `value` attribute.
19+
20+
```html
21+
<var-progress :value="20" :track="false" />
22+
<var-progress :value="value" :track="false" />
23+
<var-progress :value="100" :track="false" />
24+
```
25+
26+
### Show Label
27+
28+
The label is displayed through the `label` attribute. The label is the percentage of progress by default. You can use the slot to insert custom content.
29+
30+
```html
31+
<var-progress label :value="30" />
32+
<var-progress label :value="value" />
33+
<var-progress label :value="100">success</var-progress>
34+
```
35+
36+
### Custom Style
37+
38+
Set the line width, progress bar color, track color and ripple loading effect through the attributes of `line-width`, `color`, `track-color` and `ripple`.
39+
40+
```html
41+
<var-progress :value="30" line-width="8" color="#ff9f00" />
42+
<var-progress :value="60" line-width="8" color="#ff9f00" track-color="#f5cb90" />
43+
<var-progress :value="80" ripple line-width="8" color="#ff9f00" track-color="#f5cb90" />
44+
```
45+
46+
### Progress circle
47+
48+
```html
49+
<var-progress mode="circle" :value="30" line-width="5" :size="56" />
50+
<var-progress mode="circle" label :value="value" line-width="5" :size="56" />
51+
<var-progress mode="circle" label :value="100" line-width="5" :size="56" />
52+
```
53+
54+
### Hide Track
55+
56+
Use `track` prop to hide track.
57+
58+
```html
59+
<var-progress mode="circle" :value="50" :size="56" :track="false" />
60+
```
61+
## API
62+
63+
### Props
64+
65+
| prop | Description | Type | Default |
66+
| --------- | ---------------- | -------- | -------- |
67+
| `mode` | Mode of Progress. Optional value is `linear, circle` | _string_ | `linear` |
68+
| `value` | Completion value | _string \| number_ | `0` |
69+
| `line-width` | Width of the progress bar | _string \| number_ | `4` |
70+
| `color` | Color of the progress bar | _string_ | `#005CAF` |
71+
| `track-color` | Color of the progress track | _string_ | `#d8d8d8` |
72+
| `label` | Whether the label is visible or not | _boolean_ | `false` |
73+
| `track` | Whether the progress track is visible or not | _boolean_ | `true` |
74+
| `ripple` | Loading style for progress (only supports linear progress) | _boolean_ | `false` |
75+
| `size` | Size of progress (only supports circle progress) | _string \| number_ | `40` |
76+
| `rotate` | Origin of progress (only supports circle progress) | _number_ | `0` |
77+
78+
### Slots
79+
80+
| Name | Description | SlotProps |
81+
| ----- | -------------- | -------- |
82+
| `default` | Custom label | `-` |
83+
84+
### Style Variables
85+
Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
86+
87+
| Variable | Default |
88+
| --- | --- |
89+
| `--progress-font-size` | `var(--font-size-sm)` |
90+
| `--progress-ripple-color` | `#fff` |
91+
| `--progress-track-color` | `#d8d8d8` |
92+
| `--progress-background` | `var(--color-primary)` |

0 commit comments

Comments
 (0)