primevue/organizationchart/organizationchart.esm.min.js

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

import{DomHandler as e}from"primevue/utils";import{resolveComponent as n,openBlock as t,createBlock as l,createVNode as o,resolveDynamicComponent as i,withKeys as s,createCommentVNode as d,Fragment as a,renderList as c}from"vue";var r={name:"OrganizationChartNode",emits:["node-click","node-toggle"],props:{node:{type:null,default:null},templates:{type:null,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null}},methods:{onNodeClick(n){e.hasClass(n.target,"p-node-toggler")||e.hasClass(n.target,"p-node-toggler-icon")||this.selectionMode&&this.$emit("node-click",this.node)},onChildNodeClick(e){this.$emit("node-click",e)},toggleNode(){this.$emit("node-toggle",this.node)},onChildNodeToggle(e){this.$emit("node-toggle",e)}},computed:{nodeContentClass(){return["p-organizationchart-node-content",this.node.styleClass,{"p-organizationchart-selectable-node":this.selectable,"p-highlight":this.selected}]},leaf(){return!1!==this.node.leaf&&!(this.node.children&&this.node.children.length)},colspan(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},childStyle(){return{visibility:!this.leaf&&this.expanded?"inherit":"hidden"}},expanded(){return void 0===this.collapsedKeys[this.node.key]},selectable(){return this.selectionMode&&!1!==this.node.selectable},selected(){return this.selectable&&this.selectionKeys&&!0===this.selectionKeys[this.node.key]},toggleable(){return this.collapsible&&!1!==this.node.collapsible&&!this.leaf}}};const p={class:"p-organizationchart-table"},h={key:0},g=o("div",{class:"p-organizationchart-line-down"},null,-1),u=o("div",{class:"p-organizationchart-line-down"},null,-1);r.render=function(e,r,y,m,K,b){const f=n("OrganizationChartNode",!0);return t(),l("table",p,[o("tbody",null,[y.node?(t(),l("tr",h,[o("td",{colspan:b.colspan},[o("div",{class:b.nodeContentClass,onClick:r[3]||(r[3]=(...e)=>b.onNodeClick&&b.onNodeClick(...e))},[(t(),l(i(y.templates[y.node.type]||y.templates.default),{node:y.node},null,8,["node"])),b.toggleable?(t(),l("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:r[1]||(r[1]=(...e)=>b.toggleNode&&b.toggleNode(...e)),onKeydown:r[2]||(r[2]=s(((...e)=>b.toggleNode&&b.toggleNode(...e)),["enter"]))},[o("i",{class:["p-node-toggler-icon pi",{"pi-chevron-down":b.expanded,"pi-chevron-up":!b.expanded}]},null,2)],32)):d("",!0)],2)],8,["colspan"])])):d("",!0),o("tr",{style:b.childStyle,class:"p-organizationchart-lines"},[o("td",{colspan:b.colspan},[g],8,["colspan"])],4),o("tr",{style:b.childStyle,class:"p-organizationchart-lines"},[y.node.children&&1===y.node.children.length?(t(),l("td",{key:0,colspan:b.colspan},[u],8,["colspan"])):d("",!0),y.node.children&&y.node.children.length>1?(t(!0),l(a,{key:1},c(y.node.children,((e,n)=>(t(),l(a,{key:e.key},[o("td",{class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}]}," ",2),o("td",{class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===y.node.children.length-1)}]}," ",2)],64)))),128)):d("",!0)],4),o("tr",{style:b.childStyle,class:"p-organizationchart-nodes"},[(t(!0),l(a,null,c(y.node.children,(e=>(t(),l("td",{key:e.key,colspan:"2"},[o(f,{node:e,templates:y.templates,collapsedKeys:y.collapsedKeys,onNodeToggle:b.onChildNodeToggle,collapsible:y.collapsible,selectionMode:y.selectionMode,selectionKeys:y.selectionKeys,onNodeClick:b.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var y={name:"OrganizationChart",emits:["node-unselect","node-select","update:selectionKeys","node-expand","node-collapse","update:collapsedKeys"],props:{value:{type:null,default:null},selectionKeys:{type:null,default:null},selectionMode:{type:String,default:null},collapsible:{type:Boolean,default:!1},collapsedKeys:{type:null,default:null}},data(){return{d_collapsedKeys:this.collapsedKeys||{}}},watch:{collapsedKeys(e){this.d_collapsedKeys=e}},methods:{onNodeClick(e){const n=e.key;if(this.selectionMode){let t=this.selectionKeys?{...this.selectionKeys}:{};t[n]?(delete t[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(t={}),t[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",t)}},onNodeToggle(e){const n=e.key;this.d_collapsedKeys[n]?(delete this.d_collapsedKeys[n],this.$emit("node-expand",e)):(this.d_collapsedKeys[n]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:r}};const m={class:"p-organizationchart p-component"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-organizationchart-table {\n    border-spacing: 0;\n    border-collapse: separate;\n    margin: 0 auto;\n}\n.p-organizationchart-table > tbody > tr > td {\n    text-align: center;\n    vertical-align: top;\n    padding: 0 .75rem;\n}\n.p-organizationchart-node-content {\n    display: inline-block;\n    position: relative;\n}\n.p-organizationchart-node-content .p-node-toggler {\n    position: absolute;\n    bottom: -.75rem;\n    margin-left: -.75rem;\n    z-index: 2;\n    left: 50%;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: .25rem;\n}\n.p-organizationchart-line-down {\n    margin: 0 auto;\n    height: 20px;\n    width: 1px;\n}\n.p-organizationchart-line-right {\n    border-radius: 0px;\n}\n.p-organizationchart-line-left {\n    border-radius: 0;\n}\n.p-organizationchart-selectable-node {\n    cursor: pointer;\n}\n"),y.render=function(e,i,s,d,a,c){const r=n("OrganizationChartNode");return t(),l("div",m,[o(r,{node:s.value,templates:e.$slots,onNodeToggle:c.onNodeToggle,collapsedKeys:a.d_collapsedKeys,collapsible:s.collapsible,onNodeClick:c.onNodeClick,selectionMode:s.selectionMode,selectionKeys:s.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])};export default y;