vxe-pc-ui/lib/tree-select/src/tree-select.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"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_util=require("../../tree/src/util"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_input=_interopRequireDefault(require("../../input")),_button=_interopRequireDefault(require("../../button")),_tree=_interopRequireDefault(require("../../tree")),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getOptUniqueId(){return _xeUtils.default.uniqueId("node_")}function createReactData(){return{initialized:!1,searchValue:"",searchLoading:!1,panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,fullOptFlag:1,lazyOptFlag:1}}function createInternalData(){return{fullOptionList:[],fullNodeMaps:{},lazyNodeMaps:{}}}var _default=exports.default=(0,_comp.defineVxeComponent)({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},showFullLabel:{type:Boolean,default:(0,_ui.getConfig)().treeSelect.showFullLabel},separator:{type:String,default:(0,_ui.getConfig)().treeSelect.separator},filterable:Boolean,filterConfig:Object,multiple:Boolean,className:[String,Function],popupClassName:[String,Function],prefixIcon:String,placement:String,lazyOptions:Array,options:Array,optionProps:Object,zIndex:Number,size:{type:String,default:()=>(0,_ui.getConfig)().treeSelect.size||(0,_ui.getConfig)().size},remote:Boolean,remoteConfig:Function,popupConfig:Object,treeConfig:Object,menuConfig:Object,virtualYConfig:Object,autoClose:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.autoClose},checkedClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.checkedClosable},clearClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.clearClosable},showCloseButton:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showCloseButton},showTotalButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showTotalButoon},showCheckedButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showCheckedButoon},showClearButton:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showClearButton},showExpandButton:{type:Boolean,default:()=>(0,_ui.getConfig)().treeSelect.showExpandButton},transfer:{type:Boolean,default:null},remoteMethod:Function},emits:["update:modelValue","change","all-change","clear","blur","focus","click","node-click","visible-change"],setup(R,e){let{emit:a,slots:$}=e,h=(0,_vue.inject)("$xeModal",null),m=(0,_vue.inject)("$xeDrawer",null),x=(0,_vue.inject)("$xeTable",null),n=(0,_vue.inject)("$xeForm",null),o=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let re=(0,_ui.useSize)(R).computeSize,K=(0,_vue.ref)(),H=(0,_vue.ref)(),Y=(0,_vue.ref)(),se=(0,_vue.ref)(),Z=(0,_vue.ref)(),G=(0,_vue.ref)(),J=(0,_vue.reactive)(createReactData()),r=createInternalData(),b={refElem:K},ce=(0,_vue.computed)(()=>{var e=R.readonly;return null===e?!!n&&n.props.readonly:e}),Q=(0,_vue.computed)(()=>{var e=R.disabled;return null===e?!!n&&n.props.disabled:e}),W=(0,_vue.computed)(()=>{var e=R.transfer,t=X.value;if(_xeUtils.default.isBoolean(t.transfer))return t.transfer;if(null===e){t=(0,_ui.getConfig)().treeSelect.transfer;if(_xeUtils.default.isBoolean(t))return t;if(x||h||m||n)return!0}return e}),X=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.popupConfig,R.popupConfig)),ee=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.treeConfig,R.treeConfig,{data:void 0})),de=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.menuConfig,R.menuConfig)),ve=(0,_vue.computed)(()=>{var e=ee.value;return Object.assign({isHover:!0},e.nodeConfig)}),pe=(0,_vue.computed)(()=>{var e=ee.value;return Object.assign({showIcon:!!e.showCheckbox},e.checkboxConfig,{trigger:"node"})}),_e=(0,_vue.computed)(()=>{var e=ee.value;return Object.assign({showIcon:!!e.showRadio},e.radioConfig,{trigger:"node"})}),l=(0,_vue.computed)(()=>R.optionProps||{}),te=(0,_vue.computed)(()=>ee.value.keyField||"id"),le=(0,_vue.computed)(()=>l.value.label||"label"),ae=(0,_vue.computed)(()=>l.value.value||"value"),ne=(0,_vue.computed)(()=>l.value.children||"children"),oe=(0,_vue.computed)(()=>{var e=l.value,t=ee.value;return e.parent||t.parentField||"parentId"}),fe=(0,_vue.computed)(()=>l.value.hasChild||"hasChild"),ge=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.virtualYConfig,R.virtualYConfig)),i=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().treeSelect.remoteConfig,R.remoteConfig)),he=(0,_vue.computed)(()=>{var e=ee.value;return Object.assign({},e.filterConfig,R.filterConfig)}),me=(0,_vue.computed)(()=>{let{modelValue:e,showFullLabel:l}=R,{fullOptFlag:a,lazyOptFlag:n}=J,{fullNodeMaps:o,lazyNodeMaps:i}=r,u=le.value;return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).map(e=>{var t=o[e];if(a&&t)return l?t.fullLabel:t.item[u];if(n){t=i[e];if(t)return l?t.fullLabel:t.item[u]}return e}).join(", ")}),xe=(0,_vue.computed)(()=>{var{height:e,width:t}=X.value,l={};return t&&(l.width=(0,_dom.toCssUnit)(t)),e&&(l.height=(0,_dom.toCssUnit)(e),l.maxHeight=(0,_dom.toCssUnit)(e)),l}),C={},ie={xID:t,props:R,context:e,reactData:J,internalData:r,getRefMaps:()=>b,getComputeMaps:()=>C},u=(e,t,l)=>{a(e,(0,_ui.createEvent)(l,{$treeSelect:ie},t))},y=e=>{a("update:modelValue",e)},ue=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=$[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[];t={dispatchEvent:u};let E=e=>{e=e[te.value];return e?encodeURIComponent(e):""},s=e=>{let r=R.separator;var t=ee.value;let s=te.value;var l=oe.value,a=ne.value;let c=ae.value,d=le.value;var n=t.transform;let v={},p={};var o=(e,t,l,a,n,o)=>{let i=E(e);i=i||getOptUniqueId(),p[i]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+s,i]),p[i]=!0;var u=e[c];v[u]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+c,u]),v[u]={item:e,index:t,items:l,parent:n,nodes:o,fullLabel:o.map(e=>e[d]).join((r||"/")+" ")}};return e&&(n?(n=_xeUtils.default.toArrayTree(e,{key:s,parentKey:l,mapChildren:a,rootParentValue:t.rootParentValue,rootValues:t.rootValues}),_xeUtils.default.eachTree(n,o,{children:a})):_xeUtils.default.eachTree(e,o,{children:a})),v},c=()=>{var e=R.options;r.fullNodeMaps=s(e||[]),r.fullOptionList=e||[],J.fullOptFlag++},d=()=>{var e=R.lazyOptions;r.lazyNodeMaps=s(e||[]),J.lazyOptFlag++},S=()=>{var e=X.value.zIndex||R.zIndex;e?J.panelIndex=_xeUtils.default.toNumber(e):J.panelIndex<(0,_utils.getLastZIndex)()&&(J.panelIndex=(0,_utils.nextZIndex)())},v=()=>{let l=R.placement,a=J.panelIndex,n=K.value,o=Z.value,i=W.value,u=X.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(n,o,{placement:u.placement||l,defaultPlacement:u.defaultPlacement,teleportTo:i}),t=Object.assign(e.style,{zIndex:a});J.panelStyle=t,J.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},I=()=>{var{loading:e,remote:t,filterable:l}=R,a=r.fullOptionList,n=Q.value,o=i.value;e||n||(clearTimeout(r.hpTimeout),J.initialized||(J.initialized=!0),J.isActivated=!0,J.isAniVisible=!0,l&&t&&o.enabled&&o.autoLoad&&!a.length&&F(),setTimeout(()=>{J.visiblePanel=!0,V(),v()},10),S(),v(),u("visible-change",{visible:!0},null))},p=e=>{J.visiblePanel=!1,r.hpTimeout=setTimeout(()=>{J.isAniVisible=!1},350),u("visible-change",{visible:!1},e||null)},_=(e,t,l)=>{t=_xeUtils.default.isArray(t)?t.map(_util.deNodeValue):(0,_util.deNodeValue)(t);y(t),t!==R.modelValue&&(u("change",{value:t,node:l,option:l},e),n)&&o&&n.triggerItemEvent(e,o.itemConfig.field,t)},w=(e,t)=>{_(e,t,null),u("clear",{value:t},e)},be=e=>{e=e.$event;w(e,null),p(e)},Ce=e=>{let l=e.$event,{multiple:t,autoClose:a,checkedClosable:n}=R;e=G.value;t&&e&&e.setAllCheckboxNode(!0).then(({checkNodeKeys:e,checkNodes:t})=>{_(l,e,t[0]),u("all-change",{value:e},l),(_xeUtils.default.isBoolean(a)?a:n)&&p(l)})},ye=e=>{let t=e.$event,{multiple:l,autoClose:a,clearClosable:n}=R;var o,e=G.value;e&&(o=l?[]:null,e.clearCheckboxNode().then(()=>{(_xeUtils.default.isBoolean(a)?a:n)&&p(t)}),_(t,o,null),u("clear",{value:o},t))},Ee=e=>{e=e.$event;p(e)},Se=()=>{var e=G.value;e&&e.setAllExpandNode(!0)},Ie=()=>{var e=G.value;e&&e.clearAllExpandNode()},k=e=>{var t=J.visiblePanel;Q.value||t&&(t=Z.value,(0,_dom.getEventTargetNode)(e,t).flag?v():p(e))},B=e=>{var t,l,a=J.visiblePanel;Q.value||(t=K.value,l=Z.value,J.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,l).flag,a&&!J.isActivated&&p(e))},N=e=>{var{visiblePanel:t,isActivated:l}=J;t&&p(e),l&&(J.isActivated=!1),(t||l)&&(e=H.value)&&e.blur()},O=()=>{var e=J.visiblePanel;e&&v()},V=()=>{R.filterable&&(0,_vue.nextTick)(()=>{var e=Y.value;e&&e.focus()})},we=e=>{Q.value||J.visiblePanel||(J.triggerFocusPanel=!0,I(),setTimeout(()=>{J.triggerFocusPanel=!1},150)),u("focus",{},e)},ke=e=>{Oe(e),u("click",{},e)},Be=e=>{J.isActivated=!1,u("blur",{},e)},Ne=e=>{J.searchValue=e},F=()=>{var{modelValue:e,remote:t,remoteMethod:l}=R,a=J.searchValue,n=i.value,l=n.queryMethod||l;t&&l&&n.enabled&&(J.searchLoading=!0,Promise.resolve(l({$treeSelect:ie,searchValue:a,value:e})).then(()=>(0,_vue.nextTick)()).catch(()=>(0,_vue.nextTick)()).finally(()=>{J.searchLoading=!1}))},Oe=e=>{e=e.$event;e.preventDefault(),J.triggerFocusPanel?J.triggerFocusPanel=!1:J.visiblePanel?p(e):I()},Ve=()=>{v()},Fe=e=>{var t=e.$event;u("node-click",e,t)},Pe=e=>{var{value:e,$event:t,node:l}=e;_(t,e,l),p(t)},Ue=e=>{var{value:e,$event:t,node:l}=e;_(t,e,l)},Te=()=>{c()};Object.assign(ie,t,{});let f=(0,_vue.ref)(0),g=((0,_vue.watch)(()=>R.options?R.options.length:-1,()=>{f.value++}),(0,_vue.watch)(()=>R.options,()=>{f.value++}),(0,_vue.watch)(f,()=>{c()}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>R.lazyOptions?R.lazyOptions.length:-1,()=>{g.value++}),(0,_vue.watch)(()=>R.lazyOptions,()=>{g.value++}),(0,_vue.watch)(g,()=>{d()}),c(),d(),(0,_vue.onMounted)(()=>{_xeUtils.default.isBoolean(R.autoClose)&&(0,_log.warnLog)("vxe.error.delProp",["auto-close","checked-closable | clear-closable"]),_ui.globalEvents.on(ie,"mousewheel",k),_ui.globalEvents.on(ie,"mousedown",B),_ui.globalEvents.on(ie,"blur",N),_ui.globalEvents.on(ie,"resize",O)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(ie,"mousewheel"),_ui.globalEvents.off(ie,"mousedown"),_ui.globalEvents.off(ie,"blur"),_ui.globalEvents.off(ie,"resize"),_xeUtils.default.assign(J,createReactData()),_xeUtils.default.assign(r,createInternalData())}),(0,_vue.provide)("$xeTreeSelect",ie),ie.renderVN=()=>{var{className:e,modelValue:t,multiple:l,options:a,loading:n,menuConfig:o,filterable:i,showTotalButoon:u,showCheckedButoon:r,showClearButton:s,showExpandButton:c,showCloseButton:d}=R,{initialized:v,isActivated:p,isAniVisible:_,visiblePanel:f,searchValue:g}=J,h=re.value,m=Q.value,x=me.value,b=W.value,C=ce.value,y=xe.value,E=$.header,S=$.footer;let I=$.prefix;var w=X.value,k=w.className||R.popupClassName;if(C)return(0,_vue.h)("div",{ref:K,class:["vxe-tree-select--readonly",e]},[(0,_vue.h)("span",{class:"vxe-tree-select-label"},x)]);var C=ee.value,B=de.value,N=ve.value,O=pe.value,V=_e.value,F=te.value,P=le.value,z=ae.value,L=ne.value,A=oe.value,j=fe.value,q=ge.value,M=he.value,U=C.slots,D=_xeUtils.default.eqNull(t)?[]:_xeUtils.default.isArray(t)?t:[t],T={};if(U){let{icon:t,title:l,extra:a}=U;t&&(T.icon=e=>ue(t,e)),l&&(T.title=e=>ue(l,e)),a&&(T.extra=e=>ue(a,e))}return(0,_vue.h)("div",{ref:K,class:["vxe-tree-select",e?_xeUtils.default.isFunction(e)?e({$treeSelect:ie}):e:"",{["size--"+h]:h,"is--filterable":i,"is--visible":f,"is--disabled":m,"is--loading":n,"is--active":p}]},[(0,_vue.h)(_input.default,{ref:H,clearable:R.clearable,placeholder:n?(0,_ui.getI18n)("vxe.select.loadingText"):R.placeholder,editable:!1,disabled:m,type:"text",prefixIcon:R.prefixIcon,suffixIcon:n?(0,_ui.getIcon)().TREE_SELECT_LOADED:f?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:n?"":x,title:x,onClear:be,onClick:ke,onFocus:we,onBlur:Be,onSuffixClick:Oe},I?{prefix:()=>I({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!b||!v},[(0,_vue.h)("div",{ref:Z,class:["vxe-table--ignore-clear vxe-tree-select--panel",k?_xeUtils.default.isFunction(k)?k({$treeSelect:ie}):k:"",{["size--"+h]:h,"is--transfer":b,"ani--leave":!n&&_,"ani--enter":!n&&f}],placement:J.panelPlacement,style:J.panelStyle},v?[(0,_vue.h)("div",{class:"vxe-tree-select--panel-wrapper"},[i?(0,_vue.h)("div",{class:"vxe-tree-select--panel-search"},[(0,_vue.h)(_input.default,{ref:Y,class:"vxe-tree-select-search--input",modelValue:g,clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.treeSelect.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":Ne})]):(0,_ui.renderEmptyElement)(ie),r&&l||s||c||E?(0,_vue.h)("div",{class:"vxe-tree-select--panel-header"},E?E({}):[(0,_vue.h)("div",{class:"vxe-tree-select--header-button"},[r&&s?(0,_vue.h)("div",{class:"vxe-tree-select--selected-btns"},[r&&l?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.allChecked"),mode:"text",onClick:Ce}):(0,_ui.renderEmptyElement)(ie),s?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.clearChecked"),mode:"text",onClick:ye}):(0,_ui.renderEmptyElement)(ie)]):(0,_ui.renderEmptyElement)(ie),c?(0,_vue.h)("div",{class:"vxe-tree-select--expand-btns"},[c?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.allExpand"),mode:"text",onClick:Se}):(0,_ui.renderEmptyElement)(ie),c?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.treeSelect.clearExpand"),mode:"text",onClick:Ie}):(0,_ui.renderEmptyElement)(ie)]):(0,_ui.renderEmptyElement)(ie)])]):(0,_ui.renderEmptyElement)(ie),(0,_vue.h)("div",{class:"vxe-tree-select--panel-body"},[(0,_vue.h)("div",{ref:se,class:"vxe-tree-select-tree--wrapper",style:y},[(0,_vue.h)(_tree.default,{ref:G,class:"vxe-tree-select--tree",height:w.height?"100%":C.height,minHeight:C.minHeight,maxHeight:w.height?"":C.maxHeight,autoResize:!0,data:a,indent:C.indent,showRadio:!l,radioConfig:V,checkNodeKey:l?null:t,showCheckbox:!!l,checkNodeKeys:l?t:null,checkboxConfig:O,titleField:P,valueField:z,keyField:F,childrenField:C.childrenField||L,parentField:A,hasChildField:C.hasChildField||j,accordion:C.accordion,expandAll:C.expandAll,expandNodeKeys:C.expandNodeKeys,nodeConfig:N,lazy:C.lazy,loadMethod:C.loadMethod,toggleMethod:C.toggleMethod,transform:C.transform,rootParentValue:C.rootParentValue,rootValues:C.rootValues,trigger:C.trigger,showIcon:C.showIcon,showLine:C.showLine,iconOpen:C.iconOpen,iconLoaded:C.iconLoaded,iconClose:C.iconClose,filterValue:g,filterConfig:M,menuConfig:o?B:void 0,virtualYConfig:q,onNodeExpand:Ve,onNodeClick:Fe,onRadioChange:Pe,onCheckboxChange:Ue,onLoadSuccess:Te},T)])]),S||u||d&&l?(0,_vue.h)("div",{class:"vxe-tree-select--panel-footer"},S?S({}):[(0,_vue.h)("div",{class:"vxe-tree-select--footer-button"},[u?(0,_vue.h)("div",{class:"vxe-tree-select--total-btns"},(0,_ui.getI18n)("vxe.treeSelect.total",[D.length])):(0,_ui.renderEmptyElement)(ie),d&&l?(0,_vue.h)("div",{class:"vxe-tree-select--oper-btns"},[(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.select.close"),mode:"text",onClick:Ee})]):(0,_ui.renderEmptyElement)(ie)])]):(0,_ui.renderEmptyElement)(ie)])]:[])])])},ie},render(){return this.renderVN()}});