primevue/splitter/splitter.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.splitter=function(e,t){"use strict";var s={name:"Splitter",emits:["resizestart","resizeend"],props:{layout:{type:String,default:"horizontal"},gutterSize:{type:Number,default:4},stateKey:{type:String,default:null},stateStorage:{type:String,default:"session"},step:{type:Number,default:5}},dragging:!1,mouseMoveListener:null,mouseUpListener:null,touchMoveListener:null,touchEndListener:null,size:null,gutterElement:null,startPos:null,prevPanelElement:null,nextPanelElement:null,nextPanelSize:null,prevPanelSize:null,panelSizes:null,prevPanelIndex:null,timer:null,data:()=>({prevSize:null}),mounted(){if(this.panels&&this.panels.length){let t=!1;if(this.isStateful()&&(t=this.restoreState()),!t){let t=[...this.$el.children].filter((t=>e.DomHandler.hasClass(t,"p-splitter-panel"))),s=[];this.panels.map(((e,i)=>{let n=(e.props&&e.props.size?e.props.size:null)||100/this.panels.length;s[i]=n,t[i].style.flexBasis="calc("+n+"% - "+(this.panels.length-1)*this.gutterSize+"px)"})),this.panelSizes=s,this.prevSize=parseFloat(s[0]).toFixed(4)}}},beforeUnmount(){this.clear(),this.unbindMouseListeners()},methods:{isSplitterPanel:e=>"SplitterPanel"===e.type.name,onResizeStart(t,s,i){this.gutterElement=t.currentTarget||t.target.parentElement,this.size=this.horizontal?e.DomHandler.getWidth(this.$el):e.DomHandler.getHeight(this.$el),i||(this.dragging=!0,this.startPos="horizontal"===this.layout?t.pageX||t.changedTouches[0].pageX:t.pageY||t.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,i?(this.prevPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.prevPanelElement,!0):e.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?e.DomHandler.getOuterWidth(this.nextPanelElement,!0):e.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=s,this.$emit("resizestart",{originalEvent:t,sizes:this.panelSizes}),e.DomHandler.addClass(this.gutterElement,"p-splitter-gutter-resizing"),e.DomHandler.addClass(this.$el,"p-splitter-resizing")},onResize(e,t,s){let i,n,r;s?this.horizontal?(n=100*(this.prevPanelSize+t)/this.size,r=100*(this.nextPanelSize-t)/this.size):(n=100*(this.prevPanelSize-t)/this.size,r=100*(this.nextPanelSize+t)/this.size):(i=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size,n=this.prevPanelSize+i,r=this.nextPanelSize-i),this.prevSize=parseFloat(n).toFixed(4),this.validateResize(n,r)&&(this.prevPanelElement.style.flexBasis="calc("+n+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=n,this.panelSizes[this.prevPanelIndex+1]=r)},onResizeEnd(t){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:t,sizes:this.panelSizes}),e.DomHandler.removeClass(this.gutterElement,"p-splitter-gutter-resizing"),e.DomHandler.removeClass(this.$el,"p-splitter-resizing"),this.clear()},repeat(e,t,s){this.onResizeStart(e,t,!0),this.onResize(e,s,!0)},setTimer(e,t,s){this.clearTimer(),this.timer=setTimeout((()=>{this.repeat(e,t,s)}),40)},clearTimer(){this.timer&&clearTimeout(this.timer)},onGutterKeyUp(){this.clearTimer(),this.onResizeEnd()},onGutterKeyDown(e,t){switch(e.code){case"ArrowLeft":"horizontal"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowRight":"horizontal"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault();break;case"ArrowDown":"vertical"===this.layout&&this.setTimer(e,t,-1*this.step),e.preventDefault();break;case"ArrowUp":"vertical"===this.layout&&this.setTimer(e,t,this.step),e.preventDefault()}},onGutterMouseDown(e,t){this.onResizeStart(e,t),this.bindMouseListeners()},onGutterTouchStart(e,t){this.onResizeStart(e,t),this.bindTouchListeners(),e.preventDefault()},onGutterTouchMove(e){this.onResize(e),e.preventDefault()},onGutterTouchEnd(e){this.onResizeEnd(e),this.unbindTouchListeners(),e.preventDefault()},bindMouseListeners(){this.mouseMoveListener||(this.mouseMoveListener=e=>this.onResize(e),document.addEventListener("mousemove",this.mouseMoveListener)),this.mouseUpListener||(this.mouseUpListener=e=>{this.onResizeEnd(e),this.unbindMouseListeners()},document.addEventListener("mouseup",this.mouseUpListener))},bindTouchListeners(){this.touchMoveListener||(this.touchMoveListener=e=>this.onResize(e.changedTouches[0]),document.addEventListener("touchmove",this.touchMoveListener)),this.touchEndListener||(this.touchEndListener=e=>{this.resizeEnd(e),this.unbindTouchListeners()},document.addEventListener("touchend",this.touchEndListener))},validateResize(t,s){let i=e.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>t)return!1;let n=e.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&n&&n>s)},unbindMouseListeners(){this.mouseMoveListener&&(document.removeEventListener("mousemove",this.mouseMoveListener),this.mouseMoveListener=null),this.mouseUpListener&&(document.removeEventListener("mouseup",this.mouseUpListener),this.mouseUpListener=null)},unbindTouchListeners(){this.touchMoveListener&&(document.removeEventListener("touchmove",this.touchMoveListener),this.touchMoveListener=null),this.touchEndListener&&(document.removeEventListener("touchend",this.touchEndListener),this.touchEndListener=null)},clear(){this.dragging=!1,this.size=null,this.startPos=null,this.prevPanelElement=null,this.nextPanelElement=null,this.prevPanelSize=null,this.nextPanelSize=null,this.gutterElement=null,this.prevPanelIndex=null},isStateful(){return null!=this.stateKey},getStorage(){switch(this.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(this.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},saveState(){this.getStorage().setItem(this.stateKey,JSON.stringify(this.panelSizes))},restoreState(){const t=this.getStorage().getItem(this.stateKey);if(t){return this.panelSizes=JSON.parse(t),[...this.$el.children].filter((t=>e.DomHandler.hasClass(t,"p-splitter-panel"))).forEach(((e,t)=>{e.style.flexBasis="calc("+this.panelSizes[t]+"% - "+(this.panels.length-1)*this.gutterSize+"px)"})),!0}return!1}},computed:{containerClass(){return["p-splitter p-component","p-splitter-"+this.layout]},panels(){const e=[];return this.$slots.default().forEach((t=>{this.isSplitterPanel(t)?e.push(t):t.children instanceof Array&&t.children.forEach((t=>{this.isSplitterPanel(t)&&e.push(t)}))})),e},gutterStyle(){return this.horizontal?{width:this.gutterSize+"px"}:{height:this.gutterSize+"px"}},horizontal(){return"horizontal"===this.layout}}};const i=["onMousedown","onTouchstart","onTouchmove","onTouchend"],n=["aria-orientation","aria-valuenow","onKeydown"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-splitter {\n    display: flex;\n    flex-wrap: nowrap;\n}\n.p-splitter-vertical {\n    flex-direction: column;\n}\n.p-splitter-panel {\n    flex-grow: 1;\n}\n.p-splitter-panel-nested {\n    display: flex;\n}\n.p-splitter-panel .p-splitter {\n    flex-grow: 1;\n    border: 0 none;\n}\n.p-splitter-gutter {\n    flex-grow: 0;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: col-resize;\n}\n.p-splitter-horizontal.p-splitter-resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    height: 24px;\n    width: 100%;\n}\n.p-splitter-horizontal > .p-splitter-gutter {\n    cursor: col-resize;\n}\n.p-splitter-vertical.p-splitter-resizing {\n    cursor: row-resize;\n    user-select: none;\n}\n.p-splitter-vertical > .p-splitter-gutter {\n    cursor: row-resize;\n}\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    width: 24px;\n    height: 100%;\n}\n"),s.render=function(e,s,r,l,o,a){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(a.containerClass)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.panels,((e,l)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:l},[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e),{tabindex:"-1"})),l!==a.panels.length-1?(t.openBlock(),t.createElementBlock("div",{key:0,class:"p-splitter-gutter",role:"separator",tabindex:"-1",onMousedown:e=>a.onGutterMouseDown(e,l),onTouchstart:e=>a.onGutterTouchStart(e,l),onTouchmove:e=>a.onGutterTouchMove(e,l),onTouchend:e=>a.onGutterTouchEnd(e,l)},[t.createElementVNode("div",{class:"p-splitter-gutter-handle",tabindex:"0",style:t.normalizeStyle(a.gutterStyle),"aria-orientation":r.layout,"aria-valuenow":o.prevSize,onKeyup:s[0]||(s[0]=(...e)=>a.onGutterKeyUp&&a.onGutterKeyUp(...e)),onKeydown:e=>a.onGutterKeyDown(e,l)},null,44,n)],40,i)):t.createCommentVNode("",!0)],64)))),128))],2)},s}(primevue.utils,Vue);