vxe-table/lib/select/src/select.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _size = require("../../hooks/size");
var _dom = require("../../tools/dom");
var _utils = require("../../tools/utils");
var _event = require("../../tools/event");
var _input = _interopRequireDefault(require("../../input/src/input"));
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function isOptionVisible(option) {
  return option.visible !== false;
}
function getOptUniqueId() {
  return _xeUtils.default.uniqueId('opt_');
}
var _default = (0, _vue.defineComponent)({
  name: 'VxeSelect',
  props: {
    modelValue: null,
    clearable: Boolean,
    placeholder: {
      type: String,
      default: function () {
        return _xeUtils.default.eqNull(_conf.default.select.placeholder) ? _conf.default.i18n('vxe.base.pleaseSelect') : _conf.default.select.placeholder;
      }
    },
    loading: Boolean,
    disabled: Boolean,
    multiple: Boolean,
    multiCharOverflow: {
      type: [Number, String],
      default: function () {
        return _conf.default.select.multiCharOverflow;
      }
    },
    prefixIcon: String,
    placement: String,
    options: Array,
    optionProps: Object,
    optionGroups: Array,
    optionGroupProps: Object,
    optionConfig: Object,
    className: [String, Function],
    popupClassName: [String, Function],
    max: {
      type: [String, Number],
      default: null
    },
    size: {
      type: String,
      default: function () {
        return _conf.default.select.size || _conf.default.size;
      }
    },
    filterable: Boolean,
    filterMethod: Function,
    remote: Boolean,
    remoteMethod: Function,
    emptyText: String,
    // 已废弃，被 option-config.keyField 替换
    optionId: {
      type: String,
      default: function () {
        return _conf.default.select.optionId;
      }
    },
    // 已废弃，被 option-config.useKey 替换
    optionKey: Boolean,
    transfer: {
      type: Boolean,
      default: function () {
        return _conf.default.select.transfer;
      }
    }
  },
  emits: ['update:modelValue', 'change', 'clear', 'blur', 'focus'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var $xeform = (0, _vue.inject)('$xeform', null);
    var $xeformiteminfo = (0, _vue.inject)('$xeformiteminfo', null);
    var xID = _xeUtils.default.uniqueId();
    var computeSize = (0, _size.useSize)(props);
    var reactData = (0, _vue.reactive)({
      inited: false,
      staticOptions: [],
      fullGroupList: [],
      fullOptionList: [],
      visibleGroupList: [],
      visibleOptionList: [],
      remoteValueList: [],
      panelIndex: 0,
      panelStyle: {},
      panelPlacement: null,
      currentOption: null,
      currentValue: null,
      visiblePanel: false,
      animatVisible: false,
      isActivated: false,
      searchValue: '',
      searchLoading: false
    });
    var refElem = (0, _vue.ref)();
    var refInput = (0, _vue.ref)();
    var refInpSearch = (0, _vue.ref)();
    var refOptionWrapper = (0, _vue.ref)();
    var refOptionPanel = (0, _vue.ref)();
    var refMaps = {
      refElem: refElem
    };
    var $xeselect = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData,
      getRefMaps: function () {
        return refMaps;
      }
    };
    var selectMethods = {};
    var computePropsOpts = (0, _vue.computed)(function () {
      return props.optionProps || {};
    });
    var computeGroupPropsOpts = (0, _vue.computed)(function () {
      return props.optionGroupProps || {};
    });
    var computeLabelField = (0, _vue.computed)(function () {
      var propsOpts = computePropsOpts.value;
      return propsOpts.label || 'label';
    });
    var computeValueField = (0, _vue.computed)(function () {
      var propsOpts = computePropsOpts.value;
      return propsOpts.value || 'value';
    });
    var computeGroupLabelField = (0, _vue.computed)(function () {
      var groupPropsOpts = computeGroupPropsOpts.value;
      return groupPropsOpts.label || 'label';
    });
    var computeGroupOptionsField = (0, _vue.computed)(function () {
      var groupPropsOpts = computeGroupPropsOpts.value;
      return groupPropsOpts.options || 'options';
    });
    var computeIsMaximize = (0, _vue.computed)(function () {
      var modelValue = props.modelValue,
        multiple = props.multiple,
        max = props.max;
      if (multiple && max) {
        return (modelValue ? modelValue.length : 0) >= _xeUtils.default.toNumber(max);
      }
      return false;
    });
    var computeOptionOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.select.optionConfig, props.optionConfig);
    });
    var computeIsGroup = (0, _vue.computed)(function () {
      return reactData.fullGroupList.some(function (item) {
        return item.options && item.options.length;
      });
    });
    var computeMultiMaxCharNum = (0, _vue.computed)(function () {
      return _xeUtils.default.toNumber(props.multiCharOverflow);
    });
    var callSlot = function (slotFunc, params) {
      if (slotFunc) {
        if (_xeUtils.default.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (_xeUtils.default.isFunction(slotFunc)) {
          return (0, _vn.getSlotVNs)(slotFunc(params));
        }
      }
      return [];
    };
    var findOption = function (optionValue) {
      var fullOptionList = reactData.fullOptionList,
        fullGroupList = reactData.fullGroupList;
      var isGroup = computeIsGroup.value;
      var valueField = computeValueField.value;
      if (isGroup) {
        for (var gIndex = 0; gIndex < fullGroupList.length; gIndex++) {
          var group = fullGroupList[gIndex];
          if (group.options) {
            for (var index = 0; index < group.options.length; index++) {
              var option = group.options[index];
              if (optionValue === option[valueField]) {
                return option;
              }
            }
          }
        }
      }
      return fullOptionList.find(function (item) {
        return optionValue === item[valueField];
      });
    };
    var getRemoteSelectLabel = function (value) {
      var remoteValueList = reactData.remoteValueList;
      var labelField = computeLabelField.value;
      var remoteItem = remoteValueList.find(function (item) {
        return value === item.key;
      });
      var item = remoteItem ? remoteItem.result : null;
      return _xeUtils.default.toValueString(item ? item[labelField] : value);
    };
    var getSelectLabel = function (value) {
      var labelField = computeLabelField.value;
      var item = findOption(value);
      return _xeUtils.default.toValueString(item ? item[labelField] : value);
    };
    var computeSelectLabel = (0, _vue.computed)(function () {
      var modelValue = props.modelValue,
        multiple = props.multiple,
        remote = props.remote;
      var multiMaxCharNum = computeMultiMaxCharNum.value;
      if (modelValue && multiple) {
        var vals = _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
        if (remote) {
          return vals.map(function (val) {
            return getRemoteSelectLabel(val);
          }).join(', ');
        }
        return vals.map(function (val) {
          var label = getSelectLabel(val);
          if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
            return "".concat(label.substring(0, multiMaxCharNum), "...");
          }
          return label;
        }).join(', ');
      }
      if (remote) {
        return getRemoteSelectLabel(modelValue);
      }
      return getSelectLabel(modelValue);
    });
    var getOptkey = function () {
      var optionOpts = computeOptionOpts.value;
      return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
    };
    var getOptid = function (option) {
      var optid = option[getOptkey()];
      return optid ? encodeURIComponent(optid) : '';
    };
    /**
     * 刷新选项，当选项被动态显示/隐藏时可能会用到
     */
    var refreshOption = function () {
      var filterable = props.filterable,
        filterMethod = props.filterMethod;
      var fullOptionList = reactData.fullOptionList,
        fullGroupList = reactData.fullGroupList,
        searchValue = reactData.searchValue;
      var isGroup = computeIsGroup.value;
      var groupLabelField = computeGroupLabelField.value;
      var labelField = computeLabelField.value;
      if (isGroup) {
        if (filterable && filterMethod) {
          reactData.visibleGroupList = fullGroupList.filter(function (group) {
            return isOptionVisible(group) && filterMethod({
              group: group,
              option: null,
              searchValue: searchValue
            });
          });
        } else if (filterable) {
          reactData.visibleGroupList = fullGroupList.filter(function (group) {
            return isOptionVisible(group) && (!searchValue || "".concat(group[groupLabelField]).indexOf(searchValue) > -1);
          });
        } else {
          reactData.visibleGroupList = fullGroupList.filter(isOptionVisible);
        }
      } else {
        if (filterable && filterMethod) {
          reactData.visibleOptionList = fullOptionList.filter(function (option) {
            return isOptionVisible(option) && filterMethod({
              group: null,
              option: option,
              searchValue: searchValue
            });
          });
        } else if (filterable) {
          reactData.visibleOptionList = fullOptionList.filter(function (option) {
            return isOptionVisible(option) && (!searchValue || "".concat(option[labelField]).indexOf(searchValue) > -1);
          });
        } else {
          reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
        }
      }
      return (0, _vue.nextTick)();
    };
    var cacheItemMap = function () {
      var fullOptionList = reactData.fullOptionList,
        fullGroupList = reactData.fullGroupList;
      var groupOptionsField = computeGroupOptionsField.value;
      var key = getOptkey();
      var handleOptis = function (item) {
        if (!getOptid(item)) {
          item[key] = getOptUniqueId();
        }
      };
      if (fullGroupList.length) {
        fullGroupList.forEach(function (group) {
          handleOptis(group);
          if (group[groupOptionsField]) {
            group[groupOptionsField].forEach(handleOptis);
          }
        });
      } else if (fullOptionList.length) {
        fullOptionList.forEach(handleOptis);
      }
      refreshOption();
    };
    var setCurrentOption = function (option) {
      var valueField = computeValueField.value;
      if (option) {
        reactData.currentOption = option;
        reactData.currentValue = option[valueField];
      }
    };
    var scrollToOption = function (option, isAlignBottom) {
      return (0, _vue.nextTick)().then(function () {
        if (option) {
          var optWrapperElem = refOptionWrapper.value;
          var panelElem = refOptionPanel.value;
          var optElem = panelElem.querySelector("[optid='".concat(getOptid(option), "']"));
          if (optWrapperElem && optElem) {
            var wrapperHeight = optWrapperElem.offsetHeight;
            var offsetPadding = 5;
            if (isAlignBottom) {
              if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
                optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
              }
            } else {
              if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
                optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
              }
            }
          }
        }
      });
    };
    var updateZindex = function () {
      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    };
    var updatePlacement = function () {
      return (0, _vue.nextTick)().then(function () {
        var transfer = props.transfer,
          placement = props.placement;
        var panelIndex = reactData.panelIndex;
        var el = refElem.value;
        var panelElem = refOptionPanel.value;
        if (panelElem && el) {
          var targetHeight = el.offsetHeight;
          var targetWidth = el.offsetWidth;
          var panelHeight = panelElem.offsetHeight;
          var panelWidth = panelElem.offsetWidth;
          var marginSize = 5;
          var panelStyle = {
            zIndex: panelIndex
          };
          var _a = (0, _dom.getAbsolutePos)(el),
            boundingTop = _a.boundingTop,
            boundingLeft = _a.boundingLeft,
            visibleHeight = _a.visibleHeight,
            visibleWidth = _a.visibleWidth;
          var panelPlacement = 'bottom';
          if (transfer) {
            var left = boundingLeft;
            var top_1 = boundingTop + targetHeight;
            if (placement === 'top') {
              panelPlacement = 'top';
              top_1 = boundingTop - panelHeight;
            } else if (!placement) {
              // 如果下面不够放，则向上
              if (top_1 + panelHeight + marginSize > visibleHeight) {
                panelPlacement = 'top';
                top_1 = boundingTop - panelHeight;
              }
              // 如果上面不够放，则向下（优先）
              if (top_1 < marginSize) {
                panelPlacement = 'bottom';
                top_1 = boundingTop + targetHeight;
              }
            }
            // 如果溢出右边
            if (left + panelWidth + marginSize > visibleWidth) {
              left -= left + panelWidth + marginSize - visibleWidth;
            }
            // 如果溢出左边
            if (left < marginSize) {
              left = marginSize;
            }
            Object.assign(panelStyle, {
              left: "".concat(left, "px"),
              top: "".concat(top_1, "px"),
              minWidth: "".concat(targetWidth, "px")
            });
          } else {
            if (placement === 'top') {
              panelPlacement = 'top';
              panelStyle.bottom = "".concat(targetHeight, "px");
            } else if (!placement) {
              // 如果下面不够放，则向上
              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
                // 如果上面不够放，则向下（优先）
                if (boundingTop - targetHeight - panelHeight > marginSize) {
                  panelPlacement = 'top';
                  panelStyle.bottom = "".concat(targetHeight, "px");
                }
              }
            }
          }
          reactData.panelStyle = panelStyle;
          reactData.panelPlacement = panelPlacement;
          return (0, _vue.nextTick)();
        }
      });
    };
    var hidePanelTimeout;
    var showOptionPanel = function () {
      var loading = props.loading,
        disabled = props.disabled,
        filterable = props.filterable;
      if (!loading && !disabled) {
        clearTimeout(hidePanelTimeout);
        if (!reactData.inited) {
          reactData.inited = true;
        }
        reactData.isActivated = true;
        reactData.animatVisible = true;
        if (filterable) {
          refreshOption();
        }
        setTimeout(function () {
          var modelValue = props.modelValue,
            multiple = props.multiple;
          var currOption = findOption(multiple && modelValue ? modelValue[0] : modelValue);
          reactData.visiblePanel = true;
          if (currOption) {
            setCurrentOption(currOption);
            scrollToOption(currOption);
          }
          handleFocusSearch();
        }, 10);
        updateZindex();
        updatePlacement();
      }
    };
    var hideOptionPanel = function () {
      reactData.searchValue = '';
      reactData.searchLoading = false;
      reactData.visiblePanel = false;
      hidePanelTimeout = window.setTimeout(function () {
        reactData.animatVisible = false;
      }, 350);
    };
    var changeEvent = function (evnt, selectValue) {
      if (selectValue !== props.modelValue) {
        emit('update:modelValue', selectValue);
        selectMethods.dispatchEvent('change', {
          value: selectValue
        }, evnt);
        // 自动更新校验状态
        if ($xeform && $xeformiteminfo) {
          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, selectValue);
        }
      }
    };
    var clearValueEvent = function (evnt, selectValue) {
      reactData.remoteValueList = [];
      changeEvent(evnt, selectValue);
      selectMethods.dispatchEvent('clear', {
        value: selectValue
      }, evnt);
    };
    var clearEvent = function (params, evnt) {
      clearValueEvent(evnt, null);
      hideOptionPanel();
    };
    var changeOptionEvent = function (evnt, selectValue, option) {
      var modelValue = props.modelValue,
        multiple = props.multiple;
      var remoteValueList = reactData.remoteValueList;
      if (multiple) {
        var multipleValue = void 0;
        if (modelValue) {
          if (modelValue.indexOf(selectValue) === -1) {
            multipleValue = modelValue.concat([selectValue]);
          } else {
            multipleValue = modelValue.filter(function (val) {
              return val !== selectValue;
            });
          }
        } else {
          multipleValue = [selectValue];
        }
        var remoteItem = remoteValueList.find(function (item) {
          return item.key === selectValue;
        });
        if (remoteItem) {
          remoteItem.result = option;
        } else {
          remoteValueList.push({
            key: selectValue,
            result: option
          });
        }
        changeEvent(evnt, multipleValue);
      } else {
        reactData.remoteValueList = [{
          key: selectValue,
          result: option
        }];
        changeEvent(evnt, selectValue);
        hideOptionPanel();
      }
    };
    var handleGlobalMousewheelEvent = function (evnt) {
      var disabled = props.disabled;
      var visiblePanel = reactData.visiblePanel;
      if (!disabled) {
        if (visiblePanel) {
          var panelElem = refOptionPanel.value;
          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
            updatePlacement();
          } else {
            hideOptionPanel();
          }
        }
      }
    };
    var handleGlobalMousedownEvent = function (evnt) {
      var disabled = props.disabled;
      var visiblePanel = reactData.visiblePanel;
      if (!disabled) {
        var el = refElem.value;
        var panelElem = refOptionPanel.value;
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          hideOptionPanel();
        }
      }
    };
    var findOffsetOption = function (optionValue, isUpArrow) {
      var visibleOptionList = reactData.visibleOptionList,
        visibleGroupList = reactData.visibleGroupList;
      var isGroup = computeIsGroup.value;
      var valueField = computeValueField.value;
      var groupOptionsField = computeGroupOptionsField.value;
      var firstOption;
      var prevOption;
      var nextOption;
      var currOption;
      if (isGroup) {
        for (var gIndex = 0; gIndex < visibleGroupList.length; gIndex++) {
          var group = visibleGroupList[gIndex];
          var groupOptionList = group[groupOptionsField];
          var isGroupDisabled = group.disabled;
          if (groupOptionList) {
            for (var index = 0; index < groupOptionList.length; index++) {
              var option = groupOptionList[index];
              var isVisible = isOptionVisible(option);
              var isDisabled = isGroupDisabled || option.disabled;
              if (!firstOption && !isDisabled) {
                firstOption = option;
              }
              if (currOption) {
                if (isVisible && !isDisabled) {
                  nextOption = option;
                  if (!isUpArrow) {
                    return {
                      offsetOption: nextOption
                    };
                  }
                }
              }
              if (optionValue === option[valueField]) {
                currOption = option;
                if (isUpArrow) {
                  return {
                    offsetOption: prevOption
                  };
                }
              } else {
                if (isVisible && !isDisabled) {
                  prevOption = option;
                }
              }
            }
          }
        }
      } else {
        for (var index = 0; index < visibleOptionList.length; index++) {
          var option = visibleOptionList[index];
          var isDisabled = option.disabled;
          if (!firstOption && !isDisabled) {
            firstOption = option;
          }
          if (currOption) {
            if (!isDisabled) {
              nextOption = option;
              if (!isUpArrow) {
                return {
                  offsetOption: nextOption
                };
              }
            }
          }
          if (optionValue === option[valueField]) {
            currOption = option;
            if (isUpArrow) {
              return {
                offsetOption: prevOption
              };
            }
          } else {
            if (!isDisabled) {
              prevOption = option;
            }
          }
        }
      }
      return {
        firstOption: firstOption
      };
    };
    var handleGlobalKeydownEvent = function (evnt) {
      var clearable = props.clearable,
        disabled = props.disabled;
      var visiblePanel = reactData.visiblePanel,
        currentValue = reactData.currentValue,
        currentOption = reactData.currentOption;
      if (!disabled) {
        var isTab = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.TAB);
        var isEnter = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.ENTER);
        var isEsc = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.ESCAPE);
        var isUpArrow = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.ARROW_UP);
        var isDwArrow = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.ARROW_DOWN);
        var isDel = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.DELETE);
        var isSpacebar = (0, _event.hasEventKey)(evnt, _event.EVENT_KEYS.SPACEBAR);
        if (isTab) {
          reactData.isActivated = false;
        }
        if (visiblePanel) {
          if (isEsc || isTab) {
            hideOptionPanel();
          } else if (isEnter) {
            evnt.preventDefault();
            evnt.stopPropagation();
            changeOptionEvent(evnt, currentValue, currentOption);
          } else if (isUpArrow || isDwArrow) {
            evnt.preventDefault();
            var _a = findOffsetOption(currentValue, isUpArrow),
              firstOption = _a.firstOption,
              offsetOption = _a.offsetOption;
            if (!offsetOption && !findOption(currentValue)) {
              offsetOption = firstOption;
            }
            setCurrentOption(offsetOption);
            scrollToOption(offsetOption, isDwArrow);
          } else if (isSpacebar) {
            evnt.preventDefault();
          }
        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
          evnt.preventDefault();
          showOptionPanel();
        }
        if (reactData.isActivated) {
          if (isDel && clearable) {
            clearValueEvent(evnt, null);
          }
        }
      }
    };
    var handleGlobalBlurEvent = function () {
      hideOptionPanel();
    };
    var handleFocusSearch = function () {
      if (props.filterable) {
        (0, _vue.nextTick)(function () {
          var inpSearch = refInpSearch.value;
          if (inpSearch) {
            inpSearch.focus();
          }
        });
      }
    };
    var focusEvent = function (evnt) {
      if (!props.disabled) {
        reactData.isActivated = true;
      }
      selectMethods.dispatchEvent('focus', {}, evnt);
    };
    var blurEvent = function (evnt) {
      reactData.isActivated = false;
      selectMethods.dispatchEvent('blur', {}, evnt);
    };
    var modelSearchEvent = function (value) {
      reactData.searchValue = value;
    };
    var focusSearchEvent = function () {
      reactData.isActivated = true;
    };
    var keydownSearchEvent = function (params) {
      var $event = params.$event;
      var isEnter = (0, _event.hasEventKey)($event, _event.EVENT_KEYS.ENTER);
      if (isEnter) {
        $event.preventDefault();
        $event.stopPropagation();
      }
    };
    var triggerSearchEvent = _xeUtils.default.debounce(function () {
      var remote = props.remote,
        remoteMethod = props.remoteMethod;
      var searchValue = reactData.searchValue;
      if (remote && remoteMethod) {
        reactData.searchLoading = true;
        Promise.resolve(remoteMethod({
          searchValue: searchValue
        })).then(function () {
          return (0, _vue.nextTick)();
        }).catch(function () {
          return (0, _vue.nextTick)();
        }).finally(function () {
          reactData.searchLoading = false;
          refreshOption();
        });
      } else {
        refreshOption();
      }
    }, 350, {
      trailing: true
    });
    var togglePanelEvent = function (params) {
      var $event = params.$event;
      $event.preventDefault();
      if (reactData.visiblePanel) {
        hideOptionPanel();
      } else {
        showOptionPanel();
      }
    };
    var checkOptionDisabled = function (isSelected, option, group) {
      if (option.disabled) {
        return true;
      }
      if (group && group.disabled) {
        return true;
      }
      var isMaximize = computeIsMaximize.value;
      if (isMaximize && !isSelected) {
        return true;
      }
      return false;
    };
    var renderOption = function (list, group) {
      var optionKey = props.optionKey,
        modelValue = props.modelValue,
        multiple = props.multiple;
      var currentValue = reactData.currentValue;
      var optionOpts = computeOptionOpts.value;
      var labelField = computeLabelField.value;
      var valueField = computeValueField.value;
      var isGroup = computeIsGroup.value;
      var useKey = optionOpts.useKey;
      return list.map(function (option, cIndex) {
        var slots = option.slots,
          className = option.className;
        var optionValue = option[valueField];
        var isSelected = multiple ? modelValue && modelValue.indexOf(optionValue) > -1 : modelValue === optionValue;
        var isVisible = !isGroup || isOptionVisible(option);
        var isDisabled = checkOptionDisabled(isSelected, option, group);
        var optid = getOptid(option);
        var defaultSlot = slots ? slots.default : null;
        return isVisible ? (0, _vue.h)('div', {
          key: useKey || optionKey ? optid : cIndex,
          class: ['vxe-select-option', className ? _xeUtils.default.isFunction(className) ? className({
            option: option,
            $select: $xeselect
          }) : className : '', {
            'is--disabled': isDisabled,
            'is--selected': isSelected,
            'is--hover': currentValue === optionValue
          }],
          // attrs
          optid: optid,
          // event
          onMousedown: function (evnt) {
            var isLeftBtn = evnt.button === 0;
            if (isLeftBtn) {
              evnt.stopPropagation();
            }
          },
          onClick: function (evnt) {
            if (!isDisabled) {
              changeOptionEvent(evnt, optionValue, option);
            }
          },
          onMouseenter: function () {
            if (!isDisabled) {
              setCurrentOption(option);
            }
          }
        }, defaultSlot ? callSlot(defaultSlot, {
          option: option,
          $select: $xeselect
        }) : (0, _utils.formatText)((0, _utils.getFuncText)(option[labelField]))) : null;
      });
    };
    var renderOptgroup = function () {
      var optionKey = props.optionKey;
      var visibleGroupList = reactData.visibleGroupList;
      var optionOpts = computeOptionOpts.value;
      var groupLabelField = computeGroupLabelField.value;
      var groupOptionsField = computeGroupOptionsField.value;
      var useKey = optionOpts.useKey;
      return visibleGroupList.map(function (group, gIndex) {
        var slots = group.slots,
          className = group.className;
        var optid = getOptid(group);
        var isGroupDisabled = group.disabled;
        var defaultSlot = slots ? slots.default : null;
        return (0, _vue.h)('div', {
          key: useKey || optionKey ? optid : gIndex,
          class: ['vxe-optgroup', className ? _xeUtils.default.isFunction(className) ? className({
            option: group,
            $select: $xeselect
          }) : className : '', {
            'is--disabled': isGroupDisabled
          }],
          // attrs
          optid: optid
        }, [(0, _vue.h)('div', {
          class: 'vxe-optgroup--title'
        }, defaultSlot ? callSlot(defaultSlot, {
          option: group,
          $select: $xeselect
        }) : (0, _utils.getFuncText)(group[groupLabelField])), (0, _vue.h)('div', {
          class: 'vxe-optgroup--wrapper'
        }, renderOption(group[groupOptionsField] || [], group))]);
      });
    };
    var renderOpts = function () {
      var visibleGroupList = reactData.visibleGroupList,
        visibleOptionList = reactData.visibleOptionList,
        searchLoading = reactData.searchLoading;
      var isGroup = computeIsGroup.value;
      if (searchLoading) {
        return [(0, _vue.h)('div', {
          class: 'vxe-select--search-loading'
        }, [(0, _vue.h)('i', {
          class: ['vxe-select--search-icon', _conf.default.icon.SELECT_LOADED]
        }), (0, _vue.h)('span', {
          class: 'vxe-select--search-text'
        }, _conf.default.i18n('vxe.select.loadingText'))])];
      }
      if (isGroup) {
        if (visibleGroupList.length) {
          return renderOptgroup();
        }
      } else {
        if (visibleOptionList.length) {
          return renderOption(visibleOptionList);
        }
      }
      return [(0, _vue.h)('div', {
        class: 'vxe-select--empty-placeholder'
      }, props.emptyText || _conf.default.i18n('vxe.select.emptyText'))];
    };
    selectMethods = {
      dispatchEvent: function (type, params, evnt) {
        emit(type, Object.assign({
          $select: $xeselect,
          $event: evnt
        }, params));
      },
      isPanelVisible: function () {
        return reactData.visiblePanel;
      },
      togglePanel: function () {
        if (reactData.visiblePanel) {
          hideOptionPanel();
        } else {
          showOptionPanel();
        }
        return (0, _vue.nextTick)();
      },
      hidePanel: function () {
        if (reactData.visiblePanel) {
          hideOptionPanel();
        }
        return (0, _vue.nextTick)();
      },
      showPanel: function () {
        if (!reactData.visiblePanel) {
          showOptionPanel();
        }
        return (0, _vue.nextTick)();
      },
      refreshOption: refreshOption,
      focus: function () {
        var $input = refInput.value;
        reactData.isActivated = true;
        $input.blur();
        return (0, _vue.nextTick)();
      },
      blur: function () {
        var $input = refInput.value;
        $input.blur();
        reactData.isActivated = false;
        return (0, _vue.nextTick)();
      }
    };
    Object.assign($xeselect, selectMethods);
    (0, _vue.watch)(function () {
      return reactData.staticOptions;
    }, function (value) {
      if (value.some(function (item) {
        return item.options && item.options.length;
      })) {
        reactData.fullOptionList = [];
        reactData.fullGroupList = value;
      } else {
        reactData.fullGroupList = [];
        reactData.fullOptionList = value || [];
      }
      cacheItemMap();
    });
    (0, _vue.watch)(function () {
      return props.options;
    }, function (value) {
      reactData.fullGroupList = [];
      reactData.fullOptionList = value || [];
      cacheItemMap();
    });
    (0, _vue.watch)(function () {
      return props.optionGroups;
    }, function (value) {
      reactData.fullOptionList = [];
      reactData.fullGroupList = value || [];
      cacheItemMap();
    });
    (0, _vue.onMounted)(function () {
      (0, _vue.nextTick)(function () {
        var options = props.options,
          optionGroups = props.optionGroups;
        if (optionGroups) {
          reactData.fullGroupList = optionGroups;
        } else if (options) {
          reactData.fullOptionList = options;
        }
        cacheItemMap();
      });
      _event.GlobalEvent.on($xeselect, 'mousewheel', handleGlobalMousewheelEvent);
      _event.GlobalEvent.on($xeselect, 'mousedown', handleGlobalMousedownEvent);
      _event.GlobalEvent.on($xeselect, 'keydown', handleGlobalKeydownEvent);
      _event.GlobalEvent.on($xeselect, 'blur', handleGlobalBlurEvent);
    });
    (0, _vue.onUnmounted)(function () {
      _event.GlobalEvent.off($xeselect, 'mousewheel');
      _event.GlobalEvent.off($xeselect, 'mousedown');
      _event.GlobalEvent.off($xeselect, 'keydown');
      _event.GlobalEvent.off($xeselect, 'blur');
    });
    var renderVN = function () {
      var _a, _b;
      var className = props.className,
        popupClassName = props.popupClassName,
        transfer = props.transfer,
        disabled = props.disabled,
        loading = props.loading,
        filterable = props.filterable;
      var inited = reactData.inited,
        isActivated = reactData.isActivated,
        visiblePanel = reactData.visiblePanel;
      var vSize = computeSize.value;
      var selectLabel = computeSelectLabel.value;
      var prefixSlot = slots.prefix;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-select', className ? _xeUtils.default.isFunction(className) ? className({
          $select: $xeselect
        }) : className : '', (_a = {}, _a["size--".concat(vSize)] = vSize, _a['is--visivle'] = visiblePanel, _a['is--disabled'] = disabled, _a['is--filter'] = filterable, _a['is--loading'] = loading, _a['is--active'] = isActivated, _a)]
      }, [(0, _vue.h)('div', {
        class: 'vxe-select-slots',
        ref: 'hideOption'
      }, slots.default ? slots.default({}) : []), (0, _vue.h)(_input.default, {
        ref: refInput,
        clearable: props.clearable,
        placeholder: props.placeholder,
        readonly: true,
        disabled: disabled,
        type: 'text',
        prefixIcon: props.prefixIcon,
        suffixIcon: loading ? _conf.default.icon.SELECT_LOADED : visiblePanel ? _conf.default.icon.SELECT_OPEN : _conf.default.icon.SELECT_CLOSE,
        modelValue: selectLabel,
        onClear: clearEvent,
        onClick: togglePanelEvent,
        onFocus: focusEvent,
        onBlur: blurEvent,
        onSuffixClick: togglePanelEvent
      }, prefixSlot ? {
        prefix: function () {
          return prefixSlot({});
        }
      } : {}), (0, _vue.h)(_vue.Teleport, {
        to: 'body',
        disabled: transfer ? !inited : true
      }, [(0, _vue.h)('div', {
        ref: refOptionPanel,
        class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
          $select: $xeselect
        }) : popupClassName : '', (_b = {}, _b["size--".concat(vSize)] = vSize, _b['is--transfer'] = transfer, _b['animat--leave'] = !loading && reactData.animatVisible, _b['animat--enter'] = !loading && visiblePanel, _b)],
        placement: reactData.panelPlacement,
        style: reactData.panelStyle
      }, inited ? [filterable ? (0, _vue.h)('div', {
        class: 'vxe-select-filter--wrapper'
      }, [(0, _vue.h)(_input.default, {
        ref: refInpSearch,
        class: 'vxe-select-filter--input',
        modelValue: reactData.searchValue,
        clearable: true,
        placeholder: _conf.default.i18n('vxe.select.search'),
        prefixIcon: _conf.default.icon.INPUT_SEARCH,
        'onUpdate:modelValue': modelSearchEvent,
        onFocus: focusSearchEvent,
        onKeydown: keydownSearchEvent,
        onChange: triggerSearchEvent,
        onSearch: triggerSearchEvent
      })]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
        ref: refOptionWrapper,
        class: 'vxe-select-option--wrapper'
      }, renderOpts())] : [])])]);
    };
    $xeselect.renderVN = renderVN;
    (0, _vue.provide)('$xeselect', $xeselect);
    return $xeselect;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;