@tuniao/tnui-vue3-uniapp/components/checkbox/src/composables/use-checkbox.ts

TuniaoUI for vue3 uniapp

import { computed, getCurrentInstance, nextTick } from 'vue'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../../constants'
import { useFormItem } from '../../../form'
import { debugWarn } from '../../../../utils'
import { useCheckboxCommonProps } from './use-checkbox-common-props'

import type { CheckboxProps } from '../checkbox'
import type { CheckboxValueType } from '../../../base/types/checkbox'

// 判断复选框组中是否包含某个值
const hasLabelInGroup = (
  groupValue: CheckboxValueType[],
  label: CheckboxValueType
) => groupValue.includes(label)

export const useCheckbox = (props: CheckboxProps) => {
  const { emit } = getCurrentInstance()!

  const { checkboxGroup, disabled, maxDisabled, labelDisabled } =
    useCheckboxCommonProps(props)

  const { formItem } = useFormItem()

  // 判断是否为复选组
  const isGroup = computed(() => !!checkboxGroup)

  // 在复选组中是否选中当前复选框
  const selected = computed(() => {
    if (isGroup.value) {
      return hasLabelInGroup(checkboxGroup!.modelValue, props.label!)
    } else {
      return props.modelValue === props.activeValue
    }
  })

  // 复选框点击事件
  const handleCheckboxClick = (type: 'checkbox' | 'label') => {
    if (disabled.value || maxDisabled.value) return
    if (type === 'label' && labelDisabled.value) return

    if (isGroup.value) {
      checkboxGroup!.changeEvent(props.label!)
    } else {
      const modelValue = selected.value
        ? props.inactiveValue
        : props.activeValue
      emit(UPDATE_MODEL_EVENT, modelValue)
      nextTick(() => {
        emit(CHANGE_EVENT, modelValue)
      })
      if (props.validateEvent) {
        formItem?.validate?.('change').catch((err) => {
          debugWarn(err)
        })
      }
    }
  }

  return {
    isGroup,
    selected,
    handleCheckboxClick,
  }
}