From 4a878d3dc3e6c602dd26621ef0f0d186e37c9278 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Mon, 4 Apr 2022 13:39:22 +0800
Subject: [PATCH] perf(progress): add class

---
 packages/varlet-ui/src/progress/Progress.vue  |  31 ++---
 .../__snapshots__/index.spec.js.snap          | 116 +++++++++---------
 packages/varlet-ui/src/progress/progress.less |  24 ++--
 3 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index 62fe80b8460..d189beeb455 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -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"
@@ -35,7 +31,7 @@
           }"
         ></circle>
         <circle
-          class="var-progress-circle__certain"
+          :class="n('circle-certain')"
           :cx="size / 2"
           :cy="size / 2"
           :r="circleProps.radius"
@@ -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>
@@ -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',
@@ -95,6 +94,8 @@ export default defineComponent({
       }
     })
     return {
+      n,
+      classes,
       linearProps,
       circleProps,
     }
diff --git a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
index 8ea0c33e88a..4e25c9b3868 100644
--- a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
@@ -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>"
@@ -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>
@@ -64,32 +64,32 @@ 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>
@@ -97,30 +97,30 @@ exports[`test progress example 1`] = `
   <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>
@@ -131,9 +131,9 @@ 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>
@@ -141,21 +141,21 @@ exports[`test progress example 1`] = `
     <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>
@@ -163,9 +163,9 @@ 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\\">
+      <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>
diff --git a/packages/varlet-ui/src/progress/progress.less b/packages/varlet-ui/src/progress/progress.less
index ab1690497bc..ab65474c5ff 100644
--- a/packages/varlet-ui/src/progress/progress.less
+++ b/packages/varlet-ui/src/progress/progress.less
@@ -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;
@@ -42,11 +42,11 @@
       }
     }
 
-    &__background {
+    &-background {
       background-color: var(--progress-track-color);
     }
 
-    &__certain {
+    &-certain {
       position: absolute;
       background-color: var(--progress-background);
       top: 0;
@@ -54,7 +54,7 @@
       transition: all 0.2s, background-color 0.8s;
     }
 
-    &__label {
+    &-label {
       margin-left: 8px;
       flex: 0;
     }
@@ -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%;