primevue/treeselect/treeselect.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import l from"primevue/overlayeventbus";import s from"primevue/tree";import n from"primevue/ripple";import{resolveComponent as o,openBlock as a,createBlock as r,createVNode as d,renderSlot as p,Fragment as c,createTextVNode as h,toDisplayString as u,renderList as y,createCommentVNode as f,Teleport as m,Transition as b,withCtx as v}from"vue";var g={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:String,disabled:Boolean,tabindex:String,inputId:String,ariaLabelledBy:null,selectionMode:{type:String,default:"single"},panelClass:{type:String,default:null},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0}},watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||t.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.which){case 40:!this.overlayVisible&&e.altKey&&(this.show(),e.preventDefault());break;case 32:this.overlayVisible||(this.show(),e.preventDefault());break;case 13:case 27:this.overlayVisible&&(this.hide(),e.preventDefault());break;case 9:this.hide()}},onOverlayEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.clear(t)},alignOverlay(){this.appendDisabled?t.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=t.getOuterWidth(this.$el)+"px",t.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){l.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,i){if(e){if(this.isSelected(e,t)&&(i.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let l of e.children)this.findSelectedNodes(l,t,i)}else for(let e of this.options)this.findSelectedNodes(e,t,i)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,i){if(e){if(this.isSelected(e,i)&&(this.expandPath(t),delete i[e.key]),Object.keys(i).length&&e.children)for(let l of e.children)t.push(e.key),this.updateTreeBranchState(l,t,i)}else for(let e of this.options)this.updateTreeBranchState(e,[],i)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},appendDisabled(){return"self"===this.appendTo},appendTarget(){return this.appendDisabled?null:this.appendTo}},components:{TSTree:s},directives:{ripple:n}};const x={class:"p-hidden-accessible"},k={class:"p-treeselect-label-container"},S={class:"p-treeselect-token-label"},w=d("div",{class:"p-treeselect-trigger"},[d("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"})],-1),L={key:0,class:"p-treeselect-empty-message"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&l.firstChild?l.insertBefore(s,l.firstChild):l.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label  {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),g.render=function(e,t,i,l,s,n){const g=o("TSTree");return a(),r("div",{ref:"container",class:n.containerClass,onClick:t[7]||(t[7]=(...e)=>n.onClick&&n.onClick(...e))},[d("div",x,[d("input",{ref:"focusInput",type:"text",role:"listbox",id:i.inputId,readonly:"",disabled:i.disabled,onFocus:t[1]||(t[1]=(...e)=>n.onFocus&&n.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>n.onBlur&&n.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>n.onKeyDown&&n.onKeyDown(...e)),tabindex:i.tabindex,"aria-haspopup":"true","aria-expanded":s.overlayVisible,"aria-labelledby":i.ariaLabelledBy},null,40,["id","disabled","tabindex","aria-expanded","aria-labelledby"])]),d("div",k,[d("div",{class:n.labelClass},[p(e.$slots,"value",{value:n.selectedNodes,placeholder:i.placeholder},(()=>["comma"===i.display?(a(),r(c,{key:0},[h(u(n.label||"empty"),1)],64)):"chip"===i.display?(a(),r(c,{key:1},[(a(!0),r(c,null,y(n.selectedNodes,(e=>(a(),r("div",{class:"p-treeselect-token",key:e.key},[d("span",S,u(e.label),1)])))),128)),n.emptyValue?(a(),r(c,{key:0},[h(u(i.placeholder||"empty"),1)],64)):f("",!0)],64)):f("",!0)]))],2)]),w,(a(),r(m,{to:n.appendTarget,disabled:n.appendDisabled},[d(b,{name:"p-connected-overlay",onEnter:n.onOverlayEnter,onLeave:n.onOverlayLeave,onAfterLeave:n.onOverlayAfterLeave},{default:v((()=>[s.overlayVisible?(a(),r("div",{key:0,ref:n.overlayRef,onClick:t[6]||(t[6]=(...e)=>n.onOverlayClick&&n.onOverlayClick(...e)),class:n.panelStyleClass},[p(e.$slots,"header",{value:i.modelValue,options:i.options}),d("div",{class:"p-treeselect-items-wrapper",style:{"max-height":i.scrollHeight}},[d(g,{value:i.options,selectionMode:i.selectionMode,"onUpdate:selectionKeys":n.onSelectionChange,selectionKeys:i.modelValue,expandedKeys:s.expandedKeys,"onUpdate:expandedKeys":n.onNodeToggle,metaKeySelection:i.metaKeySelection,onNodeExpand:t[4]||(t[4]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[5]||(t[5]=t=>e.$emit("node-collapse",t)),onNodeSelect:n.onNodeSelect,onNodeUnselect:n.onNodeUnselect},null,8,["value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),n.emptyOptions?(a(),r("div",L,[p(e.$slots,"empty",{},(()=>[h(u(n.emptyMessageText),1)]))])):f("",!0)],4),p(e.$slots,"footer",{value:i.modelValue,options:i.options})],2)):f("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])],8,["to","disabled"]))],2)};export default g;