From 6d53ef87c4f5079d3cc05cb676bca6211115017e Mon Sep 17 00:00:00 2001 From: Ryan Date: Sat, 5 Sep 2020 15:38:55 +0800 Subject: [PATCH] refactor(transfer): correct requested changes --- packages/transfer/__tests__/transfer.spec.ts | 6 +-- packages/transfer/doc/customizable.vue | 24 ++++++----- packages/transfer/src/index.vue | 39 +++++++++--------- packages/transfer/src/option-content.vue | 26 ------------ packages/transfer/src/transfer-panel.vue | 42 ++++++++------------ packages/transfer/src/transfer.d.ts | 6 +-- packages/transfer/src/useCheck.ts | 36 +++++++++-------- packages/transfer/src/useCheckedChange.ts | 8 ++-- packages/transfer/src/useMove.ts | 12 +++--- 9 files changed, 85 insertions(+), 114 deletions(-) delete mode 100644 packages/transfer/src/option-content.vue diff --git a/packages/transfer/__tests__/transfer.spec.ts b/packages/transfer/__tests__/transfer.spec.ts index d1822f1ea1..768f707878 100644 --- a/packages/transfer/__tests__/transfer.spec.ts +++ b/packages/transfer/__tests__/transfer.spec.ts @@ -7,7 +7,7 @@ describe('Transfer', () => { for (let i = 1; i <= 15; i++) { data.push({ key: i, - label: `备选项 ${ i }`, + label: `备选项 ${i}`, disabled: i % 4 === 0, }) } @@ -136,8 +136,8 @@ describe('Transfer', () => { } }, methods: { - renderFunc(h, option) { - return h('span', `${ option.key } - ${ option.label }`) + renderFunc(h ,option) { + return h('span', `${option.key} - ${option.label}`) }, }, }) diff --git a/packages/transfer/doc/customizable.vue b/packages/transfer/doc/customizable.vue index 344db4cbda..e53e123872 100644 --- a/packages/transfer/doc/customizable.vue +++ b/packages/transfer/doc/customizable.vue @@ -1,9 +1,11 @@ -

Customize data items using scoped slot

-
+

+ Customize data items using scoped slot +

+
- +
- +
diff --git a/packages/transfer/src/transfer-panel.vue b/packages/transfer/src/transfer-panel.vue index 7ed45779db..c14be2701f 100644 --- a/packages/transfer/src/transfer-panel.vue +++ b/packages/transfer/src/transfer-panel.vue @@ -24,7 +24,10 @@ @mouseleave="inputHover = false" > -

- {{ t('el.transfer.noMatch') }} -

-

- {{ t('el.transfer.noData') }} +

+ {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}

@@ -70,10 +64,8 @@ import { t } from '@element-plus/locale' import ElCheckboxGroup from '@element-plus/checkbox/src/checkbox-group.vue' import ElCheckbox from '@element-plus/checkbox/src/checkbox.vue' import ElInput from '@element-plus/input/src/index.vue' -import OptionContent from './option-content.vue' import { useCheck } from './useCheck' - export const CHECKED_CHANGE_EVENT = 'checked-change' export default defineComponent({ @@ -83,7 +75,7 @@ export default defineComponent({ ElCheckboxGroup, ElCheckbox, ElInput, - OptionContent, + OptionContent: ({ option }) => option, }, props: { @@ -93,7 +85,7 @@ export default defineComponent({ return [] }, }, - renderContent: Function, + optionRender: Function, placeholder: String, title: String, filterable: Boolean, @@ -106,7 +98,7 @@ export default defineComponent({ emits: [CHECKED_CHANGE_EVENT], setup(props, { emit, slots }) { - const initData = reactive({ + const panelState = reactive({ checked: [], allChecked: false, query: '', @@ -114,7 +106,6 @@ export default defineComponent({ checkChangeByUser: true, }) - const { labelProp, keyProp, @@ -123,13 +114,14 @@ export default defineComponent({ checkedSummary, isIndeterminate, handleAllCheckedChange, - } = useCheck(props, initData, emit) + } = useCheck(props, panelState, emit) - - const hasNoMatch = computed(() => initData.query.length > 0 && filteredData.value.length === 0) + const hasNoMatch = computed(() => { + return panelState.query.length > 0 && filteredData.value.length === 0 + }) const inputIcon = computed(() => { - return initData.query.length > 0 && initData.inputHover + return panelState.query.length > 0 && panelState.inputHover ? 'circle-close' : 'search' }) @@ -138,7 +130,7 @@ export default defineComponent({ const clearQuery = () => { if (inputIcon.value === 'circle-close') { - initData.query = '' + panelState.query = '' } } @@ -148,7 +140,7 @@ export default defineComponent({ query, inputHover, checkChangeByUser, - } = toRefs(initData) + } = toRefs(panelState) return { labelProp, diff --git a/packages/transfer/src/transfer.d.ts b/packages/transfer/src/transfer.d.ts index 58f3df4ec8..17dc3c19a2 100644 --- a/packages/transfer/src/transfer.d.ts +++ b/packages/transfer/src/transfer.d.ts @@ -35,14 +35,14 @@ export declare interface TransferProps { targetOrder: 'original' | 'push' | 'unshift' } -export declare interface TransferInitData { +export declare interface TransferCheckedState { leftChecked: Key[] rightChecked: Key[] } export declare interface TransferPanelProps { data: DataItem[] - renderContent: (h, option) => VNode + optionRender: ({ option: VNode }) => VNode placeholder: string title: string filterable: boolean @@ -52,7 +52,7 @@ export declare interface TransferPanelProps { props: Props } -export declare interface TransferPanelInitData { +export declare interface TransferPanelState { checked: Key[] allChecked: boolean query: string diff --git a/packages/transfer/src/useCheck.ts b/packages/transfer/src/useCheck.ts index 675c230948..491ebcdee3 100644 --- a/packages/transfer/src/useCheck.ts +++ b/packages/transfer/src/useCheck.ts @@ -1,9 +1,9 @@ import { computed, watch } from 'vue' -import { TransferPanelProps, TransferPanelInitData, Key } from './transfer' +import { TransferPanelProps, TransferPanelState, Key } from './transfer' import { CHECKED_CHANGE_EVENT } from './transfer-panel.vue' -export const useCheck = (props: TransferPanelProps, initData: TransferPanelInitData, emit) => { +export const useCheck = (props: TransferPanelProps, panelState: TransferPanelState, emit) => { const labelProp = computed(() => props.props.label || 'label') @@ -15,18 +15,20 @@ export const useCheck = (props: TransferPanelProps, initData: TransferPanelInitD const filteredData = computed(() => { return props.data.filter(item => { if (typeof props.filterMethod === 'function') { - return props.filterMethod(initData.query, item) + return props.filterMethod(panelState.query, item) } else { const label = item[labelProp.value] || item[keyProp.value].toString() - return label.toLowerCase().includes(initData.query.toLowerCase()) + return label.toLowerCase().includes(panelState.query.toLowerCase()) } }) }) - const checkableData = computed(() => filteredData.value.filter(item => !item[disabledProp.value])) + const checkableData = computed(() => { + return filteredData.value.filter(item => !item[disabledProp.value]) + }) const checkedSummary = computed(() => { - const checkedLength = initData.checked.length + const checkedLength = panelState.checked.length const dataLength = props.data.length const { noChecked, hasChecked } = props.format @@ -42,31 +44,31 @@ export const useCheck = (props: TransferPanelProps, initData: TransferPanelInitD }) const isIndeterminate = computed(() => { - const checkedLength = initData.checked.length + const checkedLength = panelState.checked.length return checkedLength > 0 && checkedLength < checkableData.value.length }) const updateAllChecked = () => { const checkableDataKeys = checkableData.value.map(item => item[keyProp.value]) - initData.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every(item => initData.checked.includes(item)) + panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every(item => panelState.checked.includes(item)) } const handleAllCheckedChange = (value: Key[]) => { - initData.checked = value ? checkableData.value.map(item => item[keyProp.value]) : [] + panelState.checked = value ? checkableData.value.map(item => item[keyProp.value]) : [] } - watch(() => initData.checked, (val, oldVal) => { + watch(() => panelState.checked, (val, oldVal) => { updateAllChecked() - if (initData.checkChangeByUser) { + 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) - initData.checkChangeByUser = true + panelState.checkChangeByUser = true } }) @@ -78,13 +80,13 @@ export const useCheck = (props: TransferPanelProps, initData: TransferPanelInitD watch(() => props.data, () => { const checked = [] const filteredDataKeys = filteredData.value.map(item => item[keyProp.value]) - initData.checked.forEach(item => { + panelState.checked.forEach(item => { if (filteredDataKeys.includes(item)) { checked.push(item) } }) - initData.checkChangeByUser = false - initData.checked = checked + panelState.checkChangeByUser = false + panelState.checked = checked }) watch(() => props.defaultChecked, (val, oldVal) => { @@ -98,8 +100,8 @@ export const useCheck = (props: TransferPanelProps, initData: TransferPanelInitD checked.push(item) } }) - initData.checkChangeByUser = false - initData.checked = checked + panelState.checkChangeByUser = false + panelState.checked = checked }, { immediate: true, }) diff --git a/packages/transfer/src/useCheckedChange.ts b/packages/transfer/src/useCheckedChange.ts index 4265502df4..9caf56267d 100644 --- a/packages/transfer/src/useCheckedChange.ts +++ b/packages/transfer/src/useCheckedChange.ts @@ -1,16 +1,16 @@ -import { TransferInitData, Key } from './transfer' +import { TransferCheckedState, Key } from './transfer' import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT } from './index.vue' -export const useCheckedChange = (initData: TransferInitData, emit) => { +export const useCheckedChange = (checkedState: TransferCheckedState, emit) => { const onSourceCheckedChange = (val: Key[], movedKeys: Key[]) => { - initData.leftChecked = val + checkedState.leftChecked = val if (movedKeys === undefined) return emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys) } const onTargetCheckedChange = (val: Key[], movedKeys: Key[]) => { - initData.rightChecked = val + checkedState.rightChecked = val if (movedKeys === undefined) return emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys) } diff --git a/packages/transfer/src/useMove.ts b/packages/transfer/src/useMove.ts index 3f912acff8..4b58be2123 100644 --- a/packages/transfer/src/useMove.ts +++ b/packages/transfer/src/useMove.ts @@ -1,9 +1,9 @@ import { ComputedRef } from 'vue' import { UPDATE_MODEL_EVENT } from '../../utils/constants' import { CHANGE_EVENT } from './index.vue' -import { TransferProps, TransferInitData, DataItem, Key } from './transfer' +import { TransferProps, TransferCheckedState, DataItem, Key } from './transfer' -export const useMove = (props: TransferProps, initData: TransferInitData, propsKey: ComputedRef, emit) => { +export const useMove = (props: TransferProps, checkedState: TransferCheckedState, propsKey: ComputedRef, emit) => { const _emit = (value, type: 'left' | 'right', checked: Key[]) => { emit(UPDATE_MODEL_EVENT, value) emit(CHANGE_EVENT, value, type, checked) @@ -12,13 +12,13 @@ export const useMove = (props: TransferProps, initData: TransferInitData, propsK const addToLeft = () => { const currentValue = props.modelValue.slice() - initData.rightChecked.forEach(item => { + checkedState.rightChecked.forEach(item => { const index = currentValue.indexOf(item) if (index > -1) { currentValue.splice(index, 1) } }) - _emit(currentValue, 'left', initData.rightChecked) + _emit(currentValue, 'left', checkedState.rightChecked) } const addToRight = () => { @@ -27,7 +27,7 @@ export const useMove = (props: TransferProps, initData: TransferInitData, propsK const itemsToBeMoved = props.data .filter((item: DataItem) => { const itemKey = item[propsKey.value] - return initData.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey) + return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey) }) .map(item => item[propsKey.value]) @@ -35,7 +35,7 @@ export const useMove = (props: TransferProps, initData: TransferInitData, propsK ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved) - _emit(currentValue, 'right', initData.leftChecked) + _emit(currentValue, 'right', checkedState.leftChecked) } return {