organization-chart-vue3/dist/organization-chart-vue3.umd.cjs

A lightweight, interactive organization chart component for Vue 3 with collapsible nodes, TypeScript types, custom slots, and selection events

(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require(`vue`)):typeof define==`function`&&define.amd?define([`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,e.OrganizationChart=t(e.Vue))})(this,function(e){var t=(0,e.defineComponent)({name:`RenderSlotContent`,props:{render:{type:Function,required:!0}},setup(e){return()=>e.render()}});function n(e){return[e.id??`root`]}function r(e,t,n){return[...e,t.id??String(n)]}function i(e,t){return e.id??t.join(`.`)}function a(e,t,n){return t.id??`${e}:member:${n}`}function o(e,t,n){return[...e,t.id??`member-${n}`]}var s=(0,e.defineComponent)({name:`OrganizationChartNodeView`,components:{RenderSlotContent:t},props:{node:{type:Object,required:!0},depth:{type:Number,required:!0},path:{type:Array,required:!0},expandedState:{type:Object,required:!0},nodeTitleSlot:{type:Function,default:void 0},memberSlot:{type:Function,default:void 0}},emits:{toggle:e=>!0,"click-node":e=>!0,select:e=>!0},setup(t,{emit:n}){let s=(0,e.computed)(()=>Array.isArray(t.node.children)&&t.node.children.length>0),c=(0,e.computed)(()=>Array.isArray(t.node.member)&&t.node.member.length>0),l=(0,e.computed)(()=>s.value?(t.node.children?.length??0)*2:1),u=(0,e.computed)(()=>i(t.node,t.path)),d=(0,e.computed)(()=>s.value?t.expandedState[u.value]!==!1:!1),f=()=>({kind:`node`,node:t.node,id:t.node.id,path:t.path}),p=()=>{n(`click-node`,t.node),n(`select`,f())},m=(e,r)=>{n(`click-node`,e),n(`select`,{kind:`member`,node:t.node,member:e,id:e.id??t.node.id,path:o(t.path,e,r)})},h=()=>{n(`toggle`,{node:t.node,path:t.path,value:!d.value})},g=(e,n)=>r(t.path,e,n);return{childColspan:l,getKeyForChild:(e,t)=>i(e,g(e,t)),getKeyForMember:(e,t)=>a(u.value,e,t),getPathForChild:g,handleMemberClick:m,handleNodeClick:p,hasChildren:s,hasMembers:c,isExpanded:d,toggleNode:h}}}),c=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},l={key:0,class:`org-table`},u=[`colspan`],d={class:`org-node`},f=[`onClick`],p={class:`item-box`},m={class:`item-title`},h={class:`item-add`},g={key:0,class:`avat`},_=[`src`,`alt`],v=[`aria-label`];function y(t,n,r,i,a,o){let s=(0,e.resolveComponent)(`RenderSlotContent`),c=(0,e.resolveComponent)(`OrganizationChartNodeView`);return t.node.title?((0,e.openBlock)(),(0,e.createElementBlock)(`table`,l,[(0,e.createElementVNode)(`tbody`,null,[(0,e.createElementVNode)(`tr`,null,[(0,e.createElementVNode)(`td`,{colspan:t.childColspan,class:(0,e.normalizeClass)({"org-parent-level":t.hasChildren,"org-extend":t.hasChildren&&t.isExpanded})},[(0,e.createElementVNode)(`div`,d,[(0,e.createElementVNode)(`div`,{class:`org-container`,onClick:n[0]||=(...e)=>t.handleNodeClick&&t.handleNodeClick(...e)},[(0,e.createElementVNode)(`div`,{class:(0,e.normalizeClass)([`org-title`,t.node.titleClass||[]])},[t.nodeTitleSlot?((0,e.openBlock)(),(0,e.createBlock)(s,{key:0,render:()=>t.nodeTitleSlot?.({node:t.node,depth:t.depth,path:t.path})},null,8,[`render`])):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createTextVNode)((0,e.toDisplayString)(t.node.title),1)],64))],2),t.hasMembers?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:(0,e.normalizeClass)([`org-content`,t.node.contentClass||[]])},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.node.member,(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:t.getKeyForMember(n,r),class:`org-content-item`,onClick:(0,e.withModifiers)(e=>t.handleMemberClick(n,r),[`stop`])},[t.memberSlot?((0,e.openBlock)(),(0,e.createBlock)(s,{key:0,render:()=>t.memberSlot?.({node:t.node,member:n,depth:t.depth,path:t.path})},null,8,[`render`])):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createElementVNode)(`div`,p,[(0,e.createElementVNode)(`p`,m,(0,e.toDisplayString)(n.name),1),(0,e.createElementVNode)(`p`,h,(0,e.toDisplayString)(n.add),1)]),n.image_url?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,g,[(0,e.createElementVNode)(`img`,{src:n.image_url,alt:n.name?`${n.name} avatar`:`Member avatar`},null,8,_)])):(0,e.createCommentVNode)(``,!0)],64))],8,f))),128))],2)):(0,e.createCommentVNode)(``,!0)])]),t.hasChildren?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,type:`button`,class:`org-extend-arrow`,"aria-label":t.isExpanded?`Collapse node`:`Expand node`,onClick:n[1]||=(0,e.withModifiers)((...e)=>t.toggleNode&&t.toggleNode(...e),[`stop`])},null,8,v)):(0,e.createCommentVNode)(``,!0)],10,u)]),t.hasChildren?((0,e.openBlock)(),(0,e.createElementBlock)(`tr`,{key:0,style:(0,e.normalizeStyle)({visibility:t.isExpanded?`visible`:`hidden`})},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.node.children,(r,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`td`,{key:t.getKeyForChild(r,i),colspan:`2`,class:`org-child-level`},[(0,e.createVNode)(c,{node:r,depth:t.depth+1,path:t.getPathForChild(r,i),"expanded-state":t.expandedState,"node-title-slot":t.nodeTitleSlot,"member-slot":t.memberSlot,onToggle:n[2]||=e=>t.$emit(`toggle`,e),onClickNode:n[3]||=e=>t.$emit(`click-node`,e),onSelect:n[4]||=e=>t.$emit(`select`,e)},null,8,[`node`,`depth`,`path`,`expanded-state`,`node-title-slot`,`member-slot`])]))),128))],4)):(0,e.createCommentVNode)(``,!0)])])):(0,e.createCommentVNode)(``,!0)}var b=c(s,[[`render`,y]]),x=(0,e.defineComponent)({name:`OrganizationChart`,components:{OrganizationChartNodeView:b},props:{data:{type:Object,required:!0},defaultExpandAll:{type:Boolean,default:!0}},emits:{"click-node":e=>!0,select:e=>!0},setup(t,{emit:a}){let o=(0,e.reactive)({}),s=(0,e.computed)(()=>n(t.data));return(0,e.watch)([()=>t.data,()=>t.defaultExpandAll],()=>{let e=new Set,a=(n,s)=>{let c=i(n,s);e.add(c),c in o||(o[c]=t.defaultExpandAll),n.children?.forEach((e,t)=>{a(e,r(s,e,t))})};a(t.data,n(t.data)),Object.keys(o).forEach(t=>{e.has(t)||delete o[t]})},{deep:!0,immediate:!0}),{emitLegacySelect:e=>{a(`click-node`,e)},emitSelect:e=>{a(`select`,e)},expandedState:o,rootPath:s,toggleNode:({node:e,path:t,value:n})=>{let a=(e,t)=>{o[i(e,t)]=n,e.children?.forEach((e,n)=>{a(e,r(t,e,n))})};a(e,t)}}}});function S(t,n,r,i,a,o){let s=(0,e.resolveComponent)(`OrganizationChartNodeView`);return(0,e.openBlock)(),(0,e.createBlock)(s,{node:t.data,depth:0,path:t.rootPath,"expanded-state":t.expandedState,"node-title-slot":t.$slots[`node-title`],"member-slot":t.$slots.member,onToggle:t.toggleNode,onClickNode:t.emitLegacySelect,onSelect:t.emitSelect},null,8,[`node`,`path`,`expanded-state`,`node-title-slot`,`member-slot`,`onToggle`,`onClickNode`,`onSelect`])}return c(x,[[`render`,S]])});