refactor: checkbox

2021-12-28 16:41:58 +08:00 · 2021-12-28 16:41:58 +08:00 · 346393f81e
parent 4f3823eeda
commit 346393f81e
16 changed files with 334 additions and 274 deletions
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@ -1,36 +1,15 @@
-import type { ExtractPropTypes } from 'vue';
-import { defineComponent, inject, nextTick } from 'vue';
-import PropTypes from '../_util/vue-types';
+import { watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue';
 import classNames from '../_util/classNames';
 import VcCheckbox from '../vc-checkbox/Checkbox';
-import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
+import { flattenChildren } from '../_util/props-util';
 import warning from '../_util/warning';
 import type { RadioChangeEvent } from '../radio/interface';
 import type { EventHandler } from '../_util/EventInterface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
-function noop() {}
+import useConfigInject from '../_util/hooks/useConfigInject';

-export const checkboxProps = () => {
-  return {
-    prefixCls: PropTypes.string,
-    defaultChecked: PropTypes.looseBool,
-    checked: PropTypes.looseBool,
-    disabled: PropTypes.looseBool,
-    isGroup: PropTypes.looseBool,
-    value: PropTypes.any,
-    name: PropTypes.string,
-    id: PropTypes.string,
-    indeterminate: PropTypes.looseBool,
-    type: PropTypes.string.def('checkbox'),
-    autofocus: PropTypes.looseBool,
-    onChange: PropTypes.func,
-    'onUpdate:checked': PropTypes.func,
-    skipGroup: PropTypes.looseBool,
-  };
-};
-
-export type CheckboxProps = Partial<ExtractPropTypes<ReturnType<typeof checkboxProps>>>;
+import type { CheckboxProps } from './interface';
+import { CheckboxGroupContextKey, checkboxProps } from './interface';

 export default defineComponent({
  name: 'ACheckbox',
@ -38,124 +17,91 @@ export default defineComponent({
  __ANT_CHECKBOX: true,
  props: checkboxProps(),
  emits: ['change', 'update:checked'],
-  setup() {
+  setup(props, { emit, attrs, slots, expose }) {
    const formItemContext = useInjectFormItemContext();
-    return {
-      formItemContext,
-      configProvider: inject('configProvider', defaultConfigProvider),
-      checkboxGroupContext: inject('checkboxGroupContext', undefined),
-    };
-  },
+    const { prefixCls, direction } = useConfigInject('checkbox', props);
+    const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
+    const uniId = Symbol('checkboxUniId');

-  watch: {
-    value(value, prevValue) {
-      if (this.skipGroup) {
-        return;
+    watchEffect(() => {
+      if (!props.skipGroup && checkboxGroup) {
+        checkboxGroup.registerValue(uniId, props.value);
      }
-      nextTick(() => {
-        const { checkboxGroupContext: checkboxGroup = {} } = this;
-        if (checkboxGroup.registerValue && checkboxGroup.cancelValue) {
-          checkboxGroup.cancelValue(prevValue);
-          checkboxGroup.registerValue(value);
-        }
-      });
-    },
-  },
-
-  mounted() {
-    const { value, checkboxGroupContext: checkboxGroup = {} } = this;
-    if (checkboxGroup.registerValue) {
-      checkboxGroup.registerValue(value);
-    }
-
-    warning(
-      hasProp(this, 'checked') || this.checkboxGroupContext || !hasProp(this, 'value'),
-      'Checkbox',
-      '`value` is not validate prop, do you mean `checked`?',
-    );
-  },
-  beforeUnmount() {
-    const { value, checkboxGroupContext: checkboxGroup = {} } = this;
-    if (checkboxGroup.cancelValue) {
-      checkboxGroup.cancelValue(value);
-    }
-  },
-  methods: {
-    handleChange(event: RadioChangeEvent) {
-      const targetChecked = event.target.checked;
-      this.$emit('update:checked', targetChecked);
-      // this.$emit('input', targetChecked);
-      this.$emit('change', event);
-    },
-    focus() {
-      (this.$refs.vcCheckbox as HTMLInputElement).focus();
-    },
-    blur() {
-      (this.$refs.vcCheckbox as HTMLInputElement).blur();
-    },
-  },
-
-  render() {
-    const props = getOptionProps(this);
-    const { checkboxGroupContext: checkboxGroup, $attrs } = this;
-    const children = getSlot(this);
-    const {
-      indeterminate,
-      prefixCls: customizePrefixCls,
-      skipGroup,
-      id = this.formItemContext.id.value,
-      ...restProps
-    } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-    const {
-      onMouseenter = noop,
-      onMouseleave = noop,
-      onInput,
-      class: className,
-      style,
-      ...restAttrs
-    } = $attrs;
-    const checkboxProps: any = {
-      ...restProps,
-      id,
-      prefixCls,
-      ...restAttrs,
-    };
-    if (checkboxGroup && !skipGroup) {
-      checkboxProps.onChange = (...args) => {
-        this.$emit('change', ...args);
-        this.formItemContext.onFieldChange();
-        checkboxGroup.toggleOption({ label: children, value: props.value });
-      };
-      checkboxProps.name = checkboxGroup.name;
-      checkboxProps.checked = checkboxGroup.sValue.indexOf(props.value) !== -1;
-      checkboxProps.disabled = props.disabled || checkboxGroup.disabled;
-      checkboxProps.indeterminate = indeterminate;
-    } else {
-      checkboxProps.onChange = this.handleChange;
-    }
-    const classString = classNames(
-      {
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
-        [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
-      },
-      className,
-    );
-    const checkboxClass = classNames({
-      [`${prefixCls}-indeterminate`]: indeterminate,
    });
-    return (
-      <label
-        class={classString}
-        style={style}
-        onMouseenter={onMouseenter as EventHandler}
-        onMouseleave={onMouseleave as EventHandler}
-      >
-        <VcCheckbox {...checkboxProps} class={checkboxClass} ref="vcCheckbox" />
-        {children.length ? <span>{children}</span> : null}
-      </label>
-    );
+    onBeforeUnmount(() => {
+      if (checkboxGroup) {
+        checkboxGroup.cancelValue(uniId);
+      }
+    });
+    onMounted(() => {
+      warning(
+        props.checked !== undefined || checkboxGroup || props.value === undefined,
+        'Checkbox',
+        '`value` is not validate prop, do you mean `checked`?',
+      );
+    });
+
+    const handleChange = (event: RadioChangeEvent) => {
+      const targetChecked = event.target.checked;
+      emit('update:checked', targetChecked);
+      emit('change', event);
+    };
+    const checkboxRef = ref();
+    const focus = () => {
+      checkboxRef.value?.focus();
+    };
+    const blur = () => {
+      checkboxRef.value?.blur();
+    };
+    expose({
+      focus,
+      blur,
+    });
+    return () => {
+      const children = flattenChildren(slots.default?.());
+      const { indeterminate, skipGroup, id = formItemContext.id.value, ...restProps } = props;
+      const { onMouseenter, onMouseleave, onInput, class: className, style, ...restAttrs } = attrs;
+      const checkboxProps: CheckboxProps = {
+        ...restProps,
+        id,
+        prefixCls: prefixCls.value,
+        ...restAttrs,
+      };
+      if (checkboxGroup && !skipGroup) {
+        checkboxProps.onChange = (...args) => {
+          emit('change', ...args);
+          checkboxGroup.toggleOption({ label: children, value: props.value });
+        };
+        checkboxProps.name = checkboxGroup.name.value;
+        checkboxProps.checked = checkboxGroup.mergedValue.value.indexOf(props.value) !== -1;
+        checkboxProps.disabled = props.disabled || checkboxGroup.disabled.value;
+        checkboxProps.indeterminate = indeterminate;
+      } else {
+        checkboxProps.onChange = handleChange;
+      }
+      const classString = classNames(
+        {
+          [`${prefixCls.value}-wrapper`]: true,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
+          [`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
+        },
+        className,
+      );
+      const checkboxClass = classNames({
+        [`${prefixCls.value}-indeterminate`]: indeterminate,
+      });
+      return (
+        <label
+          class={classString}
+          style={style}
+          onMouseenter={onMouseenter as EventHandler}
+          onMouseleave={onMouseleave as EventHandler}
+        >
+          <VcCheckbox {...checkboxProps} class={checkboxClass} ref={checkboxRef} />
+          {children.length ? <span>{children}</span> : null}
+        </label>
+      );
+    };
  },
 });
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@ -1,134 +1,116 @@
-import type { PropType } from 'vue';
-import { defineComponent, inject, provide } from 'vue';
-import PropTypes from '../_util/vue-types';
+import { computed, ref, watch, defineComponent, provide } from 'vue';
 import Checkbox from './Checkbox';
-import hasProp, { getSlot } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
-import type { VueNode } from '../_util/type';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import type { CheckboxOptionType } from './interface';
+import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';

-export type CheckboxValueType = string | number | boolean;
-export interface CheckboxOptionType {
-  label: VueNode;
-  value: CheckboxValueType;
-  disabled?: boolean;
-  indeterminate?: boolean;
-  onChange?: (e: Event) => void;
-}
-function noop() {}
 export default defineComponent({
  name: 'ACheckboxGroup',
-  props: {
-    name: PropTypes.string,
-    prefixCls: PropTypes.string,
-    defaultValue: { type: Array as PropType<Array<CheckboxValueType>> },
-    value: { type: Array as PropType<Array<CheckboxValueType>> },
-    options: { type: Array as PropType<Array<CheckboxOptionType | string>> },
-    disabled: PropTypes.looseBool,
-    onChange: PropTypes.func,
-    id: PropTypes.string,
-  },
+  props: checkboxGroupProps(),
  emits: ['change', 'update:value'],
-  setup() {
+  setup(props, { slots, emit, expose }) {
    const formItemContext = useInjectFormItemContext();
-    return {
-      formItemContext,
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-
-  data() {
-    const { value, defaultValue } = this;
-    return {
-      sValue: value || defaultValue || [],
-      registeredValues: [],
-    };
-  },
-  watch: {
-    value(val) {
-      this.sValue = val || [];
-    },
-  },
-  created() {
-    provide('checkboxGroupContext', this);
-  },
-  methods: {
-    getOptions() {
-      const { options = [], $slots } = this;
-      return options.map(option => {
+    const { prefixCls, direction } = useConfigInject('checkbox', props);
+    const mergedValue = ref((props.value === undefined ? props.defaultValue : props.value) || []);
+    watch(
+      () => props.value,
+      () => {
+        mergedValue.value = props.value || [];
+      },
+    );
+    const options = computed(() => {
+      return props.options.map(option => {
        if (typeof option === 'string') {
          return {
            label: option,
            value: option,
          };
        }
-        let label = option.label;
-        if (label === undefined && $slots.label) {
-          label = $slots.label(option);
-        }
-        return { ...option, label };
+        return option;
      });
-    },
-    cancelValue(value: CheckboxValueType) {
-      this.registeredValues = this.registeredValues.filter(val => val !== value);
-    },
+    });
+    const triggerUpdate = ref(Symbol());
+    const registeredValuesMap = ref<Map<Symbol, string>>(new Map());
+    const cancelValue = (id: Symbol) => {
+      registeredValuesMap.value.delete(id);
+      triggerUpdate.value = Symbol();
+    };
+    const registerValue = (id: Symbol, value: string) => {
+      registeredValuesMap.value.set(id, value);
+      triggerUpdate.value = Symbol();
+    };

-    registerValue(value: CheckboxValueType) {
-      this.registeredValues = [...this.registeredValues, value];
-    },
-    toggleOption(option: CheckboxOptionType) {
-      const { registeredValues } = this;
-      const optionIndex = this.sValue.indexOf(option.value);
-      const value = [...this.sValue];
+    const registeredValues = ref(new Map());
+    watch(triggerUpdate, () => {
+      const valuseMap = new Map();
+      for (const value of registeredValuesMap.value.values()) {
+        valuseMap.set(value, true);
+      }
+      registeredValues.value = valuseMap;
+    });
+
+    const toggleOption = (option: CheckboxOptionType) => {
+      const optionIndex = mergedValue.value.indexOf(option.value);
+      const value = [...mergedValue.value];
      if (optionIndex === -1) {
        value.push(option.value);
      } else {
        value.splice(optionIndex, 1);
      }
-      if (!hasProp(this, 'value')) {
-        this.sValue = value;
+      if (props.value === undefined) {
+        mergedValue.value = value;
      }
-      const options = this.getOptions();
      const val = value
-        .filter(val => registeredValues.indexOf(val) !== -1)
+        .filter(val => registeredValues.value.has(val))
        .sort((a, b) => {
-          const indexA = options.findIndex(opt => opt.value === a);
-          const indexB = options.findIndex(opt => opt.value === b);
+          const indexA = options.value.findIndex(opt => opt.value === a);
+          const indexB = options.value.findIndex(opt => opt.value === b);
          return indexA - indexB;
        });
-      // this.$emit('input', val);
-      this.$emit('update:value', val);
-      this.$emit('change', val);
-      this.formItemContext.onFieldChange();
-    },
-  },
-  render() {
-    const { $props: props, $data: state } = this;
-    const { prefixCls: customizePrefixCls, options, id = this.formItemContext.id.value } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-    let children = getSlot(this);
-    const groupPrefixCls = `${prefixCls}-group`;
-    if (options && options.length > 0) {
-      children = this.getOptions().map(option => (
-        <Checkbox
-          prefixCls={prefixCls}
-          key={option.value.toString()}
-          disabled={'disabled' in option ? option.disabled : props.disabled}
-          indeterminate={option.indeterminate}
-          value={option.value}
-          checked={state.sValue.indexOf(option.value) !== -1}
-          onChange={option.onChange || noop}
-          class={`${groupPrefixCls}-item`}
+      emit('update:value', val);
+      emit('change', val);
+      formItemContext.onFieldChange();
+    };
+    provide(CheckboxGroupContextKey, {
+      cancelValue,
+      registerValue,
+      toggleOption,
+      mergedValue,
+      name: computed(() => props.name),
+      disabled: computed(() => props.disabled),
+    });
+    expose({
+      mergedValue,
+    });
+    return () => {
+      const { id = formItemContext.id.value } = props;
+      let children = null;
+      const groupPrefixCls = `${prefixCls.value}-group`;
+      if (options.value && options.value.length > 0) {
+        children = options.value.map(option => (
+          <Checkbox
+            prefixCls={prefixCls.value}
+            key={option.value.toString()}
+            disabled={'disabled' in option ? option.disabled : props.disabled}
+            indeterminate={option.indeterminate}
+            value={option.value}
+            checked={mergedValue.value.indexOf(option.value) !== -1}
+            onChange={option.onChange}
+            class={`${groupPrefixCls}-item`}
+          >
+            {option.label === undefined ? slots.label?.(option) : option.label}
+          </Checkbox>
+        ));
+      }
+      return (
+        <div
+          class={[groupPrefixCls, { [`${groupPrefixCls}-rtl`]: direction.value === 'rtl' }]}
+          id={id}
        >
-          {option.label}
-        </Checkbox>
-      ));
-    }
-    return (
-      <div class={groupPrefixCls} id={id}>
-        {children}
-      </div>
-    );
+          {children || slots.default?.()}
+        </div>
+      );
+    };
  },
 });
--- a/components/checkbox/tests/snapshots/demo.test.js.snap
+++ b/components/checkbox/tests/snapshots/demo.test.js.snap
@ -3,8 +3,10 @@
 exports[`renders ./components/checkbox/demo/basic.vue correctly 1`] = `<label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Checkbox</span></label>`;

 exports[`renders ./components/checkbox/demo/check-all.vue correctly 1`] = `
-<div style="border-bottom: 1px solid #E9E9E9;"><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div>
-<br>
+<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
 <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 `;

@ -22,7 +24,7 @@ exports[`renders ./components/checkbox/demo/disabled.vue correctly 1`] = `
  <!---->
 </label>
 <br>
-<label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+<label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
  <!---->
 </label>
 `;
@ -30,15 +32,18 @@ exports[`renders ./components/checkbox/demo/disabled.vue correctly 1`] = `
 exports[`renders ./components/checkbox/demo/group.vue correctly 1`] = `
 <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input name="checkboxgroup" type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input name="checkboxgroup" type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input name="checkboxgroup" type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 <br>
+<br>
 <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 <br>
+<br>
 <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 <br>
+<br>
 <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 `;

 exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = `
-<div class="ant-checkbox-group">
+<div class="ant-checkbox-group" style="width: 100%;">
  <div class="ant-row">
    <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
    <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
--- a/components/checkbox/tests/group.test.js
+++ b/components/checkbox/tests/group.test.js
@ -103,11 +103,10 @@ describe('CheckboxGroup', () => {
      props: { options },
      sync: false,
    });
-
-    expect(wrapper.vm.sValue).toEqual([]);
+    expect(wrapper.vm.mergedValue).toEqual([]);
    wrapper.setProps({ value: ['Apple'] });
    await asyncExpect(() => {
-      expect(wrapper.vm.sValue).toEqual(['Apple']);
+      expect(wrapper.vm.mergedValue).toEqual(['Apple']);
    });
  });

--- a/components/checkbox/demo/check-all.vue
+++ b/components/checkbox/demo/check-all.vue
@ -17,7 +17,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 </docs>

 <template>
-  <div :style="{ borderBottom: '1px solid #E9E9E9' }">
+  <div>
    <a-checkbox
      v-model:checked="checkAll"
      :indeterminate="indeterminate"
@ -26,7 +26,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
      Check all
    </a-checkbox>
  </div>
-  <br />
+  <a-divider />
  <a-checkbox-group v-model:value="checkedList" :options="plainOptions" />
 </template>
 <script lang="ts">
--- a/components/checkbox/demo/group.vue
+++ b/components/checkbox/demo/group.vue
@ -19,10 +19,13 @@ Generate a group of checkboxes from an array
 <template>
  <a-checkbox-group v-model:value="value1" name="checkboxgroup" :options="plainOptions" />
  <br />
+  <br />
  <a-checkbox-group v-model:value="value2" :options="plainOptions" />
  <br />
+  <br />
  <a-checkbox-group v-model:value="value3" :options="options" />
  <br />
+  <br />
  <a-checkbox-group v-model:value="value4" :options="optionsWithDisabled" disabled>
    <template #label="{ value }">
      <span style="color: red">{{ value }}</span>
@ -51,7 +54,6 @@ export default defineComponent({
      value3: ['Pear'],
      value4: ['Apple'],
    });
-
    return {
      plainOptions,
      options,
--- a/components/checkbox/demo/layout.vue
+++ b/components/checkbox/demo/layout.vue
@ -17,7 +17,7 @@ We can use Checkbox and Grid Checkbox.group, to implement complex layout
 </docs>

 <template>
-  <a-checkbox-group v-model:value="value">
+  <a-checkbox-group v-model:value="value" style="width: 100%">
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">A</a-checkbox>
@ -41,8 +41,9 @@ We can use Checkbox and Grid Checkbox.group, to implement complex layout
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
  setup() {
+    const value = ref([]);
    return {
-      value: ref([]),
+      value,
    };
  },
 });
--- a/components/checkbox/index.ts
+++ b/components/checkbox/index.ts
@ -1,7 +1,8 @@
 import type { App, Plugin } from 'vue';
-import Checkbox, { checkboxProps } from './Checkbox';
+import Checkbox from './Checkbox';
 import CheckboxGroup from './Group';
-export type { CheckboxProps } from './Checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxOptionType } from './interface';
+export { checkboxProps, checkboxGroupProps } from './interface';

 Checkbox.Group = CheckboxGroup;

@ -11,7 +12,7 @@ Checkbox.install = function (app: App) {
  app.component(CheckboxGroup.name, CheckboxGroup);
  return app;
 };
-export { CheckboxGroup, checkboxProps };
+export { CheckboxGroup };
 export default Checkbox as typeof Checkbox &
  Plugin & {
    readonly Group: typeof CheckboxGroup;
--- a/components/checkbox/interface.ts
+++ b/components/checkbox/interface.ts
@ -0,0 +1,78 @@
+import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue';
+import type { VueNode } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+
+export type CheckboxValueType = string | number | boolean;
+export interface CheckboxOptionType {
+  label?: VueNode;
+  value: CheckboxValueType;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  onChange?: (e: Event) => void;
+}
+
+export const abstractCheckboxGroupProps = () => {
+  return {
+    name: String,
+    prefixCls: String,
+    options: {
+      type: Array as PropType<Array<CheckboxOptionType | string>>,
+      default: () => [] as Array<CheckboxOptionType | string>,
+    },
+    disabled: Boolean,
+    id: String,
+  };
+};
+
+export const checkboxGroupProps = () => {
+  return {
+    ...abstractCheckboxGroupProps(),
+    defaultValue: { type: Array as PropType<Array<CheckboxValueType>> },
+    value: { type: Array as PropType<Array<CheckboxValueType>> },
+    onChange: { type: Function as PropType<(checkedValue: Array<CheckboxValueType>) => void> },
+    'onUpdate:value': {
+      type: Function as PropType<(checkedValue: Array<CheckboxValueType>) => void>,
+    },
+  };
+};
+
+export type CheckboxGroupProps = Partial<ExtractPropTypes<ReturnType<typeof checkboxGroupProps>>>;
+
+export const abstractCheckboxProps = () => {
+  return {
+    prefixCls: String,
+    defaultChecked: { type: Boolean, default: undefined },
+    checked: { type: Boolean, default: undefined },
+    disabled: { type: Boolean, default: undefined },
+    isGroup: { type: Boolean, default: undefined },
+    value: PropTypes.any,
+    name: String,
+    id: String,
+    indeterminate: { type: Boolean, default: undefined },
+    type: { type: String, default: 'checkbox' },
+    autofocus: { type: Boolean, default: undefined },
+    onChange: PropTypes.func,
+    'onUpdate:checked': PropTypes.func,
+    skipGroup: { type: Boolean, default: false },
+  };
+};
+
+export const checkboxProps = () => {
+  return {
+    ...abstractCheckboxProps(),
+    indeterminate: { type: Boolean, default: false },
+  };
+};
+
+export type CheckboxProps = Partial<ExtractPropTypes<ReturnType<typeof checkboxProps>>>;
+
+export type CheckboxGroupContext = {
+  cancelValue: (id: Symbol) => void;
+  registerValue: (id: Symbol, value: string) => void;
+  toggleOption: (option: CheckboxOptionType) => void;
+  name: Ref<string>;
+  disabled: Ref<boolean>;
+  mergedValue: Ref<CheckboxValueType[]>;
+};
+export const CheckboxGroupContextKey: InjectionKey<CheckboxGroupContext> =
+  Symbol('CheckboxGroupContext');
--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@ -2,3 +2,5 @@
@import './mixin';

 .antCheckboxFn();
+
+@import './rtl';
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@ -7,11 +7,9 @@
    .reset-component();

    position: relative;
-    top: -0.09em;
-    display: inline-block;
+    top: 0.2em;
    line-height: 1;
    white-space: nowrap;
-    vertical-align: middle;
    outline: none;
    cursor: pointer;

@ -28,7 +26,7 @@
      width: 100%;
      height: 100%;
      border: 1px solid @checkbox-color;
-      border-radius: @border-radius-sm;
+      border-radius: @border-radius-base;
      visibility: hidden;
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: backwards;
@ -47,9 +45,10 @@
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
+      direction: ltr;
      background-color: @checkbox-check-bg;
      border: @checkbox-border-width @border-style-base @border-color-base;
-      border-radius: @border-radius-sm;
+      border-radius: @checkbox-border-radius;
      // Fix IE checked style
      // https://github.com/ant-design/ant-design/issues/12597
      border-collapse: separate;
@ -61,6 +60,8 @@

        position: absolute;
        top: 50%;
+        // https://github.com/ant-design/ant-design/pull/19452
+        // https://github.com/ant-design/ant-design/pull/31726
        left: 21.5%;
        display: table;
        width: @check-width;
@ -126,6 +127,7 @@
    .@{checkbox-inner-prefix-cls} {
      background-color: @input-disabled-bg;
      border-color: @border-color-base !important;
+
      &::after {
        border-color: @input-disabled-bg;
        border-collapse: separate;
@ -147,13 +149,22 @@

  .@{checkbox-prefix-cls}-wrapper {
    .reset-component();
-
-    display: inline-block;
+    display: inline-flex;
+    align-items: baseline;
    line-height: unset;
    cursor: pointer;
+
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
    &.@{checkbox-prefix-cls}-wrapper-disabled {
      cursor: not-allowed;
    }
+
    & + & {
      margin-left: 8px;
    }
@ -166,15 +177,16 @@

  .@{checkbox-prefix-cls}-group {
    .reset-component();
-
    display: inline-block;
+
    &-item {
-      display: inline-block;
-      margin-right: 8px;
+      margin-right: @checkbox-group-item-margin-right;
+
      &:last-child {
        margin-right: 0;
      }
    }
+
    &-item + &-item {
      margin-left: 0;
    }
@ -183,7 +195,7 @@
  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
-      background-color: @component-background;
+      background-color: @checkbox-check-bg;
      border-color: @border-color-base;
    }
    .@{checkbox-inner-prefix-cls}::after {
@ -213,6 +225,7 @@
    transform: scale(1);
    opacity: 0.5;
  }
+
  100% {
    transform: scale(1.6);
    opacity: 0;
--- a/components/checkbox/style/rtl.less
+++ b/components/checkbox/style/rtl.less
@ -0,0 +1,28 @@
+@import '../../style/mixins/index';
+
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
+  .@{checkbox-prefix-cls}-rtl {
+    direction: rtl;
+  }
+
+  .@{checkbox-prefix-cls}-group {
+    &-item {
+      .@{checkbox-prefix-cls}-group-rtl & {
+        margin-right: 0;
+        margin-left: @checkbox-group-item-margin-right;
+      }
+
+      &:last-child {
+        .@{checkbox-prefix-cls}-group-rtl & {
+          margin-left: 0 !important;
+        }
+      }
+    }
+
+    &-item + &-item {
+      .@{checkbox-prefix-cls}-group-rtl & {
+        margin-left: @checkbox-group-item-margin-right;
+      }
+    }
+  }
+}
--- a/components/components.ts
+++ b/components/components.ts
@ -40,6 +40,7 @@ export { default as Carousel } from './carousel';
 export type { CascaderProps } from './cascader';
 export { default as Cascader } from './cascader';

+export type { CheckboxProps, CheckboxGroupProps, CheckboxOptionType } from './checkbox';
 export { default as Checkbox, CheckboxGroup } from './checkbox';

 export type { ColProps } from './col';
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -241,6 +241,8 @@
@checkbox-check-color: #fff;
@checkbox-check-bg: @checkbox-check-color;
@checkbox-border-width: @border-width-base;
+@checkbox-border-radius: @border-radius-base;
+@checkbox-group-item-margin-right: 8px;

 // Descriptions
@descriptions-bg: #fafafa;
--- a/components/vc-checkbox/Checkbox.tsx
+++ b/components/vc-checkbox/Checkbox.tsx
@ -27,7 +27,7 @@ export default defineComponent({
    type: 'checkbox',
    defaultChecked: false,
  }),
-  emits: ['click', 'focus', 'blur', 'change', 'keydown', 'keypress', 'keyup'],
+  emits: ['click', 'change'],
  setup(props, { attrs, emit, expose }) {
    const checked = ref(props.checked === undefined ? props.defaultChecked : props.checked);
    const inputRef = ref<HTMLInputElement>();