@progress/kendo-vue-inputs/slider/Slider.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 r=require("vue"),c=require("@progress/kendo-vue-buttons"),s=require("@progress/kendo-vue-common"),p=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),g=require("./SliderLabel.js"),m=require("../package-metadata.js"),n=require("@progress/kendo-svg-icons"),f=r.defineComponent({name:"KendoSlider",model:{event:"changemodel"},emits:{changemodel:null,"update:modelValue":null,change:null,blur:null,focus:null},props:{modelValue:{type:Number,default:void 0},defaultValue:{type:Number,default:void 0},name:String,buttons:Boolean,tabIndex:Number,disabled:Boolean,dir:String,step:Number,min:{type:Number,required:!0},max:{type:Number,required:!0},value:Number,vertical:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,ariaLabel:String},provide(){return{kendoMin:this.$props.min,kendoMax:this.$props.max,kendoVertical:this.$props.vertical}},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:void 0,currentFocused:!1,currentDir:"ltr"}},computed:{computedValue(){const e=this.$props.value!==void 0?this.$props.value:this.currentValue,{min:t,max:l}=this.$props;return e===void 0?e:Math.min(Math.max(e,t),l)},sliderTrack(){return this._sliderTrack}},created(){s.validatePackage(m.packageMetadata),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=this.$props.min,this.currentFocused=!1,this.currentDir=this.$props.dir},mounted(){if(this._sliderTrack=this.$refs.sliderTrack,this.$el&&(this.draggable=this.$refs.draggable),!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}},updated(){this.$el&&(this.draggable=this.$refs.draggable)},setup(){const e=r.ref(null),t=r.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:t}},render(){const e=p.provideLocalizationService(this),t=(this.computedValue-this.$props.min)/(this.$props.max-this.$props.min)*100,l=s.getDefaultSlots(this),{vertical:i}=this.$props,o=this.currentDir==="rtl"?i?n.caretAltUpIcon:n.caretAltLeftIcon:i?n.caretAltUpIcon:n.caretAltRightIcon,u=this.currentDir==="rtl"?i?n.caretAltDownIcon:n.caretAltRightIcon:i?n.caretAltDownIcon:n.caretAltLeftIcon,d=this.currentDir==="rtl"?i?"caret-alt-up":"caret-alt-left":i?"caret-alt-up":"caret-alt-right",h=this.currentDir==="rtl"?i?"caret-alt-down":"caret-alt-right":i?"caret-alt-down":"caret-alt-left";return r.createVNode("div",{dir:this.currentDir,id:this.$props.id,style:this.$props.style,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDown,"aria-label":this.$props.ariaLabel,class:s.classNames("k-slider",{"k-focus":this.currentFocused,"k-disabled":this.$props.disabled,"k-slider-horizontal":!this.$props.vertical,"k-slider-vertical":this.$props.vertical},this.$props.className)},[this.$props.buttons&&r.createVNode(c.Button,{type:"button",tabIndex:-1,icon:h,svgIcon:u,style:{position:"relative"},rounded:"full",class:"k-button-decrease",title:e.toLanguageString(a.sliderDecreaseValue,a.messages[a.sliderDecreaseValue]),onClick:this.decrement},null),r.createVNode(s.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,ref:"draggable"},{default:()=>[r.createVNode("div",{class:"k-slider-track-wrap",style:{touchAction:"none"}},[l&&r.createVNode("ul",{class:"k-reset k-slider-items"},[l]),r.createVNode("div",{class:"k-slider-track",ref:"sliderTrack"},[r.createVNode("div",{class:"k-slider-selection",style:this.$props.vertical?{height:t+"%"}:{width:t+"%"}},null),r.createVNode("span",{class:"k-draghandle",role:"slider",tabindex:"0","aria-valuenow":this.computedValue,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-valuetext":this.computedValue.toString(),"aria-disabled":this.$props.disabled?"true":void 0,title:e.toLanguageString(a.sliderDragTitle,a.messages[a.sliderDragTitle]),style:this.$props.vertical?{bottom:t+"%",zIndex:1}:{[this.currentDir==="rtl"?"right":"left"]:t+"%",zIndex:1}},null)])])]}),this.$props.buttons&&r.createVNode(c.Button,{type:"button",tabIndex:-1,icon:d,svgIcon:o,rounded:"full",style:{position:"relative"},class:"k-button-increase",title:e.toLanguageString(a.sliderIncreaseValue,a.messages[a.sliderIncreaseValue]),onClick:this.increment},null)])},methods:{focus(){this.$el&&this.$el.focus()},isLabel(e){let t=e;for(;t;){if(t.getAttribute(g.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},onFocus(e){this.currentFocused=!0,this.$emit("focus",e)},onBlur(e){this.currentFocused=!1,this.$emit("blur",e)},onKeyDown(e){let t;e.keyCode===s.Keys.left||e.keyCode===s.Keys.down?t=this.currentValue-(this.$props.step||0):e.keyCode===s.Keys.right||e.keyCode===s.Keys.up?t=this.currentValue+(this.$props.step||0):e.keyCode===s.Keys.home?t=this.$props.min:e.keyCode===s.Keys.end&&(t=this.$props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},decrement(e){e.preventDefault(),this.change(e,this.currentValue-(this.$props.step||0))},increment(e){e.preventDefault(),this.change(e,this.currentValue+(this.$props.step||0))},dragStart(e){this.isLabel(e.originalEvent.target)||(e.isTouch&&e.originalEvent.preventDefault(),this.drag(e))},dragOver(e){e.originalEvent.preventDefault(),this.drag(e)},drag(e){const t=this.draggable.element.getBoundingClientRect(),l=this.$props.vertical?t.bottom-e.clientY:this.currentDir==="rtl"?t.right-e.clientX:e.clientX-t.left,i=this.$props.vertical?t.height:t.width,o=l/i;this.change(e,this.$props.min+o*(this.$props.max-this.$props.min))},change(e,t){t=Math.min(Math.max(t,this.$props.min),this.$props.max),this.currentValue=t,this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",{event:e,value:t,component:this,target:{name:this.$props.name,value:t}})}}});exports.Slider=f;