vxe-pc-ui 3.0.0 → 3.0.1

package/es/select/src/select.js

@@ -0,0 +1,1269 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom';
+import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
+import VxeInputComponent from '../../input/src/input';
+import { getSlotVNs } from '../../ui/src/vn';
+function isOptionVisible(option) {
+    return option.visible !== false;
+}
+function getOptUniqueId() {
+    return XEUtils.uniqueId('opt_');
+}
+export default defineVxeComponent({
+    name: 'VxeSelect',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    model: {
+        prop: 'value',
+        event: 'modelValue'
+    },
+    props: {
+        value: [String, Number, Boolean, Array],
+        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,
+        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: () => getConfig().select.size || getConfig().size
+        },
+        filterable: Boolean,
+        filterMethod: Function,
+        remote: Boolean,
+        remoteMethod: Function,
+        emptyText: String,
+        transfer: {
+            type: Boolean,
+            default: null
+        },
+        // 已废弃，被 option-config.keyField 替换
+        optionId: {
+            type: String,
+            default: () => getConfig().select.optionId
+        },
+        // 已废弃，被 option-config.useKey 替换
+        optionKey: Boolean
+    },
+    inject: {
+        $xeModal: {
+            default: null
+        },
+        $xeDrawer: {
+            default: null
+        },
+        $xeTable: {
+            default: null
+        },
+        $xeForm: {
+            default: null
+        },
+        formItemInfo: {
+            from: 'xeFormItemInfo',
+            default: null
+        }
+    },
+    provide() {
+        const $xeSelect = this;
+        return {
+            $xeSelect
+        };
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            initialized: false,
+            staticOptions: [],
+            fullGroupList: [],
+            fullOptionList: [],
+            visibleGroupList: [],
+            visibleOptionList: [],
+            remoteValueList: [],
+            panelIndex: 0,
+            panelStyle: {},
+            panelPlacement: null,
+            currentOption: null,
+            currentValue: null,
+            triggerFocusPanel: false,
+            visiblePanel: false,
+            isAniVisible: false,
+            isActivated: false,
+            searchValue: '',
+            searchLoading: false
+        };
+        const internalData = {
+            hpTimeout: undefined
+        };
+        return {
+            xID,
+            reactData,
+            internalData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeFormReadonly() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const $xeForm = $xeSelect.$xeForm;
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        },
+        computeIsDisabled() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const $xeForm = $xeSelect.$xeForm;
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        },
+        computeBtnTransfer() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const $xeTable = $xeSelect.$xeTable;
+            const $xeModal = $xeSelect.$xeModal;
+            const $xeDrawer = $xeSelect.$xeDrawer;
+            const $xeForm = $xeSelect.$xeForm;
+            const { transfer } = props;
+            if (transfer === null) {
+                const globalTransfer = getConfig().select.transfer;
+                if (XEUtils.isBoolean(globalTransfer)) {
+                    return globalTransfer;
+                }
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                    return true;
+                }
+            }
+            return transfer;
+        },
+        computeInpPlaceholder() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const { placeholder } = props;
+            if (placeholder) {
+                return getFuncText(placeholder);
+            }
+            const globalPlaceholder = getConfig().select.placeholder;
+            if (globalPlaceholder) {
+                return getFuncText(globalPlaceholder);
+            }
+            return getI18n('vxe.base.pleaseSelect');
+        },
+        computePropsOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, props.optionProps);
+        },
+        computeGroupPropsOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, props.optionGroupProps);
+        },
+        computeLabelField() {
+            const $xeSelect = this;
+            const propsOpts = $xeSelect.computePropsOpts;
+            return propsOpts.label || 'label';
+        },
+        computeValueField() {
+            const $xeSelect = this;
+            const propsOpts = $xeSelect.computePropsOpts;
+            return propsOpts.value || 'value';
+        },
+        computeGroupLabelField() {
+            const $xeSelect = this;
+            const groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+            return groupPropsOpts.label || 'label';
+        },
+        computeGroupOptionsField() {
+            const $xeSelect = this;
+            const groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+            return groupPropsOpts.options || 'options';
+        },
+        computeIsMaximize() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const { value, multiple, max } = props;
+            if (multiple && max) {
+                return (XEUtils.isArray(value) ? value.length : (XEUtils.eqNull(value) ? 0 : 1)) >= XEUtils.toNumber(max);
+            }
+            return false;
+        },
+        computeOptionOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
+        },
+        computeIsGroup() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            return reactData.fullGroupList.some((item) => item.options && item.options.length);
+        },
+        computeMultiMaxCharNum() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return XEUtils.toNumber(props.multiCharOverflow);
+        },
+        computeSelectLabel() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const { value, multiple, remote } = props;
+            const multiMaxCharNum = $xeSelect.computeMultiMaxCharNum;
+            if (value && multiple) {
+                const vals = XEUtils.isArray(value) ? value : [value];
+                if (remote) {
+                    return vals.map(val => $xeSelect.getRemoteSelectLabel(val)).join(', ');
+                }
+                return vals.map((val) => {
+                    const label = $xeSelect.getSelectLabel(val);
+                    if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+                        return `${label.substring(0, multiMaxCharNum)}...`;
+                    }
+                    return label;
+                }).join(', ');
+            }
+            if (remote) {
+                return $xeSelect.getRemoteSelectLabel(value);
+            }
+            return $xeSelect.getSelectLabel(value);
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeSelect = this;
+            $xeSelect.$emit(type, createEvent(evnt, { $select: $xeSelect }, params));
+        },
+        isPanelVisible() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            return reactData.visiblePanel;
+        },
+        togglePanel() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            if (reactData.visiblePanel) {
+                $xeSelect.hideOptionPanel();
+            }
+            else {
+                $xeSelect.showOptionPanel();
+            }
+            return $xeSelect.$nextTick();
+        },
+        hidePanel() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            if (reactData.visiblePanel) {
+                $xeSelect.hideOptionPanel();
+            }
+            return $xeSelect.$nextTick();
+        },
+        showPanel() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            if (!reactData.visiblePanel) {
+                $xeSelect.showOptionPanel();
+            }
+            return $xeSelect.$nextTick();
+        },
+        focus() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const $input = $xeSelect.$refs.refInput;
+            reactData.isActivated = true;
+            $input.blur();
+            return $xeSelect.$nextTick();
+        },
+        blur() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const $input = $xeSelect.$refs.refInput;
+            $input.blur();
+            reactData.isActivated = false;
+            return $xeSelect.$nextTick();
+        },
+        callSlot(slotFunc, params) {
+            const $xeSelect = this;
+            const slots = $xeSelect.$scopedSlots;
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        },
+        findOption(optionValue) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { fullOptionList, fullGroupList } = reactData;
+            const isGroup = $xeSelect.computeIsGroup;
+            const valueField = $xeSelect.computeValueField;
+            if (isGroup) {
+                for (let gIndex = 0; gIndex < fullGroupList.length; gIndex++) {
+                    const group = fullGroupList[gIndex];
+                    if (group.options) {
+                        for (let index = 0; index < group.options.length; index++) {
+                            const option = group.options[index];
+                            if (optionValue === option[valueField]) {
+                                return option;
+                            }
+                        }
+                    }
+                }
+            }
+            return fullOptionList.find((item) => optionValue === item[valueField]);
+        },
+        findVisibleOption(optionValue) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { visibleOptionList, visibleGroupList } = reactData;
+            const isGroup = $xeSelect.computeIsGroup;
+            const valueField = $xeSelect.computeValueField;
+            if (isGroup) {
+                for (let gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
+                    const group = visibleGroupList[gIndex];
+                    if (group.options) {
+                        for (let index = 0; index < group.options.length; index++) {
+                            const option = group.options[index];
+                            if (optionValue === option[valueField]) {
+                                return option;
+                            }
+                        }
+                    }
+                }
+            }
+            return visibleOptionList.find((item) => optionValue === item[valueField]);
+        },
+        getRemoteSelectLabel(value) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { remoteValueList } = reactData;
+            const labelField = $xeSelect.computeLabelField;
+            const remoteItem = remoteValueList.find(item => value === item.key);
+            const item = remoteItem ? remoteItem.result : null;
+            return XEUtils.toValueString(item ? item[labelField] : value);
+        },
+        getSelectLabel(value) {
+            const $xeSelect = this;
+            const labelField = $xeSelect.computeLabelField;
+            const item = $xeSelect.findOption(value);
+            return XEUtils.toValueString(item ? item[labelField] : value);
+        },
+        getOptkey() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const optionOpts = $xeSelect.computeOptionOpts;
+            return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
+        },
+        getOptid(option) {
+            const $xeSelect = this;
+            const optid = option[$xeSelect.getOptkey()];
+            return optid ? encodeURIComponent(optid) : '';
+        },
+        /**
+         * 刷新选项，当选项被动态显示/隐藏时可能会用到
+         */
+        refreshOption() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const { filterable, filterMethod } = props;
+            const { fullOptionList, fullGroupList, searchValue } = reactData;
+            const isGroup = $xeSelect.computeIsGroup;
+            const groupLabelField = $xeSelect.computeGroupLabelField;
+            const labelField = $xeSelect.computeLabelField;
+            const searchStr = `${searchValue || ''}`.toLowerCase();
+            if (isGroup) {
+                if (filterable && filterMethod) {
+                    reactData.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && filterMethod({ group, option: null, searchValue: searchStr }));
+                }
+                else if (filterable) {
+                    reactData.visibleGroupList = fullGroupList.filter(group => isOptionVisible(group) && (!searchStr || `${group[groupLabelField]}`.toLowerCase().indexOf(searchStr) > -1));
+                }
+                else {
+                    reactData.visibleGroupList = fullGroupList.filter(isOptionVisible);
+                }
+            }
+            else {
+                if (filterable && filterMethod) {
+                    reactData.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && filterMethod({ group: null, option, searchValue: searchStr }));
+                }
+                else if (filterable) {
+                    reactData.visibleOptionList = fullOptionList.filter(option => isOptionVisible(option) && (!searchStr || `${option[labelField]}`.toLowerCase().indexOf(searchStr) > -1));
+                }
+                else {
+                    reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
+                }
+            }
+            return $xeSelect.$nextTick();
+        },
+        cacheItemMap() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { fullOptionList, fullGroupList } = reactData;
+            const groupOptionsField = $xeSelect.computeGroupOptionsField;
+            const key = $xeSelect.getOptkey();
+            const handleOptis = (item) => {
+                if (!$xeSelect.getOptid(item)) {
+                    item[key] = getOptUniqueId();
+                }
+            };
+            if (fullGroupList.length) {
+                fullGroupList.forEach((group) => {
+                    handleOptis(group);
+                    if (group[groupOptionsField]) {
+                        group[groupOptionsField].forEach(handleOptis);
+                    }
+                });
+            }
+            else if (fullOptionList.length) {
+                fullOptionList.forEach(handleOptis);
+            }
+            $xeSelect.refreshOption();
+        },
+        setCurrentOption(option) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const valueField = $xeSelect.computeValueField;
+            if (option) {
+                reactData.currentOption = option;
+                reactData.currentValue = option[valueField];
+            }
+        },
+        scrollToOption(option, isAlignBottom) {
+            const $xeSelect = this;
+            return $xeSelect.$nextTick().then(() => {
+                if (option) {
+                    const optWrapperElem = $xeSelect.$refs.refOptionWrapper;
+                    const panelElem = $xeSelect.$refs.refOptionPanel;
+                    const optElem = panelElem.querySelector(`[optid='${$xeSelect.getOptid(option)}']`);
+                    if (optWrapperElem && optElem) {
+                        const wrapperHeight = optWrapperElem.offsetHeight;
+                        const 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;
+                            }
+                        }
+                    }
+                }
+            });
+        },
+        updateZindex() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            if (reactData.panelIndex < getLastZIndex()) {
+                reactData.panelIndex = nextZIndex();
+            }
+        },
+        updatePlacement() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            return $xeSelect.$nextTick().then(() => {
+                const { placement } = props;
+                const { panelIndex } = reactData;
+                const el = $xeSelect.$refs.refElem;
+                const panelElem = $xeSelect.$refs.refOptionPanel;
+                const btnTransfer = $xeSelect.computeBtnTransfer;
+                if (panelElem && el) {
+                    const targetHeight = el.offsetHeight;
+                    const targetWidth = el.offsetWidth;
+                    const panelHeight = panelElem.offsetHeight;
+                    const panelWidth = panelElem.offsetWidth;
+                    const marginSize = 5;
+                    const panelStyle = {
+                        zIndex: panelIndex
+                    };
+                    const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(el);
+                    let panelPlacement = 'bottom';
+                    if (btnTransfer) {
+                        let left = boundingLeft;
+                        let top = boundingTop + targetHeight;
+                        if (placement === 'top') {
+                            panelPlacement = 'top';
+                            top = boundingTop - panelHeight;
+                        }
+                        else if (!placement) {
+                            // 如果下面不够放，则向上
+                            if (top + panelHeight + marginSize > visibleHeight) {
+                                panelPlacement = 'top';
+                                top = boundingTop - panelHeight;
+                            }
+                            // 如果上面不够放，则向下（优先）
+                            if (top < marginSize) {
+                                panelPlacement = 'bottom';
+                                top = boundingTop + targetHeight;
+                            }
+                        }
+                        // 如果溢出右边
+                        if (left + panelWidth + marginSize > visibleWidth) {
+                            left -= left + panelWidth + marginSize - visibleWidth;
+                        }
+                        // 如果溢出左边
+                        if (left < marginSize) {
+                            left = marginSize;
+                        }
+                        Object.assign(panelStyle, {
+                            left: `${left}px`,
+                            top: `${top}px`,
+                            minWidth: `${targetWidth}px`
+                        });
+                    }
+                    else {
+                        if (placement === 'top') {
+                            panelPlacement = 'top';
+                            panelStyle.bottom = `${targetHeight}px`;
+                        }
+                        else if (!placement) {
+                            // 如果下面不够放，则向上
+                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                                // 如果上面不够放，则向下（优先）
+                                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                                    panelPlacement = 'top';
+                                    panelStyle.bottom = `${targetHeight}px`;
+                                }
+                            }
+                        }
+                    }
+                    reactData.panelStyle = panelStyle;
+                    reactData.panelPlacement = panelPlacement;
+                    return $xeSelect.$nextTick();
+                }
+            });
+        },
+        showOptionPanel() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const internalData = $xeSelect.internalData;
+            const { loading, filterable } = props;
+            const { hpTimeout } = internalData;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            if (!loading && !isDisabled) {
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
+                if (!reactData.initialized) {
+                    reactData.initialized = true;
+                }
+                reactData.isActivated = true;
+                reactData.isAniVisible = true;
+                if (filterable) {
+                    $xeSelect.refreshOption();
+                }
+                setTimeout(() => {
+                    const { value } = props;
+                    const currOption = $xeSelect.findOption(XEUtils.isArray(value) ? value[0] : value);
+                    reactData.visiblePanel = true;
+                    if (currOption) {
+                        $xeSelect.setCurrentOption(currOption);
+                        $xeSelect.scrollToOption(currOption);
+                    }
+                    $xeSelect.handleFocusSearch();
+                }, 10);
+                $xeSelect.updateZindex();
+                $xeSelect.updatePlacement();
+            }
+        },
+        hideOptionPanel() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const internalData = $xeSelect.internalData;
+            reactData.searchValue = '';
+            reactData.searchLoading = false;
+            reactData.visiblePanel = false;
+            internalData.hpTimeout = window.setTimeout(() => {
+                reactData.isAniVisible = false;
+            }, 350);
+        },
+        changeEvent(evnt, selectValue) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const $xeForm = $xeSelect.$xeForm;
+            const formItemInfo = $xeSelect.formItemInfo;
+            if (selectValue !== props.value) {
+                $xeSelect.$emit('modelValue', selectValue);
+                $xeSelect.dispatchEvent('change', { value: selectValue }, evnt);
+                // 自动更新校验状态
+                if ($xeForm && formItemInfo) {
+                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+                }
+            }
+        },
+        clearValueEvent(evnt, selectValue) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.remoteValueList = [];
+            $xeSelect.changeEvent(evnt, selectValue);
+            $xeSelect.dispatchEvent('clear', { value: selectValue }, evnt);
+        },
+        clearEvent(params, evnt) {
+            const $xeSelect = this;
+            $xeSelect.clearValueEvent(evnt, null);
+            $xeSelect.hideOptionPanel();
+        },
+        changeOptionEvent(evnt, selectValue, option) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const { value, multiple } = props;
+            const { remoteValueList } = reactData;
+            if (multiple) {
+                let multipleValue = [];
+                const selectVals = XEUtils.eqNull(value) ? [] : (XEUtils.isArray(value) ? value : [value]);
+                const index = XEUtils.findIndexOf(selectVals, val => val === selectValue);
+                if (index === -1) {
+                    multipleValue = selectVals.concat([selectValue]);
+                }
+                else {
+                    multipleValue = selectVals.filter((val) => val !== selectValue);
+                }
+                const remoteItem = remoteValueList.find(item => item.key === selectValue);
+                if (remoteItem) {
+                    remoteItem.result = option;
+                }
+                else {
+                    remoteValueList.push({ key: selectValue, result: option });
+                }
+                $xeSelect.changeEvent(evnt, multipleValue);
+            }
+            else {
+                reactData.remoteValueList = [{ key: selectValue, result: option }];
+                $xeSelect.changeEvent(evnt, selectValue);
+                $xeSelect.hideOptionPanel();
+            }
+        },
+        handleGlobalMousewheelEvent(evnt) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { visiblePanel } = reactData;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            if (!isDisabled) {
+                if (visiblePanel) {
+                    const panelElem = $xeSelect.$refs.refOptionPanel;
+                    if (getEventTargetNode(evnt, panelElem).flag) {
+                        $xeSelect.updatePlacement();
+                    }
+                    else {
+                        $xeSelect.hideOptionPanel();
+                    }
+                }
+            }
+        },
+        handleGlobalMousedownEvent(evnt) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { visiblePanel } = reactData;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            if (!isDisabled) {
+                const el = $xeSelect.$refs.refElem;
+                const panelElem = $xeSelect.$refs.refOptionPanel;
+                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+                if (visiblePanel && !reactData.isActivated) {
+                    $xeSelect.hideOptionPanel();
+                }
+            }
+        },
+        findOffsetOption(optionValue, isUpArrow) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { visibleOptionList, visibleGroupList } = reactData;
+            const isGroup = $xeSelect.computeIsGroup;
+            const valueField = $xeSelect.computeValueField;
+            const groupOptionsField = $xeSelect.computeGroupOptionsField;
+            let firstOption;
+            let prevOption;
+            let nextOption;
+            let currOption;
+            if (isGroup) {
+                for (let gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
+                    const group = visibleGroupList[gIndex];
+                    const groupOptionList = group[groupOptionsField];
+                    const isGroupDisabled = group.disabled;
+                    if (groupOptionList) {
+                        for (let index = 0; index < groupOptionList.length; index++) {
+                            const option = groupOptionList[index];
+                            const isVisible = isOptionVisible(option);
+                            const 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 (let index = 0; index < visibleOptionList.length; index++) {
+                    const option = visibleOptionList[index];
+                    const 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 };
+        },
+        handleGlobalKeydownEvent(evnt) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const { clearable } = props;
+            const { visiblePanel, currentValue, currentOption } = reactData;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            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);
+                const isSpacebar = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR);
+                if (isTab) {
+                    reactData.isActivated = false;
+                }
+                if (visiblePanel) {
+                    if (isEsc || isTab) {
+                        $xeSelect.hideOptionPanel();
+                    }
+                    else if (isEnter) {
+                        evnt.preventDefault();
+                        evnt.stopPropagation();
+                        $xeSelect.changeOptionEvent(evnt, currentValue, currentOption);
+                    }
+                    else if (isUpArrow || isDwArrow) {
+                        evnt.preventDefault();
+                        let { firstOption, offsetOption } = $xeSelect.findOffsetOption(currentValue, isUpArrow);
+                        if (!offsetOption && !$xeSelect.findVisibleOption(currentValue)) {
+                            offsetOption = firstOption;
+                        }
+                        $xeSelect.setCurrentOption(offsetOption);
+                        $xeSelect.scrollToOption(offsetOption, isDwArrow);
+                    }
+                    else if (isSpacebar) {
+                        evnt.preventDefault();
+                    }
+                }
+                else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
+                    evnt.preventDefault();
+                    $xeSelect.showOptionPanel();
+                }
+                if (reactData.isActivated) {
+                    if (isDel && clearable) {
+                        $xeSelect.clearValueEvent(evnt, null);
+                    }
+                }
+            }
+        },
+        handleGlobalBlurEvent() {
+            const $xeSelect = this;
+            $xeSelect.hideOptionPanel();
+        },
+        handleFocusSearch() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            if (props.filterable) {
+                $xeSelect.$nextTick(() => {
+                    const inpSearch = $xeSelect.$refs.refInpSearch;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        },
+        focusEvent(evnt) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            if (!isDisabled) {
+                if (!reactData.visiblePanel) {
+                    reactData.triggerFocusPanel = true;
+                    $xeSelect.showOptionPanel();
+                    setTimeout(() => {
+                        reactData.triggerFocusPanel = false;
+                    }, 150);
+                }
+            }
+            $xeSelect.dispatchEvent('focus', {}, evnt);
+        },
+        clickEvent(evnt) {
+            const $xeSelect = this;
+            $xeSelect.togglePanelEvent(evnt);
+            $xeSelect.dispatchEvent('click', {}, evnt);
+        },
+        blurEvent(evnt) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.isActivated = false;
+            $xeSelect.dispatchEvent('blur', {}, evnt);
+        },
+        modelSearchEvent(value) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.searchValue = value;
+        },
+        focusSearchEvent() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.isActivated = true;
+        },
+        handleSearchEvent() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const { remote, remoteMethod } = props;
+            const { searchValue } = reactData;
+            if (remote && remoteMethod) {
+                reactData.searchLoading = true;
+                Promise.resolve(remoteMethod({ searchValue })).then(() => $xeSelect.$nextTick())
+                    .catch(() => $xeSelect.$nextTick())
+                    .finally(() => {
+                    reactData.searchLoading = false;
+                    $xeSelect.refreshOption();
+                });
+            }
+            else {
+                $xeSelect.refreshOption();
+            }
+        },
+        triggerSearchEvent: XEUtils.debounce(function () {
+            const $xeSelect = this;
+            $xeSelect.handleSearchEvent();
+        }, 350, { trailing: true }),
+        togglePanelEvent(params) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { $event } = params;
+            $event.preventDefault();
+            if (reactData.triggerFocusPanel) {
+                reactData.triggerFocusPanel = false;
+            }
+            else {
+                if (reactData.visiblePanel) {
+                    $xeSelect.hideOptionPanel();
+                }
+                else {
+                    $xeSelect.showOptionPanel();
+                }
+            }
+        },
+        checkOptionDisabled(isSelected, option, group) {
+            const $xeSelect = this;
+            if (option.disabled) {
+                return true;
+            }
+            if (group && group.disabled) {
+                return true;
+            }
+            const isMaximize = $xeSelect.computeIsMaximize;
+            if (isMaximize && !isSelected) {
+                return true;
+            }
+            return false;
+        },
+        //
+        // Render
+        //
+        renderOption(h, list, group) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const slots = $xeSelect.$scopedSlots;
+            const reactData = $xeSelect.reactData;
+            const { optionKey, value } = props;
+            const { currentValue } = reactData;
+            const optionOpts = $xeSelect.computeOptionOpts;
+            const labelField = $xeSelect.computeLabelField;
+            const valueField = $xeSelect.computeValueField;
+            const isGroup = $xeSelect.computeIsGroup;
+            const { useKey } = optionOpts;
+            const optionSlot = slots.option;
+            return list.map((option, cIndex) => {
+                const { slots, className } = option;
+                const optionValue = option[valueField];
+                const isSelected = XEUtils.isArray(value) ? value.indexOf(optionValue) > -1 : value === optionValue;
+                const isVisible = !isGroup || isOptionVisible(option);
+                const isDisabled = $xeSelect.checkOptionDisabled(isSelected, option, group);
+                const optid = $xeSelect.getOptid(option);
+                const defaultSlot = slots ? slots.default : null;
+                const optParams = { 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
+                        },
+                        on: {
+                            mousedown: (evnt) => {
+                                const isLeftBtn = evnt.button === 0;
+                                if (isLeftBtn) {
+                                    evnt.stopPropagation();
+                                }
+                            },
+                            click: (evnt) => {
+                                if (!isDisabled) {
+                                    $xeSelect.changeOptionEvent(evnt, optionValue, option);
+                                }
+                            },
+                            mouseenter: () => {
+                                if (!isDisabled) {
+                                    $xeSelect.setCurrentOption(option);
+                                }
+                            }
+                        }
+                    }, optionSlot ? $xeSelect.callSlot(optionSlot, optParams) : (defaultSlot ? $xeSelect.callSlot(defaultSlot, optParams) : getFuncText(option[labelField])))
+                    : renderEmptyElement($xeSelect);
+            });
+        },
+        renderOptgroup(h) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const slots = $xeSelect.$scopedSlots;
+            const reactData = $xeSelect.reactData;
+            const { optionKey } = props;
+            const { visibleGroupList } = reactData;
+            const optionOpts = $xeSelect.computeOptionOpts;
+            const groupLabelField = $xeSelect.computeGroupLabelField;
+            const groupOptionsField = $xeSelect.computeGroupOptionsField;
+            const { useKey } = optionOpts;
+            const optionSlot = slots.option;
+            return visibleGroupList.map((group, gIndex) => {
+                const { slots, className } = group;
+                const optid = $xeSelect.getOptid(group);
+                const isGroupDisabled = group.disabled;
+                const defaultSlot = slots ? slots.default : null;
+                const optParams = { option: 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 ? $xeSelect.callSlot(optionSlot, optParams) : (defaultSlot ? $xeSelect.callSlot(defaultSlot, optParams) : getFuncText(group[groupLabelField]))),
+                    h('div', {
+                        class: 'vxe-optgroup--wrapper'
+                    }, $xeSelect.renderOption(h, group[groupOptionsField] || [], group))
+                ]);
+            });
+        },
+        renderOpts(h) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const reactData = $xeSelect.reactData;
+            const { visibleGroupList, visibleOptionList, searchLoading } = reactData;
+            const isGroup = $xeSelect.computeIsGroup;
+            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 (isGroup) {
+                if (visibleGroupList.length) {
+                    return $xeSelect.renderOptgroup(h);
+                }
+            }
+            else {
+                if (visibleOptionList.length) {
+                    return $xeSelect.renderOption(h, visibleOptionList);
+                }
+            }
+            return [
+                h('div', {
+                    class: 'vxe-select--empty-placeholder'
+                }, props.emptyText || getI18n('vxe.select.emptyText'))
+            ];
+        },
+        renderVN(h) {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            const slots = $xeSelect.$scopedSlots;
+            const reactData = $xeSelect.reactData;
+            const { className, popupClassName, loading, filterable } = props;
+            const { initialized, isActivated, visiblePanel } = reactData;
+            const vSize = $xeSelect.computeSize;
+            const isDisabled = $xeSelect.computeIsDisabled;
+            const selectLabel = $xeSelect.computeSelectLabel;
+            const btnTransfer = $xeSelect.computeBtnTransfer;
+            const formReadonly = $xeSelect.computeFormReadonly;
+            const inpPlaceholder = $xeSelect.computeInpPlaceholder;
+            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'
+                    }, [selectLabel])
+                ]);
+            }
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-select', className ? (XEUtils.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(VxeInputComponent, {
+                    ref: 'refInput',
+                    props: {
+                        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),
+                        value: selectLabel
+                    },
+                    on: {
+                        clear: $xeSelect.clearEvent,
+                        click: $xeSelect.clickEvent,
+                        focus: $xeSelect.focusEvent,
+                        blur: $xeSelect.blurEvent,
+                        suffixClick: $xeSelect.togglePanelEvent
+                    },
+                    scopedSlots: prefixSlot
+                        ? {
+                            prefix: () => prefixSlot({})
+                        }
+                        : {}
+                }),
+                h('div', {
+                    ref: 'refOptionPanel',
+                    class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $select: $xeSelect }) : popupClassName) : '', {
+                            [`size--${vSize}`]: vSize,
+                            'is--transfer': btnTransfer,
+                            'ani--leave': !loading && reactData.isAniVisible,
+                            'ani--enter': !loading && visiblePanel
+                        }],
+                    attrs: {
+                        placement: reactData.panelPlacement
+                    },
+                    style: reactData.panelStyle
+                }, initialized
+                    ? [
+                        filterable
+                            ? h('div', {
+                                class: 'vxe-select--panel-search'
+                            }, [
+                                h(VxeInputComponent, {
+                                    ref: 'refInpSearch',
+                                    class: 'vxe-select-search--input',
+                                    props: {
+                                        value: reactData.searchValue,
+                                        clearable: true,
+                                        placeholder: getI18n('vxe.select.search'),
+                                        prefixIcon: getIcon().INPUT_SEARCH
+                                    },
+                                    on: {
+                                        modelValue: $xeSelect.modelSearchEvent,
+                                        focus: $xeSelect.focusSearchEvent,
+                                        change: $xeSelect.triggerSearchEvent,
+                                        search: $xeSelect.triggerSearchEvent
+                                    }
+                                })
+                            ])
+                            : renderEmptyElement($xeSelect),
+                        h('div', {
+                            class: 'vxe-select--panel-wrapper'
+                        }, [
+                            headerSlot
+                                ? h('div', {
+                                    class: 'vxe-select--panel-header'
+                                }, headerSlot({}))
+                                : renderEmptyElement($xeSelect),
+                            h('div', {
+                                class: 'vxe-select--panel-body'
+                            }, [
+                                h('div', {
+                                    ref: 'refOptionWrapper',
+                                    class: 'vxe-select-option--wrapper'
+                                }, $xeSelect.renderOpts(h))
+                            ]),
+                            footerSlot
+                                ? h('div', {
+                                    class: 'vxe-select--panel-footer'
+                                }, footerSlot({}))
+                                : renderEmptyElement($xeSelect)
+                        ])
+                    ]
+                    : [])
+            ]);
+        }
+    },
+    watch: {
+        'reactData.staticOptions'(val) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            if (val.some((item) => item.options && item.options.length)) {
+                reactData.fullOptionList = [];
+                reactData.fullGroupList = val;
+            }
+            else {
+                reactData.fullGroupList = [];
+                reactData.fullOptionList = val || [];
+            }
+            $xeSelect.cacheItemMap();
+        },
+        options(val) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.fullGroupList = [];
+            reactData.fullOptionList = val || [];
+            $xeSelect.cacheItemMap();
+        },
+        optionGroups(val) {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            reactData.fullOptionList = [];
+            reactData.fullGroupList = val || [];
+            $xeSelect.cacheItemMap();
+        }
+    },
+    mounted() {
+        const $xeSelect = this;
+        const props = $xeSelect;
+        const reactData = $xeSelect.reactData;
+        $xeSelect.$nextTick(() => {
+            const { options, optionGroups } = props;
+            if (optionGroups) {
+                reactData.fullGroupList = optionGroups;
+            }
+            else if (options) {
+                reactData.fullOptionList = options;
+            }
+            $xeSelect.cacheItemMap();
+        });
+        globalEvents.on($xeSelect, 'mousewheel', $xeSelect.handleGlobalMousewheelEvent);
+        globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
+        globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
+        globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
+    },
+    beforeDestroy() {
+        const $xeSelect = this;
+        globalEvents.off($xeSelect, 'mousewheel');
+        globalEvents.off($xeSelect, 'mousedown');
+        globalEvents.off($xeSelect, 'keydown');
+        globalEvents.off($xeSelect, 'blur');
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});