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

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 a=require("vue"),l=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-intl"),g=require("../messages/main.js"),s=require("@progress/kendo-svg-icons"),f=a.defineComponent({name:"KendoSplitterBar",emits:{drag:null,toggle:null,keyboardresize:null},props:{orientation:{type:String,default:"vertical",validator:function(t){return["vertical","horizontal"].includes(t)}},index:Number,prev:Object,next:Object,isRtl:Boolean},created(){this.draggable=null},computed:{isStatic(){const{prev:t,next:r}=this.$props,e=t.resizable&&r.resizable,o=t.collapsible||r.collapsible;return!e&&!o},isDraggable(){const{prev:t,next:r}=this.$props,e=t.resizable&&r.resizable,o=t.collapsed||r.collapsed;return!!e&&!o},isHorizontal(){return this.$props.orientation==="horizontal"}},inject:{kendoLocalizationService:{default:null}},data(){return{focused:!1}},mounted(){this.$el&&(this.draggable=this.$refs.draggable)},render(){const t=this.isDraggable,r=this.isStatic,e=this.isHorizontal,o=l.classNames("k-splitbar",{"k-focus":this.focused,"k-splitbar-horizontal":e,"k-splitbar-vertical":!e,"k-splitbar-draggable-horizontal":e&&t,"k-splitbar-draggable-vertical":!e&&t,"k-splitbar-static-horizontal":e&&r,"k-splitbar-static-vertical":!e&&r}),n=this.previousArrowName(e),i=this.previousArrowSVG(e),h=this.nextArrowName(e),p=this.nextArrowSVG(e),u=d.provideLocalizationService(this).toLanguageString(g.splitterPaneLabel,g.messages[g.splitterPaneLabel]);return a.createVNode(l.Draggable,{onPress:c=>this.onDrag(c,!0,!1),onDrag:c=>this.onDrag(c,!1,!1),onRelease:c=>this.onDrag(c,!1,!0),ref:"draggable"},{default:()=>[a.createVNode("div",{tabindex:r?-1:0,role:"separator",class:o,style:{touchAction:"none"},onFocusin:this.onFocus,onFocusout:this.onBlur,onDblclick:this.onToggle,onKeydown:this.onKeyDown,"aria-label":u,"aria-orientation":this.isHorizontal?"vertical":"horizontal"},[this.prev.collapsible&&a.createVNode("span",{class:"k-collapse-prev",onClick:this.onPrevToggle},[a.createVNode(l.Icon,{name:n,icon:i,size:"xsmall"},null)]),a.createVNode("div",{class:"k-resize-handle"},null),this.next.collapsible&&a.createVNode("span",{class:"k-collapse-next",onClick:this.onNextToggle},[a.createVNode(l.Icon,{name:h,icon:p,size:"xsmall"},null)])])]})},methods:{onDrag(t,r,e){const o=t,{index:n}=this.$props,i=this.draggable&&this.draggable.element;!e&&o&&o.originalEvent.preventDefault(),i&&!this.isStatic&&this.isDraggable&&this.$emit("drag",o,i,n,r,e)},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onToggle(t){const{index:r,prev:e,next:o}=this.$props;(e.collapsible||o.collapsible)&&this.$emit("toggle",e.collapsible?r:r+1,t)},onPrevToggle(t){const{index:r,prev:e}=this.$props;e.collapsible&&this.$emit("toggle",r,t)},onNextToggle(t){const{index:r,next:e}=this.$props;e.collapsible&&this.$emit("toggle",r+1,t)},onKeyDown(t){const r=t&&t.keyCode,e=this.isHorizontal,{index:o}=this.$props,n=this.draggable&&this.draggable.element,i=(h,p,u)=>{t.preventDefault(),this.$emit("keyboardresize",h,p,u,t)};n&&(r===l.Keys.enter?(t.preventDefault(),this.onToggle(t)):this.isDraggable&&(e&&r===l.Keys.left?i(n,o,-10):e&&r===l.Keys.right?i(n,o,10):!e&&r===l.Keys.up?i(n,o,-10):!e&&r===l.Keys.down&&i(n,o,10)))},previousArrowName(t){const{prev:r}=this.$props,e=r.collapsed;return t&&!e?this.isRtl?"chevron-right":"chevron-left":t&&e?this.isRtl?"chevron-left":"chevron-right":!t&&!e?"chevron-up":!t&&e?"chevron-down":""},previousArrowSVG(t){const{prev:r}=this.$props,e=r.collapsed;if(t&&!e)return this.isRtl?s.chevronRightIcon:s.chevronLeftIcon;if(t&&e)return this.isRtl?s.chevronLeftIcon:s.chevronRightIcon;if(!t&&!e)return s.chevronUpIcon;if(!t&&e)return s.chevronDownIcon},nextArrowName(t){const{next:r}=this.$props,e=r.collapsed;return t&&!e?this.isRtl?"chevron-left":"chevron-right":t&&e?this.isRtl?"chevron-right":"chevron-left":!t&&!e?"chevron-down":!t&&e?"chevron-up":""},nextArrowSVG(t){const{next:r}=this.$props,e=r.collapsed;if(t&&!e)return this.isRtl?s.chevronLeftIcon:s.chevronRightIcon;if(t&&e)return this.isRtl?s.chevronRightIcon:s.chevronLeftIcon;if(!t&&!e)return s.chevronDownIcon;if(!t&&e)return s.chevronUpIcon}}});exports.SplitterBar=f;