1482 lines
49 KiB
JavaScript
1482 lines
49 KiB
JavaScript
import {
|
|
input_default
|
|
} from "./chunk-XNHHQTAE.js";
|
|
import {
|
|
button_default
|
|
} from "./chunk-ZQ4HFSNQ.js";
|
|
import {
|
|
getEventTargetNode,
|
|
toCssUnit,
|
|
updatePanelPlacement
|
|
} from "./chunk-PBZHTG65.js";
|
|
import {
|
|
eqEmptyValue,
|
|
getFuncText,
|
|
getLastZIndex,
|
|
nextZIndex
|
|
} from "./chunk-REHJGRQO.js";
|
|
import {
|
|
getSlotVNs
|
|
} from "./chunk-LXH6LNL6.js";
|
|
import {
|
|
defineVxeComponent
|
|
} from "./chunk-ML6NAHIO.js";
|
|
import {
|
|
GLOBAL_EVENT_KEYS,
|
|
VxeUI,
|
|
createEvent,
|
|
getConfig,
|
|
getI18n,
|
|
getIcon,
|
|
globalEvents,
|
|
renderEmptyElement,
|
|
require_xe_utils,
|
|
useSize
|
|
} from "./chunk-YJNUXQVJ.js";
|
|
import {
|
|
Teleport,
|
|
computed,
|
|
h,
|
|
inject,
|
|
nextTick,
|
|
onMounted,
|
|
onUnmounted,
|
|
provide,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-V4OQ3NZ2.js";
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/select/src/select.js
|
|
var import_xe_utils = __toESM(require_xe_utils());
|
|
function isOptionVisible(option) {
|
|
return option.visible !== false;
|
|
}
|
|
function getOptUniqueId() {
|
|
return import_xe_utils.default.uniqueId("opt_");
|
|
}
|
|
function createInternalData() {
|
|
return {
|
|
synchData: [],
|
|
fullData: [],
|
|
afterVisibleList: [],
|
|
optAddMaps: {},
|
|
optGroupKeyMaps: {},
|
|
optFullValMaps: {},
|
|
remoteValMaps: {},
|
|
lastScrollLeft: 0,
|
|
lastScrollTop: 0,
|
|
scrollYStore: {
|
|
startIndex: 0,
|
|
endIndex: 0,
|
|
visibleSize: 0,
|
|
offsetSize: 0,
|
|
rowHeight: 0
|
|
},
|
|
lastScrollTime: 0,
|
|
hpTimeout: void 0
|
|
};
|
|
}
|
|
var select_default = defineVxeComponent({
|
|
name: "VxeSelect",
|
|
props: {
|
|
modelValue: [String, Number, Boolean, Array],
|
|
defaultConfig: Object,
|
|
clearable: Boolean,
|
|
placeholder: String,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
loading: Boolean,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
multiple: Boolean,
|
|
multiCharOverflow: {
|
|
type: [Number, String],
|
|
default: () => getConfig().select.multiCharOverflow
|
|
},
|
|
prefixIcon: String,
|
|
allowCreate: {
|
|
type: Boolean,
|
|
default: () => getConfig().select.allowCreate
|
|
},
|
|
placement: String,
|
|
lazyOptions: Array,
|
|
options: Array,
|
|
optionProps: Object,
|
|
optionGroups: Array,
|
|
optionGroupProps: Object,
|
|
optionConfig: Object,
|
|
className: [String, Function],
|
|
popupClassName: [String, Function],
|
|
max: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
zIndex: Number,
|
|
size: {
|
|
type: String,
|
|
default: () => getConfig().select.size || getConfig().size
|
|
},
|
|
filterable: Boolean,
|
|
filterMethod: Function,
|
|
remote: Boolean,
|
|
remoteConfig: Object,
|
|
emptyText: String,
|
|
showTotalButoon: {
|
|
type: Boolean,
|
|
default: () => getConfig().select.showTotalButoon
|
|
},
|
|
showCheckedButoon: {
|
|
type: Boolean,
|
|
default: () => getConfig().select.showCheckedButoon
|
|
},
|
|
showClearButton: {
|
|
type: Boolean,
|
|
default: () => getConfig().select.showClearButton
|
|
},
|
|
transfer: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
virtualYConfig: Object,
|
|
scrollY: Object,
|
|
/**
|
|
* 已废弃，被 remote-config.queryMethod 替换
|
|
* @deprecated
|
|
*/
|
|
remoteMethod: Function,
|
|
/**
|
|
* 已废弃，被 option-config.keyField 替换
|
|
* @deprecated
|
|
*/
|
|
optionId: {
|
|
type: String,
|
|
default: () => getConfig().select.optionId
|
|
},
|
|
/**
|
|
* 已废弃，被 option-config.useKey 替换
|
|
* @deprecated
|
|
*/
|
|
optionKey: Boolean
|
|
},
|
|
emits: [
|
|
"update:modelValue",
|
|
"change",
|
|
"all-change",
|
|
"clear",
|
|
"blur",
|
|
"focus",
|
|
"click",
|
|
"scroll",
|
|
"visible-change"
|
|
],
|
|
setup(props, context) {
|
|
const { slots, emit } = context;
|
|
const $xeModal = inject("$xeModal", null);
|
|
const $xeDrawer = inject("$xeDrawer", null);
|
|
const $xeTable = inject("$xeTable", null);
|
|
const $xeForm = inject("$xeForm", null);
|
|
const formItemInfo = inject("xeFormItemInfo", null);
|
|
const xID = import_xe_utils.default.uniqueId();
|
|
const refElem = ref();
|
|
const refInput = ref();
|
|
const refInpSearch = ref();
|
|
const refVirtualWrapper = ref();
|
|
const refOptionPanel = ref();
|
|
const refVirtualBody = ref();
|
|
const { computeSize } = useSize(props);
|
|
const reactData = reactive({
|
|
initialized: false,
|
|
scrollYLoad: false,
|
|
bodyHeight: 0,
|
|
topSpaceHeight: 0,
|
|
optList: [],
|
|
staticOptions: [],
|
|
reactFlag: 0,
|
|
currentOption: null,
|
|
searchValue: "",
|
|
searchLoading: false,
|
|
panelIndex: 0,
|
|
panelStyle: {},
|
|
panelPlacement: null,
|
|
triggerFocusPanel: false,
|
|
visiblePanel: false,
|
|
isAniVisible: false,
|
|
isActivated: false
|
|
});
|
|
const internalData = createInternalData();
|
|
const refMaps = {
|
|
refElem
|
|
};
|
|
const $xeSelect = {
|
|
xID,
|
|
props,
|
|
context,
|
|
reactData,
|
|
internalData,
|
|
getRefMaps: () => refMaps
|
|
};
|
|
const computeFormReadonly = computed(() => {
|
|
const { readonly } = props;
|
|
if (readonly === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.readonly;
|
|
}
|
|
return false;
|
|
}
|
|
return readonly;
|
|
});
|
|
const computeIsDisabled = computed(() => {
|
|
const { disabled } = props;
|
|
if (disabled === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.disabled;
|
|
}
|
|
return false;
|
|
}
|
|
return disabled;
|
|
});
|
|
const computeBtnTransfer = computed(() => {
|
|
const { transfer } = props;
|
|
if (transfer === null) {
|
|
const globalTransfer = getConfig().select.transfer;
|
|
if (import_xe_utils.default.isBoolean(globalTransfer)) {
|
|
return globalTransfer;
|
|
}
|
|
if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
|
|
return true;
|
|
}
|
|
}
|
|
return transfer;
|
|
});
|
|
const computeInpPlaceholder = computed(() => {
|
|
const { placeholder } = props;
|
|
if (placeholder) {
|
|
return getFuncText(placeholder);
|
|
}
|
|
const globalPlaceholder = getConfig().select.placeholder;
|
|
if (globalPlaceholder) {
|
|
return getFuncText(globalPlaceholder);
|
|
}
|
|
return getI18n("vxe.base.pleaseSelect");
|
|
});
|
|
const computeDefaultOpts = computed(() => {
|
|
return Object.assign({}, props.defaultConfig);
|
|
});
|
|
const computePropsOpts = computed(() => {
|
|
return Object.assign({}, props.optionProps);
|
|
});
|
|
const computeGroupPropsOpts = computed(() => {
|
|
return Object.assign({}, props.optionGroupProps);
|
|
});
|
|
const computeLabelField = computed(() => {
|
|
const propsOpts = computePropsOpts.value;
|
|
return propsOpts.label || "label";
|
|
});
|
|
const computeValueField = computed(() => {
|
|
const propsOpts = computePropsOpts.value;
|
|
return propsOpts.value || "value";
|
|
});
|
|
const computeGroupLabelField = computed(() => {
|
|
const groupPropsOpts = computeGroupPropsOpts.value;
|
|
return groupPropsOpts.label || "label";
|
|
});
|
|
const computeGroupOptionsField = computed(() => {
|
|
const groupPropsOpts = computeGroupPropsOpts.value;
|
|
return groupPropsOpts.options || "options";
|
|
});
|
|
const computeIsMaximize = computed(() => {
|
|
const selectVals = computeSelectVals.value;
|
|
return checkMaxLimit(selectVals);
|
|
});
|
|
const computeVirtualYOpts = computed(() => {
|
|
return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
|
|
});
|
|
const computeRemoteOpts = computed(() => {
|
|
return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
|
|
});
|
|
const computeOptionOpts = computed(() => {
|
|
return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
|
|
});
|
|
const computeMultiMaxCharNum = computed(() => {
|
|
return import_xe_utils.default.toNumber(props.multiCharOverflow);
|
|
});
|
|
const computeSelectVals = computed(() => {
|
|
const { modelValue, multiple } = props;
|
|
let vals = [];
|
|
if (import_xe_utils.default.isArray(modelValue)) {
|
|
vals = modelValue;
|
|
} else {
|
|
if (multiple) {
|
|
if (!eqEmptyValue(modelValue)) {
|
|
vals = `${modelValue}`.indexOf(",") > -1 ? `${modelValue}`.split(",") : [modelValue];
|
|
}
|
|
} else {
|
|
vals = modelValue === null || modelValue === void 0 ? [] : [modelValue];
|
|
}
|
|
}
|
|
return vals;
|
|
});
|
|
const computeFullLabel = computed(() => {
|
|
const { remote } = props;
|
|
const { reactFlag } = reactData;
|
|
const selectVals = computeSelectVals.value;
|
|
if (remote && reactFlag) {
|
|
return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
|
|
}
|
|
return selectVals.map((val) => getSelectLabel(val)).join(", ");
|
|
});
|
|
const computeSelectLabel = computed(() => {
|
|
const { remote, multiple } = props;
|
|
const { reactFlag } = reactData;
|
|
const multiMaxCharNum = computeMultiMaxCharNum.value;
|
|
const selectVals = computeSelectVals.value;
|
|
if (remote && reactFlag) {
|
|
return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
|
|
}
|
|
const labels = selectVals.map((val) => getSelectLabel(val));
|
|
if (multiple && multiMaxCharNum > 0 && labels.length > multiMaxCharNum) {
|
|
return `${labels.slice(0, multiMaxCharNum)}...`;
|
|
}
|
|
return labels.join(", ");
|
|
});
|
|
const callSlot = (slotFunc, params) => {
|
|
if (slotFunc) {
|
|
if (import_xe_utils.default.isString(slotFunc)) {
|
|
slotFunc = slots[slotFunc] || null;
|
|
}
|
|
if (import_xe_utils.default.isFunction(slotFunc)) {
|
|
return getSlotVNs(slotFunc(params));
|
|
}
|
|
}
|
|
return [];
|
|
};
|
|
const dispatchEvent = (type, params, evnt) => {
|
|
emit(type, createEvent(evnt, { $select: $xeSelect }, params));
|
|
};
|
|
const emitModel = (value) => {
|
|
emit("update:modelValue", value);
|
|
};
|
|
const getOptKey = () => {
|
|
const optionOpts = computeOptionOpts.value;
|
|
return optionOpts.keyField || props.optionId || "_X_OPTION_KEY";
|
|
};
|
|
const getOptId = (option) => {
|
|
const optid = option[getOptKey()];
|
|
return optid ? encodeURIComponent(optid) : "";
|
|
};
|
|
const checkMaxLimit = (selectVals) => {
|
|
const { multiple, max } = props;
|
|
if (multiple && max) {
|
|
return selectVals.length >= import_xe_utils.default.toNumber(max);
|
|
}
|
|
return false;
|
|
};
|
|
const getRemoteSelectLabel = (value) => {
|
|
const { lazyOptions } = props;
|
|
const { remoteValMaps, optFullValMaps } = internalData;
|
|
const valueField = computeValueField.value;
|
|
const labelField = computeLabelField.value;
|
|
const remoteItem = remoteValMaps[value] || optFullValMaps[value];
|
|
const item = remoteItem ? remoteItem.item : null;
|
|
if (item) {
|
|
return import_xe_utils.default.toValueString(item[labelField]);
|
|
}
|
|
if (lazyOptions) {
|
|
const lazyItem = lazyOptions.find((item2) => item2[valueField] === value);
|
|
if (lazyItem) {
|
|
return lazyItem[labelField];
|
|
}
|
|
}
|
|
return value;
|
|
};
|
|
const getSelectLabel = (value) => {
|
|
const { lazyOptions } = props;
|
|
const { optFullValMaps } = internalData;
|
|
const valueField = computeValueField.value;
|
|
const labelField = computeLabelField.value;
|
|
const cacheItem = reactData.reactFlag ? optFullValMaps[value] : null;
|
|
if (cacheItem) {
|
|
return cacheItem.item[labelField];
|
|
}
|
|
if (lazyOptions) {
|
|
const lazyItem = lazyOptions.find((item) => item[valueField] === value);
|
|
if (lazyItem) {
|
|
return lazyItem[labelField];
|
|
}
|
|
}
|
|
return value;
|
|
};
|
|
const cacheItemMap = (datas) => {
|
|
const groupOptionsField = computeGroupOptionsField.value;
|
|
const valueField = computeValueField.value;
|
|
const key = getOptKey();
|
|
const groupKeyMaps = {};
|
|
const fullKeyMaps = {};
|
|
const list = [];
|
|
const handleOptItem = (item) => {
|
|
list.push(item);
|
|
let optid = getOptId(item);
|
|
if (!optid) {
|
|
optid = getOptUniqueId();
|
|
item[key] = optid;
|
|
}
|
|
fullKeyMaps[item[valueField]] = {
|
|
key: optid,
|
|
item,
|
|
_index: -1
|
|
};
|
|
};
|
|
datas.forEach((group) => {
|
|
handleOptItem(group);
|
|
if (group[groupOptionsField]) {
|
|
groupKeyMaps[group[key]] = group;
|
|
group[groupOptionsField].forEach(handleOptItem);
|
|
}
|
|
});
|
|
internalData.fullData = list;
|
|
internalData.optGroupKeyMaps = groupKeyMaps;
|
|
internalData.optFullValMaps = fullKeyMaps;
|
|
reactData.reactFlag++;
|
|
handleOption();
|
|
};
|
|
const handleOption = () => {
|
|
const { modelValue, filterable, filterMethod } = props;
|
|
const { searchValue } = reactData;
|
|
const { fullData, optFullValMaps } = internalData;
|
|
const labelField = computeLabelField.value;
|
|
const valueField = computeValueField.value;
|
|
const searchStr = `${searchValue || ""}`.toLowerCase();
|
|
let avList = [];
|
|
if (filterable && filterMethod) {
|
|
avList = fullData.filter((option) => isOptionVisible(option) && filterMethod({ $select: $xeSelect, group: null, option, searchValue, value: modelValue }));
|
|
} else if (filterable) {
|
|
avList = fullData.filter((option) => isOptionVisible(option) && (!searchStr || `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1));
|
|
} else {
|
|
avList = fullData.filter(isOptionVisible);
|
|
}
|
|
avList.forEach((item, index) => {
|
|
const cacheItem = optFullValMaps[item[valueField]];
|
|
if (cacheItem) {
|
|
cacheItem._index = index;
|
|
}
|
|
});
|
|
internalData.afterVisibleList = avList;
|
|
return nextTick();
|
|
};
|
|
const setCurrentOption = (option) => {
|
|
if (option) {
|
|
reactData.currentOption = option;
|
|
}
|
|
};
|
|
const updateZIndex = () => {
|
|
const { zIndex } = props;
|
|
if (zIndex) {
|
|
reactData.panelIndex = zIndex;
|
|
} else if (reactData.panelIndex < getLastZIndex()) {
|
|
reactData.panelIndex = nextZIndex();
|
|
}
|
|
};
|
|
const updatePlacement = () => {
|
|
const { placement } = props;
|
|
const { panelIndex } = reactData;
|
|
const targetElem = refElem.value;
|
|
const panelElem = refOptionPanel.value;
|
|
const btnTransfer = computeBtnTransfer.value;
|
|
const handleStyle = () => {
|
|
const ppObj = updatePanelPlacement(targetElem, panelElem, {
|
|
placement,
|
|
teleportTo: btnTransfer
|
|
});
|
|
const panelStyle = Object.assign(ppObj.style, {
|
|
zIndex: panelIndex
|
|
});
|
|
reactData.panelStyle = panelStyle;
|
|
reactData.panelPlacement = ppObj.placement;
|
|
};
|
|
handleStyle();
|
|
return nextTick().then(handleStyle);
|
|
};
|
|
const handleScrollSelect = () => {
|
|
nextTick(() => {
|
|
const { isAniVisible, visiblePanel } = reactData;
|
|
const { optFullValMaps } = internalData;
|
|
const selectVals = computeSelectVals.value;
|
|
if (selectVals.length && isAniVisible && visiblePanel) {
|
|
const cacheItem = reactData.reactFlag ? optFullValMaps[`${selectVals[0]}`] : null;
|
|
if (cacheItem) {
|
|
handleScrollToOption(cacheItem.item);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const showOptionPanel = () => {
|
|
const { loading, filterable, remote } = props;
|
|
const { fullData, hpTimeout } = internalData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const remoteOpts = computeRemoteOpts.value;
|
|
if (!loading && !isDisabled) {
|
|
if (hpTimeout) {
|
|
clearTimeout(hpTimeout);
|
|
internalData.hpTimeout = void 0;
|
|
}
|
|
if (!reactData.initialized) {
|
|
reactData.initialized = true;
|
|
}
|
|
reactData.isActivated = true;
|
|
reactData.isAniVisible = true;
|
|
if (filterable) {
|
|
if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
|
|
handleSearchEvent();
|
|
} else {
|
|
handleOption();
|
|
updateYData();
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
reactData.visiblePanel = true;
|
|
handleFocusSearch();
|
|
recalculate().then(() => {
|
|
handleScrollSelect();
|
|
refreshScroll();
|
|
});
|
|
}, 10);
|
|
setTimeout(() => {
|
|
recalculate().then(() => refreshScroll());
|
|
}, 100);
|
|
updateZIndex();
|
|
updatePlacement();
|
|
dispatchEvent("visible-change", { visible: true }, null);
|
|
}
|
|
};
|
|
const hideOptionPanel = () => {
|
|
reactData.searchValue = "";
|
|
reactData.searchLoading = false;
|
|
reactData.visiblePanel = false;
|
|
internalData.hpTimeout = setTimeout(() => {
|
|
reactData.isAniVisible = false;
|
|
}, 350);
|
|
dispatchEvent("visible-change", { visible: false }, null);
|
|
};
|
|
const changeEvent = (evnt, selectValue, option) => {
|
|
emitModel(selectValue);
|
|
if (selectValue !== props.modelValue) {
|
|
dispatchEvent("change", { value: selectValue, option }, evnt);
|
|
if ($xeForm && formItemInfo) {
|
|
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
|
|
}
|
|
}
|
|
};
|
|
const clearValueEvent = (evnt, selectValue) => {
|
|
internalData.remoteValMaps = {};
|
|
changeEvent(evnt, selectValue, null);
|
|
dispatchEvent("clear", { value: selectValue }, evnt);
|
|
};
|
|
const clearEvent = (params) => {
|
|
const { $event } = params;
|
|
clearValueEvent($event, null);
|
|
hideOptionPanel();
|
|
};
|
|
const allCheckedPanelEvent = (params) => {
|
|
const { $event } = params;
|
|
const { multiple, max } = props;
|
|
const { optList } = reactData;
|
|
const valueField = computeValueField.value;
|
|
if (multiple) {
|
|
const selectVals = computeSelectVals.value;
|
|
const currVlas = selectVals.slice(0);
|
|
for (let i = 0; i < optList.length; i++) {
|
|
const option = optList[i];
|
|
const selectValue = option[valueField];
|
|
if (checkMaxLimit(currVlas)) {
|
|
if (VxeUI) {
|
|
VxeUI.modal.message({
|
|
content: getI18n("vxe.select.overSizeErr", [max]),
|
|
status: "warning"
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
if (!currVlas.some((val) => val === selectValue)) {
|
|
currVlas.push(selectValue);
|
|
}
|
|
}
|
|
changeEvent($event, currVlas, optList[0]);
|
|
dispatchEvent("all-change", { value: currVlas }, $event);
|
|
}
|
|
};
|
|
const clearCheckedPanelEvent = (params) => {
|
|
const { $event } = params;
|
|
clearValueEvent($event, null);
|
|
hideOptionPanel();
|
|
};
|
|
const changeOptionEvent = (evnt, option) => {
|
|
const { multiple } = props;
|
|
const { remoteValMaps } = internalData;
|
|
const valueField = computeValueField.value;
|
|
const selectValue = option[valueField];
|
|
const remoteItem = remoteValMaps[selectValue];
|
|
if (!reactData.visiblePanel) {
|
|
return;
|
|
}
|
|
if (remoteItem) {
|
|
remoteItem.item = option;
|
|
} else {
|
|
remoteValMaps[selectValue] = {
|
|
key: getOptId(option),
|
|
item: option,
|
|
_index: -1
|
|
};
|
|
}
|
|
if (multiple) {
|
|
let multipleValue = [];
|
|
const selectVals = computeSelectVals.value;
|
|
const index = import_xe_utils.default.findIndexOf(selectVals, (val) => val === selectValue);
|
|
if (index === -1) {
|
|
multipleValue = selectVals.concat([selectValue]);
|
|
} else {
|
|
multipleValue = selectVals.filter((val) => val !== selectValue);
|
|
}
|
|
changeEvent(evnt, multipleValue, option);
|
|
} else {
|
|
changeEvent(evnt, selectValue, option);
|
|
hideOptionPanel();
|
|
}
|
|
reactData.reactFlag++;
|
|
};
|
|
const handleGlobalMousewheelEvent = (evnt) => {
|
|
const { visiblePanel } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
if (visiblePanel) {
|
|
const panelElem = refOptionPanel.value;
|
|
if (getEventTargetNode(evnt, panelElem).flag) {
|
|
updatePlacement();
|
|
} else {
|
|
hideOptionPanel();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalMousedownEvent = (evnt) => {
|
|
const { visiblePanel } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
const el = refElem.value;
|
|
const panelElem = refOptionPanel.value;
|
|
reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
|
|
if (visiblePanel && !reactData.isActivated) {
|
|
hideOptionPanel();
|
|
}
|
|
}
|
|
};
|
|
const validOffsetOption = (option) => {
|
|
const isDisabled = option.disabled;
|
|
const optid = getOptId(option);
|
|
if (!isDisabled && !hasOptGroupById(optid)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
const findOffsetOption = (option, isDwArrow) => {
|
|
const { allowCreate } = props;
|
|
const { optList } = reactData;
|
|
const { optFullValMaps, optAddMaps, afterVisibleList } = internalData;
|
|
const valueField = computeValueField.value;
|
|
let fullList = afterVisibleList;
|
|
let offsetAddIndex = 0;
|
|
if (allowCreate && optList.length) {
|
|
const firstItem = optList[0];
|
|
const optid = getOptId(firstItem);
|
|
if (optAddMaps[optid]) {
|
|
offsetAddIndex = 1;
|
|
fullList = [optAddMaps[optid]].concat(fullList);
|
|
}
|
|
}
|
|
if (!option) {
|
|
if (isDwArrow) {
|
|
for (let i = 0; i < fullList.length; i++) {
|
|
const item = fullList[i];
|
|
if (validOffsetOption(item)) {
|
|
return item;
|
|
}
|
|
}
|
|
} else {
|
|
for (let len = fullList.length - 1; len >= 0; len--) {
|
|
const item = fullList[len];
|
|
if (validOffsetOption(item)) {
|
|
return item;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let avIndex = 0;
|
|
const cacheItem = option ? optFullValMaps[option[valueField]] : null;
|
|
if (cacheItem) {
|
|
avIndex = cacheItem._index + offsetAddIndex;
|
|
}
|
|
if (avIndex > -1) {
|
|
if (isDwArrow) {
|
|
for (let i = avIndex + 1; i <= fullList.length - 1; i++) {
|
|
const item = fullList[i];
|
|
if (validOffsetOption(item)) {
|
|
return item;
|
|
}
|
|
}
|
|
} else {
|
|
if (avIndex > 0) {
|
|
for (let len = avIndex - 1; len >= 0; len--) {
|
|
const item = fullList[len];
|
|
if (validOffsetOption(item)) {
|
|
return item;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
const handleGlobalKeydownEvent = (evnt) => {
|
|
const { clearable } = props;
|
|
const { visiblePanel, currentOption } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
|
|
const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
|
|
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
|
|
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
|
|
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
|
|
const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
|
|
if (isTab) {
|
|
reactData.isActivated = false;
|
|
}
|
|
if (visiblePanel) {
|
|
if (isEsc || isTab) {
|
|
hideOptionPanel();
|
|
} else if (isEnter) {
|
|
if (currentOption) {
|
|
evnt.preventDefault();
|
|
evnt.stopPropagation();
|
|
changeOptionEvent(evnt, currentOption);
|
|
}
|
|
} else if (isUpArrow || isDwArrow) {
|
|
evnt.preventDefault();
|
|
let offsetOption = findOffsetOption(currentOption, isDwArrow);
|
|
if (!offsetOption) {
|
|
offsetOption = findOffsetOption(null, isDwArrow);
|
|
}
|
|
if (offsetOption) {
|
|
setCurrentOption(offsetOption);
|
|
handleScrollToOption(offsetOption, isDwArrow);
|
|
}
|
|
}
|
|
} else if ((isUpArrow || isDwArrow || isEnter) && reactData.isActivated) {
|
|
evnt.preventDefault();
|
|
showOptionPanel();
|
|
}
|
|
if (reactData.isActivated) {
|
|
if (isDel && clearable) {
|
|
clearValueEvent(evnt, null);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalBlurEvent = () => {
|
|
const { visiblePanel, isActivated } = reactData;
|
|
if (visiblePanel) {
|
|
hideOptionPanel();
|
|
}
|
|
if (isActivated) {
|
|
reactData.isActivated = false;
|
|
}
|
|
if (visiblePanel || isActivated) {
|
|
const $input = refInput.value;
|
|
if ($input) {
|
|
$input.blur();
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalResizeEvent = () => {
|
|
const { visiblePanel } = reactData;
|
|
if (visiblePanel) {
|
|
updatePlacement();
|
|
}
|
|
};
|
|
const handleFocusSearch = () => {
|
|
if (props.filterable) {
|
|
nextTick(() => {
|
|
const inpSearch = refInpSearch.value;
|
|
if (inpSearch) {
|
|
inpSearch.focus();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const focusEvent = (evnt) => {
|
|
const isDisabled = computeIsDisabled.value;
|
|
if (!isDisabled) {
|
|
if (!reactData.visiblePanel) {
|
|
reactData.triggerFocusPanel = true;
|
|
showOptionPanel();
|
|
setTimeout(() => {
|
|
reactData.triggerFocusPanel = false;
|
|
}, 500);
|
|
}
|
|
}
|
|
dispatchEvent("focus", {}, evnt);
|
|
};
|
|
const clickEvent = (evnt) => {
|
|
togglePanelEvent(evnt);
|
|
dispatchEvent("click", { triggerButton: false, visible: reactData.visiblePanel }, evnt);
|
|
};
|
|
const blurEvent = (evnt) => {
|
|
reactData.isActivated = false;
|
|
dispatchEvent("blur", {}, evnt);
|
|
};
|
|
const suffixClickEvent = (evnt) => {
|
|
togglePanelEvent(evnt);
|
|
dispatchEvent("click", { triggerButton: true, visible: reactData.visiblePanel }, evnt);
|
|
};
|
|
const modelSearchEvent = (value) => {
|
|
reactData.searchValue = value;
|
|
};
|
|
const focusSearchEvent = () => {
|
|
reactData.isActivated = true;
|
|
};
|
|
const handleSearchEvent = () => {
|
|
const { modelValue, remote, remoteMethod } = props;
|
|
const { searchValue } = reactData;
|
|
const remoteOpts = computeRemoteOpts.value;
|
|
const queryMethod = remoteOpts.queryMethod || remoteMethod;
|
|
if (remote && queryMethod && remoteOpts.enabled) {
|
|
reactData.searchLoading = true;
|
|
Promise.resolve(queryMethod({ $select: $xeSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
|
|
reactData.searchLoading = false;
|
|
handleOption();
|
|
updateYData();
|
|
});
|
|
} else {
|
|
handleOption();
|
|
updateYData();
|
|
}
|
|
};
|
|
const triggerSearchEvent = import_xe_utils.default.debounce(handleSearchEvent, 350, { trailing: true });
|
|
const togglePanelEvent = (params) => {
|
|
const { $event } = params;
|
|
$event.preventDefault();
|
|
if (reactData.triggerFocusPanel) {
|
|
reactData.triggerFocusPanel = false;
|
|
} else {
|
|
if (reactData.visiblePanel) {
|
|
hideOptionPanel();
|
|
} else {
|
|
showOptionPanel();
|
|
}
|
|
}
|
|
};
|
|
const checkOptionDisabled = (isSelected, option) => {
|
|
if (option.disabled) {
|
|
return true;
|
|
}
|
|
const isMaximize = computeIsMaximize.value;
|
|
if (isMaximize && !isSelected) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
const updateYSpace = () => {
|
|
const { scrollYLoad } = reactData;
|
|
const { scrollYStore, afterVisibleList } = internalData;
|
|
reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
|
|
reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
|
|
};
|
|
const handleData = () => {
|
|
const { filterable, allowCreate } = props;
|
|
const { scrollYLoad, searchValue } = reactData;
|
|
const { optAddMaps, scrollYStore, afterVisibleList } = internalData;
|
|
const labelField = computeLabelField.value;
|
|
const valueField = computeValueField.value;
|
|
const restList = scrollYLoad ? afterVisibleList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : afterVisibleList.slice(0);
|
|
if (filterable && allowCreate && searchValue) {
|
|
if (!restList.some((option) => option[labelField] === searchValue)) {
|
|
const addItem = optAddMaps[searchValue] || reactive({
|
|
[getOptKey()]: searchValue,
|
|
[labelField]: searchValue,
|
|
[valueField]: searchValue
|
|
});
|
|
optAddMaps[searchValue] = addItem;
|
|
restList.unshift(addItem);
|
|
}
|
|
}
|
|
reactData.optList = restList;
|
|
return nextTick();
|
|
};
|
|
const updateYData = () => {
|
|
handleData();
|
|
updateYSpace();
|
|
};
|
|
const computeScrollLoad = () => {
|
|
return nextTick().then(() => {
|
|
const { scrollYLoad } = reactData;
|
|
const { scrollYStore } = internalData;
|
|
const virtualBodyElem = refVirtualBody.value;
|
|
const virtualYOpts = computeVirtualYOpts.value;
|
|
let rowHeight = 0;
|
|
let firstItemElem;
|
|
if (virtualBodyElem) {
|
|
if (!firstItemElem) {
|
|
firstItemElem = virtualBodyElem.children[0];
|
|
}
|
|
}
|
|
if (firstItemElem) {
|
|
rowHeight = firstItemElem.offsetHeight;
|
|
}
|
|
rowHeight = Math.max(20, rowHeight);
|
|
scrollYStore.rowHeight = rowHeight;
|
|
if (scrollYLoad) {
|
|
const scrollBodyElem = refVirtualWrapper.value;
|
|
const visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
|
|
const offsetYSize = Math.max(0, Math.min(2, import_xe_utils.default.toNumber(virtualYOpts.oSize)));
|
|
scrollYStore.offsetSize = offsetYSize;
|
|
scrollYStore.visibleSize = visibleYSize;
|
|
scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
|
|
updateYData();
|
|
} else {
|
|
updateYSpace();
|
|
}
|
|
});
|
|
};
|
|
const handleScrollToOption = (option, isDwArrow) => {
|
|
const { scrollYLoad } = reactData;
|
|
const { optFullValMaps, scrollYStore } = internalData;
|
|
const valueField = computeValueField.value;
|
|
const cacheItem = optFullValMaps[option[valueField]];
|
|
if (cacheItem) {
|
|
const optid = cacheItem.key;
|
|
const avIndex = cacheItem._index;
|
|
if (avIndex > -1) {
|
|
const optWrapperElem = refVirtualWrapper.value;
|
|
const panelElem = refOptionPanel.value;
|
|
if (!panelElem) {
|
|
return;
|
|
}
|
|
const optElem = panelElem.querySelector(`[optid='${optid}']`);
|
|
if (optWrapperElem) {
|
|
if (optElem) {
|
|
const wrapperHeight = optWrapperElem.offsetHeight;
|
|
const offsetPadding = 1;
|
|
if (isDwArrow) {
|
|
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;
|
|
}
|
|
} else {
|
|
if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
|
|
optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
|
|
} else if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
|
|
optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
|
|
}
|
|
}
|
|
} else if (scrollYLoad) {
|
|
if (isDwArrow) {
|
|
optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight - optWrapperElem.clientHeight + scrollYStore.rowHeight;
|
|
} else {
|
|
optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const scrollTo = (scrollLeft, scrollTop) => {
|
|
const scrollBodyElem = refVirtualWrapper.value;
|
|
if (scrollBodyElem) {
|
|
if (import_xe_utils.default.isNumber(scrollLeft)) {
|
|
scrollBodyElem.scrollLeft = scrollLeft;
|
|
}
|
|
if (import_xe_utils.default.isNumber(scrollTop)) {
|
|
scrollBodyElem.scrollTop = scrollTop;
|
|
}
|
|
}
|
|
if (reactData.scrollYLoad) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
nextTick(() => {
|
|
resolve();
|
|
});
|
|
}, 50);
|
|
});
|
|
}
|
|
return nextTick();
|
|
};
|
|
const refreshScroll = () => {
|
|
const { lastScrollLeft, lastScrollTop } = internalData;
|
|
return clearScroll().then(() => {
|
|
if (lastScrollLeft || lastScrollTop) {
|
|
internalData.lastScrollLeft = 0;
|
|
internalData.lastScrollTop = 0;
|
|
return scrollTo(lastScrollLeft, lastScrollTop);
|
|
}
|
|
});
|
|
};
|
|
const recalculate = () => {
|
|
const el = refElem.value;
|
|
if (el && el.clientWidth && el.clientHeight) {
|
|
return computeScrollLoad();
|
|
}
|
|
return Promise.resolve();
|
|
};
|
|
const loadYData = (evnt) => {
|
|
const { scrollYStore } = internalData;
|
|
const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
|
|
const scrollBodyElem = evnt.target;
|
|
const scrollTop = scrollBodyElem.scrollTop;
|
|
const toVisibleIndex = Math.floor(scrollTop / rowHeight);
|
|
const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
|
|
const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
|
|
if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
|
|
if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
|
|
scrollYStore.startIndex = offsetStartIndex;
|
|
scrollYStore.endIndex = offsetEndIndex;
|
|
updateYData();
|
|
}
|
|
}
|
|
};
|
|
const isVMScrollProcess = () => {
|
|
const delayHover = 250;
|
|
const { lastScrollTime } = internalData;
|
|
return !!(lastScrollTime && Date.now() < lastScrollTime + delayHover);
|
|
};
|
|
const scrollEvent = (evnt) => {
|
|
const scrollBodyElem = evnt.target;
|
|
const scrollTop = scrollBodyElem.scrollTop;
|
|
const scrollLeft = scrollBodyElem.scrollLeft;
|
|
const isX = scrollLeft !== internalData.lastScrollLeft;
|
|
const isY = scrollTop !== internalData.lastScrollTop;
|
|
internalData.lastScrollTop = scrollTop;
|
|
internalData.lastScrollLeft = scrollLeft;
|
|
if (reactData.scrollYLoad) {
|
|
loadYData(evnt);
|
|
}
|
|
internalData.lastScrollTime = Date.now();
|
|
dispatchEvent("scroll", { scrollLeft, scrollTop, isX, isY }, evnt);
|
|
};
|
|
const loadData = (datas) => {
|
|
cacheItemMap(datas || []);
|
|
const { isLoaded, fullData, scrollYStore } = internalData;
|
|
const defaultOpts = computeDefaultOpts.value;
|
|
const virtualYOpts = computeVirtualYOpts.value;
|
|
const valueField = computeValueField.value;
|
|
Object.assign(scrollYStore, {
|
|
startIndex: 0,
|
|
endIndex: 1,
|
|
visibleSize: 0
|
|
});
|
|
internalData.synchData = datas || [];
|
|
reactData.scrollYLoad = !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt <= fullData.length);
|
|
handleData();
|
|
if (!isLoaded) {
|
|
const { selectMode } = defaultOpts;
|
|
if (datas.length > 0 && import_xe_utils.default.eqNull(props.modelValue)) {
|
|
if (selectMode === "first" || selectMode === "last") {
|
|
const selectItem = import_xe_utils.default[selectMode](datas);
|
|
if (selectItem) {
|
|
nextTick(() => {
|
|
if (import_xe_utils.default.eqNull(props.modelValue)) {
|
|
emitModel(selectItem[valueField]);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
internalData.isLoaded = true;
|
|
}
|
|
}
|
|
return computeScrollLoad().then(() => {
|
|
refreshScroll();
|
|
});
|
|
};
|
|
const clearScroll = () => {
|
|
const scrollBodyElem = refVirtualWrapper.value;
|
|
if (scrollBodyElem) {
|
|
scrollBodyElem.scrollTop = 0;
|
|
scrollBodyElem.scrollLeft = 0;
|
|
}
|
|
internalData.lastScrollTop = 0;
|
|
internalData.lastScrollLeft = 0;
|
|
return nextTick();
|
|
};
|
|
const hasOptGroupById = (optid) => {
|
|
const { optGroupKeyMaps } = internalData;
|
|
return !!optGroupKeyMaps[optid];
|
|
};
|
|
const selectMethods = {
|
|
dispatchEvent,
|
|
loadData,
|
|
reloadData(datas) {
|
|
internalData.isLoaded = false;
|
|
clearScroll();
|
|
return loadData(datas);
|
|
},
|
|
isPanelVisible() {
|
|
return reactData.visiblePanel;
|
|
},
|
|
togglePanel() {
|
|
if (reactData.visiblePanel) {
|
|
hideOptionPanel();
|
|
} else {
|
|
showOptionPanel();
|
|
}
|
|
return nextTick();
|
|
},
|
|
hidePanel() {
|
|
if (reactData.visiblePanel) {
|
|
hideOptionPanel();
|
|
}
|
|
return nextTick();
|
|
},
|
|
showPanel() {
|
|
if (!reactData.visiblePanel) {
|
|
showOptionPanel();
|
|
}
|
|
return nextTick();
|
|
},
|
|
refreshOption() {
|
|
handleOption();
|
|
updateYData();
|
|
return nextTick();
|
|
},
|
|
focus() {
|
|
const $input = refInput.value;
|
|
if ($input) {
|
|
$input.blur();
|
|
}
|
|
reactData.isActivated = true;
|
|
return nextTick();
|
|
},
|
|
blur() {
|
|
const $input = refInput.value;
|
|
if ($input) {
|
|
$input.blur();
|
|
}
|
|
reactData.isActivated = false;
|
|
return nextTick();
|
|
},
|
|
recalculate,
|
|
clearScroll
|
|
};
|
|
Object.assign($xeSelect, selectMethods);
|
|
const renderOption = (list) => {
|
|
const { allowCreate, optionKey } = props;
|
|
const { currentOption } = reactData;
|
|
const { optAddMaps } = internalData;
|
|
const optionOpts = computeOptionOpts.value;
|
|
const labelField = computeLabelField.value;
|
|
const valueField = computeValueField.value;
|
|
const groupLabelField = computeGroupLabelField.value;
|
|
const selectVals = computeSelectVals.value;
|
|
const { useKey, height } = optionOpts;
|
|
const optionSlot = slots.option;
|
|
return list.map((option, cIndex) => {
|
|
const { slots: slots2, className } = option;
|
|
const optid = getOptId(option);
|
|
const optionValue = option[valueField];
|
|
const isOptGroup = hasOptGroupById(optid);
|
|
const isAdd = !!(allowCreate && optAddMaps[optid]);
|
|
const isSelected = !isAdd && selectVals.indexOf(optionValue) > -1;
|
|
const isVisible = isAdd || (!isOptGroup || isOptionVisible(option));
|
|
const isDisabled = !isAdd && checkOptionDisabled(isSelected, option);
|
|
const defaultSlot = slots2 ? slots2.default : null;
|
|
const optParams = { option, group: isOptGroup ? option : null, $select: $xeSelect };
|
|
let optLabel = "";
|
|
let optVNs = [];
|
|
if (optionSlot) {
|
|
optVNs = callSlot(optionSlot, optParams);
|
|
} else if (defaultSlot) {
|
|
optVNs = callSlot(defaultSlot, optParams);
|
|
} else {
|
|
optLabel = getFuncText(option[isOptGroup ? groupLabelField : labelField] || optionValue);
|
|
optVNs = optLabel;
|
|
}
|
|
return isVisible ? h("div", {
|
|
key: useKey || optionKey ? optid : cIndex,
|
|
class: ["vxe-select-option", className ? import_xe_utils.default.isFunction(className) ? className(optParams) : className : "", {
|
|
"vxe-select-optgroup": isOptGroup,
|
|
"is--disabled": isDisabled,
|
|
"is--selected": isSelected,
|
|
"is--add": isAdd,
|
|
"is--hover": currentOption && getOptId(currentOption) === optid
|
|
}],
|
|
optid,
|
|
title: optLabel || null,
|
|
style: height ? {
|
|
height: toCssUnit(height)
|
|
} : void 0,
|
|
onMousedown: (evnt) => {
|
|
const isLeftBtn = evnt.button === 0;
|
|
if (isLeftBtn) {
|
|
evnt.stopPropagation();
|
|
}
|
|
},
|
|
onClick: (evnt) => {
|
|
if (!isDisabled && !isOptGroup) {
|
|
changeOptionEvent(evnt, option);
|
|
}
|
|
},
|
|
onMouseenter: () => {
|
|
if (!isDisabled && !isOptGroup && !isVMScrollProcess()) {
|
|
setCurrentOption(option);
|
|
}
|
|
}
|
|
}, allowCreate ? [
|
|
h("span", {
|
|
key: 1,
|
|
class: "vxe-select-option--label"
|
|
}, optVNs),
|
|
isAdd ? h("span", {
|
|
key: 2,
|
|
class: "vxe-select-option--add-icon"
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().SELECT_ADD_OPTION
|
|
})
|
|
]) : renderEmptyElement($xeSelect)
|
|
] : optVNs) : renderEmptyElement($xeSelect);
|
|
});
|
|
};
|
|
const renderOpts = () => {
|
|
const { optList, searchLoading } = reactData;
|
|
if (searchLoading) {
|
|
return [
|
|
h("div", {
|
|
class: "vxe-select--search-loading"
|
|
}, [
|
|
h("i", {
|
|
class: ["vxe-select--search-icon", getIcon().SELECT_LOADED]
|
|
}),
|
|
h("span", {
|
|
class: "vxe-select--search-text"
|
|
}, getI18n("vxe.select.loadingText"))
|
|
])
|
|
];
|
|
}
|
|
if (optList.length) {
|
|
return renderOption(optList);
|
|
}
|
|
return [
|
|
h("div", {
|
|
class: "vxe-select--empty-placeholder"
|
|
}, props.emptyText || getI18n("vxe.select.emptyText"))
|
|
];
|
|
};
|
|
const renderVN = () => {
|
|
const { className, popupClassName, multiple, loading, filterable, showTotalButoon, showCheckedButoon, showClearButton } = props;
|
|
const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight } = reactData;
|
|
const vSize = computeSize.value;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const selectLabel = computeSelectLabel.value;
|
|
const fullLabel = computeFullLabel.value;
|
|
const btnTransfer = computeBtnTransfer.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const inpPlaceholder = computeInpPlaceholder.value;
|
|
const defaultSlot = slots.default;
|
|
const headerSlot = slots.header;
|
|
const footerSlot = slots.footer;
|
|
const prefixSlot = slots.prefix;
|
|
if (formReadonly) {
|
|
return h("div", {
|
|
ref: refElem,
|
|
class: ["vxe-select--readonly", className]
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-select-slots",
|
|
ref: "hideOption"
|
|
}, defaultSlot ? defaultSlot({}) : []),
|
|
h("span", {
|
|
class: "vxe-select-label",
|
|
title: fullLabel
|
|
}, selectLabel)
|
|
]);
|
|
}
|
|
const selectVals = computeSelectVals.value;
|
|
return h("div", {
|
|
ref: refElem,
|
|
class: ["vxe-select", className ? import_xe_utils.default.isFunction(className) ? className({ $select: $xeSelect }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
"is--visible": visiblePanel,
|
|
"is--disabled": isDisabled,
|
|
"is--filter": filterable,
|
|
"is--loading": loading,
|
|
"is--active": isActivated
|
|
}]
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-select-slots",
|
|
ref: "hideOption"
|
|
}, defaultSlot ? defaultSlot({}) : []),
|
|
h(input_default, {
|
|
ref: refInput,
|
|
clearable: props.clearable,
|
|
placeholder: inpPlaceholder,
|
|
readonly: true,
|
|
disabled: isDisabled,
|
|
type: "text",
|
|
prefixIcon: props.prefixIcon,
|
|
suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
|
|
autoFocus: false,
|
|
title: fullLabel,
|
|
modelValue: selectLabel,
|
|
onClear: clearEvent,
|
|
onClick: clickEvent,
|
|
onFocus: focusEvent,
|
|
onBlur: blurEvent,
|
|
onSuffixClick: suffixClickEvent
|
|
}, prefixSlot ? {
|
|
prefix: () => prefixSlot({})
|
|
} : {}),
|
|
h(Teleport, {
|
|
to: "body",
|
|
disabled: btnTransfer ? !initialized : true
|
|
}, [
|
|
h("div", {
|
|
ref: refOptionPanel,
|
|
class: ["vxe-table--ignore-clear vxe-select--panel", popupClassName ? import_xe_utils.default.isFunction(popupClassName) ? popupClassName({ $select: $xeSelect }) : popupClassName : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
"is--transfer": btnTransfer,
|
|
"ani--leave": !loading && isAniVisible,
|
|
"ani--enter": !loading && visiblePanel
|
|
}],
|
|
placement: reactData.panelPlacement,
|
|
style: reactData.panelStyle
|
|
}, initialized && (visiblePanel || isAniVisible) ? [
|
|
h("div", {
|
|
class: "vxe-select--panel-wrapper"
|
|
}, [
|
|
filterable ? h("div", {
|
|
class: "vxe-select--panel-search"
|
|
}, [
|
|
h(input_default, {
|
|
ref: refInpSearch,
|
|
class: "vxe-select-search--input",
|
|
modelValue: reactData.searchValue,
|
|
type: "text",
|
|
clearable: true,
|
|
disabled: false,
|
|
readonly: false,
|
|
placeholder: getI18n("vxe.select.search"),
|
|
prefixIcon: getIcon().INPUT_SEARCH,
|
|
"onUpdate:modelValue": modelSearchEvent,
|
|
onFocus: focusSearchEvent,
|
|
onChange: triggerSearchEvent,
|
|
onSearch: triggerSearchEvent
|
|
})
|
|
]) : renderEmptyElement($xeSelect),
|
|
showTotalButoon || showCheckedButoon && multiple || showClearButton || headerSlot ? h("div", {
|
|
class: "vxe-select--panel-header"
|
|
}, headerSlot ? callSlot(headerSlot, {}) : [
|
|
h("div", {
|
|
class: "vxe-select--header-button"
|
|
}, [
|
|
showTotalButoon ? h("div", {
|
|
class: "vxe-select--header-total"
|
|
}, getI18n("vxe.select.total", [selectVals.length, optList.length])) : renderEmptyElement($xeSelect),
|
|
h("div", {
|
|
class: "vxe-select--header-btns"
|
|
}, [
|
|
showCheckedButoon && multiple ? h(button_default, {
|
|
content: getI18n("vxe.select.allChecked"),
|
|
mode: "text",
|
|
onClick: allCheckedPanelEvent
|
|
}) : renderEmptyElement($xeSelect),
|
|
showClearButton ? h(button_default, {
|
|
content: getI18n("vxe.select.clear"),
|
|
mode: "text",
|
|
onClick: clearCheckedPanelEvent
|
|
}) : renderEmptyElement($xeSelect)
|
|
])
|
|
])
|
|
]) : renderEmptyElement($xeSelect),
|
|
h("div", {
|
|
class: "vxe-select--panel-body"
|
|
}, [
|
|
h("div", {
|
|
ref: refVirtualWrapper,
|
|
class: "vxe-select-option--wrapper",
|
|
onScroll: scrollEvent
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-select--y-space",
|
|
style: {
|
|
height: bodyHeight ? `${bodyHeight}px` : ""
|
|
}
|
|
}),
|
|
h("div", {
|
|
ref: refVirtualBody,
|
|
class: "vxe-select--body",
|
|
style: {
|
|
transform: `translateY(${topSpaceHeight}px)`
|
|
}
|
|
}, renderOpts())
|
|
])
|
|
]),
|
|
footerSlot ? h("div", {
|
|
class: "vxe-select--panel-footer"
|
|
}, callSlot(footerSlot, {})) : renderEmptyElement($xeSelect)
|
|
])
|
|
] : [])
|
|
])
|
|
]);
|
|
};
|
|
watch(() => reactData.staticOptions, (val) => {
|
|
loadData(val);
|
|
});
|
|
watch(() => props.options, (val) => {
|
|
loadData(val || []);
|
|
});
|
|
watch(() => props.optionGroups, (val) => {
|
|
loadData(val || []);
|
|
});
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const { options, optionGroups } = props;
|
|
if (optionGroups) {
|
|
loadData(optionGroups);
|
|
} else if (options) {
|
|
loadData(options);
|
|
}
|
|
});
|
|
globalEvents.on($xeSelect, "mousewheel", handleGlobalMousewheelEvent);
|
|
globalEvents.on($xeSelect, "mousedown", handleGlobalMousedownEvent);
|
|
globalEvents.on($xeSelect, "keydown", handleGlobalKeydownEvent);
|
|
globalEvents.on($xeSelect, "blur", handleGlobalBlurEvent);
|
|
globalEvents.on($xeSelect, "resize", handleGlobalResizeEvent);
|
|
});
|
|
onUnmounted(() => {
|
|
globalEvents.off($xeSelect, "mousewheel");
|
|
globalEvents.off($xeSelect, "mousedown");
|
|
globalEvents.off($xeSelect, "keydown");
|
|
globalEvents.off($xeSelect, "blur");
|
|
globalEvents.off($xeSelect, "resize");
|
|
import_xe_utils.default.assign(internalData, createInternalData());
|
|
});
|
|
provide("$xeSelect", $xeSelect);
|
|
$xeSelect.renderVN = renderVN;
|
|
return $xeSelect;
|
|
},
|
|
render() {
|
|
return this.renderVN();
|
|
}
|
|
});
|
|
|
|
export {
|
|
select_default
|
|
};
|
|
//# sourceMappingURL=chunk-WLAKFFV5.js.map
|