style: update checkbox

pull/5820/head
tangjinzhou 2022-05-14 15:50:50 +08:00
parent 5bc17f0578
commit 73f7f9e3b9
4 changed files with 23 additions and 2 deletions

View File

@ -4,7 +4,7 @@ import VcCheckbox from '../vc-checkbox/Checkbox';
import { flattenChildren } from '../_util/props-util';
import warning from '../_util/warning';
import type { EventHandler } from '../_util/EventInterface';
import { useInjectFormItemContext } from '../form/FormItemContext';
import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { CheckboxChangeEvent, CheckboxProps } from './interface';
@ -18,6 +18,7 @@ export default defineComponent({
// emits: ['change', 'update:checked'],
setup(props, { emit, attrs, slots, expose }) {
const formItemContext = useInjectFormItemContext();
const formItemInputContext = FormItemInputContext.useInject();
const { prefixCls, direction } = useConfigInject('checkbox', props);
const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
const uniId = Symbol('checkboxUniId');
@ -84,12 +85,14 @@ export default defineComponent({
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
[`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
[`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
},
className,
);
const checkboxClass = classNames({
[`${prefixCls.value}-indeterminate`]: indeterminate,
});
const ariaChecked = indeterminate ? 'mixed' : undefined;
return (
<label
class={classString}
@ -97,7 +100,12 @@ export default defineComponent({
onMouseenter={onMouseenter as EventHandler}
onMouseleave={onMouseleave as EventHandler}
>
<VcCheckbox {...checkboxProps} class={checkboxClass} ref={checkboxRef} />
<VcCheckbox
aria-checked={ariaChecked}
{...checkboxProps}
class={checkboxClass}
ref={checkboxRef}
/>
{children.length ? <span>{children}</span> : null}
</label>
);

View File

@ -1,2 +1,3 @@
import '../../style/index.less';
import './index.less';
// deps-lint-skip: form

View File

@ -169,6 +169,13 @@
& + & {
margin-left: 8px;
}
&&-in-form-item {
input[type='checkbox'] {
width: 14px;
height: 14px;
}
}
}
.@{checkbox-prefix-cls} + span {

View File

@ -120,6 +120,11 @@
border-radius: 0;
}
// hide the last border-bottom in borderless mode
&-borderless > &-item:last-child {
border-bottom: 0;
}
&-borderless > &-item > &-content {
background-color: transparent;
border-top: 0;