primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 8.58 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.organizationchart=function(e,t,o,n,l){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=s(e),a=s(t),d=s(o),c={name:"OrganizationChartNode",extends:i.default,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:{getPTOptions(e){return this.ptm(e,{context:{expanded:this.expanded,selectable:this.selectable,selected:this.selected,toggleable:this.toggleable,active:this.selected}})},getNodeOptions(e,t){return this.ptm(t,{context:{lineTop:e}})},onNodeClick(e){n.DomHandler.hasClass(e.target,"p-node-toggler")||n.DomHandler.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:a.default,ChevronUpIcon:d.default}};const r=["colspan"],p=["colspan"],h=["colspan"];c.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode",!0);return l.openBlock(),l.createElementBlock("table",l.mergeProps({class:"p-organizationchart-table"},e.ptm("table")),[l.createElementVNode("tbody",l.normalizeProps(l.guardReactiveProps(e.ptm("body"))),[o.node?(l.openBlock(),l.createElementBlock("tr",l.normalizeProps(l.mergeProps({key:0},e.ptm("row"))),[l.createElementVNode("td",l.mergeProps({colspan:i.colspan},e.ptm("cell")),[l.createElementVNode("div",l.mergeProps({class:i.nodeContentClass,onClick:t[2]||(t[2]=(...e)=>i.onNodeClick&&i.onNodeClick(...e))},i.getPTOptions("node")),[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates[o.node.type]||o.templates.default),{node:o.node},null,8,["node"])),i.toggleable?(l.openBlock(),l.createElementBlock("a",l.mergeProps({key:0,tabindex:"0",class:"p-node-toggler",onClick:t[0]||(t[0]=(...e)=>i.toggleNode&&i.toggleNode(...e)),onKeydown:t[1]||(t[1]=(...e)=>i.onKeydown&&i.onKeydown(...e))},i.getPTOptions("nodeToggler")),[o.templates.togglericon?(l.openBlock(),l.createBlock(l.resolveDynamicComponent(o.templates.togglericon),{key:0,expanded:i.expanded,class:"p-node-toggler-icon"},null,8,["expanded"])):(l.openBlock(),l.createBlock(l.resolveDynamicComponent(i.expanded?"ChevronDownIcon":"ChevronUpIcon"),l.mergeProps({key:1,class:"p-node-toggler-icon"},i.getPTOptions("nodeTogglerIcon")),null,16))],16)):l.createCommentVNode("",!0)],16)],16,r)],16)):l.createCommentVNode("",!0),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[l.createElementVNode("td",{colspan:i.colspan},[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],8,p)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-lines"},e.ptm("lines")),[o.node.children&&1===o.node.children.length?(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:0,colspan:i.colspan},e.ptm("lineCell")),[l.createElementVNode("div",l.mergeProps({class:"p-organizationchart-line-down"},e.ptm("lineDown")),null,16)],16,h)):l.createCommentVNode("",!0),o.node.children&&o.node.children.length>1?(l.openBlock(!0),l.createElementBlock(l.Fragment,{key:1},l.renderList(o.node.children,((e,t)=>(l.openBlock(),l.createElementBlock(l.Fragment,{key:e.key},[l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-left",{"p-organizationchart-line-top":!(0===t)}]},i.getNodeOptions(!(0===t),"lineLeft"))," ",16),l.createElementVNode("td",l.mergeProps({class:["p-organizationchart-line-right",{"p-organizationchart-line-top":!(t===o.node.children.length-1)}]},i.getNodeOptions(!(t===o.node.children.length-1),"lineRight"))," ",16)],64)))),128)):l.createCommentVNode("",!0)],16),l.createElementVNode("tr",l.mergeProps({style:i.childStyle,class:"p-organizationchart-nodes"},e.ptm("nodes")),[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(o.node.children,(t=>(l.openBlock(),l.createElementBlock("td",l.mergeProps({key:t.key,colspan:"2"},e.ptm("nodeCell")),[l.createVNode(a,{node:t,templates:o.templates,collapsedKeys:o.collapsedKeys,onNodeToggle:i.onChildNodeToggle,collapsible:o.collapsible,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,onNodeClick:i.onChildNodeClick,pt:e.pt},null,8,["node","templates","collapsedKeys","onNodeToggle","collapsible","selectionMode","selectionKeys","onNodeClick","pt"])],16)))),128))],16)],16)],16)};var g={name:"OrganizationChart",extends:i.default,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 t=e.key;if(this.selectionMode){let o=this.selectionKeys?{...this.selectionKeys}:{};o[t]?(delete o[t],this.$emit("node-unselect",e)):("single"===this.selectionMode&&(o={}),o[t]=!0,this.$emit("node-select",e)),this.$emit("update:selectionKeys",o)}},onNodeToggle(e){const t=e.key;this.d_collapsedKeys[t]?(delete this.d_collapsedKeys[t],this.$emit("node-expand",e)):(this.d_collapsedKeys[t]=!0,this.$emit("node-collapse",e)),this.d_collapsedKeys={...this.d_collapsedKeys},this.$emit("update:collapsedKeys",this.d_collapsedKeys)}},components:{OrganizationChartNode:c}};return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&n.firstChild?n.insertBefore(l,n.firstChild):n.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"),g.render=function(e,t,o,n,s,i){const a=l.resolveComponent("OrganizationChartNode");return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:"p-organizationchart p-component"},e.ptm("root")),[l.createVNode(a,{node:o.value,templates:e.$slots,onNodeToggle:i.onNodeToggle,collapsedKeys:s.d_collapsedKeys,collapsible:o.collapsible,onNodeClick:i.onNodeClick,selectionMode:o.selectionMode,selectionKeys:o.selectionKeys,pt:e.pt},null,8,["node","templates","onNodeToggle","collapsedKeys","collapsible","onNodeClick","selectionMode","selectionKeys","pt"])],16)},g}(primevue.basecomponent,primevue.icons.chevrondown,primevue.icons.chevronup,primevue.utils,Vue);