@progress/kendo-vue-layout/splitter/Splitter.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("vue"),y=require("./SplitterPane.js"),E=require("./SplitterBar.js"),z=require("@progress/kendo-vue-common"),T=require("../package-metadata.js"),$={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},k=150,R=x.defineComponent({name:"KendoSplitter",props:{orientation:{type:String,default:"horizontal",validator:function(e){return["vertical","horizontal"].includes(e)}},panes:Array,defaultPanes:Array},mounted(){this.currentRtl=z.isRtl(this.$el)},emits:{change:null},computed:{isControlledState(){return this.$props.panes!==void 0},computedPanes(){return this.isControlledState?this.$props.panes:this.currentPanes}},created(){z.validatePackage(T.packageMetadata)},data(){return{currentRtl:!1,isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0,currentPanes:this.$props.defaultPanes||[]}},render(){const e=this.panesOptions(),n=z.classNames("k-widget","k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`);this.validatePanes(e);const i=function(s){return s.map(function(t,r){const a=z.templateRendering.call(this,t.content,z.getListeners.call(this));let o;const c=r*2,l=c+1;if(r+1<s.length){const d=s[r+1];o=x.createVNode(E.SplitterBar,{key:l,index:r,orientation:this.orientation,prev:t,next:d,onDrag:this.onBarDragResize,onToggle:this.onBarToggle,onKeyboardresize:this.onBarKeyboardResize,isRtl:this.currentRtl},null)}return[x.createVNode(y.SplitterPane,{key:c,containsSplitter:t.containsSplitter,size:t.size,min:t.min,max:t.max,resizable:t.resizable,collapsible:t.collapsible,collapsed:t.collapsed,scrollable:t.scrollable,keepMounted:t.keepMounted,content:a},null),o]},this)};return x.createVNode("div",{class:n},[i.call(this,e)])},methods:{validatePanes(e){if(!e.filter(i=>i.size===void 0).length)throw new Error("The Splitter should have at least one pane without a set size.")},mapPaneOptions(e){const n=this.orientation,i=[];for(let s=0;s<e.length;s++){let t=!1;this.isDragging&&this.dragIndex!==void 0&&(t=this.dragIndex===s||this.dragIndex+1===s),i.push({...$,orientation:n,overlay:t,...e[s]})}return i},onBarToggle(e,n){const s=this.panesOptions().map((t,r)=>{const a=t;return r===e?{...a,collapsed:!t.collapsed}:{...a}});this.$emit("change",{newState:s,isLast:!0,nativeEvent:n})},onBarDragResize(e,n,i,s,t){const r=new Date().getTime(),{pageX:a,pageY:o}=e,{prevElement:c,nextElement:l}=this.surroudingPanes(n);if(!c||!l)return;if(s){this.isDragging=!0,this.dragIndex=i,this.startTime=r,this.originalX=a,this.originalY=o,this.originalPrevSize=this.elementSize(c),this.originalNextSize=this.elementSize(l);return}const{originalPrevSize:u,originalNextSize:d,startTime:h,originalX:m,originalY:f}=this.$data;if(!s&&r-h<k){t&&this.resetDragState();return}let p;this.orientation==="vertical"?p=o-f:this.currentRtl?p=m-a:p=a-m,this.resize(i,i+1,u,d,p,t,e),t&&this.resetDragState()},onBarKeyboardResize(e,n,i,s){const{prevElement:t,nextElement:r}=this.surroudingPanes(e),a=this.elementSize(t),o=this.elementSize(r);this.resize(n,n+1,a,o,i,!0,s)},surroudingPanes(e){return{prevElement:e.previousElementSibling,nextElement:e.nextElementSibling}},containerSize(){return this.$el?this.elementSize(this.$el,!0):0},isPercent(e){return/%$/.test(e)},toPixels(e,n){let i=parseInt(e,10);return this.isPercent(e)&&(i=n*i/100),i},panesOptions(){return this.mapPaneOptions(this.computedPanes)},resetDragState(){this.isDragging=!1,this.dragIndex=void 0,this.startTime=0,this.originalX=0,this.originalY=0,this.originalPrevSize=0,this.originalNextSize=0},elementSize(e,n){const i=n?"client":"offset";return this.orientation==="vertical"?e[`${i}Height`]:e[`${i}Width`]},clamp(e,n,i){return Math.min(n,Math.max(e,i))},fixedSize(e){return e&&e.length>0},resize(e,n,i,s,t,r,a){const o=this.panesOptions(),c=o[e],l=o[n],u=i+s,d=this.containerSize(),h=g=>this.toPixels(g,d),m={index:e,initialSize:i,min:h(c.min)||u-h(l.max)||0,max:h(c.max)||u-h(l.min)||u},f={index:n,initialSize:s,min:h(l.min)||u-h(c.max)||0,max:h(l.max)||u-h(c.min)||u},p=(g,P)=>{const S=o[g.index],O=this.clamp(g.min,g.max,g.initialSize+P);return this.isPercent(S.size||"")?100*O/d+"%":O+"px"};let v,b;this.fixedSize(c.size)&&this.fixedSize(l.size)?(v=p(m,t),b=p(f,-t)):l.collapsible||this.fixedSize(l.size)?b=p(f,-t):v=p(m,t);const D=o.map((g,P)=>{const S=g;return P===e?{...S,size:v}:P===n?{...S,size:b}:{...S}});this.panesDuringOnChange=D,this.isControlledState||(this.currentPanes=D),this.$emit("change",{newState:D,isLast:r,nativeEvent:a}),this.panesDuringOnChange=void 0}}});exports.Splitter=R;