tdesign-vue-next
Version:
TDesign Component for vue-next
168 lines (162 loc) • 6.59 kB
JavaScript
/**
* tdesign v1.11.5
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var Vue = require('vue');
var hooks_useConfig = require('../../hooks/useConfig.js');
var select_utils_index = require('../utils/index.js');
require('../../config-provider/hooks/useConfig.js');
require('../../_chunks/dep-b4c4a54b.js');
require('../../_chunks/dep-f8ff548f.js');
require('@babel/runtime/helpers/typeof');
require('../../_chunks/dep-30fb1b25.js');
require('dayjs');
require('../../_chunks/dep-b6c192db.js');
require('../../_chunks/dep-ba2090c8.js');
require('../../_chunks/dep-b27d3215.js');
require('../../_chunks/dep-ed572eb3.js');
require('../../_chunks/dep-047617bf.js');
require('../../_chunks/dep-bbe343d7.js');
require('../../_chunks/dep-0a510359.js');
require('../../_chunks/dep-50a41d31.js');
require('../../_chunks/dep-be3c3d53.js');
require('../../_chunks/dep-0c2ad01b.js');
require('../../_chunks/dep-5ad8a2ab.js');
require('../../_chunks/dep-8b98fa07.js');
require('../../_chunks/dep-b0b4fff1.js');
require('../../_chunks/dep-7a21da5b.js');
require('../../_chunks/dep-49fa220e.js');
require('../../_chunks/dep-02ebb419.js');
require('../../_chunks/dep-feae46a3.js');
require('../../_chunks/dep-abf21389.js');
require('../../_chunks/dep-7f32423d.js');
require('../../_chunks/dep-7c9e3d93.js');
require('../../_chunks/dep-61a7e281.js');
require('../../_chunks/dep-ecbaedee.js');
require('../../_chunks/dep-9de7d250.js');
require('../../_chunks/dep-6f8a66a3.js');
require('../../_chunks/dep-b8b9c2a3.js');
function useKeyboardControl(_ref) {
var displayOptions = _ref.displayOptions,
optionsList = _ref.optionsList,
innerPopupVisible = _ref.innerPopupVisible,
setInnerPopupVisible = _ref.setInnerPopupVisible,
selectPanelRef = _ref.selectPanelRef,
isFilterable = _ref.isFilterable,
isRemoteSearch = _ref.isRemoteSearch,
getSelectedOptions = _ref.getSelectedOptions,
setInnerValue = _ref.setInnerValue,
innerValue = _ref.innerValue,
popupContentRef = _ref.popupContentRef,
multiple = _ref.multiple,
max = _ref.max;
var hoverIndex = Vue.ref(-1);
var filteredOptions = Vue.ref([]);
var virtualFilteredOptions = Vue.ref([]);
var classPrefix = hooks_useConfig.usePrefixClass();
var handleKeyDown = function handleKeyDown(e) {
var _optionsList$value$ne, _optionsList$value$ne2;
var optionsListLength = displayOptions.value.length;
var newIndex = hoverIndex.value;
switch (e.code) {
case "ArrowUp":
e.preventDefault();
if (hoverIndex.value === -1) {
newIndex = 0;
} else if (hoverIndex.value === 0 || hoverIndex.value > displayOptions.value.length - 1) {
newIndex = optionsListLength - 1;
} else {
newIndex--;
}
if ((_optionsList$value$ne = optionsList.value[newIndex]) !== null && _optionsList$value$ne !== void 0 && _optionsList$value$ne.disabled) {
newIndex--;
}
hoverIndex.value = newIndex;
break;
case "ArrowDown":
e.preventDefault();
if (hoverIndex.value === -1 || hoverIndex.value >= optionsListLength - 1) {
newIndex = 0;
} else {
newIndex++;
}
if ((_optionsList$value$ne2 = optionsList.value[newIndex]) !== null && _optionsList$value$ne2 !== void 0 && _optionsList$value$ne2.disabled) {
newIndex++;
}
hoverIndex.value = newIndex;
break;
case "Enter":
if (hoverIndex.value === -1) break;
var finalOptions = selectPanelRef.value.isVirtual && isFilterable.value && virtualFilteredOptions.value.length ? virtualFilteredOptions.value : isRemoteSearch.value ? optionsList.value : filteredOptions.value;
if (!finalOptions.length) finalOptions = optionsList.value;
if (!innerPopupVisible.value) {
setInnerPopupVisible(true, {
e: e
});
break;
}
if (!multiple) {
var selectedOptions = getSelectedOptions(finalOptions[hoverIndex.value].value);
setInnerValue(finalOptions[hoverIndex.value].value, {
option: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0],
selectedOptions: getSelectedOptions(finalOptions[hoverIndex.value].value),
trigger: "check",
e: e
});
setInnerPopupVisible(false, {
e: e
});
} else {
var _finalOptions$hoverIn;
if (hoverIndex.value === -1) return;
var optionValue = (_finalOptions$hoverIn = finalOptions[hoverIndex.value]) === null || _finalOptions$hoverIn === void 0 ? void 0 : _finalOptions$hoverIn.value;
if (!optionValue) return;
var newValue = select_utils_index.getNewMultipleValue(innerValue.value, optionValue);
if (max > 0 && newValue.value.length > max) return;
var _selectedOptions = getSelectedOptions(newValue.value);
setInnerValue(newValue.value, {
option: _selectedOptions.find(function (v) {
return v.value == optionValue;
}),
selectedOptions: _selectedOptions,
trigger: newValue.isCheck ? "check" : "uncheck",
e: e
});
filteredOptions.value = [];
}
break;
case "Escape":
setInnerPopupVisible(false, {
e: e
});
break;
}
};
Vue.watch(innerPopupVisible, function (value) {
if (value) {
hoverIndex.value = -1;
virtualFilteredOptions.value = [];
filteredOptions.value = [];
}
});
Vue.watch(hoverIndex, function (index) {
var _selectPanelRef$value;
var optionHeight = (_selectPanelRef$value = selectPanelRef.value) === null || _selectPanelRef$value === void 0 || (_selectPanelRef$value = _selectPanelRef$value.innerRef) === null || _selectPanelRef$value === void 0 || (_selectPanelRef$value = _selectPanelRef$value.querySelector(".".concat(classPrefix.value, "-select-option"))) === null || _selectPanelRef$value === void 0 ? void 0 : _selectPanelRef$value.clientHeight;
var scrollHeight = optionHeight * index;
popupContentRef.value.scrollTo({
top: scrollHeight,
behavior: "smooth"
});
});
return {
hoverIndex: hoverIndex,
handleKeyDown: handleKeyDown,
virtualFilteredOptions: virtualFilteredOptions,
filteredOptions: filteredOptions
};
}
exports.useKeyboardControl = useKeyboardControl;
//# sourceMappingURL=useKeyboardControl.js.map