45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
import type { MouseEventHandler } from '../../_util/EventInterface';
|
|
import { useInjectCascader } from '../context';
|
|
|
|
export interface CheckboxProps {
|
|
prefixCls: string;
|
|
checked?: boolean;
|
|
halfChecked?: boolean;
|
|
disabled?: boolean;
|
|
onClick?: MouseEventHandler;
|
|
}
|
|
|
|
export default function Checkbox({
|
|
prefixCls,
|
|
checked,
|
|
halfChecked,
|
|
disabled,
|
|
onClick,
|
|
}: CheckboxProps) {
|
|
const { customSlots, checkable } = useInjectCascader();
|
|
|
|
const mergedCheckable = checkable.value !== false ? customSlots.value.checkable : checkable.value;
|
|
const customCheckbox =
|
|
typeof mergedCheckable === 'function'
|
|
? mergedCheckable()
|
|
: typeof mergedCheckable === 'boolean'
|
|
? null
|
|
: mergedCheckable;
|
|
return (
|
|
<span
|
|
class={{
|
|
[prefixCls]: true,
|
|
[`${prefixCls}-checked`]: checked,
|
|
[`${prefixCls}-indeterminate`]: !checked && halfChecked,
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
}}
|
|
onClick={onClick}
|
|
>
|
|
{customCheckbox}
|
|
</span>
|
|
);
|
|
}
|
|
Checkbox.props = ['prefixCls', 'checked', 'halfChecked', 'disabled', 'onClick'];
|
|
Checkbox.displayName = 'Checkbox';
|
|
Checkbox.inheritAttrs = false;
|