refactor(components): [checkbox] switch to script-setup syntax (#7794)

* refactor: checkbox switch to script-setup syntax

* refactor: checkbox use useSizeProps and edit test

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -5,13 +5,12 @@ import { ElFormItem } from '@element-plus/components/form'
 import Checkbox from '../src/checkbox.vue'
 import CheckboxButton from '../src/checkbox-button.vue'
 import CheckboxGroup from '../src/checkbox-group.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import type { FormItemInstance } from '@element-plus/components/form'
+import type { CheckboxInstance } from '@element-plus/components/checkbox'
 
-const _mount = <D>(
-  template: string,
-  data: () => D,
-  otherObj?: Record<string, unknown>
-) =>
-  mount<D>({
+const _mount = (template: string, data, otherObj?: Record<string, unknown>) =>
+  mount({
     components: {
       'el-checkbox': Checkbox,
       'el-checkbox-group': CheckboxGroup,
@@ -55,7 +54,7 @@ describe('Checkbox', () => {
 
   describe('disabled', () => {
     test('checkbox without label', async () => {
-      const wrapper = _mount(
+      const wrapper: VueWrapper<FormItemInstance> = _mount(
         `<el-form-item label="test">
           <el-checkbox ref="check" v-model="checkbox" disabled/>
         </el-form-item>`,
@@ -71,7 +70,7 @@ describe('Checkbox', () => {
     })
 
     test('checkbox with label attribute', async () => {
-      const wrapper = _mount(
+      const wrapper: VueWrapper<CheckboxInstance> = _mount(
         '<el-checkbox v-model="checkbox" disabled label="a"/>',
         () => ({ checkbox: false })
       )
@@ -86,7 +85,7 @@ describe('Checkbox', () => {
 
   describe('change event', () => {
     test('checkbox without label', async () => {
-      const wrapper = _mount(
+      const wrapper: VueWrapper<FormItemInstance> = _mount(
         `<el-form-item label="test">
           <el-checkbox ref="check" v-model="checked" @change="onChange" />
         </el-form-item>`,
@@ -108,7 +107,7 @@ describe('Checkbox', () => {
     })
 
     test('checkbox with label attribute', async () => {
-      const wrapper = _mount(
+      const wrapper: VueWrapper<CheckboxInstance> = _mount(
         `<el-checkbox v-model="checked" label="Foobar" @change="onChange" />`,
         () => ({
           data: null,
@@ -128,7 +127,7 @@ describe('Checkbox', () => {
     })
 
     test('checkbox with label as slot content', async () => {
-      const wrapper = _mount(
+      const wrapper: VueWrapper<CheckboxInstance> = _mount(
         `<el-checkbox v-model="checked" @change="onChange">Foobar</el-checkbox>`,
         () => ({
           data: null,

packages/components/checkbox/index.ts

@@ -12,3 +12,6 @@ export default ElCheckbox
 
 export const ElCheckboxButton = withNoopInstall(CheckboxButton)
 export const ElCheckboxGroup = withNoopInstall(CheckboxGroup)
+
+export * from './src/checkbox'
+export * from './src/checkbox.type'

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

@@ -49,11 +49,11 @@
 import { computed, defineComponent } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
-import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'
+import { checkboxProps, useCheckbox, useCheckboxGroup } from './checkbox'
 
 export default defineComponent({
   name: 'ElCheckboxButton',
-  props: useCheckboxProps,
+  props: checkboxProps,
   emits: [UPDATE_MODEL_EVENT, 'change'],
   setup(props, { slots }) {
     const { focus, isChecked, isDisabled, size, model, handleChange } =

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

@@ -16,7 +16,7 @@ import {
   useCheckboxGroup,
   useCheckboxGroupId,
   useCheckboxGroupProps,
-} from './useCheckbox'
+} from './checkbox'
 
 export default defineComponent({
   name: 'ElCheckboxGroup',

packages/components/checkbox/src/checkbox.ts

@@ -2,12 +2,12 @@ import { computed, getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
 import { toTypeString } from '@vue/shared'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { formContextKey, formItemContextKey } from '@element-plus/tokens'
-import { useFormItemInputId, useSize } from '@element-plus/hooks'
-import { debugWarn, isValidComponentSize } from '@element-plus/utils'
+import { useFormItemInputId, useSize, useSizeProp } from '@element-plus/hooks'
+import { debugWarn, isBoolean, isNumber, isString } from '@element-plus/utils'
 import type { ComponentInternalInstance, ExtractPropTypes, PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/constants'
 import type { FormContext, FormItemContext } from '@element-plus/tokens'
 import type { ICheckboxGroupInstance } from './checkbox.type'
+import type Checkbox from './checkbox.vue'
 
 export const useCheckboxGroupProps = {
   modelValue: {
@@ -23,10 +23,7 @@ export const useCheckboxGroupProps = {
     type: Number,
     default: undefined,
   },
-  size: {
-    type: String as PropType<ComponentSize>,
-    validator: isValidComponentSize,
-  },
+  size: useSizeProp,
   id: {
     type: String,
     default: undefined,
@@ -53,7 +50,7 @@ export type IUseCheckboxGroupProps = ExtractPropTypes<
   typeof useCheckboxGroupProps
 >
 
-export const useCheckboxProps = {
+export const checkboxProps = {
   modelValue: {
     type: [Number, String, Boolean],
     default: () => undefined,
@@ -85,15 +82,10 @@ export const useCheckboxProps = {
     default: undefined,
   },
   border: Boolean,
-  size: {
-    type: String as PropType<ComponentSize>,
-    validator: isValidComponentSize,
-  },
+  size: useSizeProp,
   tabindex: [String, Number],
 }
 
-export type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>
-
 export const useCheckboxGroup = () => {
   const elForm = inject(formContextKey, {} as FormContext)
   const elFormItem = inject(formItemContextKey, {} as FormItemContext)
@@ -127,7 +119,7 @@ export const useCheckboxGroupId = (
   }
 }
 
-const useModel = (props: IUseCheckboxProps) => {
+const useModel = (props: CheckboxProps) => {
   const selfModel = ref<any>(false)
   const { emit } = getCurrentInstance()!
   const { isGroup, checkboxGroup, elFormItem } = useCheckboxGroup()
@@ -161,7 +153,7 @@ const useModel = (props: IUseCheckboxProps) => {
 }
 
 const useCheckboxStatus = (
-  props: IUseCheckboxProps,
+  props: CheckboxProps,
   slots: ComponentInternalInstance['slots'],
   { model }: Partial<ReturnType<typeof useModel>>
 ) => {
@@ -201,7 +193,7 @@ const useCheckboxStatus = (
 }
 
 const useDisabled = (
-  props: IUseCheckboxProps,
+  props: CheckboxProps,
   {
     model,
     isChecked,
@@ -233,7 +225,7 @@ const useDisabled = (
 }
 
 const setStoreValue = (
-  props: IUseCheckboxProps,
+  props: CheckboxProps,
   { model }: Partial<ReturnType<typeof useModel>>
 ) => {
   function addToStore() {
@@ -247,7 +239,7 @@ const setStoreValue = (
 }
 
 const useEvent = (
-  props: IUseCheckboxProps,
+  props: CheckboxProps,
   {
     model,
     isLimitExceeded,
@@ -277,7 +269,7 @@ const useEvent = (
     emit('change', getLabeledValue(checked), e)
   }
 
-  function handleChange(e: InputEvent) {
+  function handleChange(e: Event) {
     if (isLimitExceeded!.value) return
     const target = e.target as HTMLInputElement
     emit('change', getLabeledValue(target.checked), e)
@@ -311,8 +303,15 @@ const useEvent = (
   }
 }
 
+export const checkboxEmits = {
+  [UPDATE_MODEL_EVENT]: (val: string | number | boolean) =>
+    isString(val) || isNumber(val) || isBoolean(val),
+  change: (val: string | number | boolean) =>
+    isString(val) || isNumber(val) || isBoolean(val),
+}
+
 export const useCheckbox = (
-  props: IUseCheckboxProps,
+  props: CheckboxProps,
   slots: ComponentInternalInstance['slots']
 ) => {
   const { model, isGroup, isLimitExceeded, elFormItem } = useModel(props)
@@ -352,3 +351,7 @@ export const useCheckbox = (
     size,
   }
 }
+
+export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
+export type CheckboxEmits = typeof checkboxEmits
+export type CheckboxInstance = InstanceType<typeof Checkbox>

packages/components/checkbox/src/checkbox.vue

@@ -62,23 +62,32 @@
     </span>
   </component>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+
+<script lang="ts" setup>
+import { useSlots } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { useCheckbox, useCheckboxProps } from './useCheckbox'
+import { checkboxEmits, checkboxProps, useCheckbox } from './checkbox'
 
-export default defineComponent({
+defineOptions({
   name: 'ElCheckbox',
-  props: useCheckboxProps,
-  emits: [UPDATE_MODEL_EVENT, 'change'],
-  setup(props, { slots }) {
-    const ns = useNamespace('checkbox')
-
-    return {
-      ns,
-      ...useCheckbox(props, slots),
-    }
-  },
 })
+
+const props = defineProps(checkboxProps)
+defineEmits(checkboxEmits)
+const slots = useSlots()
+
+const {
+  inputId,
+  isLabeledByFormItem,
+  isChecked,
+  isDisabled,
+  checkboxSize,
+  hasOwnLabel,
+  model,
+  handleChange,
+  onClickRoot,
+  focus,
+} = useCheckbox(props, slots)
+
+const ns = useNamespace('checkbox')
 </script>