vxe-pc-ui/lib/icon-picker/src/icon-picker.min.js

A vue based PC component library

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){let 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();let 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}),c={},m=(0,_vue.ref)(),g=(0,_vue.ref)(),x=(0,_vue.ref)(),o={refElem:m},E={xID:i,props:d,context:e,reactData:f,getRefMaps:()=>o};let 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}),P=(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}),k=(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)(()=>{let i=f.selectIcon;var e=s.value;return i?e.find(e=>e.icon===i):null}),v=()=>{f.panelIndex<(0,_utils.getLastZIndex)()&&(f.panelIndex=(0,_utils.nextZIndex)())},_=()=>{let l=d.placement,n=f.panelIndex,t=m.value,a=x.value,u=P.value,r=I.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(t,a,{placement:r.placement||l,defaultPlacement:r.defaultPlacement,teleportTo:u}),i=Object.assign(e.style,{zIndex:n});f.panelStyle=i,f.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},y=()=>{var e=c.hpTimeout;h.value||(e&&(clearTimeout(e),c.hpTimeout=void 0),f.initialized||(f.initialized=!0),f.isActivated=!0,f.isAniVisible=!0,setTimeout(()=>{f.visiblePanel=!0,_()},10),v(),_())},C=()=>{f.visiblePanel=!1,c.hpTimeout=setTimeout(()=>{f.isAniVisible=!1},350)},N=(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)},S=()=>{h.value||f.visiblePanel||y()},V=()=>{f.isActivated=!1},O=(e,i)=>{N(e,i),K("clear",{value:i},e)},L=(e,i)=>{O(i,null),C()},B=e=>{e.preventDefault(),(f.visiblePanel?C:y)()},R=e=>{B(e),K("click",{},e)},w=e=>{var i=f.visiblePanel;h.value||i&&(i=x.value,((0,_dom.getEventTargetNode)(e,i).flag?_:C)())},z=e=>{var i,l,n=f.visiblePanel;h.value||(i=m.value,l=x.value,f.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,l).flag,n&&!f.isActivated&&C())},D=e=>{var i,l,n,t,a,u,r,c=d.clearable,o=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),o?n||i?C():l?(e.preventDefault(),e.stopPropagation()):(t||a||r)&&e.preventDefault():(t||a||l||r)&&f.isActivated&&(e.preventDefault(),y()),f.isActivated&&u&&c&&O(e,null))},U=()=>{var{visiblePanel:e,isActivated:i}=f;e&&C(),i&&(f.isActivated=!1),(e||i)&&(e=g.value)&&e.blur()},K=(e,i,l)=>{n(e,(0,_ui.createEvent)(l,{$iconPicker:E},i))},j=(i={dispatchEvent:K,isPanelVisible(){return f.visiblePanel},togglePanel(){return(f.visiblePanel?C:y)(),(0,_vue.nextTick)()},hidePanel(){return f.visiblePanel&&C(),(0,_vue.nextTick)()},showPanel(){return f.visiblePanel||y(),(0,_vue.nextTick)()},focus(){var e=g.value;return f.isActivated=!0,e&&e.blur(),(0,_vue.nextTick)()},blur(){var e=g.value;return e&&e.blur(),(f.isActivated=!1,_vue.nextTick)()}},(e,i)=>{i=i.icon;N(e,i),C()});Object.assign(E,i);return(0,_vue.watch)(()=>d.modelValue,e=>{f.selectIcon=""+(e||"")}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(E,"mousewheel",w),_ui.globalEvents.on(E,"mousedown",z),_ui.globalEvents.on(E,"keydown",D),_ui.globalEvents.on(E,"blur",U)}),(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,c=h.value,o=P.value,s=b.value,v=k.value,_=I.value.className||d.popupClassName;return s?(0,_vue.h)("div",{ref:m,class:["vxe-ico-picker--readonly",e]},[(0,_vue.h)("i",{class:u})]):(0,_vue.h)("div",{ref:m,class:["vxe-ico-picker",e?_xeUtils.default.isFunction(e)?e({$iconPicker:E}):e:"",{["size--"+r]:r,"show--clear":i&&!c&&!!u,"is--visible":a,"is--disabled":c,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:R},[(0,_vue.h)("input",{ref:g,class:"vxe-ico-picker--input",onFocus:S,onBlur:V}),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:L},[(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:!o||!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":o,"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"},[(()=>{let n=d.showIconTitle,t=f.selectIcon;var e=T.value;let a=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",{"is--selected":t===i.icon}],onClick(e){a||j(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()}});