UNPKG

@progress/kendo-vue-inputs

Version:
9 lines (8 loc) 5.8 kB
/** * @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 c=require("vue"),l=require("@progress/kendo-vue-common"),M=require("../package-metadata.js"),B=require("./RatingItem.js"),n=require("./utils/main.js"),F=require("@progress/kendo-vue-intl"),g=require("../messages/main.js"),i=require("./utils/rating-reducer.js"),w=c.defineComponent({name:"Rating",emits:{change:null,keydown:null,focus:null,blur:null,click:null,mouseleave:null,mousemove:null},props:{min:{type:Number,default:1},max:{type:Number,default:5},step:{type:Number,default:1},item:{type:[String,Object,Function]},precision:{type:String,default:"item",validator:function(e){return["item","half"].includes(e)}},selection:{type:String,default:"continues",validator:function(e){return["continues","single"].includes(e)}},value:Number,icon:String,svgIconOutline:Object,svgIcon:Object,tabIndex:Number,disabled:Boolean,readonly:Boolean,id:String,half:Boolean,defaultValue:Number,label:String},created(){l.validatePackage(M.packageMetadata)},inject:{kendoLocalizationService:{default:null}},data:function(){return{focused:!1,currentValue:this.defaultValue||null,currentHovered:null}},setup(){return{inputRef:c.ref(null)}},computed:{base(){return this.$props.step/(this.$props.precision==="half"?2:1)},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$data.currentValue}},render(){const e=F.provideLocalizationService(this),{min:t,max:a,step:s,id:o,dir:u,label:d,selection:f,precision:N,svgIcon:R,icon:T,item:b,value:v,tabIndex:A,disabled:h,readonly:I,ariaLabelledBy:k,ariaDescribedBy:V,svgIconOutline:C}=this.$props,O=Array.from({length:a-t+1},(y,r)=>t+r),S=n.getRemainder(n.toRound(a-t,this.base),s),m=this.computedValue,p=this.$data.currentHovered;return c.createVNode("span",{id:o,ref:"ratingRef",role:"slider",dir:u,tabindex:l.getTabIndex(A,h,void 0),class:l.classNames("k-rating",{"k-rtl":u==="rtl","k-readonly":I,"k-disabled":h}),onKeydown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:()=>this.$data.focused=!0,"aria-valuemin":t,"aria-valuemax":a,"aria-valuenow":v!==null?v:void 0,"aria-disabled":h?"true":void 0,"aria-label":e.toLanguageString(g.ratingAriaLabel,g.messages[g.ratingAriaLabel]),"aria-labelledby":k,"aria-describedby":V},[c.createVNode("input",{id:"rating",class:"k-hidden",readonly:I,disabled:h},null),c.createVNode("span",{class:"k-rating-container"},[O.map(function(y){const r=n.toRound(y+S,this.base),$=N==="half"?n.isHalf(r,p!==null?p:m!==null?m:0,s):!1,H=n.isSelected(r,m,s,f),_=n.isSelected(r,p!==null?p:m,s,f),G=n.isSelected(r,p,s,f),x=l.templateRendering.call(this,b,l.getListeners.call(this));return c.createVNode(B.RatingItem,{key:r,value:r,dir:u,title:String($?n.toRound(r-s/2,this.base):r),icon:T,svgIcon:R,svgIconOutline:C,haveSelectedValue:H,half:$,selected:_,hovered:G,item:b,itemTemplate:x,onClick:this.handleItemClick,onMousemove:this.handleMouseMove,onMouseleave:this.handleMouseLeave},null)},this)]),d&&c.createVNode("span",{class:"k-rating-label"},[d])])},methods:{handleFocus(e){this.$emit("focus",e)},handleBlur(e){this.$emit("blur",e)},handleChange(e,t){this.$emit("change",{value:e,target:this.$refs.ratingRef,event:t})},handleKeyDown(e){if(!(this.$props.readonly||this.$props.disabled)){switch(e.keyCode){case l.Keys.right:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.decrease:i.RATING_ACTION.increase,event:e});break;case l.Keys.left:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.increase:i.RATING_ACTION.decrease,event:e});break;case l.Keys.home:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.min:i.RATING_ACTION.max,event:e});break;case l.Keys.end:e.preventDefault(),this.dispatchValue({type:this.$props.dir==="rtl"?i.RATING_ACTION.max:i.RATING_ACTION.min,event:e});break;case l.Keys.esc:e.preventDefault(),this.dispatchValue({type:i.RATING_ACTION.deselect,event:e});break}this.$emit("keydown",{value:this.$data.currentValue,event:e})}},handleItemClick(e){const{event:t,value:a,target:s}=e;if(!(!s||!a||this.$props.readonly||this.$props.disabled)){if(this.$props.precision==="half"){const o=s.getBoundingClientRect(),d=n.calcIsFirstHalf(this.$props.dir?this.$props.dir:"ltr",o,e.event.clientX)?n.toRound(a-this.$props.step/2,this.base):a;this.dispatchValue({type:i.RATING_ACTION.select,payload:d,event:t})}else this.dispatchValue({type:i.RATING_ACTION.select,payload:a,event:t});this.$emit("click",t)}},handleMouseMove(e){const{event:t,value:a,target:s}=e;if(!(!s||!a))if(this.$props.precision==="half"){const o=s.getBoundingClientRect(),d=n.calcIsFirstHalf(this.$props.dir?this.$props.dir:"ltr",o,t.clientX)?a-this.$props.step/2:a;this.dispatchHover({type:i.RATING_ACTION.select,payload:d,event:t})}else this.dispatchHover({type:i.RATING_ACTION.select,payload:a,event:t})},handleMouseLeave(e){this.dispatchHover({type:i.RATING_ACTION.reset,event:e.event})},dispatchValue(e){const t={state:this.$props.value,min:this.$props.min,max:this.$props.max,step:this.base},a=t.state||this.$data.currentValue,s=i.ratingReducer(a,{...e,...t}),o=e.event;this.handleChange(s,o),this.$data.currentValue=s},dispatchHover(e){const t={state:this.$props.value,min:this.$props.min,max:this.$props.max,step:this.base,precision:this.$props.precision},a=t.state,s=i.ratingReducer(a,{...e,...t});this.$data.currentHovered=s}}});exports.Rating=w;