style: update checkbox
parent
5bc17f0578
commit
73f7f9e3b9
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip: form
|
||||
|
|
|
@ -169,6 +169,13 @@
|
|||
& + & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&&-in-form-item {
|
||||
input[type='checkbox'] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls} + span {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue