@bimdata/areas - npm Package Compare versions

Comparing version 0.4.9 to 0.4.10

dist/areas.esm.js

@@ -1,1 +0,1 @@
-function e(e,t,a,r,i,n,o,s,d,l){"boolean"!=typeof o&&(d=s,s=o,o=!1);const c="function"==typeof a?a.options:a;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),h)if(c.functional){const e=c.render;c.render=function(t,a){return h.call(a),e(t,a)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return a}const t=e({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"teleport"},[this._t("default")],2)},staticRenderFns:[]},void 0,{props:{targetId:{type:Number,require:!0}},inject:["areas"],provide(){const e=this;return{$area:{get id(){return e.targetId},get domElement(){return e.areas.getArea(e.targetId).$el},get component(){return e.areas.getArea(e.targetId)},get contentComponent(){return e.getChildrenComponent()},get areas(){return e.areas},get areaContent(){return this.areas.areasContent[e.targetId]},onChange(t){if("function"!=typeof t)throw`onAreaChange only accept function, get "${typeof t}"`;e.onAreaChangeHandlers.push(t)},offChange(t){e.onAreaChangeHandlers=e.onAreaChangeHandlers.filter(e=>e!==t)}}}},data:()=>({child:null,onAreaChangeHandlers:[]}),mounted(){this.$emit("mounted",{childInstance:this.getChildrenComponent()}),this.child=this.$el.firstChild,this.$watch("targetId",(e,t)=>{null!=t&&this.onAreaChangeHandlers.forEach(a=>a(e,t)),this.$el.contains(this.child)&&this.$el.removeChild(this.child),this.attach(!0)},{immediate:!0})},methods:{attach(){const e=document.getElementById(this.areas.getDOMAreaId(this.targetId));if(!e)throw`Teleport fails, no DOM element with id : "${this.targetId}".`;for(;e.hasChildNodes();)e.removeChild(e.firstChild);e.contains(this.child)||e.appendChild(this.child)},getChildrenComponent(){return this.$children[0]}}},void 0,!1,void 0,!1,void 0,void 0,void 0);var a={name:"area-component",props:{id:{type:Number,require:!0}},inject:["areas"],data:()=>({dragover:!1,dragging:!1,verticalSplitLeft:null,horizontalSplitTop:null}),computed:{isDraggable(){return this.areas.swapMode},isAreaActive(){return this.id===this.areas.activeAreaId},isOverlayDisplayed(){return!this.isNoMode},isSplitMode(){return this.isVerticalSplitMode||this.isHorizontalSplitMode},isVerticalSplitMode(){return this.areas.splitVerticalMode},isHorizontalSplitMode(){return this.areas.splitHorizontalMode},isDeleteMode(){return this.areas.deleteMode},isSwapMode(){return this.areas.swapMode},isNoMode(){return this.areas.noMode},cursor(){return this.isVerticalSplitMode?"var(--areas-vertical-split-cursor, col-resize)":this.isHorizontalSplitMode?"var(--areas-horizontal-split-cursor, row-resize)":this.isSwapMode&&!this.dragging?"var(--areas-drag-cursor, grab)":this.isSwapMode&&this.dragging?"var(--areas-dragging-cursor, grabbing)":this.isDeleteMode?"var(--areas-delete-cursor, crosshair)":void 0}},methods:{onDragStart(e){if(this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move",this.areas.cfg.dragImage){const t=this.areas.cfg.dragImage;e.dataTransfer.setDragImage(t.img,t.xOffset,t.yOffset)}},onDragEnd(){this.dragging=!1},onDrop(e){this.dragover=!1;const t=parseInt(e.dataTransfer.getData("areas-areaid"),10);this.areas.swapAreas(t,this.id)},onDragEnter(e){e.dataTransfer.types.includes("areas-areaid")&&(this.dragover=!0)},onDragOver(e){e.dataTransfer.types.includes("areas-areaid")&&(e.preventDefault(),e.dataTransfer.dropEffect="move")},onDragLeave(e){this.dragover=!1},onAreaClick(e){const{horizontalPercentage:t,verticalPercentage:a}=this.getLocalMouseCoordinates(e);this.isVerticalSplitMode?this.areas.splitArea(this.id,"vertical",a):this.isHorizontalSplitMode?this.areas.splitArea(this.id,"horizontal",t):this.isDeleteMode&&this.areas.deleteArea(this.id,e)},onMouseMove(e){const{verticalPercentage:t,horizontalPercentage:a}=this.getLocalMouseCoordinates(e);this.verticalSplitLeft=t,this.horizontalSplitTop=a},getLocalMouseCoordinates(e){const{height:t,width:a,x:r,y:i}=this.$el.getBoundingClientRect(),{clientX:n,clientY:o}=e,s=o-i,d=n-r;return{top:s,left:d,verticalPercentage:d/a*100,horizontalPercentage:s/t*100}},onMouseEnter(){this.isAreaActive||this.areas.setActiveAreaId(this.id)}}};const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const a=r?t.media||"default":e,i=o[a]||(o[a]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(a),r=i.element.childNodes;r[e]&&i.element.removeChild(r[e]),r.length?i.element.insertBefore(t,r[e]):i.element.appendChild(t)}}}(e,t)}let n;const o={};const s=e({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"area",class:{"area-active":e.isAreaActive},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:function(t){return t.target!==t.currentTarget?null:e.onDragStart(t)},drop:e.onDrop,dragend:e.onDragEnd,mouseenter:e.onMouseEnter,mousemove:e.onMouseMove}},[e.isOverlayDisplayed?a("div",{staticClass:"area-overlay",class:{"area-overlay-dragover":e.dragover&&!e.isAreaActive,"area-overlay-split":e.isAreaActive&&e.isSplitMode,"area-overlay-swap":e.isAreaActive&&e.isSwapMode,"area-overlay-delete":e.isAreaActive&&e.isDeleteMode},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:e.areas.zIndexStart}}):e._e(),e._v(" "),e.isSplitMode&&e.isAreaActive?a("div",{staticClass:"area-split",class:{"area-split-vertical":e.isVerticalSplitMode,"area-split-horizontal":e.isHorizontalSplitMode},style:(e.isVerticalSplitMode?"left":"top")+": "+(e.isVerticalSplitMode?e.verticalSplitLeft:e.horizontalSplitTop)+"%"}):e._e(),e._v(" "),a("div",{staticClass:"area-content",attrs:{id:e.areas.getDOMAreaId(e.id)}})])},staticRenderFns:[]},(function(e){e&&e("data-v-567930a7_0",{source:".area[data-v-567930a7]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-567930a7]{box-shadow:var(--areas-active-box-shadow,inset 0 0 2px grey)}.area-overlay[data-v-567930a7]{position:absolute;width:100%;height:100%;background-color:var(--areas-overlay-color,rgba(128,128,128,.2));outline-offset:var(--areas-overlay-outline-offset,unset);outline:var(--areas-overlay-outline,unset)}.area-overlay-split[data-v-567930a7]{background-color:var(--areas-overlay-split-color,transparent);outline-offset:var(--areas-overlay-split-outline-offset,unset);outline:var(--areas-overlay-split-outline,unset)}.area-overlay-swap[data-v-567930a7]{background-color:var(--areas-overlay-swap-color,transparent);outline-offset:var(--areas-overlay-swap-outline-offset,unset);outline:var(--areas-overlay-swap-outline,unset)}.area-overlay-dragover[data-v-567930a7]{background-color:var(--areas-overlay-swapover-color,rgba(0,100,0,.1));outline-offset:var(--areas-overlay-swapover-outline-offset,-10px);outline:var(--areas-overlay-swapover-outline,5px dashed rgba(0,100,0,.2))}.area-overlay-delete[data-v-567930a7]{background-color:var(--areas-overlay-delete-color,rgba(255,0,0,.1));outline-offset:var(--areas-overlay-delete-outline-offset,-7px);outline:var(--areas-overlay-delete-outline,3px dashed rgba(255,0,0,.2))}.area-split[data-v-567930a7]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-567930a7]{width:2px;height:100%}.area-split-horizontal[data-v-567930a7]{width:100%;height:2px}.area-content[data-v-567930a7]{overflow:auto;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-567930a7",!1,void 0,!1,i,void 0,void 0);function d(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function l(e,t){return e+t}const c=e({},(function(e){e&&e("data-v-4ecc5a84_0",{source:".container[data-v-4ecc5a84]{display:flex;width:100%;height:100%}.container-separator[data-v-4ecc5a84]{position:relative;flex-shrink:0}.container-separator-margin[data-v-4ecc5a84]{position:absolute}",map:void 0,media:void 0})}),{name:"container",props:{id:{type:Number,require:!0},areasRatio:{type:Array,required:!0},direction:{type:String,default:"row",validator(e){if(["row","column"].includes(e))return!0;throw`Container direction property can only be "row" or "column", received : "${e}"`}},separatorThickness:{type:Number,default:2},separatorDetectionMargin:{type:Number,default:10},minRatio:{type:Number,default:0}},data:()=>({activeSeparatorIndex:null}),inject:{_areas:"areas"},computed:{areasWidth(){return this.areasRatio.map(e=>`${"row"===this.direction?"width":"height"}: max(0px, calc(${e}% - ${(this.areas.length-1)*this.separatorThickness/this.areas.length}px))`)},areas(){return this.$slots.default}},methods:{onSeparatorMouseDown(e,t){this.activeSeparatorIndex=e,t.preventDefault(),t.stopPropagation(),this._areas.cursor="--areas-global-cursor: "+("row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)"),document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",e=>this.stopDrag(e))},drag(e){const t="row"===this.direction?e.clientX:e.clientY,{x:a,y:r,width:i,height:n}=this.$el.getBoundingClientRect(),o=d((t-("row"===this.direction?a:r))/("row"===this.direction?i:n)*100,0,100),s=0===this.activeSeparatorIndex?0:this.areasRatio.slice(0,this.activeSeparatorIndex).reduce(l),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(l),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=d(o-s,this.minRatio,100-(s+c+this.minRatio)),h[this.activeSeparatorIndex+1]=100-h[this.activeSeparatorIndex]-(s+c),this._areas.updateContainerRatio(this.id,h)},stopDrag(e){this.activeSeparatorIndex=null,this._areas.cursor=null,document.removeEventListener("mousemove",this.drag)},renderSeparator(e,t){return e("div",{attrs:{"data-test":"separator"},class:"container-separator",style:{["row"===this.direction?"width":"height"]:this.separatorThickness+"px",cursor:"row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)","pointer-events":this._areas.noMode?"auto":"none"},on:{mousedown:e=>this.onSeparatorMouseDown(t,e)}},[e("div",{class:"container-separator-margin",style:{zIndex:this._areas.zIndexStart,["row"===this.direction?"left":"top"]:-this.separatorDetectionMargin+"px",width:"row"===this.direction?2*this.separatorDetectionMargin+"px":"100%",height:"row"===this.direction?"100%":2*this.separatorDetectionMargin+"px"}})])}},render(e){const t=this.areas;if(!t||t.length<2)throw"Container can only work with at least 2 areas.";return e("div",{class:"container",style:{flexDirection:this.direction}},t.map((a,r)=>(a.data.style=this.areasWidth[r],r!==t.length-1?[Object.assign({},a),this.renderSeparator(e,r)]:Object.assign({},a))).flat())}},"data-v-4ecc5a84",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return v(this.layout)},areas(){return g(this.layout)}},updated(){this.$emit("updated")},methods:{getLayout(){return this.layout},getContainerParent(e){return this.containers.length?this.containers.find(t=>t.children.includes(e)):null},getContainerAncestors(e){const t=[];let a=this.getContainerParent(e);for(;a;)t.push(a),a=this.getContainerParent(a);return t},getNextAreaId(){return this.areas.getNextAreaId()},getNextContainerId(){return this.areas.getNextContainerId()},getNextContainerKey(){return this.areas.getNextContainerKey()},getAreaContainer(e){return this.containers.find(t=>t.children.filter(e=>"area"===e.type).map(e=>e.id).includes(e))},getArea(e){return this.areas.find(t=>t.id===e)},getAreaInstances(){return this.$refs.areas},getContainer(e){return this.containers.find(t=>t.id===e)},updateContainerTreeKeys(e){e.key=this.getNextContainerKey(),this.getContainerAncestors(e).forEach(e=>e.key=this.getNextContainerKey())},updateContainerRatio(e,t){this.getContainer(e).ratios.splice(0,t.length,...t)},splitArea(e,t,a,r){const i=a,n=100-i,o="vertical"===t?"row":"column",s=this.getAreaContainer(e),d=this.getNextAreaId(),l={id:d,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),d=s.ratios[a],c=i/100*d,h=d-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,l),s.ratios.splice(a,1,c,h);else{const e=r?[t,l]:[l,t],d={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,d)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,l]:[l,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return d},mergeRatios(e,t){if(0===t){const t=e.ratios.shift(),a=e.ratios.shift();e.ratios.unshift(t+a);const r=e.children.shift();return this.updateContainerTreeKeys(e,!1),r}{const a=e.ratios[t],r=e.ratios[t-1],i=e.ratios.splice(t-1,2,a+r);return e.children.splice(t,1),i[0]}},makeArea:(e,t)=>e(s,{props:{id:t.id},ref:"areas",refInFor:!0}),makeContainer(e,a){const{children:r,direction:i="row",id:n,key:o}=a;return e(c,{props:{direction:i,areasRatio:a.ratios,id:n,...t},key:"areaContainer"+o},r.map(t=>"container"===t.type?this.makeContainer(e,t):this.makeArea(e,t)))},deleteContainer(e,t){const a=this.getContainerParent(e);e.children.splice(t,1);const r=e.children.pop();if(a){const t=a.children.findIndex(t=>"container"===t.type&&t.id===e.id);a.children.splice(t,1,r)}else this.layout=r},deleteArea(e){const t=this.getAreaContainer(e);if(!t)throw`Cannot delete area with id "${e}" because this is the root area.`;const a=t.children.filter(e=>"area"===e.type).find(t=>t.id===e),r=t.children.indexOf(a);if(t.children.length>2)this.mergeRatios(t,r),this.updateContainerTreeKeys(t,!1);else{const e=this.getContainerParent(t);this.deleteContainer(t,r),e&&this.updateContainerTreeKeys(e,!1)}}},render(e){return"container"===this.layout.type?this.makeContainer(e,this.layout):this.makeArea(e,this.layout)}});const u=e=>e.children.filter(e=>"area"===e.type),p=e=>e.children.filter(e=>"container"===e.type),g=e=>"container"===e.type?[...u(e),...p(e).map(g).flat()]:[e],v=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(v).flat()]:[e]};function f(e){const t=e.map(Math.round);return t[t.length-1]=100-t.slice(0,-1).reduce((e,t)=>e+t),t}function m(){const e=function*(){let e=1;for(;e<Number.MAX_SAFE_INTEGER;)yield e++;throw"Cannot generate more ids."}();return()=>e.next().value}const y=e({},(function(e){e&&e("data-v-4f6d529d_0",{source:".areas[data-v-4f6d529d]{background-color:var(--areas-separator-color,#2f4f4f);height:100%;width:100%;display:flex;overflow:hidden}",map:void 0,media:void 0})}),{name:"areas",props:{cfg:{type:Object,required:!0},zIndexStart:{type:Number,default:1}},provide(){return{areas:this}},data:()=>({mode:null,activeAreaId:null,areaIdPrefix:null,availableComponents:null,areasContent:null,layoutComponent:null,defaultComponent:null,containerIdGen:null,containerKeyGen:null,areaIdGen:null,areaContentIdGen:null,cursor:null}),computed:{size(){return this.areasContent&&this.areasContent.filter(Boolean).length},swapMode(){return"swap"===this.mode},deleteMode(){return"delete"===this.mode},splitVerticalMode(){return"split-vertical"===this.mode},splitHorizontalMode(){return"split-horizontal"===this.mode},noMode(){return null===this.mode}},created(){this.initGenerators(),this.areasContent=[],this.parseCfg(this.cfg)},methods:{initGenerators(){this.containerIdGen=m(),this.containerKeyGen=m(),this.areaIdGen=m(),this.areaContentIdGen=m()},parseCfg(e){this.separatorThickness=e.separatorThickness,this.separatorDetectionMargin=e.separatorDetectionMargin,this.areaMinRatio=e.areaMinRatio,this.areaIdPrefix=this.cfg.areaIdPrefix||"area-",this.defaultComponent=this.cfg.defaultComponent||{render:()=>null},this.availableComponents=e.components;const t=this.parseLayout(e.layout);this.buildLayout(t)},parseLayout(e){return e.children?this.parseContainer(e):this.parseArea(e)},parseContainer(e){if(e.ratios&&(e.ratios.length!==e.children.length||100!==e.ratios.reduce((e,t)=>e+t)))throw"Container is malformed. Each child must have a ratio and the sum of all ratios must be 100.";return{type:"container",id:this.containerIdGen(),key:this.containerKeyGen(),direction:e.direction||"row",ratios:e.ratios,children:e.children.map(e=>e.children?this.parseContainer(e):this.parseArea(e))}},parseArea(e){if(null!==e.componentIndex&&!this.availableComponents[e.componentIndex])throw`The component with index "${e.componentIndex}" does not exist. "componentIndex" in cfg.layout must be a valid index in the cfg.components array or null for default component.`;const t={type:"area",id:this.areaIdGen()},a={name:e.name,component:null!==e.componentIndex?this.availableComponents[e.componentIndex]:this.defaultComponent,cfg:e.cfg,id:this.areaContentIdGen()};return this.areasContent[t.id]=a,t},buildLayout(e){this.layoutComponent=h(e,{separatorThickness:this.separatorThickness,separatorDetectionMargin:this.separatorDetectionMargin,minRatio:this.areaMinRatio})},loadLayout(e){this.initGenerators(),this.areasContent=[],this.$nextTick(()=>this.buildLayout(this.parseLayout(e)))},getCurrentLayout(){const e=this.$refs.layout.getLayout();return this.reverseParseLayout(e)},changeAreaContent(e,t={}){if(!this.areasContent.map((e,t)=>e?t:null).filter(Boolean).includes(e))throw`Impossible to change component. Area id "${e}" does not exist.`;const{cfg:a,componentIndex:r,name:i}=t;if(null!==r&&!Object.keys(this.availableComponents).includes(String(r)))throw`Impossible to change component. Component index "${r}" is not available. For default component, use null.`;const n={id:this.areaContentIdGen(),component:null===r?this.defaultComponent:this.availableComponents[r],...a&&{cfg:a},...i&&{name:i}};this.areasContent.splice(e,1,n)},setMode(e){if(null!==e&&!["split-vertical","split-horizontal","swap","delete"].includes(e))throw`Mode must be "split-vertical", "split-horizontal", "swap" or "delete", get ${e}. To exit any mode, call setMode(null)`;this.mode!==e&&(this.mode=e)},deleteArea(e){this.$refs.layout.deleteArea(e),this.areasContent.splice(e,1,void 0),this.$emit("area-deletted",{areaId:e})},splitArea(e,t,a=50,r=!0){if(!["vertical","horizontal"].includes(t))throw`Cannot split area this way. Only accept "vertical" or "horizontal", get "${t}".`;const i=this.$refs.layout.splitArea(e,t,a,r);this.areasContent[i]={id:this.areaContentIdGen(),component:this.defaultComponent},this.$nextTick(()=>{this.areasContent=Array.from(this.areasContent),this.$emit("area-splitted",{areaId:e,newAreaId:i,way:t,percentage:a,insertNewAfter:r})})},swapAreas(e,t){const a=this.areasContent[e],r=this.areasContent[t];this.areasContent.splice(t,1,a),this.areasContent.splice(e,1,r),this.$nextTick(()=>{this.reattachTeleports(),this.$emit("areas-swapped",{areaId1:e,areaId2:t})})},getAreaContentByName(e){return this.areasContent.filter(Boolean).filter(e=>e.name).find(t=>t.name===e)},onMouseLeave(){this.activeAreaId=null},setActiveAreaId(e){this.activeAreaId=e},getNextAreaId(){return this.areaIdGen()},getNextContainerId(){return this.containerIdGen()},getNextContainerKey(){return this.containerKeyGen()},reverseParseLayout(e){return"container"===e.type?this.reverseParseContainer(e):reverseParseArea(e)},reverseParseContainer(e){return{direction:e.direction,ratios:f(e.ratios),children:e.children.map(e=>"container"===e.type?this.reverseParseContainer(e):this.reverseParseArea(e))}},reverseParseArea(e){const t=this.areasContent[e.id],a=this.availableComponents.indexOf(t.component);return{componentIndex:-1===a?null:a,...t.cfg&&{cfg:t.cfg},...t.name&&{name:t.name}}},getAreas(){return this.$refs.layout.getAreaInstances()},getArea(e){return this.getAreas().find(t=>t.id===e)},onLayoutUpdated(){this.reattachTeleports()},reattachTeleports(){this.$refs.teleports.forEach(e=>e.attach())},updateContainerRatio(e,t){this.$refs.layout.updateContainerRatio(e,t)},getDOMAreaId(e){return`${this.areaIdPrefix}${e}`},renderTeleports(e){return e("div",{style:"display:none;"},this.areasContent.map((a,r)=>a?e(t,{props:{targetId:r},on:{mounted({childInstance:e}){a.instance=e}},ref:"teleports",refInFor:!0,key:"teleportArea"+a.id},[e(a.component,{...a.cfg})]):null).filter(Boolean))}},render(e){return e("div",{class:"areas",style:"cursor: var(--areas-global-cursor, unset); "+this.cursor,on:{mouseleave:this.onMouseLeave}},[this.renderTeleports(e),e(this.layoutComponent,{ref:"layout",on:{updated:this.onLayoutUpdated}})])}},"data-v-4f6d529d",void 0,void 0,!1,i,void 0,void 0);export default y;
+function e(e,t,a,r,i,n,o,s,d,l){"boolean"!=typeof o&&(d=s,s=o,o=!1);const c="function"==typeof a?a.options:a;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),h)if(c.functional){const e=c.render;c.render=function(t,a){return h.call(a),e(t,a)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return a}const t=e({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"teleport"},[this._t("default")],2)},staticRenderFns:[]},void 0,{props:{targetId:{type:Number,require:!0}},inject:["areas"],provide(){const e=this;return{$area:{get id(){return e.targetId},get domElement(){return e.areas.getArea(e.targetId).$el},get component(){return e.areas.getArea(e.targetId)},get contentComponent(){return e.getChildrenComponent()},get areas(){return e.areas},get areaContent(){return this.areas.areasContent[e.targetId]},onChange(t){if("function"!=typeof t)throw`onAreaChange only accept function, get "${typeof t}"`;e.onAreaChangeHandlers.push(t)},offChange(t){e.onAreaChangeHandlers=e.onAreaChangeHandlers.filter(e=>e!==t)}}}},data:()=>({child:null,onAreaChangeHandlers:[]}),mounted(){this.$emit("mounted",{childInstance:this.getChildrenComponent()}),this.child=this.$el.firstChild,this.$watch("targetId",(e,t)=>{null!=t&&this.onAreaChangeHandlers.forEach(a=>a(e,t)),this.$el.contains(this.child)&&this.$el.removeChild(this.child),this.attach(!0)},{immediate:!0})},methods:{attach(){const e=document.getElementById(this.areas.getDOMAreaId(this.targetId));if(!e)throw`Teleport fails, no DOM element with id : "${this.targetId}".`;for(;e.hasChildNodes();)e.removeChild(e.firstChild);e.contains(this.child)||e.appendChild(this.child)},getChildrenComponent(){return this.$children[0]}}},void 0,!1,void 0,!1,void 0,void 0,void 0);var a={name:"area-component",props:{id:{type:Number,require:!0}},inject:["areas"],data:()=>({dragover:!1,dragging:!1,verticalSplitLeft:null,horizontalSplitTop:null}),computed:{isDraggable(){return this.areas.swapMode},isAreaActive(){return this.id===this.areas.activeAreaId},isOverlayDisplayed(){return!this.isNoMode},isSplitMode(){return this.isVerticalSplitMode||this.isHorizontalSplitMode},isVerticalSplitMode(){return this.areas.splitVerticalMode},isHorizontalSplitMode(){return this.areas.splitHorizontalMode},isDeleteMode(){return this.areas.deleteMode},isSwapMode(){return this.areas.swapMode},isNoMode(){return this.areas.noMode},cursor(){return this.isVerticalSplitMode?"var(--areas-vertical-split-cursor, col-resize)":this.isHorizontalSplitMode?"var(--areas-horizontal-split-cursor, row-resize)":this.isSwapMode&&!this.dragging?"var(--areas-drag-cursor, grab)":this.isSwapMode&&this.dragging?"var(--areas-dragging-cursor, grabbing)":this.isDeleteMode?"var(--areas-delete-cursor, crosshair)":void 0}},methods:{onDragStart(e){if(this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move",this.areas.cfg.dragImage){const t=this.areas.cfg.dragImage;e.dataTransfer.setDragImage(t.img,t.xOffset,t.yOffset)}},onDragEnd(){this.dragging=!1},onDrop(e){this.dragover=!1;const t=parseInt(e.dataTransfer.getData("areas-areaid"),10);this.areas.swapAreas(t,this.id)},onDragEnter(e){e.dataTransfer.types.includes("areas-areaid")&&(this.dragover=!0)},onDragOver(e){e.dataTransfer.types.includes("areas-areaid")&&(e.preventDefault(),e.dataTransfer.dropEffect="move")},onDragLeave(e){this.dragover=!1},onAreaClick(e){const{horizontalPercentage:t,verticalPercentage:a}=this.getLocalMouseCoordinates(e);this.isVerticalSplitMode?this.areas.splitArea(this.id,"vertical",a):this.isHorizontalSplitMode?this.areas.splitArea(this.id,"horizontal",t):this.isDeleteMode&&this.areas.deleteArea(this.id,e)},onMouseMove(e){const{verticalPercentage:t,horizontalPercentage:a}=this.getLocalMouseCoordinates(e);this.verticalSplitLeft=t,this.horizontalSplitTop=a},getLocalMouseCoordinates(e){const{height:t,width:a,x:r,y:i}=this.$el.getBoundingClientRect(),{clientX:n,clientY:o}=e,s=o-i,d=n-r;return{top:s,left:d,verticalPercentage:d/a*100,horizontalPercentage:s/t*100}},onMouseEnter(){this.isAreaActive||this.areas.setActiveAreaId(this.id)}}};const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const a=r?t.media||"default":e,i=o[a]||(o[a]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(a),r=i.element.childNodes;r[e]&&i.element.removeChild(r[e]),r.length?i.element.insertBefore(t,r[e]):i.element.appendChild(t)}}}(e,t)}let n;const o={};const s=e({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"area",class:{"area-active":e.isAreaActive},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:function(t){return t.target!==t.currentTarget?null:e.onDragStart(t)},drop:e.onDrop,dragend:e.onDragEnd,mouseenter:e.onMouseEnter,mousemove:e.onMouseMove}},[e.isOverlayDisplayed?a("div",{staticClass:"area-overlay",class:{"area-overlay-dragover":e.dragover&&!e.isAreaActive,"area-overlay-split":e.isAreaActive&&e.isSplitMode,"area-overlay-swap":e.isAreaActive&&e.isSwapMode,"area-overlay-delete":e.isAreaActive&&e.isDeleteMode},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:e.areas.zIndexStart}}):e._e(),e._v(" "),e.isSplitMode&&e.isAreaActive?a("div",{staticClass:"area-split",class:{"area-split-vertical":e.isVerticalSplitMode,"area-split-horizontal":e.isHorizontalSplitMode},style:(e.isVerticalSplitMode?"left":"top")+": "+(e.isVerticalSplitMode?e.verticalSplitLeft:e.horizontalSplitTop)+"%"}):e._e(),e._v(" "),a("div",{staticClass:"area-content",attrs:{id:e.areas.getDOMAreaId(e.id)}})])},staticRenderFns:[]},(function(e){e&&e("data-v-567930a7_0",{source:".area[data-v-567930a7]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-567930a7]{box-shadow:var(--areas-active-box-shadow,inset 0 0 2px grey)}.area-overlay[data-v-567930a7]{position:absolute;width:100%;height:100%;background-color:var(--areas-overlay-color,rgba(128,128,128,.2));outline-offset:var(--areas-overlay-outline-offset,unset);outline:var(--areas-overlay-outline,unset)}.area-overlay-split[data-v-567930a7]{background-color:var(--areas-overlay-split-color,transparent);outline-offset:var(--areas-overlay-split-outline-offset,unset);outline:var(--areas-overlay-split-outline,unset)}.area-overlay-swap[data-v-567930a7]{background-color:var(--areas-overlay-swap-color,transparent);outline-offset:var(--areas-overlay-swap-outline-offset,unset);outline:var(--areas-overlay-swap-outline,unset)}.area-overlay-dragover[data-v-567930a7]{background-color:var(--areas-overlay-swapover-color,rgba(0,100,0,.1));outline-offset:var(--areas-overlay-swapover-outline-offset,-10px);outline:var(--areas-overlay-swapover-outline,5px dashed rgba(0,100,0,.2))}.area-overlay-delete[data-v-567930a7]{background-color:var(--areas-overlay-delete-color,rgba(255,0,0,.1));outline-offset:var(--areas-overlay-delete-outline-offset,-7px);outline:var(--areas-overlay-delete-outline,3px dashed rgba(255,0,0,.2))}.area-split[data-v-567930a7]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-567930a7]{width:2px;height:100%}.area-split-horizontal[data-v-567930a7]{width:100%;height:2px}.area-content[data-v-567930a7]{overflow:auto;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-567930a7",!1,void 0,!1,i,void 0,void 0);function d(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function l(e,t){return e+t}const c=e({},(function(e){e&&e("data-v-a330e00c_0",{source:".areas-container[data-v-a330e00c]{display:flex;width:100%;height:100%}.areas-container__separator[data-v-a330e00c]{position:relative;flex-shrink:0}.areas-container__separator-margin[data-v-a330e00c]{position:absolute}",map:void 0,media:void 0})}),{name:"container",props:{id:{type:Number,require:!0},areasRatio:{type:Array,required:!0},direction:{type:String,default:"row",validator(e){if(["row","column"].includes(e))return!0;throw`Container direction property can only be "row" or "column", received : "${e}"`}},separatorThickness:{type:Number,default:2},separatorDetectionMargin:{type:Number,default:10},minRatio:{type:Number,default:0}},data:()=>({activeSeparatorIndex:null}),inject:{_areas:"areas"},computed:{areasWidth(){return this.areasRatio.map(e=>`${"row"===this.direction?"width":"height"}: max(0px, calc(${e}% - ${(this.areas.length-1)*this.separatorThickness/this.areas.length}px))`)},areas(){return this.$slots.default}},methods:{onSeparatorMouseDown(e,t){this.activeSeparatorIndex=e,t.preventDefault(),t.stopPropagation(),this._areas.cursor="--areas-global-cursor: "+("row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)"),document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",e=>this.stopDrag(e))},drag(e){const t="row"===this.direction?e.clientX:e.clientY,{x:a,y:r,width:i,height:n}=this.$el.getBoundingClientRect(),o=d((t-("row"===this.direction?a:r))/("row"===this.direction?i:n)*100,0,100),s=0===this.activeSeparatorIndex?0:this.areasRatio.slice(0,this.activeSeparatorIndex).reduce(l),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(l),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=d(o-s,this.minRatio,100-(s+c+this.minRatio)),h[this.activeSeparatorIndex+1]=100-h[this.activeSeparatorIndex]-(s+c),this._areas.updateContainerRatio(this.id,h)},stopDrag(e){this.activeSeparatorIndex=null,this._areas.cursor=null,document.removeEventListener("mousemove",this.drag)},renderSeparator(e,t){return e("div",{attrs:{"data-test":"separator"},class:"areas-container__separator",style:{["row"===this.direction?"width":"height"]:this.separatorThickness+"px",cursor:"row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)","pointer-events":this._areas.noMode?"auto":"none"},on:{mousedown:e=>this.onSeparatorMouseDown(t,e)}},[e("div",{class:"areas-container__separator-margin",style:{zIndex:this._areas.zIndexStart,["row"===this.direction?"left":"top"]:-this.separatorDetectionMargin+"px",width:"row"===this.direction?2*this.separatorDetectionMargin+"px":"100%",height:"row"===this.direction?"100%":2*this.separatorDetectionMargin+"px"}})])}},render(e){const t=this.areas;if(!t||t.length<2)throw"Container can only work with at least 2 areas.";return e("div",{class:"areas-container",style:{flexDirection:this.direction}},t.map((a,r)=>(a.data.style=this.areasWidth[r],r!==t.length-1?[Object.assign({},a),this.renderSeparator(e,r)]:Object.assign({},a))).flat())}},"data-v-a330e00c",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return v(this.layout)},areas(){return g(this.layout)}},updated(){this.$emit("updated")},methods:{getLayout(){return this.layout},getContainerParent(e){return this.containers.length?this.containers.find(t=>t.children.includes(e)):null},getContainerAncestors(e){const t=[];let a=this.getContainerParent(e);for(;a;)t.push(a),a=this.getContainerParent(a);return t},getNextAreaId(){return this.areas.getNextAreaId()},getNextContainerId(){return this.areas.getNextContainerId()},getNextContainerKey(){return this.areas.getNextContainerKey()},getAreaContainer(e){return this.containers.find(t=>t.children.filter(e=>"area"===e.type).map(e=>e.id).includes(e))},getArea(e){return this.areas.find(t=>t.id===e)},getAreaInstances(){return this.$refs.areas},getContainer(e){return this.containers.find(t=>t.id===e)},updateContainerTreeKeys(e){e.key=this.getNextContainerKey(),this.getContainerAncestors(e).forEach(e=>e.key=this.getNextContainerKey())},updateContainerRatio(e,t){this.getContainer(e).ratios.splice(0,t.length,...t)},splitArea(e,t,a,r){const i=a,n=100-i,o="vertical"===t?"row":"column",s=this.getAreaContainer(e),d=this.getNextAreaId(),l={id:d,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),d=s.ratios[a],c=i/100*d,h=d-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,l),s.ratios.splice(a,1,c,h);else{const e=r?[t,l]:[l,t],d={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,d)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,l]:[l,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return d},mergeRatios(e,t){if(0===t){const t=e.ratios.shift(),a=e.ratios.shift();e.ratios.unshift(t+a);const r=e.children.shift();return this.updateContainerTreeKeys(e,!1),r}{const a=e.ratios[t],r=e.ratios[t-1],i=e.ratios.splice(t-1,2,a+r);return e.children.splice(t,1),i[0]}},makeArea:(e,t)=>e(s,{props:{id:t.id},ref:"areas",refInFor:!0}),makeContainer(e,a){const{children:r,direction:i="row",id:n,key:o}=a;return e(c,{props:{direction:i,areasRatio:a.ratios,id:n,...t},key:"areaContainer"+o},r.map(t=>"container"===t.type?this.makeContainer(e,t):this.makeArea(e,t)))},deleteContainer(e,t){const a=this.getContainerParent(e);e.children.splice(t,1);const r=e.children.pop();if(a){const t=a.children.findIndex(t=>"container"===t.type&&t.id===e.id);a.children.splice(t,1,r)}else this.layout=r},deleteArea(e){const t=this.getAreaContainer(e);if(!t)throw`Cannot delete area with id "${e}" because this is the root area.`;const a=t.children.filter(e=>"area"===e.type).find(t=>t.id===e),r=t.children.indexOf(a);if(t.children.length>2)this.mergeRatios(t,r),this.updateContainerTreeKeys(t,!1);else{const e=this.getContainerParent(t);this.deleteContainer(t,r),e&&this.updateContainerTreeKeys(e,!1)}}},render(e){return"container"===this.layout.type?this.makeContainer(e,this.layout):this.makeArea(e,this.layout)}});const u=e=>e.children.filter(e=>"area"===e.type),p=e=>e.children.filter(e=>"container"===e.type),g=e=>"container"===e.type?[...u(e),...p(e).map(g).flat()]:[e],v=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(v).flat()]:[e]};function f(e){const t=e.map(Math.round);return t[t.length-1]=100-t.slice(0,-1).reduce((e,t)=>e+t),t}function m(){const e=function*(){let e=1;for(;e<Number.MAX_SAFE_INTEGER;)yield e++;throw"Cannot generate more ids."}();return()=>e.next().value}const y=e({},(function(e){e&&e("data-v-4f6d529d_0",{source:".areas[data-v-4f6d529d]{background-color:var(--areas-separator-color,#2f4f4f);height:100%;width:100%;display:flex;overflow:hidden}",map:void 0,media:void 0})}),{name:"areas",props:{cfg:{type:Object,required:!0},zIndexStart:{type:Number,default:1}},provide(){return{areas:this}},data:()=>({mode:null,activeAreaId:null,areaIdPrefix:null,availableComponents:null,areasContent:null,layoutComponent:null,defaultComponent:null,containerIdGen:null,containerKeyGen:null,areaIdGen:null,areaContentIdGen:null,cursor:null}),computed:{size(){return this.areasContent&&this.areasContent.filter(Boolean).length},swapMode(){return"swap"===this.mode},deleteMode(){return"delete"===this.mode},splitVerticalMode(){return"split-vertical"===this.mode},splitHorizontalMode(){return"split-horizontal"===this.mode},noMode(){return null===this.mode}},created(){this.initGenerators(),this.areasContent=[],this.parseCfg(this.cfg)},methods:{initGenerators(){this.containerIdGen=m(),this.containerKeyGen=m(),this.areaIdGen=m(),this.areaContentIdGen=m()},parseCfg(e){this.separatorThickness=e.separatorThickness,this.separatorDetectionMargin=e.separatorDetectionMargin,this.areaMinRatio=e.areaMinRatio,this.areaIdPrefix=this.cfg.areaIdPrefix||"area-",this.defaultComponent=this.cfg.defaultComponent||{render:()=>null},this.availableComponents=e.components;const t=this.parseLayout(e.layout);this.buildLayout(t)},parseLayout(e){return e.children?this.parseContainer(e):this.parseArea(e)},parseContainer(e){if(e.ratios&&(e.ratios.length!==e.children.length||100!==e.ratios.reduce((e,t)=>e+t)))throw"Container is malformed. Each child must have a ratio and the sum of all ratios must be 100.";return{type:"container",id:this.containerIdGen(),key:this.containerKeyGen(),direction:e.direction||"row",ratios:e.ratios,children:e.children.map(e=>e.children?this.parseContainer(e):this.parseArea(e))}},parseArea(e){if(null!==e.componentIndex&&!this.availableComponents[e.componentIndex])throw`The component with index "${e.componentIndex}" does not exist. "componentIndex" in cfg.layout must be a valid index in the cfg.components array or null for default component.`;const t={type:"area",id:this.areaIdGen()},a={name:e.name,component:null!==e.componentIndex?this.availableComponents[e.componentIndex]:this.defaultComponent,cfg:e.cfg,id:this.areaContentIdGen()};return this.areasContent[t.id]=a,t},buildLayout(e){this.layoutComponent=h(e,{separatorThickness:this.separatorThickness,separatorDetectionMargin:this.separatorDetectionMargin,minRatio:this.areaMinRatio})},loadLayout(e){this.initGenerators(),this.areasContent=[],this.$nextTick(()=>this.buildLayout(this.parseLayout(e)))},getCurrentLayout(){const e=this.$refs.layout.getLayout();return this.reverseParseLayout(e)},changeAreaContent(e,t={}){if(!this.areasContent.map((e,t)=>e?t:null).filter(Boolean).includes(e))throw`Impossible to change component. Area id "${e}" does not exist.`;const{cfg:a,componentIndex:r,name:i}=t;if(null!==r&&!Object.keys(this.availableComponents).includes(String(r)))throw`Impossible to change component. Component index "${r}" is not available. For default component, use null.`;const n={id:this.areaContentIdGen(),component:null===r?this.defaultComponent:this.availableComponents[r],...a&&{cfg:a},...i&&{name:i}};this.areasContent.splice(e,1,n)},setMode(e){if(null!==e&&!["split-vertical","split-horizontal","swap","delete"].includes(e))throw`Mode must be "split-vertical", "split-horizontal", "swap" or "delete", get ${e}. To exit any mode, call setMode(null)`;this.mode!==e&&(this.mode=e)},deleteArea(e){this.$refs.layout.deleteArea(e),this.areasContent.splice(e,1,void 0),this.$emit("area-deletted",{areaId:e})},splitArea(e,t,a=50,r=!0){if(!["vertical","horizontal"].includes(t))throw`Cannot split area this way. Only accept "vertical" or "horizontal", get "${t}".`;const i=this.$refs.layout.splitArea(e,t,a,r);this.areasContent[i]={id:this.areaContentIdGen(),component:this.defaultComponent},this.$nextTick(()=>{this.areasContent=Array.from(this.areasContent),this.$emit("area-splitted",{areaId:e,newAreaId:i,way:t,percentage:a,insertNewAfter:r})})},swapAreas(e,t){const a=this.areasContent[e],r=this.areasContent[t];this.areasContent.splice(t,1,a),this.areasContent.splice(e,1,r),this.$nextTick(()=>{this.reattachTeleports(),this.$emit("areas-swapped",{areaId1:e,areaId2:t})})},getAreaContentByName(e){return this.areasContent.filter(Boolean).filter(e=>e.name).find(t=>t.name===e)},onMouseLeave(){this.activeAreaId=null},setActiveAreaId(e){this.activeAreaId=e},getNextAreaId(){return this.areaIdGen()},getNextContainerId(){return this.containerIdGen()},getNextContainerKey(){return this.containerKeyGen()},reverseParseLayout(e){return"container"===e.type?this.reverseParseContainer(e):reverseParseArea(e)},reverseParseContainer(e){return{direction:e.direction,ratios:f(e.ratios),children:e.children.map(e=>"container"===e.type?this.reverseParseContainer(e):this.reverseParseArea(e))}},reverseParseArea(e){const t=this.areasContent[e.id],a=this.availableComponents.indexOf(t.component);return{componentIndex:-1===a?null:a,...t.cfg&&{cfg:t.cfg},...t.name&&{name:t.name}}},getAreas(){return this.$refs.layout.getAreaInstances()},getArea(e){return this.getAreas().find(t=>t.id===e)},onLayoutUpdated(){this.reattachTeleports()},reattachTeleports(){this.$refs.teleports.forEach(e=>e.attach())},updateContainerRatio(e,t){this.$refs.layout.updateContainerRatio(e,t)},getDOMAreaId(e){return`${this.areaIdPrefix}${e}`},renderTeleports(e){return e("div",{style:"display:none;"},this.areasContent.map((a,r)=>a?e(t,{props:{targetId:r},on:{mounted({childInstance:e}){a.instance=e}},ref:"teleports",refInFor:!0,key:"teleportArea"+a.id},[e(a.component,{...a.cfg})]):null).filter(Boolean))}},render(e){return e("div",{class:"areas",style:"cursor: var(--areas-global-cursor, unset); "+this.cursor,on:{mouseleave:this.onMouseLeave}},[this.renderTeleports(e),e(this.layoutComponent,{ref:"layout",on:{updated:this.onLayoutUpdated}})])}},"data-v-4f6d529d",void 0,void 0,!1,i,void 0,void 0);export default y;

dist/areas.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).areas=t()}(this,(function(){"use strict";function e(e,t,a,r,i,n,o,s,d,l){"boolean"!=typeof o&&(d=s,s=o,o=!1);const c="function"==typeof a?a.options:a;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),h)if(c.functional){const e=c.render;c.render=function(t,a){return h.call(a),e(t,a)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return a}const t=e({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"teleport"},[this._t("default")],2)},staticRenderFns:[]},void 0,{props:{targetId:{type:Number,require:!0}},inject:["areas"],provide(){const e=this;return{$area:{get id(){return e.targetId},get domElement(){return e.areas.getArea(e.targetId).$el},get component(){return e.areas.getArea(e.targetId)},get contentComponent(){return e.getChildrenComponent()},get areas(){return e.areas},get areaContent(){return this.areas.areasContent[e.targetId]},onChange(t){if("function"!=typeof t)throw`onAreaChange only accept function, get "${typeof t}"`;e.onAreaChangeHandlers.push(t)},offChange(t){e.onAreaChangeHandlers=e.onAreaChangeHandlers.filter(e=>e!==t)}}}},data:()=>({child:null,onAreaChangeHandlers:[]}),mounted(){this.$emit("mounted",{childInstance:this.getChildrenComponent()}),this.child=this.$el.firstChild,this.$watch("targetId",(e,t)=>{null!=t&&this.onAreaChangeHandlers.forEach(a=>a(e,t)),this.$el.contains(this.child)&&this.$el.removeChild(this.child),this.attach(!0)},{immediate:!0})},methods:{attach(){const e=document.getElementById(this.areas.getDOMAreaId(this.targetId));if(!e)throw`Teleport fails, no DOM element with id : "${this.targetId}".`;for(;e.hasChildNodes();)e.removeChild(e.firstChild);e.contains(this.child)||e.appendChild(this.child)},getChildrenComponent(){return this.$children[0]}}},void 0,!1,void 0,!1,void 0,void 0,void 0);var a={name:"area-component",props:{id:{type:Number,require:!0}},inject:["areas"],data:()=>({dragover:!1,dragging:!1,verticalSplitLeft:null,horizontalSplitTop:null}),computed:{isDraggable(){return this.areas.swapMode},isAreaActive(){return this.id===this.areas.activeAreaId},isOverlayDisplayed(){return!this.isNoMode},isSplitMode(){return this.isVerticalSplitMode||this.isHorizontalSplitMode},isVerticalSplitMode(){return this.areas.splitVerticalMode},isHorizontalSplitMode(){return this.areas.splitHorizontalMode},isDeleteMode(){return this.areas.deleteMode},isSwapMode(){return this.areas.swapMode},isNoMode(){return this.areas.noMode},cursor(){return this.isVerticalSplitMode?"var(--areas-vertical-split-cursor, col-resize)":this.isHorizontalSplitMode?"var(--areas-horizontal-split-cursor, row-resize)":this.isSwapMode&&!this.dragging?"var(--areas-drag-cursor, grab)":this.isSwapMode&&this.dragging?"var(--areas-dragging-cursor, grabbing)":this.isDeleteMode?"var(--areas-delete-cursor, crosshair)":void 0}},methods:{onDragStart(e){if(this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move",this.areas.cfg.dragImage){const t=this.areas.cfg.dragImage;e.dataTransfer.setDragImage(t.img,t.xOffset,t.yOffset)}},onDragEnd(){this.dragging=!1},onDrop(e){this.dragover=!1;const t=parseInt(e.dataTransfer.getData("areas-areaid"),10);this.areas.swapAreas(t,this.id)},onDragEnter(e){e.dataTransfer.types.includes("areas-areaid")&&(this.dragover=!0)},onDragOver(e){e.dataTransfer.types.includes("areas-areaid")&&(e.preventDefault(),e.dataTransfer.dropEffect="move")},onDragLeave(e){this.dragover=!1},onAreaClick(e){const{horizontalPercentage:t,verticalPercentage:a}=this.getLocalMouseCoordinates(e);this.isVerticalSplitMode?this.areas.splitArea(this.id,"vertical",a):this.isHorizontalSplitMode?this.areas.splitArea(this.id,"horizontal",t):this.isDeleteMode&&this.areas.deleteArea(this.id,e)},onMouseMove(e){const{verticalPercentage:t,horizontalPercentage:a}=this.getLocalMouseCoordinates(e);this.verticalSplitLeft=t,this.horizontalSplitTop=a},getLocalMouseCoordinates(e){const{height:t,width:a,x:r,y:i}=this.$el.getBoundingClientRect(),{clientX:n,clientY:o}=e,s=o-i,d=n-r;return{top:s,left:d,verticalPercentage:d/a*100,horizontalPercentage:s/t*100}},onMouseEnter(){this.isAreaActive||this.areas.setActiveAreaId(this.id)}}};const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const a=r?t.media||"default":e,i=o[a]||(o[a]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(a),r=i.element.childNodes;r[e]&&i.element.removeChild(r[e]),r.length?i.element.insertBefore(t,r[e]):i.element.appendChild(t)}}}(e,t)}let n;const o={};const s=e({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"area",class:{"area-active":e.isAreaActive},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:function(t){return t.target!==t.currentTarget?null:e.onDragStart(t)},drop:e.onDrop,dragend:e.onDragEnd,mouseenter:e.onMouseEnter,mousemove:e.onMouseMove}},[e.isOverlayDisplayed?a("div",{staticClass:"area-overlay",class:{"area-overlay-dragover":e.dragover&&!e.isAreaActive,"area-overlay-split":e.isAreaActive&&e.isSplitMode,"area-overlay-swap":e.isAreaActive&&e.isSwapMode,"area-overlay-delete":e.isAreaActive&&e.isDeleteMode},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:e.areas.zIndexStart}}):e._e(),e._v(" "),e.isSplitMode&&e.isAreaActive?a("div",{staticClass:"area-split",class:{"area-split-vertical":e.isVerticalSplitMode,"area-split-horizontal":e.isHorizontalSplitMode},style:(e.isVerticalSplitMode?"left":"top")+": "+(e.isVerticalSplitMode?e.verticalSplitLeft:e.horizontalSplitTop)+"%"}):e._e(),e._v(" "),a("div",{staticClass:"area-content",attrs:{id:e.areas.getDOMAreaId(e.id)}})])},staticRenderFns:[]},(function(e){e&&e("data-v-567930a7_0",{source:".area[data-v-567930a7]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-567930a7]{box-shadow:var(--areas-active-box-shadow,inset 0 0 2px grey)}.area-overlay[data-v-567930a7]{position:absolute;width:100%;height:100%;background-color:var(--areas-overlay-color,rgba(128,128,128,.2));outline-offset:var(--areas-overlay-outline-offset,unset);outline:var(--areas-overlay-outline,unset)}.area-overlay-split[data-v-567930a7]{background-color:var(--areas-overlay-split-color,transparent);outline-offset:var(--areas-overlay-split-outline-offset,unset);outline:var(--areas-overlay-split-outline,unset)}.area-overlay-swap[data-v-567930a7]{background-color:var(--areas-overlay-swap-color,transparent);outline-offset:var(--areas-overlay-swap-outline-offset,unset);outline:var(--areas-overlay-swap-outline,unset)}.area-overlay-dragover[data-v-567930a7]{background-color:var(--areas-overlay-swapover-color,rgba(0,100,0,.1));outline-offset:var(--areas-overlay-swapover-outline-offset,-10px);outline:var(--areas-overlay-swapover-outline,5px dashed rgba(0,100,0,.2))}.area-overlay-delete[data-v-567930a7]{background-color:var(--areas-overlay-delete-color,rgba(255,0,0,.1));outline-offset:var(--areas-overlay-delete-outline-offset,-7px);outline:var(--areas-overlay-delete-outline,3px dashed rgba(255,0,0,.2))}.area-split[data-v-567930a7]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-567930a7]{width:2px;height:100%}.area-split-horizontal[data-v-567930a7]{width:100%;height:2px}.area-content[data-v-567930a7]{overflow:auto;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-567930a7",!1,void 0,!1,i,void 0,void 0);function d(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function l(e,t){return e+t}const c=e({},(function(e){e&&e("data-v-4ecc5a84_0",{source:".container[data-v-4ecc5a84]{display:flex;width:100%;height:100%}.container-separator[data-v-4ecc5a84]{position:relative;flex-shrink:0}.container-separator-margin[data-v-4ecc5a84]{position:absolute}",map:void 0,media:void 0})}),{name:"container",props:{id:{type:Number,require:!0},areasRatio:{type:Array,required:!0},direction:{type:String,default:"row",validator(e){if(["row","column"].includes(e))return!0;throw`Container direction property can only be "row" or "column", received : "${e}"`}},separatorThickness:{type:Number,default:2},separatorDetectionMargin:{type:Number,default:10},minRatio:{type:Number,default:0}},data:()=>({activeSeparatorIndex:null}),inject:{_areas:"areas"},computed:{areasWidth(){return this.areasRatio.map(e=>`${"row"===this.direction?"width":"height"}: max(0px, calc(${e}% - ${(this.areas.length-1)*this.separatorThickness/this.areas.length}px))`)},areas(){return this.$slots.default}},methods:{onSeparatorMouseDown(e,t){this.activeSeparatorIndex=e,t.preventDefault(),t.stopPropagation(),this._areas.cursor="--areas-global-cursor: "+("row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)"),document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",e=>this.stopDrag(e))},drag(e){const t="row"===this.direction?e.clientX:e.clientY,{x:a,y:r,width:i,height:n}=this.$el.getBoundingClientRect(),o=d((t-("row"===this.direction?a:r))/("row"===this.direction?i:n)*100,0,100),s=0===this.activeSeparatorIndex?0:this.areasRatio.slice(0,this.activeSeparatorIndex).reduce(l),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(l),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=d(o-s,this.minRatio,100-(s+c+this.minRatio)),h[this.activeSeparatorIndex+1]=100-h[this.activeSeparatorIndex]-(s+c),this._areas.updateContainerRatio(this.id,h)},stopDrag(e){this.activeSeparatorIndex=null,this._areas.cursor=null,document.removeEventListener("mousemove",this.drag)},renderSeparator(e,t){return e("div",{attrs:{"data-test":"separator"},class:"container-separator",style:{["row"===this.direction?"width":"height"]:this.separatorThickness+"px",cursor:"row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)","pointer-events":this._areas.noMode?"auto":"none"},on:{mousedown:e=>this.onSeparatorMouseDown(t,e)}},[e("div",{class:"container-separator-margin",style:{zIndex:this._areas.zIndexStart,["row"===this.direction?"left":"top"]:-this.separatorDetectionMargin+"px",width:"row"===this.direction?2*this.separatorDetectionMargin+"px":"100%",height:"row"===this.direction?"100%":2*this.separatorDetectionMargin+"px"}})])}},render(e){const t=this.areas;if(!t||t.length<2)throw"Container can only work with at least 2 areas.";return e("div",{class:"container",style:{flexDirection:this.direction}},t.map((a,r)=>(a.data.style=this.areasWidth[r],r!==t.length-1?[Object.assign({},a),this.renderSeparator(e,r)]:Object.assign({},a))).flat())}},"data-v-4ecc5a84",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return v(this.layout)},areas(){return g(this.layout)}},updated(){this.$emit("updated")},methods:{getLayout(){return this.layout},getContainerParent(e){return this.containers.length?this.containers.find(t=>t.children.includes(e)):null},getContainerAncestors(e){const t=[];let a=this.getContainerParent(e);for(;a;)t.push(a),a=this.getContainerParent(a);return t},getNextAreaId(){return this.areas.getNextAreaId()},getNextContainerId(){return this.areas.getNextContainerId()},getNextContainerKey(){return this.areas.getNextContainerKey()},getAreaContainer(e){return this.containers.find(t=>t.children.filter(e=>"area"===e.type).map(e=>e.id).includes(e))},getArea(e){return this.areas.find(t=>t.id===e)},getAreaInstances(){return this.$refs.areas},getContainer(e){return this.containers.find(t=>t.id===e)},updateContainerTreeKeys(e){e.key=this.getNextContainerKey(),this.getContainerAncestors(e).forEach(e=>e.key=this.getNextContainerKey())},updateContainerRatio(e,t){this.getContainer(e).ratios.splice(0,t.length,...t)},splitArea(e,t,a,r){const i=a,n=100-i,o="vertical"===t?"row":"column",s=this.getAreaContainer(e),d=this.getNextAreaId(),l={id:d,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),d=s.ratios[a],c=i/100*d,h=d-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,l),s.ratios.splice(a,1,c,h);else{const e=r?[t,l]:[l,t],d={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,d)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,l]:[l,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return d},mergeRatios(e,t){if(0===t){const t=e.ratios.shift(),a=e.ratios.shift();e.ratios.unshift(t+a);const r=e.children.shift();return this.updateContainerTreeKeys(e,!1),r}{const a=e.ratios[t],r=e.ratios[t-1],i=e.ratios.splice(t-1,2,a+r);return e.children.splice(t,1),i[0]}},makeArea:(e,t)=>e(s,{props:{id:t.id},ref:"areas",refInFor:!0}),makeContainer(e,a){const{children:r,direction:i="row",id:n,key:o}=a;return e(c,{props:{direction:i,areasRatio:a.ratios,id:n,...t},key:"areaContainer"+o},r.map(t=>"container"===t.type?this.makeContainer(e,t):this.makeArea(e,t)))},deleteContainer(e,t){const a=this.getContainerParent(e);e.children.splice(t,1);const r=e.children.pop();if(a){const t=a.children.findIndex(t=>"container"===t.type&&t.id===e.id);a.children.splice(t,1,r)}else this.layout=r},deleteArea(e){const t=this.getAreaContainer(e);if(!t)throw`Cannot delete area with id "${e}" because this is the root area.`;const a=t.children.filter(e=>"area"===e.type).find(t=>t.id===e),r=t.children.indexOf(a);if(t.children.length>2)this.mergeRatios(t,r),this.updateContainerTreeKeys(t,!1);else{const e=this.getContainerParent(t);this.deleteContainer(t,r),e&&this.updateContainerTreeKeys(e,!1)}}},render(e){return"container"===this.layout.type?this.makeContainer(e,this.layout):this.makeArea(e,this.layout)}});const u=e=>e.children.filter(e=>"area"===e.type),p=e=>e.children.filter(e=>"container"===e.type),g=e=>"container"===e.type?[...u(e),...p(e).map(g).flat()]:[e],v=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(v).flat()]:[e]};function f(e){const t=e.map(Math.round);return t[t.length-1]=100-t.slice(0,-1).reduce((e,t)=>e+t),t}function m(){const e=function*(){let e=1;for(;e<Number.MAX_SAFE_INTEGER;)yield e++;throw"Cannot generate more ids."}();return()=>e.next().value}return e({},(function(e){e&&e("data-v-4f6d529d_0",{source:".areas[data-v-4f6d529d]{background-color:var(--areas-separator-color,#2f4f4f);height:100%;width:100%;display:flex;overflow:hidden}",map:void 0,media:void 0})}),{name:"areas",props:{cfg:{type:Object,required:!0},zIndexStart:{type:Number,default:1}},provide(){return{areas:this}},data:()=>({mode:null,activeAreaId:null,areaIdPrefix:null,availableComponents:null,areasContent:null,layoutComponent:null,defaultComponent:null,containerIdGen:null,containerKeyGen:null,areaIdGen:null,areaContentIdGen:null,cursor:null}),computed:{size(){return this.areasContent&&this.areasContent.filter(Boolean).length},swapMode(){return"swap"===this.mode},deleteMode(){return"delete"===this.mode},splitVerticalMode(){return"split-vertical"===this.mode},splitHorizontalMode(){return"split-horizontal"===this.mode},noMode(){return null===this.mode}},created(){this.initGenerators(),this.areasContent=[],this.parseCfg(this.cfg)},methods:{initGenerators(){this.containerIdGen=m(),this.containerKeyGen=m(),this.areaIdGen=m(),this.areaContentIdGen=m()},parseCfg(e){this.separatorThickness=e.separatorThickness,this.separatorDetectionMargin=e.separatorDetectionMargin,this.areaMinRatio=e.areaMinRatio,this.areaIdPrefix=this.cfg.areaIdPrefix||"area-",this.defaultComponent=this.cfg.defaultComponent||{render:()=>null},this.availableComponents=e.components;const t=this.parseLayout(e.layout);this.buildLayout(t)},parseLayout(e){return e.children?this.parseContainer(e):this.parseArea(e)},parseContainer(e){if(e.ratios&&(e.ratios.length!==e.children.length||100!==e.ratios.reduce((e,t)=>e+t)))throw"Container is malformed. Each child must have a ratio and the sum of all ratios must be 100.";return{type:"container",id:this.containerIdGen(),key:this.containerKeyGen(),direction:e.direction||"row",ratios:e.ratios,children:e.children.map(e=>e.children?this.parseContainer(e):this.parseArea(e))}},parseArea(e){if(null!==e.componentIndex&&!this.availableComponents[e.componentIndex])throw`The component with index "${e.componentIndex}" does not exist. "componentIndex" in cfg.layout must be a valid index in the cfg.components array or null for default component.`;const t={type:"area",id:this.areaIdGen()},a={name:e.name,component:null!==e.componentIndex?this.availableComponents[e.componentIndex]:this.defaultComponent,cfg:e.cfg,id:this.areaContentIdGen()};return this.areasContent[t.id]=a,t},buildLayout(e){this.layoutComponent=h(e,{separatorThickness:this.separatorThickness,separatorDetectionMargin:this.separatorDetectionMargin,minRatio:this.areaMinRatio})},loadLayout(e){this.initGenerators(),this.areasContent=[],this.$nextTick(()=>this.buildLayout(this.parseLayout(e)))},getCurrentLayout(){const e=this.$refs.layout.getLayout();return this.reverseParseLayout(e)},changeAreaContent(e,t={}){if(!this.areasContent.map((e,t)=>e?t:null).filter(Boolean).includes(e))throw`Impossible to change component. Area id "${e}" does not exist.`;const{cfg:a,componentIndex:r,name:i}=t;if(null!==r&&!Object.keys(this.availableComponents).includes(String(r)))throw`Impossible to change component. Component index "${r}" is not available. For default component, use null.`;const n={id:this.areaContentIdGen(),component:null===r?this.defaultComponent:this.availableComponents[r],...a&&{cfg:a},...i&&{name:i}};this.areasContent.splice(e,1,n)},setMode(e){if(null!==e&&!["split-vertical","split-horizontal","swap","delete"].includes(e))throw`Mode must be "split-vertical", "split-horizontal", "swap" or "delete", get ${e}. To exit any mode, call setMode(null)`;this.mode!==e&&(this.mode=e)},deleteArea(e){this.$refs.layout.deleteArea(e),this.areasContent.splice(e,1,void 0),this.$emit("area-deletted",{areaId:e})},splitArea(e,t,a=50,r=!0){if(!["vertical","horizontal"].includes(t))throw`Cannot split area this way. Only accept "vertical" or "horizontal", get "${t}".`;const i=this.$refs.layout.splitArea(e,t,a,r);this.areasContent[i]={id:this.areaContentIdGen(),component:this.defaultComponent},this.$nextTick(()=>{this.areasContent=Array.from(this.areasContent),this.$emit("area-splitted",{areaId:e,newAreaId:i,way:t,percentage:a,insertNewAfter:r})})},swapAreas(e,t){const a=this.areasContent[e],r=this.areasContent[t];this.areasContent.splice(t,1,a),this.areasContent.splice(e,1,r),this.$nextTick(()=>{this.reattachTeleports(),this.$emit("areas-swapped",{areaId1:e,areaId2:t})})},getAreaContentByName(e){return this.areasContent.filter(Boolean).filter(e=>e.name).find(t=>t.name===e)},onMouseLeave(){this.activeAreaId=null},setActiveAreaId(e){this.activeAreaId=e},getNextAreaId(){return this.areaIdGen()},getNextContainerId(){return this.containerIdGen()},getNextContainerKey(){return this.containerKeyGen()},reverseParseLayout(e){return"container"===e.type?this.reverseParseContainer(e):reverseParseArea(e)},reverseParseContainer(e){return{direction:e.direction,ratios:f(e.ratios),children:e.children.map(e=>"container"===e.type?this.reverseParseContainer(e):this.reverseParseArea(e))}},reverseParseArea(e){const t=this.areasContent[e.id],a=this.availableComponents.indexOf(t.component);return{componentIndex:-1===a?null:a,...t.cfg&&{cfg:t.cfg},...t.name&&{name:t.name}}},getAreas(){return this.$refs.layout.getAreaInstances()},getArea(e){return this.getAreas().find(t=>t.id===e)},onLayoutUpdated(){this.reattachTeleports()},reattachTeleports(){this.$refs.teleports.forEach(e=>e.attach())},updateContainerRatio(e,t){this.$refs.layout.updateContainerRatio(e,t)},getDOMAreaId(e){return`${this.areaIdPrefix}${e}`},renderTeleports(e){return e("div",{style:"display:none;"},this.areasContent.map((a,r)=>a?e(t,{props:{targetId:r},on:{mounted({childInstance:e}){a.instance=e}},ref:"teleports",refInFor:!0,key:"teleportArea"+a.id},[e(a.component,{...a.cfg})]):null).filter(Boolean))}},render(e){return e("div",{class:"areas",style:"cursor: var(--areas-global-cursor, unset); "+this.cursor,on:{mouseleave:this.onMouseLeave}},[this.renderTeleports(e),e(this.layoutComponent,{ref:"layout",on:{updated:this.onLayoutUpdated}})])}},"data-v-4f6d529d",void 0,void 0,!1,i,void 0,void 0)}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).areas=t()}(this,(function(){"use strict";function e(e,t,a,r,i,n,o,s,d,l){"boolean"!=typeof o&&(d=s,s=o,o=!1);const c="function"==typeof a?a.options:a;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),h)if(c.functional){const e=c.render;c.render=function(t,a){return h.call(a),e(t,a)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return a}const t=e({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"teleport"},[this._t("default")],2)},staticRenderFns:[]},void 0,{props:{targetId:{type:Number,require:!0}},inject:["areas"],provide(){const e=this;return{$area:{get id(){return e.targetId},get domElement(){return e.areas.getArea(e.targetId).$el},get component(){return e.areas.getArea(e.targetId)},get contentComponent(){return e.getChildrenComponent()},get areas(){return e.areas},get areaContent(){return this.areas.areasContent[e.targetId]},onChange(t){if("function"!=typeof t)throw`onAreaChange only accept function, get "${typeof t}"`;e.onAreaChangeHandlers.push(t)},offChange(t){e.onAreaChangeHandlers=e.onAreaChangeHandlers.filter(e=>e!==t)}}}},data:()=>({child:null,onAreaChangeHandlers:[]}),mounted(){this.$emit("mounted",{childInstance:this.getChildrenComponent()}),this.child=this.$el.firstChild,this.$watch("targetId",(e,t)=>{null!=t&&this.onAreaChangeHandlers.forEach(a=>a(e,t)),this.$el.contains(this.child)&&this.$el.removeChild(this.child),this.attach(!0)},{immediate:!0})},methods:{attach(){const e=document.getElementById(this.areas.getDOMAreaId(this.targetId));if(!e)throw`Teleport fails, no DOM element with id : "${this.targetId}".`;for(;e.hasChildNodes();)e.removeChild(e.firstChild);e.contains(this.child)||e.appendChild(this.child)},getChildrenComponent(){return this.$children[0]}}},void 0,!1,void 0,!1,void 0,void 0,void 0);var a={name:"area-component",props:{id:{type:Number,require:!0}},inject:["areas"],data:()=>({dragover:!1,dragging:!1,verticalSplitLeft:null,horizontalSplitTop:null}),computed:{isDraggable(){return this.areas.swapMode},isAreaActive(){return this.id===this.areas.activeAreaId},isOverlayDisplayed(){return!this.isNoMode},isSplitMode(){return this.isVerticalSplitMode||this.isHorizontalSplitMode},isVerticalSplitMode(){return this.areas.splitVerticalMode},isHorizontalSplitMode(){return this.areas.splitHorizontalMode},isDeleteMode(){return this.areas.deleteMode},isSwapMode(){return this.areas.swapMode},isNoMode(){return this.areas.noMode},cursor(){return this.isVerticalSplitMode?"var(--areas-vertical-split-cursor, col-resize)":this.isHorizontalSplitMode?"var(--areas-horizontal-split-cursor, row-resize)":this.isSwapMode&&!this.dragging?"var(--areas-drag-cursor, grab)":this.isSwapMode&&this.dragging?"var(--areas-dragging-cursor, grabbing)":this.isDeleteMode?"var(--areas-delete-cursor, crosshair)":void 0}},methods:{onDragStart(e){if(this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move",this.areas.cfg.dragImage){const t=this.areas.cfg.dragImage;e.dataTransfer.setDragImage(t.img,t.xOffset,t.yOffset)}},onDragEnd(){this.dragging=!1},onDrop(e){this.dragover=!1;const t=parseInt(e.dataTransfer.getData("areas-areaid"),10);this.areas.swapAreas(t,this.id)},onDragEnter(e){e.dataTransfer.types.includes("areas-areaid")&&(this.dragover=!0)},onDragOver(e){e.dataTransfer.types.includes("areas-areaid")&&(e.preventDefault(),e.dataTransfer.dropEffect="move")},onDragLeave(e){this.dragover=!1},onAreaClick(e){const{horizontalPercentage:t,verticalPercentage:a}=this.getLocalMouseCoordinates(e);this.isVerticalSplitMode?this.areas.splitArea(this.id,"vertical",a):this.isHorizontalSplitMode?this.areas.splitArea(this.id,"horizontal",t):this.isDeleteMode&&this.areas.deleteArea(this.id,e)},onMouseMove(e){const{verticalPercentage:t,horizontalPercentage:a}=this.getLocalMouseCoordinates(e);this.verticalSplitLeft=t,this.horizontalSplitTop=a},getLocalMouseCoordinates(e){const{height:t,width:a,x:r,y:i}=this.$el.getBoundingClientRect(),{clientX:n,clientY:o}=e,s=o-i,d=n-r;return{top:s,left:d,verticalPercentage:d/a*100,horizontalPercentage:s/t*100}},onMouseEnter(){this.isAreaActive||this.areas.setActiveAreaId(this.id)}}};const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const a=r?t.media||"default":e,i=o[a]||(o[a]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(a),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(a),r=i.element.childNodes;r[e]&&i.element.removeChild(r[e]),r.length?i.element.insertBefore(t,r[e]):i.element.appendChild(t)}}}(e,t)}let n;const o={};const s=e({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"area",class:{"area-active":e.isAreaActive},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:function(t){return t.target!==t.currentTarget?null:e.onDragStart(t)},drop:e.onDrop,dragend:e.onDragEnd,mouseenter:e.onMouseEnter,mousemove:e.onMouseMove}},[e.isOverlayDisplayed?a("div",{staticClass:"area-overlay",class:{"area-overlay-dragover":e.dragover&&!e.isAreaActive,"area-overlay-split":e.isAreaActive&&e.isSplitMode,"area-overlay-swap":e.isAreaActive&&e.isSwapMode,"area-overlay-delete":e.isAreaActive&&e.isDeleteMode},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:e.areas.zIndexStart}}):e._e(),e._v(" "),e.isSplitMode&&e.isAreaActive?a("div",{staticClass:"area-split",class:{"area-split-vertical":e.isVerticalSplitMode,"area-split-horizontal":e.isHorizontalSplitMode},style:(e.isVerticalSplitMode?"left":"top")+": "+(e.isVerticalSplitMode?e.verticalSplitLeft:e.horizontalSplitTop)+"%"}):e._e(),e._v(" "),a("div",{staticClass:"area-content",attrs:{id:e.areas.getDOMAreaId(e.id)}})])},staticRenderFns:[]},(function(e){e&&e("data-v-567930a7_0",{source:".area[data-v-567930a7]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-567930a7]{box-shadow:var(--areas-active-box-shadow,inset 0 0 2px grey)}.area-overlay[data-v-567930a7]{position:absolute;width:100%;height:100%;background-color:var(--areas-overlay-color,rgba(128,128,128,.2));outline-offset:var(--areas-overlay-outline-offset,unset);outline:var(--areas-overlay-outline,unset)}.area-overlay-split[data-v-567930a7]{background-color:var(--areas-overlay-split-color,transparent);outline-offset:var(--areas-overlay-split-outline-offset,unset);outline:var(--areas-overlay-split-outline,unset)}.area-overlay-swap[data-v-567930a7]{background-color:var(--areas-overlay-swap-color,transparent);outline-offset:var(--areas-overlay-swap-outline-offset,unset);outline:var(--areas-overlay-swap-outline,unset)}.area-overlay-dragover[data-v-567930a7]{background-color:var(--areas-overlay-swapover-color,rgba(0,100,0,.1));outline-offset:var(--areas-overlay-swapover-outline-offset,-10px);outline:var(--areas-overlay-swapover-outline,5px dashed rgba(0,100,0,.2))}.area-overlay-delete[data-v-567930a7]{background-color:var(--areas-overlay-delete-color,rgba(255,0,0,.1));outline-offset:var(--areas-overlay-delete-outline-offset,-7px);outline:var(--areas-overlay-delete-outline,3px dashed rgba(255,0,0,.2))}.area-split[data-v-567930a7]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-567930a7]{width:2px;height:100%}.area-split-horizontal[data-v-567930a7]{width:100%;height:2px}.area-content[data-v-567930a7]{overflow:auto;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-567930a7",!1,void 0,!1,i,void 0,void 0);function d(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function l(e,t){return e+t}const c=e({},(function(e){e&&e("data-v-a330e00c_0",{source:".areas-container[data-v-a330e00c]{display:flex;width:100%;height:100%}.areas-container__separator[data-v-a330e00c]{position:relative;flex-shrink:0}.areas-container__separator-margin[data-v-a330e00c]{position:absolute}",map:void 0,media:void 0})}),{name:"container",props:{id:{type:Number,require:!0},areasRatio:{type:Array,required:!0},direction:{type:String,default:"row",validator(e){if(["row","column"].includes(e))return!0;throw`Container direction property can only be "row" or "column", received : "${e}"`}},separatorThickness:{type:Number,default:2},separatorDetectionMargin:{type:Number,default:10},minRatio:{type:Number,default:0}},data:()=>({activeSeparatorIndex:null}),inject:{_areas:"areas"},computed:{areasWidth(){return this.areasRatio.map(e=>`${"row"===this.direction?"width":"height"}: max(0px, calc(${e}% - ${(this.areas.length-1)*this.separatorThickness/this.areas.length}px))`)},areas(){return this.$slots.default}},methods:{onSeparatorMouseDown(e,t){this.activeSeparatorIndex=e,t.preventDefault(),t.stopPropagation(),this._areas.cursor="--areas-global-cursor: "+("row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)"),document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",e=>this.stopDrag(e))},drag(e){const t="row"===this.direction?e.clientX:e.clientY,{x:a,y:r,width:i,height:n}=this.$el.getBoundingClientRect(),o=d((t-("row"===this.direction?a:r))/("row"===this.direction?i:n)*100,0,100),s=0===this.activeSeparatorIndex?0:this.areasRatio.slice(0,this.activeSeparatorIndex).reduce(l),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(l),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=d(o-s,this.minRatio,100-(s+c+this.minRatio)),h[this.activeSeparatorIndex+1]=100-h[this.activeSeparatorIndex]-(s+c),this._areas.updateContainerRatio(this.id,h)},stopDrag(e){this.activeSeparatorIndex=null,this._areas.cursor=null,document.removeEventListener("mousemove",this.drag)},renderSeparator(e,t){return e("div",{attrs:{"data-test":"separator"},class:"areas-container__separator",style:{["row"===this.direction?"width":"height"]:this.separatorThickness+"px",cursor:"row"===this.direction?"var(--areas-vertical-resize-cursor, ew-resize)":"var(--areas-horizontal-resize-cursor, ns-resize)","pointer-events":this._areas.noMode?"auto":"none"},on:{mousedown:e=>this.onSeparatorMouseDown(t,e)}},[e("div",{class:"areas-container__separator-margin",style:{zIndex:this._areas.zIndexStart,["row"===this.direction?"left":"top"]:-this.separatorDetectionMargin+"px",width:"row"===this.direction?2*this.separatorDetectionMargin+"px":"100%",height:"row"===this.direction?"100%":2*this.separatorDetectionMargin+"px"}})])}},render(e){const t=this.areas;if(!t||t.length<2)throw"Container can only work with at least 2 areas.";return e("div",{class:"areas-container",style:{flexDirection:this.direction}},t.map((a,r)=>(a.data.style=this.areasWidth[r],r!==t.length-1?[Object.assign({},a),this.renderSeparator(e,r)]:Object.assign({},a))).flat())}},"data-v-a330e00c",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return v(this.layout)},areas(){return g(this.layout)}},updated(){this.$emit("updated")},methods:{getLayout(){return this.layout},getContainerParent(e){return this.containers.length?this.containers.find(t=>t.children.includes(e)):null},getContainerAncestors(e){const t=[];let a=this.getContainerParent(e);for(;a;)t.push(a),a=this.getContainerParent(a);return t},getNextAreaId(){return this.areas.getNextAreaId()},getNextContainerId(){return this.areas.getNextContainerId()},getNextContainerKey(){return this.areas.getNextContainerKey()},getAreaContainer(e){return this.containers.find(t=>t.children.filter(e=>"area"===e.type).map(e=>e.id).includes(e))},getArea(e){return this.areas.find(t=>t.id===e)},getAreaInstances(){return this.$refs.areas},getContainer(e){return this.containers.find(t=>t.id===e)},updateContainerTreeKeys(e){e.key=this.getNextContainerKey(),this.getContainerAncestors(e).forEach(e=>e.key=this.getNextContainerKey())},updateContainerRatio(e,t){this.getContainer(e).ratios.splice(0,t.length,...t)},splitArea(e,t,a,r){const i=a,n=100-i,o="vertical"===t?"row":"column",s=this.getAreaContainer(e),d=this.getNextAreaId(),l={id:d,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),d=s.ratios[a],c=i/100*d,h=d-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,l),s.ratios.splice(a,1,c,h);else{const e=r?[t,l]:[l,t],d={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,d)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,l]:[l,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return d},mergeRatios(e,t){if(0===t){const t=e.ratios.shift(),a=e.ratios.shift();e.ratios.unshift(t+a);const r=e.children.shift();return this.updateContainerTreeKeys(e,!1),r}{const a=e.ratios[t],r=e.ratios[t-1],i=e.ratios.splice(t-1,2,a+r);return e.children.splice(t,1),i[0]}},makeArea:(e,t)=>e(s,{props:{id:t.id},ref:"areas",refInFor:!0}),makeContainer(e,a){const{children:r,direction:i="row",id:n,key:o}=a;return e(c,{props:{direction:i,areasRatio:a.ratios,id:n,...t},key:"areaContainer"+o},r.map(t=>"container"===t.type?this.makeContainer(e,t):this.makeArea(e,t)))},deleteContainer(e,t){const a=this.getContainerParent(e);e.children.splice(t,1);const r=e.children.pop();if(a){const t=a.children.findIndex(t=>"container"===t.type&&t.id===e.id);a.children.splice(t,1,r)}else this.layout=r},deleteArea(e){const t=this.getAreaContainer(e);if(!t)throw`Cannot delete area with id "${e}" because this is the root area.`;const a=t.children.filter(e=>"area"===e.type).find(t=>t.id===e),r=t.children.indexOf(a);if(t.children.length>2)this.mergeRatios(t,r),this.updateContainerTreeKeys(t,!1);else{const e=this.getContainerParent(t);this.deleteContainer(t,r),e&&this.updateContainerTreeKeys(e,!1)}}},render(e){return"container"===this.layout.type?this.makeContainer(e,this.layout):this.makeArea(e,this.layout)}});const u=e=>e.children.filter(e=>"area"===e.type),p=e=>e.children.filter(e=>"container"===e.type),g=e=>"container"===e.type?[...u(e),...p(e).map(g).flat()]:[e],v=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(v).flat()]:[e]};function f(e){const t=e.map(Math.round);return t[t.length-1]=100-t.slice(0,-1).reduce((e,t)=>e+t),t}function m(){const e=function*(){let e=1;for(;e<Number.MAX_SAFE_INTEGER;)yield e++;throw"Cannot generate more ids."}();return()=>e.next().value}return e({},(function(e){e&&e("data-v-4f6d529d_0",{source:".areas[data-v-4f6d529d]{background-color:var(--areas-separator-color,#2f4f4f);height:100%;width:100%;display:flex;overflow:hidden}",map:void 0,media:void 0})}),{name:"areas",props:{cfg:{type:Object,required:!0},zIndexStart:{type:Number,default:1}},provide(){return{areas:this}},data:()=>({mode:null,activeAreaId:null,areaIdPrefix:null,availableComponents:null,areasContent:null,layoutComponent:null,defaultComponent:null,containerIdGen:null,containerKeyGen:null,areaIdGen:null,areaContentIdGen:null,cursor:null}),computed:{size(){return this.areasContent&&this.areasContent.filter(Boolean).length},swapMode(){return"swap"===this.mode},deleteMode(){return"delete"===this.mode},splitVerticalMode(){return"split-vertical"===this.mode},splitHorizontalMode(){return"split-horizontal"===this.mode},noMode(){return null===this.mode}},created(){this.initGenerators(),this.areasContent=[],this.parseCfg(this.cfg)},methods:{initGenerators(){this.containerIdGen=m(),this.containerKeyGen=m(),this.areaIdGen=m(),this.areaContentIdGen=m()},parseCfg(e){this.separatorThickness=e.separatorThickness,this.separatorDetectionMargin=e.separatorDetectionMargin,this.areaMinRatio=e.areaMinRatio,this.areaIdPrefix=this.cfg.areaIdPrefix||"area-",this.defaultComponent=this.cfg.defaultComponent||{render:()=>null},this.availableComponents=e.components;const t=this.parseLayout(e.layout);this.buildLayout(t)},parseLayout(e){return e.children?this.parseContainer(e):this.parseArea(e)},parseContainer(e){if(e.ratios&&(e.ratios.length!==e.children.length||100!==e.ratios.reduce((e,t)=>e+t)))throw"Container is malformed. Each child must have a ratio and the sum of all ratios must be 100.";return{type:"container",id:this.containerIdGen(),key:this.containerKeyGen(),direction:e.direction||"row",ratios:e.ratios,children:e.children.map(e=>e.children?this.parseContainer(e):this.parseArea(e))}},parseArea(e){if(null!==e.componentIndex&&!this.availableComponents[e.componentIndex])throw`The component with index "${e.componentIndex}" does not exist. "componentIndex" in cfg.layout must be a valid index in the cfg.components array or null for default component.`;const t={type:"area",id:this.areaIdGen()},a={name:e.name,component:null!==e.componentIndex?this.availableComponents[e.componentIndex]:this.defaultComponent,cfg:e.cfg,id:this.areaContentIdGen()};return this.areasContent[t.id]=a,t},buildLayout(e){this.layoutComponent=h(e,{separatorThickness:this.separatorThickness,separatorDetectionMargin:this.separatorDetectionMargin,minRatio:this.areaMinRatio})},loadLayout(e){this.initGenerators(),this.areasContent=[],this.$nextTick(()=>this.buildLayout(this.parseLayout(e)))},getCurrentLayout(){const e=this.$refs.layout.getLayout();return this.reverseParseLayout(e)},changeAreaContent(e,t={}){if(!this.areasContent.map((e,t)=>e?t:null).filter(Boolean).includes(e))throw`Impossible to change component. Area id "${e}" does not exist.`;const{cfg:a,componentIndex:r,name:i}=t;if(null!==r&&!Object.keys(this.availableComponents).includes(String(r)))throw`Impossible to change component. Component index "${r}" is not available. For default component, use null.`;const n={id:this.areaContentIdGen(),component:null===r?this.defaultComponent:this.availableComponents[r],...a&&{cfg:a},...i&&{name:i}};this.areasContent.splice(e,1,n)},setMode(e){if(null!==e&&!["split-vertical","split-horizontal","swap","delete"].includes(e))throw`Mode must be "split-vertical", "split-horizontal", "swap" or "delete", get ${e}. To exit any mode, call setMode(null)`;this.mode!==e&&(this.mode=e)},deleteArea(e){this.$refs.layout.deleteArea(e),this.areasContent.splice(e,1,void 0),this.$emit("area-deletted",{areaId:e})},splitArea(e,t,a=50,r=!0){if(!["vertical","horizontal"].includes(t))throw`Cannot split area this way. Only accept "vertical" or "horizontal", get "${t}".`;const i=this.$refs.layout.splitArea(e,t,a,r);this.areasContent[i]={id:this.areaContentIdGen(),component:this.defaultComponent},this.$nextTick(()=>{this.areasContent=Array.from(this.areasContent),this.$emit("area-splitted",{areaId:e,newAreaId:i,way:t,percentage:a,insertNewAfter:r})})},swapAreas(e,t){const a=this.areasContent[e],r=this.areasContent[t];this.areasContent.splice(t,1,a),this.areasContent.splice(e,1,r),this.$nextTick(()=>{this.reattachTeleports(),this.$emit("areas-swapped",{areaId1:e,areaId2:t})})},getAreaContentByName(e){return this.areasContent.filter(Boolean).filter(e=>e.name).find(t=>t.name===e)},onMouseLeave(){this.activeAreaId=null},setActiveAreaId(e){this.activeAreaId=e},getNextAreaId(){return this.areaIdGen()},getNextContainerId(){return this.containerIdGen()},getNextContainerKey(){return this.containerKeyGen()},reverseParseLayout(e){return"container"===e.type?this.reverseParseContainer(e):reverseParseArea(e)},reverseParseContainer(e){return{direction:e.direction,ratios:f(e.ratios),children:e.children.map(e=>"container"===e.type?this.reverseParseContainer(e):this.reverseParseArea(e))}},reverseParseArea(e){const t=this.areasContent[e.id],a=this.availableComponents.indexOf(t.component);return{componentIndex:-1===a?null:a,...t.cfg&&{cfg:t.cfg},...t.name&&{name:t.name}}},getAreas(){return this.$refs.layout.getAreaInstances()},getArea(e){return this.getAreas().find(t=>t.id===e)},onLayoutUpdated(){this.reattachTeleports()},reattachTeleports(){this.$refs.teleports.forEach(e=>e.attach())},updateContainerRatio(e,t){this.$refs.layout.updateContainerRatio(e,t)},getDOMAreaId(e){return`${this.areaIdPrefix}${e}`},renderTeleports(e){return e("div",{style:"display:none;"},this.areasContent.map((a,r)=>a?e(t,{props:{targetId:r},on:{mounted({childInstance:e}){a.instance=e}},ref:"teleports",refInFor:!0,key:"teleportArea"+a.id},[e(a.component,{...a.cfg})]):null).filter(Boolean))}},render(e){return e("div",{class:"areas",style:"cursor: var(--areas-global-cursor, unset); "+this.cursor,on:{mouseleave:this.onMouseLeave}},[this.renderTeleports(e),e(this.layoutComponent,{ref:"layout",on:{updated:this.onLayoutUpdated}})])}},"data-v-4f6d529d",void 0,void 0,!1,i,void 0,void 0)}));

package.json

 {
   "name": "@bimdata/areas",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "A Vuejs Blender style area manager to create custom layouts.",
@@ -5,0 +5,0 @@ "main": "dist/areas.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56621

increased by0.14%

No dependency changes