types(Checkbox): use tsx (#8127)

src/checkbox/Checker.tsx

@@ -1,17 +1,20 @@
-import { ref, computed, defineComponent } from 'vue';
+import { ref, computed, defineComponent, PropType } from 'vue';
 import { addUnit } from '../utils';
 import Icon from '../icon';
 
+export type CheckerShape = 'square' | 'round';
+export type CheckerLabelPosition = 'left' | 'right';
+
 export const checkerProps = {
-  name: null,
+  name: null as any,
   disabled: Boolean,
   iconSize: [Number, String],
-  modelValue: null,
+  modelValue: null as any,
   checkedColor: String,
-  labelPosition: String,
+  labelPosition: String as PropType<CheckerLabelPosition>,
   labelDisabled: Boolean,
   shape: {
-    type: String,
+    type: String as PropType<CheckerShape>,
     default: 'round',
   },
 };
@@ -20,7 +23,7 @@ export default defineComponent({
   props: {
     ...checkerProps,
     role: String,
-    parent: Object,
+    parent: Object as PropType<Record<string, any> | null>,
     checked: Boolean,
     bindGroup: {
       type: Boolean,
@@ -41,14 +44,13 @@ export default defineComponent({
       if (props.parent && props.bindGroup) {
         return props.parent.props[name];
       }
-      return null;
     };
 
-    const disabled = computed(
+    const disabled = computed<boolean>(
       () => getParentProp('disabled') || props.disabled
     );
 
-    const direction = computed(() => getParentProp('direction') || null);
+    const direction = computed(() => getParentProp('direction'));
 
     const iconStyle = computed(() => {
       const checkedColor = props.checkedColor || getParentProp('checkedColor');

src/checkbox/README.zh-CN.md

@@ -279,7 +279,7 @@ export default {
 | --- | --- | --- | --- |
 | v-model | 所有选中项的标识符 | _any[]_ | - |
 | disabled | 是否禁用所有复选框 | _boolean_ | `false` |
-| max | 最大可选数，`0`为无限制 | _number \| string_ | `0` |
+| max | 最大可选数，`0` 为无限制 | _number \| string_ | `0` |
 | direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
 | icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
 | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` |

src/checkbox/index.tsx

@@ -4,11 +4,10 @@ import { useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 import { useLinkField } from '../composables/use-link-field';
 import Checker, { checkerProps } from './Checker';
+import { CHECKBOX_GROUP_KEY, CheckboxGroupProvide } from '../checkbox-group';
 
 const [createComponent, bem] = createNamespace('checkbox');
 
-export const CHECKBOX_KEY = 'vanCheckbox';
-
 export default createComponent({
   props: {
     ...checkerProps,
@@ -21,11 +20,11 @@ export default createComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { parent } = useParent(CHECKBOX_KEY);
+    const { parent } = useParent<CheckboxGroupProvide>(CHECKBOX_GROUP_KEY);
 
-    const setParentValue = (checked) => {
+    const setParentValue = (checked: boolean) => {
       const { name } = props;
-      const { max, modelValue } = parent.props;
+      const { max, modelValue } = parent!.props;
       const value = modelValue.slice();
 
       if (checked) {
@@ -35,7 +34,7 @@ export default createComponent({
           value.push(name);
 
           if (props.bindGroup) {
-            parent.emit('update:modelValue', value);
+            parent!.updateModelValue(value);
           }
         }
       } else {
@@ -45,7 +44,7 @@ export default createComponent({
           value.splice(index, 1);
 
           if (props.bindGroup) {
-            parent.emit('update:modelValue', value);
+            parent!.updateModelValue(value);
           }
         }
       }
@@ -83,7 +82,6 @@ export default createComponent({
         role="checkbox"
         parent={parent}
         checked={checked.value}
-        bindGroup={props.bindGroup}
         onToggle={toggle}
         {...props}
       />