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