import { ref as h, useSlots as T, onMounted as R, computed as x, watch as H, openBlock as a, createElementBlock as o, normalizeStyle as i, createElementVNode as r, toDisplayString as g, createCommentVNode as y, unref as s, Fragment as P, renderList as W, withKeys as q } from "vue";
import { u as J, c as Q, o as Z, e as tt, i as $, f as b, X as k, w as F, V as X } from "./index-MWHrTFPq.js";
import { u as et } from "./useNestedProp-CTDeT4KA.js";
import { _ as lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const at = {
  key: 0,
  class: "vue-ui-rating-title",
  style: { width: "100%" }
}, ot = ["src", "height", "width"], it = ["xmlns", "height", "width"], st = ["id"], nt = ["stop-color"], rt = ["stop-color"], ut = ["points", "fill", "stroke", "stroke-width"], vt = ["src", "alt", "height", "width", "id"], dt = ["xmlns", "viewBox", "height", "id"], yt = ["id"], pt = ["stop-color"], gt = ["stop-color"], ct = ["points", "fill", "stroke"], ft = ["xmlns", "height"], mt = ["onClick", "onMouseenter", "onKeyup"], ht = ["onMouseenter"], xt = {
  __name: "vue-ui-rating",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: ["rate"],
  setup(j, { expose: B, emit: I }) {
    const u = j, { vue_ui_rating: Y } = J(), m = h(Q()), z = h(!1), d = h(void 0), _ = h([]), G = T();
    R(() => {
      G["chart-background"] && console.warn("VueUiRating does not support the #chart-background slot.");
    });
    const t = x({
      get: () => C(),
      set: (l) => l
    });
    function C() {
      return et({
        userConfig: u.config,
        defaultConfig: Y
      });
    }
    H(() => u.config, (l) => {
      t.value = C(), M();
    }, { deep: !0 });
    const L = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating) ? U(u.dataset.rating) : u.dataset.rating), O = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating)), v = h(L.value), S = x(() => t.value.type === "image"), c = x(() => t.value.readonly);
    function U(l) {
      let n = 0, e = 0;
      for (const p in l) {
        const K = parseInt(p), A = l[p];
        n += K * A, e += A;
      }
      if (e === 0)
        return 0;
      const f = n / e;
      return Math.min(t.value.to, Math.max(t.value.from, f));
    }
    R(() => {
      M();
    });
    function M() {
      Z(u.dataset) && tt({
        componentName: "VueUiRating",
        type: "dataset"
      }), _.value = [];
      for (let l = t.value.from; l <= t.value.to; l += 1)
        _.value.push(l);
    }
    function w(l, n = !1) {
      return l > d.value || c.value ? n ? t.value.style.image.inactiveOpacity : t.value.style.star.inactiveColor : n ? 1 : t.value.style.star.useGradient ? `url(#star_gradient_under_${m.value})` : t.value.style.star.activeColor;
    }
    function N(l, n = !1) {
      const e = v.value - l, f = n ? 1 : 100;
      switch (!0) {
        case e <= 0:
          return 1e-3;
        case e > 1:
          return 1 * f;
        default:
          return e * f;
      }
    }
    function V(l) {
      c.value || (v.value = l, I("rate", l));
    }
    function D() {
      return v.value;
    }
    function E(l = !0) {
      c.value = l;
    }
    return B({
      getData: D,
      toggleReadonly: E
    }), (l, n) => (a(), o("div", {
      style: i(`background:${t.value.style.backgroundColor};font-family:${t.value.style.fontFamily};width:100%`),
      class: "vue-ui-rating",
      onMouseover: n[2] || (n[2] = (e) => z.value = !0),
      onMouseleave: n[3] || (n[3] = (e) => {
        z.value = !1, d.value = void 0;
      })
    }, [
      t.value.style.title.text ? (a(), o("div", at, [
        r("div", {
          style: i(`color:${t.value.style.title.color};font-weight:${t.value.style.title.bold ? "bold" : "normal"};text-align:${t.value.style.title.textAlign};margin-bottom:${t.value.style.title.offsetY}px;font-size:${t.value.style.title.fontSize}px`)
        }, g(t.value.style.title.text), 5),
        t.value.style.title.subtitle.text ? (a(), o("div", {
          key: 0,
          style: i(`color:${t.value.style.title.subtitle.color};font-size:${t.value.style.title.subtitle.fontSize}px;text-align:${t.value.style.title.textAlign};margin-bottom:${t.value.style.title.subtitle.offsetY}px;font-weight:${t.value.style.title.subtitle.bold ? "bold" : "normal"}`)
        }, g(t.value.style.title.subtitle.text), 5)) : y("", !0)
      ])) : y("", !0),
      t.value.style.rating.show && t.value.style.rating.position === "top" ? (a(), o("div", {
        key: 1,
        style: i(`width:100%;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};margin-left:${t.value.style.rating.offsetX}px`)
      }, g(s($)(
        t.value.style.rating.formatter,
        v.value,
        s(b)({
          v: v.value,
          r: t.value.style.rating.roundingValue
        }),
        t.value
      )), 5)) : y("", !0),
      r("div", {
        class: "vue-ui-rating-wrapper",
        style: i(`height:${t.value.style.itemSize}px;width:100%;display:flex;align-items:center;justify-content:center`)
      }, [
        t.value.style.rating.show && t.value.style.rating.position === "left" ? (a(), o("div", {
          key: 0,
          style: i(`width:fit-content;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};padding-right:${t.value.style.rating.offsetX}px`)
        }, g(s($)(
          t.value.style.rating.formatter,
          v.value,
          s(b)({
            v: v.value,
            r: t.value.style.rating.roundingValue
          }),
          t.value
        )), 5)) : y("", !0),
        (a(!0), o(P, null, W(_.value, (e, f) => (a(), o("div", {
          class: "vue-ui-rating-unit-container",
          style: i(`position:relative;height:${t.value.style.itemSize}px;width:${t.value.style.itemSize}px`)
        }, [
          S.value ? (a(), o("img", {
            key: 0,
            src: t.value.style.image.src,
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            style: i(`position:absolute;top:0;left:0;opacity:${isNaN(d.value) ? t.value.style.image.inactiveOpacity : w(e, !0)}`)
          }, null, 12, ot)) : (a(), o("svg", {
            key: 1,
            xmlns: s(k),
            viewBox: "0 0 100 100",
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            class: "vue-ui-rating-unit"
          }, [
            r("defs", null, [
              r("radialGradient", {
                cx: "50%",
                cy: "50%",
                r: "50%",
                fx: "50%",
                fy: "50%",
                id: `star_gradient_under_${m.value}`
              }, [
                r("stop", {
                  offset: "0%",
                  "stop-color": `${s(F)(t.value.style.star.activeColor, 0.05)}`
                }, null, 8, nt),
                r("stop", {
                  offset: "100%",
                  "stop-color": t.value.style.star.activeColor
                }, null, 8, rt)
              ], 8, st)
            ]),
            r("polygon", {
              points: s(X)({
                plot: { x: 50, y: 50 },
                radius: 30,
                apexes: t.value.style.star.apexes
              }),
              fill: isNaN(d.value) ? t.value.style.star.inactiveColor : w(e),
              stroke: t.value.style.star.borderColor ? t.value.style.star.borderColor : d.value ? w(e) : t.value.style.star.inactiveColor,
              "stroke-width": t.value.style.star.borderWidth,
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            }, null, 8, ut)
          ], 8, it)),
          S.value ? (a(), o("img", {
            key: 2,
            src: t.value.style.image.src,
            alt: `${t.value.style.image.alt} ${e}`,
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            id: `active_${m.value}_${e}`,
            class: "vue-ui-rating-unit",
            style: i(`position:absolute;top:0;left:0;clip:rect(0px,${N(f, !0) * t.value.style.itemSize}px,${t.value.style.itemSize}px,0px`)
          }, null, 12, vt)) : (a(), o("svg", {
            key: 3,
            xmlns: s(k),
            viewBox: `0 0 ${N(f)} 100`,
            height: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            id: `active_${m.value}_${e}`,
            style: { position: "absolute", top: "0", left: "0" }
          }, [
            r("defs", null, [
              r("radialGradient", {
                cx: "50%",
                cy: "50%",
                r: "50%",
                fx: "50%",
                fy: "50%",
                id: `star_gradient_over_${m.value}`
              }, [
                r("stop", {
                  offset: "0%",
                  "stop-color": `${s(F)(t.value.style.star.activeColor, 0.05)}`
                }, null, 8, pt),
                r("stop", {
                  offset: "100%",
                  "stop-color": t.value.style.star.activeColor
                }, null, 8, gt)
              ], 8, yt)
            ]),
            r("polygon", {
              points: s(X)({
                plot: { x: 50, y: 50 },
                radius: 30,
                apexes: t.value.style.star.apexes
              }),
              fill: t.value.style.star.useGradient ? `url(#star_gradient_over_${m.value})` : t.value.style.star.activeColor,
              stroke: t.value.style.star.activeColor
            }, null, 8, ct)
          ], 8, dt)),
          (a(), o("svg", {
            xmlns: s(k),
            viewBox: "0 0 100 100",
            height: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            style: i(`position:absolute;top:0;left:0;${c.value ? "" : "cursor:pointer"}`)
          }, [
            c.value ? y("", !0) : (a(), o("rect", {
              key: 0,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onClick: (p) => V(e),
              onMouseenter: (p) => d.value = e,
              onMouseleave: n[0] || (n[0] = (p) => d.value = void 0),
              tabindex: "0",
              onKeyup: q((p) => V(e), ["enter"])
            }, null, 40, mt)),
            c.value ? (a(), o("rect", {
              key: 1,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onMouseenter: (p) => d.value = e,
              onMouseleave: n[1] || (n[1] = (p) => d.value = void 0)
            }, null, 40, ht)) : y("", !0)
          ], 12, ft)),
          t.value.style.tooltip.show && O.value && c.value ? (a(), o("div", {
            key: 4,
            class: "vue-ui-rating-tooltip",
            style: i(`border:1px solid ${t.value.style.tooltip.borderColor};position:absolute;top:${-48 + t.value.style.tooltip.offsetY}px;left:50%;transform:translateX(-50%);width:fit-content;text-align:center;background:${t.value.style.tooltip.backgroundColor};display:${d.value === e ? "block" : "none"};padding:2px 12px;border-radius:${t.value.style.tooltip.borderRadius}px;box-shadow:${t.value.style.tooltip.boxShadow}`)
          }, [
            r("div", {
              style: i(`width:100%;display:flex;flex-direction:row;gap:6px;position:relative;text-align:center;color:${t.value.style.tooltip.color}`)
            }, [
              r("span", {
                style: i(`font-size:${t.value.style.tooltip.fontSize}px`)
              }, g(e) + ":", 5),
              r("span", {
                style: i(`font-weight:${t.value.style.tooltip.bold ? "bold" : "normal"};font-size:${t.value.style.tooltip.fontSize}px`)
              }, g(s($)(
                t.value.style.tooltip.formatter,
                u.dataset.rating[e],
                s(b)({
                  v: u.dataset.rating[e],
                  r: t.value.style.tooltip.roundingValue
                }),
                t.value
              )), 5),
              r("div", {
                style: i(`font-family:Arial !important;position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);color:${t.value.style.tooltip.borderColor}`)
              }, " ▼ ", 4)
            ], 4)
          ], 4)) : y("", !0)
        ], 4))), 256)),
        t.value.style.rating.show && t.value.style.rating.position === "right" ? (a(), o("div", {
          key: 1,
          style: i(`width:fit-content;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};padding-left:${t.value.style.rating.offsetX}px`)
        }, g(s($)(
          t.value.style.rating.formatter,
          v.value,
          s(b)({
            v: v.value,
            r: t.value.style.rating.roundingValue
          }),
          t.value
        )), 5)) : y("", !0)
      ], 4),
      t.value.style.rating.show && t.value.style.rating.position === "bottom" ? (a(), o("div", {
        key: 2,
        style: i(`width:100%;text-align:center;margin-top:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};margin-left:${t.value.style.rating.offsetX}px`)
      }, g(s($)(
        t.value.style.rating.formatter,
        v.value,
        s(b)({
          v: v.value,
          r: t.value.style.rating.roundingValue
        }),
        t.value
      )), 5)) : y("", !0)
    ], 36));
  }
}, kt = /* @__PURE__ */ lt(xt, [["__scopeId", "data-v-9e1d13d5"]]);
export {
  kt as default
};
