"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
var _utils = require("../../ui/src/utils");
var _vn = require("../../ui/src/vn");
var _input = _interopRequireDefault(require("../../input/src/input"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function createReactData() {
  return {
    initialized: false,
    selectIcon: '',
    panelIndex: 0,
    panelStyle: {},
    panelPlacement: null,
    visiblePanel: false,
    isAniVisible: false,
    isActivated: false,
    searchValue: '',
    iconList: []
  };
}
function createInternalData() {
  return {
    fullList: []
    // hpTimeout: undefined
  };
}
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeIconPicker',
  mixins: [_ui.globalMixins.sizeMixin],
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    value: String,
    placeholder: String,
    clearable: Boolean,
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().iconPicker.size || (0, _ui.getConfig)().size;
      }
    },
    className: [String, Function],
    /**
     * 已废弃，请使用 popupConfig.className
     * @deprecated
     */
    popupClassName: [String, Function],
    showIconTitle: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().iconPicker.showIconTitle;
      }
    },
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    filterable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().iconPicker.filterable;
      }
    },
    filterConfig: Object,
    icons: Array,
    placement: String,
    popupConfig: Object,
    transfer: {
      type: Boolean,
      default: null
    }
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeDrawer: {
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    },
    formItemInfo: {
      from: 'xeFormItemInfo',
      default: null
    }
  },
  provide: function provide() {
    var $xeIconPicker = this;
    return {
      $xeIconPicker: $xeIconPicker
    };
  },
  data: function data() {
    var reactData = createReactData();
    return Object.assign(Object.assign({}, {}), {
      xID: _xeUtils.default.uniqueId(),
      reactData: reactData
    });
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeFormReadonly: function computeFormReadonly() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var $xeForm = $xeIconPicker.$xeForm;
      var readonly = props.readonly;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.readonly;
        }
        return false;
      }
      return readonly;
    },
    computeIsDisabled: function computeIsDisabled() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var $xeForm = $xeIconPicker.$xeForm;
      var disabled = props.disabled;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.disabled;
        }
        return false;
      }
      return disabled;
    },
    computeBtnTransfer: function computeBtnTransfer() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var $xeTable = $xeIconPicker.$xeTable;
      var $xeModal = $xeIconPicker.$xeModal;
      var $xeDrawer = $xeIconPicker.$xeDrawer;
      var $xeForm = $xeIconPicker.$xeForm;
      var transfer = props.transfer;
      var popupOpts = $xeIconPicker.computePopupOpts;
      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().iconPicker.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computeInpPlaceholder: function computeInpPlaceholder() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var placeholder = props.placeholder;
      if (placeholder) {
        return (0, _utils.getFuncText)(placeholder);
      }
      var globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
      if (globalPlaceholder) {
        return (0, _utils.getFuncText)(globalPlaceholder);
      }
      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
    },
    computeWrapperStyle: function computeWrapperStyle() {
      var $xeIconPicker = this;
      var popupOpts = $xeIconPicker.computePopupOpts;
      var chunkSize = popupOpts.chunkSize,
        height = popupOpts.height,
        chunkWidth = popupOpts.chunkWidth,
        maxHeight = popupOpts.maxHeight;
      var stys = {
        '--vxe-ui-icon-picker-item-width': chunkWidth ? (0, _dom.toCssUnit)(chunkWidth) : "".concat(100 / (chunkSize || 4), "%")
      };
      if (height) {
        stys['--vxe-ui-icon-picker-panel-height'] = (0, _dom.toCssUnit)(height);
      }
      if (maxHeight) {
        stys['--vxe-ui-icon-picker-panel-max-height'] = (0, _dom.toCssUnit)(maxHeight);
      }
      return stys;
    },
    computeIconList: function computeIconList() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var icons = props.icons;
      if (!icons || !icons.length) {
        icons = (0, _ui.getConfig)().iconPicker.icons || [];
      }
      return icons.map(function (item) {
        if (_xeUtils.default.isString(item)) {
          return {
            title: item,
            icon: "vxe-icon-".concat("".concat(item || '').replace(/^vxe-icon-/, ''))
          };
        }
        return {
          title: "".concat(item.title || ''),
          icon: item.icon || '',
          iconRender: item.iconRender
        };
      });
    },
    computeFilterOpts: function computeFilterOpts() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      return Object.assign({}, (0, _ui.getConfig)().iconPicker.filterConfig, props.filterConfig);
    },
    computePopupOpts: function computePopupOpts() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      return Object.assign({}, (0, _ui.getConfig)().iconPicker.popupConfig, props.popupConfig);
    },
    computeIconGroupList: function computeIconGroupList() {
      var $xeIconPicker = this;
      var iconList = $xeIconPicker.computeIconList;
      return _xeUtils.default.chunk(iconList, 4);
    },
    computeSelectIconItem: function computeSelectIconItem() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var selectIcon = reactData.selectIcon;
      var iconList = $xeIconPicker.computeIconList;
      return selectIcon ? iconList.find(function (item) {
        return item.icon === selectIcon;
      }) : null;
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeIconPicker = this;
      $xeIconPicker.$emit(type, (0, _ui.createEvent)(evnt, {
        $iconPicker: $xeIconPicker
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeIconPicker = this;
      var _events = $xeIconPicker._events;
      if (_events && _events.modelValue) {
        $xeIconPicker.$emit('modelValue', value);
      } else {
        $xeIconPicker.$emit('model-value', value);
      }
    },
    isPanelVisible: function isPanelVisible() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      return reactData.visiblePanel;
    },
    togglePanel: function togglePanel() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      if (reactData.visiblePanel) {
        $xeIconPicker.hideOptionPanel();
      } else {
        $xeIconPicker.showOptionPanel();
      }
      return $xeIconPicker.$nextTick();
    },
    hidePanel: function hidePanel() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      if (reactData.visiblePanel) {
        $xeIconPicker.hideOptionPanel();
      }
      return $xeIconPicker.$nextTick();
    },
    showPanel: function showPanel() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      if (!reactData.visiblePanel) {
        $xeIconPicker.showOptionPanel();
      }
      return $xeIconPicker.$nextTick();
    },
    focus: function focus() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var $input = $xeIconPicker.$refs.refInput;
      reactData.isActivated = true;
      $input.blur();
      return $xeIconPicker.$nextTick();
    },
    blur: function blur() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var $input = $xeIconPicker.$refs.refInput;
      $input.blur();
      reactData.isActivated = false;
      return $xeIconPicker.$nextTick();
    },
    updateZindex: function updateZindex() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    },
    updatePlacement: function updatePlacement() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var placement = props.placement;
      var panelIndex = reactData.panelIndex;
      var targetElem = $xeIconPicker.$refs.refElem;
      var panelElem = $xeIconPicker.$refs.refOptionPanel;
      var btnTransfer = $xeIconPicker.computeBtnTransfer;
      var popupOpts = $xeIconPicker.computePopupOpts;
      var width = popupOpts.width,
        transfer = popupOpts.transfer;
      var handleStyle = function handleStyle() {
        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        var panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        if (width) {
          Object.assign(panelStyle, {
            width: (0, _dom.toCssUnit)(width),
            minWidth: transfer ? undefined : (0, _dom.toCssUnit)(width)
          });
        }
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return $xeIconPicker.$nextTick().then(handleStyle);
    },
    showOptionPanel: function showOptionPanel() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var internalData = $xeIconPicker.internalData;
      var hpTimeout = internalData.hpTimeout;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      if (!isDisabled) {
        if (hpTimeout) {
          clearTimeout(hpTimeout);
          internalData.hpTimeout = undefined;
        }
        var btnTransfer = $xeIconPicker.computeBtnTransfer;
        var panelElem = $xeIconPicker.$refs.refOptionPanel;
        if (!reactData.initialized) {
          reactData.initialized = true;
          if (btnTransfer) {
            if (panelElem) {
              document.body.appendChild(panelElem);
            }
          }
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(function () {
          reactData.visiblePanel = true;
          $xeIconPicker.handleFocusSearch();
          $xeIconPicker.updatePlacement();
        }, 10);
        $xeIconPicker.updateZindex();
        $xeIconPicker.updatePlacement();
      }
    },
    hideOptionPanel: function hideOptionPanel() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var internalData = $xeIconPicker.internalData;
      reactData.visiblePanel = false;
      internalData.hpTimeout = setTimeout(function () {
        reactData.isAniVisible = false;
      }, 350);
    },
    handleFocusSearch: function handleFocusSearch() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      if (props.filterable) {
        $xeIconPicker.$nextTick(function () {
          var inpSearch = $xeIconPicker.$refs.refInpSearch;
          if (inpSearch) {
            inpSearch.focus();
          }
        });
      }
    },
    handleData: function handleData() {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var modelValue = props.value;
      var searchValue = reactData.searchValue;
      var filterOpts = $xeIconPicker.computeFilterOpts;
      var filterMethod = filterOpts.filterMethod;
      var iconList = $xeIconPicker.computeIconList;
      var visibleList = iconList;
      if (searchValue) {
        var searchTxt = "".concat(searchValue).toLowerCase();
        visibleList = iconList.filter(function (item) {
          if (filterMethod) {
            return filterMethod({
              option: item,
              value: modelValue,
              searchValue: searchTxt,
              $iconPicker: $xeIconPicker
            });
          }
          return item.title && "".concat(item.title).toLowerCase().indexOf(searchTxt) > -1 || item.icon && "".concat(item.icon).indexOf(searchTxt) > -1;
        });
      }
      reactData.iconList = visibleList;
    },
    changeEvent: function changeEvent(evnt, selectValue) {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var $xeForm = $xeIconPicker.$xeForm;
      var formItemInfo = $xeIconPicker.formItemInfo;
      reactData.selectIcon = selectValue;
      if (selectValue !== props.value) {
        $xeIconPicker.emitModel(selectValue);
        $xeIconPicker.dispatchEvent('change', {
          value: selectValue
        }, evnt);
        // 自动更新校验状态
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
        }
      }
    },
    focusEvent: function focusEvent() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      if (!isDisabled) {
        if (!reactData.visiblePanel) {
          $xeIconPicker.showOptionPanel();
        }
      }
    },
    blurEvent: function blurEvent() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      reactData.isActivated = false;
    },
    clearValueEvent: function clearValueEvent(evnt, selectValue) {
      var $xeIconPicker = this;
      $xeIconPicker.changeEvent(evnt, selectValue);
      $xeIconPicker.dispatchEvent('clear', {
        value: selectValue
      }, evnt);
    },
    clearEvent: function clearEvent(params, evnt) {
      var $xeIconPicker = this;
      $xeIconPicker.clearValueEvent(evnt, null);
      $xeIconPicker.hideOptionPanel();
    },
    togglePanelEvent: function togglePanelEvent(evnt) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      evnt.preventDefault();
      if (reactData.visiblePanel) {
        $xeIconPicker.hideOptionPanel();
      } else {
        $xeIconPicker.showOptionPanel();
      }
    },
    clickEvent: function clickEvent(evnt) {
      var $xeIconPicker = this;
      $xeIconPicker.togglePanelEvent(evnt);
      $xeIconPicker.dispatchEvent('click', {}, evnt);
    },
    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      if (!isDisabled) {
        if (visiblePanel) {
          var panelElem = $xeIconPicker.$refs.refOptionPanel;
          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
            $xeIconPicker.updatePlacement();
          } else {
            $xeIconPicker.hideOptionPanel();
          }
        }
      }
    },
    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      if (!isDisabled) {
        var el = $xeIconPicker.$refs.refElem;
        var panelElem = $xeIconPicker.$refs.refOptionPanel;
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          $xeIconPicker.hideOptionPanel();
        }
      }
    },
    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var clearable = props.clearable;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      if (!isDisabled) {
        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
        var isSpacebar = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.SPACEBAR);
        if (isTab) {
          reactData.isActivated = false;
        }
        if (visiblePanel) {
          if (isEsc || isTab) {
            $xeIconPicker.hideOptionPanel();
          } else if (isEnter) {
            evnt.preventDefault();
            evnt.stopPropagation();
            // changeOptionEvent(evnt, currentValue, currentOption)
          } else if (isUpArrow || isDwArrow) {
            evnt.preventDefault();
            // let { firstOption, offsetOption } = findOffsetOption(currentValue, isUpArrow)
            // if (!offsetOption && !findVisibleOption(currentValue)) {
            //   offsetOption = firstOption
            // }
            // setCurrentOption(offsetOption)
            // scrollToOption(offsetOption, isDwArrow)
          } else if (isSpacebar) {
            evnt.preventDefault();
          }
        } else if ((isUpArrow || isDwArrow || isEnter || isSpacebar) && reactData.isActivated) {
          evnt.preventDefault();
          $xeIconPicker.showOptionPanel();
        }
        if (reactData.isActivated) {
          if (isDel && clearable) {
            $xeIconPicker.clearValueEvent(evnt, null);
          }
        }
      }
    },
    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      if (visiblePanel) {
        $xeIconPicker.hideOptionPanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        var $input = $xeIconPicker.$refs.refInput;
        if ($input) {
          $input.blur();
        }
      }
    },
    handleClickIconEvent: function handleClickIconEvent(evnt, item) {
      var $xeIconPicker = this;
      var value = item.icon;
      $xeIconPicker.changeEvent(evnt, value);
      $xeIconPicker.hideOptionPanel();
    },
    modelSearchEvent: function modelSearchEvent(value) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      reactData.searchValue = value;
    },
    focusSearchEvent: function focusSearchEvent() {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      reactData.isActivated = true;
    },
    handleSearchEvent: function handleSearchEvent() {
      var $xeIconPicker = this;
      $xeIconPicker.handleData();
    },
    triggerSearchEvent: _xeUtils.default.debounce(function () {
      var $xeIconPicker = this;
      $xeIconPicker.handleSearchEvent();
    }, 350, {
      trailing: true
    }),
    //
    // Render
    //
    renderIconWrapper: function renderIconWrapper(h) {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var showIconTitle = props.showIconTitle;
      var selectIcon = reactData.selectIcon,
        iconList = reactData.iconList;
      if (!iconList.length) {
        return h('div', {
          class: 'vxe-ico-picker--empty-placeholder'
        }, (0, _ui.getI18n)('vxe.iconPicker.emptyText'));
      }
      return h('div', {
        class: 'vxe-ico-picker--list-wrapper'
      }, [h('div', {
        class: 'vxe-ico-picker--list'
      }, iconList.map(function (item) {
        var iconRender = item.iconRender;
        var compConf = iconRender ? _ui.renderer.get(iconRender.name) : null;
        var iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
        return h('div', {
          class: ['vxe-ico-picker--item', {
            'is--selected': selectIcon === item.icon
          }]
        }, [h('div', {
          class: 'vxe-ico-picker--item-inner',
          on: {
            click: function click(evnt) {
              var isDisabled = $xeIconPicker.computeIsDisabled;
              if (!isDisabled) {
                $xeIconPicker.handleClickIconEvent(evnt, item);
              }
            }
          }
        }, [h('div', {
          class: 'vxe-ico-picker--item-icon'
        }, iconMethod && iconRender ? (0, _vn.getSlotVNs)(iconMethod(h, iconRender, {
          $iconPicker: $xeIconPicker,
          option: item
        })) : [h('i', {
          class: item.icon || ''
        })]), showIconTitle ? h('div', {
          class: 'vxe-ico-picker--item-title'
        }, "".concat(item.title || '')) : (0, _ui.renderEmptyElement)($xeIconPicker)])]);
      }))]);
    },
    renderIconView: function renderIconView(h) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      var selectIcon = reactData.selectIcon;
      var selectIconItem = $xeIconPicker.computeSelectIconItem;
      if (selectIconItem) {
        var iconRender = selectIconItem.iconRender;
        var compConf = iconRender ? _ui.renderer.get(iconRender.name) : null;
        var oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
        if (oIconMethod && iconRender) {
          return h('div', {
            key: 'inc',
            class: 'vxe-ico-picker--icon'
          }, (0, _vn.getSlotVNs)(oIconMethod.call($xeIconPicker, h, iconRender, {
            $iconPicker: $xeIconPicker,
            option: selectIconItem
          })));
        }
      }
      return h('div', {
        key: 'ind',
        class: 'vxe-ico-picker--icon'
      }, [h('i', {
        class: selectIcon
      })]);
    },
    renderVN: function renderVN(h) {
      var $xeIconPicker = this;
      var props = $xeIconPicker;
      var reactData = $xeIconPicker.reactData;
      var className = props.className,
        clearable = props.clearable,
        filterable = props.filterable;
      var initialized = reactData.initialized,
        isActivated = reactData.isActivated,
        isAniVisible = reactData.isAniVisible,
        visiblePanel = reactData.visiblePanel,
        selectIcon = reactData.selectIcon;
      var vSize = $xeIconPicker.computeSize;
      var isDisabled = $xeIconPicker.computeIsDisabled;
      var btnTransfer = $xeIconPicker.computeBtnTransfer;
      var formReadonly = $xeIconPicker.computeFormReadonly;
      var inpPlaceholder = $xeIconPicker.computeInpPlaceholder;
      var wrapperStyle = $xeIconPicker.computeWrapperStyle;
      var popupOpts = $xeIconPicker.computePopupOpts;
      var ppClassName = popupOpts.className || props.popupClassName;
      if (formReadonly) {
        return h('div', {
          ref: 'refElem',
          class: ['vxe-ico-picker--readonly', className]
        }, [h('i', {
          class: selectIcon
        })]);
      }
      return h('div', {
        ref: 'refElem',
        class: ['vxe-ico-picker', className ? _xeUtils.default.isFunction(className) ? className({
          $iconPicker: $xeIconPicker
        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'show--clear', clearable && !isDisabled && !!selectIcon), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated)]
      }, [h('div', {
        class: 'vxe-ico-picker--inner',
        on: {
          click: $xeIconPicker.clickEvent
        }
      }, [h('input', {
        ref: 'refInput',
        class: 'vxe-ico-picker--input',
        on: {
          focus: $xeIconPicker.focusEvent,
          blur: $xeIconPicker.blurEvent
        }
      }), selectIcon ? $xeIconPicker.renderIconView(h) : h('div', {
        class: 'vxe-ico-picker--placeholder'
      }, inpPlaceholder), h('div', {
        class: 'vxe-ico-picker--suffix'
      }, [h('div', {
        class: 'vxe-ico-picker--clear-icon',
        on: {
          click: $xeIconPicker.clearEvent
        }
      }, [h('i', {
        class: (0, _ui.getIcon)().INPUT_CLEAR
      })]), h('div', {
        class: 'vxe-ico-picker--suffix-icon'
      }, [h('i', {
        class: visiblePanel ? (0, _ui.getIcon)().ICON_PICKER_OPEN : (0, _ui.getIcon)().ICON_PICKER_CLOSE
      })])])]), h('div', {
        ref: 'refOptionPanel',
        class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
          $iconPicker: $xeIconPicker
        }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
        attrs: {
          placement: reactData.panelPlacement
        },
        style: reactData.panelStyle
      }, [initialized && (visiblePanel || isAniVisible) ? h('div', {
        class: 'vxe-ico-picker--panel-wrapper',
        style: wrapperStyle
      }, [filterable ? h('div', {
        class: 'vxe-ico-picker--panel-search'
      }, [h(_input.default, {
        ref: 'refInpSearch',
        class: 'vxe-ico-picker-search--input',
        props: {
          value: reactData.searchValue,
          type: 'text',
          clearable: true,
          disabled: false,
          readonly: false,
          placeholder: (0, _ui.getI18n)('vxe.iconPicker.search'),
          prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH
        },
        on: {
          'model-value': $xeIconPicker.modelSearchEvent,
          focus: $xeIconPicker.focusSearchEvent,
          change: $xeIconPicker.triggerSearchEvent,
          search: $xeIconPicker.triggerSearchEvent
        }
      })]) : (0, _ui.renderEmptyElement)($xeIconPicker), $xeIconPicker.renderIconWrapper(h)]) : (0, _ui.renderEmptyElement)($xeIconPicker)])]);
    }
  },
  watch: {
    value: function value(val) {
      var $xeIconPicker = this;
      var reactData = $xeIconPicker.reactData;
      reactData.selectIcon = "".concat(val || '');
    },
    computeIconList: function computeIconList() {
      var $xeIconPicker = this;
      $xeIconPicker.handleData();
    }
  },
  created: function created() {
    var $xeIconPicker = this;
    var props = $xeIconPicker;
    var reactData = $xeIconPicker.reactData;
    $xeIconPicker.internalData = createInternalData();
    reactData.selectIcon = "".concat(props.value || '');
    $xeIconPicker.handleData();
    _ui.globalEvents.on($xeIconPicker, 'mousewheel', $xeIconPicker.handleGlobalMousewheelEvent);
    _ui.globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent);
    _ui.globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent);
    _ui.globalEvents.on($xeIconPicker, 'blur', $xeIconPicker.handleGlobalBlurEvent);
  },
  beforeDestroy: function beforeDestroy() {
    var $xeIconPicker = this;
    var reactData = $xeIconPicker.reactData;
    var internalData = $xeIconPicker.internalData;
    var panelElem = $xeIconPicker.$refs.refOptionPanel;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xeIconPicker, 'mousewheel');
    _ui.globalEvents.off($xeIconPicker, 'mousedown');
    _ui.globalEvents.off($xeIconPicker, 'keydown');
    _ui.globalEvents.off($xeIconPicker, 'blur');
    _xeUtils.default.assign(reactData, createReactData());
    _xeUtils.default.assign(internalData, createInternalData());
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */