vue3-org-chart/dist/vue3-org-chart.cjs

Vue3 Org Chart is a tree diagram that visualizes the structure of an organization and the relationships and relatives. It is a Vue 3 component.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),V=require("panzoom"),S={class:"vue3-org-chart-node"},T={key:0,class:"vue3-org-chart-node-element-top-line"},z={key:1,class:"vue3-org-chart-node-element-bottom-line"},O={key:0,class:"vue3-org-chart-node-container"},P=e.defineComponent({__name:"Node",props:{id:{type:String,required:!0}},setup(a){const c=a,l=e.ref(null),i=e.inject("api"),s=i.find(c.id),n=e.computed(()=>s.__open||!1),o=i.findChildren(c.id);e.onMounted(()=>{s.parentId||(i.$root.value=l.value,e.nextTick(()=>{i.zoomReset()}),s.__open=!0)});const f=()=>{o.length&&(s.__open=!n.value,i.goToHome(l.value))};return(d,_)=>{const h=e.resolveComponent("Node",!0);return e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(d.$slots,"top-border"),e.createElementVNode("div",{class:"vue3-org-chart-node-element",ref_key:"element",ref:l},[e.unref(s).parentId?(e.openBlock(),e.createElementBlock("div",T)):e.createCommentVNode("",!0),e.createElementVNode("div",{tabindex:"0",onKeydown:_[0]||(_[0]=e.withKeys(e.withModifiers(p=>e.unref(i).goToHome(l.value),["self","prevent"]),["space"]))},[e.renderSlot(d.$slots,"node",{item:e.unref(s),children:e.unref(o),open:n.value,toggleChildren:f})],32),e.unref(o).length&&n.value?(e.openBlock(),e.createElementBlock("div",z)):e.createCommentVNode("",!0)],512),e.createVNode(e.Transition,{name:"nodeTransition"},{default:e.withCtx(()=>[e.unref(o).length&&n.value?(e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(p,y)=>(e.openBlock(),e.createBlock(h,{key:p.id,id:p.id,ref_for:!0,ref:"nodeRefs"},{"top-border":e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["vue3-org-chart-node-element-horizontal-line",{left:n.value&&y!==0,right:n.value&&y!==e.unref(o).length-1}])},null,2)]),node:e.withCtx(v=>[e.renderSlot(d.$slots,"node",e.mergeProps({ref_for:!0},v))]),_:2},1032,["id"]))),128))])):e.createCommentVNode("",!0)]),_:3})])}}});function j(){let a=e.ref();const c=e.ref(null),l=e.ref(null);function i(){c.value&&(a.value=V(c.value,{zoomDoubleClickSpeed:1.4,maxZoom:5,minZoom:.02,initialZoom:1,bounds:!1}))}return e.onMounted(()=>{a.value||i()}),{instance:a,container:l,scene:c}}function A({initialData:a,json:c}){const l=e.ref(!0),i=e.reactive(a),s=async n=>await(await fetch(n)).json();return e.onMounted(async()=>{c&&Object.assign(i,await s(c)),l.value=!1}),{data:i,loading:l}}function H(a,c,l,i,s){const n=e.ref(null),o=e.reactive({x:0,y:40}),f=e.reactive({state:s,toggle:()=>{f.state=!f.state}});function d(t){const r=c.find(u=>u.id===t);if(!r)throw new Error(`Node with id ${t} not found`);return r}function _(t){return c.filter(r=>r.parentId===t)}function h(){const t=c.find(r=>r.parentId===""||!r.parentId);if(!t)throw new Error("Root node not found");return t}function p(){var t;return(t=h())==null?void 0:t.id}function y(){const t=a.value.getTransform(),r=0,u=32;if(t.scale!==1){const k=1-t.scale,x=t.x/k,B=t.y/k;a.value.smoothZoomAbs(x,B,1)}else a.value.smoothMoveTo(r,u)}function v(){var w,E;const t=a.value.getTransform(),r=(w=l.value)==null?void 0:w.getBoundingClientRect(),u=(E=i.value)==null?void 0:E.getBoundingClientRect();if(!r||!u)return{...o,scale:1};const k=u.x-r.x,x=u.y-r.y,B=k+u.width/2,N=x+u.height/2;return{x:B,y:N,scale:t.scale}}function C(t){var R;const r=(R=l.value)==null?void 0:R.getBoundingClientRect();if(!r||!t)return;const u=t.getBoundingClientRect(),k=r.x+r.width/2+o.x,x=r.y+o.y,B=u.x+u.width/2,N=u.y,w=k-B,E=x-N;a.value.moveBy(w,E,!0)}function b(){const{x:t,y:r,scale:u}=v();a.value.smoothZoomAbs(t,r,u*3/2)}function M(){const{x:t,y:r,scale:u}=v();a.value.smoothZoomAbs(t,r,u*2/3)}function m(){c.forEach(t=>{t.__open=!1})}function g(){c.forEach(t=>{t.__open=!0})}return{zoomReset:y,zoomIn:b,zoomOut:M,expandAll:g,collapseAll:m,$root:n,root:h,rootId:p,find:d,findChildren:_,goToHome:C,minimap:f}}const Z=e.defineComponent({__name:"MiniMap",props:{size:{type:Number,default:1/6}},setup(a){const{instance:c,scene:l,container:i}=e.inject("panzoom"),s=a,n=e.ref({width:0,height:0,top:0,left:0}),o=e.ref({width:0,height:0,top:0,left:0}),f=e.computed(()=>n.value.width*s.size),d=e.computed(()=>n.value.height*s.size),_=(m,g)=>{let t;return function(...r){clearTimeout(t),t=setTimeout(()=>m.apply(this,r),g)}},h=()=>{!i.value||!l.value||!(l.value.firstChild instanceof HTMLElement)||(n.value=i.value.getBoundingClientRect(),o.value=l.value.firstChild.getBoundingClientRect())},p=_(h,350);e.onMounted(()=>{h(),c.value.on("transform",h);const m=new ResizeObserver(p);i.value&&m.observe(i.value),l.value&&m.observe(l.value)});const y=e.computed(()=>({left:n.value.left-o.value.left+n.value.width,right:o.value.left-n.value.left+o.value.width,top:n.value.top-o.value.top+n.value.height,bottom:o.value.top-n.value.top+o.value.height})),v=m=>{const g=Math.max(y.value.left,y.value.right,n.value.width,o.value.width),t=Math.max(y.value.top,y.value.bottom,n.value.height,o.value.height);return m*Math.min(f.value/g,d.value/t)},C=(m,g,t,r)=>({width:`${m}px`,height:`${g}px`,left:`${Math.max(t,0)}px`,top:`${Math.max(r,0)}px`}),b=e.computed(()=>{const m=v(n.value.width),g=v(n.value.height),t=v(n.value.left-o.value.left),r=v(n.value.top-o.value.top);return C(m,g,t,r)}),M=e.computed(()=>{const m=v(o.value.width),g=v(o.value.height),t=Math.min(v(o.value.left-n.value.left),f.value-v(o.value.width)),r=Math.min(v(o.value.top-n.value.top),d.value-v(o.value.height));return C(m,g,t,r)});return(m,g)=>(e.openBlock(),e.createElementBlock("div",{class:"vue3-org-chart-minimap",style:e.normalizeStyle({width:f.value+"px",height:d.value+"px"})},[e.createElementVNode("div",{class:"vue3-org-chart-minimap-scene",style:e.normalizeStyle(M.value)},null,4),e.createElementVNode("div",{class:"vue3-org-chart-minimap-container",style:e.normalizeStyle(b.value)},null,4)],4))}}),D={class:"vue3-org-chart"},X={key:1},Y={key:0},I={key:1},$=e.defineComponent({__name:"Vue3OrgChart",props:{data:{default:()=>[]},json:{},minimap:{type:Boolean,default:!1}},emits:["onReady"],setup(a,{emit:c}){const l=a,{instance:i,scene:s,container:n}=j();e.provide("panzoom",{instance:i,scene:s,container:n});const{data:o,loading:f}=A({initialData:l.data,json:l.json});e.provide("content",{data:o,loading:f});const d=H(i,o,n,s,l.minimap);e.provide("api",d);const _=c;return e.watch(()=>f.value,h=>{h||_("onReady",{api:d})}),(h,p)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",{ref_key:"container",ref:n,class:"vue3-org-chart-container"},[e.createElementVNode("div",{ref_key:"scene",ref:s,class:"vue3-org-chart-scene"},[e.unref(o).length&&e.unref(d).rootId()?(e.openBlock(),e.createBlock(P,{id:e.unref(d).rootId(),key:"root"},{node:e.withCtx(y=>[e.renderSlot(h.$slots,"node",e.normalizeProps(e.guardReactiveProps(y)))]),_:3},8,["id"])):(e.openBlock(),e.createElementBlock("div",X,[e.unref(f)?(e.openBlock(),e.createElementBlock("span",Y,[e.renderSlot(h.$slots,"loading",{},()=>[p[0]||(p[0]=e.createTextVNode("Loading..."))])])):(e.openBlock(),e.createElementBlock("span",I,[e.renderSlot(h.$slots,"no-data",{},()=>[p[1]||(p[1]=e.createTextVNode("No data"))])]))]))],512)],512),!e.unref(f)&&e.unref(d).minimap.state?(e.openBlock(),e.createBlock(Z,{key:0})):e.createCommentVNode("",!0)]))}}),q={install(a,c={}){a.component("Vue3OrgChart",$)}};exports.Vue3OrgChart=$;exports.Vue3OrgChartPlugin=q;