vue3-star-ratings/dist/vue3-star-ratings.cjs

A simple, customizable vue3 component for star ratings

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue3-star-ratings[data-v-7fab3f62]{width:fit-content;overflow:hidden;position:relative;white-space:nowrap}.vue3-star-ratings *[data-v-7fab3f62]{box-sizing:border-box;margin:0;padding:0;line-height:1}.vue3-star-ratings__inner[data-v-7fab3f62],.vue3-star-ratings__outer[data-v-7fab3f62]{height:inherit}.vue3-star-ratings__outer[data-v-7fab3f62]{position:absolute;top:0;left:0;width:var(--vue3StarRatingOuterWidth);max-width:100%;overflow:hidden;color:var(--vue3StarRatingsOuterColor);transition:width .32s cubic-bezier(.075,.82,.165,1)}.vue3-star-ratings__inner[data-v-7fab3f62]{color:var(--vue3StarRatingsInnerColor)}.vue3-star-ratings__icon[data-v-7fab3f62]{fill:currentColor;width:var(--vue3StarRatingIconSize);aspect-ratio:1;cursor:pointer;display:inline-block}")),document.head.appendChild(t)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
"use strict";const e=require("vue"),m=(a,s)=>{const n=a.__vccOpts||a;for(const[c,i]of s)n[c]=i;return n},S={},h={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512.002 512.002"},y=e.createElementVNode("path",{d:"M511.267 197.258a14.995 14.995 0 00-12.107-10.209l-158.723-23.065-70.985-143.827a14.998 14.998 0 00-26.901 0l-70.988 143.827-158.72 23.065a14.998 14.998 0 00-8.312 25.585l114.848 111.954-27.108 158.083a14.999 14.999 0 0021.763 15.812l141.967-74.638 141.961 74.637a15 15 0 0021.766-15.813l-27.117-158.081 114.861-111.955a14.994 14.994 0 003.795-15.375z"},null,-1),B=[y];function C(a,s){return e.openBlock(),e.createElementBlock("svg",h,B)}const _=m(S,[["render",C]]),b={class:"vue3-star-ratings__outer"},O={class:"vue3-star-ratings__inner"},V=e.defineComponent({__name:"Vue3StarRatings",props:{modelValue:{default:0},numberOfStars:{default:5},starColor:{default:"#ff9800"},inactiveColor:{default:"#333333"},starSize:{default:24},disableClick:{type:Boolean},customSvg:{default:_}},emits:["update:modelValue"],setup(a,{emit:s}){const n=a,c=e.computed(()=>n.customSvg||_),i={rounded(t,o){const r=Math.pow(10,o);return Math.round(t*r)/r}},l=e.ref(),u=e.computed({get(){return n.modelValue},set(t){const o=i.rounded(t,1);s("update:modelValue",o)}});function v(t){if(n.disableClick)return;const o=this.getBoundingClientRect(),{pageX:r}=t,d=r-o.left,p=o.width,g=n.numberOfStars,k=d/p*g;u.value=k}const f=e.computed(()=>(u.value<0?0:u.value>n.numberOfStars?n.numberOfStars:u.value)/n.numberOfStars*100);return e.watchEffect(()=>{var o;const t={"--vue3StarRatingsInnerColor":n.inactiveColor,"--vue3StarRatingsOuterColor":n.starColor,"--vue3StarRatingOuterWidth":`${f.value}%`,"--vue3StarRatingIconSize":`${n.starSize}px`};for(const[r,d]of Object.entries(t))(o=l.value)==null||o.style.setProperty(r,d)}),e.onMounted(()=>{var t;(t=l.value)==null||t.addEventListener("click",v)}),e.onBeforeUnmount(()=>{var t;(t=l.value)==null||t.removeEventListener("click",v)}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:"vue3-star-ratings",ref_key:"starsContainer",ref:l,style:e.normalizeStyle({pointerEvents:t.disableClick?"none":"auto"})},[e.createElementVNode("div",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.numberOfStars,r=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value),{key:r,class:"vue3-star-ratings__icon"}))),128))]),e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.numberOfStars,r=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value),{key:r,class:"vue3-star-ratings__icon"}))),128))])],4))}});const E=m(V,[["__scopeId","data-v-7fab3f62"]]);module.exports=E;