tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 11 kB
Source Map (JSON)
{"version":3,"file":"useKeyboardControl.mjs","sources":["../../../../components/select/hooks/useKeyboardControl.ts"],"sourcesContent":["import { ref, watch, ComputedRef, Ref } from 'vue';\nimport { usePrefixClass } from '../../hooks/useConfig';\n\nimport { getNewMultipleValue } from '../utils';\n\nimport type { SelectOption, TdOptionProps, SelectValue } from '../type';\nimport type { ChangeHandler } from '../../hooks/useVModel';\nimport type { PopupVisibleChangeContext } from '../../popup';\n\nexport type useKeyboardControlType = {\n displayOptions: ComputedRef<SelectOption[]>;\n optionsList: ComputedRef<TdOptionProps[]>;\n innerPopupVisible: Ref<boolean>;\n setInnerPopupVisible: ChangeHandler<boolean, [context: PopupVisibleChangeContext]>;\n selectPanelRef: Ref<{ isVirtual: boolean; innerRef: HTMLDivElement }>;\n isFilterable: ComputedRef<boolean>;\n isRemoteSearch: ComputedRef<boolean>;\n getSelectedOptions: (selectValue?: SelectValue[] | SelectValue) => TdOptionProps[];\n setInnerValue: Function;\n innerValue: Ref<SelectValue[]>;\n popupContentRef: ComputedRef<HTMLElement>;\n multiple: boolean;\n max: number;\n};\n\n// 统一处理键盘控制的hooks\nexport function useKeyboardControl({\n displayOptions,\n optionsList,\n innerPopupVisible,\n setInnerPopupVisible,\n selectPanelRef,\n isFilterable,\n isRemoteSearch,\n getSelectedOptions,\n setInnerValue,\n innerValue,\n popupContentRef,\n multiple,\n max,\n}: useKeyboardControlType) {\n const hoverIndex = ref(-1);\n const filteredOptions = ref([]); // 处理普通场景选项过滤键盘选中的问题\n const virtualFilteredOptions = ref([]); // 处理虚拟滚动下选项过滤通过键盘选择的问题\n const classPrefix = usePrefixClass();\n const handleKeyDown = (e: KeyboardEvent) => {\n const optionsListLength = displayOptions.value.length;\n let newIndex = hoverIndex.value;\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n if (hoverIndex.value === -1) {\n newIndex = 0;\n } else if (hoverIndex.value === 0 || hoverIndex.value > displayOptions.value.length - 1) {\n newIndex = optionsListLength - 1;\n } else {\n newIndex--;\n }\n if (optionsList.value[newIndex]?.disabled) {\n newIndex--;\n }\n hoverIndex.value = newIndex;\n break;\n case 'ArrowDown':\n e.preventDefault();\n\n if (hoverIndex.value === -1 || hoverIndex.value >= optionsListLength - 1) {\n newIndex = 0;\n } else {\n newIndex++;\n }\n if (optionsList.value[newIndex]?.disabled) {\n newIndex++;\n }\n hoverIndex.value = newIndex;\n break;\n case 'Enter':\n if (hoverIndex.value === -1) break;\n\n let finalOptions =\n selectPanelRef.value.isVirtual && isFilterable.value && virtualFilteredOptions.value.length\n ? virtualFilteredOptions.value\n : isRemoteSearch.value\n ? optionsList.value\n : filteredOptions.value;\n\n if (!finalOptions.length) finalOptions = optionsList.value;\n if (!innerPopupVisible.value) {\n setInnerPopupVisible(true, { e });\n break;\n }\n\n if (!multiple) {\n const selectedOptions = getSelectedOptions(finalOptions[hoverIndex.value].value);\n setInnerValue(finalOptions[hoverIndex.value].value, {\n option: selectedOptions?.[0],\n selectedOptions: getSelectedOptions(finalOptions[hoverIndex.value].value),\n trigger: 'check',\n e,\n });\n setInnerPopupVisible(false, { e });\n } else {\n if (hoverIndex.value === -1) return;\n const optionValue = finalOptions[hoverIndex.value]?.value;\n\n if (!optionValue) return;\n const newValue = getNewMultipleValue(innerValue.value, optionValue);\n\n if (max > 0 && newValue.value.length > max) return; // 如果已选达到最大值 则不处理\n const selectedOptions = getSelectedOptions(newValue.value);\n setInnerValue(newValue.value, {\n option: selectedOptions.find((v) => v.value == optionValue),\n selectedOptions,\n trigger: newValue.isCheck ? 'check' : 'uncheck',\n e,\n });\n filteredOptions.value = [];\n }\n break;\n case 'Escape':\n setInnerPopupVisible(false, { e });\n break;\n }\n };\n\n watch(innerPopupVisible, (value) => {\n if (value) {\n // 展开重新恢复初始值\n hoverIndex.value = -1;\n virtualFilteredOptions.value = [];\n filteredOptions.value = [];\n }\n });\n\n // 处理键盘操作滚动 超出视图时继续自动滚动到键盘所在元素\n watch(hoverIndex, (index) => {\n const optionHeight = selectPanelRef.value?.innerRef?.querySelector(\n `.${classPrefix.value}-select-option`,\n )?.clientHeight;\n\n const scrollHeight = optionHeight * index;\n\n popupContentRef.value.scrollTo({\n top: scrollHeight,\n behavior: 'smooth',\n });\n });\n\n return {\n hoverIndex,\n handleKeyDown,\n virtualFilteredOptions,\n filteredOptions,\n };\n}\n"],"names":["useKeyboardControl","_ref","displayOptions","optionsList","innerPopupVisible","setInnerPopupVisible","selectPanelRef","isFilterable","isRemoteSearch","getSelectedOptions","setInnerValue","innerValue","popupContentRef","multiple","max","hoverIndex","ref","filteredOptions","virtualFilteredOptions","classPrefix","usePrefixClass","handleKeyDown","e","_optionsList$value$ne","_optionsList$value$ne2","optionsListLength","value","length","newIndex","code","preventDefault","disabled","finalOptions","isVirtual","selectedOptions","option","trigger","_finalOptions$hoverIn","optionValue","newValue","getNewMultipleValue","find","v","isCheck","watch","index","_selectPanelRef$value","optionHeight","innerRef","querySelector","concat","clientHeight","scrollHeight","scrollTo","top","behavior"],"mappings":"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"}