refactor(checkbox): modify to gen better dts (#2721)

src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts

@@ -5,7 +5,7 @@ import { reactive, toRefs } from 'vue';
 test('basic usage', () => {
   const wrapper = mount(Checkbox, {
     props: {
-      modelValue: '',
+      modelValue: true,
       label: '复选框'
     }
   });

src/packages/__VUE/checkbox/index.taro.vue

@@ -1,8 +1,188 @@
 <script lang="ts">
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
+import type { Component } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, componentName } = createComponent('checkbox');
-import { component } from './common';
 import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { CHECKBOX_KEY } from './types';
+const { create, componentName } = createComponent('checkbox');
+
+export default create({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    textPosition: {
+      type: String,
+      default: 'right'
+    },
+    iconSize: {
+      type: [String, Number],
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    shape: {
+      type: String,
+      default: 'round' // button
+    }
+  },
+  emits: ['change', 'update:modelValue'],
+  setup(props, { emit, slots }) {
+    const parent: any = inject(CHECKBOX_KEY, null);
+    const state = reactive({
+      partialSelect: props.indeterminate
+    });
+
+    const hasParent = computed(() => !!parent);
+
+    const pValue = computed(() => {
+      if (hasParent.value) {
+        return parent.value.value.includes(props.label);
+      } else {
+        return props.modelValue;
+      }
+    });
+
+    const pDisabled = computed(() => {
+      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
+    });
+
+    const checked = computed(() => !!props.modelValue);
+
+    const color = computed(() => {
+      return !pDisabled.value
+        ? state.partialSelect
+          ? 'nut-checkbox__icon--indeterminate'
+          : !pValue.value
+          ? 'nut-checkbox__icon--unchecked'
+          : 'nut-checkbox__icon'
+        : 'nut-checkbox__icon--disable';
+    });
+
+    let updateType = '';
+
+    const emitChange = (value: string | boolean, label?: string) => {
+      updateType = 'click';
+      emit('update:modelValue', value);
+      emit('change', value, label);
+    };
+
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (updateType == 'click') {
+          updateType = '';
+        } else {
+          emit('change', v);
+        }
+      }
+    );
+
+    const renderIcon = () => {
+      const { iconSize } = props;
+      const iconNodeMap = {
+        CheckNormal: slots.icon ? slots.icon : CheckNormal,
+        Checked: slots.checkedIcon ? slots.checkedIcon : Checked,
+        CheckDisabled: slots.indeterminate ? slots.indeterminate : CheckDisabled
+      };
+      const iconNode: Component = state.partialSelect
+        ? iconNodeMap.CheckDisabled
+        : !pValue.value
+        ? iconNodeMap.CheckNormal
+        : iconNodeMap.Checked;
+      const size = pxCheck(iconSize);
+      return h(iconNode, {
+        width: size,
+        height: size,
+        size: size,
+        class: color.value
+      });
+    };
+
+    const renderLabel = () => {
+      return h(
+        'view',
+        {
+          class: `${componentName}__label ${pDisabled.value ? `${componentName}__label--disabled` : ''}`
+        },
+        slots.default?.()
+      );
+    };
+
+    const renderButton = () => {
+      return h(
+        'view',
+        {
+          class: `${componentName}__button ${pValue.value && `${componentName}__button--active`} ${
+            pDisabled.value ? `${componentName}__button--disabled` : ''
+          }`
+        },
+        slots.default?.()
+      );
+    };
+
+    const handleClick = () => {
+      if (pDisabled.value) return;
+      if (checked.value && state.partialSelect) {
+        state.partialSelect = false;
+        emitChange(checked.value, slots.default?.()[0].children as string);
+        return;
+      }
+      emitChange(!checked.value, slots.default?.()[0].children as string);
+      if (hasParent.value) {
+        const value = parent.value.value;
+        const max = parent.max.value;
+        const { label } = props;
+        const index = value.indexOf(label);
+        if (index > -1) {
+          value.splice(index, 1);
+        } else if (index <= -1 && (value.length < max || !max)) {
+          value.push(label);
+        }
+        parent.updateValue(value);
+      }
+    };
+
+    onMounted(() => {
+      hasParent.value && parent.link(getCurrentInstance());
+    });
+
+    onBeforeUnmount(() => {
+      hasParent.value && parent.unlink(getCurrentInstance());
+    });
+
+    watch(
+      () => props.indeterminate,
+      (newVal) => {
+        state.partialSelect = newVal;
+      }
+    );
+
+    return () => {
+      return h(
+        'view',
+        {
+          class: `${componentName} ${componentName}--${props.shape} ${
+            props.textPosition === 'left' ? `${componentName}--reverse` : ''
+          }`,
 
-export default create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
+          onClick: handleClick
+        },
+        [props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
+      );
+    };
+  }
+});
 </script>