New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@bimdata/areas

Package Overview
Dependencies
Maintainers
4
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bimdata/areas - npm Package Compare versions

Comparing version 0.1.0 to 0.4.0

.github/workflows/ci.yml
.github/workflows/publish.yml
assets/areas-logo.png
assets/areas-simple-example.png
assets/areas-title.png
assets/delete.gif
assets/resize.gif
assets/split.gif
assets/swap.gif

27

cypress/integration/test.js

@@ -34,7 +34,4 @@ const AREA_SELECTOR = "[data-test=area]";

cy.get(AREA_SELECTOR).contains("component content 1");
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should(el => {
expect(el).to.have.length(1);
expect(el[0].clientWidth).to.equal(WIDTH);
expect(el[0].clientHeight).to.equal(HEIGHT);
});
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should('have.length', 1).invoke("innerWidth").should("equal", WIDTH);
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).invoke("innerHeight").should("equal", HEIGHT);
});

@@ -101,7 +98,7 @@

cy.get("@areas").invoke("changeAreaComponent", 1, { componentIndex: 1 });
cy.get("@areas").invoke("changeAreaContent", 1, { componentIndex: 1 });
cy.get(AREA_SELECTOR).contains("component content 2");
cy.get("@areas").invoke("changeAreaComponent", 1, { componentIndex: null });
cy.get("@areas").invoke("changeAreaContent", 1, { componentIndex: null });

@@ -172,7 +169,4 @@ cy.get(AREA_SELECTOR).contains(DEFAULT_COMPONENT_TEXT);

it('Should display the default component if componentIndex = null', () => {
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should(el => {
expect(el).to.have.length(1);
expect(el[0].clientWidth).to.equal(WIDTH);
expect(el[0].clientHeight).to.equal(HEIGHT);
});
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should('have.length', 1).invoke("innerWidth").should("equal", WIDTH);
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).invoke("innerHeight").should("equal", HEIGHT);
});

@@ -203,7 +197,4 @@ });

cy.get(AREA_SELECTOR).contains("CUSTOM DEFAULT COMPONENT");
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should(el => {
expect(el).to.have.length(1);
expect(el[0].clientWidth).to.equal(WIDTH);
expect(el[0].clientHeight).to.equal(HEIGHT);
});
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).should('have.length', 1).invoke("innerWidth").should("equal", WIDTH);
cy.get(AREA_SELECTOR).find(`#${ID_PREFIX}1`).invoke("innerHeight").should("equal", HEIGHT);
});

@@ -840,3 +831,3 @@ });

cy.get("@areas").invoke("splitArea", 1, "vertical", 20);
cy.get("@areas").invoke("changeAreaComponent", 1, { componentIndex: null });
cy.get("@areas").invoke("changeAreaContent", 1, { componentIndex: null });
cy.get("@areas").invoke("swapAreas", 1, 2);

@@ -843,0 +834,0 @@ cy.get("@areas").invoke("deleteArea", 2);

2

dist/areas.esm.js

@@ -1,1 +0,1 @@

function e(e,t,a,r,i,n,o,s,l,d){"boolean"!=typeof o&&(l=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,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,d(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},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){this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move"},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,l=n-r;return{top:s,left:l,verticalPercentage:l/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},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:"unset"},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:e.onDragStart,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}}):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-539cd983_0",{source:".area[data-v-539cd983]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-539cd983]{box-shadow:inset 0 0 2px grey}.area-overlay[data-v-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-539cd983]{width:2px;height:100%}.area-split-horizontal[data-v-539cd983]{width:100%;height:2px}.area-content[data-v-539cd983]{overflow:scroll;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-539cd983",!1,void 0,!1,i,void 0,void 0);function l(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function d(e,t){return e+t}const c=e({},(function(e){e&&e("data-v-2a6861ba_0",{source:".container[data-v-2a6861ba]{display:flex;width:100%;height:100%}.container-separator[data-v-2a6861ba]{position:relative;flex-shrink:0}.container-separator-margin[data-v-2a6861ba]{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=>!!["row","column"].includes(e)||(console.error(`Container direction property can only be "row" or "column", received : "${e}"`),!1)},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=l((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(d),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(d),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=l(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+2,["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-2a6861ba",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return g(this.layout)},areas(){return v(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),l=this.getNextAreaId(),d={id:l,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),l=s.ratios[a],c=i/100*l,h=l-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,d),s.ratios.splice(a,1,c,h);else{const e=r?[t,d]:[d,t],l={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,l)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,d]:[d,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return l},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),v=e=>"container"===e.type?[...u(e),...p(e).map(v).flat()]:[e],g=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(g).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-11e35826_0",{source:".areas[data-v-11e35826]{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:0}},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:{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)},changeAreaComponent(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)},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)})},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)},getComponentByName(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-11e35826",void 0,void 0,!1,i,void 0,void 0);export default y;
function e(e,t,a,r,i,n,o,s,l,d){"boolean"!=typeof o&&(l=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,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,d(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},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){this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move"},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,l=n-r;return{top:s,left:l,verticalPercentage:l/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:e.onDragStart,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-29d33300_0",{source:".area[data-v-29d33300]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-29d33300]{box-shadow:inset 0 0 2px grey}.area-overlay[data-v-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-29d33300]{width:2px;height:100%}.area-split-horizontal[data-v-29d33300]{width:100%;height:2px}.area-content[data-v-29d33300]{overflow:scroll;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-29d33300",!1,void 0,!1,i,void 0,void 0);function l(e,t=-1/0,a=1/0){return Math.min(Math.max(e,t),a)}function d(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=l((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(d),c=this.activeSeparatorIndex===this.areas.length-2?0:this.areasRatio.slice(this.activeSeparatorIndex+2).reduce(d),h=Array.from(this.areasRatio);h[this.activeSeparatorIndex]=l(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 g(this.layout)},areas(){return v(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),l=this.getNextAreaId(),d={id:l,type:"area"};if(s){const t=s.children.filter(e=>"area"===e.type).find(t=>t.id===e),a=s.children.indexOf(t),l=s.ratios[a],c=i/100*l,h=l-c;if(s.direction===o)s.children.splice(a+(r?1:0),0,d),s.ratios.splice(a,1,c,h);else{const e=r?[t,d]:[d,t],l={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e};s.children.splice(a,1,l)}this.updateContainerTreeKeys(s)}else{const e=r?[this.layout,d]:[d,this.layout];this.layout={type:"container",id:this.getNextContainerId(),key:this.getNextContainerKey(),direction:o,ratios:[i,n],children:e}}return l},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),v=e=>"container"===e.type?[...u(e),...p(e).map(v).flat()]:[e],g=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(g).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-487e0b68_0",{source:".areas[data-v-487e0b68]{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:{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)},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)})},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)},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-487e0b68",void 0,void 0,!1,i,void 0,void 0);export default y;

2

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},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){this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move"},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},style:{cursor:e.cursor,zIndex:e.dragover?e.areas.zIndexStart+2:e.isAreaActive?e.areas.zIndexStart+1:"unset"},attrs:{"data-test":"area",draggable:e.isDraggable},on:{click:e.onAreaClick,dragover:e.onDragOver,dragleave:e.onDragLeave,dragenter:e.onDragEnter,dragstart:e.onDragStart,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}}):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-539cd983_0",{source:".area[data-v-539cd983]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-539cd983]{box-shadow:inset 0 0 2px grey}.area-overlay[data-v-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{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-539cd983]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-539cd983]{width:2px;height:100%}.area-split-horizontal[data-v-539cd983]{width:100%;height:2px}.area-content[data-v-539cd983]{overflow:scroll;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-539cd983",!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-2a6861ba_0",{source:".container[data-v-2a6861ba]{display:flex;width:100%;height:100%}.container-separator[data-v-2a6861ba]{position:relative;flex-shrink:0}.container-separator-margin[data-v-2a6861ba]{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=>!!["row","column"].includes(e)||(console.error(`Container direction property can only be "row" or "column", received : "${e}"`),!1)},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+2,["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-2a6861ba",void 0,void 0,!1,i,void 0,void 0);var h=(e,t)=>({name:"Layout",inject:["areas"],data:()=>({layout:e}),computed:{containers(){return g(this.layout)},areas(){return v(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),v=e=>"container"===e.type?[...u(e),...p(e).map(v).flat()]:[e],g=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(g).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-11e35826_0",{source:".areas[data-v-11e35826]{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:0}},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:{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)},changeAreaComponent(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)},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)})},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)},getComponentByName(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-11e35826",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},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){this.dragging=!0,e.dataTransfer.setData("areas-areaid",String(this.id)),e.dataTransfer.effectAllowed="move"},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:e.onDragStart,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-29d33300_0",{source:".area[data-v-29d33300]{background-color:var(--areas-background-color,#f5f5f5);position:relative;width:100%;height:100%}.area-active[data-v-29d33300]{box-shadow:inset 0 0 2px grey}.area-overlay[data-v-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{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-29d33300]{pointer-events:none;position:absolute;background-color:var(--areas-split-line-color,#fff)}.area-split-vertical[data-v-29d33300]{width:2px;height:100%}.area-split-horizontal[data-v-29d33300]{width:100%;height:2px}.area-content[data-v-29d33300]{overflow:scroll;width:100%;height:100%}",map:void 0,media:void 0})}),a,"data-v-29d33300",!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 g(this.layout)},areas(){return v(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),v=e=>"container"===e.type?[...u(e),...p(e).map(v).flat()]:[e],g=e=>{if("area"===e.type)return[];const t=p(e);return t.length?[e,...t.map(g).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-487e0b68_0",{source:".areas[data-v-487e0b68]{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:{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)},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)})},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)},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-487e0b68",void 0,void 0,!1,i,void 0,void 0)}));

11

package.json
{
"name": "@bimdata/areas",
"version": "0.1.0",
"description": "A Vuejs Blender style multi resizable/editable area manager to create custom layouts.",
"version": "0.4.0",
"description": "A Vuejs Blender style area manager to create custom layouts.",
"main": "dist/areas.js",

@@ -9,5 +9,5 @@ "module": "dist/areas.esm.js",

"scripts": {
"test": "npm run test:unit & npm run test:e2e",
"test": "npm run test:unit && npm run test:e2e",
"test:unit": "jest",
"test:e2e": "npm run build:prod && start-server-and-test 'npm run serve -- -p 3030' 3030 cy:run",
"test:e2e": "start-server-and-test 'npm run serve -- -p 3030' 3030 cy:run",
"test:e2e-dev": "npm run build:prod && start-server-and-test 'npm run serve -- -p 3030' 3030 cy:open",

@@ -21,4 +21,3 @@ "serve": "http-server -c-1",

"prebuild:prod": "rm -rf dist",
"dev": "npm run build:dev -- --watch",
"prepublishOnly": "npm run build:prod"
"dev": "npm run build:dev -- --watch"
},

@@ -25,0 +24,0 @@ "author": "BIMData.io",

240

README.md
<p align="center"><img width="150" src="./areas-logo.png" alt="Areas logo"></p>
<p align="center"><img width="200" src="./areas-title.png" alt="Areas logo"></p>
<p align="center"><img width="150" src="./assets/areas-logo.png" alt="Areas logo"></p>
<p align="center"><img width="200" src="./assets/areas-title.png" alt="Areas title"></p>
<p align="center"> A <a href="https://vuejs.org/">Vue.js</a> <a href="https://www.blender.org/"> Blender</a> <a href="https://docs.blender.org/manual/en/latest/interface/window_system/areas.html">style</a> area manager to create custom layouts.</p>
Build for produciton :
<p align="center">
<img width="300" height="150" src="./assets/split.gif" alt="Areas split">
<img width="300" height="150" src="./assets/resize.gif" alt="Areas resize">
</p>
<p align="center">
<img width="300" height="150" src="./assets/swap.gif" alt="Areas swap">
<img width="300" height="150" src="./assets/delete.gif" alt="Areas delete">
</p>
Areas aims to provide a flexible and customizable environment to create custom UI layouts using [Vue.js](https://vuejs.org/).
It is possible to **split** (vertical/horizontal), **resize**, **swap** and **delete** areas as needed. Current layout can be **saved** and **loaded** later. Components in areas are **cached** and not rerendered when layout is edited. Areas width and height are **percentage ratio based** so resizing the viewport will resize areas accordingly. Styles can be customized using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
![CI](https://github.com/bimdata/areas/workflows/CI/badge.svg)
# Install
npm :
```
npm run build:prod
npm i @bimdata/areas
```
# Usage
Import Areas on your Vue.js app :
```javascript
import Areas from "@bimdata/areas";
```
Use it in your component :
```html
<template>
<div class="yourComponent">
<Areas :cfg="areasCfg" />
</div>
</template>
```
Configuration example :
```javascript
const areasCfg = {
// The available components that will be used in areas.
components: [
{ render: h => h("div", "Content I") },
{ render: h => h("div", "Content II") },
{ render: h => h("div", "Content III") }
],
// The layout divided in areas, composed by areas or area containers.
layout: {
// area container
direction: "row",
ratios: [20, 80],
children: [
{
// area
componentIndex: 0,
},
{
// area container
direction: "column",
ratios: [40, 60],
children: [
{
// area
componentIndex: 1,
},
{
// area
componentIndex: 2
}
]
}
]
}
};
```
Result :
<img width="400" src="./assets/areas-simple-example.png" alt="Areas simple example">
# API
## Configuration
Areas needs an object as cfg props :
### `cfg` :
| Property | Type | Description |
| :--- | :--- | :--- |
| `components` | `array` | **Required**. An array of Vue.js components. |
| `layout` | `array` | **Required**. An [`area`](#area) or an [`area container`](#area-container). |
| `separatorThickness` | `number` | **Optional**. Default to 2. The thickness of separators. |
| `separatorDetectionMargin` | `number` | **Optional**. Default to 10. Margin of the detection region on separators. This helps user to get the separator with the mouse even if it is small. |
| `areaMinRatio` | `number` | **Optional**. Default to 0. The minimal ratio of an area. |
| `defaultComponent` | `object` | **Optional**. Default to a component that render nothing. The default component that will be used when splitting window or usin componentIndex = null. |
### `area` :
| Property | Type | Description |
| :--- | :--- | :--- |
| `componentIndex` | `number` | **Required**. A valid index of the `cfg.components` array, or null for the default component. |
| `name` | `string` | **Optional**. A name that can be used to retrieve area content. |
| `cfg` | `object` | **Optional**. A [data object](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth) used to pass props, event listener... to the component instance. |
### `area container` :
| Property | Type | Description |
| :--- | :--- | :--- |
| `ratios` | `array` | **Required**. An array of integer the represent the precentage of the corresponding children in the container. Length must be > 1. |
| `children` | `array` | **Required**. An array of [`area`](#area) or [`area container`](#area-container). Must have the same length as ratios. |
| `direction` | `string` | **Optional**. Default to `row`. Can be changed to `column`. The way areas will be displayed in the container. |
## Modes
Areas component instance can be set with *modes* :
- `split-vertical` : a vertical bar is displayed on top of hovered (active) area. Clicking will split area vertically.
- `split-horizontal` : a horizontal bar is displayed on top of hovered (active) area. Clicking will split area horizontally.
- `swap` : areas can be dragged and dropped to swap them.
- `delete` : clicking area delete it. (it is impossible to delete the last remaining area)
To set mode, use `setMode` on areas instance : (example using [ref](https://vuejs.org/v2/api/#ref))
```javascript
this.$refs.areas.setMode(mode); // mode must be "split-vertical", "split-horizontal", "swap", "delete" or null to exit modes
```
When mode is different from null, overlays will be displayed on areas. To change overlays style, use [corresponding css variables](#style).
## Public Methods
Methods on Areas instance :
| Name | Arguments | Description |
| :--- | :--- | :--- |
| `getCurrentLayout()` | none | Get the current layout. |
| `loadLayout(layout)` | `layout`: **Required**. A layout object get by calling getCurrentLayout. | Load a saved layout. |
| `changeAreaContent(areaId, contentCfg)` | `areaId`: **Required**. The id of the area to change the content. `contentCfg`: **Required**. An [`area content`](#area) object. | Change the content of an area. |
| `setMode(mode)` | `mode`: **Required**. See [Modes](#Modes) | Change Areas mode. |
| `deleteArea(areaId)` | `areaId`: **Required**. | Delete area with this id. |
| `splitArea(areaId, way, percentage = 50, insertNewAfter = true)` | `areaId`: **Required**. `way`: **Required**. "vertical" or "horizontal". `percentage`, the percentage from left or top. `insertNewAfter`, if the new area will be inserted after or before the splitted one. | Split area. |
| `swapAreas(areaId1, areaId2)` | `areaId1` & `areaId2`: **Required** numbers | Swap areas. |
| `getAreaContentByName(name)` | `name`: **Required** string | Get [`area content`](#area) by name. |
## Style
It is possible to customize areas style by declaring css variables :
```css
/* Cursors */
--areas-delete-cursor some-valid-cursor;
--areas-vertical-resize-cursor some-valid-cursor;
--areas-horizontal-resize-cursor some-valid-cursor;
--areas-vertical-split-cursor: some-valid-cursor;
--areas-horizontal-split-cursor: some-valid-cursor;
--areas-drag-cursor some-valid-cursor;
--areas-dragging-cursor: some-valid-cursor;
--areas-delete-cursor some-valid-cursor;
/* Areas basics */
--areas-background-color: color;
--areas-separator-color: color;
--areas-split-line-color: color;
/* Areas modes overlays */
--areas-overlay-color: color;
--areas-overlay-outline-offset: outline-offset-px;
--areas-overlay-outline: css-outline-properties;
--areas-overlay-split-color: color;
--areas-overlay-split-outline-offset: outline-offset-px;
--areas-overlay-split-outline: css-outline-properties;
--areas-overlay-delete-color: color;
--areas-overlay-delete-outline-offset: outline-offset-px;
--areas-overlay-delete-outline: css-outline-properties;
--areas-overlay-swap-color: color;
--areas-overlay-swap-outline-offset: outline-offset-px;
--areas-overlay-swap-outline: css-outline-properties;
--areas-overlay-swapover-color: color;
--areas-overlay-swapover-outline-offset: outline-offset-px;
--areas-overlay-swapover-outline: css-outline-properties;
```
[css-outline-properties](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
[some-valid-cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
## Area injection
Each child component in an area will be able to get some area utilities from the area it leaves in by [injecting](https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection) $area :
```javascript
{
// Your Vue.js component
inject: ["$area"]
}
```
The `$area` object will provide the following properties :
| Property | Description |
| :--- | :--- |
| id | The id of the area. |
| domElement | The domElement of the area. |
| component | The Vue.js component instance of the area. |
| contentComponent | The Vue.js component instance of the first child of the area. (It is different from area.$children[0] due to implementation) |
| areas | The Areas Vue.js component instance. |
| onChange(handler) | A method that accepts a callback (handler) as parameter. The handler will be called when area change (swap) with newAreaId and OldAreaId as parameters. |
| offChange(handler) | A method that accepts a callback (handler) as parameter to stop listening to area change with this handler. |
# Development
Build on change for development and serve :

@@ -16,6 +229,23 @@ ```

Test :
All Tests :
```
npm run build:prod
npm run test
```
Unit tests :
```
npm run build:prod
npm run test:unit
```
E2e tests :
```
npm run build:prod
npm run test:e2e
```
To e2e test on development (this will build in production mode and open cypress instead of running it) :
```
npm run test:e2e-dev
```

4

unitTest/test.js

@@ -169,3 +169,3 @@ import { shallowMount } from '@vue/test-utils';

layout: {
name: 'targetComponent',
name: 'targetArea',
componentIndex: 0,

@@ -183,3 +183,3 @@ cfg: {

wrapper.vm.getComponentByName("targetComponent").cfg.props.text = "text updated";
wrapper.vm.getAreaContentByName("targetArea").cfg.props.text = "text updated";
await Vue.nextTick();

@@ -186,0 +186,0 @@ expect(wrapper.html()).toMatchSnapshot();

areas-logo.png
areas-title.png
index.html

Sorry, the diff of this file is not supported yet

src/Area.vue

Sorry, the diff of this file is not supported yet

src/Areas.vue

Sorry, the diff of this file is not supported yet

src/Container.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc