mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
3ca4473aeb
* feat(components): [checkbox & radio] Use value instead of label * feat(components): update * feat(components): update * feat(components): update * feat(components): update * feat(components): update * feat(components): update test * feat(components): true-value false-value * feat(components): update
126 lines
2.9 KiB
TypeScript
126 lines
2.9 KiB
TypeScript
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
|
import { useSizeProp } from '@element-plus/hooks'
|
|
import { isBoolean, isNumber, isString } from '@element-plus/utils'
|
|
|
|
import type { ExtractPropTypes } from 'vue'
|
|
import type Checkbox from './checkbox.vue'
|
|
|
|
export type CheckboxValueType = string | number | boolean
|
|
|
|
export const checkboxProps = {
|
|
/**
|
|
* @description binding value
|
|
*/
|
|
modelValue: {
|
|
type: [Number, String, Boolean],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description label of the Checkbox when used inside a `checkbox-group`
|
|
*/
|
|
label: {
|
|
type: [String, Boolean, Number, Object],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description value of the Checkbox when used inside a `checkbox-group`
|
|
*/
|
|
value: {
|
|
type: [String, Boolean, Number, Object],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @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: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description value of the Checkbox if it's checked
|
|
*/
|
|
trueValue: {
|
|
type: [String, Number],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description value of the Checkbox if it's not checked
|
|
*/
|
|
falseValue: {
|
|
type: [String, Number],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @deprecated use `trueValue` instead
|
|
* @description value of the Checkbox if it's checked
|
|
*/
|
|
trueLabel: {
|
|
type: [String, Number],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @deprecated use `falseValue` instead
|
|
* @description value of the Checkbox if it's not checked
|
|
*/
|
|
falseLabel: {
|
|
type: [String, Number],
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description input id
|
|
*/
|
|
id: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true`
|
|
*/
|
|
controls: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
/**
|
|
* @description whether to add a border around Checkbox
|
|
*/
|
|
border: Boolean,
|
|
/**
|
|
* @description size of the Checkbox
|
|
*/
|
|
size: useSizeProp,
|
|
/**
|
|
* @description input tabindex
|
|
*/
|
|
tabindex: [String, Number],
|
|
/**
|
|
* @description whether to trigger form validation
|
|
*/
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
}
|
|
|
|
export const checkboxEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>
|
|
isString(val) || isNumber(val) || isBoolean(val),
|
|
change: (val: CheckboxValueType) =>
|
|
isString(val) || isNumber(val) || isBoolean(val),
|
|
}
|
|
|
|
export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
|
|
export type CheckboxEmits = typeof checkboxEmits
|
|
export type CheckboxInstance = InstanceType<typeof Checkbox>
|