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

Vue 3 simple and customizable component for star ratings

import { defineComponent as y, ref as i, openBlock as f, createElementBlock as m, Fragment as S, renderList as p, mergeProps as v, unref as M } from "vue";
const h = {
  class: "stars",
  ref: "stars"
}, C = ["id", "onMouseover", "onMouseout", "onClick"], k = /* @__PURE__ */ y({
  __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(t, { emit: u }) {
    let n = Math.floor(Math.random() * 100);
    const l = u;
    function c(o) {
      i(null);
      let r = o + 1;
      document.querySelectorAll(".star-" + n).forEach((e, a) => {
        a < r ? e.innerHTML = "&#9733;" : e.innerHTML = "&#9734;";
      });
    }
    let d = i(-1);
    function _(o) {
      i(null);
      let r = o + 1;
      const s = document.querySelectorAll(".star-" + n);
      d.value = o, s.forEach((e, a) => {
        a < r ? (e.innerHTML = "&#9733;", l("starChange", r), l("update:modelValue", r)) : e.innerHTML = "&#9734;";
      });
    }
    function g(o) {
      document.querySelectorAll(".star-" + n).forEach((s, e) => {
        e <= d.value ? s.innerHTML = "&#9733;" : s.innerHTML = "&#9734;";
      });
    }
    return (o, r) => (f(), m("ul", h, [
      (f(!0), m(S, null, p(t.starsCounts, (s, e) => (f(), m("li", v({
        key: e,
        class: ["star", `star-${M(n)}`],
        id: `star-${e}`,
        onMouseover: (a) => c(e),
        onMouseout: (a) => g(),
        onClick: (a) => _(e),
        style: { fontSize: t.size, color: t.fillColor, fontFamily: t.fontFamily },
        ref_for: !0
      }, o.$attrs), " ☆ ", 16, C))), 128))
    ], 512));
  }
});
const L = (t, u) => {
  const n = t.__vccOpts || t;
  for (const [l, c] of u)
    n[l] = c;
  return n;
}, $ = /* @__PURE__ */ L(k, [["__scopeId", "data-v-6e634ffa"]]), R = {
  install: (t) => {
    t.component("StarRatings", $);
  }
};
export {
  $ as StarRatings,
  R as default
};