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