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