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 e from"primevue/icons/chevrondown";import n from"primevue/icons/chevronup";import{DomHandler as o}from"primevue/utils";import{resolveComponent as t,openBlock as l,createElementBlock as i,createElementVNode as s,normalizeClass as d,createBlock as a,resolveDynamicComponent as c,createCommentVNode as r,normalizeStyle as p,Fragment as h,renderList as g,createVNode as y}from"vue";var u={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(e){o.hasClass(e.target,"p-node-toggler")||o.hasClass(e.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)},onKeydown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggleNode(),e.preventDefault())}},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}},components:{ChevronDownIcon:e,ChevronUpIcon:n}};const m={class:"p-organizationchart-table"},K={key:0},C=["colspan"],f=["colspan"],b=[s("div",{class:"p-organizationchart-line-down"},null,-1)],k=["colspan"],N=[s("div",{class:"p-organizationchart-line-down"},null,-1)];u.render=function(e,n,o,u,z,v){const x=t("OrganizationChartNode",!0);return l(),i("table",m,[s("tbody",null,[o.node?(l(),i("tr",K,[s("td",{colspan:v.colspan},[s("div",{class:d(v.nodeContentClass),onClick:n[2]||(n[2]=(...e)=>v.onNodeClick&&v.onNodeClick(...e))},[(l(),a(c(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),v.toggleable?(l(),i("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:n[0]||(n[0]=(...e)=>v.toggleNode&&v.toggleNode(...e)),onKeydown:n[1]||(n[1]=(...e)=>v.onKeydown&&v.onKeydown(...e))},[o.templates.togglericon?(l(),a(c(o.templates.togglericon),{key:0,expanded:v.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(l(),a(c(v.expanded?"ChevronDownIcon":"ChevronUpIcon"),{key:1,class:"p-node-toggler-icon"}))],32)):r("",!0)],2)],8,C)])):r("",!0),s("tr",{style:p(v.childStyle),class:"p-organizationchart-lines"},[s("td",{colspan:v.colspan},b,8,f)],4),s("tr",{style:p(v.childStyle),class:"p-organizationchart-lines"},[o.node.children&&1===o.node.children.length?(l(),i("td",{key:0,colspan:v.colspan},N,8,k)):r("",!0),o.node.children&&o.node.children.length>1?(l(!0),i(h,{key:1},g(o.node.children,((e,n)=>(l(),i(h,{key:e.key},[s("td",{class:d(["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===n)}])}," ",2),s("td",{class:d(["p-organizationchart-line-right",{"p-organizationchart-line-top":!(n===o.node.children.length-1)}])}," ",2)],64)))),128)):r("",!0)],4),s("tr",{style:p(v.childStyle),class:"p-organizationchart-nodes"},[(l(!0),i(h,null,g(o.node.children,(e=>(l(),i("td",{key:e.key,colspan:"2"},[y(x,{node:e,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:v.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:v.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var z={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 o=this.selectionKeys?{...this.selectionKeys}:{};o[n]?(delete o[n],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[n]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},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:u}};const v={class:"p-organizationchart p-component"};!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.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 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: -0.75rem;\n    margin-left: -0.75rem;\n    z-index: 2;\n    left: 50%;\n    user-select: none;\n    cursor: pointer;\n    width: 1.5rem;\n    height: 1.5rem;\n    text-decoration: none;\n}\n.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {\n    position: relative;\n    top: 0.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"),z.render=function(e,n,o,s,d,a){const c=t("OrganizationChartNode");return l(),i("div",v,[y(c,{node:o.value,templates:e.$slots,onNodeToggle:a.onNodeToggle,collapsedKeys:d.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:a.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])};export{z as default};