refactor(components): [radio,radio-button,radio-group] use useNamespace (#5731)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

packages/components/radio/src/radio-button.vue

@@ -1,13 +1,11 @@
 <template>
   <label
-    class="el-radio-button"
     :class="[
-      size ? 'el-radio-button--' + size : '',
-      {
-        'is-active': modelValue === label,
-        'is-disabled': disabled,
-        'is-focus': focus,
-      },
+      ns.b('button'),
+      ns.is('active', modelValue === label),
+      ns.is('disabled', disabled),
+      ns.is('focus', focus),
+      ns.bm('button', size),
     ]"
     role="radio"
     :aria-checked="modelValue === label"
@@ -18,7 +16,7 @@
     <input
       ref="radioRef"
       v-model="modelValue"
-      class="el-radio-button__original-radio"
+      :class="ns.be('button', 'original-radio')"
       :value="label"
       type="radio"
       :name="name"
@@ -28,7 +26,7 @@
       @blur="focus = false"
     />
     <span
-      class="el-radio-button__inner"
+      :class="ns.be('button', 'inner')"
       :style="modelValue === label ? activeStyle : {}"
       @keydown.stop
     >
@@ -40,6 +38,7 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { useRadio } from './radio'
 import { radioButtonProps } from './radio-button'
 import type { CSSProperties } from 'vue'
@@ -49,6 +48,7 @@ export default defineComponent({
   props: radioButtonProps,
 
   setup(props, { emit }) {
+    const ns = useNamespace('radio')
     const {
       radioRef,
       isGroup,
@@ -70,6 +70,7 @@ export default defineComponent({
     })
 
     return {
+      ns,
       isGroup,
       size,
       disabled,

packages/components/radio/src/radio-group.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="radioGroupRef"
-    class="el-radio-group"
+    :class="ns.b('group')"
     role="radiogroup"
     @keydown="handleKeydown"
   >
@@ -22,7 +22,7 @@ import {
 } from 'vue'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { radioGroupKey } from '@element-plus/tokens'
-import { useFormItem } from '@element-plus/hooks'
+import { useFormItem, useNamespace } from '@element-plus/hooks'
 import { radioGroupEmits, radioGroupProps } from './radio-group'
 import type { RadioGroupProps } from '..'
 
@@ -32,6 +32,7 @@ export default defineComponent({
   emits: radioGroupEmits,
 
   setup(props, ctx) {
+    const ns = useNamespace('radio')
     const radioGroupRef = ref<HTMLDivElement>()
     const { formItem } = useFormItem()
 
@@ -99,6 +100,7 @@ export default defineComponent({
     )
 
     return {
+      ns,
       radioGroupRef,
       handleKeydown,
     }

packages/components/radio/src/radio.vue

@@ -1,13 +1,13 @@
 <template>
   <label
-    class="el-radio"
-    :class="{
-      [`el-radio--${size || ''}`]: size,
-      'is-disabled': disabled,
-      'is-focus': focus,
-      'is-bordered': border,
-      'is-checked': modelValue === label,
-    }"
+    :class="[
+      ns.b(),
+      ns.is('disabled', disabled),
+      ns.is('focus', focus),
+      ns.is('bordered', border),
+      ns.is('checked', modelValue === label),
+      ns.m(size),
+    ]"
     role="radio"
     :aria-checked="modelValue === label"
     :aria-disabled="disabled"
@@ -15,17 +15,17 @@
     @keydown.space.stop.prevent="modelValue = disabled ? modelValue : label"
   >
     <span
-      class="el-radio__input"
-      :class="{
-        'is-disabled': disabled,
-        'is-checked': modelValue === label,
-      }"
+      :class="[
+        ns.e('input'),
+        ns.is('disabled', disabled),
+        ns.is('checked', modelValue === label),
+      ]"
     >
-      <span class="el-radio__inner"></span>
+      <span :class="ns.e('inner')"></span>
       <input
         ref="radioRef"
         v-model="modelValue"
-        class="el-radio__original"
+        :class="ns.e('original')"
         :value="label"
         type="radio"
         aria-hidden="true"
@@ -37,7 +37,7 @@
         @change="handleChange"
       />
     </span>
-    <span class="el-radio__label" @keydown.stop>
+    <span :class="ns.e('label')" @keydown.stop>
       <slot>
         {{ label }}
       </slot>
@@ -47,6 +47,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { useRadio, radioEmits, radioProps } from './radio'
 
 export default defineComponent({
@@ -55,6 +56,7 @@ export default defineComponent({
   emits: radioEmits,
 
   setup(props, { emit }) {
+    const ns = useNamespace('radio')
     const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } =
       useRadio(props, emit)
 
@@ -63,6 +65,7 @@ export default defineComponent({
     }
 
     return {
+      ns,
       focus,
       isGroup,
       modelValue,