vxe-pc-ui 4.7.5 → 4.7.7

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

@@ -12,6 +12,7 @@ var _utils = require("../../ui/src/utils");
 var _log = require("../../ui/src/log");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _input = _interopRequireDefault(require("../../input/src/input"));
+var _button = _interopRequireDefault(require("../../button/src/button"));
 var _tree = _interopRequireDefault(require("../../tree/src/tree"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function getOptUniqueId() {
@@ -35,6 +36,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: Boolean,
       default: null
     },
+    filterable: Boolean,
+    filterConfig: Object,
     multiple: Boolean,
     className: [String, Function],
     popupClassName: [String, Function],
@@ -44,18 +47,44 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     optionProps: Object,
     size: {
       type: String,
-      default: () => (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size
+      default: () => (0, _ui.getConfig)().treeSelect.size || (0, _ui.getConfig)().size
     },
     remote: Boolean,
-    remoteMethod: Function,
+    remoteConfig: Function,
     popupConfig: Object,
     treeConfig: Object,
+    virtualYConfig: Object,
+    autoClose: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().treeSelect.autoClose
+    },
+    showTotalButoon: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().treeSelect.showTotalButoon
+    },
+    showCheckedButoon: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().treeSelect.showCheckedButoon
+    },
+    showClearButton: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().treeSelect.showClearButton
+    },
+    showExpandButton: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().treeSelect.showExpandButton
+    },
     transfer: {
       type: Boolean,
       default: null
-    }
+    },
+    /**
+     * 已废弃，被 remote-config.queryMethod 替换
+     * @deprecated
+     */
+    remoteMethod: Function
   },
-  emits: ['update:modelValue', 'change', 'clear', 'blur', 'focus', 'click', 'node-click'],
+  emits: ['update:modelValue', 'change', 'all-change', 'clear', 'blur', 'focus', 'click', 'node-click'],
   setup(props, context) {
     const {
       emit,
@@ -72,12 +101,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     } = (0, _ui.useSize)(props);
     const refElem = (0, _vue.ref)();
     const refInput = (0, _vue.ref)();
+    const refInpSearch = (0, _vue.ref)();
     const refTreeWrapper = (0, _vue.ref)();
     const refOptionPanel = (0, _vue.ref)();
+    const refTree = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
       initialized: false,
-      fullOptionList: [],
-      fullNodeMaps: {},
+      searchValue: '',
+      searchLoading: false,
       panelIndex: 0,
       panelStyle: {},
       panelPlacement: null,
@@ -87,7 +118,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       isActivated: false
     });
     const internalData = {
-      hpTimeout: undefined
+      // hpTimeout: undefined,
+      fullOptionList: [],
+      fullNodeMaps: {}
     };
     const refMaps = {
       refElem
@@ -188,15 +221,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const propsOpts = computePropsOpts.value;
       return propsOpts.hasChild || 'hasChild';
     });
+    const computeVirtualYOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().treeSelect.virtualYConfig, props.virtualYConfig);
+    });
+    const computeRemoteOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().treeSelect.remoteConfig, props.remoteConfig);
+    });
+    const computeFilterOpts = (0, _vue.computed)(() => {
+      const treeOpts = computeTreeOpts.value;
+      return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
+    });
     const computeSelectLabel = (0, _vue.computed)(() => {
       const {
         modelValue
       } = props;
       const {
         fullNodeMaps
-      } = reactData;
+      } = internalData;
       const labelField = computeLabelField.value;
-      return (_xeUtils.default.isArray(modelValue) ? modelValue : [modelValue]).map(val => {
+      const selectVals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
+      return selectVals.map(val => {
         const cacheItem = fullNodeMaps[val];
         return cacheItem ? cacheItem.item[labelField] : val;
       }).join(', ');
@@ -247,12 +291,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         options
       } = props;
+      const treeOpts = computeTreeOpts.value;
       const nodeKeyField = computeNodeKeyField.value;
       const childrenField = computeChildrenField.value;
       const valueField = computeValueField.value;
+      const {
+        transform
+      } = treeOpts;
       const nodeMaps = {};
       const keyMaps = {};
-      _xeUtils.default.eachTree(options, (item, index, items, path, parent, nodes) => {
+      const handleOptNode = (item, index, items, path, parent, nodes) => {
         let nodeid = getNodeid(item);
         if (!nodeid) {
           nodeid = getOptUniqueId();
@@ -272,11 +320,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           parent,
           nodes
         };
-      }, {
-        children: childrenField
-      });
-      reactData.fullOptionList = options || [];
-      reactData.fullNodeMaps = nodeMaps;
+      };
+      if (options) {
+        if (transform) {
+          options.forEach((item, index, items) => {
+            handleOptNode(item, index, items, [], null, []);
+          });
+        } else {
+          _xeUtils.default.eachTree(options, handleOptNode, {
+            children: childrenField
+          });
+        }
+      }
+      internalData.fullOptionList = options || [];
+      internalData.fullNodeMaps = nodeMaps;
     };
     const updateZindex = () => {
       if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
@@ -309,9 +366,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const showOptionPanel = () => {
       const {
-        loading
+        loading,
+        remote,
+        filterable
       } = props;
+      const {
+        fullOptionList
+      } = internalData;
       const isDisabled = computeIsDisabled.value;
+      const remoteOpts = computeRemoteOpts.value;
       if (!loading && !isDisabled) {
         clearTimeout(internalData.hpTimeout);
         if (!reactData.initialized) {
@@ -319,8 +382,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         reactData.isActivated = true;
         reactData.isAniVisible = true;
+        if (filterable) {
+          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+            handleSearchEvent();
+          }
+        }
         setTimeout(() => {
           reactData.visiblePanel = true;
+          handleFocusSearch();
         }, 10);
         updateZindex();
         updatePlacement();
@@ -335,7 +404,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const changeEvent = (evnt, selectValue) => {
       const {
         fullNodeMaps
-      } = reactData;
+      } = internalData;
       emitModel(selectValue);
       if (selectValue !== props.modelValue) {
         const cacheItem = fullNodeMaps[selectValue];
@@ -359,6 +428,65 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       clearValueEvent(evnt, null);
       hideOptionPanel();
     };
+    const allCheckedPanelEvent = params => {
+      const {
+        $event
+      } = params;
+      const {
+        multiple,
+        autoClose
+      } = props;
+      const $tree = refTree.value;
+      if (multiple) {
+        if ($tree) {
+          $tree.setAllCheckboxNode(true).then(({
+            checkNodeKeys
+          }) => {
+            changeEvent($event, checkNodeKeys);
+            dispatchEvent('all-change', {
+              value: checkNodeKeys
+            }, $event);
+            if (autoClose) {
+              hideOptionPanel();
+            }
+          });
+        }
+      }
+    };
+    const clearCheckedPanelEvent = params => {
+      const {
+        $event
+      } = params;
+      const {
+        multiple,
+        autoClose
+      } = props;
+      const $tree = refTree.value;
+      if ($tree) {
+        const value = multiple ? [] : null;
+        $tree.clearCheckboxNode().then(() => {
+          if (autoClose) {
+            hideOptionPanel();
+          }
+        });
+        changeEvent($event, value);
+        dispatchEvent('clear', {
+          value
+        }, $event);
+      }
+    };
+    const allExpandPanelEvent = () => {
+      const $tree = refTree.value;
+      if ($tree) {
+        $tree.setAllExpandNode(true);
+      }
+    };
+    const clearExpandPanelEvent = () => {
+      const $tree = refTree.value;
+      if ($tree) {
+        $tree.clearAllExpandNode();
+      }
+    };
     const handleGlobalMousewheelEvent = evnt => {
       const {
         visiblePanel
@@ -400,6 +528,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         updatePlacement();
       }
     };
+    const handleFocusSearch = () => {
+      if (props.filterable) {
+        (0, _vue.nextTick)(() => {
+          const inpSearch = refInpSearch.value;
+          if (inpSearch) {
+            inpSearch.focus();
+          }
+        });
+      }
+    };
     const focusEvent = evnt => {
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled) {
@@ -421,6 +559,31 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       reactData.isActivated = false;
       dispatchEvent('blur', {}, evnt);
     };
+    const modelSearchEvent = value => {
+      reactData.searchValue = value;
+    };
+    const handleSearchEvent = () => {
+      const {
+        modelValue,
+        remote,
+        remoteMethod
+      } = props;
+      const {
+        searchValue
+      } = reactData;
+      const remoteOpts = computeRemoteOpts.value;
+      const queryMethod = remoteOpts.queryMethod || remoteMethod;
+      if (remote && queryMethod && remoteOpts.enabled) {
+        reactData.searchLoading = true;
+        Promise.resolve(queryMethod({
+          $treeSelect: $xeTreeSelect,
+          searchValue,
+          value: modelValue
+        })).then(() => (0, _vue.nextTick)()).catch(() => (0, _vue.nextTick)()).finally(() => {
+          reactData.searchLoading = false;
+        });
+      }
+    };
     const togglePanelEvent = params => {
       const {
         $event
@@ -468,13 +631,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         modelValue,
         multiple,
         options,
-        loading
+        loading,
+        filterable,
+        showTotalButoon,
+        showCheckedButoon,
+        showClearButton,
+        showExpandButton
       } = props;
       const {
         initialized,
         isActivated,
         isAniVisible,
-        visiblePanel
+        visiblePanel,
+        searchValue
       } = reactData;
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
@@ -497,6 +666,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const childrenField = computeChildrenField.value;
       const parentField = computeParentField.value;
       const hasChildField = computeHasChildField.value;
+      const virtualYOpts = computeVirtualYOpts.value;
+      const filterOpts = computeFilterOpts.value;
       if (formReadonly) {
         return (0, _vue.h)('div', {
           ref: refElem,
@@ -505,12 +676,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           class: 'vxe-tree-select-label'
         }, selectLabel)]);
       }
+      const selectVals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-tree-select', className ? _xeUtils.default.isFunction(className) ? className({
           $treeSelect: $xeTreeSelect
         }) : className : '', {
           [`size--${vSize}`]: vSize,
+          'is--filterable': filterable,
           'is--visible': visiblePanel,
           'is--disabled': isDisabled,
           'is--loading': loading,
@@ -526,6 +699,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         prefixIcon: props.prefixIcon,
         suffixIcon: loading ? (0, _ui.getIcon)().TREE_SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().TREE_SELECT_OPEN : (0, _ui.getIcon)().TREE_SELECT_CLOSE,
         modelValue: loading ? '' : selectLabel,
+        title: selectLabel,
         onClear: clearEvent,
         onClick: clickEvent,
         onFocus: focusEvent,
@@ -550,16 +724,55 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: reactData.panelStyle
       }, initialized ? [(0, _vue.h)('div', {
         class: 'vxe-tree-select--panel-wrapper'
-      }, [headerSlot ? (0, _vue.h)('div', {
+      }, [filterable ? (0, _vue.h)('div', {
+        class: 'vxe-tree-select--panel-search'
+      }, [(0, _vue.h)(_input.default, {
+        ref: refInpSearch,
+        class: 'vxe-tree-select-search--input',
+        modelValue: searchValue,
+        clearable: true,
+        disabled: false,
+        readonly: false,
+        placeholder: (0, _ui.getI18n)('vxe.treeSelect.search'),
+        prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH,
+        'onUpdate:modelValue': modelSearchEvent
+      })]) : (0, _ui.renderEmptyElement)($xeTreeSelect), showTotalButoon || showCheckedButoon && multiple || showClearButton || showExpandButton || headerSlot ? (0, _vue.h)('div', {
         class: 'vxe-tree-select--panel-header'
-      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeTreeSelect), (0, _vue.h)('div', {
+      }, headerSlot ? headerSlot({}) : [(0, _vue.h)('div', {
+        class: 'vxe-tree-select--header-button'
+      }, [showTotalButoon ? (0, _vue.h)('div', {
+        class: 'vxe-tree-select--header-total'
+      }, (0, _ui.getI18n)('vxe.treeSelect.total', [selectVals.length])) : (0, _ui.renderEmptyElement)($xeTreeSelect), (0, _vue.h)('div', {
+        class: 'vxe-tree-select--header-btns'
+      }, [showCheckedButoon && multiple ? (0, _vue.h)(_button.default, {
+        content: (0, _ui.getI18n)('vxe.treeSelect.allChecked'),
+        mode: 'text',
+        onClick: allCheckedPanelEvent
+      }) : (0, _ui.renderEmptyElement)($xeTreeSelect), showClearButton ? (0, _vue.h)(_button.default, {
+        content: (0, _ui.getI18n)('vxe.treeSelect.clearChecked'),
+        mode: 'text',
+        onClick: clearCheckedPanelEvent
+      }) : (0, _ui.renderEmptyElement)($xeTreeSelect), showExpandButton ? (0, _vue.h)(_button.default, {
+        content: (0, _ui.getI18n)('vxe.treeSelect.allExpand'),
+        mode: 'text',
+        onClick: allExpandPanelEvent
+      }) : (0, _ui.renderEmptyElement)($xeTreeSelect), showExpandButton ? (0, _vue.h)(_button.default, {
+        content: (0, _ui.getI18n)('vxe.treeSelect.clearExpand'),
+        mode: 'text',
+        onClick: clearExpandPanelEvent
+      }) : (0, _ui.renderEmptyElement)($xeTreeSelect)])])]) : (0, _ui.renderEmptyElement)($xeTreeSelect), (0, _vue.h)('div', {
         class: 'vxe-tree-select--panel-body'
       }, [(0, _vue.h)('div', {
         ref: refTreeWrapper,
         class: 'vxe-tree-select-tree--wrapper',
         style: popupWrapperStyle
       }, [(0, _vue.h)(_tree.default, {
+        ref: refTree,
         class: 'vxe-tree-select--tree',
+        height: popupOpts.height ? '100%' : treeOpts.height,
+        minHeight: treeOpts.minHeight,
+        maxHeight: popupOpts.height ? '' : treeOpts.maxHeight,
+        autoResize: true,
         data: options,
         indent: treeOpts.indent,
         showRadio: !multiple,
@@ -587,6 +800,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         iconOpen: treeOpts.iconOpen,
         iconLoaded: treeOpts.iconLoaded,
         iconClose: treeOpts.iconClose,
+        filterValue: searchValue,
+        filterConfig: filterOpts,
+        virtualYConfig: virtualYOpts,
         onNodeClick: nodeClickEvent,
         onRadioChange: radioChangeEvent,
         onCheckboxChange: checkboxChangeEvent,

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_input=_interopRequireDefault(require("../../input/src/input")),_tree=_interopRequireDefault(require("../../tree/src/tree"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getOptUniqueId(){return _xeUtils.default.uniqueId("node_")}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTreeSelect",props:{modelValue:[String,Number,Array],clearable:Boolean,placeholder:{type:String,default:()=>_xeUtils.default.eqNull((0,_ui.getConfig)().treeSelect.placeholder)?(0,_ui.getI18n)("vxe.base.pleaseSelect"):(0,_ui.getConfig)().treeSelect.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:()=>(0,_ui.getConfig)().select.size||(0,_ui.getConfig)().size},remote:Boolean,remoteMethod:Function,popupConfig:Object,treeConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","blur","focus","click","node-click"],setup(w,e){const{emit:a,slots:N}=e,t=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),n=(0,_vue.inject)("$xeTable",null),o=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("xeFormItemInfo",null);var l=_xeUtils.default.uniqueId();const O=(0,_ui.useSize)(w)["computeSize"],q=(0,_vue.ref)(),j=(0,_vue.ref)(),k=(0,_vue.ref)(),z=(0,_vue.ref)(),A=(0,_vue.reactive)({initialized:!1,fullOptionList:[],fullNodeMaps:{},panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),r={hpTimeout:void 0},s={refElem:q},U=(0,_vue.computed)(()=>{var e=w["readonly"];return null===e?!!o&&o.props.readonly:e}),L=(0,_vue.computed)(()=>{var e=w["disabled"];return null===e?!!o&&o.props.disabled:e}),M=(0,_vue.computed)(()=>{var e=w["transfer"];if(null===e){var l=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(l))return l;if(n||t||i||o)return!0}return e}),V=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.popupConfig,w.popupConfig)),R=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.treeConfig,w.treeConfig,{data:void 0})),G=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({isHover:!0},e.nodeConfig)}),J=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({showIcon:!!e.showCheckbox},e.checkboxConfig,{trigger:"node"})}),Q=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({showIcon:!!e.showRadio},e.radioConfig,{trigger:"node"})}),d=(0,_vue.computed)(()=>w.optionProps||{}),$=(0,_vue.computed)(()=>{return R.value.keyField||"id"}),D=(0,_vue.computed)(()=>{return d.value.label||"label"}),B=(0,_vue.computed)(()=>{return d.value.value||"value"}),K=(0,_vue.computed)(()=>{return d.value.children||"children"}),W=(0,_vue.computed)(()=>{return d.value.parent||"parentField"}),X=(0,_vue.computed)(()=>{return d.value.hasChild||"hasChild"}),Y=(0,_vue.computed)(()=>{var e=w["modelValue"];const t=A["fullNodeMaps"],i=D.value;return(_xeUtils.default.isArray(e)?e:[e]).map(e=>{var l=t[e];return l?l.item[i]:e}).join(", ")}),ee=(0,_vue.computed)(()=>{var{height:e,width:l}=V.value,t={};return l&&(t.width=(0,_dom.toCssUnit)(l)),e&&(t.height=(0,_dom.toCssUnit)(e),t.maxHeight=(0,_dom.toCssUnit)(e)),t}),m={},H={xID:l,props:w,context:e,reactData:A,internalData:r,getRefMaps:()=>s,getComputeMaps:()=>m},c=(e,l,t)=>{a(e,(0,_ui.createEvent)(t,{$treeSelect:H},l))};l={dispatchEvent:c};const v=()=>{var e=w["options"];const r=$.value;var l=K.value;const s=B.value,d={},c={};_xeUtils.default.eachTree(e,(e,l,t,i,a,n)=>{let o=(e=>{e=e[$.value];return e?encodeURIComponent(e):""})(e);o=o||getOptUniqueId(),c[o]&&(0,_log.errLog)("vxe.error.repeatKey",[r,o]),c[o]=!0;var u=e[s];d[u]&&(0,_log.errLog)("vxe.error.repeatKey",[s,u]),d[u]={item:e,index:l,items:t,parent:a,nodes:n}},{children:l}),A.fullOptionList=e||[],A.fullNodeMaps=d},p=()=>{const t=w["placement"],i=A["panelIndex"],a=q.value,n=z.value,o=M.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(a,n,{placement:t,teleportTo:o}),l=Object.assign(e.style,{zIndex:i});A.panelStyle=l,A.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},_=()=>{var e=w["loading"],l=L.value;e||l||(clearTimeout(r.hpTimeout),A.initialized||(A.initialized=!0),A.isActivated=!0,A.isAniVisible=!0,setTimeout(()=>{A.visiblePanel=!0},10),A.panelIndex<(0,_utils.getLastZIndex)()&&(A.panelIndex=(0,_utils.nextZIndex)()),p())},g=()=>{A.visiblePanel=!1,r.hpTimeout=setTimeout(()=>{A.isAniVisible=!1},350)},f=(e,l)=>{var t,i=A["fullNodeMaps"];t=l,a("update:modelValue",t),l!==w.modelValue&&(t=i[l],c("change",{value:l,option:t?t.item:null},e),o)&&u&&o.triggerItemEvent(e,u.itemConfig.field,l)},h=(e,l)=>{f(e,l),c("clear",{value:l},e)},le=(e,l)=>{h(l,null),g()},x=e=>{var l=A["visiblePanel"];L.value||l&&(l=z.value,((0,_dom.getEventTargetNode)(e,l).flag?p:g)())},b=e=>{var l,t,i=A["visiblePanel"];L.value||(l=q.value,t=z.value,A.isActivated=(0,_dom.getEventTargetNode)(e,l).flag||(0,_dom.getEventTargetNode)(e,t).flag,i&&!A.isActivated&&g())},C=()=>{g()},E=()=>{var e=A["visiblePanel"];e&&p()},te=e=>{L.value||A.visiblePanel||(A.triggerFocusPanel=!0,_(),setTimeout(()=>{A.triggerFocusPanel=!1},150)),c("focus",{},e)},ie=e=>{Z(e),c("click",{},e)},ae=e=>{A.isActivated=!1,c("blur",{},e)},Z=e=>{e=e.$event;e.preventDefault(),A.triggerFocusPanel?A.triggerFocusPanel=!1:(A.visiblePanel?g:_)()},ne=e=>{var l=e["$event"];c("node-click",e,l)},oe=e=>{var{value:e,$event:l}=e;f(l,e),g()},ue=e=>{var{value:e,$event:l}=e;f(l,e)},re=()=>{v()};Object.assign(H,l,{});return(0,_vue.watch)(()=>w.options,()=>{v()}),v(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(H,"mousewheel",x),_ui.globalEvents.on(H,"mousedown",b),_ui.globalEvents.on(H,"blur",C),_ui.globalEvents.on(H,"resize",E)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(H,"mousewheel"),_ui.globalEvents.off(H,"mousedown"),_ui.globalEvents.off(H,"blur"),_ui.globalEvents.off(H,"resize")}),(0,_vue.provide)("$xeTreeSelect",H),H.renderVN=()=>{var{className:e,modelValue:l,multiple:t,options:i,loading:a}=w,{initialized:n,isActivated:o,isAniVisible:u,visiblePanel:r}=A,s=O.value,d=L.value,c=Y.value,v=M.value,p=U.value,_=ee.value,g=N.header,f=N.footer;const m=N.prefix;var h=V.value.className||w.popupClassName,x=R.value,b=G.value,C=J.value,E=Q.value,y=$.value,I=D.value,S=B.value,F=K.value,T=W.value,P=X.value;return p?(0,_vue.h)("div",{ref:q,class:["vxe-tree-select--readonly",e]},[(0,_vue.h)("span",{class:"vxe-tree-select-label"},c)]):(0,_vue.h)("div",{ref:q,class:["vxe-tree-select",e?_xeUtils.default.isFunction(e)?e({$treeSelect:H}):e:"",{["size--"+s]:s,"is--visible":r,"is--disabled":d,"is--loading":a,"is--active":o}]},[(0,_vue.h)(_input.default,{ref:j,clearable:w.clearable,placeholder:a?(0,_ui.getI18n)("vxe.select.loadingText"):w.placeholder,readonly:!0,disabled:d,type:"text",prefixIcon:w.prefixIcon,suffixIcon:a?(0,_ui.getIcon)().TREE_SELECT_LOADED:r?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:a?"":c,onClear:le,onClick:ie,onFocus:te,onBlur:ae,onSuffixClick:Z},m?{prefix:()=>m({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!v||!n},[(0,_vue.h)("div",{ref:z,class:["vxe-table--ignore-clear vxe-tree-select--panel",h?_xeUtils.default.isFunction(h)?h({$treeSelect:H}):h:"",{["size--"+s]:s,"is--transfer":v,"ani--leave":!a&&u,"ani--enter":!a&&r}],placement:A.panelPlacement,style:A.panelStyle},n?[(0,_vue.h)("div",{class:"vxe-tree-select--panel-wrapper"},[g?(0,_vue.h)("div",{class:"vxe-tree-select--panel-header"},g({})):(0,_ui.renderEmptyElement)(H),(0,_vue.h)("div",{class:"vxe-tree-select--panel-body"},[(0,_vue.h)("div",{ref:k,class:"vxe-tree-select-tree--wrapper",style:_},[(0,_vue.h)(_tree.default,{class:"vxe-tree-select--tree",data:i,indent:x.indent,showRadio:!t,radioConfig:E,checkNodeKey:t?null:l,showCheckbox:!!t,checkNodeKeys:t?l:null,checkboxConfig:C,titleField:I,valueField:S,keyField:y,childrenField:x.childrenField||F,parentField:x.parentField||T,hasChildField:x.hasChildField||P,accordion:x.accordion,expandAll:x.expandAll,nodeConfig:b,lazy:x.lazy,loadMethod:x.loadMethod,toggleMethod:x.toggleMethod,transform:x.transform,trigger:x.trigger,showIcon:x.showIcon,showLine:x.showLine,iconOpen:x.iconOpen,iconLoaded:x.iconLoaded,iconClose:x.iconClose,onNodeClick:ne,onRadioChange:oe,onCheckboxChange:ue,onLoadSuccess:re})])]),f?(0,_vue.h)("div",{class:"vxe-tree-select--panel-footer"},f({})):(0,_ui.renderEmptyElement)(H)])]:[])])])},H},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_input=_interopRequireDefault(require("../../input/src/input")),_button=_interopRequireDefault(require("../../button/src/button")),_tree=_interopRequireDefault(require("../../tree/src/tree"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getOptUniqueId(){return _xeUtils.default.uniqueId("node_")}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTreeSelect",props:{modelValue:[String,Number,Array],clearable:Boolean,placeholder:{type:String,default:()=>_xeUtils.default.eqNull((0,_ui.getConfig)().treeSelect.placeholder)?(0,_ui.getI18n)("vxe.base.pleaseSelect"):(0,_ui.getConfig)().treeSelect.placeholder},readonly:{type:Boolean,default:null},loading:Boolean,disabled:{type:Boolean,default:null},filterable:Boolean,filterConfig:Object,multiple:Boolean,className:[String,Function],popupClassName:[String,Function],prefixIcon:String,placement:String,options:Array,optionProps:Object,size:{type:String,default:()=>(0,_ui.getConfig)().treeSelect.size||(0,_ui.getConfig)().size},remote:Boolean,remoteConfig:Function,popupConfig:Object,treeConfig:Object,virtualYConfig:Object,autoClose:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.autoClose},showTotalButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showTotalButoon},showCheckedButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showCheckedButoon},showClearButton:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showClearButton},showExpandButton:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showExpandButton},transfer:{type:Boolean,default:null},remoteMethod:Function},emits:["update:modelValue","change","all-change","clear","blur","focus","click","node-click"],setup(U,e){const{emit:n,slots:L}=e,l=(0,_vue.inject)("$xeModal",null),a=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),i=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const z=(0,_ui.useSize)(U)["computeSize"],M=(0,_vue.ref)(),R=(0,_vue.ref)(),$=(0,_vue.ref)(),ae=(0,_vue.ref)(),D=(0,_vue.ref)(),H=(0,_vue.ref)(),K=(0,_vue.reactive)({initialized:!1,searchValue:"",searchLoading:!1,panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),v={fullOptionList:[],fullNodeMaps:{}},h={refElem:M},ne=(0,_vue.computed)(()=>{var e=U["readonly"];return null===e?!!i&&i.props.readonly:e}),Y=(0,_vue.computed)(()=>{var e=U["disabled"];return null===e?!!i&&i.props.disabled:e}),Z=(0,_vue.computed)(()=>{var e=U["transfer"];if(null===e){var t=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||l||a||i)return!0}return e}),G=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.popupConfig,U.popupConfig)),J=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.treeConfig,U.treeConfig,{data:void 0})),oe=(0,_vue.computed)(()=>{var e=J.value;return Object.assign({isHover:!0},e.nodeConfig)}),ie=(0,_vue.computed)(()=>{var e=J.value;return Object.assign({showIcon:!!e.showCheckbox},e.checkboxConfig,{trigger:"node"})}),ue=(0,_vue.computed)(()=>{var e=J.value;return Object.assign({showIcon:!!e.showRadio},e.radioConfig,{trigger:"node"})}),r=(0,_vue.computed)(()=>U.optionProps||{}),Q=(0,_vue.computed)(()=>{return J.value.keyField||"id"}),W=(0,_vue.computed)(()=>{return r.value.label||"label"}),X=(0,_vue.computed)(()=>{return r.value.value||"value"}),ee=(0,_vue.computed)(()=>{return r.value.children||"children"}),re=(0,_vue.computed)(()=>{return r.value.parent||"parentField"}),se=(0,_vue.computed)(()=>{return r.value.hasChild||"hasChild"}),ce=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.virtualYConfig,U.virtualYConfig)),s=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.remoteConfig,U.remoteConfig)),de=(0,_vue.computed)(()=>{var e=J.value;return Object.assign({},e.filterConfig,U.filterConfig)}),ve=(0,_vue.computed)(()=>{var e=U["modelValue"];const l=v["fullNodeMaps"],a=W.value;return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).map(e=>{var t=l[e];return t?t.item[a]:e}).join(", ")}),pe=(0,_vue.computed)(()=>{var{height:e,width:t}=G.value,l={};return t&&(l.width=(0,_dom.toCssUnit)(t)),e&&(l.height=(0,_dom.toCssUnit)(e),l.maxHeight=(0,_dom.toCssUnit)(e)),l}),m={},te={xID:t,props:U,context:e,reactData:K,internalData:v,getRefMaps:()=>h,getComputeMaps:()=>m},c=(e,t,l)=>{n(e,(0,_ui.createEvent)(l,{$treeSelect:te},t))};t={dispatchEvent:c};const d=()=>{var e=U["options"],t=J.value;const r=Q.value;var l=ee.value;const s=X.value;t=t.transform;const c={},d={},a=(e,t,l,a,n,o)=>{let i=(e=>{e=e[Q.value];return e?encodeURIComponent(e):""})(e);i=i||getOptUniqueId(),d[i]&&(0,_log.errLog)("vxe.error.repeatKey",[r,i]),d[i]=!0;var u=e[s];c[u]&&(0,_log.errLog)("vxe.error.repeatKey",[s,u]),c[u]={item:e,index:t,items:l,parent:n,nodes:o}};e&&(t?e.forEach((e,t,l)=>{a(e,t,l,0,null,[])}):_xeUtils.default.eachTree(e,a,{children:l})),v.fullOptionList=e||[],v.fullNodeMaps=c},p=()=>{const l=U["placement"],a=K["panelIndex"],n=M.value,o=D.value,i=Z.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,o,{placement:l,teleportTo:i}),t=Object.assign(e.style,{zIndex:a});K.panelStyle=t,K.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},_=()=>{var{loading:e,remote:t,filterable:l}=U,a=v["fullOptionList"],n=Y.value,o=s.value;e||n||(clearTimeout(v.hpTimeout),K.initialized||(K.initialized=!0),K.isActivated=!0,K.isAniVisible=!0,l&&t&&o.enabled&&o.autoLoad&&!a.length&&({modelValue:e,remote:n,remoteMethod:l}=U,t=K["searchValue"],o=s.value,a=o.queryMethod||l,n)&&a&&o.enabled&&(K.searchLoading=!0,Promise.resolve(a({$treeSelect:te,searchValue:t,value:e})).then(()=>(0,_vue.nextTick)()).catch(()=>(0,_vue.nextTick)()).finally(()=>{K.searchLoading=!1})),setTimeout(()=>{K.visiblePanel=!0,U.filterable&&(0,_vue.nextTick)(()=>{var e=$.value;e&&e.focus()})},10),K.panelIndex<(0,_utils.getLastZIndex)()&&(K.panelIndex=(0,_utils.nextZIndex)()),p())},g=()=>{K.visiblePanel=!1,v.hpTimeout=setTimeout(()=>{K.isAniVisible=!1},350)},f=(e,t)=>{var l,a=v["fullNodeMaps"];l=t,n("update:modelValue",l),t!==U.modelValue&&(l=a[t],c("change",{value:t,option:l?l.item:null},e),i)&&u&&i.triggerItemEvent(e,u.itemConfig.field,t)},x=(e,t)=>{f(e,t),c("clear",{value:t},e)},_e=(e,t)=>{x(t,null),g()},ge=e=>{const t=e["$event"],{multiple:l,autoClose:a}=U;e=H.value;l&&e&&e.setAllCheckboxNode(!0).then(({checkNodeKeys:e})=>{f(t,e),c("all-change",{value:e},t),a&&g()})},fe=e=>{e=e.$event;const{multiple:t,autoClose:l}=U;var a,n=H.value;n&&(a=t?[]:null,n.clearCheckboxNode().then(()=>{l&&g()}),f(e,a),c("clear",{value:a},e))},he=()=>{var e=H.value;e&&e.setAllExpandNode(!0)},me=()=>{var e=H.value;e&&e.clearAllExpandNode()},b=e=>{var t=K["visiblePanel"];Y.value||t&&(t=D.value,((0,_dom.getEventTargetNode)(e,t).flag?p:g)())},C=e=>{var t,l,a=K["visiblePanel"];Y.value||(t=M.value,l=D.value,K.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,l).flag,a&&!K.isActivated&&g())},E=()=>{g()},y=()=>{var e=K["visiblePanel"];e&&p()},xe=e=>{Y.value||K.visiblePanel||(K.triggerFocusPanel=!0,_(),setTimeout(()=>{K.triggerFocusPanel=!1},150)),c("focus",{},e)},be=e=>{le(e),c("click",{},e)},Ce=e=>{K.isActivated=!1,c("blur",{},e)},Ee=e=>{K.searchValue=e},le=e=>{e=e.$event;e.preventDefault(),K.triggerFocusPanel?K.triggerFocusPanel=!1:(K.visiblePanel?g:_)()},ye=e=>{var t=e["$event"];c("node-click",e,t)},Se=e=>{var{value:e,$event:t}=e;f(t,e),g()},Ie=e=>{var{value:e,$event:t}=e;f(t,e)},ke=()=>{d()};Object.assign(te,t,{});return(0,_vue.watch)(()=>U.options,()=>{d()}),d(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(te,"mousewheel",b),_ui.globalEvents.on(te,"mousedown",C),_ui.globalEvents.on(te,"blur",E),_ui.globalEvents.on(te,"resize",y)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(te,"mousewheel"),_ui.globalEvents.off(te,"mousedown"),_ui.globalEvents.off(te,"blur"),_ui.globalEvents.off(te,"resize")}),(0,_vue.provide)("$xeTreeSelect",te),te.renderVN=()=>{var{className:e,modelValue:t,multiple:l,options:a,loading:n,filterable:o,showTotalButoon:i,showCheckedButoon:u,showClearButton:r,showExpandButton:s}=U,{initialized:c,isActivated:d,isAniVisible:v,visiblePanel:p,searchValue:_}=K,g=z.value,f=Y.value,h=ve.value,m=Z.value,x=ne.value,b=pe.value,C=L.header,E=L.footer;const y=L.prefix;var S=G.value,I=S.className||U.popupClassName,k=J.value,w=oe.value,T=ie.value,N=ue.value,B=Q.value,O=W.value,F=X.value,P=ee.value,V=re.value,q=se.value,j=ce.value,A=de.value;return x?(0,_vue.h)("div",{ref:M,class:["vxe-tree-select--readonly",e]},[(0,_vue.h)("span",{class:"vxe-tree-select-label"},h)]):(x=_xeUtils.default.eqNull(t)?[]:_xeUtils.default.isArray(t)?t:[t],(0,_vue.h)("div",{ref:M,class:["vxe-tree-select",e?_xeUtils.default.isFunction(e)?e({$treeSelect:te}):e:"",{["size--"+g]:g,"is--filterable":o,"is--visible":p,"is--disabled":f,"is--loading":n,"is--active":d}]},[(0,_vue.h)(_input.default,{ref:R,clearable:U.clearable,placeholder:n?(0,_ui.getI18n)("vxe.select.loadingText"):U.placeholder,readonly:!0,disabled:f,type:"text",prefixIcon:U.prefixIcon,suffixIcon:n?(0,_ui.getIcon)().TREE_SELECT_LOADED:p?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:n?"":h,title:h,onClear:_e,onClick:be,onFocus:xe,onBlur:Ce,onSuffixClick:le},y?{prefix:()=>y({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!m||!c},[(0,_vue.h)("div",{ref:D,class:["vxe-table--ignore-clear vxe-tree-select--panel",I?_xeUtils.default.isFunction(I)?I({$treeSelect:te}):I:"",{["size--"+g]:g,"is--transfer":m,"ani--leave":!n&&v,"ani--enter":!n&&p}],placement:K.panelPlacement,style:K.panelStyle},c?[(0,_vue.h)("div",{class:"vxe-tree-select--panel-wrapper"},[o?(0,_vue.h)("div",{class:"vxe-tree-select--panel-search"},[(0,_vue.h)(_input.default,{ref:$,class:"vxe-tree-select-search--input",modelValue:_,clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.treeSelect.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":Ee})]):(0,_ui.renderEmptyElement)(te),i||u&&l||r||s||C?(0,_vue.h)("div",{class:"vxe-tree-select--panel-header"},C?C({}):[(0,_vue.h)("div",{class:"vxe-tree-select--header-button"},[i?(0,_vue.h)("div",{class:"vxe-tree-select--header-total"},(0,_ui.getI18n)("vxe.treeSelect.total",[x.length])):(0,_ui.renderEmptyElement)(te),(0,_vue.h)("div",{class:"vxe-tree-select--header-btns"},[u&&l?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.allChecked"),mode:"text",onClick:ge}):(0,_ui.renderEmptyElement)(te),r?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.clearChecked"),mode:"text",onClick:fe}):(0,_ui.renderEmptyElement)(te),s?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.allExpand"),mode:"text",onClick:he}):(0,_ui.renderEmptyElement)(te),s?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.clearExpand"),mode:"text",onClick:me}):(0,_ui.renderEmptyElement)(te)])])]):(0,_ui.renderEmptyElement)(te),(0,_vue.h)("div",{class:"vxe-tree-select--panel-body"},[(0,_vue.h)("div",{ref:ae,class:"vxe-tree-select-tree--wrapper",style:b},[(0,_vue.h)(_tree.default,{ref:H,class:"vxe-tree-select--tree",height:S.height?"100%":k.height,minHeight:k.minHeight,maxHeight:S.height?"":k.maxHeight,autoResize:!0,data:a,indent:k.indent,showRadio:!l,radioConfig:N,checkNodeKey:l?null:t,showCheckbox:!!l,checkNodeKeys:l?t:null,checkboxConfig:T,titleField:O,valueField:F,keyField:B,childrenField:k.childrenField||P,parentField:k.parentField||V,hasChildField:k.hasChildField||q,accordion:k.accordion,expandAll:k.expandAll,nodeConfig:w,lazy:k.lazy,loadMethod:k.loadMethod,toggleMethod:k.toggleMethod,transform:k.transform,trigger:k.trigger,showIcon:k.showIcon,showLine:k.showLine,iconOpen:k.iconOpen,iconLoaded:k.iconLoaded,iconClose:k.iconClose,filterValue:_,filterConfig:A,virtualYConfig:j,onNodeClick:ye,onRadioChange:Se,onCheckboxChange:Ie,onLoadSuccess:ke})])]),E?(0,_vue.h)("div",{class:"vxe-tree-select--panel-footer"},E({})):(0,_ui.renderEmptyElement)(te)])]:[])])]))},te},render(){return this.renderVN()}});

package/lib/tree-select/style/style.css

@@ -8,6 +8,12 @@
 .vxe-tree-select > .vxe-input .vxe-input--inner {
   cursor: pointer;
 }
+.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper {
+  padding-top: 0;
+}
+.vxe-tree-select.is--filterable .vxe-tree-select--panel-header {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
 .vxe-tree-select.is--disabled > .vxe-input .vxe-input--inner {
   cursor: no-drop;
 }
@@ -82,8 +88,30 @@
   width: 100%;
 }
 
+.vxe-tree-select--header-button {
+  display: flex;
+  flex-direction: row;
+}
+
+.vxe-tree-select--header-total {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-left: 0.8em;
+}
+
+.vxe-tree-select--header-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: right;
+}
+
 .vxe-tree-select--panel-wrapper {
   display: inline-flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -92,6 +120,14 @@
   pointer-events: auto;
 }
 
+.vxe-tree-select--panel-search {
+  display: block;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-tree-select--panel-search .vxe-tree-select-search--input {
+  width: 100%;
+}
+
 .vxe-tree-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
@@ -109,7 +145,6 @@
   position: relative;
   overflow: auto;
   padding: var(--vxe-ui-layout-padding-default);
-  max-height: 21em;
   width: 30em;
   outline: 0;
 }

package/lib/tree-select/style/style.min.css

@@ -1 +1 @@
-.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--panel-wrapper{display:inline-flex;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);max-height:21em;width:30em;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper{padding-top:0}.vxe-tree-select.is--filterable .vxe-tree-select--panel-header{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--header-button{display:flex;flex-direction:row}.vxe-tree-select--header-total{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;padding-left:.8em}.vxe-tree-select--header-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.vxe-tree-select--panel-wrapper{display:inline-flex;flex-direction:column;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-search{display:block;padding:var(--vxe-ui-layout-padding-default)}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);width:30em;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/lib/ui/index.js

@@ -26,7 +26,7 @@ Object.keys(_core).forEach(function (key) {
 });
 var _dynamics = require("../dynamics");
 var _log = require("./src/log");
-const version = exports.version = "4.7.5";
+const version = exports.version = "4.7.7";
 _core.VxeUI.uiVersion = version;
 _core.VxeUI.dynamicApp = _dynamics.dynamicApp;
 function config(options) {
@@ -316,7 +316,7 @@ _core.VxeUI.setup = setup;
     },
     virtualYConfig: {
       enabled: true,
-      gt: 100,
+      gt: 50,
       oSize: 2
     }
   },
@@ -373,16 +373,32 @@ _core.VxeUI.setup = setup;
     isArrow: true
   },
   tree: {
+    // autoResize: false,
     indent: 20,
     minHeight: 60,
     radioConfig: {
       strict: true
+    },
+    virtualYConfig: {
+      enabled: true,
+      gt: 50,
+      oSize: 2
     }
   },
   treeSelect: {
+    autoClose: true,
+    virtualYConfig: {
+      enabled: true,
+      gt: 0,
+      oSize: 2
+    },
     treeConfig: {
+      maxHeight: 300,
       radioConfig: {},
-      checkboxConfig: {}
+      checkboxConfig: {},
+      filterConfig: {
+        autoExpandAll: true
+      }
     }
   },
   upload: {