@hbilal_9/vue3-star-ratings/dist/index.cjs

Vue 3 simple and customizable component for star ratings

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g={class:"stars",ref:"stars"},S=["id","onMouseover","onMouseout","onClick"],v=e.defineComponent({__name:"StarRatings",props:{modelValue:Number,starsCounts:{type:Number,default:5},customClass:String,size:String,fillColor:{type:String,default:"#ED8A19"},fontFamily:{type:String,default:"system-ui"}},emits:["starChange","update:modelValue"],setup(n,{emit:c}){let o=Math.floor(Math.random()*100);const u=c;function i(r){e.ref(null);let s=r+1;document.querySelectorAll(".star-"+o).forEach((t,a)=>{a<s?t.innerHTML="&#9733;":t.innerHTML="&#9734;"})}let f=e.ref(-1);function m(r){e.ref(null);let s=r+1;const l=document.querySelectorAll(".star-"+o);f.value=r,l.forEach((t,a)=>{a<s?(t.innerHTML="&#9733;",u("starChange",s),u("update:modelValue",s)):t.innerHTML="&#9734;"})}function _(r){document.querySelectorAll(".star-"+o).forEach((l,t)=>{t<=f.value?l.innerHTML="&#9733;":l.innerHTML="&#9734;"})}return(r,s)=>(e.openBlock(),e.createElementBlock("ul",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.starsCounts,(l,t)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({key:t,class:["star",`star-${e.unref(o)}`],id:`star-${t}`,onMouseover:a=>i(t),onMouseout:a=>_(),onClick:a=>m(t),style:{fontSize:n.size,color:n.fillColor,fontFamily:n.fontFamily},ref_for:!0},r.$attrs)," ☆ ",16,S))),128))],512))}});const y=(n,c)=>{const o=n.__vccOpts||n;for(const[u,i]of c)o[u]=i;return o},d=y(v,[["__scopeId","data-v-6e634ffa"]]),p={install:n=>{n.component("StarRatings",d)}};exports.StarRatings=d;exports.default=p;