vxe-pc-ui 3.0.1 → 3.0.2

package/lib/tree-select/src/tree-select.js

@@ -0,0 +1,695 @@
+"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 _input = _interopRequireDefault(require("../../input/src/input"));
+var _tree = _interopRequireDefault(require("../../tree/src/tree"));
+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 getOptUniqueId() {
+  return _xeUtils.default.uniqueId('node_');
+}
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeTreeSelect',
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    value: [String, Number, Array],
+    clearable: Boolean,
+    placeholder: {
+      type: String,
+      default: function _default() {
+        return _xeUtils.default.eqNull((0, _ui.getConfig)().select.placeholder) ? (0, _ui.getI18n)('vxe.base.pleaseSelect') : (0, _ui.getConfig)().select.placeholder;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    loading: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    multiple: Boolean,
+    className: [String, Function],
+    popupClassName: [String, Function],
+    prefixIcon: String,
+    placement: String,
+    options: Array,
+    optionProps: Object,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size;
+      }
+    },
+    remote: Boolean,
+    remoteMethod: Function,
+    treeConfig: 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 $xeTreeSelect = this;
+    return {
+      $xeTreeSelect: $xeTreeSelect
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      initialized: false,
+      fullOptionList: [],
+      fullNodeMaps: {},
+      visibleOptionList: [],
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: null,
+      triggerFocusPanel: false,
+      visiblePanel: false,
+      visibleAnimate: false,
+      isActivated: false
+    };
+    var internalData = {
+      hpTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var $xeForm = $xeTreeSelect.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var $xeForm = $xeTreeSelect.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var $xeTable = $xeTreeSelect.$xeTable;
+      var $xeModal = $xeTreeSelect.$xeModal;
+      var $xeDrawer = $xeTreeSelect.$xeDrawer;
+      var $xeForm = $xeTreeSelect.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().select.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeTreeOpts: function computeTreeOpts() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().treeSelect.treeConfig, props.treeConfig);
+    },
+    computeTreeNodeOpts: function computeTreeNodeOpts() {
+      var $xeTreeSelect = this;
+      var treeOpts = $xeTreeSelect.computeTreeOpts;
+      return Object.assign({
+        isHover: true
+      }, treeOpts.nodeConfig);
+    },
+    computeTreeCheckboxOpts: function computeTreeCheckboxOpts() {
+      var $xeTreeSelect = this;
+      var treeOpts = $xeTreeSelect.computeTreeOpts;
+      return Object.assign({
+        showIcon: !!treeOpts.showCheckbox
+      }, treeOpts.checkboxConfig, {
+        trigger: 'node'
+      });
+    },
+    computeTreeRadioOpts: function computeTreeRadioOpts() {
+      var $xeTreeSelect = this;
+      var treeOpts = $xeTreeSelect.computeTreeOpts;
+      return Object.assign({
+        showIcon: !!treeOpts.showRadio
+      }, treeOpts.radioConfig, {
+        trigger: 'node'
+      });
+    },
+    computePropsOpts: function computePropsOpts() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      return Object.assign({}, props.optionProps);
+    },
+    computeLabelField: function computeLabelField() {
+      var $xeTreeSelect = this;
+      var propsOpts = $xeTreeSelect.computePropsOpts;
+      return propsOpts.label || 'label';
+    },
+    computeValueField: function computeValueField() {
+      var $xeTreeSelect = this;
+      var propsOpts = $xeTreeSelect.computePropsOpts;
+      return propsOpts.value || 'value';
+    },
+    computeChildrenField: function computeChildrenField() {
+      var $xeTreeSelect = this;
+      var propsOpts = $xeTreeSelect.computePropsOpts;
+      return propsOpts.children || 'children';
+    },
+    computeParentField: function computeParentField() {
+      var $xeTreeSelect = this;
+      var propsOpts = $xeTreeSelect.computePropsOpts;
+      return propsOpts.parent || 'parentField';
+    },
+    computeHasChildField: function computeHasChildField() {
+      var $xeTreeSelect = this;
+      var propsOpts = $xeTreeSelect.computePropsOpts;
+      return propsOpts.hasChild || 'hasChild';
+    },
+    computeSelectLabel: function computeSelectLabel() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var reactData = $xeTreeSelect.reactData;
+      var value = props.value;
+      var fullNodeMaps = reactData.fullNodeMaps;
+      var labelField = $xeTreeSelect.computeLabelField;
+      return (_xeUtils.default.isArray(value) ? value : [value]).map(function (value) {
+        var cacheItem = fullNodeMaps[value];
+        return cacheItem ? cacheItem.item[labelField] : value;
+      }).join(', ');
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.$emit(type, (0, _ui.createEvent)(evnt, {
+        $treeSelect: $xeTreeSelect
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.$emit('input', value);
+      $xeTreeSelect.$emit('modelValue', value);
+    },
+    getOptid: function getOptid(option) {
+      var $xeTreeSelect = this;
+      var valueField = $xeTreeSelect.computeValueField;
+      var optid = option[valueField];
+      return optid ? encodeURIComponent(optid) : '';
+    },
+    /**
+     * 刷新选项，当选项被动态显示/隐藏时可能会用到
+     */
+    refreshOption: function refreshOption() {
+      var $xeTreeSelect = this;
+      return $xeTreeSelect.$nextTick();
+    },
+    cacheItemMap: function cacheItemMap() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var reactData = $xeTreeSelect.reactData;
+      var options = props.options;
+      var valueField = $xeTreeSelect.computeValueField;
+      var childrenField = $xeTreeSelect.computeChildrenField;
+      var nodeMaps = {};
+      _xeUtils.default.eachTree(options, function (item, index, items, path, parent, nodes) {
+        var nodeid = $xeTreeSelect.getOptid(item);
+        if (!nodeid) {
+          nodeid = getOptUniqueId();
+          item[valueField] = nodeid;
+        }
+        nodeMaps[nodeid] = {
+          item: item,
+          index: index,
+          items: items,
+          parent: parent,
+          nodes: nodes
+        };
+      }, {
+        children: childrenField
+      });
+      reactData.fullOptionList = options || [];
+      reactData.fullNodeMaps = nodeMaps;
+      $xeTreeSelect.refreshOption();
+    },
+    updateZindex: function updateZindex() {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var reactData = $xeTreeSelect.reactData;
+      return $xeTreeSelect.$nextTick().then(function () {
+        var placement = props.placement;
+        var panelIndex = reactData.panelIndex;
+        var el = $xeTreeSelect.$refs.refElem;
+        var panelElem = $xeTreeSelect.$refs.refOptionPanel;
+        var btnTransfer = $xeTreeSelect.computeBtnTransfer;
+        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 _getAbsolutePos = (0, _dom.getAbsolutePos)(el),
+            boundingTop = _getAbsolutePos.boundingTop,
+            boundingLeft = _getAbsolutePos.boundingLeft,
+            visibleHeight = _getAbsolutePos.visibleHeight,
+            visibleWidth = _getAbsolutePos.visibleWidth;
+          var panelPlacement = 'bottom';
+          if (btnTransfer) {
+            var left = boundingLeft;
+            var top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: "".concat(left, "px"),
+              top: "".concat(top, "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 $xeTreeSelect.$nextTick();
+        }
+      });
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var reactData = $xeTreeSelect.reactData;
+      var internalData = $xeTreeSelect.internalData;
+      var loading = props.loading;
+      var isDisabled = $xeTreeSelect.computeIsDisabled;
+      if (!loading && !isDisabled) {
+        clearTimeout(internalData.hpTimeout);
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          var btnTransfer = $xeTreeSelect.computeBtnTransfer;
+          var panelElem = $xeTreeSelect.$refs.refOptionPanel;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        reactData.isActivated = true;
+        reactData.visibleAnimate = true;
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+        }, 10);
+        $xeTreeSelect.updateZindex();
+        $xeTreeSelect.updatePlacement();
+      }
+    },
+    hideOptionPanel: function hideOptionPanel() {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      var internalData = $xeTreeSelect.internalData;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = window.setTimeout(function () {
+        reactData.visibleAnimate = false;
+      }, 350);
+    },
+    changeEvent: function changeEvent(evnt, selectValue) {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var reactData = $xeTreeSelect.reactData;
+      var $xeForm = $xeTreeSelect.$xeForm;
+      var formItemInfo = $xeTreeSelect.formItemInfo;
+      var fullNodeMaps = reactData.fullNodeMaps;
+      $xeTreeSelect.emitModel(selectValue);
+      if (selectValue !== props.value) {
+        var cacheItem = fullNodeMaps[selectValue];
+        $xeTreeSelect.dispatchEvent('change', {
+          value: selectValue,
+          option: cacheItem ? cacheItem.item : null
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        }
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.changeEvent(evnt, selectValue);
+      $xeTreeSelect.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    clearEvent: function clearEvent(params, evnt) {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.clearValueEvent(evnt, null);
+      $xeTreeSelect.hideOptionPanel();
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeTreeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeTreeSelect.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeTreeSelect.updatePlacement();
+          } else {
+            $xeTreeSelect.hideOptionPanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeTreeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        var el = $xeTreeSelect.$refs.refElem;
+        var panelElem = $xeTreeSelect.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeTreeSelect.hideOptionPanel();
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.hideOptionPanel();
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      var isDisabled = $xeTreeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          reactData.triggerFocusPanel = true;
+          $xeTreeSelect.showOptionPanel();
+          setTimeout(function () {
+            reactData.triggerFocusPanel = false;
+          }, 150);
+        }
+      }
+      $xeTreeSelect.dispatchEvent('focus', {}, evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.togglePanelEvent(evnt);
+      $xeTreeSelect.dispatchEvent('click', {}, evnt);
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      reactData.isActivated = false;
+      $xeTreeSelect.dispatchEvent('blur', {}, evnt);
+    },
+    togglePanelEvent: function togglePanelEvent(params) {
+      var $xeTreeSelect = this;
+      var reactData = $xeTreeSelect.reactData;
+      var $event = params.$event;
+      $event.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (reactData.visiblePanel) {
+          $xeTreeSelect.hideOptionPanel();
+        } else {
+          $xeTreeSelect.showOptionPanel();
+        }
+      }
+    },
+    nodeClickEvent: function nodeClickEvent(params) {
+      var $xeTreeSelect = this;
+      var $event = params.$event;
+      $xeTreeSelect.dispatchEvent('node-click', params, $event);
+    },
+    radioChangeEvent: function radioChangeEvent(params) {
+      var $xeTreeSelect = this;
+      var value = params.value,
+        $event = params.$event;
+      $xeTreeSelect.changeEvent($event, value);
+      $xeTreeSelect.hideOptionPanel();
+    },
+    checkboxChangeEvent: function checkboxChangeEvent(params) {
+      var $xeTreeSelect = this;
+      var value = params.value,
+        $event = params.$event;
+      $xeTreeSelect.changeEvent($event, value);
+    },
+    //
+    // Render
+    //
+    renderVN: function renderVN(h) {
+      var $xeTreeSelect = this;
+      var props = $xeTreeSelect;
+      var slots = $xeTreeSelect.$scopedSlots;
+      var reactData = $xeTreeSelect.reactData;
+      var className = props.className,
+        value = props.value,
+        multiple = props.multiple,
+        options = props.options,
+        popupClassName = props.popupClassName,
+        loading = props.loading;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        visiblePanel = reactData.visiblePanel;
+      var vSize = $xeTreeSelect.computeSize;
+      var isDisabled = $xeTreeSelect.computeIsDisabled;
+      var selectLabel = $xeTreeSelect.computeSelectLabel;
+      var btnTransfer = $xeTreeSelect.computeBtnTransfer;
+      var formReadonly = $xeTreeSelect.computeFormReadonly;
+      var defaultSlot = slots.default;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
+      var prefixSlot = slots.prefix;
+      var treeOpts = $xeTreeSelect.computeTreeOpts;
+      var treeNodeOpts = $xeTreeSelect.computeTreeNodeOpts;
+      var treeCheckboxOpts = $xeTreeSelect.computeTreeCheckboxOpts;
+      var treeRadioOpts = $xeTreeSelect.computeTreeRadioOpts;
+      var labelField = $xeTreeSelect.computeLabelField;
+      var valueField = $xeTreeSelect.computeValueField;
+      var childrenField = $xeTreeSelect.computeChildrenField;
+      var parentField = $xeTreeSelect.computeParentField;
+      var hasChildField = $xeTreeSelect.computeHasChildField;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-tree-select--readonly', className]
+        }, [h('div', {
+          class: 'vxe-tree-select-slots',
+          ref: 'hideOption'
+        }, defaultSlot ? defaultSlot({}) : []), h('span', {
+          class: 'vxe-tree-select-label'
+        }, selectLabel)]);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-tree-select', className ? _xeUtils.default.isFunction(className) ? className({
+          $treeSelect: $xeTreeSelect
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--loading', loading), 'is--active', isActivated)]
+      }, [h(_input.default, {
+        ref: 'refInput',
+        props: {
+          clearable: props.clearable,
+          placeholder: props.placeholder,
+          readonly: true,
+          disabled: isDisabled,
+          type: 'text',
+          prefixIcon: props.prefixIcon,
+          suffixIcon: loading ? (0, _ui.getIcon)().TREE_SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().TREE_SELECT_OPEN : (0, _ui.getIcon)().TREE_SELECT_CLOSE,
+          value: selectLabel
+        },
+        on: {
+          clear: $xeTreeSelect.clearEvent,
+          click: $xeTreeSelect.clickEvent,
+          focus: $xeTreeSelect.focusEvent,
+          blur: $xeTreeSelect.blurEvent,
+          suffixClick: $xeTreeSelect.togglePanelEvent
+        },
+        scopedSlots: prefixSlot ? {
+          prefix: function prefix() {
+            return prefixSlot({});
+          }
+        } : {}
+      }), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-tree-select--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+          $treeSelect: $xeTreeSelect
+        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', !loading && reactData.visibleAnimate), 'ani--enter', !loading && visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, initialized ? [h('div', {
+        class: 'vxe-tree-select--panel-wrapper'
+      }, [headerSlot ? h('div', {
+        class: 'vxe-tree-select--panel-header'
+      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeTreeSelect), h('div', {
+        class: 'vxe-tree-select--panel-body'
+      }, [h('div', {
+        ref: 'refOptionWrapper',
+        class: 'vxe-tree-select-option--wrapper'
+      }, [h(_tree.default, {
+        class: 'vxe-tree-select--tree',
+        props: {
+          data: options,
+          indent: treeOpts.indent,
+          showRadio: !multiple,
+          radioConfig: treeRadioOpts,
+          checkNodeKey: multiple ? null : value,
+          showCheckbox: !!multiple,
+          checkNodeKeys: multiple ? value : null,
+          checkboxConfig: treeCheckboxOpts,
+          titleField: labelField,
+          valueField: valueField,
+          keyField: treeOpts.keyField,
+          childrenField: treeOpts.childrenField || childrenField,
+          parentField: treeOpts.parentField || parentField,
+          hasChildField: treeOpts.hasChildField || hasChildField,
+          accordion: treeOpts.accordion,
+          nodeConfig: treeNodeOpts,
+          lazy: treeOpts.lazy,
+          loadMethod: treeOpts.loadMethod,
+          toggleMethod: treeOpts.toggleMethod,
+          transform: treeOpts.transform,
+          trigger: treeOpts.trigger,
+          showIcon: treeOpts.showIcon,
+          showLine: treeOpts.showLine,
+          iconOpen: treeOpts.iconOpen,
+          iconLoaded: treeOpts.iconLoaded,
+          iconClose: treeOpts.iconClose
+        },
+        on: {
+          'node-click': $xeTreeSelect.nodeClickEvent,
+          'radio-change': $xeTreeSelect.radioChangeEvent,
+          'checkbox-change': $xeTreeSelect.checkboxChangeEvent
+        }
+      })])]), footerSlot ? h('div', {
+        class: 'vxe-tree-select--panel-footer'
+      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeTreeSelect)])] : [])]);
+    }
+  },
+  watch: {
+    options: function options() {
+      var $xeTreeSelect = this;
+      $xeTreeSelect.cacheItemMap();
+    }
+  },
+  created: function created() {
+    var $xeTreeSelect = this;
+    $xeTreeSelect.cacheItemMap();
+  },
+  mounted: function mounted() {
+    var $xeTreeSelect = this;
+    _ui.globalEvents.on($xeTreeSelect, 'mousewheel', $xeTreeSelect.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeTreeSelect, 'mousedown', $xeTreeSelect.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeTreeSelect, 'blur', $xeTreeSelect.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeTreeSelect = this;
+    var panelElem = $xeTreeSelect.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeTreeSelect, 'mousewheel');
+    _ui.globalEvents.off($xeTreeSelect, 'mousedown');
+    _ui.globalEvents.off($xeTreeSelect, 'blur');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});