vxe-pc-ui 4.11.44 → 4.12.0

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

@@ -23,6 +23,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().iconPicker.size || (0, _ui.getConfig)().size
     },
     className: [String, Function],
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function],
     showIconTitle: {
       type: Boolean,
@@ -38,6 +42,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     icons: Array,
     placement: String,
+    popupConfig: Object,
     transfer: {
       type: Boolean,
       default: null
@@ -112,6 +117,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         transfer
       } = props;
+      const popupOpts = computePopupOpts.value;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
       if (transfer === null) {
         const globalTransfer = (0, _ui.getConfig)().iconPicker.transfer;
         if (_xeUtils.default.isBoolean(globalTransfer)) {
@@ -157,6 +166,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         };
       });
     });
+    const computePopupOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().iconPicker.popupConfig, props.popupConfig);
+    });
     const computeIconGroupList = (0, _vue.computed)(() => {
       const iconList = computeIconList.value;
       return _xeUtils.default.chunk(iconList, 4);
@@ -174,83 +186,29 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const updatePlacement = () => {
-      return (0, _vue.nextTick)().then(() => {
-        const {
-          placement
-        } = props;
-        const {
-          panelIndex
-        } = reactData;
-        const el = refElem.value;
-        const panelElem = refOptionPanel.value;
-        const btnTransfer = computeBtnTransfer.value;
-        if (panelElem && el) {
-          const targetHeight = el.offsetHeight;
-          const targetWidth = el.offsetWidth;
-          const panelHeight = panelElem.offsetHeight;
-          const panelWidth = panelElem.offsetWidth;
-          const marginSize = 5;
-          const panelStyle = {
-            zIndex: panelIndex
-          };
-          const {
-            boundingTop,
-            boundingLeft,
-            visibleHeight,
-            visibleWidth
-          } = (0, _dom.getAbsolutePos)(el);
-          let panelPlacement = 'bottom';
-          if (btnTransfer) {
-            let left = boundingLeft;
-            let top = boundingTop + targetHeight;
-            if (placement === 'top') {
-              panelPlacement = 'top';
-              top = boundingTop - panelHeight;
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (top + panelHeight + marginSize > visibleHeight) {
-                panelPlacement = 'top';
-                top = boundingTop - panelHeight;
-              }
-              // 如果上面不够放，则向下（优先）
-              if (top < marginSize) {
-                panelPlacement = 'bottom';
-                top = boundingTop + targetHeight;
-              }
-            }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-              left -= left + panelWidth + marginSize - visibleWidth;
-            }
-            // 如果溢出左边
-            if (left < marginSize) {
-              left = marginSize;
-            }
-            Object.assign(panelStyle, {
-              left: `${left}px`,
-              top: `${top}px`,
-              minWidth: `${targetWidth}px`
-            });
-          } else {
-            if (placement === 'top') {
-              panelPlacement = 'top';
-              panelStyle.bottom = `${targetHeight}px`;
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top';
-                  panelStyle.bottom = `${targetHeight}px`;
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle;
-          reactData.panelPlacement = panelPlacement;
-          return (0, _vue.nextTick)();
-        }
-      });
+      const {
+        placement
+      } = props;
+      const {
+        panelIndex
+      } = reactData;
+      const targetElem = refElem.value;
+      const panelElem = refOptionPanel.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const popupOpts = computePopupOpts.value;
+      const handleStyle = () => {
+        const ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          teleportTo: btnTransfer
+        });
+        const panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return (0, _vue.nextTick)().then(handleStyle);
     };
     const showOptionPanel = () => {
       const {
@@ -543,7 +501,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const renderVN = () => {
       const {
         className,
-        popupClassName,
         clearable
       } = props;
       const {
@@ -558,6 +515,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       const inpPlaceholder = computeInpPlaceholder.value;
+      const popupOpts = computePopupOpts.value;
+      const ppClassName = popupOpts.className || props.popupClassName;
       if (formReadonly) {
         return (0, _vue.h)('div', {
           ref: refElem,
@@ -603,9 +562,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         disabled: btnTransfer ? !initialized : true
       }, [(0, _vue.h)('div', {
         ref: refOptionPanel,
-        class: ['vxe-table--ignore-clear vxe-ico-picker--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+        class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
           $iconPicker: $xeIconPicker
-        }) : popupClassName : '', {
+        }) : ppClassName : '', {
           [`size--${vSize}`]: vSize,
           'is--transfer': btnTransfer,
           'ani--leave': isAniVisible,

package/lib/icon-picker/src/icon-picker.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"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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},icons:Array,placement:String,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(d,e){const t=e["emit"],l=(0,_vue.inject)("$xeModal",null),n=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),o=(0,_vue.inject)("xeFormItemInfo",null);var i=_xeUtils.default.uniqueId();const p=(0,_ui.useSize)(d)["computeSize"],f=(0,_vue.reactive)({initialized:!1,selectIcon:""+(d.modelValue||""),panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),r={},g=(0,_vue.ref)(),m=(0,_vue.ref)(),b=(0,_vue.ref)(),c={refElem:g},x={xID:i,props:d,context:e,reactData:f,getRefMaps:()=>c};const h=(0,_vue.computed)(()=>{var e=d["readonly"];return null===e?!!a&&a.props.readonly:e}),E=(0,_vue.computed)(()=>{var e=d["disabled"];return null===e?!!a&&a.props.disabled:e}),k=(0,_vue.computed)(()=>{var e=d["transfer"];if(null===e){var i=(0,_ui.getConfig)().iconPicker.transfer;if(_xeUtils.default.isBoolean(i))return i;if(u||l||n||a)return!0}return e}),P=(0,_vue.computed)(()=>{var e=d["placeholder"];return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),s=(0,_vue.computed)(()=>{let e=d["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})}),I=(0,_vue.computed)(()=>{var e=s.value;return _xeUtils.default.chunk(e,4)}),T=(0,_vue.computed)(()=>{const i=f["selectIcon"];var e=s.value;return i?e.find(e=>e.icon===i):null}),v=()=>(0,_vue.nextTick)().then(()=>{var t=d["placement"],n=f["panelIndex"],u=g.value,a=b.value,e=k.value;if(a&&u){var o=u.offsetHeight,r=u.offsetWidth,c=a.offsetHeight,a=a.offsetWidth,n={zIndex:n},{boundingTop:u,boundingLeft:s,visibleHeight:v,visibleWidth:_}=(0,_dom.getAbsolutePos)(u);let l="bottom";if(e){let e=s,i=u+o;"top"===t?(l="top",i=u-c):t||(i+c+5>v&&(l="top",i=u-c),i<5&&(l="bottom",i=u+o)),e+a+5>_&&(e-=e+a+5-_),e<5&&(e=5),Object.assign(n,{left:e+"px",top:i+"px",minWidth:r+"px"})}else"top"===t?(l="top",n.bottom=o+"px"):t||v<u+o+c&&5<u-o-c&&(l="top",n.bottom=o+"px");return f.panelStyle=n,f.panelPlacement=l,(0,_vue.nextTick)()}}),_=()=>{var e=r["hpTimeout"];E.value||(e&&(clearTimeout(e),r.hpTimeout=void 0),f.initialized||(f.initialized=!0),f.isActivated=!0,f.isAniVisible=!0,setTimeout(()=>{f.visiblePanel=!0},10),f.panelIndex<(0,_utils.getLastZIndex)()&&(f.panelIndex=(0,_utils.nextZIndex)()),v())},A=()=>{f.visiblePanel=!1,r.hpTimeout=setTimeout(()=>{f.isAniVisible=!1},350)},y=(e,i)=>{(f.selectIcon=i)!==d.modelValue&&(t("update:modelValue",i),K("change",{value:i},e),a)&&o&&a.triggerItemEvent(e,o.itemConfig.field,i)},S=()=>{E.value||f.visiblePanel||_()},N=()=>{f.isActivated=!1},V=(e,i)=>{y(e,i),K("clear",{value:i},e)},C=(e,i)=>{V(i,null),A()},L=e=>{e.preventDefault(),(f.visiblePanel?A:_)()},O=e=>{L(e),K("click",{},e)},B=e=>{var i=f["visiblePanel"];E.value||i&&(i=b.value,((0,_dom.getEventTargetNode)(e,i).flag?v:A)())},R=e=>{var i,l,t=f["visiblePanel"];E.value||(i=g.value,l=b.value,f.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,t&&!f.isActivated&&A())},w=e=>{var i,l,t,n,u,a,o,r=d["clearable"],c=f["visiblePanel"];E.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),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(f.isActivated=!1),c?t||i?A():l?(e.preventDefault(),e.stopPropagation()):(n||u||o)&&e.preventDefault():(n||u||l||o)&&f.isActivated&&(e.preventDefault(),_()),f.isActivated&&a&&r&&V(e,null))},z=()=>{var{visiblePanel:e,isActivated:i}=f;e&&A(),i&&(f.isActivated=!1),(e||i)&&(e=m.value)&&e.blur()},K=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:x},i))},D=(i={dispatchEvent:K,isPanelVisible(){return f.visiblePanel},togglePanel(){return(f.visiblePanel?A:_)(),(0,_vue.nextTick)()},hidePanel(){return f.visiblePanel&&A(),(0,_vue.nextTick)()},showPanel(){return f.visiblePanel||_(),(0,_vue.nextTick)()},focus(){var e=m.value;return f.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=m.value;return e&&e.blur(),(f.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;y(e,i),A()});Object.assign(x,i);return(0,_vue.watch)(()=>d.modelValue,e=>{f.selectIcon=""+(e||"")}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(x,"mousewheel",B),_ui.globalEvents.on(x,"mousedown",R),_ui.globalEvents.on(x,"keydown",w),_ui.globalEvents.on(x,"blur",z)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(x,"mousewheel"),_ui.globalEvents.off(x,"mousedown"),_ui.globalEvents.off(x,"keydown"),_ui.globalEvents.off(x,"blur")}),(0,_vue.provide)("$xeIconPicker",x),x.renderVN=()=>{var{className:e,popupClassName:i,clearable:l}=d,{initialized:t,isActivated:n,isAniVisible:u,visiblePanel:a,selectIcon:o}=f,r=p.value,c=E.value,s=k.value,v=h.value,_=P.value;return v?(0,_vue.h)("div",{ref:g,class:["vxe-ico-picker--readonly",e]},[(0,_vue.h)("i",{class:o})]):(0,_vue.h)("div",{ref:g,class:["vxe-ico-picker",e?_xeUtils.default.isFunction(e)?e({$iconPicker:x}):e:"",{["size--"+r]:r,"show--clear":l&&!c&&!!o,"is--visible":a,"is--disabled":c,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:O},[(0,_vue.h)("input",{ref:m,class:"vxe-ico-picker--input",onFocus:S,onBlur:N}),o?(()=>{var e=f["selectIcon"],i=T.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:x,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"},_),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:C},[(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:a?(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",i?_xeUtils.default.isFunction(i)?i({$iconPicker:x}):i:"",{["size--"+r]:r,"is--transfer":s,"ani--leave":u,"ani--enter":a}],placement:f.panelPlacement,style:f.panelStyle},[t&&(a||u)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper"},[(()=>{const t=d["showIconTitle"];var e=I.value;const n=E.value;return(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",onClick(e){n||D(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:x,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)(x)])}))))})()]):(0,_ui.renderEmptyElement)(x)])])])},x},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"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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},icons:Array,placement:String,popupConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","click"],setup(d,e){const n=e["emit"],l=(0,_vue.inject)("$xeModal",null),t=(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();const p=(0,_ui.useSize)(d)["computeSize"],f=(0,_vue.reactive)({initialized:!1,selectIcon:""+(d.modelValue||""),panelIndex:0,panelStyle:{},panelPlacement:null,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),o={},g=(0,_vue.ref)(),m=(0,_vue.ref)(),x=(0,_vue.ref)(),c={refElem:g},E={xID:i,props:d,context:e,reactData:f,getRefMaps:()=>c};const b=(0,_vue.computed)(()=>{var e=d["readonly"];return null===e?!!u&&u.props.readonly:e}),h=(0,_vue.computed)(()=>{var e=d["disabled"];return null===e?!!u&&u.props.disabled:e}),k=(0,_vue.computed)(()=>{var e=d["transfer"],i=I.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||t||u)return!0}return e}),P=(0,_vue.computed)(()=>{var e=d["placeholder"];return(e=e||(0,_ui.getConfig)().select.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseSelect")}),s=(0,_vue.computed)(()=>{let e=d["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})}),I=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().iconPicker.popupConfig,d.popupConfig)),T=(0,_vue.computed)(()=>{var e=s.value;return _xeUtils.default.chunk(e,4)}),A=(0,_vue.computed)(()=>{const i=f["selectIcon"];var e=s.value;return i?e.find(e=>e.icon===i):null}),v=()=>{const l=d["placement"],n=f["panelIndex"],t=g.value,a=x.value,u=k.value,r=I.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(t,a,{placement:r.placement||l,teleportTo:u}),i=Object.assign(e.style,{zIndex:n});f.panelStyle=i,f.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},_=()=>{var e=o["hpTimeout"];h.value||(e&&(clearTimeout(e),o.hpTimeout=void 0),f.initialized||(f.initialized=!0),f.isActivated=!0,f.isAniVisible=!0,setTimeout(()=>{f.visiblePanel=!0},10),f.panelIndex<(0,_utils.getLastZIndex)()&&(f.panelIndex=(0,_utils.nextZIndex)()),v())},y=()=>{f.visiblePanel=!1,o.hpTimeout=setTimeout(()=>{f.isAniVisible=!1},350)},C=(e,i)=>{(f.selectIcon=i)!==d.modelValue&&(n("update:modelValue",i),K("change",{value:i},e),u)&&r&&u.triggerItemEvent(e,r.itemConfig.field,i)},N=()=>{h.value||f.visiblePanel||_()},S=()=>{f.isActivated=!1},V=(e,i)=>{C(e,i),K("clear",{value:i},e)},O=(e,i)=>{V(i,null),y()},L=e=>{e.preventDefault(),(f.visiblePanel?y:_)()},B=e=>{L(e),K("click",{},e)},R=e=>{var i=f["visiblePanel"];h.value||i&&(i=x.value,((0,_dom.getEventTargetNode)(e,i).flag?v:y)())},w=e=>{var i,l,n=f["visiblePanel"];h.value||(i=g.value,l=x.value,f.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,n&&!f.isActivated&&y())},z=e=>{var i,l,n,t,a,u,r,o=d["clearable"],c=f["visiblePanel"];h.value||(i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.TAB),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),t=_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&&(f.isActivated=!1),c?n||i?y():l?(e.preventDefault(),e.stopPropagation()):(t||a||r)&&e.preventDefault():(t||a||l||r)&&f.isActivated&&(e.preventDefault(),_()),f.isActivated&&u&&o&&V(e,null))},D=()=>{var{visiblePanel:e,isActivated:i}=f;e&&y(),i&&(f.isActivated=!1),(e||i)&&(e=m.value)&&e.blur()},K=(e,i,l)=>{n(e,(0,_ui.createEvent)(l,{$iconPicker:E},i))},U=(i={dispatchEvent:K,isPanelVisible(){return f.visiblePanel},togglePanel(){return(f.visiblePanel?y:_)(),(0,_vue.nextTick)()},hidePanel(){return f.visiblePanel&&y(),(0,_vue.nextTick)()},showPanel(){return f.visiblePanel||_(),(0,_vue.nextTick)()},focus(){var e=m.value;return f.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=m.value;return e&&e.blur(),(f.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;C(e,i),y()});Object.assign(E,i);return(0,_vue.watch)(()=>d.modelValue,e=>{f.selectIcon=""+(e||"")}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(E,"mousewheel",R),_ui.globalEvents.on(E,"mousedown",w),_ui.globalEvents.on(E,"keydown",z),_ui.globalEvents.on(E,"blur",D)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(E,"mousewheel"),_ui.globalEvents.off(E,"mousedown"),_ui.globalEvents.off(E,"keydown"),_ui.globalEvents.off(E,"blur")}),(0,_vue.provide)("$xeIconPicker",E),E.renderVN=()=>{var{className:e,clearable:i}=d,{initialized:l,isActivated:n,isAniVisible:t,visiblePanel:a,selectIcon:u}=f,r=p.value,o=h.value,c=k.value,s=b.value,v=P.value,_=I.value.className||d.popupClassName;return s?(0,_vue.h)("div",{ref:g,class:["vxe-ico-picker--readonly",e]},[(0,_vue.h)("i",{class:u})]):(0,_vue.h)("div",{ref:g,class:["vxe-ico-picker",e?_xeUtils.default.isFunction(e)?e({$iconPicker:E}):e:"",{["size--"+r]:r,"show--clear":i&&!o&&!!u,"is--visible":a,"is--disabled":o,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:B},[(0,_vue.h)("input",{ref:m,class:"vxe-ico-picker--input",onFocus:N,onBlur:S}),u?(()=>{var e=f["selectIcon"],i=A.value;if(i){var l=i["iconRender"],n=l?_ui.renderer.get(l.name):null,n=n?n.renderIconPickerOptionIcon:null;if(n&&l)return(0,_vue.h)("div",{key:"inc",class:"vxe-ico-picker--icon"},(0,_vn.getSlotVNs)(n(l,{$iconPicker:E,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"},v),(0,_vue.h)("div",{class:"vxe-ico-picker--suffix"},[(0,_vue.h)("div",{class:"vxe-ico-picker--clear-icon",onClick:O},[(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:a?(0,_ui.getIcon)().ICON_PICKER_OPEN:(0,_ui.getIcon)().ICON_PICKER_CLOSE})])])]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!c||!l},[(0,_vue.h)("div",{ref:x,class:["vxe-table--ignore-clear vxe-ico-picker--panel",_?_xeUtils.default.isFunction(_)?_({$iconPicker:E}):_:"",{["size--"+r]:r,"is--transfer":c,"ani--leave":t,"ani--enter":a}],placement:f.panelPlacement,style:f.panelStyle},[l&&(a||t)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper"},[(()=>{const n=d["showIconTitle"];var e=T.value;const t=h.value;return(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",onClick(e){t||U(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},l&&e?(0,_vn.getSlotVNs)(l(e,{$iconPicker:E,option:i})):[(0,_vue.h)("i",{class:i.icon||""})]),n?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_ui.renderEmptyElement)(E)])}))))})()]):(0,_ui.renderEmptyElement)(E)])])])},E},render(){return this.renderVN()}});