element-plus/packages/transfer/src/useCheck.ts

import { computed, watch } from 'vue'
import { TransferPanelProps, TransferPanelState, Key } from './transfer'

export const CHECKED_CHANGE_EVENT = 'checked-change'


export const useCheck = (props: TransferPanelProps, panelState: TransferPanelState, emit) => {

  const labelProp = computed(() => props.props.label || 'label')

  const keyProp = computed(() => props.props.key || 'key')

  const disabledProp = computed(() => props.props.disabled || 'disabled')


  const filteredData = computed(() => {
    return props.data.filter(item => {
      if (typeof props.filterMethod === 'function') {
        return props.filterMethod(panelState.query, item)
      } else {
        const label = item[labelProp.value] || item[keyProp.value].toString()
        return label.toLowerCase().includes(panelState.query.toLowerCase())
      }
    })
  })

  const checkableData = computed(() => {
    return filteredData.value.filter(item => !item[disabledProp.value])
  })

  const checkedSummary = computed(() => {
    const checkedLength = panelState.checked.length
    const dataLength = props.data.length
    const { noChecked, hasChecked } = props.format

    if (noChecked && hasChecked) {
      return checkedLength > 0
        ? hasChecked
          .replace(/\${checked}/g, checkedLength.toString())
          .replace(/\${total}/g, dataLength.toString())
        : noChecked.replace(/\${total}/g, dataLength.toString())
    } else {
      return `${ checkedLength }/${ dataLength }`
    }
  })

  const isIndeterminate = computed(() => {
    const checkedLength = panelState.checked.length
    return checkedLength > 0 && checkedLength < checkableData.value.length
  })


  const updateAllChecked = () => {
    const checkableDataKeys = checkableData.value.map(item => item[keyProp.value])
    panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every(item => panelState.checked.includes(item))
  }

  const handleAllCheckedChange = (value: Key[]) => {
    panelState.checked = value ? checkableData.value.map(item => item[keyProp.value]) : []
  }

  watch(() => panelState.checked, (val, oldVal) => {
    updateAllChecked()

    if (panelState.checkChangeByUser) {
      const movedKeys = val
        .concat(oldVal)
        .filter(v => !val.includes(v) || !oldVal.includes(v))
      emit(CHECKED_CHANGE_EVENT, val, movedKeys)
    } else {
      emit(CHECKED_CHANGE_EVENT, val)
      panelState.checkChangeByUser = true
    }
  })

  watch(checkableData, () => {
    updateAllChecked()
  })


  watch(() => props.data, () => {
    const checked = []
    const filteredDataKeys = filteredData.value.map(item => item[keyProp.value])
    panelState.checked.forEach(item => {
      if (filteredDataKeys.includes(item)) {
        checked.push(item)
      }
    })
    panelState.checkChangeByUser = false
    panelState.checked = checked
  })

  watch(() => props.defaultChecked, (val, oldVal) => {
    if (oldVal && val.length === oldVal.length && val.every(item => oldVal.includes(item))) return

    const checked = []
    const checkableDataKeys = checkableData.value.map(item => item[keyProp.value])

    val.forEach(item => {
      if (checkableDataKeys.includes(item)) {
        checked.push(item)
      }
    })
    panelState.checkChangeByUser = false
    panelState.checked = checked
  }, {
    immediate: true,
  })


  return {
    labelProp,
    keyProp,
    disabledProp,
    filteredData,
    checkableData,
    checkedSummary,
    isIndeterminate,
    updateAllChecked,
    handleAllCheckedChange,
  }
}