You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
8.1 KiB
1 line
8.1 KiB
2 years ago
|
{"version":3,"file":"use-check.mjs","sources":["../../../../../../../packages/components/transfer/src/composables/use-check.ts"],"sourcesContent":["import { computed, watch } from 'vue'\nimport { isFunction } from '@element-plus/utils'\nimport { CHECKED_CHANGE_EVENT } from '../transfer-panel'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type { TransferKey } from '../transfer'\nimport type {\n TransferPanelEmits,\n TransferPanelProps,\n TransferPanelState,\n} from '../transfer-panel'\n\nexport const useCheck = (\n props: TransferPanelProps,\n panelState: TransferPanelState,\n emit: SetupContext<TransferPanelEmits>['emit']\n) => {\n const propsAlias = usePropsAlias(props)\n\n const filteredData = computed(() => {\n return props.data.filter((item) => {\n if (isFunction(props.filterMethod)) {\n return props.filterMethod(panelState.query, item)\n } else {\n const label = String(\n item[propsAlias.value.label] || item[propsAlias.value.key]\n )\n return label.toLowerCase().includes(panelState.query.toLowerCase())\n }\n })\n })\n\n const checkableData = computed(() =>\n filteredData.value.filter((item) => !item[propsAlias.value.disabled])\n )\n\n const checkedSummary = computed(() => {\n const checkedLength = panelState.checked.length\n const dataLength = props.data.length\n const { noChecked, hasChecked } = props.format\n\n if (noChecked && hasChecked) {\n return checkedLength > 0\n ? hasChecked\n .replace(/\\${checked}/g, checkedLength.toString())\n .replace(/\\${total}/g, dataLength.toString())\n : noChecked.replace(/\\${total}/g, dataLength.toString())\n } else {\n return `${checkedLength}/${dataLength}`\n }\n })\n\n const isIndeterminate = computed(() => {\n const checkedLength = panelState.checked.length\n return checkedLength > 0 && checkedLength < checkableData.value.length\n })\n\n const updateAllChecked = () => {\n const checkableDataKeys = checkableData.value.map(\n (item) => item[propsAlias.value.key]\n )\n panelState.allChecked =\n checkableDataKeys.length > 0 &&\n checkableDataKeys.every((item) => panelState.checked.includes(item))\n }\n\n const handleAllCheckedChange = (value: CheckboxValueType) => {\n panelState.checked = value\n ? checkableData.value.map((item) => item[propsAlias.value.key])\n : []\n }\n\n watch(\n () => panelState.checked,\n (val, oldVal) => {\n updateAllChecked()\n\n if (panelState.checkChangeByUser) {\n const movedKeys = val\n .concat(oldVal)\n .filter((v) => !val.includes(v) || !oldVal.includes(v))\n emit(CHECKED_CHANGE_EVENT, val, movedKeys)\n } else {\n emit(CHECKED_CHANGE_EVENT, val)\n panelState.checkChangeByUser = true\n }\n }\n )\n\n watch(checkableData, () => {\n updateAllChecked()\n })\n\n watch(\n () => props.data,\n () => {\n const checked: TransferKey[] = []\n const filteredDataKeys = filteredData.value.map(\n (item) => item[propsAlias.value.key]\n )\n panelState.checked.forEach((item) => {\n if (filteredDataKeys.includes(item)) {\n checked.push(item)\n }\n })\n panelState.checkChangeByUser = false\n panelState.checked = checked\n }\n )\n\n watch(\n () => props.defaultChecked,\n (val, oldVal) => {\n if (\n oldVal &&\n val.length === oldVal.length &&\n val.every((item) => oldVal.includes(item))\n )\n return\n\n const checked: TransferKey[] = []\n const checkableDataKeys = checkableData.value.map(\n (item) => item[propsAlias.value.key]\n )\n\n val.forEach((item) => {\n if (checkableDataKeys.includes(item)) {\n checked.push(item)\n }\n })\n panelState.checkChangeByUser = false\n panelState.checked = checke
|