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,s){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Splitter",extends:n(e).default,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 e=!1;if(this.isStateful()&&(e=this.restoreState()),!e){let e=[...this.$el.children].filter((e=>t.DomHandler.hasClass(e,"p-splitter-panel"))),s=[];this.panels.map(((t,n)=>{let i=(t.props&&t.props.size?t.props.size:null)||100/this.panels.length;s[n]=i,e[n].style.flexBasis="calc("+i+"% - "+(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(e,s,n){this.gutterElement=e.currentTarget||e.target.parentElement,this.size=this.horizontal?t.DomHandler.getWidth(this.$el):t.DomHandler.getHeight(this.$el),n||(this.dragging=!0,this.startPos="horizontal"===this.layout?e.pageX||e.changedTouches[0].pageX:e.pageY||e.changedTouches[0].pageY),this.prevPanelElement=this.gutterElement.previousElementSibling,this.nextPanelElement=this.gutterElement.nextElementSibling,n?(this.prevPanelSize=this.horizontal?t.DomHandler.getOuterWidth(this.prevPanelElement,!0):t.DomHandler.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?t.DomHandler.getOuterWidth(this.nextPanelElement,!0):t.DomHandler.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?t.DomHandler.getOuterWidth(this.prevPanelElement,!0):t.DomHandler.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?t.DomHandler.getOuterWidth(this.nextPanelElement,!0):t.DomHandler.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=s,this.$emit("resizestart",{originalEvent:e,sizes:this.panelSizes}),t.DomHandler.addClass(this.gutterElement,"p-splitter-gutter-resizing"),t.DomHandler.addClass(this.$el,"p-splitter-resizing")},onResize(e,t,s){let n,i,r;s?this.horizontal?(i=100*(this.prevPanelSize+t)/this.size,r=100*(this.nextPanelSize-t)/this.size):(i=100*(this.prevPanelSize-t)/this.size,r=100*(this.nextPanelSize+t)/this.size):(n=this.horizontal?100*e.pageX/this.size-100*this.startPos/this.size:100*e.pageY/this.size-100*this.startPos/this.size,i=this.prevPanelSize+n,r=this.nextPanelSize-n),this.prevSize=parseFloat(i).toFixed(4),this.validateResize(i,r)&&(this.prevPanelElement.style.flexBasis="calc("+i+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.nextPanelElement.style.flexBasis="calc("+r+"% - "+(this.panels.length-1)*this.gutterSize+"px)",this.panelSizes[this.prevPanelIndex]=i,this.panelSizes[this.prevPanelIndex+1]=r)},onResizeEnd(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),t.DomHandler.removeClass(this.gutterElement,"p-splitter-gutter-resizing"),t.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(e,s){let n=t.ObjectUtils.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&n&&n>e)return!1;let i=t.ObjectUtils.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&i&&i>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 e=this.getStorage().getItem(this.stateKey);if(e){return this.panelSizes=JSON.parse(e),[...this.$el.children].filter((e=>t.DomHandler.hasClass(e,"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 r=["onMousedown","onTouchstart","onTouchmove","onTouchend"],l=["aria-orientation","aria-valuenow","onKeydown"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===s&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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"),i.render=function(e,t,n,i,o,a){return s.openBlock(),s.createElementBlock("div",s.mergeProps({class:a.containerClass},e.ptm("root")),[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(a.panels,((i,h)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:h},[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i),{tabindex:"-1"})),h!==a.panels.length-1?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,class:"p-splitter-gutter",role:"separator",tabindex:"-1",onMousedown:e=>a.onGutterMouseDown(e,h),onTouchstart:e=>a.onGutterTouchStart(e,h),onTouchmove:e=>a.onGutterTouchMove(e,h),onTouchend:e=>a.onGutterTouchEnd(e,h)},e.ptm("gutter")),[s.createElementVNode("div",s.mergeProps({class:"p-splitter-gutter-handle",tabindex:"0",style:a.gutterStyle,"aria-orientation":n.layout,"aria-valuenow":o.prevSize,onKeyup:t[0]||(t[0]=(...e)=>a.onGutterKeyUp&&a.onGutterKeyUp(...e)),onKeydown:e=>a.onGutterKeyDown(e,h)},e.ptm("gutterhandler")),null,16,l)],16,r)):s.createCommentVNode("",!0)],64)))),128))],16)},i}(primevue.basecomponent,primevue.utils,Vue);