vxe-pc-ui 4.16.4 → 4.16.6

package/lib/icon-picker/src/icon-picker.js

@@ -24,7 +24,7 @@ function createReactData() {
     isAniVisible: false,
     isActivated: false,
     searchValue: '',
-    iconGroups: []
+    iconList: []
   };
 }
 function createInternalData() {
@@ -166,10 +166,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         chunkSize,
         height,
+        chunkWidth,
         maxHeight
       } = popupOpts;
       const stys = {
-        '--vxe-ui-icon-picker-item-width': `${100 / (chunkSize || 4)}%`
+        '--vxe-ui-icon-picker-item-width': chunkWidth ? (0, _dom.toCssUnit)(chunkWidth) : `${100 / (chunkSize || 4)}%`
       };
       if (height) {
         stys['--vxe-ui-icon-picker-panel-height'] = (0, _dom.toCssUnit)(height);
@@ -230,8 +231,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const btnTransfer = computeBtnTransfer.value;
       const popupOpts = computePopupOpts.value;
       const {
-        width,
-        transfer
+        width
       } = popupOpts;
       const handleStyle = () => {
         const ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
@@ -240,12 +240,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           teleportTo: btnTransfer
         });
         const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
+          zIndex: panelIndex,
+          minWidth: undefined
         });
         if (width) {
           Object.assign(panelStyle, {
-            width: (0, _dom.toCssUnit)(width),
-            minWidth: transfer ? undefined : (0, _dom.toCssUnit)(width)
+            width: (0, _dom.toCssUnit)(width)
           });
         }
         reactData.panelStyle = panelStyle;
@@ -305,10 +305,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         filterMethod
       } = filterOpts;
-      const popupOpts = computePopupOpts.value;
-      const {
-        chunkSize
-      } = popupOpts;
       const iconList = computeIconList.value;
       let visibleList = iconList;
       if (searchValue) {
@@ -325,7 +321,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           return item.title && `${item.title}`.toLowerCase().indexOf(searchTxt) > -1 || item.icon && `${item.icon}`.indexOf(searchTxt) > -1;
         });
       }
-      reactData.iconGroups = _xeUtils.default.chunk(visibleList, chunkSize || 4);
+      reactData.iconList = visibleList;
     };
     const changeEvent = (evnt, selectValue) => {
       reactData.selectIcon = selectValue;
@@ -540,48 +536,46 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       const {
         selectIcon,
-        iconGroups
+        iconList
       } = reactData;
-      if (!iconGroups.length) {
+      if (!iconList.length) {
         return (0, _vue.h)('div', {
           class: 'vxe-ico-picker--empty-placeholder'
         }, (0, _ui.getI18n)('vxe.iconPicker.emptyText'));
       }
       return (0, _vue.h)('div', {
         class: 'vxe-ico-picker--list-wrapper'
-      }, iconGroups.map(list => {
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-ico-picker--list'
+      }, iconList.map(item => {
+        const {
+          iconRender
+        } = item;
+        const compConf = iconRender ? _ui.renderer.get(iconRender.name) : null;
+        const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         return (0, _vue.h)('div', {
-          class: 'vxe-ico-picker--list'
-        }, list.map(item => {
-          const {
-            iconRender
-          } = item;
-          const compConf = iconRender ? _ui.renderer.get(iconRender.name) : null;
-          const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
-          return (0, _vue.h)('div', {
-            class: ['vxe-ico-picker--item', {
-              'is--selected': selectIcon === item.icon
-            }]
-          }, [(0, _vue.h)('div', {
-            class: 'vxe-ico-picker--item-inner',
-            onClick(evnt) {
-              const isDisabled = computeIsDisabled.value;
-              if (!isDisabled) {
-                handleClickIconEvent(evnt, item);
-              }
+          class: ['vxe-ico-picker--item', {
+            'is--selected': selectIcon === item.icon
+          }]
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-ico-picker--item-inner',
+          onClick(evnt) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
+              handleClickIconEvent(evnt, item);
             }
-          }, [(0, _vue.h)('div', {
-            class: 'vxe-ico-picker--item-icon'
-          }, iconMethod && iconRender ? (0, _vn.getSlotVNs)(iconMethod(iconRender, {
-            $iconPicker: $xeIconPicker,
-            option: item
-          })) : [(0, _vue.h)('i', {
-            class: item.icon || ''
-          })]), showIconTitle ? (0, _vue.h)('div', {
-            class: 'vxe-ico-picker--item-title'
-          }, `${item.title || ''}`) : (0, _ui.renderEmptyElement)($xeIconPicker)])]);
-        }));
-      }));
+          }
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-ico-picker--item-icon'
+        }, iconMethod && iconRender ? (0, _vn.getSlotVNs)(iconMethod(iconRender, {
+          $iconPicker: $xeIconPicker,
+          option: item
+        })) : [(0, _vue.h)('i', {
+          class: item.icon || ''
+        })]), showIconTitle ? (0, _vue.h)('div', {
+          class: 'vxe-ico-picker--item-title'
+        }, `${item.title || ''}`) : (0, _ui.renderEmptyElement)($xeIconPicker)])]);
+      }))]);
     };
     const renderIconView = () => {
       const {

package/lib/icon-picker/src/icon-picker.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_input=_interopRequireDefault(require("../../input/src/input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{initialized:!1,selectIcon:"",panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1,searchValue:"",iconGroups:[]}}function createInternalData(){return{fullList:[]}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeIconPicker",props:{modelValue:String,placeholder:String,clearable:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().iconPicker.size||(0,_ui.getConfig)().size},className:[String,Function],popupClassName:[String,Function],showIconTitle:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.showIconTitle},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},filterable:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.filterable},filterConfig:Object,icons:Array,placement:String,popupConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(f,e){let t=e.emit,l=(0,_vue.inject)("$xeModal",null),n=(0,_vue.inject)("$xeDrawer",null),a=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var i=_xeUtils.default.uniqueId();let g=(0,_ui.useSize)(f).computeSize,m=(0,_vue.reactive)(createReactData()),c=createInternalData(),h=(0,_vue.ref)(),x=(0,_vue.ref)(),b=(0,_vue.ref)(),E=(0,_vue.ref)(),o={refElem:h},k={xID:i,props:f,context:e,reactData:m,getRefMaps:()=>o};let P=(0,_vue.computed)(()=>{var e=f.readonly;return null===e?!!u&&u.props.readonly:e}),I=(0,_vue.computed)(()=>{var e=f.disabled;return null===e?!!u&&u.props.disabled:e}),C=(0,_vue.computed)(()=>{var e=f.transfer,i=A.value;if(_xeUtils.default.isBoolean(i.transfer))return i.transfer;if(null===e){i=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(i))return i;if(a||l||n||u)return!0}return e}),y=(0,_vue.computed)(()=>{var e=f.placeholder;return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),T=(0,_vue.computed)(()=>{var{chunkSize:e,height:i,maxHeight:l}=A.value,e={"--vxe-ui-icon-picker-item-width":100/(e||4)+"%"};return i&&(e["--vxe-ui-icon-picker-panel-height"]=(0,_dom.toCssUnit)(i)),l&&(e["--vxe-ui-icon-picker-panel-max-height"]=(0,_dom.toCssUnit)(l)),e}),s=(0,_vue.computed)(()=>{let e=f.icons;return(e=e&&e.length?e:(0,_ui.getConfig)().iconPicker.icons||[]).map(e=>_xeUtils.default.isString(e)?{title:e,icon:"vxe-icon-"+(""+(e||"")).replace(/^vxe-icon-/,"")}:{title:""+(e.title||""),icon:e.icon||"",iconRender:e.iconRender})}),v=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.filterConfig,f.filterConfig)),A=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.popupConfig,f.popupConfig)),V=(0,_vue.computed)(()=>{let i=m.selectIcon;var e=s.value;return i?e.find(e=>e.icon===i):null}),d=()=>{m.panelIndex<(0,_utils.getLastZIndex)()&&(m.panelIndex=(0,_utils.nextZIndex)())},_=()=>{let l=f.placement,t=m.panelIndex,n=h.value,a=b.value,u=C.value,r=A.value,{width:c,transfer:o}=r;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,a,{placement:r.placement||l,defaultPlacement:r.defaultPlacement,teleportTo:u}),i=Object.assign(e.style,{zIndex:t});c&&Object.assign(i,{width:(0,_dom.toCssUnit)(c),minWidth:o?void 0:(0,_dom.toCssUnit)(c)}),m.panelStyle=i,m.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},p=()=>{var e=c.hpTimeout;I.value||(e&&(clearTimeout(e),c.hpTimeout=void 0),m.initialized||(m.initialized=!0),m.isActivated=!0,m.isAniVisible=!0,setTimeout(()=>{m.visiblePanel=!0,U(),_()},10),d(),_())},S=()=>{m.visiblePanel=!1,c.hpTimeout=setTimeout(()=>{m.isAniVisible=!1},350)},U=()=>{f.filterable&&(0,_vue.nextTick)(()=>{var e=E.value;e&&e.focus()})},N=()=>{let l=f.modelValue;var e=m.searchValue;let t=v.value.filterMethod;var i=A.value.chunkSize,n=s.value;let a=n;if(e){let i=(""+e).toLowerCase();a=n.filter(e=>t?t({option:e,value:l,searchValue:i,$iconPicker:k}):e.title&&-1<(""+e.title).toLowerCase().indexOf(i)||e.icon&&-1<(""+e.icon).indexOf(i))}m.iconGroups=_xeUtils.default.chunk(a,i||4)},O=(e,i)=>{(m.selectIcon=i)!==f.modelValue&&(t("update:modelValue",i),L("change",{value:i},e),u)&&r&&u.triggerItemEvent(e,r.itemConfig.field,i)},B=()=>{I.value||m.visiblePanel||p()},D=()=>{m.isActivated=!1},w=(e,i)=>{O(e,i),L("clear",{value:i},e)},K=(e,i)=>{w(i,null),S()},z=e=>{e.preventDefault(),(m.visiblePanel?S:p)()},j=e=>{z(e),L("click",{},e)},q=e=>{var i=m.visiblePanel;I.value||i&&(i=b.value,((0,_dom.getEventTargetNode)(e,i).flag?_:S)())},$=e=>{var i,l,t=m.visiblePanel;I.value||(i=h.value,l=b.value,m.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,t&&!m.isActivated&&S())},G=e=>{var i,l,t,n,a,u,r,c=f.clearable,o=m.visiblePanel;I.value||(i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(m.isActivated=!1),o?t||i?S():l?(e.preventDefault(),e.stopPropagation()):(n||a||r)&&e.preventDefault():(n||a||l||r)&&m.isActivated&&(e.preventDefault(),p()),m.isActivated&&u&&c&&w(e,null))},F=()=>{var{visiblePanel:e,isActivated:i}=m;e&&S(),i&&(m.isActivated=!1),(e||i)&&(e=x.value)&&e.blur()},L=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:k},i))},Y=(i={dispatchEvent:L,isPanelVisible(){return m.visiblePanel},togglePanel(){return(m.visiblePanel?S:p)(),(0,_vue.nextTick)()},hidePanel(){return m.visiblePanel&&S(),(0,_vue.nextTick)()},showPanel(){return m.visiblePanel||p(),(0,_vue.nextTick)()},focus(){var e=x.value;return m.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=x.value;return e&&e.blur(),(m.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;O(e,i),S()}),M=e=>{m.searchValue=e},W=()=>{m.isActivated=!0};let R=_xeUtils.default.debounce(()=>{N()},350,{trailing:!0});Object.assign(k,i);return m.selectIcon=""+(f.modelValue||""),N(),(0,_vue.watch)(()=>f.modelValue,e=>{m.selectIcon=""+(e||"")}),(0,_vue.watch)(s,()=>{N()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(k,"mousewheel",q),_ui.globalEvents.on(k,"mousedown",$),_ui.globalEvents.on(k,"keydown",G),_ui.globalEvents.on(k,"blur",F)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(k,"mousewheel"),_ui.globalEvents.off(k,"mousedown"),_ui.globalEvents.off(k,"keydown"),_ui.globalEvents.off(k,"blur"),_xeUtils.default.assign(m,createReactData()),_xeUtils.default.assign(c,createInternalData())}),(0,_vue.provide)("$xeIconPicker",k),k.renderVN=()=>{var{className:e,clearable:i,filterable:l}=f,{initialized:t,isActivated:n,isAniVisible:a,visiblePanel:u,selectIcon:r}=m,c=g.value,o=I.value,s=C.value,v=P.value,d=y.value,_=T.value,p=A.value.className||f.popupClassName;return v?(0,_vue.h)("div",{ref:h,class:["vxe-ico-picker--readonly",e]},[(0,_vue.h)("i",{class:r})]):(0,_vue.h)("div",{ref:h,class:["vxe-ico-picker",e?_xeUtils.default.isFunction(e)?e({$iconPicker:k}):e:"",{["size--"+c]:c,"show--clear":i&&!o&&!!r,"is--visible":u,"is--disabled":o,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:j},[(0,_vue.h)("input",{ref:x,class:"vxe-ico-picker--input",onFocus:B,onBlur:D}),r?(()=>{var e=m.selectIcon,i=V.value;if(i){var l=i.iconRender,t=l?_ui.renderer.get(l.name):null,t=t?t.renderIconPickerOptionIcon:null;if(t&&l)return(0,_vue.h)("div",{key:"inc",class:"vxe-ico-picker--icon"},(0,_vn.getSlotVNs)(t(l,{$iconPicker:k,option:i})))}return(0,_vue.h)("div",{key:"ind",class:"vxe-ico-picker--icon"},[(0,_vue.h)("i",{class:e})])})():(0,_vue.h)("div",{class:"vxe-ico-picker--placeholder"},d),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:K},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix-icon"},[(0,_vue.h)("i",{class:u?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!s||!t},[(0,_vue.h)("div",{ref:b,class:["vxe-table--ignore-clear vxe-ico-picker--panel",p?_xeUtils.default.isFunction(p)?p({$iconPicker:k}):p:"",{["size--"+c]:c,"is--transfer":s,"ani--leave":a,"ani--enter":u}],placement:m.panelPlacement,style:m.panelStyle},[t&&(u||a)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper",style:_},[l?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-search"},[(0,_vue.h)(_input.default,{ref:E,class:"vxe-ico-picker-search--input",modelValue:m.searchValue,type:"text",clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.iconPicker.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":M,onFocus:W,onChange:R,onSearch:R})]):(0,_ui.renderEmptyElement)(k),(()=>{let t=f.showIconTitle,{selectIcon:n,iconGroups:e}=m;return e.length?(0,_vue.h)("div",{class:"vxe-ico-picker--list-wrapper"},e.map(e=>(0,_vue.h)("div",{class:"vxe-ico-picker--list"},e.map(i=>{var e=i.iconRender,l=e?_ui.renderer.get(e.name):null,l=l?l.renderIconPickerOptionIcon:null;return(0,_vue.h)("div",{class:["vxe-ico-picker--item",{"is--selected":n===i.icon}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-inner",onClick(e){I.value||Y(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:k,option:i})):[(0,_vue.h)("i",{class:i.icon||""})]),t?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_ui.renderEmptyElement)(k)])])})))):(0,_vue.h)("div",{class:"vxe-ico-picker--empty-placeholder"},(0,_ui.getI18n)("vxe.iconPicker.emptyText"))})()]):(0,_ui.renderEmptyElement)(k)])])])},k},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_input=_interopRequireDefault(require("../../input/src/input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{initialized:!1,selectIcon:"",panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1,searchValue:"",iconList:[]}}function createInternalData(){return{fullList:[]}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeIconPicker",props:{modelValue:String,placeholder:String,clearable:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().iconPicker.size||(0,_ui.getConfig)().size},className:[String,Function],popupClassName:[String,Function],showIconTitle:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.showIconTitle},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},filterable:{type:Boolean,default:()=>(0,_ui.getConfig)().iconPicker.filterable},filterConfig:Object,icons:Array,placement:String,popupConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(f,e){let t=e.emit,l=(0,_vue.inject)("$xeModal",null),n=(0,_vue.inject)("$xeDrawer",null),a=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var i=_xeUtils.default.uniqueId();let g=(0,_ui.useSize)(f).computeSize,m=(0,_vue.reactive)(createReactData()),c=createInternalData(),h=(0,_vue.ref)(),x=(0,_vue.ref)(),b=(0,_vue.ref)(),E=(0,_vue.ref)(),o={refElem:h},k={xID:i,props:f,context:e,reactData:m,getRefMaps:()=>o};let P=(0,_vue.computed)(()=>{var e=f.readonly;return null===e?!!u&&u.props.readonly:e}),I=(0,_vue.computed)(()=>{var e=f.disabled;return null===e?!!u&&u.props.disabled:e}),C=(0,_vue.computed)(()=>{var e=f.transfer,i=A.value;if(_xeUtils.default.isBoolean(i.transfer))return i.transfer;if(null===e){i=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(i))return i;if(a||l||n||u)return!0}return e}),y=(0,_vue.computed)(()=>{var e=f.placeholder;return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),T=(0,_vue.computed)(()=>{var{chunkSize:e,height:i,chunkWidth:l,maxHeight:t}=A.value,l={"--vxe-ui-icon-picker-item-width":l?(0,_dom.toCssUnit)(l):100/(e||4)+"%"};return i&&(l["--vxe-ui-icon-picker-panel-height"]=(0,_dom.toCssUnit)(i)),t&&(l["--vxe-ui-icon-picker-panel-max-height"]=(0,_dom.toCssUnit)(t)),l}),s=(0,_vue.computed)(()=>{let e=f.icons;return(e=e&&e.length?e:(0,_ui.getConfig)().iconPicker.icons||[]).map(e=>_xeUtils.default.isString(e)?{title:e,icon:"vxe-icon-"+(""+(e||"")).replace(/^vxe-icon-/,"")}:{title:""+(e.title||""),icon:e.icon||"",iconRender:e.iconRender})}),v=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.filterConfig,f.filterConfig)),A=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.popupConfig,f.popupConfig)),V=(0,_vue.computed)(()=>{let i=m.selectIcon;var e=s.value;return i?e.find(e=>e.icon===i):null}),d=()=>{m.panelIndex<(0,_utils.getLastZIndex)()&&(m.panelIndex=(0,_utils.nextZIndex)())},_=()=>{let l=f.placement,t=m.panelIndex,n=h.value,a=b.value,u=C.value,r=A.value,c=r.width;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,a,{placement:r.placement||l,defaultPlacement:r.defaultPlacement,teleportTo:u}),i=Object.assign(e.style,{zIndex:t,minWidth:void 0});c&&Object.assign(i,{width:(0,_dom.toCssUnit)(c)}),m.panelStyle=i,m.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},p=()=>{var e=c.hpTimeout;I.value||(e&&(clearTimeout(e),c.hpTimeout=void 0),m.initialized||(m.initialized=!0),m.isActivated=!0,m.isAniVisible=!0,setTimeout(()=>{m.visiblePanel=!0,B(),_()},10),d(),_())},S=()=>{m.visiblePanel=!1,c.hpTimeout=setTimeout(()=>{m.isAniVisible=!1},350)},B=()=>{f.filterable&&(0,_vue.nextTick)(()=>{var e=E.value;e&&e.focus()})},N=()=>{let l=f.modelValue;var e=m.searchValue;let t=v.value.filterMethod;var n=s.value;let a=n;if(e){let i=(""+e).toLowerCase();a=n.filter(e=>t?t({option:e,value:l,searchValue:i,$iconPicker:k}):e.title&&-1<(""+e.title).toLowerCase().indexOf(i)||e.icon&&-1<(""+e.icon).indexOf(i))}m.iconList=a},O=(e,i)=>{(m.selectIcon=i)!==f.modelValue&&(t("update:modelValue",i),w("change",{value:i},e),u)&&r&&u.triggerItemEvent(e,r.itemConfig.field,i)},U=()=>{I.value||m.visiblePanel||p()},D=()=>{m.isActivated=!1},L=(e,i)=>{O(e,i),w("clear",{value:i},e)},K=(e,i)=>{L(i,null),S()},j=e=>{e.preventDefault(),(m.visiblePanel?S:p)()},z=e=>{j(e),w("click",{},e)},q=e=>{var i=m.visiblePanel;I.value||i&&(i=b.value,((0,_dom.getEventTargetNode)(e,i).flag?_:S)())},$=e=>{var i,l,t=m.visiblePanel;I.value||(i=h.value,l=b.value,m.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,t&&!m.isActivated&&S())},F=e=>{var i,l,t,n,a,u,r,c=f.clearable,o=m.visiblePanel;I.value||(i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(m.isActivated=!1),o?t||i?S():l?(e.preventDefault(),e.stopPropagation()):(n||a||r)&&e.preventDefault():(n||a||l||r)&&m.isActivated&&(e.preventDefault(),p()),m.isActivated&&u&&c&&L(e,null))},G=()=>{var{visiblePanel:e,isActivated:i}=m;e&&S(),i&&(m.isActivated=!1),(e||i)&&(e=x.value)&&e.blur()},w=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:k},i))},Y=(i={dispatchEvent:w,isPanelVisible(){return m.visiblePanel},togglePanel(){return(m.visiblePanel?S:p)(),(0,_vue.nextTick)()},hidePanel(){return m.visiblePanel&&S(),(0,_vue.nextTick)()},showPanel(){return m.visiblePanel||p(),(0,_vue.nextTick)()},focus(){var e=x.value;return m.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=x.value;return e&&e.blur(),(m.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;O(e,i),S()}),M=e=>{m.searchValue=e},W=()=>{m.isActivated=!0};let R=_xeUtils.default.debounce(()=>{N()},350,{trailing:!0});Object.assign(k,i);return m.selectIcon=""+(f.modelValue||""),N(),(0,_vue.watch)(()=>f.modelValue,e=>{m.selectIcon=""+(e||"")}),(0,_vue.watch)(s,()=>{N()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(k,"mousewheel",q),_ui.globalEvents.on(k,"mousedown",$),_ui.globalEvents.on(k,"keydown",F),_ui.globalEvents.on(k,"blur",G)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(k,"mousewheel"),_ui.globalEvents.off(k,"mousedown"),_ui.globalEvents.off(k,"keydown"),_ui.globalEvents.off(k,"blur"),_xeUtils.default.assign(m,createReactData()),_xeUtils.default.assign(c,createInternalData())}),(0,_vue.provide)("$xeIconPicker",k),k.renderVN=()=>{var{className:e,clearable:i,filterable:l}=f,{initialized:t,isActivated:n,isAniVisible:a,visiblePanel:u,selectIcon:r}=m,c=g.value,o=I.value,s=C.value,v=P.value,d=y.value,_=T.value,p=A.value.className||f.popupClassName;return v?(0,_vue.h)("div",{ref:h,class:["vxe-ico-picker--readonly",e]},[(0,_vue.h)("i",{class:r})]):(0,_vue.h)("div",{ref:h,class:["vxe-ico-picker",e?_xeUtils.default.isFunction(e)?e({$iconPicker:k}):e:"",{["size--"+c]:c,"show--clear":i&&!o&&!!r,"is--visible":u,"is--disabled":o,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:z},[(0,_vue.h)("input",{ref:x,class:"vxe-ico-picker--input",onFocus:U,onBlur:D}),r?(()=>{var e=m.selectIcon,i=V.value;if(i){var l=i.iconRender,t=l?_ui.renderer.get(l.name):null,t=t?t.renderIconPickerOptionIcon:null;if(t&&l)return(0,_vue.h)("div",{key:"inc",class:"vxe-ico-picker--icon"},(0,_vn.getSlotVNs)(t(l,{$iconPicker:k,option:i})))}return(0,_vue.h)("div",{key:"ind",class:"vxe-ico-picker--icon"},[(0,_vue.h)("i",{class:e})])})():(0,_vue.h)("div",{class:"vxe-ico-picker--placeholder"},d),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:K},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix-icon"},[(0,_vue.h)("i",{class:u?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!s||!t},[(0,_vue.h)("div",{ref:b,class:["vxe-table--ignore-clear vxe-ico-picker--panel",p?_xeUtils.default.isFunction(p)?p({$iconPicker:k}):p:"",{["size--"+c]:c,"is--transfer":s,"ani--leave":a,"ani--enter":u}],placement:m.panelPlacement,style:m.panelStyle},[t&&(u||a)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper",style:_},[l?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-search"},[(0,_vue.h)(_input.default,{ref:E,class:"vxe-ico-picker-search--input",modelValue:m.searchValue,type:"text",clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.iconPicker.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":M,onFocus:W,onChange:R,onSearch:R})]):(0,_ui.renderEmptyElement)(k),(()=>{let t=f.showIconTitle,{selectIcon:n,iconList:e}=m;return e.length?(0,_vue.h)("div",{class:"vxe-ico-picker--list-wrapper"},[(0,_vue.h)("div",{class:"vxe-ico-picker--list"},e.map(i=>{var e=i.iconRender,l=e?_ui.renderer.get(e.name):null,l=l?l.renderIconPickerOptionIcon:null;return(0,_vue.h)("div",{class:["vxe-ico-picker--item",{"is--selected":n===i.icon}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-inner",onClick(e){I.value||Y(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:k,option:i})):[(0,_vue.h)("i",{class:i.icon||""})]),t?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_ui.renderEmptyElement)(k)])])}))]):(0,_vue.h)("div",{class:"vxe-ico-picker--empty-placeholder"},(0,_ui.getI18n)("vxe.iconPicker.emptyText"))})()]):(0,_ui.renderEmptyElement)(k)])])])},k},render(){return this.renderVN()}});

package/lib/icon-picker/style/style.css

@@ -121,12 +121,6 @@
   color: var(--vxe-ui-font-primary-color);
 }
 
-.vxe-ico-picker--all-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
 .vxe-ico-picker--list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
@@ -138,13 +132,13 @@
 .vxe-ico-picker--list {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .vxe-ico-picker--item {
   display: flex;
   flex-direction: column;
-  min-width: 4.8em;
-  width: var(--vxe-ui-icon-picker-item-width, 4.8em);
+  width: var(--vxe-ui-icon-picker-item-width, 25%);
   padding: var(--vxe-ui-layout-padding-half);
 }
 .vxe-ico-picker--item .vxe-ico-picker--item-inner {
@@ -208,6 +202,7 @@
   font-size: var(--vxe-ui-ico-picker-current-font-size);
   color: var(--vxe-ui-font-color);
   text-align: left;
+  width: 20em;
 }
 .vxe-ico-picker--panel:not(.is--transfer) {
   min-width: 100%;

package/lib/icon-picker/style/style.min.css

@@ -1 +1 @@
-.vxe-ico-picker,.vxe-ico-picker--panel{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker{position:relative;display:inline-block;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);height:var(--vxe-ui-ico-picker-current-height);line-height:var(--vxe-ui-ico-picker-current-height)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--all-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.3em));padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row}.vxe-ico-picker--item{display:flex;flex-direction:column;min-width:4.8em;width:var(--vxe-ui-icon-picker-item-width,4.8em);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:var(--vxe-ui-icon-picker-panel-icon-font-size)}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{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)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--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-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker--empty-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .6em;text-align:center;min-height:4em}
+.vxe-ico-picker,.vxe-ico-picker--panel{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker{position:relative;display:inline-block;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);height:var(--vxe-ui-ico-picker-current-height);line-height:var(--vxe-ui-ico-picker-current-height)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.3em));padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--item{display:flex;flex-direction:column;width:var(--vxe-ui-icon-picker-item-width,25%);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:var(--vxe-ui-icon-picker-panel-icon-font-size)}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{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)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);text-align:left;width:20em}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--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-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker--empty-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .6em;text-align:center;min-height:4em}

package/lib/index.umd.js

@@ -4657,7 +4657,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.16.4"}`;
+const uiVersion = `ui v${"4.16.6"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4675,7 +4675,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.16.4";
+const ui_version = "4.16.6";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -12524,7 +12524,12 @@ let crossListDragRowObj = null;
       const el = refElem.value;
       if (el) {
         const parentEl = el.parentElement;
-        reactData.parentHeight = parentEl ? parentEl.clientHeight : 0;
+        let parentHeight = 0;
+        if (parentEl) {
+          const parentStyle = getComputedStyle(parentEl);
+          parentHeight = parentEl.clientHeight - Math.ceil(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingRight));
+        }
+        reactData.parentHeight = parentHeight;
         updateHeight();
         if (el.clientWidth && el.clientHeight) {
           return computeScrollLoad();
@@ -13318,7 +13323,7 @@ let crossListDragRowObj = null;
       emitCheckboxMode(value);
       return updateCheckboxStatus();
     };
-    const getCheckboxRows = () => {
+    const getCheckboxRecords = () => {
       const {
         updateCheckboxFlag
       } = reactData;
@@ -13738,7 +13743,8 @@ let crossListDragRowObj = null;
       clearRadioRow,
       setCheckboxRow,
       setCheckboxRowByKey,
-      getCheckboxRows,
+      getCheckboxRecords,
+      getCheckboxRows: getCheckboxRecords,
       getCheckboxRowKeys,
       clearCheckboxRow,
       setAllCheckboxRow,
@@ -13850,6 +13856,12 @@ let crossListDragRowObj = null;
       isRemoveByRow(row) {
         const rowid = getRowId(row);
         return !!reactData.removeRowFlag && !!internalData.removeRowMaps[rowid];
+      },
+      getRecordset() {
+        return {
+          insertRecords: $xeList.getInsertRecords(),
+          removeRecords: $xeList.getRemoveRecords()
+        };
       }
     };
     const listPrivateMethods = {
@@ -14216,6 +14228,12 @@ let crossListDragRowObj = null;
         isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
       }
       const ctVNs = [];
+      if (showRadio) {
+        ctVNs.push(renderRadio(row, rowid, isRadioChecked));
+      }
+      if (showCheckbox) {
+        ctVNs.push(renderCheckbox(row, rowid, isCheckboxChecked));
+      }
       let isDragDisabled = false;
       if (isDrag && keyField && (!visibleMethod || visibleMethod(rowParams))) {
         const handleOns = {};
@@ -14238,12 +14256,6 @@ let crossListDragRowObj = null;
           class: icon || getIcon().LIST_DRAG
         })])]));
       }
-      if (showRadio) {
-        ctVNs.push(renderRadio(row, rowid, isRadioChecked));
-      }
-      if (showCheckbox) {
-        ctVNs.push(renderCheckbox(row, rowid, isCheckboxChecked));
-      }
       ctVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'ct5',
         class: 'vxe-list--row-content'
@@ -33549,7 +33561,7 @@ function icon_picker_createReactData() {
     isAniVisible: false,
     isActivated: false,
     searchValue: '',
-    iconGroups: []
+    iconList: []
   };
 }
 function icon_picker_createInternalData() {
@@ -33691,10 +33703,11 @@ function icon_picker_createInternalData() {
       const {
         chunkSize,
         height,
+        chunkWidth,
         maxHeight
       } = popupOpts;
       const stys = {
-        '--vxe-ui-icon-picker-item-width': `${100 / (chunkSize || 4)}%`
+        '--vxe-ui-icon-picker-item-width': chunkWidth ? toCssUnit(chunkWidth) : `${100 / (chunkSize || 4)}%`
       };
       if (height) {
         stys['--vxe-ui-icon-picker-panel-height'] = toCssUnit(height);
@@ -33755,8 +33768,7 @@ function icon_picker_createInternalData() {
       const btnTransfer = computeBtnTransfer.value;
       const popupOpts = computePopupOpts.value;
       const {
-        width,
-        transfer
+        width
       } = popupOpts;
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
@@ -33765,12 +33777,12 @@ function icon_picker_createInternalData() {
           teleportTo: btnTransfer
         });
         const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
+          zIndex: panelIndex,
+          minWidth: undefined
         });
         if (width) {
           Object.assign(panelStyle, {
-            width: toCssUnit(width),
-            minWidth: transfer ? undefined : toCssUnit(width)
+            width: toCssUnit(width)
           });
         }
         reactData.panelStyle = panelStyle;
@@ -33830,10 +33842,6 @@ function icon_picker_createInternalData() {
       const {
         filterMethod
       } = filterOpts;
-      const popupOpts = computePopupOpts.value;
-      const {
-        chunkSize
-      } = popupOpts;
       const iconList = computeIconList.value;
       let visibleList = iconList;
       if (searchValue) {
@@ -33850,7 +33858,7 @@ function icon_picker_createInternalData() {
           return item.title && `${item.title}`.toLowerCase().indexOf(searchTxt) > -1 || item.icon && `${item.icon}`.indexOf(searchTxt) > -1;
         });
       }
-      reactData.iconGroups = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().chunk(visibleList, chunkSize || 4);
+      reactData.iconList = visibleList;
     };
     const changeEvent = (evnt, selectValue) => {
       reactData.selectIcon = selectValue;
@@ -34065,48 +34073,46 @@ function icon_picker_createInternalData() {
       } = props;
       const {
         selectIcon,
-        iconGroups
+        iconList
       } = reactData;
-      if (!iconGroups.length) {
+      if (!iconList.length) {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-ico-picker--empty-placeholder'
         }, getI18n('vxe.iconPicker.emptyText'));
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-ico-picker--list-wrapper'
-      }, iconGroups.map(list => {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-ico-picker--list'
+      }, iconList.map(item => {
+        const {
+          iconRender
+        } = item;
+        const compConf = iconRender ? renderer.get(iconRender.name) : null;
+        const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-ico-picker--list'
-        }, list.map(item => {
-          const {
-            iconRender
-          } = item;
-          const compConf = iconRender ? renderer.get(iconRender.name) : null;
-          const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-ico-picker--item', {
-              'is--selected': selectIcon === item.icon
-            }]
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-ico-picker--item-inner',
-            onClick(evnt) {
-              const isDisabled = computeIsDisabled.value;
-              if (!isDisabled) {
-                handleClickIconEvent(evnt, item);
-              }
+          class: ['vxe-ico-picker--item', {
+            'is--selected': selectIcon === item.icon
+          }]
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-ico-picker--item-inner',
+          onClick(evnt) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
+              handleClickIconEvent(evnt, item);
             }
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-ico-picker--item-icon'
-          }, iconMethod && iconRender ? vn_getSlotVNs(iconMethod(iconRender, {
-            $iconPicker: $xeIconPicker,
-            option: item
-          })) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-            class: item.icon || ''
-          })]), showIconTitle ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-ico-picker--item-title'
-          }, `${item.title || ''}`) : renderEmptyElement($xeIconPicker)])]);
-        }));
-      }));
+          }
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-ico-picker--item-icon'
+        }, iconMethod && iconRender ? vn_getSlotVNs(iconMethod(iconRender, {
+          $iconPicker: $xeIconPicker,
+          option: item
+        })) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+          class: item.icon || ''
+        })]), showIconTitle ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-ico-picker--item-title'
+        }, `${item.title || ''}`) : renderEmptyElement($xeIconPicker)])]);
+      }))]);
     };
     const renderIconView = () => {
       const {
@@ -51653,6 +51659,9 @@ let crossTreeDragNodeObj = null;
         return nodeKeys;
       },
       getCheckboxNodes() {
+        return $xeTree.getCheckboxRecords();
+      },
+      getCheckboxRecords() {
         const {
           nodeMaps,
           selectCheckboxMaps
@@ -52141,7 +52150,13 @@ let crossTreeDragNodeObj = null;
         const nodeid = getNodeId(node);
         return !!reactData.removeNodeFlag && !!internalData.removeNodeMaps[nodeid];
       },
-      closeTooltip
+      closeTooltip,
+      getRecordset() {
+        return {
+          insertRecords: $xeTree.getInsertRecords(),
+          removeRecords: $xeTree.getRemoveRecords()
+        };
+      }
     };
     const handleNodeDragEndClearStatus = () => {
       clearNodeDragData();
@@ -53216,7 +53231,7 @@ let crossTreeDragNodeObj = null;
         }
       }, iconSlot ? vn_getSlotVNs(iconSlot(nParams)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: isLazyLoading ? iconLoaded || tree_getIcon().TREE_NODE_LOADED : isExpand ? iconOpen || tree_getIcon().TREE_NODE_OPEN : iconClose || tree_getIcon().TREE_NODE_CLOSE
-      })])] : []), renderDragIcon(node, nodeid), renderRadio(node, nodeid, isExistChild, nLevel, isRadioChecked), renderCheckbox(node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })])] : []), renderRadio(node, nodeid, isExistChild, nLevel, isRadioChecked), renderCheckbox(node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate), renderDragIcon(node, nodeid), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-inner'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-wrapper'
@@ -53499,6 +53514,7 @@ let crossTreeDragNodeObj = null;
         }
         internalData.resizeObserver = resizeObserver;
       }
+      recalculate();
       globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {