primevue/knob/knob.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.knob=function(e,t){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Knob",extends:a(e).default,emits:["update:modelValue","change"],props:{modelValue:{type:Number,default:null},size:{type:Number,default:100},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},step:{type:Number,default:1},min:{type:Number,default:0},max:{type:Number,default:100},valueColor:{type:String,default:"var(--primary-color, Black)"},rangeColor:{type:String,default:"var(--surface-border, LightGray)"},textColor:{type:String,default:"var(--text-color-secondary, Black)"},strokeWidth:{type:Number,default:14},showValue:{type:Boolean,default:!0},valueTemplate:{type:String,default:"{value}"},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({radius:40,midX:50,midY:50,minRadians:4*Math.PI/3,maxRadians:-Math.PI/3}),methods:{updateValue(e,t){let a=e-this.size/2,i=this.size/2-t,s=Math.atan2(i,a),n=-Math.PI/2-Math.PI/6;this.updateModel(s,n)},updateModel(e,t){let a;if(e>this.maxRadians)a=this.mapRange(e,this.minRadians,this.maxRadians,this.min,this.max);else{if(!(e<t))return;a=this.mapRange(e+2*Math.PI,this.minRadians,this.maxRadians,this.min,this.max)}let i=Math.round((a-this.min)/this.step)*this.step+this.min;this.$emit("update:modelValue",i),this.$emit("change",i)},updateModelValue(e){e>this.max?this.$emit("update:modelValue",this.max):e<this.min?this.$emit("update:modelValue",this.min):this.$emit("update:modelValue",e)},mapRange:(e,t,a,i,s)=>(e-t)*(s-i)/(a-t)+i,onClick(e){this.disabled||this.readonly||this.updateValue(e.offsetX,e.offsetY)},onMouseDown(e){this.disabled||this.readonly||(window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp),e.preventDefault())},onMouseUp(e){this.disabled||this.readonly||(window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),e.preventDefault())},onTouchStart(e){this.disabled||this.readonly||(window.addEventListener("touchmove",this.onTouchMove),window.addEventListener("touchend",this.onTouchEnd),e.preventDefault())},onTouchEnd(e){this.disabled||this.readonly||(window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.onTouchEnd),e.preventDefault())},onMouseMove(e){this.disabled||this.readonly||(this.updateValue(e.offsetX,e.offsetY),e.preventDefault())},onTouchMove(e){if(!this.disabled&&!this.readonly&&1==e.touches.length){const t=this.$el.getBoundingClientRect(),a=e.targetTouches.item(0),i=a.clientX-t.left,s=a.clientY-t.top;this.updateValue(i,s)}},onKeyDown(e){if(!this.disabled&&!this.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),this.updateModelValue(this.modelValue+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),this.updateModelValue(this.modelValue-1);break;case"Home":e.preventDefault(),this.$emit("update:modelValue",this.min);break;case"End":e.preventDefault(),this.$emit("update:modelValue",this.max);break;case"PageUp":e.preventDefault(),this.updateModelValue(this.modelValue+10);break;case"PageDown":e.preventDefault(),this.updateModelValue(this.modelValue-10)}}},computed:{containerClass(){return["p-knob p-component",{"p-disabled":this.disabled}]},rangePath(){return`M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`},valuePath(){return`M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`},zeroRadians(){return this.min>0&&this.max>0?this.mapRange(this.min,this.min,this.max,this.minRadians,this.maxRadians):this.mapRange(0,this.min,this.max,this.minRadians,this.maxRadians)},valueRadians(){return this.mapRange(this.modelValue,this.min,this.max,this.minRadians,this.maxRadians)},minX(){return this.midX+Math.cos(this.minRadians)*this.radius},minY(){return this.midY-Math.sin(this.minRadians)*this.radius},maxX(){return this.midX+Math.cos(this.maxRadians)*this.radius},maxY(){return this.midY-Math.sin(this.maxRadians)*this.radius},zeroX(){return this.midX+Math.cos(this.zeroRadians)*this.radius},zeroY(){return this.midY-Math.sin(this.zeroRadians)*this.radius},valueX(){return this.midX+Math.cos(this.valueRadians)*this.radius},valueY(){return this.midY-Math.sin(this.valueRadians)*this.radius},largeArc(){return Math.abs(this.zeroRadians-this.valueRadians)<Math.PI?0:1},sweep(){return this.valueRadians>this.zeroRadians?0:1},valueToDisplay(){return this.valueTemplate.replace(/{value}/g,this.modelValue)}}};const s=["width","height","tabindex","aria-valuemin","aria-valuemax","aria-valuenow","aria-labelledby","aria-label"],n=["d","stroke-width","stroke"],o=["d","stroke-width","stroke"],l=["fill"];return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===a&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n@keyframes dash-frame {\n100% {\n        stroke-dashoffset: 0;\n}\n}\n.p-knob-range {\n    fill: none;\n    transition: stroke 0.1s ease-in;\n}\n.p-knob-value {\n    animation-name: dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n.p-knob-text {\n    font-size: 1.3rem;\n    text-align: center;\n}\n"),i.render=function(e,a,i,r,d,h){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:h.containerClass},e.ptm("root")),[(t.openBlock(),t.createElementBlock("svg",t.mergeProps({viewBox:"0 0 100 100",role:"slider",width:i.size,height:i.size,tabindex:i.readonly||i.disabled?-1:i.tabindex,"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":i.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onClick:a[0]||(a[0]=(...e)=>h.onClick&&h.onClick(...e)),onKeydown:a[1]||(a[1]=(...e)=>h.onKeyDown&&h.onKeyDown(...e)),onMousedown:a[2]||(a[2]=(...e)=>h.onMouseDown&&h.onMouseDown(...e)),onMouseup:a[3]||(a[3]=(...e)=>h.onMouseUp&&h.onMouseUp(...e)),onTouchstart:a[4]||(a[4]=(...e)=>h.onTouchStart&&h.onTouchStart(...e)),onTouchend:a[5]||(a[5]=(...e)=>h.onTouchEnd&&h.onTouchEnd(...e))},e.ptm("svg")),[t.createElementVNode("path",t.mergeProps({d:h.rangePath,"stroke-width":i.strokeWidth,stroke:i.rangeColor,class:"p-knob-range"},e.ptm("range")),null,16,n),t.createElementVNode("path",t.mergeProps({d:h.valuePath,"stroke-width":i.strokeWidth,stroke:i.valueColor,class:"p-knob-value"},e.ptm("value")),null,16,o),i.showValue?(t.openBlock(),t.createElementBlock("text",t.mergeProps({key:0,x:50,y:57,"text-anchor":"middle",fill:i.textColor,class:"p-knob-text"},e.ptm("label")),t.toDisplayString(h.valueToDisplay),17,l)):t.createCommentVNode("",!0)],16,s))],16)},i}(primevue.basecomponent,Vue);