refactor(components): [steps] use useNamespace (#5944)

packages/components/steps/src/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
+  <div :class="[ns.b(), ns.m(simple ? 'simple' : direction)]">
-    :class="[
-      'el-steps',
-      simple ? 'el-steps--simple' : `el-steps--${direction}`,
-    ]"
-  >
     <slot></slot>
   </div>
 </template>
@@ -13,6 +8,7 @@
 import { defineComponent, watch, ref, provide } from 'vue'
 
 import { CHANGE_EVENT } from '@element-plus/constants'
+import { useNamespace } from '@element-plus/hooks'
 
 export default defineComponent({
   name: 'ElSteps',
@@ -54,6 +50,7 @@ export default defineComponent({
   },
   emits: [CHANGE_EVENT],
   setup(props, { emit }) {
+    const ns = useNamespace('steps')
     const steps = ref([])
 
     watch(steps, () => {
@@ -73,6 +70,7 @@ export default defineComponent({
 
     return {
       steps,
+      ns,
     }
   },
 })

packages/components/steps/src/item.vue

@@ -2,43 +2,43 @@
   <div
     :style="style"
     :class="[
-      'el-step',
+      ns.b(),
-      isSimple ? 'is-simple' : `is-${parent.props.direction}`,
+      ns.is(isSimple ? 'simple' : parent.props.direction),
-      isLast && !space && !isCenter && 'is-flex',
+      ns.is('flex', isLast && !space && !isCenter),
-      isCenter && !isVertical && !isSimple && 'is-center',
+      ns.is('center', isCenter && !isVertical && !isSimple),
     ]"
   >
     <!-- icon & line -->
-    <div :class="['el-step__head', `is-${currentStatus}`]">
+    <div :class="[ns.e('head'), ns.is(currentStatus)]">
-      <div v-if="!isSimple" class="el-step__line">
+      <div v-if="!isSimple" :class="ns.e('line')">
-        <i class="el-step__line-inner" :style="lineStyle"></i>
+        <i :class="ns.e('line-inner')" :style="lineStyle"></i>
       </div>
 
-      <div :class="['el-step__icon', `is-${icon ? 'icon' : 'text'}`]">
+      <div :class="[ns.e('icon'), ns.is(icon ? 'icon' : 'text')]">
         <slot
           v-if="currentStatus !== 'success' && currentStatus !== 'error'"
           name="icon"
         >
-          <el-icon v-if="icon" class="el-step__icon-inner">
+          <el-icon v-if="icon" :class="ns.e('icon-inner')">
             <component :is="icon" />
           </el-icon>
-          <div v-if="!icon && !isSimple" class="el-step__icon-inner">
+          <div v-if="!icon && !isSimple" :class="ns.e('icon-inner')">
             {{ index + 1 }}
           </div>
         </slot>
-        <el-icon v-else class="el-step__icon-inner is-status">
+        <el-icon v-else :class="[ns.e('icon-inner'), ns.is('status')]">
           <check v-if="currentStatus === 'success'" />
           <close v-else />
         </el-icon>
       </div>
     </div>
     <!-- title & description -->
-    <div class="el-step__main">
+    <div :class="ns.e('main')">
-      <div :class="['el-step__title', `is-${currentStatus}`]">
+      <div :class="[ns.e('title'), ns.is(currentStatus)]">
         <slot name="title">{{ title }}</slot>
       </div>
-      <div v-if="isSimple" class="el-step__arrow"></div>
+      <div v-if="isSimple" :class="ns.e('arrow')"></div>
-      <div v-else :class="['el-step__description', `is-${currentStatus}`]">
+      <div v-else :class="[ns.e('description'), ns.is(currentStatus)]">
         <slot name="description">{{ description }}</slot>
       </div>
     </div>
@@ -60,6 +60,7 @@ import {
 import { ElIcon } from '@element-plus/components/icon'
 import { Close, Check } from '@element-plus/icons-vue'
 
+import { useNamespace } from '@element-plus/hooks'
 import type { Ref, PropType, Component } from 'vue'
 
 export interface IStepsProps {
@@ -112,6 +113,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const ns = useNamespace('step')
     const index = ref(-1)
     const lineStyle = ref({})
     const internalStatus = ref('')
@@ -222,6 +224,7 @@ export default defineComponent({
     parent.steps.value = [...parent.steps.value, stepItemState]
 
     return {
+      ns,
       index,
       lineStyle,
       currentStatus,