@fecp/vue 1.0.8 → 1.1.1

package/lib/node_modules/.pnpm/vxe-pc-ui@4.12.28_vue@3.5.13_typescript@5.7.3_/node_modules/vxe-pc-ui/es/select/src/select.js

@@ -0,0 +1,1543 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const comp = require("../../ui/src/comp.js");
+const index = require("../../../../../../../../_virtual/index.js");
+require("../../ui/index.js");
+const dom = require("../../ui/src/dom.js");
+const utils = require("../../ui/src/utils.js");
+const vn = require("../../ui/src/vn.js");
+const log = require("../../ui/src/log.js");
+const input = require("../../input/src/input.js");
+const button = require("../../button/src/button.js");
+const config = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/src/config.js");
+const useFns = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/src/useFns.js");
+const i18n = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/src/i18n.js");
+const event = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/src/event.js");
+const icon = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/src/icon.js");
+const index_esm = require("../../../../../../@vxe-ui_core@4.3.1_vue@3.5.13_typescript@5.7.3_/node_modules/@vxe-ui/core/es/index.esm.js");
+function isOptionVisible(option) {
+  return option.visible !== false;
+}
+function getOptUniqueId() {
+  return index.default.uniqueId("opt_");
+}
+function createInternalData() {
+  return {
+    // isLoaded: false,
+    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
+  };
+}
+const VxeSelectComponent = comp.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: () => config.getConfig().select.multiCharOverflow
+    },
+    prefixIcon: String,
+    allowCreate: {
+      type: Boolean,
+      default: () => config.getConfig().select.allowCreate
+    },
+    placement: String,
+    lazyOptions: Array,
+    options: Array,
+    optionProps: Object,
+    optionGroups: Array,
+    optionGroupProps: Object,
+    optionConfig: Object,
+    className: [String, Function],
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
+    popupClassName: [String, Function],
+    max: {
+      type: [String, Number],
+      default: null
+    },
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
+    zIndex: Number,
+    size: {
+      type: String,
+      default: () => config.getConfig().select.size || config.getConfig().size
+    },
+    filterable: Boolean,
+    /**
+     * 已废弃，被 filter-config.filterMethod 替换
+     * @deprecated
+     */
+    filterMethod: Function,
+    filterConfig: Object,
+    remote: Boolean,
+    remoteConfig: Object,
+    emptyText: String,
+    showTotalButoon: {
+      type: Boolean,
+      default: () => config.getConfig().select.showTotalButoon
+    },
+    showCheckedButoon: {
+      type: Boolean,
+      default: () => config.getConfig().select.showCheckedButoon
+    },
+    showClearButton: {
+      type: Boolean,
+      default: () => config.getConfig().select.showClearButton
+    },
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    popupConfig: Object,
+    virtualYConfig: Object,
+    scrollY: Object,
+    /**
+     * 已废弃，被 remote-config.queryMethod 替换
+     * @deprecated
+     */
+    remoteMethod: Function,
+    /**
+     * 已废弃，被 option-config.keyField 替换
+     * @deprecated
+     */
+    optionId: {
+      type: String,
+      default: () => config.getConfig().select.optionId
+    },
+    /**
+     * 已废弃，被 option-config.useKey 替换
+     * @deprecated
+     */
+    optionKey: Boolean
+  },
+  emits: [
+    "update:modelValue",
+    "change",
+    "default-change",
+    "all-change",
+    "clear",
+    "blur",
+    "focus",
+    "click",
+    "scroll",
+    "visible-change"
+  ],
+  setup(props, context) {
+    const { slots, emit } = context;
+    const $xeModal = vue.inject("$xeModal", null);
+    const $xeDrawer = vue.inject("$xeDrawer", null);
+    const $xeTable = vue.inject("$xeTable", null);
+    const $xeForm = vue.inject("$xeForm", null);
+    const formItemInfo = vue.inject("xeFormItemInfo", null);
+    const xID = index.default.uniqueId();
+    const refElem = vue.ref();
+    const refInput = vue.ref();
+    const refInpSearch = vue.ref();
+    const refVirtualWrapper = vue.ref();
+    const refOptionPanel = vue.ref();
+    const refVirtualBody = vue.ref();
+    const { computeSize } = useFns.useSize(props);
+    const reactData = vue.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 = vue.computed(() => {
+      const { readonly } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = vue.computed(() => {
+      const { disabled } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeBtnTransfer = vue.computed(() => {
+      const { transfer } = props;
+      const popupOpts = computePopupOpts.value;
+      if (index.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        const globalTransfer = config.getConfig().select.transfer;
+        if (index.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    });
+    const computeInpPlaceholder = vue.computed(() => {
+      const { placeholder } = props;
+      if (placeholder) {
+        return utils.getFuncText(placeholder);
+      }
+      const globalPlaceholder = config.getConfig().select.placeholder;
+      if (globalPlaceholder) {
+        return utils.getFuncText(globalPlaceholder);
+      }
+      return i18n.getI18n("vxe.base.pleaseSelect");
+    });
+    const computeDefaultOpts = vue.computed(() => {
+      return Object.assign({}, props.defaultConfig);
+    });
+    const computePropsOpts = vue.computed(() => {
+      return Object.assign({}, props.optionProps);
+    });
+    const computeGroupPropsOpts = vue.computed(() => {
+      return Object.assign({}, props.optionGroupProps);
+    });
+    const computeLabelField = vue.computed(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.label || "label";
+    });
+    const computeValueField = vue.computed(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.value || "value";
+    });
+    const computeGroupLabelField = vue.computed(() => {
+      const groupPropsOpts = computeGroupPropsOpts.value;
+      return groupPropsOpts.label || "label";
+    });
+    const computeGroupOptionsField = vue.computed(() => {
+      const groupPropsOpts = computeGroupPropsOpts.value;
+      return groupPropsOpts.options || "options";
+    });
+    const computeIsMaximize = vue.computed(() => {
+      const selectVals = computeSelectVals.value;
+      return checkMaxLimit(selectVals);
+    });
+    const computePopupOpts = vue.computed(() => {
+      return Object.assign({}, config.getConfig().select.popupConfig, props.popupConfig);
+    });
+    const computeVirtualYOpts = vue.computed(() => {
+      return Object.assign({}, config.getConfig().select.virtualYConfig || config.getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
+    });
+    const computeRemoteOpts = vue.computed(() => {
+      return Object.assign({}, config.getConfig().select.remoteConfig, props.remoteConfig);
+    });
+    const computeFilterOpts = vue.computed(() => {
+      return Object.assign({}, config.getConfig().select.filterConfig, props.filterConfig);
+    });
+    const computeOptionOpts = vue.computed(() => {
+      return Object.assign({}, config.getConfig().select.optionConfig, props.optionConfig);
+    });
+    const computeMultiMaxCharNum = vue.computed(() => {
+      return index.default.toNumber(props.multiCharOverflow);
+    });
+    const computePopupWrapperStyle = vue.computed(() => {
+      const popupOpts = computePopupOpts.value;
+      const { height, width } = popupOpts;
+      const stys = {};
+      if (width) {
+        stys.width = dom.toCssUnit(width);
+      }
+      if (height) {
+        stys.height = dom.toCssUnit(height);
+        stys.maxHeight = dom.toCssUnit(height);
+      }
+      return stys;
+    });
+    const computeSelectVals = vue.computed(() => {
+      const { modelValue, multiple } = props;
+      let vals = [];
+      if (index.default.isArray(modelValue)) {
+        vals = modelValue;
+      } else {
+        if (multiple) {
+          if (!utils.eqEmptyValue(modelValue)) {
+            vals = `${modelValue}`.indexOf(",") > -1 ? `${modelValue}`.split(",") : [modelValue];
+          }
+        } else {
+          vals = modelValue === null || modelValue === void 0 ? [] : [modelValue];
+        }
+      }
+      return vals;
+    });
+    const computeFullLabel = vue.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 = vue.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 (index.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (index.default.isFunction(slotFunc)) {
+          return vn.getSlotVNs(slotFunc(params));
+        }
+      }
+      return [];
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, event.createEvent(evnt, { $select: $xeSelect }, params));
+    };
+    const emitModel = (value) => {
+      emit("update:modelValue", value);
+    };
+    const emitDefaultValue = (value) => {
+      emitModel(value);
+      dispatchEvent("default-change", { value }, null);
+    };
+    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 >= index.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 index.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 { remote, modelValue, filterable } = props;
+      const { searchValue } = reactData;
+      const { fullData, optFullValMaps } = internalData;
+      const labelField = computeLabelField.value;
+      const valueField = computeValueField.value;
+      const filterOpts = computeFilterOpts.value;
+      const frMethod = filterOpts.filterMethod || props.filterMethod;
+      const searchStr = `${searchValue || ""}`.toLowerCase();
+      let avList = [];
+      if (remote) {
+        avList = fullData.filter(isOptionVisible);
+      } else {
+        if (filterable && frMethod) {
+          avList = fullData.filter((option) => isOptionVisible(option) && frMethod({ $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, index2) => {
+        const cacheItem = optFullValMaps[item[valueField]];
+        if (cacheItem) {
+          cacheItem._index = index2;
+        }
+      });
+      internalData.afterVisibleList = avList;
+      return vue.nextTick();
+    };
+    const setCurrentOption = (option) => {
+      if (option) {
+        reactData.currentOption = option;
+      }
+    };
+    const updateZIndex = () => {
+      const popupOpts = computePopupOpts.value;
+      const customZIndex = popupOpts.zIndex || props.zIndex;
+      if (customZIndex) {
+        reactData.panelIndex = index.default.toNumber(customZIndex);
+      } else if (reactData.panelIndex < utils.getLastZIndex()) {
+        reactData.panelIndex = utils.nextZIndex();
+      }
+    };
+    const updatePlacement = () => {
+      const { placement } = props;
+      const { panelIndex } = reactData;
+      const targetElem = refElem.value;
+      const panelElem = refOptionPanel.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const popupOpts = computePopupOpts.value;
+      const handleStyle = () => {
+        const ppObj = dom.updatePanelPlacement(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          teleportTo: btnTransfer
+        });
+        const panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return vue.nextTick().then(handleStyle);
+    };
+    const handleScrollSelect = () => {
+      vue.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 || fullData.length && remoteOpts.clearOnClose)) {
+            handleSearchEvent();
+          } else {
+            handleOption();
+            updateYData();
+          }
+        }
+        setTimeout(() => {
+          reactData.visiblePanel = true;
+          handleFocusSearch();
+          recalculate().then(() => {
+            handleScrollSelect();
+            refreshScroll();
+          });
+          updatePlacement();
+        }, 10);
+        setTimeout(() => {
+          recalculate().then(() => refreshScroll());
+        }, 100);
+        updateZIndex();
+        updatePlacement();
+        dispatchEvent("visible-change", { visible: true }, null);
+      }
+    };
+    const hideOptionPanel = () => {
+      const { filterable, remote } = props;
+      const filterOpts = computeFilterOpts.value;
+      const remoteOpts = computeRemoteOpts.value;
+      if (remote) {
+        if (remoteOpts.clearOnClose) {
+          reactData.searchValue = "";
+        }
+      } else if (filterable) {
+        if (filterOpts.clearOnClose) {
+          reactData.searchValue = "";
+        }
+      } else {
+        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 (index_esm.VxeUI) {
+              index_esm.VxeUI.modal.message({
+                content: i18n.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$1 = index.default.findIndexOf(selectVals, (val) => val === selectValue);
+        if (index$1 === -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 (dom.getEventTargetNode(evnt, panelElem).flag) {
+            updatePlacement();
+          } else {
+            hideOptionPanel();
+          }
+        }
+      }
+    };
+    const handleGlobalMousedownEvent = (evnt) => {
+      const { visiblePanel } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (!isDisabled) {
+        const el = refElem.value;
+        const panelElem = refOptionPanel.value;
+        reactData.isActivated = dom.getEventTargetNode(evnt, el).flag || dom.getEventTargetNode(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          if (trigger !== "manual") {
+            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;
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (!isDisabled) {
+        const isTab = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.TAB);
+        const isEnter = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ENTER);
+        const isEsc = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ESCAPE);
+        const isUpArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_UP);
+        const isDwArrow = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        const isDel = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.DELETE);
+        if (isTab) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            if (trigger !== "manual") {
+              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;
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (visiblePanel) {
+        if (trigger !== "manual") {
+          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) {
+        vue.nextTick(() => {
+          const inpSearch = refInpSearch.value;
+          if (inpSearch) {
+            inpSearch.focus();
+          }
+        });
+      }
+    };
+    const focusEvent = (evnt) => {
+      const isDisabled = computeIsDisabled.value;
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          if (!trigger || trigger === "default") {
+            reactData.triggerFocusPanel = true;
+            showOptionPanel();
+            setTimeout(() => {
+              reactData.triggerFocusPanel = false;
+            }, 500);
+          }
+        }
+      }
+      dispatchEvent("focus", {}, evnt);
+    };
+    const clickEvent = (evnt) => {
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (!trigger || trigger === "default") {
+        togglePanelEvent(evnt);
+      }
+      dispatchEvent("click", { triggerButton: false, visible: reactData.visiblePanel }, evnt);
+    };
+    const blurEvent = (evnt) => {
+      reactData.isActivated = false;
+      dispatchEvent("blur", {}, evnt);
+    };
+    const suffixClickEvent = (evnt) => {
+      const popupOpts = computePopupOpts.value;
+      const { trigger } = popupOpts;
+      if (!trigger || trigger === "default" || trigger === "icon") {
+        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 } = props;
+      const { searchValue } = reactData;
+      const remoteOpts = computeRemoteOpts.value;
+      const qyMethod = remoteOpts.queryMethod || props.remoteMethod;
+      if (remote && qyMethod && remoteOpts.enabled) {
+        reactData.searchLoading = true;
+        Promise.resolve(qyMethod({ $select: $xeSelect, searchValue, value: modelValue })).then(() => vue.nextTick()).catch(() => vue.nextTick()).finally(() => {
+          reactData.searchLoading = false;
+          handleOption();
+          updateYData();
+        });
+      } else {
+        handleOption();
+        updateYData();
+      }
+    };
+    const triggerSearchEvent = index.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] || vue.reactive({
+            [getOptKey()]: searchValue,
+            [labelField]: searchValue,
+            [valueField]: searchValue
+          });
+          optAddMaps[searchValue] = addItem;
+          restList.unshift(addItem);
+        }
+      }
+      reactData.optList = restList;
+      return vue.nextTick();
+    };
+    const updateYData = () => {
+      handleData();
+      updateYSpace();
+    };
+    const computeScrollLoad = () => {
+      return vue.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, index.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 (index.default.isNumber(scrollLeft)) {
+          scrollBodyElem.scrollLeft = scrollLeft;
+        }
+        if (index.default.isNumber(scrollTop)) {
+          scrollBodyElem.scrollTop = scrollTop;
+        }
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            vue.nextTick(() => {
+              resolve();
+            });
+          }, 50);
+        });
+      }
+      return vue.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 { multiple } = props;
+      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 && index.default.eqNull(props.modelValue)) {
+          if (selectMode === "all") {
+            if (multiple) {
+              vue.nextTick(() => {
+                emitDefaultValue(datas.map((item) => item[valueField]));
+              });
+            } else {
+              log.errLog("vxe.error.notConflictProp", ["default-config.selectMode=all", "multiple=true"]);
+            }
+          } else if (selectMode === "first" || selectMode === "last") {
+            const selectItem = index.default[selectMode](datas);
+            if (selectItem) {
+              vue.nextTick(() => {
+                if (index.default.eqNull(props.modelValue)) {
+                  emitDefaultValue(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 vue.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 vue.nextTick();
+      },
+      hidePanel() {
+        if (reactData.visiblePanel) {
+          hideOptionPanel();
+        }
+        return vue.nextTick();
+      },
+      showPanel() {
+        if (!reactData.visiblePanel) {
+          showOptionPanel();
+        }
+        return vue.nextTick();
+      },
+      refreshOption() {
+        handleOption();
+        updateYData();
+        return vue.nextTick();
+      },
+      focus() {
+        const $input = refInput.value;
+        if ($input) {
+          $input.blur();
+        }
+        reactData.isActivated = true;
+        return vue.nextTick();
+      },
+      blur() {
+        const $input = refInput.value;
+        if ($input) {
+          $input.blur();
+        }
+        reactData.isActivated = false;
+        return vue.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 = utils.getFuncText(option[isOptGroup ? groupLabelField : labelField] || optionValue);
+          optVNs = optLabel;
+        }
+        return isVisible ? vue.h("div", {
+          key: useKey || optionKey ? optid : cIndex,
+          class: ["vxe-select-option", className ? index.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: dom.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 ? [
+          vue.h("span", {
+            key: 1,
+            class: "vxe-select-option--label"
+          }, optVNs),
+          isAdd ? vue.h("span", {
+            key: 2,
+            class: "vxe-select-option--add-icon"
+          }, [
+            vue.h("i", {
+              class: icon.getIcon().SELECT_ADD_OPTION
+            })
+          ]) : index_esm.renderEmptyElement()
+        ] : optVNs) : index_esm.renderEmptyElement();
+      });
+    };
+    const renderOpts = () => {
+      const { optList, searchLoading } = reactData;
+      if (searchLoading) {
+        return [
+          vue.h("div", {
+            class: "vxe-select--search-loading"
+          }, [
+            vue.h("i", {
+              class: ["vxe-select--search-icon", icon.getIcon().SELECT_LOADED]
+            }),
+            vue.h("span", {
+              class: "vxe-select--search-text"
+            }, i18n.getI18n("vxe.select.loadingText"))
+          ])
+        ];
+      }
+      if (optList.length) {
+        return renderOption(optList);
+      }
+      return [
+        vue.h("div", {
+          class: "vxe-select--empty-placeholder"
+        }, props.emptyText || i18n.getI18n("vxe.select.emptyText"))
+      ];
+    };
+    const renderVN = () => {
+      const { className, 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 popupWrapperStyle = computePopupWrapperStyle.value;
+      const popupOpts = computePopupOpts.value;
+      const defaultSlot = slots.default;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
+      const prefixSlot = slots.prefix;
+      const ppClassName = popupOpts.className || props.popupClassName;
+      if (formReadonly) {
+        return vue.h("div", {
+          ref: refElem,
+          class: ["vxe-select--readonly", className]
+        }, [
+          vue.h("div", {
+            class: "vxe-select-slots",
+            ref: "hideOption"
+          }, defaultSlot ? defaultSlot({}) : []),
+          vue.h("span", {
+            class: "vxe-select-label",
+            title: fullLabel
+          }, selectLabel)
+        ]);
+      }
+      const selectVals = computeSelectVals.value;
+      return vue.h("div", {
+        ref: refElem,
+        class: ["vxe-select", className ? index.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
+        }]
+      }, [
+        vue.h("div", {
+          class: "vxe-select-slots",
+          ref: "hideOption"
+        }, defaultSlot ? defaultSlot({}) : []),
+        vue.h(input.default, {
+          ref: refInput,
+          clearable: props.clearable,
+          placeholder: inpPlaceholder,
+          editable: false,
+          disabled: isDisabled,
+          type: "text",
+          prefixIcon: props.prefixIcon,
+          suffixIcon: loading ? icon.getIcon().SELECT_LOADED : visiblePanel ? icon.getIcon().SELECT_OPEN : icon.getIcon().SELECT_CLOSE,
+          autoFocus: false,
+          title: fullLabel,
+          modelValue: selectLabel,
+          onClear: clearEvent,
+          onClick: clickEvent,
+          onFocus: focusEvent,
+          onBlur: blurEvent,
+          onSuffixClick: suffixClickEvent
+        }, prefixSlot ? {
+          prefix: () => prefixSlot({})
+        } : {}),
+        vue.h(vue.Teleport, {
+          to: "body",
+          disabled: btnTransfer ? !initialized : true
+        }, [
+          vue.h("div", {
+            ref: refOptionPanel,
+            class: ["vxe-table--ignore-clear vxe-select--panel", ppClassName ? index.default.isFunction(ppClassName) ? ppClassName({ $select: $xeSelect }) : ppClassName : "", {
+              [`size--${vSize}`]: vSize,
+              "is--transfer": btnTransfer,
+              "ani--leave": !loading && isAniVisible,
+              "ani--enter": !loading && visiblePanel
+            }],
+            placement: reactData.panelPlacement,
+            style: reactData.panelStyle
+          }, initialized && (visiblePanel || isAniVisible) ? [
+            vue.h("div", {
+              class: "vxe-select--panel-wrapper",
+              style: popupWrapperStyle
+            }, [
+              filterable ? vue.h("div", {
+                class: "vxe-select--panel-search"
+              }, [
+                vue.h(input.default, {
+                  ref: refInpSearch,
+                  class: "vxe-select-search--input",
+                  modelValue: reactData.searchValue,
+                  type: "text",
+                  clearable: true,
+                  disabled: false,
+                  readonly: false,
+                  placeholder: i18n.getI18n("vxe.select.search"),
+                  prefixIcon: icon.getIcon().INPUT_SEARCH,
+                  "onUpdate:modelValue": modelSearchEvent,
+                  onFocus: focusSearchEvent,
+                  onChange: triggerSearchEvent,
+                  onSearch: triggerSearchEvent
+                })
+              ]) : index_esm.renderEmptyElement(),
+              showTotalButoon || showCheckedButoon && multiple || showClearButton || headerSlot ? vue.h("div", {
+                class: "vxe-select--panel-header"
+              }, headerSlot ? callSlot(headerSlot, {}) : [
+                vue.h("div", {
+                  class: "vxe-select--header-button"
+                }, [
+                  showTotalButoon ? vue.h("div", {
+                    class: "vxe-select--header-total"
+                  }, i18n.getI18n("vxe.select.total", [selectVals.length, optList.length])) : index_esm.renderEmptyElement(),
+                  vue.h("div", {
+                    class: "vxe-select--header-btns"
+                  }, [
+                    showCheckedButoon && multiple ? vue.h(button.default, {
+                      content: i18n.getI18n("vxe.select.allChecked"),
+                      mode: "text",
+                      onClick: allCheckedPanelEvent
+                    }) : index_esm.renderEmptyElement(),
+                    showClearButton ? vue.h(button.default, {
+                      content: i18n.getI18n("vxe.select.clear"),
+                      mode: "text",
+                      onClick: clearCheckedPanelEvent
+                    }) : index_esm.renderEmptyElement()
+                  ])
+                ])
+              ]) : index_esm.renderEmptyElement(),
+              vue.h("div", {
+                class: "vxe-select--panel-body"
+              }, [
+                vue.h("div", {
+                  ref: refVirtualWrapper,
+                  class: "vxe-select-option--wrapper",
+                  onScroll: scrollEvent
+                }, [
+                  vue.h("div", {
+                    class: "vxe-select--y-space",
+                    style: {
+                      height: bodyHeight ? `${bodyHeight}px` : ""
+                    }
+                  }),
+                  vue.h("div", {
+                    ref: refVirtualBody,
+                    class: "vxe-select--body",
+                    style: {
+                      transform: `translateY(${topSpaceHeight}px)`
+                    }
+                  }, renderOpts())
+                ])
+              ]),
+              footerSlot ? vue.h("div", {
+                class: "vxe-select--panel-footer"
+              }, callSlot(footerSlot, {})) : index_esm.renderEmptyElement()
+            ])
+          ] : [])
+        ])
+      ]);
+    };
+    vue.watch(() => reactData.staticOptions, (val) => {
+      loadData(val);
+    });
+    vue.watch(() => props.options, (val) => {
+      loadData(val || []);
+    });
+    vue.watch(() => props.optionGroups, (val) => {
+      loadData(val || []);
+    });
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        const { options, optionGroups } = props;
+        if (optionGroups) {
+          loadData(optionGroups);
+        } else if (options) {
+          loadData(options);
+        }
+      });
+      event.globalEvents.on($xeSelect, "mousewheel", handleGlobalMousewheelEvent);
+      event.globalEvents.on($xeSelect, "mousedown", handleGlobalMousedownEvent);
+      event.globalEvents.on($xeSelect, "keydown", handleGlobalKeydownEvent);
+      event.globalEvents.on($xeSelect, "blur", handleGlobalBlurEvent);
+      event.globalEvents.on($xeSelect, "resize", handleGlobalResizeEvent);
+    });
+    vue.onUnmounted(() => {
+      event.globalEvents.off($xeSelect, "mousewheel");
+      event.globalEvents.off($xeSelect, "mousedown");
+      event.globalEvents.off($xeSelect, "keydown");
+      event.globalEvents.off($xeSelect, "blur");
+      event.globalEvents.off($xeSelect, "resize");
+      index.default.assign(internalData, createInternalData());
+    });
+    vue.provide("$xeSelect", $xeSelect);
+    $xeSelect.renderVN = renderVN;
+    return $xeSelect;
+  },
+  render() {
+    return this.renderVN();
+  }
+});
+exports.default = VxeSelectComponent;