refactor(components): [checkbox] use useNamespace (#5493)

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

@@ -1,11 +1,11 @@
 <template>
   <label
-    class="el-checkbox-button"
     :class="[
-      size ? 'el-checkbox-button--' + size : '',
-      { 'is-disabled': isDisabled },
-      { 'is-checked': isChecked },
-      { 'is-focus': focus },
+      ns.b('button'),
+      ns.bm('button', size),
+      ns.is('disabled', isDisabled),
+      ns.is('checked', isChecked),
+      ns.is('focus', focus),
     ]"
     role="checkbox"
     :aria-checked="isChecked"
@@ -14,7 +14,7 @@
     <input
       v-if="trueLabel || falseLabel"
       v-model="model"
-      class="el-checkbox-button__original"
+      :class="ns.be('button', 'original')"
       type="checkbox"
       :name="name"
       :tabindex="tabindex"
@@ -28,7 +28,7 @@
     <input
       v-else
       v-model="model"
-      class="el-checkbox-button__original"
+      :class="ns.be('button', 'original')"
       type="checkbox"
       :name="name"
       :tabindex="tabindex"
@@ -41,7 +41,7 @@
 
     <span
       v-if="$slots.default || label"
-      class="el-checkbox-button__inner"
+      :class="ns.be('button', 'inner')"
       :style="isChecked ? activeStyle : null"
     >
       <slot>{{ label }}</slot>
@@ -51,6 +51,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'
 
 export default defineComponent({
@@ -61,6 +62,7 @@ export default defineComponent({
     const { focus, isChecked, isDisabled, size, model, handleChange } =
       useCheckbox(props)
     const { checkboxGroup } = useCheckboxGroup()
+    const ns = useNamespace('checkbox')
 
     const activeStyle = computed(() => {
       const fillValue = checkboxGroup?.fill?.value ?? ''
@@ -80,6 +82,7 @@ export default defineComponent({
       handleChange,
       activeStyle,
       size,
+      ns,
     }
   },
 })

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

@@ -11,7 +11,7 @@ import {
 } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isValidComponentSize } from '@element-plus/utils/validators'
-import { useSize } from '@element-plus/hooks'
+import { useSize, useNamespace } from '@element-plus/hooks'
 import { useCheckboxGroup } from './useCheckbox'
 
 import type { PropType } from 'vue'
@@ -57,6 +57,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const { elFormItem } = useCheckboxGroup()
     const checkboxGroupSize = useSize()
+    const ns = useNamespace('checkbox')
 
     const changeEvent = (value) => {
       emit(UPDATE_MODEL_EVENT, value)
@@ -92,7 +93,7 @@ export default defineComponent({
       return h(
         props.tag,
         {
-          class: 'el-checkbox-group',
+          class: ns.b('group'),
           role: 'group',
           'aria-label': 'checkbox-group',
         },

packages/components/checkbox/src/checkbox.vue

@@ -1,32 +1,32 @@
 <template>
   <label
     :id="id"
-    class="el-checkbox"
     :class="[
-      checkboxSize ? 'el-checkbox--' + checkboxSize : '',
-      { 'is-disabled': isDisabled },
-      { 'is-bordered': border },
-      { 'is-checked': isChecked },
+      ns.b(),
+      ns.m(checkboxSize),
+      ns.is('disabled', isDisabled),
+      ns.is('bordered', border),
+      ns.is('checked', isChecked),
     ]"
     :aria-controls="indeterminate ? controls : null"
   >
     <span
-      class="el-checkbox__input"
-      :class="{
-        'is-disabled': isDisabled,
-        'is-checked': isChecked,
-        'is-indeterminate': indeterminate,
-        'is-focus': focus,
-      }"
+      :class="[
+        ns.e('input'),
+        ns.is('disabled', isDisabled),
+        ns.is('checked', isChecked),
+        ns.is('indeterminate', indeterminate),
+        ns.is('focus', focus),
+      ]"
       :tabindex="indeterminate ? 0 : undefined"
       :role="indeterminate ? 'checkbox' : undefined"
       :aria-checked="indeterminate ? 'mixed' : false"
     >
-      <span class="el-checkbox__inner"></span>
+      <span :class="ns.e('inner')"></span>
       <input
         v-if="trueLabel || falseLabel"
         v-model="model"
-        class="el-checkbox__original"
+        :class="ns.e('original')"
         type="checkbox"
         :aria-hidden="indeterminate ? 'true' : 'false'"
         :name="name"
@@ -41,7 +41,7 @@
       <input
         v-else
         v-model="model"
-        class="el-checkbox__original"
+        :class="ns.e('original')"
         type="checkbox"
         :aria-hidden="indeterminate ? 'true' : 'false'"
         :disabled="isDisabled"
@@ -53,7 +53,7 @@
         @blur="focus = false"
       />
     </span>
-    <span v-if="$slots.default || label" class="el-checkbox__label">
+    <span v-if="$slots.default || label" :class="ns.e('label')">
       <slot></slot>
       <template v-if="!$slots.default">{{ label }}</template>
     </span>
@@ -63,6 +63,7 @@
 import { defineComponent } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox } from './useCheckbox'
 
 import type { PropType } from 'vue'
@@ -110,7 +111,11 @@ export default defineComponent({
   },
   emits: [UPDATE_MODEL_EVENT, 'change'],
   setup(props) {
-    return useCheckbox(props)
+    const ns = useNamespace('checkbox')
+    return {
+      ns,
+      ...useCheckbox(props),
+    }
   },
 })
 </script>