From a8d825bce8c0097b95a7189883f1583945584bed Mon Sep 17 00:00:00 2001
From: zouhang <zouhang@didiglobal.com>
Date: Mon, 31 Aug 2020 09:51:33 +0800
Subject: [PATCH] feat(checkbox): optimize code logic

---
 packages/checkbox/src/checkbox-button.vue | 44 ++++++++-----------
 packages/checkbox/src/checkbox-group.vue  |  8 ++--
 packages/checkbox/src/checkbox.d.ts       | 32 ++++++++++++++
 packages/checkbox/src/checkbox.vue        | 53 ++++++++++-------------
 packages/checkbox/src/useCheckbox.ts      | 51 +++++++++++++++++++---
 5 files changed, 122 insertions(+), 66 deletions(-)
 create mode 100644 packages/checkbox/src/checkbox.d.ts

diff --git a/packages/checkbox/src/checkbox-button.vue b/packages/checkbox/src/checkbox-button.vue
index 55484031a6..99fa95e25e 100644
--- a/packages/checkbox/src/checkbox-button.vue
+++ b/packages/checkbox/src/checkbox-button.vue
@@ -56,17 +56,17 @@ import {
   PropType,
   watch,
 } from 'vue'
-import { useCheckbox } from './useCheckbox'
+import { useCheckboxGroup } from './useCheckbox'
 
 export default defineComponent({
   name: 'ElCheckboxButton',
   props: {
     modelValue: {
-      type: [Object, Boolean, String, Number] as PropType<Record<string, unknown> | boolean | number>,
+      type: [Boolean, Number, String] as PropType<boolean | number | string>,
       default: () => undefined,
     },
     label: {
-      type: [Object, Boolean, String] as PropType<Record<string, unknown> | boolean | string>,
+      type: [Boolean, Number, String] as PropType<boolean | number | string>,
     },
     indeterminate: Boolean,
     disabled: Boolean,
@@ -86,11 +86,11 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
-    const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
-    const selfModel = ref(false)
+    let selfModel = false
+    const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
     const focus = ref(false)
     const isLimitExceeded = ref(false)
-    const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
+    const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
     const model = computed({
       get() {
         return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
@@ -100,17 +100,17 @@ export default defineComponent({
         if (isGroup.value) {
           isLimitExceeded.value = false
 
-          if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
+          if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
             isLimitExceeded.value = true
           }
-          if (_checkboxGroup.max !== undefined && val.length > _checkboxGroup.max) {
+          if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
             isLimitExceeded.value = true
           }
 
-          isLimitExceeded.value === false && _checkboxGroup.changeEvent?.(val)
+          isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
         } else {
           emit('update:modelValue', val)
-          selfModel.value = val
+          selfModel = val
         }
       },
     })
@@ -124,27 +124,27 @@ export default defineComponent({
       }
     })
     const isLimitDisabled = computed(() => {
-      const max = _checkboxGroup.max
-      const min = _checkboxGroup.min
+      const max = checkboxGroup.max
+      const min = checkboxGroup.min
       return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
           (model.value.length <= min && isChecked.value)
     })
     const isDisabled = computed(() => {
       return isGroup.value
-        ? _checkboxGroup.disabled || props.disabled ||  (elForm as any || {} as any).disabled || isLimitDisabled.value
+        ? checkboxGroup.disabled || props.disabled ||  (elForm as any || {} as any).disabled || isLimitDisabled.value
         : props.disabled || (elForm as any || {} as any).disabled
     })
 
     const activeStyle = computed(() => {
       return {
-        backgroundColor: _checkboxGroup.fill || '',
-        borderColor: _checkboxGroup.fill || '',
-        color: _checkboxGroup.textColor || '',
-        'box-shadow': '-1px 0 0 0 ' + _checkboxGroup.fill,
+        backgroundColor: checkboxGroup.fill || '',
+        borderColor: checkboxGroup.fill || '',
+        color: checkboxGroup.textColor || '',
+        'box-shadow': '-1px 0 0 0 ' + checkboxGroup.fill,
       }
     })
 
-    const size = computed(() => _checkboxGroup.checkboxGroupSize || _elFormItemSize || (ELEMENT || {}).size)
+    const size = computed(() => checkboxGroup.checkboxGroupSize || elFormItemSize || (ELEMENT || {}).size)
 
     function addToStore() {
       if (
@@ -167,14 +167,6 @@ export default defineComponent({
       }
 
       emit('change', value.value, e)
-      /**
-       * to discuss it's useful
-       */
-      // nextTick(() => {
-      //   if (isGroup.value) {
-      //     _checkboxGroup.changeEvent?.(_checkboxGroup.modelValue.value)
-      //   }
-      // })
     }
 
     watch(() => props.modelValue, val => {
diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
index 588e7e845f..d2bc0f4ca4 100644
--- a/packages/checkbox/src/checkbox-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, watch, provide, nextTick } from 'vue'
-import { useCheckbox } from './useCheckbox'
+import { useCheckboxGroup } from './useCheckbox'
 
 export default defineComponent({
   name: 'ElCheckboxGroup',
@@ -42,8 +42,8 @@ export default defineComponent({
   emits: ['update:modelValue', 'change'],
 
   setup(props, ctx) {
-    const { elFormItem, _elFormItemSize, ELEMENT } = useCheckbox()
-    const checkboxGroupSize = computed(() => props.size || _elFormItemSize.value || (ELEMENT || {}).size)
+    const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup()
+    const checkboxGroupSize = computed(() => props.size || elFormItemSize.value || (ELEMENT || {}).size)
 
     const changeEvent = value => {
       ctx.emit('update:modelValue', value)
@@ -71,7 +71,7 @@ export default defineComponent({
       fill: props.fill,
       textColor: props.textColor,
       checkboxGroupSize: checkboxGroupSize.value,
-      changeEvent: changeEvent,
+      changeEvent,
     })
 
     watch(() => props.modelValue, val => {
diff --git a/packages/checkbox/src/checkbox.d.ts b/packages/checkbox/src/checkbox.d.ts
new file mode 100644
index 0000000000..2e30d2f773
--- /dev/null
+++ b/packages/checkbox/src/checkbox.d.ts
@@ -0,0 +1,32 @@
+import { ComputedRef, PropType } from 'vue'
+export interface ICheckboxGroupInstance {
+  name?: string
+  modelValue?: ComputedRef
+  disabled?: boolean
+  min?: string | number
+  max?: string | number
+  size?: string
+  fill?: string
+  textColor?: string
+  checkboxGroupSize?: ComputedRef<string>
+  changeEvent?: (val: any) => void
+}
+
+export interface ICheckboxProps {
+  modelValue: ICheckboxModelValue
+  label?:ICheckboxLabel
+  indeterminate?: boolean
+  disabled?: boolean
+  checked?: boolean
+  name?: string
+  trueLabel?: string| number
+  falseLabel?: string| number
+  id?: string
+  controls?: string
+  border?: boolean
+  size?: string
+}
+
+export type ICheckboxLabel = PropType<string | boolean | number>
+export type ICheckboxModelValue = PropType<string | boolean | number>
+
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 15b4372949..bc746ee8ef 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -67,17 +67,17 @@ import {
   onMounted,
   PropType,
 } from 'vue'
-import { useCheckbox } from './useCheckbox'
+import { useCheckboxGroup } from './useCheckbox'
 
 export default defineComponent({
   name: 'ElCheckbox',
   props: {
     modelValue: {
-      type: [Object, Boolean, String, Number] as PropType<Record<string, unknown> | boolean | number>,
+      type: [Boolean, Number, String] as PropType<boolean | number | string>,
       default: () => undefined,
     },
     label: {
-      type: [Object, Boolean, String] as PropType<Record<string, unknown> | boolean | string>,
+      type: [Boolean, Number, String] as PropType<boolean | number | string>,
     },
     indeterminate: Boolean,
     disabled: Boolean,
@@ -110,31 +110,32 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
-    const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
+    let selfModel = false
+    const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
     const instance = getCurrentInstance()
-    const selfModel = ref<unknown>(false)
     const focus = ref(false)
     const isLimitExceeded = ref(false)
-    const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
-    const model = computed<unknown>({
+    const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
+    const model = computed({
       get() {
         return isGroup.value
-          ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel.value
+          ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
       },
       set(val: unknown) {
         if (isGroup.value && Array.isArray(val)) {
           isLimitExceeded.value = false
-          if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
+
+          if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
             isLimitExceeded.value = true
           }
-          if (_checkboxGroup.max !== undefined && val.length > _checkboxGroup.max) {
+          if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
             isLimitExceeded.value = true
           }
 
-          isLimitExceeded.value === false && _checkboxGroup.changeEvent?.(val)
+          isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
         } else {
           emit('update:modelValue', val)
-          selfModel.value = val
+          selfModel = val as boolean
         }
       },
     })
@@ -149,20 +150,20 @@ export default defineComponent({
       }
     })
     const isLimitDisabled = computed(() => {
-      const max = _checkboxGroup.max
-      const min = _checkboxGroup.min
+      const max = checkboxGroup.max
+      const min = checkboxGroup.min
       return !!(max || min) && (model.value.length >= max && !isChecked.value) ||
           (model.value.length <= min && isChecked.value)
     })
     const isDisabled = computed(() => {
       return isGroup.value
-        ? _checkboxGroup.disabled || props.disabled ||  (elForm as any || {} as any).disabled || isLimitDisabled.value
+        ? checkboxGroup.disabled || props.disabled ||  (elForm as any || {} as any).disabled || isLimitDisabled.value
         : props.disabled || (elForm as any || {} as any).disabled
     })
     const checkboxSize = computed(() => {
-      const temCheckboxSize = props.size || _elFormItemSize.value || (ELEMENT || {} as any).size
+      const temCheckboxSize = props.size || elFormItemSize.value || (ELEMENT || {} as any).size
       return isGroup.value
-        ? _checkboxGroup.checkboxGroupSize || temCheckboxSize
+        ? checkboxGroup.checkboxGroupSize || temCheckboxSize
         : temCheckboxSize
     })
 
@@ -179,20 +180,14 @@ export default defineComponent({
 
     function handleChange(e: InputEvent) {
       if (isLimitExceeded.value) return
-      const target = e.target as HTMLInputElement
-      const value = target.checked
-        ? props.trueLabel ?? true
-        : props.falseLabel ?? false
+      let value
+      if ((e.target as HTMLInputElement).checked) {
+        value = props.trueLabel === undefined ? true : props.trueLabel
+      } else {
+        value = props.falseLabel === undefined ? false : props.falseLabel
+      }
 
       emit('change', value, e)
-      /**
-       * to discuss does it is useful
-       */
-      // nextTick(() => {
-      //   if (isGroup.value) {
-      //     _checkboxGroup.changeEvent?.(_checkboxGroup.modelValue.value)
-      //   }
-      // })
     }
 
     watch(() => props.modelValue, val => {
diff --git a/packages/checkbox/src/useCheckbox.ts b/packages/checkbox/src/useCheckbox.ts
index 0ad020a86b..373621d4ee 100644
--- a/packages/checkbox/src/useCheckbox.ts
+++ b/packages/checkbox/src/useCheckbox.ts
@@ -1,23 +1,60 @@
-import { ref, computed, inject } from 'vue'
+import { ref, computed, inject, getCurrentInstance, SetupContext } from 'vue'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox'
 
-export const useCheckbox = () => {
+export const useCheckboxGroup = () => {
   //todo: ELEMENT
   const ELEMENT = null
   const elForm = inject('elForm', {})
   const elFormItem = inject('elFormItem', {}) as any
-  const _checkboxGroup = inject('CheckboxGroup', {}) as any
+  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})
   const focus = ref(false)
-  const isGroup = computed(() => _checkboxGroup && _checkboxGroup.name === 'ElCheckboxGroup')
-  const _elFormItemSize = computed(() => {
+  const isGroup = computed(() => checkboxGroup && checkboxGroup.name === 'ElCheckboxGroup')
+  const elFormItemSize = computed(() => {
     return (elFormItem || {} as any).elFormItemSize
   })
   return {
     isGroup,
     focus,
-    _checkboxGroup,
+    checkboxGroup,
     elForm,
     ELEMENT,
-    _elFormItemSize,
+    elFormItemSize,
     elFormItem,
   }
 }
+
+export const useCheckbox = (props: ICheckboxProps, { emit }: SetupContext) => {
+  let selfModel = false
+  const { elForm, isGroup, checkboxGroup, elFormItemSize, elFormItem, ELEMENT } = useCheckboxGroup()
+  const instance = getCurrentInstance()
+  const focus = ref(false)
+  const isLimitExceeded = ref(false)
+  const store = computed(() => checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue)
+  const model = computed({
+    get() {
+      return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
+    },
+
+    set(val: any) {
+      if (isGroup.value) {
+        isLimitExceeded.value = false
+
+        if (checkboxGroup.min !== undefined && val.length < checkboxGroup.min) {
+          isLimitExceeded.value = true
+        }
+        if (checkboxGroup.max !== undefined && val.length > checkboxGroup.max) {
+          isLimitExceeded.value = true
+        }
+
+        isLimitExceeded.value === false && checkboxGroup.changeEvent?.(val)
+      } else {
+        emit('update:modelValue', val)
+        selfModel = val
+      }
+    },
+  })
+  return {
+    instance,
+  }
+}