@progress/kendo-vue-layout/splitter/SplitterBar.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 n=require("vue"),i=require("@progress/kendo-vue-common"),u=require("@progress/kendo-vue-intl"),d=require("../messages/main.js"),o=require("@progress/kendo-svg-icons"),b=n.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:s}=this.$props,e=t.resizable&&s.resizable,l=t.collapsible||s.collapsible;return!e&&!l},isDraggable(){const{prev:t,next:s}=this.$props,e=t.resizable&&s.resizable,l=t.collapsed||s.collapsed;return!!e&&!l},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,s=this.isStatic,e=this.isHorizontal,l=i.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&&s,"k-splitbar-static-vertical":!e&&s}),r=this.previousArrowName(e),a=this.previousArrowSVG(e),p=this.nextArrowName(e),g=this.nextArrowSVG(e),h=u.provideLocalizationService(this).toLanguageString(d.splitterPaneLabel,d.messages[d.splitterPaneLabel]);return n.createVNode(i.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:()=>[n.createVNode("div",{tabindex:s?-1:0,role:"separator",class:l,style:{touchAction:"none"},onFocusin:this.onFocus,onFocusout:this.onBlur,onDblclick:this.onToggle,onKeydown:this.onKeyDown,"aria-label":h,"aria-orientation":this.isHorizontal?"vertical":"horizontal"},[this.prev.collapsible&&n.createVNode("span",{class:"k-collapse-prev",onClick:this.onPrevToggle},[n.createVNode(i.Icon,{name:r,icon:a,size:"xsmall"},null)]),n.createVNode("div",{class:"k-resize-handle"},null),this.next.collapsible&&n.createVNode("span",{class:"k-collapse-next",onClick:this.onNextToggle},[n.createVNode(i.Icon,{name:p,icon:g,size:"xsmall"},null)])])]})},methods:{onDrag(t,s,e){const l=t,{index:r}=this.$props,a=this.draggable&&this.draggable.element;!e&&l&&l.originalEvent.preventDefault(),a&&!this.isStatic&&this.isDraggable&&this.$emit("drag",l,a,r,s,e)},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onToggle(t){const{index:s,prev:e,next:l}=this.$props;(e.collapsible||l.collapsible)&&this.$emit("toggle",e.collapsible?s:s+1,t)},onPrevToggle(t){const{index:s,prev:e}=this.$props;e.collapsible&&this.$emit("toggle",s,t)},onNextToggle(t){const{index:s,next:e}=this.$props;e.collapsible&&this.$emit("toggle",s+1,t)},onKeyDown(t){const s=t&&t.keyCode,e=this.isHorizontal,{index:l}=this.$props,r=this.draggable&&this.draggable.element,a=(p,g,h)=>{t.preventDefault(),this.$emit("keyboardresize",p,g,h,t)};r&&(s===i.Keys.enter?(t.preventDefault(),this.onToggle(t)):this.isDraggable&&(e&&s===i.Keys.left?a(r,l,-10):e&&s===i.Keys.right?a(r,l,10):!e&&s===i.Keys.up?a(r,l,-10):!e&&s===i.Keys.down&&a(r,l,10)))},previousArrowName(t){const{prev:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?"caret-alt-right":"caret-alt-left":t&&e?this.isRtl?"caret-alt-left":"caret-alt-right":!t&&!e?"caret-alt-up":!t&&e?"caret-alt-down":""},previousArrowSVG(t){const{prev:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?o.caretAltRightIcon:o.caretAltLeftIcon:t&&e?this.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon:!t&&!e?o.caretAltUpIcon:!t&&e?o.caretAltDownIcon:void 0},nextArrowName(t){const{next:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?"caret-alt-left":"caret-alt-right":t&&e?this.isRtl?"caret-alt-right":"caret-alt-left":!t&&!e?"caret-alt-down":!t&&e?"caret-alt-up":""},nextArrowSVG(t){const{next:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon:t&&e?this.isRtl?o.caretAltRightIcon:o.caretAltLeftIcon:!t&&!e?o.caretAltDownIcon:!t&&e?o.caretAltUpIcon:void 0}}});exports.SplitterBar=b;