vue3-star-ratings
Version:
A simple, customizable vue3 component for star ratings
94 lines (93 loc) • 4.39 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)}})();
import { openBlock as a, createElementBlock as i, createElementVNode as v, defineComponent as V, computed as f, ref as w, watchEffect as z, onMounted as B, onBeforeUnmount as E, normalizeStyle as x, Fragment as p, renderList as g, createBlock as S, resolveDynamicComponent as h } from "vue";
const b = (s, o) => {
const t = s.__vccOpts || s;
for (const [u, d] of o)
t[u] = d;
return t;
}, $ = {}, I = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 512.002 512.002"
}, M = /* @__PURE__ */ v("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), L = [
M
];
function j(s, o) {
return a(), i("svg", I, L);
}
const y = /* @__PURE__ */ b($, [["render", j]]), D = { class: "vue3-star-ratings__outer" }, W = { class: "vue3-star-ratings__inner" }, X = /* @__PURE__ */ V({
__name: "Vue3StarRatings",
props: {
modelValue: { default: 0 },
numberOfStars: { default: 5 },
starColor: { default: "#ff9800" },
inactiveColor: { default: "#333333" },
starSize: { default: 24 },
disableClick: { type: Boolean },
customSvg: { default: y }
},
emits: ["update:modelValue"],
setup(s, { emit: o }) {
const t = s, u = f(() => t.customSvg || y), d = {
rounded(e, n) {
const r = Math.pow(10, n);
return Math.round(e * r) / r;
}
}, l = w(), c = f({
get() {
return t.modelValue;
},
set(e) {
const n = d.rounded(e, 1);
o("update:modelValue", n);
}
});
function m(e) {
if (t.disableClick)
return;
const n = this.getBoundingClientRect(), { pageX: r } = e, _ = r - n.left, k = n.width, O = t.numberOfStars, R = _ / k * O;
c.value = R;
}
const C = f(() => (c.value < 0 ? 0 : c.value > t.numberOfStars ? t.numberOfStars : c.value) / t.numberOfStars * 100);
return z(() => {
var n;
const e = {
"--vue3StarRatingsInnerColor": t.inactiveColor,
"--vue3StarRatingsOuterColor": t.starColor,
"--vue3StarRatingOuterWidth": `${C.value}%`,
"--vue3StarRatingIconSize": `${t.starSize}px`
};
for (const [r, _] of Object.entries(e))
(n = l.value) == null || n.style.setProperty(r, _);
}), B(() => {
var e;
(e = l.value) == null || e.addEventListener("click", m);
}), E(() => {
var e;
(e = l.value) == null || e.removeEventListener("click", m);
}), (e, n) => (a(), i("div", {
class: "vue3-star-ratings",
ref_key: "starsContainer",
ref: l,
style: x({
pointerEvents: e.disableClick ? "none" : "auto"
})
}, [
v("div", D, [
(a(!0), i(p, null, g(e.numberOfStars, (r) => (a(), S(h(u.value), {
key: r,
class: "vue3-star-ratings__icon"
}))), 128))
]),
v("div", W, [
(a(!0), i(p, null, g(e.numberOfStars, (r) => (a(), S(h(u.value), {
key: r,
class: "vue3-star-ratings__icon"
}))), 128))
])
], 4));
}
});
const N = /* @__PURE__ */ b(X, [["__scopeId", "data-v-7fab3f62"]]);
export {
N as default
};