refactor(components): [checkbox] use type-based definitions (#23480)

* refactor(components): [checkbox/checkbox-button/checkbox-group] use type-based definitions

* refactor: update

* refactor: fix type

* docs: update description

* fix: update

---------

Co-authored-by: rzzf <cszhjh@gmail.com>
Co-authored-by: btea <2356281422@qq.com>

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

@@ -29,15 +29,16 @@ import { computed, inject, useSlots } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { checkboxGroupContextKey } from './constants'
 import { useCheckbox } from './composables'
-import { checkboxEmits, checkboxProps } from './checkbox'
+import { checkboxEmits, checkboxPropsDefaults } from './checkbox'
 
 import type { CSSProperties } from 'vue'
+import type { CheckboxProps } from './checkbox'
 
 defineOptions({
   name: 'ElCheckboxButton',
 })
 
-const props = defineProps(checkboxProps)
+const props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)
 defineEmits(checkboxEmits)
 const slots = useSlots()
 

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

@@ -2,12 +2,67 @@ import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useAriaProps, useSizeProp } from '@element-plus/hooks'
 import { buildProps, definePropType, isArray } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type checkboxGroup from './checkbox-group.vue'
-import type { CheckboxPropsPublic, CheckboxValueType } from './checkbox'
+import type { CheckboxProps, CheckboxValueType } from './checkbox'
+import type { ComponentSize } from '@element-plus/constants'
+import type { AriaProps } from '@element-plus/hooks'
 
 export type CheckboxGroupValueType = Exclude<CheckboxValueType, boolean>[]
 
+export interface CheckboxGroupProps extends Pick<AriaProps, 'ariaLabel'> {
+  /**
+   * @description binding value
+   */
+  modelValue?: CheckboxGroupValueType
+  /**
+   * @description whether the nesting checkboxes are disabled
+   */
+  disabled?: boolean
+  /**
+   * @description minimum number of checkbox checked
+   */
+  min?: number
+  /**
+   * @description maximum number of checkbox checked
+   */
+  max?: number
+  /**
+   * @description size of checkbox
+   */
+  size?: ComponentSize
+  /**
+   * @description border and background color when button is active
+   */
+  fill?: string
+  /**
+   * @description font color when button is active
+   */
+  textColor?: string
+  /**
+   * @description element tag of the checkbox group
+   */
+  tag?: string
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent?: boolean
+  /**
+   * @description data of the options, the key of `value` and `label` and `disabled` can be customize by `props`
+   */
+  options?: CheckboxOption[]
+  /**
+   * @description configuration options
+   */
+  props?: CheckboxOptionProps
+  /**
+   * @description component type to render options (e.g. `'button'`)
+   */
+  type?: 'checkbox' | 'button'
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.
+ */
 export const checkboxGroupProps = buildProps({
   /**
    * @description binding value
@@ -77,14 +132,16 @@ export const checkboxGroupEmits = {
   change: (val: CheckboxValueType[]) => isArray(val),
 }
 
-export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.
+ */
 export type CheckboxGroupPropsPublic = ExtractPublicPropTypes<
   typeof checkboxGroupProps
 >
 export type CheckboxGroupEmits = typeof checkboxGroupEmits
 export type CheckboxGroupInstance = InstanceType<typeof checkboxGroup> & unknown
 
-export type CheckboxOption = CheckboxPropsPublic & Record<string, any>
+export type CheckboxOption = CheckboxProps & Record<string, any>
 
 type CheckboxOptionProps = {
   value?: string

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

@@ -31,22 +31,28 @@ import {
   useFormItem,
   useFormItemInputId,
 } from '@element-plus/components/form'
-import {
-  checkboxDefaultProps,
-  checkboxGroupEmits,
-  checkboxGroupProps,
-} from './checkbox-group'
+import { checkboxDefaultProps, checkboxGroupEmits } from './checkbox-group'
 import { checkboxGroupContextKey } from './constants'
 import ElCheckbox from './checkbox.vue'
 import ElCheckboxButton from './checkbox-button.vue'
 
-import type { CheckboxGroupValueType } from './checkbox-group'
+import type {
+  CheckboxGroupProps,
+  CheckboxGroupValueType,
+} from './checkbox-group'
 
 defineOptions({
   name: 'ElCheckboxGroup',
 })
 
-const props = defineProps(checkboxGroupProps)
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+  modelValue: () => [],
+  disabled: undefined,
+  tag: 'div',
+  validateEvent: true,
+  props: () => checkboxDefaultProps,
+  type: 'checkbox',
+})
 const emit = defineEmits(checkboxGroupEmits)
 const ns = useNamespace('checkbox')
 

packages/components/checkbox/src/checkbox.ts

@@ -1,12 +1,87 @@
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useAriaProps, useSizeProp } from '@element-plus/hooks'
+import { AriaProps, useAriaProps, useSizeProp } from '@element-plus/hooks'
 import { isBoolean, isNumber, isString } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
+import type { ComponentSize } from '@element-plus/constants'
 import type Checkbox from './checkbox.vue'
 
 export type CheckboxValueType = string | number | boolean
 
+export interface CheckboxProps extends Pick<
+  AriaProps,
+  'ariaLabel' | 'ariaControls'
+> {
+  /**
+   * @description binding value
+   */
+  modelValue?: number | string | boolean
+  /**
+   * @description label of the Checkbox when used inside a `checkbox-group`
+   */
+  label?: string | boolean | number | object
+  /**
+   * @description value of the Checkbox when used inside a `checkbox-group`
+   */
+  value?: string | boolean | number | object
+  /**
+   * @description Set indeterminate state, only responsible for style control
+   */
+  indeterminate?: boolean
+  /**
+   * @description whether the Checkbox is disabled
+   */
+  disabled?: boolean
+  /**
+   * @description if the Checkbox is checked
+   */
+  checked?: boolean
+  /**
+   * @description native 'name' attribute
+   */
+  name?: string
+  /**
+   * @description value of the Checkbox if it's checked
+   */
+  trueValue?: string | number
+  /**
+   * @description value of the Checkbox if it's not checked
+   */
+  falseValue?: string | number
+  /**
+   * @deprecated use `trueValue` instead
+   * @description value of the Checkbox if it's checked
+   */
+  trueLabel?: string | number
+  /**
+   * @deprecated use `falseValue` instead
+   * @description value of the Checkbox if it's not checked
+   */
+  falseLabel?: string | number
+  /**
+   * @description input id
+   */
+  id?: string
+  /**
+   * @description whether to add a border around Checkbox
+   */
+  border?: boolean
+  /**
+   * @description size of the Checkbox
+   */
+  size?: ComponentSize
+  /**
+   * @description input tabindex
+   */
+  tabindex?: string | number
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent?: boolean
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `CheckboxProps` instead.
+ */
 export const checkboxProps = {
   /**
    * @description binding value
@@ -117,8 +192,23 @@ export const checkboxEmits = {
   change: (val: CheckboxValueType) =>
     isString(val) || isNumber(val) || isBoolean(val),
 }
-
-export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `CheckboxProps` instead.
+ */
 export type CheckboxPropsPublic = ExtractPublicPropTypes<typeof checkboxProps>
 export type CheckboxEmits = typeof checkboxEmits
 export type CheckboxInstance = InstanceType<typeof Checkbox> & unknown
+
+export const checkboxPropsDefaults = {
+  modelValue: undefined,
+  label: undefined,
+  value: undefined,
+  disabled: undefined,
+  name: undefined,
+  trueValue: undefined,
+  falseValue: undefined,
+  trueLabel: undefined,
+  falseLabel: undefined,
+  id: undefined,
+  validateEvent: true,
+} as const

packages/components/checkbox/src/checkbox.vue

@@ -36,14 +36,16 @@
 <script lang="ts" setup>
 import { computed, useSlots } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { checkboxEmits, checkboxProps } from './checkbox'
+import { checkboxEmits, checkboxPropsDefaults } from './checkbox'
 import { useCheckbox } from './composables'
 
+import type { CheckboxProps } from './checkbox'
+
 defineOptions({
   name: 'ElCheckbox',
 })
 
-const props = defineProps(checkboxProps)
+const props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)
 defineEmits(checkboxEmits)
 const slots = useSlots()