tdesign-vue
Version:
932 lines (924 loc) • 39.4 kB
JavaScript
/**
* tdesign v1.12.1
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _typeof = require('@babel/runtime/helpers/typeof');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var VueCompositionAPI = require('@vue/composition-api');
var hooks_useDefaultValue = require('../hooks/useDefaultValue.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var hooks_tnode = require('../hooks/tnode.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
var select_props = require('./props.js');
var loading_index = require('../loading/index.js');
var popup_index = require('../popup/index.js');
var input_index = require('../input/index.js');
var tag_index = require('../tag/index.js');
var selectInput_index = require('../select-input/index.js');
var commonComponents_fakeArrow = require('../common-components/fake-arrow.js');
var utils_dom = require('../utils/dom.js');
var select_option = require('./option.js');
var select_selectPanel = require('./select-panel.js');
var select_util = require('./util.js');
var select_hooks_useSelectOptions = require('./hooks/useSelectOptions.js');
var _common_js_log_log = require('../_common/js/log/log.js');
var hooks_useFormDisabled = require('../hooks/useFormDisabled.js');
var isArray = require('../_chunks/dep-9b72cbc5.js');
var isObject = require('../_chunks/dep-51fe98f1.js');
var isFunction = require('../_chunks/dep-411a10dd.js');
var cloneDeep = require('../_chunks/dep-bda7e2bd.js');
var debounce = require('../_chunks/dep-965b0138.js');
var get = require('../_chunks/dep-165bd1be.js');
require('../_chunks/dep-727a349e.js');
require('../_chunks/dep-4b30bfe2.js');
require('../_chunks/dep-e1cc6f64.js');
require('../_chunks/dep-5ea2b00f.js');
require('../_chunks/dep-7b78e8c3.js');
require('../_chunks/dep-d7270eaf.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-6b60413b.js');
require('../_chunks/dep-bf70543d.js');
require('../_chunks/dep-f895c884.js');
require('../_chunks/dep-68f48b50.js');
require('../_chunks/dep-051ce30d.js');
require('../_chunks/dep-f6069bb1.js');
require('../_chunks/dep-ed8c3176.js');
require('../_chunks/dep-4aa08166.js');
require('../_chunks/dep-ddc1429e.js');
require('../_chunks/dep-65896ff9.js');
require('../_chunks/dep-887c649b.js');
require('../_chunks/dep-28836b00.js');
require('../_chunks/dep-dea23841.js');
require('../_chunks/dep-6247fdbf.js');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');
require('../_chunks/dep-3ed0c42e.js');
require('../_chunks/dep-53935099.js');
require('dayjs');
require('../_chunks/dep-403352a7.js');
require('../_chunks/dep-cca66fee.js');
require('../_chunks/dep-4361b357.js');
require('../_chunks/dep-3d682642.js');
require('../_chunks/dep-b65b2f55.js');
require('../_chunks/dep-6e7b8cda.js');
require('../_chunks/dep-98f48ff2.js');
require('../_chunks/dep-80e3757f.js');
require('../_chunks/dep-08d7842c.js');
require('../_chunks/dep-1ca3138c.js');
require('../_chunks/dep-e6ed4b1f.js');
require('../_chunks/dep-c44b2462.js');
require('../_common/js/global-config/t.js');
require('../loading/directive.js');
require('../loading/plugin.js');
require('vue');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/setStyle.js');
require('../_common/js/utils/helper.js');
require('../_chunks/dep-5a0b1276.js');
require('../_chunks/dep-2d34b118.js');
require('../_chunks/dep-2edcfe51.js');
require('../config-provider/config-receiver.js');
require('../utils/mixins.js');
require('../utils/render-tnode.js');
require('@babel/runtime/helpers/readOnlyError');
require('../utils/transfer-dom.js');
require('../loading/props.js');
require('../config.js');
require('raf');
require('../utils/easing.js');
require('../_chunks/dep-e1a96c85.js');
require('../_chunks/dep-35eb80a8.js');
require('../_chunks/dep-a8feef06.js');
require('../_chunks/dep-361a995e.js');
require('../_chunks/dep-563168ba.js');
require('../_chunks/dep-dd8aea11.js');
require('../_chunks/dep-de009b1f.js');
require('../_chunks/dep-2d46186d.js');
require('../_chunks/dep-e1bd36c1.js');
require('../_chunks/dep-459d78d6.js');
require('../utils/withInstall.js');
require('../popup/popup.js');
require('@popperjs/core');
require('../utils/helper.js');
require('../popup/props.js');
require('../popup/container.js');
require('../utils/event.js');
require('../popup/utils.js');
require('../utils/map-props.js');
require('../popup/plugin.js');
require('../_chunks/dep-cdb9a98c.js');
require('../input/input.js');
require('../_chunks/dep-882fe8fa.js');
require('tdesign-icons-vue');
require('../input/props.js');
require('../input/input-group.js');
require('../tag/tag.js');
require('tinycolor2');
require('../tag/props.js');
require('../tag/check-tag.js');
require('../tag/check-tag-props.js');
require('../hooks/useConfig.js');
require('../_common/js/common.js');
require('../tag/check-tag-group.js');
require('../tag/check-tag-group-props.js');
require('../select-input/select-input.js');
require('../select-input/props.js');
require('../select-input/useSingle.js');
require('../_chunks/dep-8e56731e.js');
require('../_chunks/dep-b361e9d2.js');
require('../_chunks/dep-7ead4ee1.js');
require('../select-input/useMultiple.js');
require('../tag-input/index.js');
require('../tag-input/tag-input.js');
require('../tag-input/props.js');
require('../tag-input/hooks/useTagScroll.js');
require('../tag-input/useTagList.js');
require('../tag-input/hooks/useHover.js');
require('../tag-input/hooks/useDragSorter.js');
require('../hooks/useGlobalIcon.js');
require('../select-input/useOverlayInnerStyle.js');
require('../utils/ripple.js');
require('./option-props.js');
require('../checkbox/index.js');
require('../checkbox/group.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../checkbox/constants.js');
require('../checkbox/store.js');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('../checkbox/hooks/useKeyboardEvent.js');
require('../hooks/useElementLazyRender.js');
require('../_common/js/utils/observe.js');
require('../checkbox/checkbox-group-props.js');
require('../_chunks/dep-8f3a0ba0.js');
require('../_chunks/dep-73c0f116.js');
require('../hooks/slots.js');
require('../hooks/useLazyLoad.js');
require('../hooks/useCommonClassName.js');
require('./optionGroup.js');
require('./option-group-props.js');
require('../hooks/useVirtualScroll.js');
require('../_chunks/dep-e7151b6f.js');
require('../_chunks/dep-b0b39c86.js');
require('../_chunks/dep-6a3ffcb1.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
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__default["default"](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 = VueCompositionAPI.defineComponent({
name: "TSelect",
props: _objectSpread({}, select_props["default"]),
components: {
TInput: input_index.Input,
TLoading: loading_index.Loading,
Tag: tag_index.Tag,
Popup: popup_index.Popup,
TOption: select_option["default"],
FakeArrow: commonComponents_fakeArrow["default"],
SelectPanel: select_selectPanel["default"]
},
setup: function setup(props2, ctx) {
var _ctx$listeners;
var _useConfig = configProvider_useConfig.useConfig("select"),
t = _useConfig.t,
global = _useConfig.global;
var renderTNode = hooks_tnode.useTNodeJSX();
var instance = VueCompositionAPI.getCurrentInstance();
var selectInputRef = VueCompositionAPI.ref(null);
var selectPanelRef = VueCompositionAPI.ref();
var popupOpenTime = VueCompositionAPI.ref(250);
var _useFormDisabled = hooks_useFormDisabled.useFormDisabled(),
formDisabled = _useFormDisabled.formDisabled;
var COMPONENT_NAME = configProvider_useConfig.usePrefixClass("select");
var _useConfig2 = configProvider_useConfig.useConfig("classPrefix"),
classPrefix = _useConfig2.classPrefix;
var _toRefs = VueCompositionAPI.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 = VueCompositionAPI.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 = select_hooks_useSelectOptions["default"](props2, instance, keys),
innerOptions = _useSelectOptions.options,
optionsMap = _useSelectOptions.optionsMap,
optionsList = _useSelectOptions.optionsList,
optionsCache = _useSelectOptions.optionsCache;
var _useVModel = hooks_useVModel.useVModel(valueProps, props2.defaultValue, props2.onChange, "change"),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
value = _useVModel2[0],
setValue = _useVModel2[1];
var innerValue = VueCompositionAPI.computed(function () {
var isObjValue = valueType.value === "object";
var _value = value.value;
if (!multiple.value && isArray.isArray(_value)) {
_common_js_log_log["default"].warn("Select", 'Invalid value for "value" props: got an Array when multiple was set to false');
_value = isObjValue ? {} : "";
}
if (multiple.value && !isArray.isArray(_value)) {
_common_js_log_log["default"].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.isObject(option);
if (!isObj2) {
_common_js_log_log["default"].warn("Select", "Invalid value for \"value\" props: expected an Object, but got ".concat(_typeof__default["default"](option)));
}
return isObj2;
}).map(function (option) {
return option[keys.value.value];
});
}
var isObj = isObject.isObject(_value);
if (!isObj) {
_common_js_log_log["default"].warn("Select", "Invalid value for \"value\" props: expected an Object, but got ".concat(_typeof__default["default"](_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__default["default"](_defineProperty__default["default"]({}, valueOfKeys, get.get(option, "value")), labelOfKeys, get.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__default["default"](optionsCache.value))));
} else {
var option = optionsMap.value.get(val);
if (option) {
optionsCache.value = Array.from(/* @__PURE__ */new Set([option].concat(_toConsumableArray__default["default"](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);
}
VueCompositionAPI.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 = hooks_useDefaultValue["default"](inputValue, props2.defaultInputValue || "", props2.onInputChange, "inputValue", "input-change"),
_useDefaultValue2 = _slicedToArray__default["default"](_useDefaultValue, 2),
tInputValue = _useDefaultValue2[0],
setTInputValue = _useDefaultValue2[1];
var _useDefaultValue3 = hooks_useDefaultValue["default"](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__default["default"](_useDefaultValue3, 2),
innerPopupVisible = _useDefaultValue4[0],
setInnerPopupVisible = _useDefaultValue4[1];
var isDisabled = VueCompositionAPI.computed(function () {
return formDisabled.value || disabled.value;
});
var isLoading = VueCompositionAPI.computed(function () {
return loading.value && !isDisabled.value;
});
var isFilterable = VueCompositionAPI.computed(function () {
return Boolean(props2.filterable || global.value.filterable || isFunction.isFunction(props2.filter));
});
var isReachMaxLimit = VueCompositionAPI.computed(function () {
return multiple.value && max.value !== 0 && max.value <= innerValue.value.length;
});
var getFilteredOptions = function getFilteredOptions() {
return select_util.getAllSelectableOption(optionsList.value).filter(function (option) {
var _option$label;
if (isFunction.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 = VueCompositionAPI.computed(function () {
var filteredOptions = getFilteredOptions();
return filteredOptions.length === innerValue.value.length;
});
var placeholderText = VueCompositionAPI.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) || select_util.getSingleContent(innerValue.value, optionsMap.value)) || placeholder.value) !== null && _ref2 !== void 0 ? _ref2 : t(global.value.placeholder);
});
var displayText = VueCompositionAPI.computed(function () {
if (multiple.value) {
if (valueType.value === "object") {
return value.value.map(function (v) {
return v[keys.value.label];
});
}
return select_util.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 select_util.getSingleContent(innerValue.value, optionsMap.value);
});
var valueDisplayParams = VueCompositionAPI.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 = VueCompositionAPI.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__default["default"](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.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.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) {
_common_js_log_log["default"].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"));
VueCompositionAPI.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 = VueCompositionAPI.ref(-1);
var keydownEvent = function keydownEvent(e) {
var _selectPanelRef$value, _selectInputRef$value, _displayOptions$;
var displayOptions = select_util.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() {
VueCompositionAPI.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 = select_util.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;
}
};
VueCompositionAPI.watch(innerPopupVisible, function (val) {
val && utils_dom.on(document, "keydown", keydownEvent);
!val && utils_dom.off(document, "keydown", keydownEvent);
}, {
flush: "sync"
});
VueCompositionAPI.watch(innerPopupVisible, function (value2) {
if (value2) {
hoverIndex.value = -1;
} else {
tInputValue.value && setTInputValue("", {
trigger: "blur"
});
}
});
VueCompositionAPI.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__default["default"](_ref5, _excluded);
return h("div", {
"ref": "select",
"class": "".concat(this.componentName, "__wrap")
}, [h(selectInput_index.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
})
})]);
}
});
exports["default"] = _Select;
//# sourceMappingURL=select.js.map