diff --git a/packages/components/checkbox/src/checkbox-button.vue b/packages/components/checkbox/src/checkbox-button.vue index c13fce74d7..f6e2754192 100644 --- a/packages/components/checkbox/src/checkbox-button.vue +++ b/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(), checkboxPropsDefaults) defineEmits(checkboxEmits) const slots = useSlots() diff --git a/packages/components/checkbox/src/checkbox-group.ts b/packages/components/checkbox/src/checkbox-group.ts index 1647deef57..c952099611 100644 --- a/packages/components/checkbox/src/checkbox-group.ts +++ b/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[] +export interface CheckboxGroupProps extends Pick { + /** + * @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 +/** + * @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead. + */ export type CheckboxGroupPropsPublic = ExtractPublicPropTypes< typeof checkboxGroupProps > export type CheckboxGroupEmits = typeof checkboxGroupEmits export type CheckboxGroupInstance = InstanceType & unknown -export type CheckboxOption = CheckboxPropsPublic & Record +export type CheckboxOption = CheckboxProps & Record type CheckboxOptionProps = { value?: string diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue index 5deefbff7e..2ee11f1c0d 100644 --- a/packages/components/checkbox/src/checkbox-group.vue +++ b/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(), { + modelValue: () => [], + disabled: undefined, + tag: 'div', + validateEvent: true, + props: () => checkboxDefaultProps, + type: 'checkbox', +}) const emit = defineEmits(checkboxGroupEmits) const ns = useNamespace('checkbox') diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts index 05f1e3052c..6ec4269b05 100644 --- a/packages/components/checkbox/src/checkbox.ts +++ b/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 +/** + * @deprecated Removed after 3.0.0, Use `CheckboxProps` instead. + */ export type CheckboxPropsPublic = ExtractPublicPropTypes export type CheckboxEmits = typeof checkboxEmits export type CheckboxInstance = InstanceType & 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 diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue index 98f2a5161a..abd008c1be 100644 --- a/packages/components/checkbox/src/checkbox.vue +++ b/packages/components/checkbox/src/checkbox.vue @@ -36,14 +36,16 @@