tdesign-vue
Version:
862 lines (858 loc) • 35 kB
JavaScript
/**
* tdesign v1.12.1
* (c) 2025 tdesign
* @license MIT
*/
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _typeof from '@babel/runtime/helpers/typeof';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, getCurrentInstance, ref, toRefs, computed, watch, provide, nextTick } from '@vue/composition-api';
import { isArray, isObject, isFunction, cloneDeep, debounce, get } from 'lodash-es';
import useDefaultValue from '../hooks/useDefaultValue.js';
import { useVModel } from '../hooks/useVModel.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { useConfig, usePrefixClass } from '../config-provider/useConfig.js';
import props from './props.js';
import { Loading } from '../loading/index.js';
import { Popup } from '../popup/index.js';
import { Input } from '../input/index.js';
import { Tag } from '../tag/index.js';
import { SelectInput } from '../select-input/index.js';
import FakeArrow from '../common-components/fake-arrow.js';
import { on, off } from '../utils/dom.js';
import _Option from './option.js';
import SelectPanel from './select-panel.js';
import { getSingleContent, getMultipleContent, getAllSelectableOption, flattenOptions as _flattenOptions, getNewMultipleValue } from './util.js';
import useSelectOptions from './hooks/useSelectOptions.js';
import log from '../_common/js/log/log.js';
import { useFormDisabled } from '../hooks/useFormDisabled.js';
import '../hooks/render-tnode.js';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-b0659553.js';
import '../_chunks/dep-79359026.js';
import 'dayjs';
import '../_common/js/global-config/t.js';
import '../loading/directive.js';
import '../loading/plugin.js';
import 'vue';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/setStyle.js';
import '../_common/js/utils/helper.js';
import '../config-provider/config-receiver.js';
import '../utils/mixins.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/readOnlyError';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../config.js';
import 'raf';
import '../utils/easing.js';
import '../utils/withInstall.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../utils/helper.js';
import '../popup/props.js';
import '../popup/container.js';
import '../utils/event.js';
import '../popup/utils.js';
import '../utils/map-props.js';
import '../popup/plugin.js';
import '../input/input.js';
import '../_chunks/dep-2dfc340e.js';
import 'tdesign-icons-vue';
import '../input/props.js';
import '../input/input-group.js';
import '../tag/tag.js';
import 'tinycolor2';
import '../tag/props.js';
import '../tag/check-tag.js';
import '../tag/check-tag-props.js';
import '../hooks/useConfig.js';
import '../_common/js/common.js';
import '../tag/check-tag-group.js';
import '../tag/check-tag-group-props.js';
import '../select-input/select-input.js';
import '../select-input/props.js';
import '../select-input/useSingle.js';
import '../select-input/useMultiple.js';
import '../tag-input/index.js';
import '../tag-input/tag-input.js';
import '../tag-input/props.js';
import '../tag-input/hooks/useTagScroll.js';
import '../tag-input/useTagList.js';
import '../tag-input/hooks/useHover.js';
import '../tag-input/hooks/useDragSorter.js';
import '../hooks/useGlobalIcon.js';
import '../select-input/useOverlayInnerStyle.js';
import '../utils/ripple.js';
import './option-props.js';
import '../checkbox/index.js';
import '../checkbox/group.js';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../checkbox/constants.js';
import '../checkbox/store.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '../checkbox/hooks/useKeyboardEvent.js';
import '../hooks/useElementLazyRender.js';
import '../_common/js/utils/observe.js';
import '../checkbox/checkbox-group-props.js';
import '../hooks/slots.js';
import '../hooks/useLazyLoad.js';
import '../hooks/useCommonClassName.js';
import './optionGroup.js';
import './option-group-props.js';
import '../hooks/useVirtualScroll.js';
var _excluded = ["overlayClassName"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _Select = defineComponent({
name: "TSelect",
props: _objectSpread({}, props),
components: {
TInput: Input,
TLoading: Loading,
Tag: Tag,
Popup: Popup,
TOption: _Option,
FakeArrow: FakeArrow,
SelectPanel: SelectPanel
},
setup: function setup(props2, ctx) {
var _ctx$listeners;
var _useConfig = useConfig("select"),
t = _useConfig.t,
global = _useConfig.global;
var renderTNode = useTNodeJSX();
var instance = getCurrentInstance();
var selectInputRef = ref(null);
var selectPanelRef = ref();
var popupOpenTime = ref(250);
var _useFormDisabled = useFormDisabled(),
formDisabled = _useFormDisabled.formDisabled;
var COMPONENT_NAME = usePrefixClass("select");
var _useConfig2 = useConfig("classPrefix"),
classPrefix = _useConfig2.classPrefix;
var _toRefs = toRefs(props2),
valueType = _toRefs.valueType,
disabled = _toRefs.disabled,
size = _toRefs.size,
valueProps = _toRefs.value,
multiple = _toRefs.multiple,
placeholder = _toRefs.placeholder,
loading = _toRefs.loading,
max = _toRefs.max,
reserveKeyword = _toRefs.reserveKeyword,
inputValue = _toRefs.inputValue,
popupVisible = _toRefs.popupVisible,
minCollapsedNum = _toRefs.minCollapsedNum,
creatable = _toRefs.creatable;
var keys = computed(function () {
var _props2$keys, _props2$keys2, _props2$keys3;
return {
label: ((_props2$keys = props2.keys) === null || _props2$keys === void 0 ? void 0 : _props2$keys.label) || "label",
value: ((_props2$keys2 = props2.keys) === null || _props2$keys2 === void 0 ? void 0 : _props2$keys2.value) || "value",
disabled: ((_props2$keys3 = props2.keys) === null || _props2$keys3 === void 0 ? void 0 : _props2$keys3.disabled) || "disabled"
};
});
var _useSelectOptions = useSelectOptions(props2, instance, keys),
innerOptions = _useSelectOptions.options,
optionsMap = _useSelectOptions.optionsMap,
optionsList = _useSelectOptions.optionsList,
optionsCache = _useSelectOptions.optionsCache;
var _useVModel = useVModel(valueProps, props2.defaultValue, props2.onChange, "change"),
_useVModel2 = _slicedToArray(_useVModel, 2),
value = _useVModel2[0],
setValue = _useVModel2[1];
var innerValue = computed(function () {
var isObjValue = valueType.value === "object";
var _value = value.value;
if (!multiple.value && isArray(_value)) {
log.warn("Select", 'Invalid value for "value" props: got an Array when multiple was set to false');
_value = isObjValue ? {} : "";
}
if (multiple.value && !isArray(_value)) {
log.warn("Select", 'Invalid value for "value" props: expected an Array when multiple was set to true');
_value = [];
}
if (isObjValue) {
if (multiple.value) {
return _value.filter(function (option) {
var isObj2 = isObject(option);
if (!isObj2) {
log.warn("Select", "Invalid value for \"value\" props: expected an Object, but got ".concat(_typeof(option)));
}
return isObj2;
}).map(function (option) {
return option[keys.value.value];
});
}
var isObj = isObject(_value);
if (!isObj) {
log.warn("Select", "Invalid value for \"value\" props: expected an Object, but got ".concat(_typeof(_value)));
return "";
}
return _value[keys.value.value];
}
return _value;
});
var setInnerValue = function setInnerValue(newVal, context, optionValue) {
if (newVal === value.value) return;
var selectedOptions = [];
var _keys$value = keys.value,
valueOfKeys = _keys$value.value,
labelOfKeys = _keys$value.label;
var oldValueMap = /* @__PURE__ */new Map();
if (multiple.value) {
var _mapValue$forEach;
var mapValue = value.value || [];
(_mapValue$forEach = mapValue.forEach) === null || _mapValue$forEach === void 0 || _mapValue$forEach.call(mapValue, function (option) {
oldValueMap.set(option[valueOfKeys], option);
});
}
var getOriginOptions = function getOriginOptions(val) {
var option = optionsMap.value.get(val);
if (option) delete option.index;
return option;
};
var getFormatOption = function getFormatOption(val) {
var option = optionsMap.value.get(val) || oldValueMap.get(val);
if (option) delete option.index;
return _defineProperty(_defineProperty({}, valueOfKeys, get(option, "value")), labelOfKeys, get(option, "label"));
};
var addCache = function addCache(val) {
if (multiple.value) {
var newCache = [];
val.forEach(function (item) {
var option = optionsMap.value.get(item);
if (option) {
newCache.push(option);
}
});
optionsCache.value = Array.from(/* @__PURE__ */new Set([].concat(newCache, _toConsumableArray(optionsCache.value))));
} else {
var option = optionsMap.value.get(val);
if (option) {
optionsCache.value = Array.from(/* @__PURE__ */new Set([option].concat(_toConsumableArray(optionsCache.value))));
}
}
};
var getSelectedOption = function getSelectedOption(newVal2) {
var selectedOption = getOriginOptions(newVal2);
if (!selectedOption && optionValue) {
selectedOption = {
label: optionValue,
value: optionValue
};
}
return selectedOption;
};
if (multiple.value) {
newVal.forEach(function (v) {
return selectedOptions.push(getSelectedOption(v));
});
} else {
selectedOptions.push(getSelectedOption(newVal));
}
if (valueType.value === "object") {
newVal = multiple.value ? newVal.map(function (val) {
return getFormatOption(val);
}) : getFormatOption(newVal);
}
var outputContext = _objectSpread(_objectSpread({}, context), {}, {
selectedOptions: selectedOptions
});
if (optionValue) {
var outputContextOption = getSelectedOption(optionValue);
Reflect.set(outputContext, "option", outputContextOption);
}
nextTick(function () {
addCache(newVal);
});
setValue(newVal, outputContext);
if (props2.multiple && context.trigger === "uncheck" && optionValue) {
var _props2$onRemove;
var removeContext = {
value: optionValue,
data: optionsMap.value.get(optionValue),
e: context.e
};
instance.emit("remove", removeContext);
(_props2$onRemove = props2.onRemove) === null || _props2$onRemove === void 0 || _props2$onRemove.call(props2, removeContext);
}
};
var _useDefaultValue = useDefaultValue(inputValue, props2.defaultInputValue || "", props2.onInputChange, "inputValue", "input-change"),
_useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
tInputValue = _useDefaultValue2[0],
setTInputValue = _useDefaultValue2[1];
var _useDefaultValue3 = useDefaultValue(popupVisible, props2.defaultPopupVisible, function (visible, context) {
var _props2$onPopupVisibl;
(_props2$onPopupVisibl = props2.onPopupVisibleChange) === null || _props2$onPopupVisibl === void 0 || _props2$onPopupVisibl.call(props2, visible, context);
instance.emit("visible-change", visible);
}, "popupVisible", "popup-visible-change"),
_useDefaultValue4 = _slicedToArray(_useDefaultValue3, 2),
innerPopupVisible = _useDefaultValue4[0],
setInnerPopupVisible = _useDefaultValue4[1];
var isDisabled = computed(function () {
return formDisabled.value || disabled.value;
});
var isLoading = computed(function () {
return loading.value && !isDisabled.value;
});
var isFilterable = computed(function () {
return Boolean(props2.filterable || global.value.filterable || isFunction(props2.filter));
});
var isReachMaxLimit = computed(function () {
return multiple.value && max.value !== 0 && max.value <= innerValue.value.length;
});
var getFilteredOptions = function getFilteredOptions() {
return getAllSelectableOption(optionsList.value).filter(function (option) {
var _option$label;
if (isFunction(props2.filter)) {
return props2.filter("".concat(tInputValue.value), option);
}
return (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.toLowerCase()) === null || _option$label === void 0 ? void 0 : _option$label.includes("".concat(tInputValue.value).toLowerCase());
});
};
var isAllOptionsChecked = computed(function () {
var filteredOptions = getFilteredOptions();
return filteredOptions.length === innerValue.value.length;
});
var placeholderText = computed(function () {
var _ref2, _value$value;
return (_ref2 = !multiple.value && innerPopupVisible.value && (valueType.value === "object" && (((_value$value = value.value) === null || _value$value === void 0 ? void 0 : _value$value[keys.value.label]) || innerValue.value) || getSingleContent(innerValue.value, optionsMap.value)) || placeholder.value) !== null && _ref2 !== void 0 ? _ref2 : t(global.value.placeholder);
});
var displayText = computed(function () {
if (multiple.value) {
if (valueType.value === "object") {
return value.value.map(function (v) {
return v[keys.value.label];
});
}
return getMultipleContent(innerValue.value, optionsMap.value);
}
if (valueType.value === "object") {
var _value$value2;
return ((_value$value2 = value.value) === null || _value$value2 === void 0 ? void 0 : _value$value2[keys.value.label]) || innerValue.value;
}
return getSingleContent(innerValue.value, optionsMap.value);
});
var valueDisplayParams = computed(function () {
var val = multiple.value ? innerValue.value.map(function (value2) {
var _optionsMap$value$get;
return {
value: value2,
label: (_optionsMap$value$get = optionsMap.value.get(value2)) === null || _optionsMap$value$get === void 0 ? void 0 : _optionsMap$value$get.label
};
}) : innerValue.value;
var params = {
value: val,
onClose: multiple.value ? function (index) {
return removeTag(index);
} : function () {}
};
if (minCollapsedNum.value && multiple.value) {
var _val$slice;
return _objectSpread(_objectSpread({}, params), {}, {
displayValue: val === null || val === void 0 || (_val$slice = val.slice) === null || _val$slice === void 0 ? void 0 : _val$slice.call(val, 0, minCollapsedNum.value)
});
}
return params;
});
var collapsedItemsParams = computed(function () {
var tValue = innerValue.value || [];
var values = Array.isArray(tValue) ? tValue : [tValue];
return multiple.value ? {
value: values,
collapsedSelectedItems: values.map(function (item) {
var _props2$keys4, _props2$options;
var tmpValue = _typeof(item) === "object" ? item[((_props2$keys4 = props2.keys) === null || _props2$keys4 === void 0 ? void 0 : _props2$keys4.value) || "value"] : item;
return (_props2$options = props2.options) === null || _props2$options === void 0 ? void 0 : _props2$options.find(function (t2) {
return t2.value === tmpValue;
});
}).slice(minCollapsedNum.value),
count: values.length - minCollapsedNum.value,
onClose: function onClose(index) {
return removeTag(index);
}
} : {};
});
var removeTag = function removeTag(index, context) {
var _props2$onRemove2;
var _ref3 = context || {},
e = _ref3.e,
_ref3$trigger = _ref3.trigger,
trigger = _ref3$trigger === void 0 ? "tag-remove" : _ref3$trigger;
e === null || e === void 0 || e.stopPropagation();
if (isDisabled.value) {
return;
}
var selectValue = cloneDeep(innerValue.value);
var value2 = selectValue[index];
selectValue.splice(index, 1);
setInnerValue(selectValue, {
e: e,
trigger: trigger
});
var evtObj = {
value: value2,
data: optionsMap.value.get(value2),
e: e
};
instance.emit("remove", evtObj);
(_props2$onRemove2 = props2.onRemove) === null || _props2$onRemove2 === void 0 || _props2$onRemove2.call(props2, evtObj);
};
var handleCheckAllClick = function handleCheckAllClick(e) {
var filteredOptions = getFilteredOptions();
setInnerValue(isAllOptionsChecked.value ? [] : filteredOptions.map(function (option) {
return option.value;
}).slice(0, max.value || Infinity), {
e: e,
trigger: isAllOptionsChecked.value ? "uncheck" : "check"
});
!(reserveKeyword !== null && reserveKeyword !== void 0 && reserveKeyword.value) && setTInputValue("", {
e: e,
trigger: "change"
});
};
var handleCreate = function handleCreate(e) {
var _props2$onCreate;
if (!tInputValue.value) return;
var createVal = tInputValue.value;
multiple.value && setTInputValue("", {
e: e,
trigger: "change"
});
instance.emit("create", createVal);
(_props2$onCreate = props2.onCreate) === null || _props2$onCreate === void 0 || _props2$onCreate.call(props2, createVal);
};
var handleClear = function handleClear(_ref4) {
var _props2$onClear;
var e = _ref4.e;
e === null || e === void 0 || e.stopPropagation();
if (multiple.value) {
setInnerValue([], {
trigger: "clear",
e: e
});
} else {
setInnerValue("", {
trigger: "clear",
e: e
});
}
instance.emit("clear", {
e: e
});
(_props2$onClear = props2.onClear) === null || _props2$onClear === void 0 || _props2$onClear.call(props2, {
e: e
});
};
var handleTInputValueChange = function handleTInputValueChange(val, context) {
if (context.trigger === "blur" || !innerPopupVisible.value) return;
setTInputValue(val, context);
debounceSearch({
e: context.e
});
};
var handleTagChange = function handleTagChange(currentTags, context) {
var trigger = context.trigger,
index = context.index;
if (["tag-remove", "backspace"].includes(trigger)) {
removeTag(index, context);
}
};
var handleFocus = function handleFocus(value2, context) {
var _props2$onFocus;
instance.emit("focus", {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e
});
(_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 || _props2$onFocus.call(props2, {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e
});
};
var handleBlur = function handleBlur(value2, context) {
var _props2$onBlur;
instance.emit("blur", {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e
});
(_props2$onBlur = props2.onBlur) === null || _props2$onBlur === void 0 || _props2$onBlur.call(props2, {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e
});
};
var handleEnter = function handleEnter(value2, context) {
var _props2$onEnter;
instance.emit("enter", {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e,
inputValue: tInputValue.value
});
(_props2$onEnter = props2.onEnter) === null || _props2$onEnter === void 0 || _props2$onEnter.call(props2, {
value: value2,
e: context === null || context === void 0 ? void 0 : context.e,
inputValue: tInputValue.value.toString()
});
};
var debounceSearch = debounce(function (context) {
var _props2$onSearch;
instance.emit("search", tInputValue.value);
(_props2$onSearch = props2.onSearch) === null || _props2$onSearch === void 0 || _props2$onSearch.call(props2, tInputValue.value.toString(), {
e: context.e
});
}, 300);
var getOverlayElm = function getOverlayElm() {
var r;
try {
var popupRefs = selectInputRef.value.$refs.selectInputPopupRef.$refs;
r = popupRefs.overlay || popupRefs.component.$refs.overlay;
} catch (e) {
log.warn("Select", e);
}
return r;
};
var updateScrollTop = function updateScrollTop(content) {
var _props2$scroll;
if (((_props2$scroll = props2.scroll) === null || _props2$scroll === void 0 ? void 0 : _props2$scroll.type) === "virtual") return;
var overlayEl = getOverlayElm();
if (!overlayEl) return;
var firstSelectedNode = overlayEl === null || overlayEl === void 0 ? void 0 : overlayEl.querySelector(".".concat(classPrefix.value, "-is-selected"));
nextTick(function () {
if (firstSelectedNode && content) {
var _getComputedStyle = getComputedStyle(firstSelectedNode),
paddingBottom = _getComputedStyle.paddingBottom;
var _getComputedStyle2 = getComputedStyle(content),
marginBottom = _getComputedStyle2.marginBottom;
var elementBottomHeight = parseInt(paddingBottom, 10) + parseInt(marginBottom, 10);
var updateValue = firstSelectedNode.offsetTop - content.offsetTop - (content.clientHeight - firstSelectedNode.clientHeight) + elementBottomHeight;
content.scrollTop = updateValue;
}
});
};
var hoverIndex = ref(-1);
var keydownEvent = function keydownEvent(e) {
var _selectPanelRef$value, _selectInputRef$value, _displayOptions$;
var displayOptions = _flattenOptions((_selectPanelRef$value = selectPanelRef.value) === null || _selectPanelRef$value === void 0 ? void 0 : _selectPanelRef$value.getDisplayOptions());
var displayOptionsLength = displayOptions.length;
var arrowDownOption = function arrowDownOption() {
var count = 0;
while (hoverIndex.value < displayOptionsLength) {
var _displayOptions$hover;
if (!((_displayOptions$hover = displayOptions[hoverIndex.value]) !== null && _displayOptions$hover !== void 0 && _displayOptions$hover.disabled)) {
break;
}
if (hoverIndex.value === displayOptionsLength - 1) {
hoverIndex.value = 0;
} else {
hoverIndex.value += 1;
}
count += 1;
if (count >= displayOptionsLength) break;
}
setHoverIntoView();
};
var arrowUpOption = function arrowUpOption() {
var count = 0;
while (hoverIndex.value > -1) {
var _displayOptions$hover2;
if (!((_displayOptions$hover2 = displayOptions[hoverIndex.value]) !== null && _displayOptions$hover2 !== void 0 && _displayOptions$hover2.disabled)) {
break;
}
if (hoverIndex.value === 0) {
hoverIndex.value = displayOptionsLength - 1;
} else {
hoverIndex.value -= 1;
}
count += 1;
if (count >= displayOptionsLength) break;
}
setHoverIntoView();
};
var setHoverIntoView = function setHoverIntoView() {
nextTick(function () {
var _selectPanelRef$value2;
var hoverDom = (_selectPanelRef$value2 = selectPanelRef.value) === null || _selectPanelRef$value2 === void 0 ? void 0 : _selectPanelRef$value2.$el.querySelector("li.".concat(classPrefix.value, "-select-option.").concat(classPrefix.value, "-select-option__hover"));
if (hoverDom) {
var container = selectPanelRef.value.$el.parentNode;
var containerRect = container.getBoundingClientRect();
var hoverDomRect = hoverDom.getBoundingClientRect();
var offsetTop = hoverDomRect.top - containerRect.top + container.scrollTop;
container.scrollTo({
top: offsetTop - (container.offsetHeight - hoverDom.offsetHeight * 2),
behavior: "smooth"
});
}
});
};
if (displayOptionsLength === 0) return;
var preventKeys = ["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"];
if (preventKeys.includes(e.code) && (_selectInputRef$value = selectInputRef.value) !== null && _selectInputRef$value !== void 0 && _selectInputRef$value.$el.contains(e.target)) {
e.preventDefault();
}
switch (e.code) {
case "ArrowDown":
if (hoverIndex.value === -1) {
hoverIndex.value = 0;
return;
}
if (hoverIndex.value < displayOptionsLength - 1) {
hoverIndex.value += 1;
arrowDownOption();
} else {
hoverIndex.value = 0;
arrowDownOption();
}
break;
case "ArrowUp":
if (hoverIndex.value === -1) {
hoverIndex.value = 0;
return;
}
if (hoverIndex.value > 0) {
hoverIndex.value -= 1;
arrowUpOption();
} else {
hoverIndex.value = displayOptionsLength - 1;
arrowUpOption();
}
break;
case "Enter":
if (creatable.value && hoverIndex.value < 1 && displayOptions !== null && displayOptions !== void 0 && (_displayOptions$ = displayOptions[0]) !== null && _displayOptions$ !== void 0 && _displayOptions$.isCreated) {
handleCreate(e);
} else if (hoverIndex.value === -1) {
return;
}
if (multiple.value && displayOptions[hoverIndex.value].checkAll) {
handleCheckAllClick(e);
} else {
var _displayOptions$hover3;
var optionValue = (_displayOptions$hover3 = displayOptions[hoverIndex.value]) === null || _displayOptions$hover3 === void 0 ? void 0 : _displayOptions$hover3.value;
if (!optionValue) return;
if (!multiple.value) {
setInnerValue(optionValue, {
e: e,
trigger: "check"
}, optionValue);
setInnerPopupVisible(false, {
e: e
});
} else {
var newValue = getNewMultipleValue(innerValue.value, optionValue);
setInnerValue(newValue.value, {
e: e,
trigger: newValue.isCheck ? "check" : "uncheck"
}, optionValue);
}
}
break;
case "Escape":
case "Tab":
setInnerPopupVisible(false, {
trigger: "keydown-esc",
e: e
});
setTInputValue("", {
e: e,
trigger: "blur"
});
break;
}
};
watch(innerPopupVisible, function (val) {
val && on(document, "keydown", keydownEvent);
!val && off(document, "keydown", keydownEvent);
}, {
flush: "sync"
});
watch(innerPopupVisible, function (value2) {
if (value2) {
hoverIndex.value = -1;
} else {
tInputValue.value && setTInputValue("", {
trigger: "blur"
});
}
});
provide("tSelect", {
size: size,
multiple: multiple,
popupOpenTime: popupOpenTime,
hoverIndex: hoverIndex,
selectValue: innerValue,
reserveKeyword: reserveKeyword,
isReachMaxLimit: isReachMaxLimit,
isAllOptionsChecked: isAllOptionsChecked,
getOverlayElm: getOverlayElm,
handleCheckAllClick: handleCheckAllClick,
handleCreate: handleCreate,
handleValueChange: setInnerValue,
handlerInputChange: setTInputValue,
handlePopupVisibleChange: setInnerPopupVisible,
isRemoteSearch: Boolean(props2.onSearch || ((_ctx$listeners = ctx.listeners) === null || _ctx$listeners === void 0 ? void 0 : _ctx$listeners.search))
});
return {
isFilterable: isFilterable,
isDisabled: isDisabled,
isLoading: isLoading,
innerOptions: innerOptions,
placeholderText: placeholderText,
selectInputRef: selectInputRef,
selectPanelRef: selectPanelRef,
innerPopupVisible: innerPopupVisible,
displayText: displayText,
tInputValue: tInputValue,
collapsedItemsParams: collapsedItemsParams,
valueDisplayParams: valueDisplayParams,
handleFocus: handleFocus,
handleBlur: handleBlur,
handleEnter: handleEnter,
handleClear: handleClear,
handleTagChange: handleTagChange,
handleTInputValueChange: handleTInputValueChange,
setInnerPopupVisible: setInnerPopupVisible,
removeTag: removeTag,
renderTNode: renderTNode,
updateScrollTop: updateScrollTop,
componentName: COMPONENT_NAME
};
},
methods: {
renderSuffixIcon: function renderSuffixIcon() {
var h = this.$createElement;
var suffixIcon = this.renderTNode("suffixIcon");
if (suffixIcon) return suffixIcon;
var isLoading = this.isLoading,
showArrow = this.showArrow,
innerPopupVisible = this.innerPopupVisible,
isDisabled = this.isDisabled;
if (isLoading) {
return h("t-loading", {
"class": ["".concat(this.componentName, "__right-icon"), "".concat(this.componentName, "__active-icon")],
"attrs": {
"size": "small"
}
});
}
return showArrow ? h("fake-arrow", {
"attrs": {
"overlayClassName": "".concat(this.componentName, "__right-icon"),
"isActive": innerPopupVisible && !isDisabled
}
}) : null;
},
renderLabel: function renderLabel() {
var h = this.$createElement;
var label = this.renderTNode("label");
var prefixIcon = this.renderTNode("prefixIcon");
if (label && prefixIcon) {
return h("div", [label, prefixIcon]);
}
return label || prefixIcon;
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var renderTNode = this.renderTNode;
var _ref5 = this.popupProps || {},
overlayClassName = _ref5.overlayClassName,
restPopupProps = _objectWithoutProperties(_ref5, _excluded);
return h("div", {
"ref": "select",
"class": "".concat(this.componentName, "__wrap")
}, [h(SelectInput, {
"ref": "selectInputRef",
"class": this.componentName,
"scopedSlots": {
tips: this.$scopedSlots.tips,
tag: this.$scopedSlots.tag,
suffix: this.$scopedSlots.suffix
},
"props": _objectSpread({}, _objectSpread(_objectSpread({
autoWidth: this.autoWidth,
borderless: this.borderless,
readonly: this.readonly,
allowInput: this.isFilterable,
multiple: this.multiple,
keys: this.keys,
status: this.status,
tips: this.tips,
suffix: this.suffix,
tag: this.tag,
value: this.displayText,
valueDisplay: function valueDisplay() {
return renderTNode("valueDisplay", {
params: _this.valueDisplayParams
});
},
clearable: this.clearable,
disabled: this.isDisabled,
label: this.renderLabel,
suffixIcon: this.renderSuffixIcon,
placeholder: this.placeholderText,
inputValue: this.tInputValue,
inputProps: _objectSpread({
size: this.size
}, this.inputProps),
tagInputProps: _objectSpread({
size: this.size
}, this.tagInputProps),
tagProps: this.tagProps,
minCollapsedNum: this.minCollapsedNum,
collapsedItems: function collapsedItems() {
return renderTNode("collapsedItems", {
params: _this.collapsedItemsParams
});
},
popupVisible: this.innerPopupVisible,
popupProps: _objectSpread({
overlayClassName: ["".concat(this.componentName, "__dropdown"), overlayClassName]
}, restPopupProps),
updateScrollTop: this.updateScrollTop
}, this.selectInputProps), {}, {
panel: function panel() {
return h("select-panel", {
"ref": "selectPanelRef",
"scopedSlots": _this.$scopedSlots,
"attrs": {
"size": _this.size,
"options": _this.innerOptions,
"inputValue": _this.tInputValue,
"multiple": _this.multiple,
"empty": _this.empty,
"filter": _this.filter,
"filterable": _this.isFilterable,
"creatable": _this.creatable,
"scroll": _this.scroll,
"loading": _this.isLoading,
"loadingText": _this.loadingText,
"panelTopContent": _this.panelTopContent,
"panelBottomContent": _this.panelBottomContent
}
});
}
})),
"on": _objectSpread({}, {
focus: this.handleFocus,
blur: this.handleBlur,
enter: this.handleEnter,
clear: this.handleClear,
"input-change": this.handleTInputValueChange,
"popup-visible-change": this.setInnerPopupVisible,
"tag-change": this.handleTagChange
})
})]);
}
});
export { _Select as default };
//# sourceMappingURL=select.js.map