vue3-star-ratings
Version:
A simple, customizable vue3 component for star ratings
3 lines (2 loc) • 3.88 kB
JavaScript
(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)}})();
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Vue3StarRatings=a(e.Vue))})(this,function(e){"use strict";const a=(s,c)=>{const n=s.__vccOpts||s;for(const[l,d]of c)n[l]=d;return n},p={},g={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512.002 512.002"},S=[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)];function k(s,c){return e.openBlock(),e.createElementBlock("svg",g,S)}const m=a(p,[["render",k]]),h={class:"vue3-star-ratings__outer"},y={class:"vue3-star-ratings__inner"},B=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:m}},emits:["update:modelValue"],setup(s,{emit:c}){const n=s,l=e.computed(()=>n.customSvg||m),d={rounded(t,o){const r=Math.pow(10,o);return Math.round(t*r)/r}},i=e.ref(),u=e.computed({get(){return n.modelValue},set(t){const o=d.rounded(t,1);c("update:modelValue",o)}});function _(t){if(n.disableClick)return;const o=this.getBoundingClientRect(),{pageX:r}=t,f=r-o.left,C=o.width,V=n.numberOfStars,b=f/C*V;u.value=b}const v=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":`${v.value}%`,"--vue3StarRatingIconSize":`${n.starSize}px`};for(const[r,f]of Object.entries(t))(o=i.value)==null||o.style.setProperty(r,f)}),e.onMounted(()=>{var t;(t=i.value)==null||t.addEventListener("click",_)}),e.onBeforeUnmount(()=>{var t;(t=i.value)==null||t.removeEventListener("click",_)}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:"vue3-star-ratings",ref_key:"starsContainer",ref:i,style:e.normalizeStyle({pointerEvents:t.disableClick?"none":"auto"})},[e.createElementVNode("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.numberOfStars,r=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),{key:r,class:"vue3-star-ratings__icon"}))),128))]),e.createElementVNode("div",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.numberOfStars,r=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),{key:r,class:"vue3-star-ratings__icon"}))),128))])],4))}}),O="";return a(B,[["__scopeId","data-v-7fab3f62"]])});