primevue/splitter/splitter.esm.min.js

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

import e from"primevue/basecomponent";import{DomHandler as t,ObjectUtils as s}from"primevue/utils";import{openBlock as i,createElementBlock as n,mergeProps as r,Fragment as l,renderList as o,createBlock as h,resolveDynamicComponent as a,createElementVNode as u,createCommentVNode as p}from"vue";var d={name:"Splitter",extends:e,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.hasClass(e,"p-splitter-panel"))),s=[];this.panels.map(((t,i)=>{let n=(t.props&&t.props.size?t.props.size:null)||100/this.panels.length;s[i]=n,e[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(e,s,i){this.gutterElement=e.currentTarget||e.target.parentElement,this.size=this.horizontal?t.getWidth(this.$el):t.getHeight(this.$el),i||(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,i?(this.prevPanelSize=this.horizontal?t.getOuterWidth(this.prevPanelElement,!0):t.getOuterHeight(this.prevPanelElement,!0),this.nextPanelSize=this.horizontal?t.getOuterWidth(this.nextPanelElement,!0):t.getOuterHeight(this.nextPanelElement,!0)):(this.prevPanelSize=100*(this.horizontal?t.getOuterWidth(this.prevPanelElement,!0):t.getOuterHeight(this.prevPanelElement,!0))/this.size,this.nextPanelSize=100*(this.horizontal?t.getOuterWidth(this.nextPanelElement,!0):t.getOuterHeight(this.nextPanelElement,!0))/this.size),this.prevPanelIndex=s,this.$emit("resizestart",{originalEvent:e,sizes:this.panelSizes}),t.addClass(this.gutterElement,"p-splitter-gutter-resizing"),t.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(e){this.isStateful()&&this.saveState(),this.$emit("resizeend",{originalEvent:e,sizes:this.panelSizes}),t.removeClass(this.gutterElement,"p-splitter-gutter-resizing"),t.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,t){let i=s.getVNodeProp(this.panels[0],"minSize");if(this.panels[0].props&&i&&i>e)return!1;let n=s.getVNodeProp(this.panels[1],"minSize");return!(this.panels[1].props&&n&&n>t)},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.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 c=["onMousedown","onTouchstart","onTouchmove","onTouchend"],m=["aria-orientation","aria-valuenow","onKeydown"];!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"),d.render=function(e,t,s,d,g,z){return i(),n("div",r({class:z.containerClass},e.ptm("root")),[(i(!0),n(l,null,o(z.panels,((o,d)=>(i(),n(l,{key:d},[(i(),h(a(o),{tabindex:"-1"})),d!==z.panels.length-1?(i(),n("div",r({key:0,class:"p-splitter-gutter",role:"separator",tabindex:"-1",onMousedown:e=>z.onGutterMouseDown(e,d),onTouchstart:e=>z.onGutterTouchStart(e,d),onTouchmove:e=>z.onGutterTouchMove(e,d),onTouchend:e=>z.onGutterTouchEnd(e,d)},e.ptm("gutter")),[u("div",r({class:"p-splitter-gutter-handle",tabindex:"0",style:z.gutterStyle,"aria-orientation":s.layout,"aria-valuenow":g.prevSize,onKeyup:t[0]||(t[0]=(...e)=>z.onGutterKeyUp&&z.onGutterKeyUp(...e)),onKeydown:e=>z.onGutterKeyDown(e,d)},e.ptm("gutterhandler")),null,16,m)],16,c)):p("",!0)],64)))),128))],16)};export{d as default};