primevue 3.15.0 → 3.16.2

package/slider/Slider.d.ts

@@ -48,10 +48,18 @@ export interface SliderProps {
      * When present, it specifies that the component should be disabled.
      */
     disabled?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
-    ariaLabelledBy?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Used to define a string that labels the element.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface SliderSlots {

package/slider/Slider.vue

@@ -1,12 +1,12 @@
 <template>
     <div :class="containerClass" @click="onBarClick">
         <span class="p-slider-range" :style="rangeStyle"></span>
-        <span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" tabindex="0"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" tabindex="0"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" tabindex="0"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
+        <span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex"
+            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
+        <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event, 0)" :tabindex="tabindex"
+            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
+        <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex"
+            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
     </div>
 </template>
 
@@ -42,9 +42,17 @@ export default {
 			type: Boolean,
 			default: false
         },
-        ariaLabelledBy: {
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
             type: String,
 			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     dragging: false,
@@ -175,40 +183,44 @@ export default {
         },
         onKeyDown(event, index) {
             this.handleIndex = index;
-            switch (event.which) {
-                //down
-                case 40:
-                    if (this.vertical) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+            switch (event.code) {
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                    this.decrementValue(event, index);
+                    event.preventDefault();
                 break;
-                //up
-                case 38:
-                    if (this.vertical) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'ArrowUp':
+                case 'ArrowRight':
+                    this.incrementValue(event, index);
+                    event.preventDefault();
                 break;
-                //left
-                case 37:
-                    if (this.horizontal) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageDown':
+                    this.decrementValue(event, index, true);
+                    event.preventDefault();
                 break;
-                //right
-                case 39:
-                    if (this.horizontal) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageUp':
+                    this.incrementValue(event, index, true);
+                    event.preventDefault();
                 break;
+
+                case 'Home':
+                    this.updateModel(event, this.min);
+                    event.preventDefault();
+                break;
+
+                case 'End':
+                    this.updateModel(event, this.max);
+                    event.preventDefault();
+                break;
+
                 default:
                 break;
             }
         },
-        decrementValue(event, index) {
+        decrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -219,13 +231,15 @@ export default {
             else {
                 if (this.step)
                     newValue = this.modelValue - this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue - 10;
                 else
                     newValue = this.modelValue - 1;
             }
             this.updateModel(event, newValue);
             event.preventDefault();
         },
-        incrementValue(event, index) {
+        incrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -236,6 +250,8 @@ export default {
             else {
                 if (this.step)
                     newValue = this.modelValue + this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue + 10;
                 else
                     newValue = this.modelValue + 1;
             }

package/slider/slider.cjs.js

@@ -32,9 +32,17 @@ var script = {
 			type: Boolean,
 			default: false
         },
-        ariaLabelledBy: {
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
             type: String,
 			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     dragging: false,
@@ -165,38 +173,41 @@ var script = {
         },
         onKeyDown(event, index) {
             this.handleIndex = index;
-            switch (event.which) {
-                //down
-                case 40:
-                    if (this.vertical) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+            switch (event.code) {
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                    this.decrementValue(event, index);
+                    event.preventDefault();
+                break;
+
+                case 'ArrowUp':
+                case 'ArrowRight':
+                    this.incrementValue(event, index);
+                    event.preventDefault();
                 break;
-                //up
-                case 38:
-                    if (this.vertical) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageDown':
+                    this.decrementValue(event, index, true);
+                    event.preventDefault();
                 break;
-                //left
-                case 37:
-                    if (this.horizontal) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageUp':
+                    this.incrementValue(event, index, true);
+                    event.preventDefault();
                 break;
-                //right
-                case 39:
-                    if (this.horizontal) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'Home':
+                    this.updateModel(event, this.min);
+                    event.preventDefault();
+                break;
+
+                case 'End':
+                    this.updateModel(event, this.max);
+                    event.preventDefault();
                 break;
             }
         },
-        decrementValue(event, index) {
+        decrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -207,13 +218,15 @@ var script = {
             else {
                 if (this.step)
                     newValue = this.modelValue - this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue - 10;
                 else
                     newValue = this.modelValue - 1;
             }
             this.updateModel(event, newValue);
             event.preventDefault();
         },
-        incrementValue(event, index) {
+        incrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -224,6 +237,8 @@ var script = {
             else {
                 if (this.step)
                     newValue = this.modelValue + this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue + 10;
                 else
                     newValue = this.modelValue + 1;
             }
@@ -320,9 +335,9 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
-const _hoisted_2 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
-const _hoisted_3 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
+const _hoisted_1 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
+const _hoisted_2 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
+const _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
@@ -343,12 +358,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchend: _cache[2] || (_cache[2] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[3] || (_cache[3] = $event => ($options.onMouseDown($event))),
           onKeydown: _cache[4] || (_cache[4] = $event => ($options.onKeyDown($event))),
-          tabindex: "0",
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_1))
       : vue.createCommentVNode("", true),
     ($props.range)
@@ -360,13 +377,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchmove: _cache[6] || (_cache[6] = $event => ($options.onDrag($event))),
           onTouchend: _cache[7] || (_cache[7] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[8] || (_cache[8] = $event => ($options.onMouseDown($event, 0))),
-          onKeydown: _cache[9] || (_cache[9] = $event => ($options.onKeyDown($event))),
-          tabindex: "0",
+          onKeydown: _cache[9] || (_cache[9] = $event => ($options.onKeyDown($event, 0))),
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue ? $props.modelValue[0] : null,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_2))
       : vue.createCommentVNode("", true),
     ($props.range)
@@ -379,12 +398,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchend: _cache[12] || (_cache[12] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[13] || (_cache[13] = $event => ($options.onMouseDown($event, 1))),
           onKeydown: _cache[14] || (_cache[14] = $event => ($options.onKeyDown($event, 1))),
-          tabindex: "0",
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue ? $props.modelValue[1] : null,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_3))
       : vue.createCommentVNode("", true)
   ], 2))

package/slider/slider.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ariaLabelledBy:{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,n=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-n)/this.barHeight;let a=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=a-e;t<0?a=e+Math.ceil(a/this.step-e/this.step)*this.step:t>0&&(a=e+Math.floor(a/this.step-e/this.step)*this.step)}else a=Math.floor(a);this.updateModel(e,a)},updateModel(e,t){let i,n=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;n<this.min?n=this.min:n>=e&&(n=e),i[0]=n,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;n>this.max?n=this.max:n<=e&&(n=e),i[0]=i[0]||this.min,i[1]=n}else n<this.min?n=this.min:n>this.max&&(n=this.max),i=n;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.which){case 40:this.vertical&&(this.decrementValue(e,t),e.preventDefault());break;case 38:this.vertical&&(this.incrementValue(e,t),e.preventDefault());break;case 37:this.horizontal&&(this.decrementValue(e,t),e.preventDefault());break;case 39:this.horizontal&&(this.incrementValue(e,t),e.preventDefault())}},decrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:this.modelValue-1,this.updateModel(e,i),e.preventDefault()},incrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:this.modelValue+1,this.updateModel(e,i),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const n=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"],a=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"],l=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-slider {\n\tposition: relative;\n}\n.p-slider .p-slider-handle {\n\tposition: absolute;\n\tcursor: -webkit-grab;\n\tcursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n\tposition: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n\theight: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n\theight: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,h){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(h.containerClass),onClick:i[15]||(i[15]=(...e)=>h.onBarClick&&h.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(h.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(h.handleStyle),onTouchstart:i[0]||(i[0]=e=>h.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>h.onDrag(e)),onTouchend:i[2]||(i[2]=e=>h.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>h.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>h.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":s.ariaLabelledBy},null,44,n)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(h.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>h.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>h.onDrag(e)),onTouchend:i[7]||(i[7]=e=>h.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>h.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>h.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":s.ariaLabelledBy},null,44,a)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(h.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>h.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>h.onDrag(e)),onTouchend:i[12]||(i[12]=e=>h.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>h.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>h.onKeyDown(e,1)),tabindex:"0",role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":s.ariaLabelledBy},null,44,l)):t.createCommentVNode("",!0)],2)},module.exports=i;
+"use strict";var e=require("primevue/utils"),t=require("vue"),i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const a=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],n=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n\tposition: relative;\n}\n.p-slider .p-slider-handle {\n\tposition: absolute;\n\tcursor: -webkit-grab;\n\tcursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n\tposition: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n\theight: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n\theight: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:i[15]||(i[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(d.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(d.handleStyle),onTouchstart:i[0]||(i[0]=e=>d.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>d.onDrag(e)),onTouchend:i[2]||(i[2]=e=>d.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>d.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>d.onKeyDown(e)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,a)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(d.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>d.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>d.onDrag(e)),onTouchend:i[7]||(i[7]=e=>d.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>d.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>d.onKeyDown(e,0)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,n)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(d.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>d.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>d.onDrag(e)),onTouchend:i[12]||(i[12]=e=>d.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>d.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>d.onKeyDown(e,1)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,l)):t.createCommentVNode("",!0)],2)},module.exports=i;

package/slider/slider.esm.js

@@ -30,9 +30,17 @@ var script = {
 			type: Boolean,
 			default: false
         },
-        ariaLabelledBy: {
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
             type: String,
 			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     dragging: false,
@@ -163,38 +171,41 @@ var script = {
         },
         onKeyDown(event, index) {
             this.handleIndex = index;
-            switch (event.which) {
-                //down
-                case 40:
-                    if (this.vertical) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+            switch (event.code) {
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                    this.decrementValue(event, index);
+                    event.preventDefault();
+                break;
+
+                case 'ArrowUp':
+                case 'ArrowRight':
+                    this.incrementValue(event, index);
+                    event.preventDefault();
                 break;
-                //up
-                case 38:
-                    if (this.vertical) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageDown':
+                    this.decrementValue(event, index, true);
+                    event.preventDefault();
                 break;
-                //left
-                case 37:
-                    if (this.horizontal) {
-                        this.decrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'PageUp':
+                    this.incrementValue(event, index, true);
+                    event.preventDefault();
                 break;
-                //right
-                case 39:
-                    if (this.horizontal) {
-                        this.incrementValue(event, index);
-                        event.preventDefault();
-                    }
+
+                case 'Home':
+                    this.updateModel(event, this.min);
+                    event.preventDefault();
+                break;
+
+                case 'End':
+                    this.updateModel(event, this.max);
+                    event.preventDefault();
                 break;
             }
         },
-        decrementValue(event, index) {
+        decrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -205,13 +216,15 @@ var script = {
             else {
                 if (this.step)
                     newValue = this.modelValue - this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue - 10;
                 else
                     newValue = this.modelValue - 1;
             }
             this.updateModel(event, newValue);
             event.preventDefault();
         },
-        incrementValue(event, index) {
+        incrementValue(event, index, pageKey = false) {
             let newValue;
             if (this.range) {
                 if (this.step)
@@ -222,6 +235,8 @@ var script = {
             else {
                 if (this.step)
                     newValue = this.modelValue + this.step;
+                else if (!this.step && pageKey)
+                    newValue = this.modelValue + 10;
                 else
                     newValue = this.modelValue + 1;
             }
@@ -318,9 +333,9 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
-const _hoisted_2 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
-const _hoisted_3 = ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby"];
+const _hoisted_1 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
+const _hoisted_2 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
+const _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
@@ -341,12 +356,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchend: _cache[2] || (_cache[2] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[3] || (_cache[3] = $event => ($options.onMouseDown($event))),
           onKeydown: _cache[4] || (_cache[4] = $event => ($options.onKeyDown($event))),
-          tabindex: "0",
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_1))
       : createCommentVNode("", true),
     ($props.range)
@@ -358,13 +375,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchmove: _cache[6] || (_cache[6] = $event => ($options.onDrag($event))),
           onTouchend: _cache[7] || (_cache[7] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[8] || (_cache[8] = $event => ($options.onMouseDown($event, 0))),
-          onKeydown: _cache[9] || (_cache[9] = $event => ($options.onKeyDown($event))),
-          tabindex: "0",
+          onKeydown: _cache[9] || (_cache[9] = $event => ($options.onKeyDown($event, 0))),
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue ? $props.modelValue[0] : null,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_2))
       : createCommentVNode("", true),
     ($props.range)
@@ -377,12 +396,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onTouchend: _cache[12] || (_cache[12] = $event => ($options.onDragEnd($event))),
           onMousedown: _cache[13] || (_cache[13] = $event => ($options.onMouseDown($event, 1))),
           onKeydown: _cache[14] || (_cache[14] = $event => ($options.onKeyDown($event, 1))),
-          tabindex: "0",
+          tabindex: $props.tabindex,
           role: "slider",
           "aria-valuemin": $props.min,
           "aria-valuenow": $props.modelValue ? $props.modelValue[1] : null,
           "aria-valuemax": $props.max,
-          "aria-labelledby": $props.ariaLabelledBy
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          "aria-orientation": $props.orientation
         }, null, 44, _hoisted_3))
       : createCommentVNode("", true)
   ], 2))

package/slider/slider.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";import{openBlock as t,createElementBlock as i,normalizeClass as a,createElementVNode as n,normalizeStyle as l,createCommentVNode as s}from"vue";var o={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ariaLabelledBy:{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.getWindowScrollLeft(),this.initY=t.top+e.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.which){case 40:this.vertical&&(this.decrementValue(e,t),e.preventDefault());break;case 38:this.vertical&&(this.incrementValue(e,t),e.preventDefault());break;case 37:this.horizontal&&(this.decrementValue(e,t),e.preventDefault());break;case 39:this.horizontal&&(this.incrementValue(e,t),e.preventDefault())}},decrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:this.modelValue-1,this.updateModel(e,i),e.preventDefault()},incrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:this.modelValue+1,this.updateModel(e,i),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const r=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"],h=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"],d=["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n\tposition: relative;\n}\n.p-slider .p-slider-handle {\n\tposition: absolute;\n\tcursor: -webkit-grab;\n\tcursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n\tposition: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n\theight: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n\theight: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),o.render=function(e,o,u,m,g,p){return t(),i("div",{class:a(p.containerClass),onClick:o[15]||(o[15]=(...e)=>p.onBarClick&&p.onBarClick(...e))},[n("span",{class:"p-slider-range",style:l(p.rangeStyle)},null,4),u.range?s("",!0):(t(),i("span",{key:0,class:"p-slider-handle",style:l(p.handleStyle),onTouchstart:o[0]||(o[0]=e=>p.onDragStart(e)),onTouchmove:o[1]||(o[1]=e=>p.onDrag(e)),onTouchend:o[2]||(o[2]=e=>p.onDragEnd(e)),onMousedown:o[3]||(o[3]=e=>p.onMouseDown(e)),onKeydown:o[4]||(o[4]=e=>p.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue,"aria-valuemax":u.max,"aria-labelledby":u.ariaLabelledBy},null,44,r)),u.range?(t(),i("span",{key:1,class:"p-slider-handle",style:l(p.rangeStartHandleStyle),onTouchstart:o[5]||(o[5]=e=>p.onDragStart(e,0)),onTouchmove:o[6]||(o[6]=e=>p.onDrag(e)),onTouchend:o[7]||(o[7]=e=>p.onDragEnd(e)),onMousedown:o[8]||(o[8]=e=>p.onMouseDown(e,0)),onKeydown:o[9]||(o[9]=e=>p.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[0]:null,"aria-valuemax":u.max,"aria-labelledby":u.ariaLabelledBy},null,44,h)):s("",!0),u.range?(t(),i("span",{key:2,class:"p-slider-handle",style:l(p.rangeEndHandleStyle),onTouchstart:o[10]||(o[10]=e=>p.onDragStart(e,1)),onTouchmove:o[11]||(o[11]=e=>p.onDrag(e)),onTouchend:o[12]||(o[12]=e=>p.onDragEnd(e)),onMousedown:o[13]||(o[13]=e=>p.onMouseDown(e,1)),onKeydown:o[14]||(o[14]=e=>p.onKeyDown(e,1)),tabindex:"0",role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[1]:null,"aria-valuemax":u.max,"aria-labelledby":u.ariaLabelledBy},null,44,d)):s("",!0)],2)};export{o as default};
+import{DomHandler as e}from"primevue/utils";import{openBlock as t,createElementBlock as i,normalizeClass as a,createElementVNode as n,normalizeStyle as l,createCommentVNode as s}from"vue";var r={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.getWindowScrollLeft(),this.initY=t.top+e.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const o=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],d=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],h=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n\tposition: relative;\n}\n.p-slider .p-slider-handle {\n\tposition: absolute;\n\tcursor: -webkit-grab;\n\tcursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n\tposition: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n\theight: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n\theight: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),r.render=function(e,r,u,m,g,p){return t(),i("div",{class:a(p.containerClass),onClick:r[15]||(r[15]=(...e)=>p.onBarClick&&p.onBarClick(...e))},[n("span",{class:"p-slider-range",style:l(p.rangeStyle)},null,4),u.range?s("",!0):(t(),i("span",{key:0,class:"p-slider-handle",style:l(p.handleStyle),onTouchstart:r[0]||(r[0]=e=>p.onDragStart(e)),onTouchmove:r[1]||(r[1]=e=>p.onDrag(e)),onTouchend:r[2]||(r[2]=e=>p.onDragEnd(e)),onMousedown:r[3]||(r[3]=e=>p.onMouseDown(e)),onKeydown:r[4]||(r[4]=e=>p.onKeyDown(e)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,o)),u.range?(t(),i("span",{key:1,class:"p-slider-handle",style:l(p.rangeStartHandleStyle),onTouchstart:r[5]||(r[5]=e=>p.onDragStart(e,0)),onTouchmove:r[6]||(r[6]=e=>p.onDrag(e)),onTouchend:r[7]||(r[7]=e=>p.onDragEnd(e)),onMousedown:r[8]||(r[8]=e=>p.onMouseDown(e,0)),onKeydown:r[9]||(r[9]=e=>p.onKeyDown(e,0)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[0]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,d)):s("",!0),u.range?(t(),i("span",{key:2,class:"p-slider-handle",style:l(p.rangeEndHandleStyle),onTouchstart:r[10]||(r[10]=e=>p.onDragStart(e,1)),onTouchmove:r[11]||(r[11]=e=>p.onDrag(e)),onTouchend:r[12]||(r[12]=e=>p.onDragEnd(e)),onMousedown:r[13]||(r[13]=e=>p.onMouseDown(e,1)),onKeydown:r[14]||(r[14]=e=>p.onKeyDown(e,1)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[1]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,h)):s("",!0)],2)};export{r as default};