vxe-pc-ui/lib/tree-select/src/tree-select.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_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,_vue.defineComponent)({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:n,slots:N}=e,l=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const O=(0,_ui.useSize)(w)["computeSize"],k=(0,_vue.ref)(),j=(0,_vue.ref)(),q=(0,_vue.ref)(),A=(0,_vue.ref)(),L=(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:k},U=(0,_vue.computed)(()=>{var e=w["readonly"];return null===e?!!a&&a.props.readonly:e}),M=(0,_vue.computed)(()=>{var e=w["disabled"];return null===e?!!a&&a.props.disabled:e}),z=(0,_vue.computed)(()=>{var e=w["transfer"];if(null===e){var t=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||l||i||a)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})),Z=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({isHover:!0},e.nodeConfig)}),G=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({showIcon:!!e.showCheckbox},e.checkboxConfig,{trigger:"node"})}),J=(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"}),H=(0,_vue.computed)(()=>{return d.value.children||"children"}),Q=(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 l=L["fullNodeMaps"],i=D.value;return(_xeUtils.default.isArray(e)?e:[e]).map(e=>{var t=l[e];return t?t.item[i]:e}).join(", ")}),ee=(0,_vue.computed)(()=>{var{height:e,width:t}=V.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={},K={xID:t,props:w,context:e,reactData:L,internalData:r,getRefMaps:()=>s,getComputeMaps:()=>m},v=(e,t,l)=>{n(e,(0,_ui.createEvent)(l,{$treeSelect:K},t))};t={dispatchEvent:v};const c=()=>{var e=w["options"];const r=$.value;var t=H.value;const s=B.value,d={},v={};_xeUtils.default.eachTree(e,(e,t,l,i,n,o)=>{let a=(e=>{e=e[$.value];return e?encodeURIComponent(e):""})(e);a=a||getOptUniqueId(),v[a]&&(0,_log.errLog)("vxe.error.repeatKey",[r,a]),v[a]=!0;var u=e[s];d[u]&&(0,_log.errLog)("vxe.error.repeatKey",[s,u]),d[u]={item:e,index:t,items:l,parent:n,nodes:o}},{children:t}),L.fullOptionList=e||[],L.fullNodeMaps=d},p=()=>(0,_vue.nextTick)().then(()=>{var i=w["placement"],n=L["panelIndex"],o=k.value,a=A.value,e=z.value;if(a&&o){var u=o.offsetHeight,r=o.offsetWidth,s=a.offsetHeight,a=a.offsetWidth,n={zIndex:n},{boundingTop:o,boundingLeft:d,visibleHeight:v,visibleWidth:c}=(0,_dom.getAbsolutePos)(o);let l="bottom";if(e){let e=d,t=o+u;"top"===i?(l="top",t=o-s):i||(t+s+5>v&&(l="top",t=o-s),t<5&&(l="bottom",t=o+u)),e+a+5>c&&(e-=e+a+5-c),e<5&&(e=5),Object.assign(n,{left:e+"px",top:t+"px",minWidth:r+"px"})}else"top"===i?(l="top",n.bottom=u+"px"):i||v<o+u+s&&5<o-u-s&&(l="top",n.bottom=u+"px");return L.panelStyle=n,L.panelPlacement=l,(0,_vue.nextTick)()}}),g=()=>{var e=w["loading"],t=M.value;e||t||(clearTimeout(r.hpTimeout),L.initialized||(L.initialized=!0),L.isActivated=!0,L.isAniVisible=!0,setTimeout(()=>{L.visiblePanel=!0},10),L.panelIndex<(0,_utils.getLastZIndex)()&&(L.panelIndex=(0,_utils.nextZIndex)()),p())},_=()=>{L.visiblePanel=!1,r.hpTimeout=setTimeout(()=>{L.isAniVisible=!1},350)},f=(e,t)=>{var l,i=L["fullNodeMaps"];l=t,n("update:modelValue",l),t!==w.modelValue&&(l=i[t],v("change",{value:t,option:l?l.item:null},e),a)&&u&&a.triggerItemEvent(e,u.itemConfig.field,t)},h=(e,t)=>{f(e,t),v("clear",{value:t},e)},te=(e,t)=>{h(t,null),_()},x=e=>{var t=L["visiblePanel"];M.value||t&&(t=A.value,((0,_dom.getEventTargetNode)(e,t).flag?p:_)())},b=e=>{var t,l,i=L["visiblePanel"];M.value||(t=k.value,l=A.value,L.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,l).flag,i&&!L.isActivated&&_())},C=()=>{_()},le=e=>{M.value||L.visiblePanel||(L.triggerFocusPanel=!0,g(),setTimeout(()=>{L.triggerFocusPanel=!1},150)),v("focus",{},e)},ie=e=>{W(e),v("click",{},e)},ne=e=>{L.isActivated=!1,v("blur",{},e)},W=e=>{e=e.$event;e.preventDefault(),L.triggerFocusPanel?L.triggerFocusPanel=!1:(L.visiblePanel?_:g)()},oe=e=>{var t=e["$event"];v("node-click",e,t)},ae=e=>{var{value:e,$event:t}=e;f(t,e),_()},ue=e=>{var{value:e,$event:t}=e;f(t,e)},re=()=>{c()};Object.assign(K,t,{});return(0,_vue.watch)(()=>w.options,()=>{c()}),c(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(K,"mousewheel",x),_ui.globalEvents.on(K,"mousedown",b),_ui.globalEvents.on(K,"blur",C)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(K,"mousewheel"),_ui.globalEvents.off(K,"mousedown"),_ui.globalEvents.off(K,"blur")}),(0,_vue.provide)("$xeTreeSelect",K),K.renderVN=()=>{var{className:e,modelValue:t,multiple:l,options:i,loading:n}=w,{initialized:o,isActivated:a,isAniVisible:u,visiblePanel:r}=L,s=O.value,d=M.value,v=Y.value,c=z.value,p=U.value,g=ee.value,_=N.header,f=N.footer;const m=N.prefix;var h=V.value.className||w.popupClassName,x=R.value,b=Z.value,C=G.value,y=J.value,E=$.value,I=D.value,S=B.value,T=H.value,F=Q.value,P=X.value;return p?(0,_vue.h)("div",{ref:k,class:["vxe-tree-select--readonly",e]},[(0,_vue.h)("span",{class:"vxe-tree-select-label"},v)]):(0,_vue.h)("div",{ref:k,class:["vxe-tree-select",e?_xeUtils.default.isFunction(e)?e({$treeSelect:K}):e:"",{["size--"+s]:s,"is--visible":r,"is--disabled":d,"is--loading":n,"is--active":a}]},[(0,_vue.h)(_input.default,{ref:j,clearable:w.clearable,placeholder:n?(0,_ui.getI18n)("vxe.select.loadingText"):w.placeholder,readonly:!0,disabled:d,type:"text",prefixIcon:w.prefixIcon,suffixIcon:n?(0,_ui.getIcon)().TREE_SELECT_LOADED:r?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:n?"":v,onClear:te,onClick:ie,onFocus:le,onBlur:ne,onSuffixClick:W},m?{prefix:()=>m({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!c||!o},[(0,_vue.h)("div",{ref:A,class:["vxe-table--ignore-clear vxe-tree-select--panel",h?_xeUtils.default.isFunction(h)?h({$treeSelect:K}):h:"",{["size--"+s]:s,"is--transfer":c,"ani--leave":!n&&u,"ani--enter":!n&&r}],placement:L.panelPlacement,style:L.panelStyle},o?[(0,_vue.h)("div",{class:"vxe-tree-select--panel-wrapper"},[_?(0,_vue.h)("div",{class:"vxe-tree-select--panel-header"},_({})):(0,_ui.renderEmptyElement)(K),(0,_vue.h)("div",{class:"vxe-tree-select--panel-body"},[(0,_vue.h)("div",{ref:q,class:"vxe-tree-select-tree--wrapper",style:g},[(0,_vue.h)(_tree.default,{class:"vxe-tree-select--tree",data:i,indent:x.indent,showRadio:!l,radioConfig:y,checkNodeKey:l?null:t,showCheckbox:!!l,checkNodeKeys:l?t:null,checkboxConfig:C,titleField:I,valueField:S,keyField:E,childrenField:x.childrenField||T,parentField:x.parentField||F,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:oe,onRadioChange:ae,onCheckboxChange:ue,onLoadSuccess:re})])]),f?(0,_vue.h)("div",{class:"vxe-tree-select--panel-footer"},f({})):(0,_ui.renderEmptyElement)(K)])]:[])])])},K},render(){return this.renderVN()}});