primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 14.4 kB
JavaScript
"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"TreeNode",emits:["node-toggle","node-click","checkbox-change"],props:{node:{type:null,default:null},expandedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},templates:{type:null,default:null}},nodeTouched:!1,methods:{toggle(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)},onClick(t){e.DomHandler.hasClass(t.target,"p-tree-toggler")||e.DomHandler.hasClass(t.target.parentElement,"p-tree-toggler")||(this.isCheckboxSelectionMode()?this.toggleCheckbox():this.$emit("node-click",{originalEvent:t,nodeTouched:this.nodeTouched,node:this.node}),this.nodeTouched=!1)},onChildNodeClick(e){this.$emit("node-click",e)},onTouchEnd(){this.nodeTouched=!0},onKeyDown(e){const t=e.target.parentElement;switch(e.which){case 40:var n=t.children[1];if(n)this.focusNode(n.children[0]);else{const e=t.nextElementSibling;if(e)this.focusNode(e);else{let e=this.findNextSiblingOfAncestor(t);e&&this.focusNode(e)}}e.preventDefault();break;case 38:if(t.previousElementSibling)this.focusNode(this.findLastVisibleDescendant(t.previousElementSibling));else{let e=this.getParentNodeElement(t);e&&this.focusNode(e)}e.preventDefault();break;case 37:case 39:this.$emit("node-toggle",this.node),e.preventDefault();break;case 13:this.onClick(e),e.preventDefault()}},toggleCheckbox(){let e=this.selectionKeys?{...this.selectionKeys}:{};const t=!this.checked;this.propagateDown(this.node,t,e),this.$emit("checkbox-change",{node:this.node,check:t,selectionKeys:e})},propagateDown(e,t,n){if(t?n[e.key]={checked:!0,partialChecked:!1}:delete n[e.key],e.children&&e.children.length)for(let l of e.children)this.propagateDown(l,t,n)},propagateUp(e){let t=e.check,n={...e.selectionKeys},l=0,o=!1;for(let e of this.node.children)n[e.key]&&n[e.key].checked?l++:n[e.key]&&n[e.key].partialChecked&&(o=!0);t&&l===this.node.children.length?n[this.node.key]={checked:!0,partialChecked:!1}:(t||delete n[this.node.key],o||l>0&&l!==this.node.children.length?n[this.node.key]={checked:!1,partialChecked:!0}:delete n[this.node.key]),this.$emit("checkbox-change",{node:e.node,check:e.check,selectionKeys:n})},onChildCheckboxChange(e){this.$emit("checkbox-change",e)},findNextSiblingOfAncestor(e){let t=this.getParentNodeElement(e);return t?t.nextElementSibling?t.nextElementSibling:this.findNextSiblingOfAncestor(t):null},findLastVisibleDescendant(e){const t=e.children[1];if(t){const e=t.children[t.children.length-1];return this.findLastVisibleDescendant(e)}return e},getParentNodeElement(t){const n=t.parentElement.parentElement;return e.DomHandler.hasClass(n,"p-treenode")?n:null},focusNode(e){e.children[0].focus()},isCheckboxSelectionMode(){return"checkbox"===this.selectionMode}},computed:{hasChildren(){return this.node.children&&this.node.children.length>0},expanded(){return this.expandedKeys&&!0===this.expandedKeys[this.node.key]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},selectable(){return!1!==this.node.selectable&&null!=this.selectionMode},selected(){return!(!this.selectionMode||!this.selectionKeys)&&!0===this.selectionKeys[this.node.key]},containerClass(){return["p-treenode",{"p-treenode-leaf":this.leaf}]},contentClass(){return["p-treenode-content",this.node.styleClass,{"p-treenode-selectable":this.selectable,"p-highlight":this.checkboxMode?this.checked:this.selected}]},icon(){return["p-treenode-icon",this.node.icon]},toggleIcon(){return["p-tree-toggler-icon pi pi-fw",{"pi-chevron-down":this.expanded,"pi-chevron-right":!this.expanded}]},checkboxClass(){return["p-checkbox-box",{"p-highlight":this.checked,"p-indeterminate":this.partialChecked}]},checkboxIcon(){return["p-checkbox-icon",{"pi pi-check":this.checked,"pi pi-minus":this.partialChecked}]},checkboxMode(){return"checkbox"===this.selectionMode&&!1!==this.node.selectable},checked(){return!!this.selectionKeys&&(this.selectionKeys[this.node.key]&&this.selectionKeys[this.node.key].checked)},partialChecked(){return!!this.selectionKeys&&(this.selectionKeys[this.node.key]&&this.selectionKeys[this.node.key].partialChecked)}},directives:{ripple:l(t).default}};const i={key:0,class:"p-checkbox p-component"},s={class:"p-treenode-label"},c={key:0,class:"p-treenode-children",role:"group"};o.render=function(e,t,l,o,d,r){const a=n.resolveComponent("TreeNode",!0),h=n.resolveDirective("ripple");return n.openBlock(),n.createBlock("li",{class:r.containerClass},[n.createVNode("div",{class:r.contentClass,tabindex:"0",role:"treeitem","aria-expanded":r.expanded,onClick:t[2]||(t[2]=(...e)=>r.onClick&&r.onClick(...e)),onKeydown:t[3]||(t[3]=(...e)=>r.onKeyDown&&r.onKeyDown(...e)),onTouchend:t[4]||(t[4]=(...e)=>r.onTouchEnd&&r.onTouchEnd(...e)),style:l.node.style},[n.withDirectives(n.createVNode("button",{type:"button",class:"p-tree-toggler p-link",onClick:t[1]||(t[1]=(...e)=>r.toggle&&r.toggle(...e)),tabindex:"-1"},[n.createVNode("span",{class:r.toggleIcon},null,2)],512),[[h]]),r.checkboxMode?(n.openBlock(),n.createBlock("div",i,[n.createVNode("div",{class:r.checkboxClass,role:"checkbox","aria-checked":r.checked},[n.createVNode("span",{class:r.checkboxIcon},null,2)],10,["aria-checked"])])):n.createCommentVNode("",!0),n.createVNode("span",{class:r.icon},null,2),n.createVNode("span",s,[l.templates[l.node.type]||l.templates.default?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.templates[l.node.type]||l.templates.default),{key:0,node:l.node},null,8,["node"])):(n.openBlock(),n.createBlock(n.Fragment,{key:1},[n.createTextVNode(n.toDisplayString(l.node.label),1)],64))])],46,["aria-expanded"]),r.hasChildren&&r.expanded?(n.openBlock(),n.createBlock("ul",c,[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(l.node.children,(e=>(n.openBlock(),n.createBlock(a,{key:e.key,node:e,templates:l.templates,expandedKeys:l.expandedKeys,onNodeToggle:r.onChildNodeToggle,onNodeClick:r.onChildNodeClick,selectionMode:l.selectionMode,selectionKeys:l.selectionKeys,onCheckboxChange:r.propagateUp},null,8,["node","templates","expandedKeys","onNodeToggle","onNodeClick","selectionMode","selectionKeys","onCheckboxChange"])))),128))])):n.createCommentVNode("",!0)],2)};var d={name:"Tree",emits:["node-expand","node-collapse","update:expandedKeys","update:selectionKeys","node-select","node-unselect"],props:{value:{type:null,default:null},expandedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},metaKeySelection:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:"pi pi-spinner"},filter:{type:Boolean,default:!1},filterBy:{type:String,default:"label"},filterMode:{type:String,default:"lenient"},filterPlaceholder:{type:String,default:null},filterLocale:{type:String,default:void 0},scrollHeight:{type:String,default:null}},data(){return{d_expandedKeys:this.expandedKeys||{},filterValue:null}},watch:{expandedKeys(e){this.d_expandedKeys=e}},methods:{onNodeToggle(e){const t=e.key;this.d_expandedKeys[t]?(delete this.d_expandedKeys[t],this.$emit("node-collapse",e)):(this.d_expandedKeys[t]=!0,this.$emit("node-expand",e)),this.d_expandedKeys={...this.d_expandedKeys},this.$emit("update:expandedKeys",this.d_expandedKeys)},onNodeClick(e){if(null!=this.selectionMode&&!1!==e.node.selectable){const t=!e.nodeTouched&&this.metaKeySelection?this.handleSelectionWithMetaKey(e):this.handleSelectionWithoutMetaKey(e);this.$emit("update:selectionKeys",t)}},onCheckboxChange(e){this.$emit("update:selectionKeys",e.selectionKeys),e.check?this.$emit("node-select",e.node):this.$emit("node-unselect",e.node)},handleSelectionWithMetaKey(e){const t=e.originalEvent,n=e.node,l=t.metaKey||t.ctrlKey;let o;return this.isNodeSelected(n)&&l?(this.isSingleSelectionMode()?o={}:(o={...this.selectionKeys},delete o[n.key]),this.$emit("node-unselect",n)):(this.isSingleSelectionMode()?o={}:this.isMultipleSelectionMode()&&(o=l&&this.selectionKeys?{...this.selectionKeys}:{}),o[n.key]=!0,this.$emit("node-select",n)),o},handleSelectionWithoutMetaKey(e){const t=e.node,n=this.isNodeSelected(t);let l;return this.isSingleSelectionMode()?n?(l={},this.$emit("node-unselect",t)):(l={},l[t.key]=!0,this.$emit("node-select",t)):n?(l={...this.selectionKeys},delete l[t.key],this.$emit("node-unselect",t)):(l=this.selectionKeys?{...this.selectionKeys}:{},l[t.key]=!0,this.$emit("node-select",t)),l},isSingleSelectionMode(){return"single"===this.selectionMode},isMultipleSelectionMode(){return"multiple"===this.selectionMode},isNodeSelected(e){return!(!this.selectionMode||!this.selectionKeys)&&!0===this.selectionKeys[e.key]},isChecked(e){return!!this.selectionKeys&&(this.selectionKeys[e.key]&&this.selectionKeys[e.key].checked)},isNodeLeaf:e=>!1!==e.leaf&&!(e.children&&e.children.length),onFilterKeydown(e){13===e.which&&e.preventDefault()},findFilteredNodes(e,t){if(e){let n=!1;if(e.children){let l=[...e.children];e.children=[];for(let o of l){let l={...o};this.isFilterMatched(l,t)&&(n=!0,e.children.push(l))}}if(n)return!0}},isFilterMatched(t,{searchFields:n,filterText:l,strict:o}){let i=!1;for(let o of n){String(e.ObjectUtils.resolveFieldData(t,o)).toLocaleLowerCase(this.filterLocale).indexOf(l)>-1&&(i=!0)}return(!i||o&&!this.isNodeLeaf(t))&&(i=this.findFilteredNodes(t,{searchFields:n,filterText:l,strict:o})||i),i}},computed:{containerClass(){return["p-tree p-component",{"p-tree-selectable":null!=this.selectionMode,"p-tree-loading":this.loading,"p-tree-flex-scrollable":"flex"===this.scrollHeight}]},loadingIconClass(){return["p-tree-loading-icon pi-spin",this.loadingIcon]},filteredValue(){let e=[];const t=this.filterBy.split(","),n=this.filterValue.trim().toLocaleLowerCase(this.filterLocale),l="strict"===this.filterMode;for(let o of this.value){let i={...o},s={searchFields:t,filterText:n,strict:l};(l&&(this.findFilteredNodes(i,s)||this.isFilterMatched(i,s))||!l&&(this.isFilterMatched(i,s)||this.findFilteredNodes(i,s)))&&e.push(i)}return e},valueToRender(){return this.filterValue&&this.filterValue.trim().length>0?this.filteredValue:this.value}},components:{TreeNode:o}};const r={key:0,class:"p-tree-loading-overlay p-component-overlay"},a={key:1,class:"p-tree-filter-container"},h=n.createVNode("span",{class:"p-tree-filter-icon pi pi-search"},null,-1),p={class:"p-tree-container",role:"tree"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-tree-container {\n margin: 0;\n padding: 0;\n list-style-type: none;\n overflow: auto;\n}\n.p-treenode-children {\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n.p-tree-wrapper {\n overflow: auto;\n}\n.p-treenode-selectable {\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.p-tree-toggler {\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\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-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.p-treenode-leaf > .p-treenode-content .p-tree-toggler {\n visibility: hidden;\n}\n.p-treenode-content {\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}\n.p-tree-filter {\n width: 100%;\n}\n.p-tree-filter-container {\n position: relative;\n display: block;\n width: 100%;\n}\n.p-tree-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n}\n.p-tree-loading {\n position: relative;\n min-height: 4rem;\n}\n.p-tree .p-tree-loading-overlay {\n position: absolute;\n z-index: 1;\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}\n.p-tree-flex-scrollable {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n.p-tree-flex-scrollable .p-tree-wrapper {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n"),d.render=function(e,t,l,o,i,s){const c=n.resolveComponent("TreeNode");return n.openBlock(),n.createBlock("div",{class:s.containerClass},[l.loading?(n.openBlock(),n.createBlock("div",r,[n.createVNode("i",{class:s.loadingIconClass},null,2)])):n.createCommentVNode("",!0),l.filter?(n.openBlock(),n.createBlock("div",a,[n.withDirectives(n.createVNode("input",{type:"text",autocomplete:"off",class:"p-tree-filter p-inputtext p-component",placeholder:l.filterPlaceholder,onKeydown:t[1]||(t[1]=(...e)=>s.onFilterKeydown&&s.onFilterKeydown(...e)),"onUpdate:modelValue":t[2]||(t[2]=e=>i.filterValue=e)},null,40,["placeholder"]),[[n.vModelText,i.filterValue]]),h])):n.createCommentVNode("",!0),n.createVNode("div",{class:"p-tree-wrapper",style:{maxHeight:l.scrollHeight}},[n.createVNode("ul",p,[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(s.valueToRender,(t=>(n.openBlock(),n.createBlock(c,{key:t.key,node:t,templates:e.$slots,expandedKeys:i.d_expandedKeys,onNodeToggle:s.onNodeToggle,onNodeClick:s.onNodeClick,selectionMode:l.selectionMode,selectionKeys:l.selectionKeys,onCheckboxChange:s.onCheckboxChange},null,8,["node","templates","expandedKeys","onNodeToggle","onNodeClick","selectionMode","selectionKeys","onCheckboxChange"])))),128))])],4)],2)},module.exports=d;