style: update checkbox
parent
5bc17f0578
commit
73f7f9e3b9
|
@ -4,7 +4,7 @@ import VcCheckbox from '../vc-checkbox/Checkbox';
|
||||||
import { flattenChildren } from '../_util/props-util';
|
import { flattenChildren } from '../_util/props-util';
|
||||||
import warning from '../_util/warning';
|
import warning from '../_util/warning';
|
||||||
import type { EventHandler } from '../_util/EventInterface';
|
import type { EventHandler } from '../_util/EventInterface';
|
||||||
import { useInjectFormItemContext } from '../form/FormItemContext';
|
import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
|
||||||
import useConfigInject from '../_util/hooks/useConfigInject';
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
||||||
|
|
||||||
import type { CheckboxChangeEvent, CheckboxProps } from './interface';
|
import type { CheckboxChangeEvent, CheckboxProps } from './interface';
|
||||||
|
@ -18,6 +18,7 @@ export default defineComponent({
|
||||||
// emits: ['change', 'update:checked'],
|
// emits: ['change', 'update:checked'],
|
||||||
setup(props, { emit, attrs, slots, expose }) {
|
setup(props, { emit, attrs, slots, expose }) {
|
||||||
const formItemContext = useInjectFormItemContext();
|
const formItemContext = useInjectFormItemContext();
|
||||||
|
const formItemInputContext = FormItemInputContext.useInject();
|
||||||
const { prefixCls, direction } = useConfigInject('checkbox', props);
|
const { prefixCls, direction } = useConfigInject('checkbox', props);
|
||||||
const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
|
const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
|
||||||
const uniId = Symbol('checkboxUniId');
|
const uniId = Symbol('checkboxUniId');
|
||||||
|
@ -84,12 +85,14 @@ export default defineComponent({
|
||||||
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||||
[`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
|
[`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
|
||||||
[`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
|
[`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
|
||||||
|
[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
|
||||||
},
|
},
|
||||||
className,
|
className,
|
||||||
);
|
);
|
||||||
const checkboxClass = classNames({
|
const checkboxClass = classNames({
|
||||||
[`${prefixCls.value}-indeterminate`]: indeterminate,
|
[`${prefixCls.value}-indeterminate`]: indeterminate,
|
||||||
});
|
});
|
||||||
|
const ariaChecked = indeterminate ? 'mixed' : undefined;
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
class={classString}
|
class={classString}
|
||||||
|
@ -97,7 +100,12 @@ export default defineComponent({
|
||||||
onMouseenter={onMouseenter as EventHandler}
|
onMouseenter={onMouseenter as EventHandler}
|
||||||
onMouseleave={onMouseleave 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}
|
{children.length ? <span>{children}</span> : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
import '../../style/index.less';
|
import '../../style/index.less';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
// deps-lint-skip: form
|
||||||
|
|
|
@ -169,6 +169,13 @@
|
||||||
& + & {
|
& + & {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&&-in-form-item {
|
||||||
|
input[type='checkbox'] {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{checkbox-prefix-cls} + span {
|
.@{checkbox-prefix-cls} + span {
|
||||||
|
|
|
@ -120,6 +120,11 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// hide the last border-bottom in borderless mode
|
||||||
|
&-borderless > &-item:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&-borderless > &-item > &-content {
|
&-borderless > &-item > &-content {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
|
Loading…
Reference in New Issue