Skip to content

Commit

Permalink
perf(progress): add class
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeADre
BeADre committed Apr 4, 2022
1 parent 0239e51 commit 4a878d3
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 85 deletions.
31 changes: 16 additions & 15 deletions packages/varlet-ui/src/progress/Progress.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
<template>
<div class="var-progress">
<div class="var-progress-linear" v-if="mode === 'linear'">
<div class="var-progress-linear__block" :style="{ height: `${lineWidth}px` }" v-bind="$attrs">
<div class="var-progress-linear__background" v-if="track" :style="{ background: trackColor }"></div>
<div :class="n()">
<div :class="n('linear')" v-if="mode === 'linear'">
<div :class="n('linear-block')" :style="{ height: `${lineWidth}px` }" v-bind="$attrs">
<div :class="n('linear-background')" v-if="track" :style="{ background: trackColor }"></div>
<div
:class="`var-progress-linear__certain${ripple ? ' var-progress-linear__ripple' : ''}`"
:class="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
:style="{ background: color, width: linearProps.width }"
></div>
</div>
<div class="var-progress-linear__label" v-bind="$attrs" v-if="label">
<div :class="n('linear-label')" v-bind="$attrs" v-if="label">
<slot>
{{ linearProps.roundValue }}
</slot>
</div>
</div>

<div class="var-progress-circle" v-if="mode === 'circle'" :style="{ width: `${size}px`, height: `${size}px` }">
<svg
class="var-progress-circle__svg"
:style="{ transform: `rotate(${rotate - 90}deg)` }"
:viewBox="circleProps.viewBox"
>
<div :class="n('circle')" v-if="mode === 'circle'" :style="{ width: `${size}px`, height: `${size}px` }">
<svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
<circle
v-if="track"
class="var-progress-circle__background"
:class="n('circle-background')"
:cx="size / 2"
:cy="size / 2"
:r="circleProps.radius"
Expand All @@ -35,7 +31,7 @@
}"
></circle>
<circle
class="var-progress-circle__certain"
:class="n('circle-certain')"
:cx="size / 2"
:cy="size / 2"
:r="circleProps.radius"
Expand All @@ -48,7 +44,7 @@
></circle>
</svg>

<div class="var-progress-circle__label" v-if="label" v-bind="$attrs">
<div :class="n('circle-label')" v-if="label" v-bind="$attrs">
<slot>
{{ circleProps.roundValue }}
</slot>
Expand All @@ -61,6 +57,9 @@
import { defineComponent, computed } from 'vue'
import { props } from './props'
import { toNumber } from '../utils/shared'
import { createNamespace } from '../utils/components'
const { n, classes } = createNamespace('progress')
export default defineComponent({
name: 'VarProgress',
Expand Down Expand Up @@ -95,6 +94,8 @@ export default defineComponent({
}
})
return {
n,
classes,
linearProps,
circleProps,
}
Expand Down
116 changes: 58 additions & 58 deletions packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@
exports[`test circle progress prop 1`] = `
"<div class=\\"var-progress\\">
<!--v-if-->
<div class=\\"var-progress-circle\\" style=\\"width: 50px; height: 50px;\\"><svg class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-80deg);\\" viewBox=\\"0 0 50 50\\">
<circle class=\\"var-progress-circle__background\\" cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" style=\\"stroke-dasharray: 131.94689145077132; stroke: #f5cb90;\\"></circle>
<circle class=\\"var-progress-circle__certain\\" cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" style=\\"stroke-dasharray: 39.5840674352314, 131.94689145077132; stroke: #ff9800;\\"></circle>
<div class=\\"var-progress__circle\\" style=\\"width: 50px; height: 50px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-80deg);\\" viewBox=\\"0 0 50 50\\">
<circle class=\\"var-progress__circle-background\\" cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" style=\\"stroke-dasharray: 131.94689145077132; stroke: #f5cb90;\\"></circle>
<circle class=\\"var-progress__circle-certain\\" cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" style=\\"stroke-dasharray: 39.5840674352314, 131.94689145077132; stroke: #ff9800;\\"></circle>
</svg>
<div class=\\"var-progress-circle__label\\">30%</div>
<div class=\\"var-progress__circle-label\\">30%</div>
</div>
</div>"
`;
exports[`test linear progress prop 1`] = `
"<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress-linear__certain var-progress-linear__ripple\\" style=\\"background: rgb(255, 152, 0); width: 30%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress__linear-background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress__linear-certain var-progress__linear-ripple\\" style=\\"background: rgb(255, 152, 0); width: 30%;\\"></div>
</div>
<div class=\\"var-progress-linear__label\\">success</div>
<div class=\\"var-progress__linear-label\\">success</div>
</div>
<!--v-if-->
</div>"
Expand All @@ -31,30 +31,30 @@ exports[`test progress example 1`] = `
<div class=\\"progress-demo__basic\\">
<div class=\\"app-type\\">基本使用</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<!--v-if-->
<div class=\\"var-progress-linear__certain\\" style=\\"width: 20%;\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 20%;\\"></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<!--v-if-->
<div class=\\"var-progress-linear__certain\\" style=\\"width: 0%;\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 0%;\\"></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<!--v-if-->
<div class=\\"var-progress-linear__certain\\" style=\\"width: 100%;\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 100%;\\"></div>
</div>
<!--v-if-->
</div>
Expand All @@ -64,63 +64,63 @@ exports[`test progress example 1`] = `
<div class=\\"progress-demo__label\\">
<div class=\\"app-type\\">显示标签</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress-linear__background\\"></div>
<div class=\\"var-progress-linear__certain\\" style=\\"width: 30%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear-background\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 30%;\\"></div>
</div>
<div class=\\"var-progress-linear__label\\">30%</div>
<div class=\\"var-progress__linear-label\\">30%</div>
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress-linear__background\\"></div>
<div class=\\"var-progress-linear__certain\\" style=\\"width: 0%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear-background\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 0%;\\"></div>
</div>
<div class=\\"var-progress-linear__label\\">0%</div>
<div class=\\"var-progress__linear-label\\">0%</div>
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress-linear__background\\"></div>
<div class=\\"var-progress-linear__certain\\" style=\\"width: 100%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 4px;\\">
<div class=\\"var-progress__linear-background\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"width: 100%;\\"></div>
</div>
<div class=\\"var-progress-linear__label\\">success</div>
<div class=\\"var-progress__linear-label\\">success</div>
</div>
<!--v-if-->
</div>
</div>
<div class=\\"progress-demo__style\\">
<div class=\\"app-type\\">自定义样式</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress-linear__background\\"></div>
<div class=\\"var-progress-linear__certain\\" style=\\"background: rgb(255, 159, 0); width: 30%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress__linear-background\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"background: rgb(255, 159, 0); width: 30%;\\"></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress-linear__certain\\" style=\\"background: rgb(255, 159, 0); width: 60%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress__linear-background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress__linear-certain\\" style=\\"background: rgb(255, 159, 0); width: 60%;\\"></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"var-progress\\">
<div class=\\"var-progress-linear\\">
<div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress-linear__certain var-progress-linear__ripple\\" style=\\"background: rgb(255, 159, 0); width: 80%;\\"></div>
<div class=\\"var-progress__linear\\">
<div class=\\"var-progress__linear-block\\" style=\\"height: 8px;\\">
<div class=\\"var-progress__linear-background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
<div class=\\"var-progress__linear-certain var-progress__linear-ripple\\" style=\\"background: rgb(255, 159, 0); width: 80%;\\"></div>
</div>
<!--v-if-->
</div>
Expand All @@ -131,41 +131,41 @@ exports[`test progress example 1`] = `
<div class=\\"progress-demo__circle\\">
<div class=\\"var-progress\\">
<!--v-if-->
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress-circle__background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress-circle__certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 48.06636759992383, 160.22122533307945;\\"></circle>
<div class=\\"var-progress__circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress__circle-background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress__circle-certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 48.06636759992383, 160.22122533307945;\\"></circle>
</svg>
<!--v-if-->
</div>
</div>
<div class=\\"space\\"></div>
<div class=\\"var-progress\\">
<!--v-if-->
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress-circle__background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress-circle__certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 0, 160.22122533307945;\\"></circle>
<div class=\\"var-progress__circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress__circle-background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress__circle-certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 0, 160.22122533307945;\\"></circle>
</svg>
<div class=\\"var-progress-circle__label\\">0%</div>
<div class=\\"var-progress__circle-label\\">0%</div>
</div>
</div>
<div class=\\"space\\"></div>
<div class=\\"var-progress\\">
<!--v-if-->
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress-circle__background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress-circle__certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945, 160.22122533307945;\\"></circle>
<div class=\\"var-progress__circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<circle class=\\"var-progress__circle-background\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945;\\"></circle>
<circle class=\\"var-progress__circle-certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"25.5\\" fill=\\"transparent\\" stroke-width=\\"5\\" style=\\"stroke-dasharray: 160.22122533307945, 160.22122533307945;\\"></circle>
</svg>
<div class=\\"var-progress-circle__label\\">100%</div>
<div class=\\"var-progress__circle-label\\">100%</div>
</div>
</div>
</div>
<div class=\\"app-type\\">隐藏轨道</div>
<div class=\\"progress-demo__circle\\">
<div class=\\"var-progress\\">
<!--v-if-->
<div class=\\"var-progress-circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<div class=\\"var-progress__circle\\" style=\\"width: 56px; height: 56px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 56 56\\">
<!--v-if-->
<circle class=\\"var-progress-circle__certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"26\\" fill=\\"transparent\\" stroke-width=\\"4\\" style=\\"stroke-dasharray: 81.68140899333463, 163.36281798666926;\\"></circle>
<circle class=\\"var-progress__circle-certain\\" cx=\\"28\\" cy=\\"28\\" r=\\"26\\" fill=\\"transparent\\" stroke-width=\\"4\\" style=\\"stroke-dasharray: 81.68140899333463, 163.36281798666926;\\"></circle>
</svg>
<!--v-if-->
</div>
Expand Down
24 changes: 12 additions & 12 deletions packages/varlet-ui/src/progress/progress.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@
position: relative;
font-size: var(--progress-font-size);

&-linear {
&__linear {
display: flex;
align-items: center;

&__block {
&-block {
flex: 1;
position: relative;
overflow: hidden;
}

&__background,
&__certain {
&-background,
&-certain {
width: 100%;
height: 100%;
}

&__ripple {
&-ripple {
&::after {
position: absolute;
width: 0;
Expand All @@ -42,19 +42,19 @@
}
}

&__background {
&-background {
background-color: var(--progress-track-color);
}

&__certain {
&-certain {
position: absolute;
background-color: var(--progress-background);
top: 0;
left: 0;
transition: all 0.2s, background-color 0.8s;
}

&__label {
&-label {
margin-left: 8px;
flex: 0;
}
Expand All @@ -75,20 +75,20 @@
}
}

&-circle {
&__circle {
position: relative;

&__background {
&-background {
stroke: var(--progress-track-color);
}

&__certain {
&-certain {
transition: all 0.2s;
stroke: var(--progress-background);
position: absolute;
}

&__label {
&-label {
position: absolute;
left: 50%;
top: 50%;
Expand Down

0 comments on commit 4a878d3

Please sign in to comment.