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

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({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),a=(0,_vue.inject)("$xeTable",null),u=(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}),s={},g=(0,_vue.ref)(),m=(0,_vue.ref)(),b=(0,_vue.ref)(),r={refElem:g},x={xID:i,props:d,context:e,reactData:f,getRefMaps:()=>r};const h=(0,_vue.computed)(()=>{var e=d["readonly"];return null===e?!!u&&u.props.readonly:e}),E=(0,_vue.computed)(()=>{var e=d["disabled"];return null===e?!!u&&u.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(a||l||n||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")}),c=(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||""})}),T=(0,_vue.computed)(()=>{var e=c.value;return _xeUtils.default.chunk(e,4)}),v=()=>(0,_vue.nextTick)().then(()=>{var t=d["placement"],n=f["panelIndex"],a=g.value,u=b.value,e=k.value;if(u&&a){var o=a.offsetHeight,s=a.offsetWidth,r=u.offsetHeight,u=u.offsetWidth,n={zIndex:n},{boundingTop:a,boundingLeft:c,visibleHeight:v,visibleWidth:_}=(0,_dom.getAbsolutePos)(a);let l="bottom";if(e){let e=c,i=a+o;"top"===t?(l="top",i=a-r):t||(i+r+5>v&&(l="top",i=a-r),i<5&&(l="bottom",i=a+o)),e+u+5>_&&(e-=e+u+5-_),e<5&&(e=5),Object.assign(n,{left:e+"px",top:i+"px",minWidth:s+"px"})}else"top"===t?(l="top",n.bottom=o+"px"):t||v<a+o+r&&5<a-o-r&&(l="top",n.bottom=o+"px");return f.panelStyle=n,f.panelPlacement=l,(0,_vue.nextTick)()}}),_=()=>{var e=s["hpTimeout"];E.value||(e&&(clearTimeout(e),s.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,s.hpTimeout=setTimeout(()=>{f.isAniVisible=!1},350)},I=(e,i)=>{(f.selectIcon=i)!==d.modelValue&&(t("update:modelValue",i),K("change",{value:i},e),u)&&o&&u.triggerItemEvent(e,o.itemConfig.field,i)},y=()=>{E.value||f.visiblePanel||_()},N=()=>{f.isActivated=!1},C=(e,i)=>{I(e,i),K("clear",{value:i},e)},S=(e,i)=>{C(i,null),A()},V=e=>{e.preventDefault(),(f.visiblePanel?A:_)()},L=e=>{V(e),K("click",{},e)},O=e=>{var i=f["visiblePanel"];E.value||i&&(i=b.value,((0,_dom.getEventTargetNode)(e,i).flag?v:A)())},B=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,a,u,o,s=d["clearable"],r=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),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.DELETE),o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR),i&&(f.isActivated=!1),r?t||i?A():l?(e.preventDefault(),e.stopPropagation()):(n||a||o)&&e.preventDefault():(n||a||l||o)&&f.isActivated&&(e.preventDefault(),_()),f.isActivated&&u&&s&&C(e,null))},z=()=>{A()},K=(e,i,l)=>{t(e,(0,_ui.createEvent)(l,{$iconPicker:x},i))},R=(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;I(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",O),_ui.globalEvents.on(x,"mousedown",B),_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:a,visiblePanel:u,selectIcon:o}=f,s=p.value,r=E.value,c=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--"+s]:s,"show--clear":l&&!r&&!!o,"is--visible":u,"is--disabled":r,"is--active":n}]},[(0,_vue.h)("div",{class:"vxe-ico-picker--inner",onClick:L},[(0,_vue.h)("input",{ref:m,class:"vxe-ico-picker--input",onFocus:y,onBlur:N}),o?(0,_vue.h)("div",{class:"vxe-ico-picker--icon"},[(0,_vue.h)("i",{class:o})]):(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:S},[(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:!c||!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--"+s]:s,"is--transfer":c,"ani--leave":a,"ani--enter":u}],placement:f.panelPlacement,style:f.panelStyle},[t&&(u||a)?(0,_vue.h)("div",{class:"vxe-ico-picker--panel-wrapper"},[(()=>{const l=d["showIconTitle"];var e=T.value;const t=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=>(0,_vue.h)("div",{class:"vxe-ico-picker--item",onClick(e){t||R(e,i)}},[(0,_vue.h)("div",{class:"vxe-ico-picker--item-icon"},[(0,_vue.h)("i",{class:i.icon||""})]),l?(0,_vue.h)("div",{class:"vxe-ico-picker--item-title"},""+(i.title||"")):(0,_vue.createCommentVNode)()])))))})()]):(0,_vue.createCommentVNode)()])])])},x},render(){return this.renderVN()}});