From c54f4461974a16a768491dd1f9ea2e213c4a3e49 Mon Sep 17 00:00:00 2001
From: bqy <1743369777@qq.com>
Date: Tue, 8 Feb 2022 11:38:42 +0800
Subject: [PATCH] refactor(components): [progress] use useNamespace (#5729)

---
 packages/components/progress/src/progress.vue | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/components/progress/src/progress.vue b/packages/components/progress/src/progress.vue
index fdd2c39b83..f3eee86fec 100644
--- a/packages/components/progress/src/progress.vue
+++ b/packages/components/progress/src/progress.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="el-progress"
     :class="[
-      `el-progress--${type}`,
-      status ? `is-${status}` : '',
+      ns.b(),
+      ns.m(type),
+      ns.is(status),
       {
-        'el-progress--without-text': !showText,
-        'el-progress--text-inside': textInside,
+        [ns.m('without-text')]: !showText,
+        [ns.m('text-inside')]: textInside,
       },
     ]"
     role="progressbar"
@@ -14,21 +14,21 @@
     aria-valuemin="0"
     aria-valuemax="100"
   >
-    <div v-if="type === 'line'" class="el-progress-bar">
+    <div v-if="type === 'line'" :class="ns.b('bar')">
       <div
-        class="el-progress-bar__outer"
+        :class="ns.be('bar', 'outer')"
         :style="{ height: `${strokeWidth}px` }"
       >
         <div
           :class="[
-            'el-progress-bar__inner',
-            { 'el-progress-bar__inner--indeterminate': indeterminate },
+            ns.be('bar', 'inner'),
+            { [ns.bem('bar', 'inner', 'indeterminate')]: indeterminate },
           ]"
           :style="barStyle"
         >
           <div
             v-if="(showText || $slots.default) && textInside"
-            class="el-progress-bar__innerText"
+            :class="ns.be('bar', 'innerText')"
           >
             <slot v-bind="slotData">
               <span>{{ content }}</span>
@@ -39,12 +39,12 @@
     </div>
     <div
       v-else
-      class="el-progress-circle"
+      :class="ns.b('circle')"
       :style="{ height: `${width}px`, width: `${width}px` }"
     >
       <svg viewBox="0 0 100 100">
         <path
-          class="el-progress-circle__track"
+          :class="ns.be('circle', 'track')"
           :d="trackPath"
           stroke="#e5e9f2"
           :stroke-width="relativeStrokeWidth"
@@ -52,7 +52,7 @@
           :style="trailPathStyle"
         />
         <path
-          class="el-progress-circle__path"
+          :class="ns.be('circle', 'path')"
           :d="trackPath"
           :stroke="stroke"
           fill="none"
@@ -64,7 +64,7 @@
     </div>
     <div
       v-if="(showText || $slots.default) && !textInside"
-      class="el-progress__text"
+      :class="ns.e('text')"
       :style="{ fontSize: `${progressTextSize}px` }"
     >
       <slot v-bind="slotData">
@@ -85,6 +85,7 @@ import {
   Check,
   Close,
 } from '@element-plus/icons-vue'
+import { useNamespace } from '@element-plus/hooks'
 import { progressProps } from './progress'
 import type { CSSProperties } from 'vue'
 
@@ -101,6 +102,8 @@ export default defineComponent({
   props: progressProps,
 
   setup(props) {
+    const ns = useNamespace('progress')
+
     const barStyle = computed(
       (): CSSProperties => ({
         width: `${props.percentage}%`,
@@ -234,6 +237,7 @@ export default defineComponent({
     })
 
     return {
+      ns,
       barStyle,
       relativeStrokeWidth,
       radius,