vxe-pc-ui 3.14.16 → 3.14.18

package/lib/index.umd.js

@@ -13214,7 +13214,7 @@ function checkDynamic() {
 }
 ;// ./packages/ui/src/log.ts
 
-var log_version = "ui v".concat("3.14.16");
+var log_version = "ui v".concat("3.14.18");
 var warnLog = log.create('warn', log_version);
 var errLog = log.create('error', log_version);
 ;// ./packages/ui/index.ts
@@ -13222,7 +13222,7 @@ var errLog = log.create('error', log_version);
 
 
 
-var ui_version = "3.14.16";
+var ui_version = "3.14.18";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -13534,6 +13534,14 @@ setConfig({
   segmented: {},
   select: {
     multiCharOverflow: 8,
+    radioConfig: {
+      showIcon: true,
+      trigger: 'option'
+    },
+    checkboxConfig: {
+      showIcon: true,
+      trigger: 'option'
+    },
     remoteConfig: {
       enabled: true,
       autoLoad: true
@@ -13628,7 +13636,7 @@ setConfig({
     }
   },
   treeSelect: {
-    autoClose: true,
+    autoClose: null,
     virtualYConfig: {
       enabled: true,
       gt: 0,
@@ -13976,7 +13984,8 @@ setIcon({
     select: {
       clear: '清除',
       allChecked: '全选',
-      total: '{0} / {1}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜索',
       loadingText: '加载中...',
       emptyText: '暂无数据',
@@ -13993,7 +14002,8 @@ setIcon({
       allChecked: '全选',
       allExpand: '全部展开',
       clearExpand: '全部收起',
-      total: '已选 {0}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜索',
       emptyText: '暂无数据'
     },
@@ -45033,6 +45043,20 @@ function select_createInternalData() {
       type: [String, Number],
       default: null
     },
+    showRadio: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().select.showRadio;
+      }
+    },
+    radioConfig: Object,
+    showCheckbox: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().select.showCheckedButoon;
+      }
+    },
+    checkboxConfig: Object,
     /**
      * 已废弃，请使用 popupConfig.zIndex
      * @deprecated
@@ -45054,6 +45078,24 @@ function select_createInternalData() {
     remote: Boolean,
     remoteConfig: Object,
     emptyText: String,
+    checkedClosable: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().select.checkedClosable;
+      }
+    },
+    clearClosable: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().select.clearClosable;
+      }
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().select.showCloseButton;
+      }
+    },
     showTotalButoon: {
       type: Boolean,
       default: function _default() {
@@ -45280,6 +45322,16 @@ function select_createInternalData() {
       var props = $xeSelect;
       return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
     },
+    computeRadioOpts: function computeRadioOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
+    },
+    computeCheckboxOpts: function computeCheckboxOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
+    },
     computeIsGroup: function computeIsGroup() {
       var $xeSelect = this;
       var reactData = $xeSelect.reactData;
@@ -45780,7 +45832,7 @@ function select_createInternalData() {
         }, null);
       }
     },
-    hideOptionPanel: function hideOptionPanel() {
+    hideOptionPanel: function hideOptionPanel(evnt) {
       var $xeSelect = this;
       var props = $xeSelect;
       var reactData = $xeSelect.reactData;
@@ -45807,7 +45859,7 @@ function select_createInternalData() {
       }, 350);
       $xeSelect.dispatchEvent('visible-change', {
         visible: false
-      }, null);
+      }, evnt || null);
     },
     changeEvent: function changeEvent(evnt, selectValue, option) {
       var $xeSelect = this;
@@ -45839,14 +45891,16 @@ function select_createInternalData() {
       var $xeSelect = this;
       var $event = params.$event;
       $xeSelect.clearValueEvent($event, null);
-      $xeSelect.hideOptionPanel();
+      $xeSelect.hideOptionPanel($event);
     },
     allCheckedPanelEvent: function allCheckedPanelEvent(params) {
       var $xeSelect = this;
       var props = $xeSelect;
       var reactData = $xeSelect.reactData;
       var $event = params.$event;
-      var multiple = props.multiple;
+      var multiple = props.multiple,
+        max = props.max,
+        checkedClosable = props.checkedClosable;
       var optList = reactData.optList;
       var valueField = $xeSelect.computeValueField;
       if (multiple) {
@@ -45857,6 +45911,12 @@ function select_createInternalData() {
           var selectValue = option[valueField];
           // 检测是否超过最大可选数量
           if ($xeSelect.checkMaxLimit(currVlas)) {
+            if (VxeUI) {
+              VxeUI.modal.message({
+                content: getI18n('vxe.select.overSizeErr', [max]),
+                status: 'warning'
+              });
+            }
             return 1; // break
           }
           if (!currVlas.some(function (val) {
@@ -45869,6 +45929,9 @@ function select_createInternalData() {
           if (_loop()) break;
         }
         $xeSelect.changeEvent($event, currVlas, optList[0]);
+        if (checkedClosable) {
+          $xeSelect.hideOptionPanel($event);
+        }
         $xeSelect.dispatchEvent('all-change', {
           value: currVlas
         }, $event);
@@ -45876,9 +45939,18 @@ function select_createInternalData() {
     },
     clearCheckedPanelEvent: function clearCheckedPanelEvent(params) {
       var $xeSelect = this;
+      var props = $xeSelect;
+      var clearClosable = props.clearClosable;
       var $event = params.$event;
       $xeSelect.clearValueEvent($event, null);
-      $xeSelect.hideOptionPanel();
+      if (clearClosable) {
+        $xeSelect.hideOptionPanel($event);
+      }
+    },
+    closePanelEvent: function closePanelEvent(params) {
+      var $xeSelect = this;
+      var $event = params.$event;
+      $xeSelect.hideOptionPanel($event);
     },
     changeOptionEvent: function changeOptionEvent(evnt, option) {
       var $xeSelect = this;
@@ -45918,7 +45990,7 @@ function select_createInternalData() {
         $xeSelect.changeEvent(evnt, multipleValue, option);
       } else {
         $xeSelect.changeEvent(evnt, selectValue, option);
-        $xeSelect.hideOptionPanel();
+        $xeSelect.hideOptionPanel(evnt);
       }
       reactData.reactFlag++;
     },
@@ -45933,7 +46005,7 @@ function select_createInternalData() {
           if (getEventTargetNode(evnt, panelElem).flag) {
             $xeSelect.updatePlacement();
           } else {
-            $xeSelect.hideOptionPanel();
+            $xeSelect.hideOptionPanel(evnt);
           }
         }
       }
@@ -45951,7 +46023,7 @@ function select_createInternalData() {
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
         if (visiblePanel && !reactData.isActivated) {
           if (trigger !== 'manual') {
-            $xeSelect.hideOptionPanel();
+            $xeSelect.hideOptionPanel(evnt);
           }
         }
       }
@@ -46052,7 +46124,7 @@ function select_createInternalData() {
         if (visiblePanel) {
           if (isEsc || isTab) {
             if (trigger !== 'manual') {
-              $xeSelect.hideOptionPanel();
+              $xeSelect.hideOptionPanel(evnt);
             }
           } else if (isEnter) {
             if (currentOption) {
@@ -46083,7 +46155,7 @@ function select_createInternalData() {
         }
       }
     },
-    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+    handleGlobalBlurEvent: function handleGlobalBlurEvent(evnt) {
       var $xeSelect = this;
       var reactData = $xeSelect.reactData;
       var visiblePanel = reactData.visiblePanel,
@@ -46092,7 +46164,7 @@ function select_createInternalData() {
       var trigger = popupOpts.trigger;
       if (visiblePanel) {
         if (trigger !== 'manual') {
-          $xeSelect.hideOptionPanel();
+          $xeSelect.hideOptionPanel(evnt);
         }
       }
       if (isActivated) {
@@ -46230,7 +46302,7 @@ function select_createInternalData() {
         reactData.triggerFocusPanel = false;
       } else {
         if (reactData.visiblePanel) {
-          $xeSelect.hideOptionPanel();
+          $xeSelect.hideOptionPanel($event);
         } else {
           $xeSelect.showOptionPanel();
         }
@@ -46557,6 +46629,60 @@ function select_createInternalData() {
     //
     // Render
     //
+    renderRadio: function renderRadio(h, option, isOptGroup, isChecked, isDisabled) {
+      var $xeSelect = this;
+      var radioOpts = $xeSelect.computeRadioOpts;
+      var showIcon = radioOpts.showIcon,
+        trigger = radioOpts.trigger;
+      if (isOptGroup || showIcon === false) {
+        return renderEmptyElement($xeSelect);
+      }
+      var ons = {};
+      if (!trigger || trigger === 'default') {
+        ons.click = function (evnt) {
+          if (!isDisabled && !isOptGroup) {
+            $xeSelect.changeOptionEvent(evnt, option);
+          }
+        };
+      }
+      return h('div', {
+        key: 2,
+        class: ['vxe-select-option--radio', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        on: ons
+      }, [h('span', {
+        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : getIcon().RADIO_UNCHECKED]
+      })]);
+    },
+    renderCheckbox: function renderCheckbox(h, option, isOptGroup, isChecked, isDisabled) {
+      var $xeSelect = this;
+      var checkboxOpts = $xeSelect.computeCheckboxOpts;
+      var showIcon = checkboxOpts.showIcon,
+        trigger = checkboxOpts.trigger;
+      if (isOptGroup || showIcon === false) {
+        return renderEmptyElement($xeSelect);
+      }
+      var ons = {};
+      if (!trigger || trigger === 'default') {
+        ons.click = function (evnt) {
+          if (!isDisabled && !isOptGroup) {
+            $xeSelect.changeOptionEvent(evnt, option);
+          }
+        };
+      }
+      return h('div', {
+        key: 3,
+        class: ['vxe-select-option--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        on: ons
+      }, [h('span', {
+        class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED]
+      })]);
+    },
     renderOption: function renderOption(h, list) {
       var $xeSelect = this;
       var props = $xeSelect;
@@ -46564,7 +46690,10 @@ function select_createInternalData() {
       var reactData = $xeSelect.reactData;
       var internalData = $xeSelect.internalData;
       var allowCreate = props.allowCreate,
-        optionKey = props.optionKey;
+        optionKey = props.optionKey,
+        multiple = props.multiple,
+        showRadio = props.showRadio,
+        showCheckbox = props.showCheckbox;
       var currentOption = reactData.currentOption;
       var optAddMaps = internalData.optAddMaps;
       var optionOpts = $xeSelect.computeOptionOpts;
@@ -46572,9 +46701,13 @@ function select_createInternalData() {
       var valueField = $xeSelect.computeValueField;
       var groupLabelField = $xeSelect.computeGroupLabelField;
       var selectVals = $xeSelect.computeSelectVals;
+      var radioOpts = $xeSelect.computeRadioOpts;
+      var checkboxOpts = $xeSelect.computeCheckboxOpts;
       var useKey = optionOpts.useKey,
         height = optionOpts.height;
       var optionSlot = slots.option;
+      var isCheckboxMode = showCheckbox && multiple;
+      var isRadioMode = showRadio && !multiple;
       return list.map(function (option, cIndex) {
         var slots = option.slots,
           className = option.className;
@@ -46586,6 +46719,7 @@ function select_createInternalData() {
         var isVisible = isAdd || !isOptGroup || isOptionVisible(option);
         var isDisabled = !isAdd && $xeSelect.checkOptionDisabled(isSelected, option);
         var defaultSlot = slots ? slots.default : null;
+        var optSlot = defaultSlot || optionSlot;
         var optParams = {
           option: option,
           group: isOptGroup ? option : null,
@@ -46593,13 +46727,41 @@ function select_createInternalData() {
         };
         var optLabel = '';
         var optVNs = [];
-        if (optionSlot) {
-          optVNs = $xeSelect.callSlot(optionSlot, optParams, h);
-        } else if (defaultSlot) {
-          optVNs = $xeSelect.callSlot(defaultSlot, optParams, h);
+        if (isCheckboxMode) {
+          optVNs.push($xeSelect.renderCheckbox(h, option, isOptGroup, isSelected, isDisabled));
+        } else if (isRadioMode) {
+          optVNs.push($xeSelect.renderRadio(h, option, isOptGroup, isSelected, isDisabled));
+        }
+        var otlbVNs = [];
+        if (optSlot) {
+          otlbVNs = $xeSelect.callSlot(optSlot, optParams, h);
         } else {
           optLabel = getFuncText(option[isOptGroup ? groupLabelField : labelField] || optionValue);
-          optVNs = optLabel;
+          otlbVNs = [optLabel];
+        }
+        optVNs.push(h('div', {
+          key: 1,
+          class: 'vxe-select-option--label'
+        }, otlbVNs));
+        var ons = {
+          mousedown: function mousedown(evnt) {
+            var isLeftBtn = evnt.button === 0;
+            if (isLeftBtn) {
+              evnt.stopPropagation();
+            }
+          },
+          mouseenter: function mouseenter() {
+            if (!isDisabled && !isOptGroup && !$xeSelect.isVMScrollProcess()) {
+              $xeSelect.setCurrentOption(option);
+            }
+          }
+        };
+        if (isCheckboxMode ? checkboxOpts.trigger === 'option' : isRadioMode ? radioOpts.trigger === 'option' : true) {
+          ons.click = function (evnt) {
+            if (!isDisabled && !isOptGroup) {
+              $xeSelect.changeOptionEvent(evnt, option);
+            }
+          };
         }
         return isVisible ? h('div', {
           key: useKey || optionKey ? optid : cIndex,
@@ -46617,27 +46779,10 @@ function select_createInternalData() {
           style: height ? {
             height: toCssUnit(height)
           } : undefined,
-          on: {
-            mousedown: function mousedown(evnt) {
-              var isLeftBtn = evnt.button === 0;
-              if (isLeftBtn) {
-                evnt.stopPropagation();
-              }
-            },
-            click: function click(evnt) {
-              if (!isDisabled && !isOptGroup) {
-                $xeSelect.changeOptionEvent(evnt, option);
-              }
-            },
-            mouseenter: function mouseenter() {
-              if (!isDisabled && !isOptGroup && !$xeSelect.isVMScrollProcess()) {
-                $xeSelect.setCurrentOption(option);
-              }
-            }
-          }
+          on: ons
         }, allowCreate ? [h('span', {
           key: 1,
-          class: 'vxe-select-option--label'
+          class: 'vxe-select-option--add-label'
         }, optVNs), isAdd ? h('span', {
           key: 2,
           class: 'vxe-select-option--add-icon'
@@ -46679,7 +46824,8 @@ function select_createInternalData() {
         filterable = props.filterable,
         showTotalButoon = props.showTotalButoon,
         showCheckedButoon = props.showCheckedButoon,
-        showClearButton = props.showClearButton;
+        showClearButton = props.showClearButton,
+        showCloseButton = props.showCloseButton;
       var initialized = reactData.initialized,
         isActivated = reactData.isActivated,
         isAniVisible = reactData.isAniVisible,
@@ -46782,13 +46928,11 @@ function select_createInternalData() {
           change: $xeSelect.triggerSearchEvent,
           search: $xeSelect.triggerSearchEvent
         }
-      })]) : renderEmptyElement($xeSelect), showTotalButoon || showCheckedButoon && multiple || showClearButton || headerSlot ? h('div', {
+      })]) : renderEmptyElement($xeSelect), showCheckedButoon && multiple || showClearButton || headerSlot ? h('div', {
         class: 'vxe-select--panel-header'
       }, headerSlot ? $xeSelect.callSlot(headerSlot, {}, h) : [h('div', {
         class: 'vxe-tree-select--header-button'
-      }, [showTotalButoon ? h('div', {
-        class: 'vxe-tree-select--header-total'
-      }, getI18n('vxe.select.total', [selectVals.length, optList.length])) : renderEmptyElement($xeSelect), h('div', {
+      }, [h('div', {
         class: 'vxe-tree-select--header-btns'
       }, [showCheckedButoon && multiple ? h(src_button, {
         props: {
@@ -46825,9 +46969,23 @@ function select_createInternalData() {
         style: {
           transform: "translateY(".concat(topSpaceHeight, "px)")
         }
-      }, $xeSelect.renderOpts(h))])]), footerSlot ? h('div', {
+      }, $xeSelect.renderOpts(h))])]), footerSlot || showTotalButoon || showCloseButton && multiple ? h('div', {
         class: 'vxe-select--panel-footer'
-      }, $xeSelect.callSlot(footerSlot, {}, h)) : renderEmptyElement($xeSelect)])] : [])]);
+      }, footerSlot ? $xeSelect.callSlot(footerSlot, {}, h) : [h('div', {
+        class: 'vxe-select--footer-button'
+      }, [showTotalButoon ? h('div', {
+        class: 'vxe-select--total-btns'
+      }, getI18n('vxe.select.total', [selectVals.length, optList.length])) : renderEmptyElement($xeSelect), showCloseButton && multiple ? h('div', {
+        class: 'vxe-select--oper-btns'
+      }, [h(src_button, {
+        props: {
+          content: getI18n('vxe.select.close'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeSelect.closePanelEvent
+        }
+      })]) : renderEmptyElement($xeSelect)])]) : renderEmptyElement($xeSelect)])] : [])]);
     }
   },
   watch: {
@@ -59516,12 +59674,34 @@ function tree_select_createInternalData() {
     treeConfig: Object,
     menuConfig: Object,
     virtualYConfig: Object,
+    /**
+     * 已废弃，被 checked-closable, clear-closable 替换
+     * @deprecated
+     */
     autoClose: {
       type: Boolean,
       default: function _default() {
         return getConfig().treeSelect.autoClose;
       }
     },
+    checkedClosable: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().treeSelect.checkedClosable;
+      }
+    },
+    clearClosable: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().treeSelect.clearClosable;
+      }
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().treeSelect.showCloseButton;
+      }
+    },
     showTotalButoon: {
       type: Boolean,
       default: function _default() {
@@ -59923,9 +60103,12 @@ function tree_select_createInternalData() {
         }, 10);
         $xeTreeSelect.updateZindex();
         $xeTreeSelect.updatePlacement();
+        $xeTreeSelect.dispatchEvent('visible-change', {
+          visible: true
+        }, null);
       }
     },
-    hideOptionPanel: function hideOptionPanel() {
+    hideOptionPanel: function hideOptionPanel(evnt) {
       var $xeTreeSelect = this;
       var reactData = $xeTreeSelect.reactData;
       var internalData = $xeTreeSelect.internalData;
@@ -59933,6 +60116,9 @@ function tree_select_createInternalData() {
       internalData.hpTimeout = setTimeout(function () {
         reactData.isAniVisible = false;
       }, 350);
+      $xeTreeSelect.dispatchEvent('visible-change', {
+        visible: false
+      }, evnt || null);
     },
     changeEvent: function changeEvent(evnt, selectValue, node) {
       var $xeTreeSelect = this;
@@ -59960,17 +60146,19 @@ function tree_select_createInternalData() {
         value: selectValue
       }, evnt);
     },
-    clearEvent: function clearEvent(params, evnt) {
+    clearEvent: function clearEvent(params) {
       var $xeTreeSelect = this;
-      $xeTreeSelect.clearValueEvent(evnt, null);
-      $xeTreeSelect.hideOptionPanel();
+      var $event = params.$event;
+      $xeTreeSelect.clearValueEvent($event, null);
+      $xeTreeSelect.hideOptionPanel($event);
     },
     allCheckedPanelEvent: function allCheckedPanelEvent(params) {
       var $xeTreeSelect = this;
       var props = $xeTreeSelect;
       var $event = params.$event;
       var multiple = props.multiple,
-        autoClose = props.autoClose;
+        autoClose = props.autoClose,
+        checkedClosable = props.checkedClosable;
       var $tree = $xeTreeSelect.$refs.refTree;
       if (multiple) {
         if ($tree) {
@@ -59981,8 +60169,8 @@ function tree_select_createInternalData() {
             $xeTreeSelect.dispatchEvent('all-change', {
               value: checkNodeKeys
             }, $event);
-            if (autoClose) {
-              $xeTreeSelect.hideOptionPanel();
+            if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(autoClose) ? autoClose : checkedClosable) {
+              $xeTreeSelect.hideOptionPanel($event);
             }
           });
         }
@@ -59993,13 +60181,14 @@ function tree_select_createInternalData() {
       var props = $xeTreeSelect;
       var $event = params.$event;
       var multiple = props.multiple,
-        autoClose = props.autoClose;
+        autoClose = props.autoClose,
+        clearClosable = props.clearClosable;
       var $tree = $xeTreeSelect.$refs.refTree;
       if ($tree) {
         var value = multiple ? [] : null;
         $tree.clearCheckboxNode().then(function () {
-          if (autoClose) {
-            $xeTreeSelect.hideOptionPanel();
+          if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(autoClose) ? autoClose : clearClosable) {
+            $xeTreeSelect.hideOptionPanel($event);
           }
         });
         $xeTreeSelect.changeEvent($event, value, null);
@@ -60008,6 +60197,11 @@ function tree_select_createInternalData() {
         }, $event);
       }
     },
+    closePanelEvent: function closePanelEvent(params) {
+      var $xeTreeSelect = this;
+      var $event = params.$event;
+      $xeTreeSelect.hideOptionPanel($event);
+    },
     allExpandPanelEvent: function allExpandPanelEvent() {
       var $xeTreeSelect = this;
       var $tree = $xeTreeSelect.$refs.refTree;
@@ -60033,7 +60227,7 @@ function tree_select_createInternalData() {
           if (getEventTargetNode(evnt, panelElem).flag) {
             $xeTreeSelect.updatePlacement();
           } else {
-            $xeTreeSelect.hideOptionPanel();
+            $xeTreeSelect.hideOptionPanel(evnt);
           }
         }
       }
@@ -60048,17 +60242,17 @@ function tree_select_createInternalData() {
         var panelElem = $xeTreeSelect.$refs.refOptionPanel;
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
         if (visiblePanel && !reactData.isActivated) {
-          $xeTreeSelect.hideOptionPanel();
+          $xeTreeSelect.hideOptionPanel(evnt);
         }
       }
     },
-    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+    handleGlobalBlurEvent: function handleGlobalBlurEvent(evnt) {
       var $xeTreeSelect = this;
       var reactData = $xeTreeSelect.reactData;
       var visiblePanel = reactData.visiblePanel,
         isActivated = reactData.isActivated;
       if (visiblePanel) {
-        $xeTreeSelect.hideOptionPanel();
+        $xeTreeSelect.hideOptionPanel(evnt);
       }
       if (isActivated) {
         reactData.isActivated = false;
@@ -60155,7 +60349,7 @@ function tree_select_createInternalData() {
         reactData.triggerFocusPanel = false;
       } else {
         if (reactData.visiblePanel) {
-          $xeTreeSelect.hideOptionPanel();
+          $xeTreeSelect.hideOptionPanel($event);
         } else {
           $xeTreeSelect.showOptionPanel();
         }
@@ -60176,7 +60370,7 @@ function tree_select_createInternalData() {
         $event = params.$event,
         node = params.node;
       $xeTreeSelect.changeEvent($event, value, node);
-      $xeTreeSelect.hideOptionPanel();
+      $xeTreeSelect.hideOptionPanel($event);
     },
     checkboxChangeEvent: function checkboxChangeEvent(params) {
       var $xeTreeSelect = this;
@@ -60207,7 +60401,8 @@ function tree_select_createInternalData() {
         showTotalButoon = props.showTotalButoon,
         showCheckedButoon = props.showCheckedButoon,
         showClearButton = props.showClearButton,
-        showExpandButton = props.showExpandButton;
+        showExpandButton = props.showExpandButton,
+        showCloseButton = props.showCloseButton;
       var initialized = reactData.initialized,
         isActivated = reactData.isActivated,
         isAniVisible = reactData.isAniVisible,
@@ -60326,7 +60521,7 @@ function tree_select_createInternalData() {
         on: {
           'model-value': $xeTreeSelect.modelSearchEvent
         }
-      })]) : renderEmptyElement($xeTreeSelect), showTotalButoon || showCheckedButoon && multiple || showClearButton || showExpandButton || headerSlot ? h('div', {
+      })]) : renderEmptyElement($xeTreeSelect), showCheckedButoon && multiple || showClearButton || showExpandButton || headerSlot ? h('div', {
         class: 'vxe-tree-select--panel-header'
       }, headerSlot ? headerSlot({}) : [h('div', {
         class: 'vxe-tree-select--header-button'
@@ -60423,13 +60618,23 @@ function tree_select_createInternalData() {
           'load-success': $xeTreeSelect.loadSuccessEvent
         },
         scopedSlots: treeScopedSlots
-      })])]), footerSlot || showTotalButoon ? h('div', {
+      })])]), footerSlot || showTotalButoon || showCloseButton && multiple ? h('div', {
         class: 'vxe-tree-select--panel-footer'
       }, footerSlot ? footerSlot({}) : [h('div', {
         class: 'vxe-tree-select--footer-button'
       }, [showTotalButoon ? h('div', {
         class: 'vxe-tree-select--total-btns'
-      }, getI18n('vxe.treeSelect.total', [selectVals.length])) : renderEmptyElement($xeTreeSelect)])]) : renderEmptyElement($xeTreeSelect)])] : [])]);
+      }, getI18n('vxe.treeSelect.total', [selectVals.length])) : renderEmptyElement($xeTreeSelect), showCloseButton && multiple ? h('div', {
+        class: 'vxe-tree-select--oper-btns'
+      }, [h(packages_button, {
+        props: {
+          content: getI18n('vxe.select.close'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeTreeSelect.closePanelEvent
+        }
+      })]) : renderEmptyElement($xeTreeSelect)])]) : renderEmptyElement($xeTreeSelect)])] : [])]);
     }
   },
   watch: {
@@ -60444,6 +60649,10 @@ function tree_select_createInternalData() {
   },
   mounted: function mounted() {
     var $xeTreeSelect = this;
+    var props = $xeTreeSelect;
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(props.autoClose)) {
+      warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable']);
+    }
     globalEvents.on($xeTreeSelect, 'mousewheel', $xeTreeSelect.handleGlobalMousewheelEvent);
     globalEvents.on($xeTreeSelect, 'mousedown', $xeTreeSelect.handleGlobalMousedownEvent);
     globalEvents.on($xeTreeSelect, 'blur', $xeTreeSelect.handleGlobalBlurEvent);