primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 7.05 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,n){"use strict";var o={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.DomHandler.hasClass(n.target,"p-node-toggler")||e.DomHandler.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 t={class:"p-organizationchart-table"},l={key:0},i=n.createVNode("div",{class:"p-organizationchart-line-down"},null,-1),s=n.createVNode("div",{class:"p-organizationchart-line-down"},null,-1);o.render=function(e,o,a,d,c,r){const p=n.resolveComponent("OrganizationChartNode",!0);return n.openBlock(),n.createBlock("table",t,[n.createVNode("tbody",null,[a.node?(n.openBlock(),n.createBlock("tr",l,[n.createVNode("td",{colspan:r.colspan},[n.createVNode("div",{class:r.nodeContentClass,onClick:o[3]||(o[3]=(...e)=>r.onNodeClick&&r.onNodeClick(...e))},[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(a.templates[a.node.type]||a.templates.default),{node:a.node},null,8,["node"])),r.toggleable?(n.openBlock(),n.createBlock("a",{key:0,tabindex:"0",class:"p-node-toggler",onClick:o[1]||(o[1]=(...e)=>r.toggleNode&&r.toggleNode(...e)),onKeydown:o[2]||(o[2]=n.withKeys(((...e)=>r.toggleNode&&r.toggleNode(...e)),["enter"]))},[n.createVNode("i",{class:["p-node-toggler-icon pi",{"pi-chevron-down":r.expanded,"pi-chevron-up":!r.expanded}]},null,2)],32)):n.createCommentVNode("",!0)],2)],8,["colspan"])])):n.createCommentVNode("",!0),n.createVNode("tr",{style:r.childStyle,class:"p-organizationchart-lines"},[n.createVNode("td",{colspan:r.colspan},[i],8,["colspan"])],4),n.createVNode("tr",{style:r.childStyle,class:"p-organizationchart-lines"},[a.node.children&&1===a.node.children.length?(n.openBlock(),n.createBlock("td",{key:0,colspan:r.colspan},[s],8,["colspan"])):n.createCommentVNode("",!0),a.node.children&&a.node.children.length>1?(n.openBlock(!0),n.createBlock(n.Fragment,{key:1},n.renderList(a.node.children,((e,o)=>(n.openBlock(),n.createBlock(n.Fragment,{key:e.key},[n.createVNode("td",{class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===o)}]}," ",2),n.createVNode("td",{class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(o===a.node.children.length-1)}]}," ",2)],64)))),128)):n.createCommentVNode("",!0)],4),n.createVNode("tr",{style:r.childStyle,class:"p-organizationchart-nodes"},[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(a.node.children,(e=>(n.openBlock(),n.createBlock("td",{key:e.key,colspan:"2"},[n.createVNode(p,{node:e,templates:a.templates,collapsedKeys:a.collapsedKeys,onNodeToggle:r.onChildNodeToggle,collapsible:a.collapsible,selectionMode:a.selectionMode,selectionKeys:a.selectionKeys,onNodeClick:r.onChildNodeClick},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick"])])))),128))],4)])])};var a={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:o}};const d={class:"p-organizationchart p-component"};return 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 .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"),a.render=function(e,o,t,l,i,s){const a=n.resolveComponent("OrganizationChartNode");return n.openBlock(),n.createBlock("div",d,[n.createVNode(a,{node:t.value,templates:e.$slots,onNodeToggle:s.onNodeToggle,collapsedKeys:i.d_collapsedKeys,collapsible:t.collapsible,onNodeClick:s.onNodeClick,selectionMode:t.selectionMode,selectionKeys:t.selectionKeys},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys"])])},a}(primevue.utils,Vue);