vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
1,020 lines (1,019 loc) • 46.9 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { defineComponent, h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, createCommentVNode, watchEffect } from 'vue';
import XEUtils, { isFunction } from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { useSize } from '../../hooks/size';
import { getEventTargetNode, getAbsolutePos } from '../../tools/dom';
import { getLastZIndex, nextZIndex, getFuncText, formatText } from '../../tools/utils';
import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event';
import VxeInputComponent from '../../input/src/input';
import { getSlotVNs } from '../../tools/vn';
function isOptionVisible(option) {
return option.visible !== false;
}
function getOptUniqueId() {
return XEUtils.uniqueId('opt_');
}
export default defineComponent({
name: 'VxeSelect',
props: {
modelValue: null,
clearable: Boolean,
placeholder: {
type: String
},
loading: Boolean,
disabled: Boolean,
multiple: Boolean,
multiCharOverflow: {
type: [Number, String],
default: function () { return GlobalConfig.select.multiCharOverflow; }
},
prefixIcon: String,
placement: String,
options: Array,
optionProps: Object,
optionGroups: Array,
optionGroupProps: Object,
optionConfig: Object,
className: [String, Function],
popupClassName: [String, Function],
max: { type: [String, Number], default: null },
size: {
type: String,
default: function () { return GlobalConfig.select.size || GlobalConfig.size; }
},
filterable: {
type: Boolean,
default: function () { return GlobalConfig.select.filterable; }
},
filterMethod: Function,
remote: Boolean,
remoteMethod: Function,
emptyText: String,
// 已废弃，被 option-config.keyField 替换
optionId: { type: String, default: function () { return GlobalConfig.select.optionId; } },
// 已废弃，被 option-config.useKey 替换
optionKey: Boolean,
transfer: { type: Boolean, default: function () { return GlobalConfig.select.transfer; } }
},
emits: [
'update:modelValue',
'change',
'clear'
],
setup: function (props, context) {
var _a, _b;
var slots = context.slots, emit = context.emit;
var $xeform = inject('$xeform', null);
var $xeformiteminfo = inject('$xeformiteminfo', null);
var xID = XEUtils.uniqueId();
var computeSize = useSize(props);
var reactData = reactive({
inited: false,
staticOptions: [],
fullGroupList: (_a = props.optionGroups) !== null && _a !== void 0 ? _a : [],
fullOptionList: (_b = props.options) !== null && _b !== void 0 ? _b : [],
visibleGroupList: [],
visibleOptionList: [],
remoteValueList: [],
panelIndex: 0,
panelStyle: {},
panelPlacement: null,
currentOption: null,
currentValue: null,
visiblePanel: false,
animatVisible: false,
isActivated: false,
searchLoading: false
});
var refElem = ref();
var refInput = ref();
var refOptionWrapper = ref();
var refOptionPanel = ref();
var refMaps = {
refElem: refElem
};
var $xeselect = {
xID: xID,
props: props,
context: context,
reactData: reactData,
getRefMaps: function () { return refMaps; }
};
var selectMethods = {};
var computePropsOpts = computed(function () {
return props.optionProps || {};
});
var computeGroupPropsOpts = computed(function () {
return props.optionGroupProps || {};
});
var computeLabelField = computed(function () {
var propsOpts = computePropsOpts.value;
return propsOpts.label || 'label';
});
var computeValueField = computed(function () {
var propsOpts = computePropsOpts.value;
return propsOpts.value || 'value';
});
var computeGroupLabelField = computed(function () {
var groupPropsOpts = computeGroupPropsOpts.value;
return groupPropsOpts.label || 'label';
});
var computeGroupOptionsField = computed(function () {
var groupPropsOpts = computeGroupPropsOpts.value;
return groupPropsOpts.options || 'options';
});
var computeIsMaximize = computed(function () {
var modelValue = props.modelValue, multiple = props.multiple, max = props.max;
if (multiple && max) {
return (modelValue ? modelValue.length : 0) >= XEUtils.toNumber(max);
}
return false;
});
var computeOptionOpts = computed(function () {
return Object.assign({}, GlobalConfig.select.optionConfig, props.optionConfig);
});
var computeIsGroup = computed(function () {
return reactData.fullGroupList.some(function (item) { return item.options && item.options.length; });
});
var computeMultiMaxCharNum = computed(function () {
return XEUtils.toNumber(props.multiCharOverflow);
});
var callSlot = function (slotFunc, params) {
if (slotFunc) {
if (XEUtils.isString(slotFunc)) {
slotFunc = slots[slotFunc] || null;
}
if (XEUtils.isFunction(slotFunc)) {
return getSlotVNs(slotFunc(params));
}
}
return [];
};
var findOption = function (optionValue) {
var fullOptionList = reactData.fullOptionList, fullGroupList = reactData.fullGroupList;
var isGroup = computeIsGroup.value;
var valueField = computeValueField.value;
if (isGroup) {
for (var gIndex = 0; gIndex < fullGroupList.length; gIndex++) {
var group = fullGroupList[gIndex];
if (group.options) {
for (var index = 0; index < group.options.length; index++) {
var option = group.options[index];
if (optionValue === option[valueField]) {
return option;
}
}
}
}
}
return fullOptionList.find(function (item) { return optionValue === item[valueField]; });
};
var getRemoteSelectLabel = function (value) {
var remoteValueList = reactData.remoteValueList;
var labelField = computeLabelField.value;
var remoteItem = remoteValueList.find(function (item) { return value === item.key; });
var item = remoteItem ? remoteItem.result : null;
return XEUtils.toValueString(item ? item[labelField] : value);
};
var getSelectLabel = function (value) {
var labelField = computeLabelField.value;
var item = findOption(value);
return XEUtils.toValueString(item ? item[labelField] : value);
};
/* const computeSelectLabel = computed(() => {
const { modelValue, multiple, remote } = props
const multiMaxCharNum = computeMultiMaxCharNum.value
if (modelValue && multiple) {
const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue]
if (remote) {
return vals.map(val => getRemoteSelectLabel(val)).join(', ')
}
return vals.map((val) => {
const label = getSelectLabel(val)
if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
return `${label.substring(0, multiMaxCharNum)}...`
}
return label
}).join(', ')
}
if (remote) {
return getRemoteSelectLabel(modelValue)
}
return getSelectLabel(modelValue)
}) */
var displaySelectLabel = ref('');
var calculateLabel = function () {
var modelValue = props.modelValue, multiple = props.multiple, remote = props.remote;
var multiMaxCharNum = computeMultiMaxCharNum.value;
if (modelValue && multiple) {
var vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
if (remote) {
displaySelectLabel.value = vals.map(function (val) { return getRemoteSelectLabel(val); }).join(', ');
}
else {
displaySelectLabel.value = vals.map(function (val) {
var label = getSelectLabel(val);
if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
return "".concat(label.substring(0, multiMaxCharNum), "...");
}
return label;
}).join(', ');
}
}
else {
if (remote) {
displaySelectLabel.value = getRemoteSelectLabel(modelValue);
}
else {
displaySelectLabel.value = getSelectLabel(modelValue);
}
}
};
watchEffect(calculateLabel);
var getOptkey = function () {
var optionOpts = computeOptionOpts.value;
return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
};
var getOptid = function (option) {
var optid = option[getOptkey()];
return optid ? encodeURIComponent(optid) : '';
};
/**
* 刷新选项，当选项被动态显示/隐藏时可能会用到
*/
var refreshOption = function (showAll) {
var filterable = props.filterable, filterMethod = props.filterMethod, multiple = props.multiple;
var fullOptionList = reactData.fullOptionList, fullGroupList = reactData.fullGroupList;
var isGroup = computeIsGroup.value;
var groupLabelField = computeGroupLabelField.value;
var labelField = computeLabelField.value;
// const valueField = computeValueField.value
var _filterMethod = filterMethod && isFunction(filterMethod) ? filterMethod
: multiple ? function (_a) {
var group = _a.group, option = _a.option, searchValue = _a.searchValue;
var queryArr = searchValue ? searchValue.split(',') : [];
return queryArr.length > 0 ? queryArr.some(function (label) {
return (group && group[groupLabelField].indexOf(label) > -1) ||
(option && option[labelField].indexOf(label) > -1);
}) : true;
}
: function (_a) {
var group = _a.group, option = _a.option, searchValue = _a.searchValue;
return (group && group[groupLabelField].indexOf(searchValue) > -1) ||
(option && option[labelField].indexOf(searchValue) > -1);
};
if (isGroup) {
// todo 没有filter methods的逻辑
if (filterable) {
/* group级别 能查找到 该级别全部展现。若不能则看children内是否有满足条件的，有则过滤后展现 */
reactData.visibleGroupList = showAll ? fullGroupList.filter(function (group) { return isOptionVisible(group); }).map(function (g) { return (__assign(__assign({}, g), { options: g.options.filter(function (option) { return isOptionVisible(option); }) })); }) : fullGroupList.map(function (group) { return isOptionVisible(group) && (!displaySelectLabel.value || _filterMethod({
group: group,
option: null,
searchValue: displaySelectLabel.value
})) ? group : (__assign(__assign({}, group), { options: group.options ? group.options.filter(function (option) { return isOptionVisible(option) && (!displaySelectLabel.value || _filterMethod({
group: null,
option: option,
searchValue: displaySelectLabel.value
})); }) : [] })); });
}
else {
reactData.visibleGroupList = fullGroupList.filter(isOptionVisible).map(function (group) { return (__assign(__assign({}, group), { options: group.options ? group.options.filter(isOptionVisible) : [] })); });
}
}
else {
if (filterable) {
reactData.visibleOptionList = showAll ? fullOptionList.filter(function (option) { return isOptionVisible(option); }) : fullOptionList.filter(function (option) { return isOptionVisible(option) && _filterMethod({
group: null,
option: option,
searchValue: displaySelectLabel.value
}); });
}
else {
reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
}
}
return nextTick();
};
var cacheItemMap = function (init) {
var fullOptionList = reactData.fullOptionList, fullGroupList = reactData.fullGroupList;
var groupOptionsField = computeGroupOptionsField.value;
var key = getOptkey();
var handleOptis = function (item) {
if (!getOptid(item)) {
item[key] = getOptUniqueId();
}
};
if (fullGroupList.length) {
fullGroupList.forEach(function (group) {
handleOptis(group);
if (group[groupOptionsField]) {
group[groupOptionsField].forEach(handleOptis);
}
});
}
else if (fullOptionList.length) {
fullOptionList.forEach(handleOptis);
}
refreshOption(!!init);
};
var setCurrentOption = function (option) {
var valueField = computeValueField.value;
if (option) {
reactData.currentOption = option;
reactData.currentValue = option[valueField];
}
};
var scrollToOption = function (option, isAlignBottom) {
return nextTick().then(function () {
if (option) {
var optWrapperElem = refOptionWrapper.value;
var panelElem = refOptionPanel.value;
var optElem = panelElem.querySelector("[optid='".concat(getOptid(option), "']"));
if (optWrapperElem && optElem) {
var wrapperHeight = optWrapperElem.offsetHeight;
var offsetPadding = 5;
if (isAlignBottom) {
if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
}
}
else {
if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
}
}
}
}
});
};
var updateZindex = function () {
if (reactData.panelIndex < getLastZIndex()) {
reactData.panelIndex = nextZIndex();
}
};
var updatePlacement = function () {
return nextTick().then(function () {
var transfer = props.transfer, placement = props.placement;
var panelIndex = reactData.panelIndex;
var el = refElem.value;
var panelElem = refOptionPanel.value;
if (panelElem && el) {
var targetHeight = el.offsetHeight;
var targetWidth = el.offsetWidth;
var panelHeight = panelElem.offsetHeight;
var panelWidth = panelElem.offsetWidth;
var marginSize = 5;
var panelStyle = {
zIndex: panelIndex
};
var _a = getAbsolutePos(el), boundingTop = _a.boundingTop, boundingLeft = _a.boundingLeft, visibleHeight = _a.visibleHeight, visibleWidth = _a.visibleWidth;
var panelPlacement = 'bottom';
if (transfer) {
var left = boundingLeft;
var top_1 = boundingTop + targetHeight;
if (placement === 'top') {
panelPlacement = 'top';
top_1 = boundingTop - panelHeight;
}
else if (!placement) {
// 如果下面不够放，则向上
if (top_1 + panelHeight + marginSize > visibleHeight) {
panelPlacement = 'top';
top_1 = boundingTop - panelHeight;
}
// 如果上面不够放，则向下（优先）
if (top_1 < marginSize) {
panelPlacement = 'bottom';
top_1 = boundingTop + targetHeight;
}
}
// 如果溢出右边
if (left + panelWidth + marginSize > visibleWidth) {
left -= left + panelWidth + marginSize - visibleWidth;
}
// 如果溢出左边
if (left < marginSize) {
left = marginSize;
}
Object.assign(panelStyle, {
left: "".concat(left, "px"),
top: "".concat(top_1, "px"),
minWidth: "".concat(targetWidth, "px")
});
}
else {
if (placement === 'top') {
panelPlacement = 'top';
panelStyle.bottom = "".concat(targetHeight, "px");
}
else if (!placement) {
// 如果下面不够放，则向上
if (boundingTop + targetHeight + panelHeight > visibleHeight) {
// 如果上面不够放，则向下（优先）
if (boundingTop - targetHeight - panelHeight > marginSize) {
panelPlacement = 'top';
panelStyle.bottom = "".concat(targetHeight, "px");
}
}
}
}
reactData.panelStyle = panelStyle;
reactData.panelPlacement = panelPlacement;
return nextTick();
}
});
};
var hidePanelTimeout;
var showOptionPanel = function (needRecalc) {
var loading = props.loading, remote = props.remote, remoteMethod = props.remoteMethod, disabled = props.disabled, filterable = props.filterable;
if (!loading && !disabled) {
clearTimeout(hidePanelTimeout);
if (!reactData.inited) {
reactData.inited = true;
}
reactData.isActivated = true;
reactData.animatVisible = true;
if (remote && remoteMethod) {
reactData.searchLoading = true;
Promise.resolve(remoteMethod({ searchValue: displaySelectLabel.value })).then(function () { return nextTick(); }).catch(function () { return nextTick(); }).finally(function () {
reactData.searchLoading = false;
refreshOption(true);
});
}
else if (filterable) {
refreshOption(!needRecalc);
}
setTimeout(function () {
var modelValue = props.modelValue, multiple = props.multiple;
var currOption = findOption(multiple && modelValue ? modelValue[0] : modelValue);
reactData.visiblePanel = true;
if (currOption) {
setCurrentOption(currOption);
scrollToOption(currOption);
}
// handleFocusSearch()
}, 10);
updateZindex();
updatePlacement();
}
};
var hideOptionPanel = function () {
var _a;
calculateLabel();
reactData.searchLoading = false;
reactData.visiblePanel = false;
reactData.isActivated = false;
(_a = refInput.value) === null || _a === void 0 ? void 0 : _a.blur();
hidePanelTimeout = window.setTimeout(function () {
reactData.animatVisible = false;
}, 350);
};
var changeEvent = function (evnt, selectValue) {
if (selectValue !== props.modelValue) {
emit('update:modelValue', selectValue);
selectMethods.dispatchEvent('change', { value: selectValue }, evnt);
// 自动更新校验状态
if ($xeform && $xeformiteminfo) {
$xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, selectValue);
}
}
};
var clearValueEvent = function (evnt, selectValue) {
reactData.remoteValueList = [];
changeEvent(evnt, selectValue);
selectMethods.dispatchEvent('clear', { value: selectValue }, evnt);
};
var clearEvent = function (params, evnt) {
clearValueEvent(evnt, null);
hideOptionPanel();
};
var changeOptionEvent = function (evnt, selectValue, option) {
var modelValue = props.modelValue, multiple = props.multiple;
var remoteValueList = reactData.remoteValueList;
if (multiple) {
var multipleValue = void 0;
if (modelValue) {
if (modelValue.indexOf(selectValue) === -1) {
multipleValue = modelValue.concat([selectValue]);
}
else {
multipleValue = modelValue.filter(function (val) { return val !== selectValue; });
}
}
else {
multipleValue = [selectValue];
}
var remoteItem = remoteValueList.find(function (item) { return item.key === selectValue; });
if (remoteItem) {
remoteItem.result = option;
}
else {
remoteValueList.push({ key: selectValue, result: option });
}
changeEvent(evnt, multipleValue);
}
else {
reactData.remoteValueList = [{ key: selectValue, result: option }];
changeEvent(evnt, selectValue);
hideOptionPanel();
}
};
var handleGlobalMousewheelEvent = function (evnt) {
var disabled = props.disabled;
var visiblePanel = reactData.visiblePanel;
if (!disabled) {
if (visiblePanel) {
var panelElem = refOptionPanel.value;
if (getEventTargetNode(evnt, panelElem).flag) {
updatePlacement();
}
else {
hideOptionPanel();
}
}
}
};
var handleGlobalMousedownEvent = function (evnt) {
var disabled = props.disabled;
var visiblePanel = reactData.visiblePanel;
if (!disabled) {
var el = refElem.value;
var panelElem = refOptionPanel.value;
reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
if (visiblePanel && !reactData.isActivated) {
hideOptionPanel();
}
}
};
var findOffsetOption = function (optionValue, isUpArrow) {
var visibleOptionList = reactData.visibleOptionList, visibleGroupList = reactData.visibleGroupList;
var isGroup = computeIsGroup.value;
var valueField = computeValueField.value;
var groupOptionsField = computeGroupOptionsField.value;
var firstOption;
var prevOption;
var nextOption;
var currOption;
if (isGroup) {
for (var gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
var group = visibleGroupList[gIndex];
var groupOptionList = group[groupOptionsField];
var isGroupDisabled = group.disabled;
if (groupOptionList) {
for (var index = 0; index < groupOptionList.length; index++) {
var option = groupOptionList[index];
var isVisible = isOptionVisible(option);
var isDisabled = isGroupDisabled || option.disabled;
if (!firstOption && !isDisabled) {
firstOption = option;
}
if (currOption) {
if (isVisible && !isDisabled) {
nextOption = option;
if (!isUpArrow) {
return { offsetOption: nextOption };
}
}
}
if (optionValue === option[valueField]) {
currOption = option;
if (isUpArrow) {
return { offsetOption: prevOption };
}
}
else {
if (isVisible && !isDisabled) {
prevOption = option;
}
}
}
}
}
}
else {
for (var index = 0; index < visibleOptionList.length; index++) {
var option = visibleOptionList[index];
var isDisabled = option.disabled;
if (!firstOption && !isDisabled) {
firstOption = option;
}
if (currOption) {
if (!isDisabled) {
nextOption = option;
if (!isUpArrow) {
return { offsetOption: nextOption };
}
}
}
if (optionValue === option[valueField]) {
currOption = option;
if (isUpArrow) {
return { offsetOption: prevOption };
}
}
else {
if (!isDisabled) {
prevOption = option;
}
}
}
}
return { firstOption: firstOption };
};
var handleGlobalKeydownEvent = function (evnt) {
var clearable = props.clearable, disabled = props.disabled;
var visiblePanel = reactData.visiblePanel, currentValue = reactData.currentValue, currentOption = reactData.currentOption;
if (!disabled) {
var isTab = hasEventKey(evnt, EVENT_KEYS.TAB);
var isEnter = hasEventKey(evnt, EVENT_KEYS.ENTER);
var isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE);
var isUpArrow = hasEventKey(evnt, EVENT_KEYS.ARROW_UP);
var isDwArrow = hasEventKey(evnt, EVENT_KEYS.ARROW_DOWN);
var isDel = hasEventKey(evnt, EVENT_KEYS.DELETE);
var isSpacebar = hasEventKey(evnt, EVENT_KEYS.SPACEBAR);
if (isTab) {
reactData.isActivated = false;
}
if (visiblePanel) {
if (isEsc || isTab) {
hideOptionPanel();
}
else if (isEnter) {
evnt.preventDefault();
evnt.stopPropagation();
changeOptionEvent(evnt, currentValue, currentOption);
}
else if (isUpArrow || isDwArrow) {
evnt.preventDefault();
var _a = findOffsetOption(currentValue, isUpArrow), firstOption = _a.firstOption, offsetOption = _a.offsetOption;
if (!offsetOption && !findOption(currentValue)) {
offsetOption = firstOption;
}
setCurrentOption(offsetOption);
scrollToOption(offsetOption, isDwArrow);
}
else if (isSpacebar) {
evnt.preventDefault();
}
}
else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
evnt.preventDefault();
showOptionPanel();
}
if (reactData.isActivated) {
if (isDel && clearable) {
clearValueEvent(evnt, null);
}
}
}
};
var handleGlobalBlurEvent = function () {
hideOptionPanel();
};
var focusEvent = function () {
if (!props.disabled) {
reactData.isActivated = true;
showOptionPanel();
}
};
var blurEvent = function () {
reactData.isActivated = false;
};
var debounceChangeFilterEvent = XEUtils.debounce(function () {
var remote = props.remote, remoteMethod = props.remoteMethod;
if (remote && remoteMethod) {
reactData.searchLoading = true;
Promise.resolve(remoteMethod({ searchValue: displaySelectLabel.value })).then(function () { return nextTick(); }).catch(function () { return nextTick(); }).finally(function () {
reactData.searchLoading = false;
showOptionPanel(true);
});
}
else {
showOptionPanel(true);
}
}, 350, { trailing: true });
var togglePanelEvent = function (params) {
var $event = params.$event;
$event.preventDefault();
if (reactData.visiblePanel) {
hideOptionPanel();
}
else {
showOptionPanel();
}
};
var checkOptionDisabled = function (isSelected, option, group) {
if (option.disabled) {
return true;
}
if (group && group.disabled) {
return true;
}
var isMaximize = computeIsMaximize.value;
if (isMaximize && !isSelected) {
return true;
}
return false;
};
var renderOption = function (list, group) {
var optionKey = props.optionKey, modelValue = props.modelValue, multiple = props.multiple;
var currentValue = reactData.currentValue;
var optionOpts = computeOptionOpts.value;
var labelField = computeLabelField.value;
var valueField = computeValueField.value;
var isGroup = computeIsGroup.value;
var useKey = optionOpts.useKey;
var optionSlot = slots.option;
return list.map(function (option, cIndex) {
var slots = option.slots, className = option.className;
var optionValue = option[valueField];
var isSelected = multiple ? (modelValue && modelValue.indexOf(optionValue) > -1) : modelValue === optionValue;
var isVisible = !isGroup || isOptionVisible(option);
var isDisabled = checkOptionDisabled(isSelected, option, group);
var optid = getOptid(option);
var defaultSlot = slots ? slots.default : null;
var optParams = { option: option, group: null, $select: $xeselect };
return isVisible ? h('div', {
key: useKey || optionKey ? optid : cIndex,
class: ['vxe-select-option', className ? (XEUtils.isFunction(className) ? className(optParams) : className) : '', {
'is--disabled': isDisabled,
'is--selected': isSelected,
'is--hover': currentValue === optionValue
}],
// attrs
optid: optid,
// event
onMousedown: function (evnt) {
var isLeftBtn = evnt.button === 0;
if (isLeftBtn) {
evnt.stopPropagation();
}
},
onClick: function (evnt) {
if (!isDisabled && reactData.visiblePanel) {
changeOptionEvent(evnt, optionValue, option);
}
},
onMouseenter: function () {
if (!isDisabled) {
setCurrentOption(option);
}
}
}, optionSlot ? callSlot(optionSlot, optParams) : (defaultSlot ? callSlot(defaultSlot, optParams) : formatText(getFuncText(option[labelField])))) : null;
});
};
var renderOptgroup = function () {
var optionKey = props.optionKey;
var visibleGroupList = reactData.visibleGroupList;
var optionOpts = computeOptionOpts.value;
var groupLabelField = computeGroupLabelField.value;
var groupOptionsField = computeGroupOptionsField.value;
var useKey = optionOpts.useKey;
var optionSlot = slots.option;
return visibleGroupList.map(function (group, gIndex) {
var slots = group.slots, className = group.className;
var optid = getOptid(group);
var isGroupDisabled = group.disabled;
var defaultSlot = slots ? slots.default : null;
var optParams = { option: group, group: group, $select: $xeselect };
return h('div', {
key: useKey || optionKey ? optid : gIndex,
class: ['vxe-optgroup', className ? (XEUtils.isFunction(className) ? className(optParams) : className) : '', {
'is--disabled': isGroupDisabled
}],
// attrs
optid: optid
}, [
h('div', {
class: 'vxe-optgroup--title'
}, optionSlot ? callSlot(optionSlot, optParams) : (defaultSlot ? callSlot(defaultSlot, optParams) : getFuncText(group[groupLabelField]))),
h('div', {
class: 'vxe-optgroup--wrapper'
}, renderOption(group[groupOptionsField] || [], group))
]);
});
};
var renderOpts = function () {
var visibleGroupList = reactData.visibleGroupList, visibleOptionList = reactData.visibleOptionList, searchLoading = reactData.searchLoading;
var isGroup = computeIsGroup.value;
if (searchLoading) {
return [
h('div', {
class: 'vxe-select--search-loading'
}, [
h('i', {
class: ['vxe-select--search-icon', GlobalConfig.icon.SELECT_LOADED]
}),
h('span', {
class: 'vxe-select--search-text'
}, GlobalConfig.i18n('vxe.select.loadingText'))
])
];
}
if (isGroup) {
if (visibleGroupList.length) {
return renderOptgroup();
}
}
else {
if (visibleOptionList.length) {
return renderOption(visibleOptionList);
}
}
return [
h('div', {
class: 'vxe-select--empty-placeholder'
}, props.emptyText || GlobalConfig.i18n('vxe.select.emptyText'))
];
};
selectMethods = {
dispatchEvent: function (type, params, evnt) {
emit(type, Object.assign({ $select: $xeselect, $event: evnt }, params));
},
isPanelVisible: function () {
return reactData.visiblePanel;
},
togglePanel: function () {
if (reactData.visiblePanel) {
hideOptionPanel();
}
else {
showOptionPanel();
}
return nextTick();
},
hidePanel: function () {
if (reactData.visiblePanel) {
hideOptionPanel();
}
return nextTick();
},
showPanel: function () {
if (!reactData.visiblePanel) {
showOptionPanel();
}
return nextTick();
},
refreshOption: refreshOption,
focus: function () {
var $input = refInput.value;
reactData.isActivated = true;
$input.blur();
return nextTick();
},
blur: function () {
var $input = refInput.value;
$input.blur();
reactData.isActivated = false;
return nextTick();
}
};
Object.assign($xeselect, selectMethods);
watch(function () { return reactData.staticOptions; }, function (value) {
if (value.some(function (item) { return item.options && item.options.length; })) {
reactData.fullOptionList = [];
reactData.fullGroupList = value;
}
else {
reactData.fullGroupList = [];
reactData.fullOptionList = value || [];
}
cacheItemMap();
});
watch(function () { return props.options; }, function (value) {
reactData.fullGroupList = [];
reactData.fullOptionList = value || [];
cacheItemMap(true);
});
watch(function () { return props.optionGroups; }, function (value) {
reactData.fullOptionList = [];
reactData.fullGroupList = value || [];
cacheItemMap(true);
});
onMounted(function () {
nextTick(function () {
var options = props.options, optionGroups = props.optionGroups;
if (optionGroups) {
reactData.fullGroupList = optionGroups;
}
else if (options) {
reactData.fullOptionList = options;
}
cacheItemMap(true);
});
GlobalEvent.on($xeselect, 'mousewheel', handleGlobalMousewheelEvent);
GlobalEvent.on($xeselect, 'mousedown', handleGlobalMousedownEvent);
GlobalEvent.on($xeselect, 'keydown', handleGlobalKeydownEvent);
GlobalEvent.on($xeselect, 'blur', handleGlobalBlurEvent);
});
onUnmounted(function () {
GlobalEvent.off($xeselect, 'mousewheel');
GlobalEvent.off($xeselect, 'mousedown');
GlobalEvent.off($xeselect, 'keydown');
GlobalEvent.off($xeselect, 'blur');
});
var renderVN = function () {
var _a, _b;
var className = props.className, popupClassName = props.popupClassName, transfer = props.transfer, disabled = props.disabled, loading = props.loading, filterable = props.filterable;
var inited = reactData.inited, isActivated = reactData.isActivated, visiblePanel = reactData.visiblePanel;
var vSize = computeSize.value;
// const selectLabel = computeSelectLabel.value
var defaultSlot = slots.default;
var headerSlot = slots.header;
var footerSlot = slots.footer;
var prefixSlot = slots.prefix;
return h('div', {
ref: refElem,
class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: $xeselect }) : className) : '', (_a = {},
_a["size--".concat(vSize)] = vSize,
_a['is--visivle'] = visiblePanel,
_a['is--disabled'] = disabled,
_a['is--filter'] = filterable,
_a['is--loading'] = loading,
_a['is--active'] = isActivated,
_a)]
}, [
h('div', {
class: 'vxe-select-slots',
ref: 'hideOption'
}, defaultSlot ? defaultSlot({}) : []),
h(VxeInputComponent, {
ref: refInput,
clearable: props.clearable,
placeholder: props.placeholder,
readonly: !filterable,
disabled: disabled,
type: 'text',
prefixIcon: props.prefixIcon,
suffixIcon: loading ? GlobalConfig.icon.SELECT_LOADED : (visiblePanel ? GlobalConfig.icon.SELECT_OPEN : GlobalConfig.icon.SELECT_CLOSE),
modelValue: displaySelectLabel.value,
onInput: function (_a) {
var target = _a.$event.target;
displaySelectLabel.value = target.value;
},
onClear: clearEvent,
onMouseUp: togglePanelEvent,
onFocus: focusEvent,
onBlur: blurEvent,
onChange: debounceChangeFilterEvent,
onSuffixClick: togglePanelEvent
}, prefixSlot ? {
prefix: function () { return prefixSlot({}); }
} : {}),
h(Teleport, {
to: 'body',
disabled: transfer ? !inited : true
}, [
h('div', {
ref: refOptionPanel,
class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $select: $xeselect }) : popupClassName) : '', (_b = {},
_b["size--".concat(vSize)] = vSize,
_b['is--transfer'] = transfer,
_b['animat--leave'] = !loading && reactData.animatVisible,
_b['animat--enter'] = !loading && visiblePanel,
_b)],
placement: reactData.panelPlacement,
style: reactData.panelStyle
}, inited ? [
h('div', {
class: 'vxe-select--panel-wrapper'
}, [
headerSlot ? h('div', {
class: 'vxe-select--panel-header'
}, headerSlot(props)) : createCommentVNode(),
h('div', {
class: 'vxe-select--panel-body'
}, [
h('div', {
ref: refOptionWrapper,
class: 'vxe-select-option--wrapper'
}, renderOpts())
]),
footerSlot ? h('div', {
class: 'vxe-select--panel-footer'
}, footerSlot(props)) : createCommentVNode()
])
] : [])
])
]);
};
$xeselect.renderVN = renderVN;
provide('$xeselect', $xeselect);
return $xeselect;
},
render: function () {
return this.renderVN();
}
});