style(checkbox): optimize code

packages/checkbox/src/checkbox-group.vue

@@ -44,7 +44,7 @@ export default defineComponent({
 
   setup(props, ctx) {
     const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup()
-    const checkboxGroupSize = computed(() => props.size || elFormItemSize.value || (ELEMENT || {}).size)
+    const checkboxGroupSize = computed(() => props.size || elFormItemSize.value || ELEMENT?.size)
 
     const changeEvent = value => {
       ctx.emit(UPDATE_MODEL_EVENT, value)
@@ -71,7 +71,7 @@ export default defineComponent({
     })
 
     watch(() => props.modelValue, val => {
-      elFormItem.changeEvent?.(val)
+      elFormItem?.changeEvent?.(val)
     })
   },
 })

packages/checkbox/src/checkbox.d.ts

@@ -1,4 +1,5 @@
 import { ComputedRef } from 'vue'
+import { AnyFunction } from '@element-plus/utils/types'
 export interface ICheckboxGroupInstance {
   name?: string
   modelValue?: ComputedRef
@@ -9,22 +10,20 @@ export interface ICheckboxGroupInstance {
   fill?: ComputedRef<string>
   textColor?: ComputedRef<string>
   checkboxGroupSize?: ComputedRef<string>
-  changeEvent?: (val: any) => void
+  changeEvent?: AnyFunction<any>
 }
 
 export interface ICheckboxProps {
   modelValue: string | boolean | number
-  label?:string | boolean | number
+  label?: string | boolean | number
   indeterminate?: boolean
   disabled?: boolean
   checked?: boolean
   name?: string
-  trueLabel?: string| number
-  falseLabel?: string| number
+  trueLabel?: string | number
+  falseLabel?: string | number
   id?: string
   controls?: string
   border?: boolean
   size?: string
 }
-
-export type PartialReturnType<T extends (...args: unknown[]) =>  unknown> = Partial<ReturnType<T>>

packages/checkbox/src/checkbox.vue

@@ -60,9 +60,11 @@
 <script lang='ts'>
 import {
   defineComponent,
+  getCurrentInstance,
+  onMounted,
 } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { useCheckbox, useSetAria } from './useCheckbox'
+import { useCheckbox } from './useCheckbox'
 
 export default defineComponent({
   name: 'ElCheckbox',
@@ -106,8 +108,11 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT, 'change'],
   setup(props) {
     const { focus, isChecked, isDisabled, checkboxSize, model, handleChange } = useCheckbox(props)
+    const instance = getCurrentInstance()
 
-    useSetAria(props)
+    onMounted(() => {
+      instance.vnode.el.setAttribute('aria-controls', props.controls)
+    })
 
     return {
       focus,

packages/checkbox/src/useCheckbox.ts

@@ -3,22 +3,22 @@ import {
   computed,
   inject,
   getCurrentInstance,
-  onMounted,
   watch,
 } from 'vue'
 import { toTypeString } from '@vue/shared'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { ICheckboxGroupInstance, ICheckboxProps, PartialReturnType } from './checkbox'
+import { PartialReturnType } from '@element-plus/utils/types'
+import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox'
 
 export const useCheckboxGroup = () => {
   //todo: ELEMENT
   const ELEMENT = null
-  const elForm = inject('elForm', {})
-  const elFormItem = inject('elFormItem', {}) as any
-  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})
-  const isGroup = computed(() => checkboxGroup && checkboxGroup.name === 'ElCheckboxGroup')
+  const elForm = inject<any>('elForm')
+  const elFormItem = inject<any>('elFormItem')
+  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup')
+  const isGroup = computed(() => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup')
   const elFormItemSize = computed(() => {
-    return (elFormItem || {} as any).elFormItemSize
+    return elFormItem?.elFormItemSize
   })
   return {
     isGroup,
@@ -35,7 +35,7 @@ const useModel = (props: ICheckboxProps) => {
   const { emit } = getCurrentInstance()
   const { isGroup, checkboxGroup } = useCheckboxGroup()
   const isLimitExceeded = ref(false)
-  const store = computed(() => checkboxGroup ? checkboxGroup.modelValue?.value : props.modelValue)
+  const store = computed(() => checkboxGroup ? checkboxGroup?.modelValue?.value : props.modelValue)
   const model = computed({
     get() {
       return isGroup.value
@@ -47,14 +47,14 @@ const useModel = (props: ICheckboxProps) => {
       if (isGroup.value && Array.isArray(val)) {
         isLimitExceeded.value = false
 
-        if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min.value) {
+        if (checkboxGroup?.min !== undefined && val.length < checkboxGroup?.min.value) {
           isLimitExceeded.value = true
         }
-        if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max.value) {
+        if (checkboxGroup?.max !== undefined && val.length > checkboxGroup?.max.value) {
           isLimitExceeded.value = true
         }
 
-        isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
+        isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)
       } else {
         emit(UPDATE_MODEL_EVENT, val)
         selfModel = val as boolean
@@ -71,21 +71,21 @@ const useModel = (props: ICheckboxProps) => {
 const useCheckboxStatus = (props: ICheckboxProps, { model }: PartialReturnType<typeof useModel>) => {
   const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup()
   const focus = ref(false)
-  const size = computed<string|undefined>(() => checkboxGroup.checkboxGroupSize?.value || elFormItemSize.value || (ELEMENT || {}).size)
+  const size = computed<string|undefined>(() => checkboxGroup?.checkboxGroupSize?.value || elFormItemSize.value || ELEMENT?.size)
   const isChecked = computed(() => {
     const value = model.value
     if (toTypeString(value) === '[object Boolean]') {
-      return Boolean(value)
+      return value
     } else if (Array.isArray(value)) {
       return value.includes(props.label)
     } else if (value !== null && value !== undefined) {
       return value === props.trueLabel
     }
   })
   const checkboxSize = computed(() => {
-    const temCheckboxSize = props.size || elFormItemSize.value || (ELEMENT || {} as any).size
+    const temCheckboxSize = props.size || elFormItemSize.value || ELEMENT?.size
     return isGroup.value
-      ? checkboxGroup.checkboxGroupSize?.value || temCheckboxSize
+      ? checkboxGroup?.checkboxGroupSize?.value || temCheckboxSize
       : temCheckboxSize
   })
 
@@ -103,15 +103,15 @@ const useDisabled = (
 ) => {
   const { elForm, isGroup, checkboxGroup } = useCheckboxGroup()
   const isLimitDisabled = computed(() => {
-    const max = checkboxGroup.max?.value
-    const min = checkboxGroup.min?.value
+    const max = checkboxGroup?.max?.value
+    const min = checkboxGroup?.min?.value
     return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
       (model.value.length <= min && isChecked.value)
   })
   const isDisabled = computed(() => {
     return isGroup.value
-      ? checkboxGroup.disabled?.value || props.disabled ||  (elForm as any || {} as any).disabled?.value || isLimitDisabled.value
-      : props.disabled || (elForm as any || {} as any).disabled?.value
+      ? checkboxGroup?.disabled?.value || props.disabled ||  elForm?.disabled?.value || isLimitDisabled.value
+      : props.disabled || elForm?.disabled?.value
   })
 
   return {
@@ -148,21 +148,14 @@ const useEvent = (props: ICheckboxProps, { isLimitExceeded }: PartialReturnType<
   }
 
   watch(() => props.modelValue, val => {
-    elFormItem.changeEvent?.(val)
+    elFormItem?.changeEvent?.(val)
   })
 
   return {
     handleChange,
   }
 }
 
-export const useSetAria = (props: ICheckboxProps) => {
-  const instance = getCurrentInstance()
-  onMounted(() => {
-    instance.vnode.el.setAttribute('aria-controls', props.controls)
-  })
-}
-
 export const useCheckbox = (props: ICheckboxProps) => {
   const { model, isLimitExceeded } = useModel(props)
   const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, { model })

packages/utils/types.ts

@@ -14,3 +14,5 @@ export type EventEmitter<T extends Record<string, unknown>> =
   MonoArgEmitter<T, OptionalKeys<T>> & BiArgEmitter<T, RequiredKeys<T>>
 
 export type AnyFunction<T> = (...args: any[]) => T
+
+export type PartialReturnType<T extends (...args: unknown[]) =>  unknown> = Partial<ReturnType<T>>